初始化代码
This commit is contained in:
188
uniapp/uni-app/components/min-countdown.vue
Normal file
188
uniapp/uni-app/components/min-countdown.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="min-countdown" :class="className" :style="{color:color}">
|
||||
<rich-text :nodes="time" v-if="type == 1"></rich-text>
|
||||
<!-- x天x时x分x秒 -->
|
||||
<view class="flex-y-center" v-if="type == 2">
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``,width:time.d*1>99?'54rpx':''}">
|
||||
{{time.d}}
|
||||
</view>
|
||||
<view class="text" :style="{color:textColor}">天</view>
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``}">{{time.h}}</view>
|
||||
<view class="text" :style="{color:textColor}">时</view>
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``}">
|
||||
{{time.m}}
|
||||
</view>
|
||||
<view class="text" :style="{color:textColor}">分</view>
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``}">{{time.s}}</view>
|
||||
<view class="text" :style="{color:textColor}">秒</view>
|
||||
</view>
|
||||
<!-- 时:分:秒 -->
|
||||
<view class="flex-y-center" v-if="type == 3">
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``,width:time.all_h*1>99?className=='mini'?'48rpx':className=='sm'?'54rpx':'66rpx':''}">
|
||||
{{time.all_h}}
|
||||
</view>
|
||||
<view class="text" :style="{color:textColor}">:</view>
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``}">
|
||||
{{time.m}}
|
||||
</view>
|
||||
<view class="text" :style="{color:textColor}">:</view>
|
||||
<view class="count-tag flex-center" :class="[{'haveColor':borderColor}]"
|
||||
:style="{background:bgColor,border:borderColor?`1rpx solid ${borderColor}`:``}">
|
||||
{{time.s}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="type==4">{{`${time.all_h}:${time.m}:${time.s}`}}</view>
|
||||
<view v-if="type==5">{{`${time.all_h}小时${time.m}分${time.s}秒`}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from 'vuex';
|
||||
export default {
|
||||
name: 'min-countdown',
|
||||
props: {
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
targetTime: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: '{%d}天{%h}小时{%m}分{%s}秒'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#39b54a'
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#39b54a'
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '00:00:00'
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
}),
|
||||
methods: {
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
this.getTime()
|
||||
}, 1000)
|
||||
},
|
||||
getTime() {
|
||||
let time = {}
|
||||
let format = this.format
|
||||
|
||||
function formatNumber(num) {
|
||||
return num > 9 ? `${num}` : `0${num}`
|
||||
}
|
||||
const gapTime = Math.ceil((this.targetTime - new Date().getTime()) / 1000)
|
||||
if (gapTime >= 0) {
|
||||
time.d = formatNumber(parseInt(gapTime / 86400))
|
||||
let lastTime = gapTime % 86400;
|
||||
time.h = formatNumber(parseInt(lastTime / 3600))
|
||||
lastTime = lastTime % 3600;
|
||||
time.all_h = time.d * 24 + time.h * 1
|
||||
time.m = formatNumber(parseInt(lastTime / 60))
|
||||
time.s = formatNumber(lastTime % 60);
|
||||
['d', 'h', 'm', 's'].forEach(item => {
|
||||
const day = time[item].split('');
|
||||
format = format.replace('{%' + item + '}', time[item])
|
||||
format = format.replace('{%' + item + '0}', day[0])
|
||||
format = format.replace('{%' + item + '1}', day[1])
|
||||
format = format.replace('{%' + item + '2}', day[2] ? day[2] : '0')
|
||||
})
|
||||
this.time = this.type == 1 ? format : time
|
||||
this.init()
|
||||
} else {
|
||||
this.$emit('callback')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTime()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.min-countdown {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.count-tag {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
margin: 0 10rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.min-countdown.mini {
|
||||
.count-tag {
|
||||
width: 36rpx;
|
||||
height: 29rpx;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.min-countdown.sm {
|
||||
.count-tag {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.min-countdown.md {
|
||||
.count-tag {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.haveColor {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user