book-hi/pages-mall/pages/after-sales/apply-status.vue

<template>
	<view class="content" v-if="applyInfo.id">
		<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>
					<view class="">
						如有疑问，可联系客服
					</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>
		<view class="refuseReason" v-if="applyInfo.refuse_reason">
			拒绝原因：{{applyInfo.refuse_reason}}
		</view>
		<!-- 退货退款，输入运单号 -->
		<setExpress :refundId="applyInfo.id" v-if="applyInfo.status == 31" @done="setExpressSuccess"></setExpress>
		
		<!-- <view class="tExpress" v-if="applyInfo.status == 33">		
			<view class="con">
				退货物流单号：{{applyInfo.express_no}}
			</view>
			<view class="operate">
				<text class="copy" @click="$copyByUniappApi(applyInfo.refund_no)">复制</text>
			</view>
		</view> -->
		<view class="tExpress cell" v-if="applyInfo.express_no">
			<view class="label">退货物流单号</view>
			<view class="value">{{ applyInfo.express_no}}</view>
			<view class="operate">
				<text class="copy" @click="$copyByUniappApi(applyInfo.express_no)">复制</text>
			</view>
		</view>
		<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="cell" v-if="applyInfo.check_time">
						<view class="label">审核时间</view>
						<view class="value">{{ formatDateF(applyInfo.check_time*1000)}}</view>
					</view>
					<view class="cell" v-if="applyInfo.status == 33" >
						<view class="label">买家发货时间</view>
						<view class="value">{{ formatDateF(applyInfo.updatetime*1000)}}</view>
					</view>
					<view class="cell" v-if="applyInfo.status == 34" >
						<view class="label">卖家确认收货时间</view>
						<view class="value">{{ formatDateF(applyInfo.updatetime*1000)}}</view>
					</view>
					<view class="cell" v-if="applyInfo.refund_success_time">
						<view class="label">退款到账时间</view>
						<view class="value">{{ formatDateF(applyInfo.refund_success_time*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 class="">
			<view class="foot_opar">
				<view class="oparbtn">
					<u-button plain size="small"  open-type="contact">联系客服</u-button>
				</view>
				<view class="oparbtn"  v-if="applyInfo.status == 22 || applyInfo.status == 32">
					<u-button type="primary" size="small" @click="applyAfterSales(applyInfo.order_id)">重新申请</u-button>
				</view>
			</view>
			<view class="siteBar">
			</view>
		</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.id){
				this.getRefundOrderDetailFun(opt.id);
			}else{
				uni.navigateBack();
			}
		},
		onBackPress() {
			uni.navigateBack({
				delta:-2
			})
		},
		methods: {
			// 退货物流查询
			tuiExpress(express_no){
				console.log('查看退货物流',express_no);
			},
			getRefundOrderDetailFun(id){
				this.$u.api.getRefundOrderDetailAjax(id).then(({code,data})=>{
					if(code==1){
						this.applyInfo = data;
					}
				}).catch(()=>{})
			},
			formatDateF(v){
				return formatDate(v,'all');
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			setExpressSuccess(){
				this.applyInfo.status = 33;
				this.current = 3;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.siteBar{
		height: 120rpx;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		// box-sizing: content-box;		
		@extend .safeAreaPad;
	}
	.foot_opar{
		border-top: solid 2rpx #f2f2f2;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: $app-theme-bg-color;
		z-index: $app-zIndex-fixed;
		@extend .safeAreaPad;
		.oparbtn{
			padding: 0 10rpx;
		}
	}
	.refuseReason{
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin: 20rpx 0;
	}
	.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;
		flex-shrink: 0;
		.label {
			// width: 204rpx;
			font-size: 28rpx;
			color: $app-theme-text-color;
		}
		.value {
			// width: 320rpx;
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: $app-theme-text-color;
			padding: 0 30rpx;
		}
		.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;
		}
	}
	.tExpress{
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		.label{font-size: inherit;}
	}
</style>