feat(prize): add lucky five selection page and API
- Add new pages for lucky five selection in user center. - Implement API endpoints for getting today's lucky five results and ranking. - Update menu list in user/discounts page to include lucky five selection. - Refactor prize API to include new endpoints for lucky five functionality.main
lenovo008\lenovo
4 months ago
parent
37aea5362b
commit
ecb9144a2e
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="五选一" :bgStyle="{ color: '#FFF' }">
|
||||
<view class="_bgc">
|
||||
|
||||
<view class="body">
|
||||
<view class="top">
|
||||
<view>
|
||||
<view class="txt">总人数</view> {{ rankingData.totalNum }}
|
||||
</view>
|
||||
<view>
|
||||
<view class="txt">我的排名</view> {{ rankingData.rankNum }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title">已出线人数列表</view>
|
||||
<view class="table">
|
||||
<scroll-view lower-threshold="300" scroll-y @scrolltolower="onPageScroll"
|
||||
class="scroll-content">
|
||||
<view v-for="(i, v) in ListData" :key="v" class="item">
|
||||
<view>{{ v }}</view>
|
||||
<view>{{ i.userName }}</view>
|
||||
<view>{{ formattedDateTime(i.outTime)}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onReachBottom, onShow, onUnload, onHide } from '@dcloudio/uni-app';
|
||||
import MineApi from '@/sheep/api/prize/index'
|
||||
import sheep from '@/sheep';
|
||||
import { name } from 'dayjs/locale/zh-cn';
|
||||
|
||||
|
||||
let params = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
})
|
||||
|
||||
onLoad(async () => {
|
||||
getRanking()// 获取排名
|
||||
getListData()// 今日已出线列表
|
||||
})
|
||||
|
||||
|
||||
let rankingData = ref([])
|
||||
const getRanking = async () => {
|
||||
const res = await MineApi.ranking()
|
||||
rankingData.value = res.data
|
||||
}
|
||||
let ListData = ref([])
|
||||
const getListData = async () => {
|
||||
const res = await MineApi.wzyycx(params.value)
|
||||
ListData.value.push(...res.data.list)
|
||||
}
|
||||
|
||||
const onPageScroll = (event) => {
|
||||
console.log(event, '12312313213132');
|
||||
params.value.pageNo += 1
|
||||
getListData()
|
||||
}
|
||||
|
||||
const formattedDateTime = (timestampInMilliseconds) => {
|
||||
const date = new Date(timestampInMilliseconds);
|
||||
const year = date.getFullYear();
|
||||
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||||
const day = ('0' + date.getDate()).slice(-2);
|
||||
const hours = ('0' + date.getHours()).slice(-2);
|
||||
const minutes = ('0' + date.getMinutes()).slice(-2);
|
||||
const seconds = ('0' + date.getSeconds()).slice(-2);
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
._bgc {
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.body {
|
||||
.top {
|
||||
display: flex;
|
||||
height: 150rpx;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 35rpx;
|
||||
border: 5rpx solid #e6e6e6;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff6f6;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
&>view {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #f5eaea;
|
||||
border-radius: 20rpx;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 35rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.table {
|
||||
// background-color: red;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 72vh;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.scroll-content {
|
||||
height: 100%;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
|
||||
&>view:nth-of-type(1) {
|
||||
width: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="活动中心" :bgStyle="{ color: '#FFF' }">
|
||||
<view class="_bgc">
|
||||
|
||||
<view class="menu">
|
||||
<view v-for="(v, i) in menulist" :key="i">
|
||||
<view class="menu_item" @tap="sheep.$router.go(v?.path)">
|
||||
<image class="menu_item_img" :src="v?.url"></image>
|
||||
<text class="menu_item_text">{{ v.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="menu">
|
||||
<view class="menu_item" >
|
||||
<image class="item_img"
|
||||
src="http://zda.huamar.com/admin-api/infra/file/4/get/d4b717094fa8162e981eb8c17cd4cef1f25da1327d4d214fece3375962b5e59f.png">
|
||||
</image>
|
||||
<text class="menu_item_text">抽奖</text>
|
||||
</view>
|
||||
<view class="menu_item">
|
||||
<image class="item_img"
|
||||
src="http://zda.huamar.com/admin-api/infra/file/4/get/d4b717094fa8162e981eb8c17cd4cef1f25da1327d4d214fece3375962b5e59f.png">
|
||||
</image>
|
||||
<text class="menu_item_text">幸运五占一</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onReachBottom, onShow, onUnload, onHide } from '@dcloudio/uni-app';
|
||||
import MineApi from '@/sheep/api/prize/index'
|
||||
import sheep from '@/sheep';
|
||||
|
||||
let menulist = ref([
|
||||
{
|
||||
title: '抽奖',
|
||||
path: '/pages/user/prize',
|
||||
url: 'http://zda.huamar.com/admin-api/infra/file/4/get/d4b717094fa8162e981eb8c17cd4cef1f25da1327d4d214fece3375962b5e59f.png'
|
||||
},
|
||||
{
|
||||
title: '幸运五选一',
|
||||
path: '/pages/user/alternative',
|
||||
url: 'http://zda.huamar.com/admin-api/infra/file/4/get/082a147eb0480692b717a010b42b0299b27a563b0c85840708b9c53247dcb52f.png'
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
._bgc {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
.menu_item {
|
||||
margin: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
.menu_item_img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue