173 lines
3.7 KiB
Vue
173 lines
3.7 KiB
Vue
<template name="actibity-countdown">
|
|
<view style="display: inline-flex;">
|
|
<text style="float:left;">{{Type==0 ? __('距离本场开始还有') : __('距离本场结束还有')}}</text>
|
|
<text class="uni-countdown-time">{{d}}</text>
|
|
<text style="float:left;">{{__('天')}}</text>
|
|
<text class="uni-countdown-time">{{h}}</text>
|
|
<text style="float:left;">:</text>
|
|
<text class="uni-countdown-time">{{i}}</text>
|
|
<text style="float:left;">:</text>
|
|
<text class="uni-countdown-time">{{s}}</text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "actibity-countdown",
|
|
props: {
|
|
bgrColor: {
|
|
type: String,
|
|
default: "#FFFFFF"
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: "#FFFFFF"
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
value: "#FFFFFF"
|
|
},
|
|
splitorColor: {
|
|
type: String,
|
|
default: "#FFFFFF"
|
|
},
|
|
timer: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
Type: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
setTime: null,
|
|
d: '00',
|
|
h: '00',
|
|
i: '00',
|
|
s: '00',
|
|
leftTime: 0
|
|
}
|
|
},
|
|
created: function(e) {
|
|
var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
|
|
var res = this.timer.match(reg);
|
|
if (res == null) {
|
|
//console.log('时间格式错误');
|
|
return false;
|
|
} else {
|
|
var year = parseInt(res[1]);
|
|
if (year < 1000) {
|
|
//console.log('时间格式错误');
|
|
return false;
|
|
}
|
|
var month = parseInt(res[2]);
|
|
var day = parseInt(res[3]);
|
|
var h = parseInt(res[4]);
|
|
if (h < 0 || h > 24) {
|
|
//console.log('时间格式错误');
|
|
return false;
|
|
}
|
|
var i = parseInt(res[5]);
|
|
if (i < 0 || i > 60) {
|
|
//console.log('时间格式错误');
|
|
return false;
|
|
}
|
|
var s = parseInt(res[6]);
|
|
if (s < 0 || s > 60) {
|
|
//console.log('时间格式错误');
|
|
return false;
|
|
}
|
|
var leftTime = new Date(year, month - 1, day, h, i, s);
|
|
this.leftTime = leftTime;
|
|
this.countDown(this);
|
|
this.setInterValFunc(this);
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.setTime)
|
|
},
|
|
methods: {
|
|
setInterValFunc: function(obj) {
|
|
this.setTime = setInterval(function() {
|
|
obj.countDown(obj);
|
|
}, 1000);
|
|
},
|
|
countDown: function(self) {
|
|
var leftTime = self.leftTime - new Date();
|
|
if (leftTime > 0) {
|
|
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);
|
|
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10);
|
|
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
|
|
var seconds = parseInt(leftTime / 1000 % 60, 10);
|
|
} else {
|
|
var days = 0,
|
|
hours = 0,
|
|
minutes = 0,
|
|
seconds = 0;
|
|
}
|
|
|
|
|
|
if (days < 10) {
|
|
days = '0' + days;
|
|
}
|
|
if (hours < 10) {
|
|
hours = '0' + hours;
|
|
}
|
|
if (minutes < 10) {
|
|
minutes = '0' + minutes;
|
|
}
|
|
if (seconds < 10) {
|
|
seconds = '0' + seconds;
|
|
}
|
|
self.d = days;
|
|
self.h = hours;
|
|
self.i = minutes;
|
|
self.s = seconds;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.uni-countdown {
|
|
padding: 2rpx 0;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.uni-countdown-splitor {
|
|
width: auto !important;
|
|
justify-content: center;
|
|
line-height: 44rpx;
|
|
padding: 0 5rpx;
|
|
}
|
|
|
|
.uni-countdown-numbers {
|
|
line-height: 44rpx;
|
|
width: auto !important;
|
|
padding: 0 10rpx;
|
|
justify-content: center;
|
|
height: 44rpx;
|
|
|
|
border-radius: 8rpx;
|
|
margin: 0 5rpx;
|
|
border: 1px solid #000000;
|
|
font-size: 22rpx;
|
|
}
|
|
.uni-countdown-time{
|
|
background-color: #E72234;
|
|
border-radius:40rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
font-size:26rpx;
|
|
font-family:PingFang SC;
|
|
font-weight:400;
|
|
color:#FFFFFF;
|
|
line-height:40rpx;
|
|
margin:30rpx 6rpx;
|
|
float:left;
|
|
}
|
|
|
|
|
|
</style>
|