|
|
|
|
|
<!--
|
|
|
|
|
|
* @Author: ch
|
|
|
|
|
|
* @Date: 2022-03-31 17:53:43
|
|
|
|
|
|
* @LastEditors: ch
|
|
|
|
|
|
* @LastEditTime: 2022-04-24 11:09:37
|
|
|
|
|
|
* @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 : {
|
|
|
|
|
|
data : {
|
|
|
|
|
|
type : Object,
|
|
|
|
|
|
default : {}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data(){
|
|
|
|
|
|
return {
|
|
|
|
|
|
ctxData : {
|
|
|
|
|
|
"1" : {
|
|
|
|
|
|
name:'请等待商家处理', tips:'', icon: require('@/static/order/cg.png')},
|
|
|
|
|
|
"2" : {name:'退款关闭' , tips:'', icon: require('@/static/order/qx.png')},
|
|
|
|
|
|
"3" : {name:'请寄回商品，并填写物流信息', tips:'', icon: require('@/static/order/cg.png')},
|
|
|
|
|
|
"4" : {name:'快递已发出，等待商家收货', tips:'您的包裹正在退回的路上', icon: require('@/static/order/cg.png')},
|
|
|
|
|
|
"5" : {name:'等待商家退款', tips:'',icon: require('@/static/order/cg.png')},
|
|
|
|
|
|
"6" : {name:'退款成功', tips: '退款将于7个工作日内原路返回，注意查收',icon: require('@/static/order/cg.png')},
|
|
|
|
|
|
"7" : {name:'退款关闭', tips: '', icon: require('@/static/order/qx.png')},
|
|
|
|
|
|
},
|
|
|
|
|
|
ctxCon : {
|
|
|
|
|
|
name : '--',
|
|
|
|
|
|
icon: require('@/static/order/cg.png')
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
watch:{
|
|
|
|
|
|
data(newData){
|
|
|
|
|
|
if(newData){
|
|
|
|
|
|
this.setCtxCon();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed:{
|
|
|
|
|
|
},
|
|
|
|
|
|
methods:{
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 根据当前状态显示不同文案
|
|
|
|
|
|
*/
|
|
|
|
|
|
setCtxCon(){
|
|
|
|
|
|
const {refundStatus, handleExpireTime, returnExpireTime, refundExpireTime, closeReason} = this.data;
|
|
|
|
|
|
this.ctxCon = this.ctxData[refundStatus];
|
|
|
|
|
|
switch(refundStatus){
|
|
|
|
|
|
case 1 :
|
|
|
|
|
|
this.ctxCon.tips = `您的申请已经提交，还剩${this.calcTimer(handleExpireTime)}`;
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 3 :
|
|
|
|
|
|
this.ctxCon.tips = `还剩${this.calcTimer(returnExpireTime)}`;
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 5 :
|
|
|
|
|
|
this.ctxCon.tips = `若商家未及时处理，退款将在${this.calcTimer(refundExpireTime)}后自动退回`;
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 2 :
|
|
|
|
|
|
case 7 :
|
|
|
|
|
|
this.ctxCon.tips = closeReason;
|
|
|
|
|
|
break;
|
|
|
|
|
|
default :
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 计算距下个节点处理时间
|
|
|
|
|
|
*/
|
|
|
|
|
|
calcTimer (time){
|
|
|
|
|
|
const expireTime = (new Date(time)).getTime();
|
|
|
|
|
|
const curTime = (new Date(this.data.serverTime)).getTime();
|
|
|
|
|
|
// const curTime = (new Date('2022-4-16 15:22:00')).getTime();
|
|
|
|
|
|
const minute = parseInt((expireTime - curTime) / 60000);
|
|
|
|
|
|
const day = parseInt(Math.floor(minute / 1440));
|
|
|
|
|
|
const hour = parseInt(Math.floor((minute - day * 1440) / 60));
|
|
|
|
|
|
const m = parseInt(Math.floor(minute - ((day * 24 + hour) * 60)));
|
|
|
|
|
|
return `${day ? `${day}天${hour}时${m}分` : (hour ? `${hour}时${m}分` : ( m ? `${m}分` : '1分'))}`
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
|
|
|
|
.status{
|
|
|
|
|
|
padding: 48rpx 60rpx 0;
|
|
|
|
|
|
margin-bottom: 48rpx;
|
|
|
|
|
|
min-height: 130rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
&--icon{
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 60rpx;
|
|
|
|
|
|
top: 51rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
&--name{
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
&--desc{
|
|
|
|
|
|
font-size: $font-size-base;
|
|
|
|
|
|
color: $color-grey4;
|
|
|
|
|
|
// margin-bottom: 48rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
