You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/order/detail/components/StatusTips.vue

116 lines
2.7 KiB

<!--
* @Author: ch
* @Date: 2022-03-31 17:53:43
* @LastEditors: ch
* @LastEditTime: 2022-04-22 18:20:00
* @Description: file content
-->
<template>
<view class="status">
<image class="status--icon" :src="ctxCon.icon"></image>
<view class="status--name">{{ctxCon.name}}</view>
<view class="status--desc">{{ctxCon.tips}}</view>
</view>
</template>
<script>
export default {
props : {
orderInfo : {
type : Object,
default : {}
}
},
data(){
return {
ctxData : {
// 待付款
'1' : {name:'待付款', tips:'', icon: require('@/static/order/fk.png')},
// 关闭
'2' : {name:'交易关闭' , tips:'关闭原因', icon: require('@/static/order/qx.png')},
// 已支付
'3' : {name:'等待发货', tips:'您的包裹整装待发', icon: require('@/static/order/fh.png')},
// 已发货
'4' : {name:'已发货', tips:'您的包裹正向您飞来', icon: require('@/static/order/fh.png')},
// 已收货
'5' : {name:'已收货', icon: require('@/static/order/fh.png')},
// 已完成
'6' : {name:'交易成功', icon: require('@/static/order/cg.png')},
},
ctxCon : {},
startSecondNum : 0,
timerStop : null
}
},
watch : {
orderInfo(nVal){
const {orderStatus} = this.orderInfo;
this.ctxCon = this.ctxData[orderStatus];
if(orderStatus === 1){
// 待支付 开始倒计时
if(this.timerStop){
clearTimeout(this.timerStop);
}
this.calcTimerStartSecondNum();
this.timer();
}else if(orderStatus === '2'){
this.ctxCon.tips = this.orderInfo.closeReason;
}
}
},
methods:{
/**
* 计算倒计时开始秒数
*/
calcTimerStartSecondNum(){
let expireTime = (new Date(this.orderInfo.expireTime)).getTime(),
curTime = (new Date(this.orderInfo.serverTime)).getTime(),
second = Math.floor((expireTime - curTime) / 1000);
this.startSecondNum = second > 0 ? second : 0;
},
/**
* 待付款的倒计时
*/
timer(){
if(this.startSecondNum == 0){
this.$emit('close');
return;
}
this.startSecondNum--;
let minute = parseInt(this.startSecondNum / 60);
let second = parseInt(this.startSecondNum % 60);
this.ctxCon.tips = `剩余${minute > 0 ? `${minute}` : ''} ${second}`;
this.timerStop = setTimeout(()=>this.timer(),1000)
}
}
}
</script>
<style lang="scss" scoped>
.status{
padding: 40rpx 60rpx 0;
margin-bottom: 48rpx;
min-height: 130rpx;
position: relative;
&--icon{
width: 100rpx;
height: 100rpx;
position: absolute;
right: 60rpx;
top: 40rpx;
}
&--name{
font-size: 36rpx;
line-height: 36rpx;
margin: 8rpx 0 20rpx;
font-weight: bold;
}
&--desc{
font-size: $font-size-base;
line-height: $font-size-base;
color: $color-grey4;
margin-bottom: 48rpx;
}
}
</style>