效果图
实现原理：后端会给一个截止时间，前端获取当前时间，都转成时间戳，然后相减获得相差时间戳，然后转成天、小时、分钟、秒，通过定时器让他动起来就OK了。（需要注意的点是，当倒计时到达0的时候需要清除定时器。）
上代码
<template>
<!-- 许愿 -->
<view :style="{ paddingTop: statusBarHeight + 'px' }">
<!--#ifdef MP-WEIXIN-->
<ym-navigation-bar background="#9DB5C2" back title="许愿池" fixed color="#ffffff">
</ym-navigation-bar>
<!--#endif-->
<view class="wishing-content">
<view class="size_20 top_title">
冬日温暖礼盒
</view>
<view class="size_14 countDown">
距活动结束
<text>{
{
wishingDays}}</text>
天
<text>{
{
wishingHours.toString().substr(0,1)}}</text>
<text>{
{
wishingHours.toString().substr(-1)}}</text>
小时
<text>{
{
wishingMinutes.toString().substr(0,1)}}</text>
<text>{
{
wishingMinutes.toString().substr(-1)}}</text>
分
<text>{
{
wishingSeconds.toString().substr(0,1)}}</text>
<text>{
{
wishingSeconds.toString().substr(-1)}}</text>
秒
</view>
<view class="size_14 list">
中奖名单>
</view>
<view class="size_20 center_title">
探秘滑雪场的浪漫
</view>
<view class="img_content">
<img class="more-img" :src="dbDownArrowUrl"/>
</view>
<view class="size_14">
滑雪系列羽绒服+太舞滑雪双人行
</view>
<view class="btn_box">
<btn class="btn" @click.native="clickA">我的许愿码</btn>
<btn class="btn">我的许愿礼</btn>
<btn class="btn">获取心愿值</btn>
</view>
<view class="size_16">
了解会员节更多惊喜
</view>
<view class="rule">
活动规则
</view>
</view>
</view>
</template>
<script>
import YmNavigationBar from "../../components/navigation-bar/ym-navigation-bar"
import store from "@/store/index.js"
import crmApiService from '@/api/crmApi'
import Btn from "../../components/wishing-btn/btn.vue"
let toast= msg=>{
uni.showToast({
title: msg,
icon:'none'
});
}
export default {
components: {
YmNavigationBar,
Btn
},
data() {
return {
wishingDays:'',
wishingHours:'',
wishingMinutes:'',
wishingSeconds:'',
}
},
computed: {
statusBarHeight() {
return store.getters.statusBarHeight + 48
},
dbDownArrowUrl () {
return this.$config.ossUrl + 'discount_coupon.png'
}
},
onShow() {
let time = new Date('2022-08-27').getTime()
this.wishingCountDown(time)
},
methods: {
clickA () {
console.log('我的许愿码')
},
wishingCountDown(e){
return new Promise((rel,rej)=>{
let date = new Date();
let time = date.getTime();//当前时间
if(e - time > 0){
var lag = (e- time);
var days = Math.floor(lag / (1000 * 60 * 60 * 24));
var hours = Math.floor((lag % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((lag % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((lag % (1000 * 60)) / 1000);
//只有一位数就在前面加0并转为字符串
function part(val){
var lenval = (val + '').length;
if(lenval >= 2){
return val;
}else{
return '0' + val;
}
}
this.wishingDays = days
var wishingHours = hours; //将天数转成时并加上原有的时
this.wishingHours = part(wishingHours); //时
this.wishingMinutes = part(minutes); //分
this.wishingSeconds = part(seconds); //秒
var setTime = setInterval(() =>{
var h = parseInt(this.wishingHours);
var m = parseInt(this.wishingMinutes);
var s = parseInt(this.wishingSeconds);
if( h > 0 || m > 0 || s > 0){
if(s > 0){
s -=1;
this.wishingSeconds = part(s);
}else{
//分减一，秒加59
if(m > 0){
m -=1;
this.wishingMinutes = part(m);
this.wishingSeconds = 59;
}else{
//时减一，分加59，秒加59
if(h > 0){
h -=1;
this.wishingHours = part(h);
this.wishingMinutes = 59;
this.wishingSeconds = 59;
}
}
}
}else{
rel();//活动结束回调
console.log('倒计时结束！')
clearInterval(setTime);
}
},1000)
}
})
}
}
}
</script>
<style scoped lang="scss">
.wishing-content{
position:fixed;
height: 100%;
width: 100%;
padding: 0 50upx;
text-align: center;
background-color:cadetblue;
font-family: PingFangSC-Medium, PingFang SC;
.size_20{
font-size: 40upx;
color: #fff;
font-weight: 500;
line-height: 56upx;
}
.size_14{
font-size: 28upx;
color: #fff;
line-height: 40upx;
}
.size_16{
font-size: 32upx;
color: #fff;
line-height: 44upx;
text-decoration:underline;
}
.top_title{
margin-top: 300upx;
margin-bottom: 20upx;
}
.countDown{
margin-bottom: 18upx;
width: 100%;
height: 80upx;
border-radius: 40upx;
text-align: center;
line-height: 80upx;
background-color: rgba($color: #1D459A, $alpha: 0.1);
text{
display: inline-block;
vertical-align: middle;
height: 40upx;
padding: 0 8upx 0 8upx;
line-height: 40upx;
border-radius: 6upx;
background-color: #fff;
color: #1559AA;
margin-left: 7upx;
margin-right: 7upx;
}
}
.list{
margin-bottom: 40upx;
}
.center_title{
margin-bottom: 20upx;
}
.img_content{
width: 100%;
height: 376upx;
margin-bottom: 20upx;
img{
width: 100%;
height: 100%;
border-radius: 24upx;
}
}
.btn_box{
display: flex;
justify-content:space-around;
font-size: 30upx;
color: #fff;
font-weight: 400;
margin-top: 70upx;
margin-bottom: 56upx;
.btn{
width: 200upx;
height: 80upx;
line-height: 80upx;
}
}
.rule{
width: 58upx;
height: 146upx;
border-radius: 12upx 0 0 12upx;
background-color: #97A8CB;
color: #fff;
font-size: 28upx;
font-weight: 400;
text-align: center;
writing-mode: vertical-lr;
padding-left: 11upx;
position: absolute;
top: 160upx;
right: 0;
}
}
</style>