shop-app/pages/order/detail/components/StatusTips.vue

<!--
 * @Author: ch
 * @Date: 2022-03-31 17:53:43
 * @LastEditors: ch
 * @LastEditTime: 2022-04-29 15:46:53
 * @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.cancelReason;
			}
		}
	},
	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>