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