frontend-app/pages/login_package/accelerate/accelerate.vue

<template>
	<view class="accelerate_warp">
		<view class="accelerate_header">
			<view class="header_">
				<up-image src="/static/common/left_b.png" width="18" height="18" bgColor="#f1f6ff00"
					@click="jumpMine" />
			</view>
			<view class="title_">冻结倒计时</view>
			<up-count-down :time="timesValue" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
				<view class="time">
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.days > 10 ? getFirstDigit(timeData.days) : 0
							}}</text>
					</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.days > 10 ? getLastDigit(timeData.days) :
							timeData.days
							}}</text>
					</view>
					<view class="time__doc">天</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.hours > 10 ? getFirstDigit(timeData.hours) : 0
							}}</text>
					</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.hours > 10 ? getLastDigit(timeData.hours) :
							timeData.hours }}</text>
					</view>
					<view class="time__doc">:</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes > 10 ? getFirstDigit(timeData.minutes) : 0
							}}</text>
					</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes > 10 ? getLastDigit(timeData.minutes) :
							timeData.minutes }}</text>
					</view>
					<view class="time__doc">:</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds > 10 ? getFirstDigit(timeData.seconds) : 0
							}}</text>
					</view>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds > 10 ? getLastDigit(timeData.seconds) :
							timeData.seconds
						}}</text>
					</view>
				</view>
			</up-count-down>
			<view class="list_">
				<view class="list_item">
					<view class="list_item_title">{{ sumTimes }}</view>
					<view class="list_item_msg">累计加速次数</view>
				</view>
				<view class="list_fg"></view>
				<view class="list_item">
					<view class="list_item_title">{{ quickenTimes }}</view>
					<view class="list_item_msg">剩余加速次数</view>
					<view class="list_item_clear_msg" v-if="nextClearTime">清零时间</view>
					<view class="list_item_clear_msg" v-if="nextClearTime">({{ nextClearTime }})</view>
				</view>
				<view class="list_fg"></view>
				<view class="list_item">
					<view class="list_item_title">{{ lockTimes }}</view>
					<view class="list_item_msg">冻结抽奖次数</view>
				</view>
			</view>
		</view>
		<view class="instructions_warp">
			<view class="instructions_title">加速说明</view>
			<view class="instructions_content">
				<view>获取方式：</view>
				<view>（1）通过购买报单区和好物区商品的直推和间推奖励获得</view>
				<view>（2）转盘抽奖获得</view>
				<view>逻辑说明：</view>
				<view>（1）通过内购购买商品获得的是抽奖次数，并不能直接用于抽奖，能够抽奖的次数需要每天进行释放，或者直推间推下线的奖励获得可抽奖的次数</view>
				<view>（2）当可抽奖次数大于抽奖次数时，可抽奖次数将会被冻结24个小时，内购商品解冻，否则冻结的抽奖次数会消失。</view>
				<view>最终解释权归商城所有！！！</view>
			</view>
		</view>
		<qiaobao-assistant page-key="pages/login_package/accelerate/accelerate" title="我的推广" />
	</view>
</template>

<script>
import { getQuickenTimes } from '@/api/raffle.js';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

export default {
	data() {
		return {
			timeData: {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
			},
			sumTimes: 0,// 总加速次数
			quickenTimes: 0,// 剩余加速次数
			lockTimes: 0,// 冻结抽奖次数
			nextClearTime: null,// 下次清零时间
			timesValue: 0,// 倒计时
		};
	},
	mounted() {
		this.getQuickenTimes();
	},
	methods: {
		jumpMine() {
			uni.switchTab({// 首页
				url: '/pages/mine/mine',
			})
		},
		async getQuickenTimes() {
			const resp = await getQuickenTimes();
			if (resp && resp.bizcode === 100) {
				const data = resp.data || {};
				if (data && Object.keys(data).length !== 0) {
					this.sumTimes = data.sumTimes;//累计加速次数
					this.lockTimes = data.lockTimes;// 冻结抽奖次数
					this.quickenTimes = data.quickenTimes;// 剩余加速次数
					this.nextClearTime = dayjs(data.nextClearTime).format("YYYY-MM-DD HH:mm:ss");
					// 下次释放时间 nextClearTime 先用这个字段测试，测试完需要改为 nextReleaseTime
					if (data.nextReleaseTime) {
						// 获取时间戳
						let oldTime = new Date(data.nextReleaseTime).getTime();
						let nowTime = new Date().getTime();
						// 相差的时间 差
						let Time = oldTime - nowTime;
						// 向下取整 时间戳 / 1000 为秒
						// 秒*60 为分 分*60为小时 小时*24为天数
						let day = Math.floor(Time / (1000 * 60 * 60 * 24));
						let hour = Math.floor(Time / (1000 * 60 * 60) % 24);
						let minute = Math.floor(Time / (1000 * 60) % 60);
						let second = Math.floor(Time / (1000) % 60);

						this.timeData = {
							days: day,
							hours: hour,
							minutes: minute,
							seconds: second,
						}
						const millisecond =
							Number(day * 24 * 3600 * 1000) +
							Number(hour * 3600 * 1000) +
							Number(minute * 60 * 1000) +
							Number(second * 1000);
						this.timesValue = millisecond;
					}
				}
			}
		},
		// 定义 onChange 方法
		onChange(e) {
			// console.log("e",e);
			this.timeData = e;
		},
		// 截取字符串的第一位数字
		getFirstDigit(str) {
			if (str) {
				return Math.floor(str / 10) % 10;
			}
			return 0;
		},

		// 截取字符串的最后一位数字
		getLastDigit(str) {
			if (str) {
				return str % 10;
			}
			return 0;
		},
	}
}
</script>

<style lang="scss" scoped>
.accelerate_warp {
	position: relative;
}

.accelerate_header {
	height: 800rpx;
	background-image: url("https://static.tbmall.xin/static/accelerate_opt_1.png");
	background-size: 100% 100%;
	background-position: center;
	/* 将图片居中显示 */
	padding: 90rpx 40rpx 0;
	color: #ffffff;

	.header_ {
		margin-top: 30rpx;
	}

	.title_ {
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 37rpx;
		text-align: center;
	}

	.time {
		@include flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 48rpx;

		&__custom {
			width: 30px;
			height: 30px;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 10rpx;
			border: 2rpx solid #FFFFFF;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 32rpx;
				text-align: center;
			}
		}

		&__doc {
			color: rgba(255, 255, 255, 0.2);
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.list_ {
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		margin-top: 70rpx;
		align-items: flex-end;

		.list_item {
			width: 30%;
			text-align: center;
		}

		.list_item_title {
			font-weight: bold;
			font-size: 50rpx;
			color: #FFFFFF;
		}

		.list_item_msg {
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-top: 16rpx;
		}

		.list_item_clear_msg {
			font-size: 16rpx;
		}

		.list_fg {
			width: 1rpx;
			height: 80rpx;
			background: #FFFFFF;
		}
	}
}

.instructions_warp {
	position: absolute;
	top: 600rpx;
	width: calc(100% - 60rpx);
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	padding: 30rpx;

	.instructions_title {
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
	}

	.instructions_content {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 20rpx;
	}
}
</style>