charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
Files
5f7d0ceb79b9fb408095d8eb8766a7a307e858bb
frontend-app/pages/accelerate/accelerate.vue
T

282 lines
677 KiB
Vue
Raw Normal View History

1
2025-08-05 15:25:23 +08:00
<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>
</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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAANMCAYAAAADviibAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAC7qADAAQAAAABAAADTAAAAADV6rcYAABAAElEQVR4Aey923obubJuWa41n6D7pq/W+79g901/s7zjjwMQyANF2qItlEfaygTijAFkEqRk+dv//u//fv+LAwIQgAAEIAABCEAAAhD40gT+/tLVURwEIAABCEAAAhCAAAQg4ATYuLMQIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAABCAAAQhAgI07awACEIAABCAAAQhAAAIbEGDjvsEkUSIEIAABCEAAAhCAAATYuLMGIAABCEAAAhCAAAQgsAEBNu4bTBIlQgACEIAA
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>
Reference in New Issue Copy Permalink