yunhai/pages/zero/chou.vue

<template>
	<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="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>
			<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'
				})
			},
			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>
	.base-pst {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	.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;
		}

		.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;
			}
		}
	}

	.jl-end {
		height: 300rpx;
	}

	.end-list {
		padding: 0 30rpx;
	}
</style>