li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<template>
|
|
<view class="">
|
|
<text :class="seconds<10?'warning_w':''" :style="'color:'+color" class="title">{{seconds<0?i18n.cycle.closeing:seconds+' s'}}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'countTime',
|
|
props: {
|
|
// 倒计时的时间，秒为单位
|
|
timestamp: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
// 是否自动开始倒计时
|
|
autoplay: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
color:{
|
|
type: String,
|
|
default: '#fff'
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听时间戳的变化
|
|
timestamp(newVal, oldVal) {
|
|
// 如果倒计时间发生变化，清除定时器，重新开始倒计时
|
|
this.clearTimer();
|
|
this.start();
|
|
}
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t('message');
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timer: null ,// 定时器
|
|
seconds: 0, // 记录不停倒计过程中变化的秒数
|
|
};
|
|
},
|
|
mounted() {
|
|
// 如果自动倒计时
|
|
this.autoplay && this.timestamp && this.start();
|
|
},
|
|
methods: {
|
|
// 倒计时
|
|
start() {
|
|
// 避免可能出现的倒计时重叠情况
|
|
this.clearTimer();
|
|
if (this.timestamp <= 0) return;
|
|
this.seconds = Number(this.timestamp);
|
|
this.timer = setInterval(() => {
|
|
this.seconds--;
|
|
// 发出change事件
|
|
// this.$emit('change', this.seconds);
|
|
if (this.seconds < 0) {
|
|
return this.end();
|
|
}
|
|
}, 1000);
|
|
},
|
|
// 停止倒计时
|
|
end() {
|
|
this.clearTimer();
|
|
// 倒计时结束后等待2秒再刷新订单,因为服务器处理订单数据买卖需要时间
|
|
setTimeout(()=>{
|
|
this.$emit('end', {});
|
|
},2500)
|
|
},
|
|
// 清除定时器
|
|
clearTimer() {
|
|
if(this.timer) {
|
|
// 清除定时器
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.title{
|
|
font-size: 24rpx;
|
|
font-family: "NumMedium" !important;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.normal_w{
|
|
color: #fff;
|
|
}
|
|
.warning_w{
|
|
color: #FF4040;
|
|
}
|
|
</style>
|