301 lines
8.1 KiB
Vue
301 lines
8.1 KiB
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>
|