first commit
This commit is contained in:
wangxiaowei
240
components/countdown/countdown-act.vue
Normal file
240
components/countdown/countdown-act.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<!--倒计时-->
|
||||
<view class="countdown" :style="'color:'+color" :class="activeName">
|
||||
<template v-if="config.type == null">
|
||||
{{title}}<text class="daybox" :style="'background-color: '+back_color+';color:'+cut_color">{{ day }}天</text>
|
||||
<text class="numbox">{{ hour }}:{{ minute }}:{{ second }}</text>
|
||||
</template>
|
||||
<template v-if="config.type === 'text'">
|
||||
{{ parseInt(day * 24) + parseInt(hour) }}:{{ minute }}:{{ second }}
|
||||
</template>
|
||||
<template v-if="config.type === 'preview'">
|
||||
{{title}}<text class="daybox" :style="'background-color: '+back_color+';color:'+cut_color">{{ day }}天</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ hour }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color">:</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ minute }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color">:</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ second }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color"></text>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/*状态*/
|
||||
status: 0,
|
||||
/*天*/
|
||||
day: '0',
|
||||
/*时*/
|
||||
hour: '0',
|
||||
/*分*/
|
||||
minute: '0',
|
||||
/*秒*/
|
||||
second: '0',
|
||||
/*定时器*/
|
||||
timer: null,
|
||||
/*剩余秒*/
|
||||
totalSeconds: 0,
|
||||
/*标题*/
|
||||
title: '活动剩余：'
|
||||
};
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
type: 'all',
|
||||
};
|
||||
}
|
||||
},
|
||||
back_color: {
|
||||
type: String,
|
||||
default: ()=>''
|
||||
},
|
||||
cut_color: {
|
||||
type: String,
|
||||
default: ()=>''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ()=>''
|
||||
},
|
||||
start_name: {
|
||||
type: String,
|
||||
default: ()=>'距开始:'
|
||||
},
|
||||
end_name: {
|
||||
type: String,
|
||||
default: ()=>'距结束:'
|
||||
},
|
||||
activeName:{
|
||||
type:String,
|
||||
default: ()=>''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
config: {
|
||||
deep: true,
|
||||
handler: function(n, o) {
|
||||
if (n != o && n.endstamp != 0) {
|
||||
if (n.title && typeof n.title != 'undefined') {
|
||||
//this.title = n.title;
|
||||
}
|
||||
this.setTime();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*轮循*/
|
||||
setTime() {
|
||||
let self = this;
|
||||
self.timer = setInterval(function() {
|
||||
self.init();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/*初始化*/
|
||||
init() {
|
||||
let nowseconds = Date.now() / 1000;
|
||||
if (nowseconds < this.config.startstamp) {
|
||||
//活动时间还没到
|
||||
this.status = 1;
|
||||
this.totalSeconds = parseInt(this.config.startstamp - nowseconds);
|
||||
this.countDown();
|
||||
this.title = this.start_name;
|
||||
}else if (nowseconds > this.config.endstamp) {
|
||||
//活动已过期
|
||||
this.status = 2;
|
||||
this.title = this.end_name;
|
||||
} else {
|
||||
//活动进行中
|
||||
this.totalSeconds = parseInt(this.config.endstamp - nowseconds);
|
||||
this.status = 0;
|
||||
this.countDown();
|
||||
this.title = this.end_name;
|
||||
}
|
||||
this.$emit('returnVal', this.status);
|
||||
},
|
||||
|
||||
/*计算时分秒*/
|
||||
countDown() {
|
||||
let totalSeconds = this.totalSeconds;
|
||||
//天数
|
||||
let day = Math.floor(totalSeconds / (60 * 60 * 24));
|
||||
//取模（余数）
|
||||
let modulo = totalSeconds % (60 * 60 * 24);
|
||||
//小时数
|
||||
let hour = Math.floor(modulo / (60 * 60));
|
||||
modulo = modulo % (60 * 60);
|
||||
//分钟
|
||||
let minute = Math.floor(modulo / 60);
|
||||
//秒
|
||||
let second = modulo % 60;
|
||||
this.day = day;
|
||||
this.hour = this.convertTwo(hour);
|
||||
this.minute = this.convertTwo(minute);
|
||||
this.second = this.convertTwo(second);
|
||||
this.totalSeconds--;
|
||||
},
|
||||
|
||||
/*转两位数*/
|
||||
convertTwo(n) {
|
||||
let str = '';
|
||||
if (n < 10) {
|
||||
str = '0' + n;
|
||||
} else {
|
||||
str = n;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
/*把时间戳转普通时间*/
|
||||
getLocalTime(nS) {
|
||||
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
|
||||
},
|
||||
clear() {
|
||||
console.log(1)
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.countdown{
|
||||
border-radius: 16rpx 0 16rpx 16rpx;
|
||||
border: 1rpx solid #F4DACF;
|
||||
padding: 2rpx;
|
||||
padding-right:10rpx;
|
||||
@include border_color('bg-bargain');
|
||||
.numbox{
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown .daybox {
|
||||
padding: 0 16rpx;
|
||||
border-radius: 200rpx;
|
||||
font-size: 22rpx;
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
.previewProduct text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.previewProduct .box {
|
||||
padding: 0;
|
||||
font-size: 22rpx;
|
||||
background: #ffffff;
|
||||
color: #ff4c01;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: inline-block;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.previewProduct .daybox {
|
||||
padding: 0;
|
||||
font-size: 22rpx;
|
||||
background: none;
|
||||
}
|
||||
.previewProduct.countdown {
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 22rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.diy-previewProduct text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.diy-previewProduct .box {
|
||||
padding: 0;
|
||||
font-size: 18rpx;
|
||||
background: none;
|
||||
}
|
||||
.diy-previewProduct .daybox {
|
||||
padding: 0;
|
||||
font-size: 18rpx;
|
||||
background: none;
|
||||
}
|
||||
.diy-previewProduct.countdown {
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 18rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
154
components/countdown/countdown-presale.vue
Normal file
154
components/countdown/countdown-presale.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<!--倒计时-->
|
||||
<view class="countdown" :style="'color:'+color">
|
||||
<template v-if="status==2">活动已结束</template>
|
||||
<template v-else>
|
||||
{{title}} <text class="mr10">{{parseInt(day)+'天'}}</text>
|
||||
<text class="f28" :style="'font-size:'+timeSize+';'">{{ parseInt(hour) }}:{{ minute }}:{{ second }}</text>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/*状态*/
|
||||
status: 0,
|
||||
/*天*/
|
||||
day: '0',
|
||||
/*时*/
|
||||
hour: '0',
|
||||
/*分*/
|
||||
minute: '0',
|
||||
/*秒*/
|
||||
second: '0',
|
||||
/*定时器*/
|
||||
timer: null,
|
||||
/*剩余秒*/
|
||||
totalSeconds: 0,
|
||||
/*标题*/
|
||||
title: '还剩'
|
||||
};
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
type: 'all',
|
||||
};
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return '#ffffff';
|
||||
}
|
||||
},
|
||||
timeSize: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return '28rpx';
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
config: {
|
||||
deep: true,
|
||||
handler: function(n, o) {
|
||||
if (n != o && n.endstamp != 0) {
|
||||
if (n.title && typeof n.title != 'undefined') {
|
||||
this.title = n.title;
|
||||
}
|
||||
this.setTime();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*轮循*/
|
||||
setTime() {
|
||||
let self = this;
|
||||
self.timer = setInterval(function() {
|
||||
self.init();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/*初始化*/
|
||||
init() {
|
||||
let nowseconds = Date.now() / 1000;
|
||||
if (nowseconds < this.config.startstamp) {
|
||||
//活动时间还没到
|
||||
this.status = 1;
|
||||
this.title = '距开始还剩';
|
||||
} else if (nowseconds > this.config.endstamp) {
|
||||
//活动已过期
|
||||
this.status = 2;
|
||||
} else {
|
||||
//活动进行中
|
||||
this.totalSeconds = parseInt(this.config.endstamp - nowseconds);
|
||||
this.status = 0;
|
||||
this.title = '距截止还剩';
|
||||
this.countDown();
|
||||
}
|
||||
this.$emit('returnVal', this.status);
|
||||
},
|
||||
|
||||
/*计算时分秒*/
|
||||
countDown() {
|
||||
let totalSeconds = this.totalSeconds;
|
||||
//天数
|
||||
let day = Math.floor(totalSeconds / (60 * 60 * 24));
|
||||
//取模（余数）
|
||||
let modulo = totalSeconds % (60 * 60 * 24);
|
||||
//小时数
|
||||
let hour = Math.floor(modulo / (60 * 60));
|
||||
modulo = modulo % (60 * 60);
|
||||
//分钟
|
||||
let minute = Math.floor(modulo / 60);
|
||||
//秒
|
||||
let second = modulo % 60;
|
||||
this.day = this.convertTwo(day);
|
||||
this.hour = this.convertTwo(hour);
|
||||
this.minute = this.convertTwo(minute);
|
||||
this.second = this.convertTwo(second);
|
||||
this.totalSeconds--;
|
||||
},
|
||||
|
||||
/*转两位数*/
|
||||
convertTwo(n) {
|
||||
let str = '';
|
||||
if (n < 10) {
|
||||
str = '0' + n;
|
||||
} else {
|
||||
str = n;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
/*把时间戳转普通时间*/
|
||||
getLocalTime(nS) {
|
||||
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
|
||||
},
|
||||
clear() {
|
||||
console.log(1)
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.countdown{
|
||||
color: #FFFFFF;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
166
components/countdown/countdown.vue
Normal file
166
components/countdown/countdown.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<!--倒计时-->
|
||||
<view class="countdown">
|
||||
<template v-if="config.type == null">
|
||||
<text v-if="status == 0">{{title}}</text>
|
||||
<text v-if="status == 1">距开始：</text>
|
||||
<text v-if="status == 2">距结束：</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ day }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color">天</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ hour }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color">:</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ minute }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color">:</text>
|
||||
<text class="box" :style="'background-color: '+back_color+';color:'+cut_color">{{ second }}</text>
|
||||
<text class="p-0-10" :style="'color:'+color"></text>
|
||||
</template>
|
||||
<template v-if="config.type === 'text'">
|
||||
{{title}}{{ parseInt(day * 24) + parseInt(hour) }}:{{ minute }}:{{ second }}
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/*状态*/
|
||||
status: 0,
|
||||
/*天*/
|
||||
day: '0',
|
||||
/*时*/
|
||||
hour: '0',
|
||||
/*分*/
|
||||
minute: '0',
|
||||
/*秒*/
|
||||
second: '0',
|
||||
/*定时器*/
|
||||
timer: null,
|
||||
/*剩余秒*/
|
||||
totalSeconds: 0,
|
||||
/*标题*/
|
||||
title: '活动剩余：'
|
||||
};
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
back_color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
cut_color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
config: {
|
||||
deep: true,
|
||||
handler: function(n, o) {
|
||||
if (n != o && n.endstamp != 0) {
|
||||
if (n.title && typeof n.title != 'undefined') {
|
||||
this.title = n.title;
|
||||
}
|
||||
this.setTime();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*轮循*/
|
||||
setTime() {
|
||||
let self = this;
|
||||
self.timer = setInterval(function() {
|
||||
self.init();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/*初始化*/
|
||||
init() {
|
||||
let nowseconds = Date.now() / 1000;
|
||||
if (nowseconds < this.config.startstamp) {
|
||||
//活动时间还没到
|
||||
this.status = 1;
|
||||
this.totalSeconds = parseInt(this.config.startstamp - nowseconds);
|
||||
this.countDown();
|
||||
} else if (nowseconds > this.config.endstamp) {
|
||||
//活动已过期
|
||||
this.status = 2;
|
||||
} else {
|
||||
//活动进行中
|
||||
this.totalSeconds = parseInt(this.config.endstamp - nowseconds);
|
||||
this.status = 0;
|
||||
this.countDown();
|
||||
}
|
||||
this.$emit('returnVal', this.status);
|
||||
},
|
||||
|
||||
/*计算时分秒*/
|
||||
countDown() {
|
||||
let totalSeconds = this.totalSeconds;
|
||||
//天数
|
||||
let day = Math.floor(totalSeconds / (60 * 60 * 24));
|
||||
//取模（余数）
|
||||
let modulo = totalSeconds % (60 * 60 * 24);
|
||||
//小时数
|
||||
let hour = Math.floor(modulo / (60 * 60));
|
||||
modulo = modulo % (60 * 60);
|
||||
//分钟
|
||||
let minute = Math.floor(modulo / 60);
|
||||
//秒
|
||||
let second = modulo % 60;
|
||||
this.day = this.convertTwo(day);
|
||||
this.hour = this.convertTwo(hour);
|
||||
this.minute = this.convertTwo(minute);
|
||||
this.second = this.convertTwo(second);
|
||||
this.totalSeconds--;
|
||||
},
|
||||
|
||||
/*转两位数*/
|
||||
convertTwo(n) {
|
||||
let str = '';
|
||||
if (n < 10) {
|
||||
str = '0' + n;
|
||||
} else {
|
||||
str = n;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
/*把时间戳转普通时间*/
|
||||
getLocalTime(nS) {
|
||||
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
|
||||
},
|
||||
clear() {
|
||||
console.log(1)
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.countdown .box {
|
||||
display: inline-block;
|
||||
padding: 4rpx;
|
||||
/* width: 34rpx; */
|
||||
border-radius: 8rpx;
|
||||
background: #000000;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user