book-shop/pages-mall/pages/after-sales/apply-status - 副本.vue

<template>
	<view class="content">
		<view class="statusDesc">
			<view class="status">
				{{applyInfo.refund_type==1?'仅退款':applyInfo.refund_type==2?'退货退款':''}}
			</view>
			<view class="applyDesc">
				<template  v-if="applyInfo.status == 10">
					<view class="title">审核中</view>
				</template>
				<template  v-if="applyInfo.status == 21">
					<view class="title">审核通过，正在退款中</view>
				</template>
				<template  v-if="applyInfo.status == 22">
					<view class="title">审核失败</view>
				</template>
				<template  v-if="applyInfo.status == 211">
					<view class="title">退款成功</view>
				</template>
				<template  v-if="applyInfo.status == 31">
					<view class="title">审核通过，请填写退货快递单号</view>
				</template>
				<template  v-if="applyInfo.status == 32">
					<view class="title">审核未通过</view>
					<view class="">
						如有疑问，可联系客服
					</view>
				</template>
				<template  v-if="applyInfo.status == 33">
					<view class="title">等待卖家收货确认</view>
				</template>
				<template  v-if="applyInfo.status == 34">
					<view class="title">卖家已确认收货，退款中</view>
				</template>
				<template  v-if="applyInfo.status == 344">
					<view class="title">退款成功</view>
				</template>
				
			</view>
				
		</view>
		<!-- 退货退款，输入运单号 -->
		<setExpress :refundId="applyInfo.id" v-if="applyInfo.status == 31" @done="setExpressSuccess"></setExpress>
		<view class="conD">
			<!-- <u-button class="returnBtn" :custom-style="returnBtnStyle" @click="goBack()">返回</u-button> -->
		
			<!--
			10=待审核,21=卖家同意等待退款中,211=退款成功,
			22=卖家驳回,31=卖家同意(用户填写退货单号),32=卖家驳回,33=等待卖家收货确认中,
			34=卖家确认收货,验货没问题同意退款,344=退款成功 
			 -->
			 <!-- <TitleOperate title="申请类型" padding="10rpx 30rpx 24rpx 30rpx"></TitleOperate> -->
			 <!-- <view class="baseP">
				申请类型：{{applyInfo.refund_type==1?'仅退款':applyInfo.refund_type==2?'退货退款':''}}
			 </view> -->
			
			<view class="conbox">
				<TitleOperate title="售后商品" padding="30rpx 0 0"></TitleOperate>
				<template>
					<orderDetailGoodsCard v-for="(goods, index) in applyInfo.order_detail" :data="goods" :key="index"></orderDetailGoodsCard>
				</template>
			</view>
			<view class="conbox">
				<TitleOperate title="退款信息" padding="30rpx 0 30rpx"></TitleOperate>
				<view class="binfo">
					<view class="cell">
						<view class="label">服务编号</view>
						<view class="value">{{ applyInfo.refund_no}}</view>
						<view class="operate">
							<text class="copy" @click="$copyByUniappApi(applyInfo.refund_no)">复制</text>
						</view>
					</view>
					<view class="cell">
						<view class="label">退款原因</view>
						<view class="value">{{ applyInfo.reason}}</view>
					</view>
					<view class="cell">
						<view class="label">退款金额</view>
						<view class="value money">&yen;{{ applyInfo.refundFee}}</view>
					</view>
					<view class="cell">
						<view class="label">申请时间</view>
						<view class="value">{{ formatDateF(applyInfo.createtime*1000)}}</view>
					</view>
					<view class="contact">
						<button class="item serviceBtn" open-type="contact" >
							联系客服
						</button>
					</view>
				</view>
			</view>

			<!-- <u-steps direction="column" :list="statusList[status]" :current="current" :active-color="activeColor"></u-steps> -->
			
		</view>
	</view>
</template>

<script>
import { orderOperate } from '@/pages-mall/mixins/order-operate.js';
import orderDetailGoodsCard from '@/pages-mall/components/order/orderdetail-goods-card.vue';
import setExpress from './components/setExpress.vue'
import { formatDate } from '@/utils/tools.js'
	// 组件
	export default {
	mixins: [orderOperate],
		components: {
			orderDetailGoodsCard,
			setExpress
		},
		data() {
			return {
				status: '1',
				current: 1,
				expressCode:null,
				activeColor:'#22ac38',
				applyInfo:{
					refund_type:null,
					status:null,
					order_detail:[],
				},
				returnBtnStyle: {
					marginTop: '30rpx',
				},
				statusList: {
					'1': [{
						name: '提交申请'
					}, {
						name: '审核中'
					},{
						name: '退款中'
					}, {
						name: '退款成功'
					}, ],
					'2': [{
						name: '提交申请'
					}, {
						name: '审核中'
					}, {
						name: '买家寄件'
					}, {
						name: '卖家处理'
					}, {
						name: '退款中'
					}, {
						name: '完成'
					}, ],
				},

			};
		},

		onLoad(opt) {
			console.log(opt);
			if(opt.refund_type){
				// if(opt.status=='all'){
				// 	this.status = '2'
				// 	this.refund_type = '2'
				// }else if(opt.status=='money'){
				// 	this.status = '1'
				// }else{
				// 	this.status = opt.status;
				// }
				this.applyInfo.refund_type = opt.refund_type;
			}
			if(opt.status){
				this.applyInfo.status = opt.status;
			}
			if(opt.applyInfo){
				console.log('applyInfo.refund_id>>>>>',this.applyInfo.order_refund_id);
				// 申请详情
				try{
					this.applyInfo = JSON.parse(decodeURIComponent(opt.applyInfo))
					console.log(this.applyInfo);
					console.log('》》》applyInfo.order_detail',this.applyInfo.order_detail);
					this.status = this.applyInfo.refund_type;
					/* 
					 10=待审核,21=卖家同意等待退款中,211=退款成功,
					 22=卖家驳回,31=卖家同意(用户填写退货单号),32=卖家驳回,33=等待卖家收货确认中,
					 34=卖家确认收货,验货没问题同意退款,344=退款成功
					 */
					if(['10'].includes(this.applyInfo.status+'')){
						this.current = 1;
					}
					if(['21'].includes(this.applyInfo.status+'')){
						this.current = 2;
					}
					if(['211'].includes(this.applyInfo.status+'')){
						this.current = 3;
					}
					if(['22'].includes(this.applyInfo.status+'')){
						this.statusList[this.status][1].name='审核未通过';
						this.activeColor = 'red';
					}
					if(['31'].includes(this.applyInfo.status+'')){
						this.current = 2;
					}
					if(['32'].includes(this.applyInfo.status+'')){
						this.statusList[this.status][1].name='审核未通过';
						this.activeColor = 'red';
					}
					if(this.applyInfo.status=='33'){
						this.current = 3;
					}
					if(this.applyInfo.status=='34'){
						this.current = 4;
					}
					if(this.applyInfo.status=='344'){
						this.current = 5;
					}
					console.log('this.current>>>>',this.current)
				}catch(e){
					console.log(e);
					uni.navigateBack({
						delta:1
					})
				}
			}
			
		},
		onBackPress() {
			uni.navigateBack({
				delta:-2
			})
		},

		methods: {
			formatDateF(v){
				return formatDate(v,'all');
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			setExpressSuccess(){
				this.applyInfo.status = 33;
				this.current = 3;
			},
			/* expressCodeConfirm(){
				if(!this.expressCode){
					this.$u.toast('请输入物流单号')
				}else{
					this.$u.api.setExpressCodeAjax({
						expressCode:this.expressCode,
						refund_id:this.applyInfo.id,
					}).then(({code,data})=>{
						if(code==1){
							this.applyInfo.status = 33;
							this.current = 3;
						}
						
					})
				}
			}, */
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		// padding: 30rpx;
	}

	.conbox {
		background-color: #fff;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}

	.selgoodsb {
		text-align: center;

		.t {
			margin-bottom: 20rpx;
			color: #666;
		}
	}
	// .baseP{
	// 	font-size: 32rpx;
	// 	padding: 30rpx 50rpx;
	// 	color: $app-theme-color;
	// }
	.returnBtn{
		margin-top: 30rpx;
	}
	.statusDesc{
		position: relative;
		padding: 30rpx;
		background-color: $app-theme-color;
		color: $app-theme-text-white-color;
		margin-bottom: 24rpx;
		.title{
			font-size: 36rpx;
			margin-bottom: 50rpx;
		}
		.status {
			margin-bottom: 20rpx;
			font-size: 30rpx;
		}
		.desc {
			font-size: 26rpx;
		}
	}
	.binfo{
		// padding: 30rpx;
	}
	.cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		.label {
			width: 204rpx;
			font-size: 28rpx;
			color: $app-theme-text-color;
		}
		.value {
			width: 320rpx;
			text-align: right;
			font-size: 28rpx;
			color: $app-theme-text-color;
		}
		.price{
			color: $app-theme-text-money-color;
		}
		.operate {
			width: 80rpx;
			text-align: right;
			.copy {
				font-size: 28rpx;
				color: $app-theme-color;
			}
		}
	}
	.contact{
		border-top: 1rpx solid #eee;
		padding: 20rpx;
		color: $app-theme-color;
	}
	.serviceBtn{
		background-color: transparent;
		padding: 0;
		border: none;
		line-height: 1.2;
		font-size: 30rpx;
		&::after{
			content: '';
			border: none;
			display: none;
		}
	}
</style>