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/saleAfter/saleAfterDetail/components/StatusTips.vue

118 lines
3.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-03-31 17:53:43
* @LastEditors: ch
* @LastEditTime: 2022-04-14 15:01:49
* @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>
import {DictOrderStatus } from '@/common/dicts/order'
import Enum from "@/common/plugins/enum"
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>