|
@@ -1,99 +1,232 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <image src="../../static/img/ttchou.png" mode="" class="bg"></image>
|
|
|
- <view class="flex v-list">
|
|
|
- <view class="action">
|
|
|
- 已观看
|
|
|
- </view>
|
|
|
- <view class="">
|
|
|
- 未看完
|
|
|
+ <view class="wap">
|
|
|
+ <view class="base-pst djs-wrap flex">
|
|
|
+ <uni-countdown color="#000000" background-color="#fff" splitor-color="#FFFFFF" :show-day="false" :day="0"
|
|
|
+ :hour="seckillObj.stopTimeH" :minute="seckillObj.stopTimeM" :second="seckillObj.stopTimeS"
|
|
|
+ @timeup="goStop"></uni-countdown>
|
|
|
+ </view>
|
|
|
+ <image src="../../static/img/goto.png" mode="" class="base-pst goto" @click="golock"></image>
|
|
|
+ <view class="base-pst content-wrap">
|
|
|
+ <view class="tit">
|
|
|
+ 只要完成视频任务,即可参与抽奖
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- 未看完
|
|
|
+ <view class="jl-list flex" v-for="item in puser.draw">
|
|
|
+ <view class="jl-tit">
|
|
|
+ {{item.awards}}:{{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="jl-mun">
|
|
|
+ {{item.num}} 份
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <image src="../../static/img/golock.png" mode="" class="golock" @click="golock"></image>
|
|
|
- <view class="zj-wrap">
|
|
|
-
|
|
|
+ <image src="../../static/img/zjmd.png" mode="" class="zjmd"></image>
|
|
|
+ <scroll-view scroll-y="true" class="jl-end">
|
|
|
+ <view class="end-list flex" v-for="(item,index) in endList">
|
|
|
+ <view class="">
|
|
|
+ {{showTime(item.add_time)}}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ {{showPhone(item.phone) }}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ {{showTit(item.draw_id)}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ passUser,lotteryLst
|
|
|
+ } from '@/api/zero.js'
|
|
|
+ import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ uniCountdown
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ seckillObj: {
|
|
|
+ stopTime: 0, //结束时间
|
|
|
+ stop: false, //是否结束
|
|
|
+ stopTimeH: 0, //小时
|
|
|
+ stopTimeM: 0, //分钟
|
|
|
+ stopTimeS: 5 //秒钟
|
|
|
+ },
|
|
|
+ puser: {},
|
|
|
+ endList: []
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
onShow() {
|
|
|
-
|
|
|
+ this.passUser()
|
|
|
+ this.lotteryLst()
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
onReady() {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ showPhone(phone) {
|
|
|
+ const phoneNumber = phone + ''; // 手机号
|
|
|
+ const hiddenNumber = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
|
|
+ return hiddenNumber
|
|
|
+ },
|
|
|
+ showTime(time) {
|
|
|
+ const timestamp = time*1000; // 时间戳
|
|
|
+
|
|
|
+ const date = new Date(timestamp); // 创建 Date 对象
|
|
|
+
|
|
|
+ const year = date.getFullYear(); // 获取年份
|
|
|
+ const month = date.getMonth() + 1; // 获取月份(注意月份是从 0 开始计数的,所以要加 1)
|
|
|
+ const day = date.getDate(); // 获取日期
|
|
|
+ const hours = date.getHours(); // 获取小时
|
|
|
+ const minutes = date.getMinutes(); // 获取分钟
|
|
|
+ const seconds = date.getSeconds(); // 获取秒钟
|
|
|
+
|
|
|
+ // const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+ return `${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
+ // console.log(formattedTime);
|
|
|
+
|
|
|
+ },
|
|
|
+ passUser() {
|
|
|
+ passUser().then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ let data = res.data
|
|
|
+ this.puser = res.data
|
|
|
+ this.getStep(data.service_time,data.lottery)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ lotteryLst() {
|
|
|
+ lotteryLst().then(res => {
|
|
|
+ this.endList = res.data.list
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showTit(id) {
|
|
|
+ let qdata = this.puser.draw.find(item => item.id == id)
|
|
|
+ return qdata.name
|
|
|
+ },
|
|
|
+ goStop() {
|
|
|
+ // console.log('is_end')
|
|
|
+ this.lotteryLst()
|
|
|
+ },
|
|
|
golock() {
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/zero/ren'
|
|
|
+ url: '/pages/zero/ren'
|
|
|
})
|
|
|
+ },
|
|
|
+ getStep(timestamp1, timestamp2) {
|
|
|
+ //timestamp1 服务器时间
|
|
|
+ //timestamp2 开奖时间
|
|
|
+ const diff = (timestamp2 - timestamp1)*1000; // 计算时间戳差值(毫秒)
|
|
|
+ if (diff < 0) {
|
|
|
+ this.seckillObj = {
|
|
|
+ stopTime: 0, //结束时间
|
|
|
+ stop: true, //是否结束
|
|
|
+ stopTimeH: 0, //小时
|
|
|
+ stopTimeM: 0, //分钟
|
|
|
+ stopTimeS: 0 //秒钟
|
|
|
+ }
|
|
|
+ this.lotteryLst()
|
|
|
+ }else {
|
|
|
+ this.seckillObj = {
|
|
|
+ stopTime: timestamp2, //结束时间
|
|
|
+ stop: false, //是否结束
|
|
|
+ stopTimeH: Math.floor(diff / (1000 * 60 * 60)), //小时
|
|
|
+ stopTimeM: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)), //分钟
|
|
|
+ stopTimeS: Math.floor((diff % (1000 * 60)) / 1000) //秒钟
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- background-color: #fb8048;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .content {
|
|
|
- padding-top: 95rpx;
|
|
|
- }
|
|
|
- .bg {
|
|
|
- display: block;
|
|
|
- width: 706rpx;
|
|
|
- height: 1185rpx;
|
|
|
+ .base-pst {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
margin: auto;
|
|
|
}
|
|
|
- .v-list {
|
|
|
- width: 370rpx;
|
|
|
- height: 30rpx;
|
|
|
- // background-color: red;
|
|
|
- // border: 1px solid red;
|
|
|
- position: absolute;
|
|
|
- top: 740rpx;
|
|
|
- left: 215rpx;
|
|
|
- font-size: 19rpx;
|
|
|
- text-align: center;
|
|
|
- view {
|
|
|
- width: 29%;
|
|
|
- color: #D0373D;
|
|
|
+
|
|
|
+ .wap {
|
|
|
+ width: 100%;
|
|
|
+ height: 1800rpx;
|
|
|
+ background-image: url('../../static/img/choubg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .djs-wrap {
|
|
|
+ width: 698rpx;
|
|
|
+ height: 247rpx;
|
|
|
+ top: 323rpx;
|
|
|
+ background-image: url('../../static/img/djs-wap-bg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 80rpx;
|
|
|
}
|
|
|
- .action {
|
|
|
- color: #999999;
|
|
|
+
|
|
|
+ .goto {
|
|
|
+ width: 354rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ top: 600rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-wrap {
|
|
|
+ // background-color: red;
|
|
|
+ color: #C90605;
|
|
|
+ height: 960rpx;
|
|
|
+ top: 750rpx;
|
|
|
+ width: 630rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ padding-top: 50rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jl-list {
|
|
|
+ background-image: url('../../static/img/jllist.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 444rpx;
|
|
|
+ height: 69rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
+ .jl-tit {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #A10920;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jl-mun {
|
|
|
+ text-align: center;
|
|
|
+ width: 100rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFF2D6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zjmd {
|
|
|
+ width: 414rpx;
|
|
|
+ height: 73rpx;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .golock {
|
|
|
- width: 354rpx;
|
|
|
- height: 105rpx;
|
|
|
- position: absolute;
|
|
|
- left: 215rpx;
|
|
|
- top: 890rpx;
|
|
|
+
|
|
|
+ .jl-end {
|
|
|
+ height: 300rpx;
|
|
|
}
|
|
|
- .zj-wrap {
|
|
|
- width: 560rpx;
|
|
|
- height: 254rpx;
|
|
|
- // background-color: #fff;
|
|
|
- border: 1px solid red;
|
|
|
- position: absolute;
|
|
|
- left: 118rpx;
|
|
|
- top: 1030rpx;
|
|
|
+
|
|
|
+ .end-list {
|
|
|
+ padding: 0 30rpx;
|
|
|
}
|
|
|
</style>
|