H5_module/mine/refund/refundDetails/refundDetails.vue

<template>
	<view>
		<!--mine/refundGoods/refundGoods.wxml-->
		<!-- 退货成功 退货失败  -->
		<!-- <view class="cg" v-if="refundState>=42||refundState==32&&isShow==true">
	<image :src="refundState==42||refundState==32?'/static/pages/images/thsb.png':'/static/pages/images/audit.png'" :class="refundState==42||refundState==32?'shibai':'chengong'"></image>
	<text>{{refundState==42||refundState==32?'退货失败了哦~':'您已经成功退货啦~'}}</text>
	<button class="btn bgline" @tap="goblack">返回</button>
</view> -->
		<block>
			<!-- 退款进度条 待寄回,退货中r11 -->
			<view :class="'status mdaddr1 bgfff ' + (true ? 'r10' : 'r11')">
				<view :class="'li ' + (refundState >= 39 || refundState >= 30 ? 'ing' : '')">
					<text></text>
					待审核
				</view>
				<view :class="'li ' + (refundState >= 32 ? 'ing' : '')" v-if="refundState == 32">
					<text></text>
					审核失败
				</view>
				<block v-else>
					<block v-if="isRefund == 2 && refundMethod == 1">
						<view :class="'li ' + (refundState >= 35 ? 'ing' : '')">
							<text></text>
							待寄回
						</view>
						<view :class="'li ' + (refundState >= 36 ? 'ing' : '')">
							<text></text>
							退货中
						</view>
					</block>
					<block v-if="isRefund == 2 && (refundMethod == 2 || refundMethod == 3)">
						<view :class="'li ' + (refundState >= 36 ? 'ing' : '')">
							<text></text>
							退货中
						</view>
					</block>
					<view :class="'li ' + ((refundState >= 39 && isRefund == 2) || (refundState == 40 && (isRefund == 1 || isRefund == 3)) || refundState >= 41 ? 'ing' : '')">
						<text></text>
						退款中
					</view>
					<view :class="'li ' + (refundState >= 42 ? 'ing' : '')">
						<text></text>
						{{ refundState == 42 ? '退款失败' : '已退款' }}
					</view>
				</block>
			</view>
			<!-- 待寄回,退货中显示 -->
			<!-- <view class="list1"> -->
			<!-- 待寄回显示 -->
			<view class="th-addr" v-if="refundState >= 35 && address">
				<view class="th-tit dflex">
					<image src="../../static/mine/images/fbico2.png"></image>
					退货地址
				</view>
				<block v-if="address.address">
					<view class="th-area">{{ address.address }}</view>
					<view class="th-ren ddflex">
						<view class="fflex">收件人：{{ address.contactName }} {{ address.contactPhone }}</view>
						<view class="fuzhi" @click="copy()">复制</view>
					</view>
				</block>
				<view class="th-lx ddflex" v-else>
					商家未设置，请
					<button open-type="contact" hover-class="none">联系客服</button>
				</view>
			</view>
			<!-- <view class="li red" wx:if="{{false}}">填写物流信息</view> -->
			<!-- 退货中 显示 -->
			<!-- <view class="li">查看物流</view> -->
			<!-- </view> -->
			<!-- 进度处理 -->
			<view class="list">
				<view class="li">
					<image src="/mine/static/mine/images/cljd.png"></image>
					处理进度
				</view>
				<!-- 退货流程 -->
				<view :class="'li2 ' + (refundState >= 43 ? '' : 'glay')" v-if="refundState >= 42">
					<image src="/mine/static/mine/images/gou_hong.png"></image>
					<view>
						{{ refundState == 43 ? '退款成功' : '退款失败' }}
						<view class="time" v-if="refundOverTime || refundFalseRes">{{ refundState == 43 ? (refundOverTime ? refundOverTime : '') : refundFalseRes }}</view>
					</view>
				</view>
				<block v-if="isRefund == 2">
					<view :class="'li2 ' + (refundState == 39 || refundState == 40 || refundState == 41 ? '' : 'glay')" v-if="refundState >= 39">
						<image
							:src="refundState == 39 || refundState == 40 || refundState == 41 ? '/mine/static/mine/images/gou_hong.png' : '/mine/static/mine/images/list_no.png'"
						></image>
						<view>
							您寄回的商品卖家已接收，等待卖家退款中
							<view class="time">{{ receiveTime }}</view>
						</view>
					</view>
					<view
						:class="'li2 ' + (refundState == 36 && (refundMethod == 1 || refundMethod == 3) ? '' : 'glay')"
						v-if="refundState >= 36 && (refundMethod == 1 || refundMethod == 3)"
					>
						<image
							:src="refundState == 36 && (refundMethod == 1 || refundMethod == 3) ? '/mine/static/mine/images/gou_hong.png' : '/mine/static/mine/images/list_no.png'"
						></image>
						<view>
							商品已寄回，等待卖家确认收货
							<view class="time">{{ refundMethod == 1 ? expressTime : refundGoodReviewTime }}</view>
						</view>
					</view>
				</block>
				<view
					:class="'li2 ' + ((refundState == 35 && isRefund == 2 && refundMethod == null) || (refundState == 41 && (isRefund == 1 || isRefund == 3)) ? '' : 'glay')"
					v-if="refundState >= 35 && isRefund == 2 && refundMethod == null"
				>
					<image
						:src="refundState == 35 && isRefund == 2 && refundMethod == null ? '/mine/static/mine/images/gou_hong.png' : '/mine/static/mine/images/list_no.png'"
					></image>
					<view>
						您提交的退款申请审核完成,请选择退货方式
						<view class="time">{{ refundGoodReviewTime }}</view>
					</view>
				</view>
				<view
					:class="
						'li2 ' +
							((refundState == 35 && isRefund == 2 && refundMethod == 1) ||
							(refundState == 40 && (isRefund == 1 || isRefund == 3)) ||
							(refundState == 41 && (isRefund == 1 || isRefund == 3))
								? ''
								: 'glay')
					"
					v-if="
						((refundState >= 35 && isRefund == 2 && refundMethod == 1) ||
							(refundState == 40 && (isRefund == 1 || isRefund == 3)) ||
							(refundState >= 41 && (isRefund == 1 || isRefund == 3))) &&
							refundMethod != 2
					"
				>
					<image
						:src="
							(refundState == 35 && isRefund == 2 && refundMethod == 1) ||
							(refundState == 40 && (isRefund == 1 || isRefund == 3)) ||
							(refundState == 41 && (isRefund == 1 || isRefund == 3))
								? '/mine/static/mine/images/gou_hong.png'
								: '/mine/static/mine/images/list_no.png'
						"
					></image>
					<view>
						您提交的退款申请审核完成{{ refundState >= 40 && (isRefund == 1 || isRefund == 3) ? '，等待卖家退款中' : '，请填写物流信息' }}
						<view class="time">{{ refundGoodReviewTime ? refundGoodReviewTime : refundReviewTime }}</view>
					</view>
				</view>
				<view :class="'li2 ' + (refundState == 36 && isRefund == 2 && refundMethod == 2 ? '' : 'glay')" v-if="refundState == 36 && isRefund == 2 && refundMethod == 2">
					<image
						:src="refundState == 36 && isRefund == 2 && refundMethod == 2 ? '/mine/static/mine/images/gou_hong.png' : '/mine/static/mine/images/list_no.png'"
					></image>
					<view>
						您提交的退款申请审核完成，请您把商品送回门店
						<view class="time">{{ refundGoodReviewTime }}</view>
					</view>
				</view>

				<view :class="'li2 ' + (refundState == 32 ? '' : 'glay')" v-if="refundState == 32">
					<image :src="refundState == 32 ? '/mine/static/mine/images/gou_hong.png' : '/mine/static/mine/images/list_no.png'"></image>
					<view>
						您提交的退款申请，审核失败
						<view class="time">{{ refundOverTime }}</view>
					</view>
				</view>
				<!-- ||refundState==40&&refundType==1 -->
				<view :class="'li2 ' + (refundState == 30 ? '' : 'glay')" v-if="refundState >= 30 || refundState >= 40">
					<!-- ||refundState==40&&refundType==1 -->
					<image :src="refundState == 30 ? '/mine/static/mine/images/gou_hong.png' : '/mine/static/mine/images/list_no.png'"></image>
					<view>
						您已提交退款申请，等待审核中
						<view class="time">{{ createDate }}</view>
					</view>
				</view>
			</view>
			<view class="list3" v-if="listRefundProduct && listRefundProduct.length > 0">
				<view class="shouhou txt99">退款产品</view>
				<block v-for="(item, idx) in listRefundProduct" :key="idx">
					<view class="li">
						<view class="info dflex flex">
							<view class="cimgs" :data-id="item.productId">
								<image :src="item.pic + '?x-oss-process=style/w160'" class="cimg"></image>
								<image src="/static/pages/images/jishida.png" class="type" v-if="item.isJs"></image>
								<!-- <view class="gys" wx:if="{{item.store<=0||item.isInvalid}}">{{item.store<=0?'已售罄':item.isInvalid?'已下架':''}}</view> -->
							</view>
							<view class="zhinfo">
								<view :class="'zhtit ' + (item.store <= 0 || item.isInvalid ? 'color999' : '')" :data-id="item.productId">{{ item.productName }}</view>
								<view v-if="item.specs && item.specs != 'DEFAULT_SKU'" class="guigecontent">
									规格：
									<text v-for="(itemGuige, index2) in JSON.parse(item.specs)" :key="index2" class="guige" decode="true">{{ itemGuige.value }}&nbsp;</text>
								</view>
								<view class="jiage">
									<view class="zhjia" :data-id="item.productId" v-if="!integralshop">
										<text>￥</text>
										{{ item.payMoney }}
									</view>
									<view class="integral" v-if="integralshop">
										<text class="intnum">{{ item.integral }}积分</text>
										<text class="money">+￥{{ item.payMoney }}</text>
									</view>
									<view class="">x{{ item.refundStock }}</view>
								</view>
								<!-- 						<view class="tabe dflex"><text>购买数量：{{item.quantity}}</text>
							<text v-if="item.refundStock">已退数量：{{item.refundStock}}</text>
						</view> -->
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 退款信息 -->
			<view class="list">
				<view class="li">
					<image src="/mine/static/mine/images/list.png"></image>
					退款信息
				</view>
				<view class="li1">
					<text class="txt99">申请时间</text>
					<text>{{ createDate }}</text>
				</view>
				<view class="li1" v-if="listRefundProduct.length < 1">
					<text class="txt99">退款产品</text>
					<view class="t">
						<text class="yc">{{ proInfo[0] }}</text>
						<view class="dflex txt99">
							x
							<text class="red">{{ number ? number : '0' }}</text>
						</view>
					</view>
				</view>
				<view class="li1 li-spe">
					<text class="txt99">退款金额</text>
					<view class="view-spe">
						<view>
							<text class="money" v-if="isRefund == 3">退差</text>
							<text class="money">￥</text>
							<text class="size">{{ refundMoney ? refundMoney : '0' }}</text>
						</view>
						<view class="baohan" v-if="refundExpressFee">
							订单金额￥{{ refundPayMoney ? refundPayMoney : 0 }}元 + 邮费￥{{ refundExpressFee ? refundExpressFee : 0 }}元
						</view>
					</view>
				</view>
				<view class="li1" v-if="integral > 0">
					<text class="txt99">退回积分</text>
					<text>
						<text class="money"></text>
						<text class="size">{{ integral ? integral : '0' }}</text>
					</text>
				</view>
				<view class="li1">
					<text class="txt99">退货原因</text>
					<text>{{ refundReason ? refundReason : '' }}</text>
				</view>
				<view class="li1" v-if="refundState == 32">
					<text class="txt99">失败原因</text>
					<text>{{ refundFalseRes }}</text>
				</view>
				<!-- 上传凭证 -->
				<block v-if="avatar && avatar.length > 0">
					<view class="li1"><view class="txt99">凭证</view></view>
					<view class="dflex">
						<view v-for="(item, index) in avatar" :key="index" class="pz">
							<image :src="avatar[index]" class="scpz" @tap="previewImg" :data-index="index" :data-list="avatar"></image>
						</view>
					</view>
				</block>
			</view>

			<!-- 寄回信息 -->
			<view class="list" v-if="expressNo">
				<view class="li" @click="jumpUrl()">
					<image src="/mine/static/mine/images/list.png"></image>
					<view class="flex">寄回信息</view>
					<text class="ck">查看快递</text>
					<image src="../../../static/pages/images/more.png" class="rico"></image>
				</view>
				<view class="li1">
					<text class="txt99">寄回时间</text>
					<view class="t">{{ expressTime }}</view>
				</view>
				<view class="li1">
					<text class="txt99">快递公司</text>
					<view class="t">{{ express }}</view>
				</view>
				<view class="li1">
					<text class="txt99">快递单号</text>
					<view class="t">{{ expressNo }}</view>
				</view>
			</view>

			<view class="rebtns dflex">
				<view class="pdlr40 flex" v-if="isRefund == 2 && refundState == 35 && refundMethod == 1"><view class=" bgline btn1" @tap="goExpress">填写物流信息</view></view>
				<view class="pdlr40 flex" v-if="isRefund == 2 && refundState == 35 && refundMethod == null">
					<view class=" bgline btn1" @tap="gorefundmode">选择退货方式</view>
				</view>
				<view class="pdlr40 flex" v-if="refundState != 32 && refundState < 42"><view class="btn" @click="cancelOrderRefund">取消售后申请</view></view>
			</view>
		</block>
	</view>
</template>

<script>
// mine/refundGoods/refundGoods.js
const app = getApp();
const req = require('../../../utils/request.js');

export default {
	data() {
		return {
			isShow: false,
			reason: [],
			avatar: [],
			id: '',
			isRefund: '',
			refundReason: '',
			address: ''
		};
	},

	components: {},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		this.setData({
			id: options.id,
			isRefund: options.isrefund
		});

		console.log(options);
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {
		this.getrefundDet();
	},

	methods: {
		previewImg: function(e) {
			//预览评论买家秀
			var index = e.currentTarget.dataset.index;
			let list = e.currentTarget.dataset.list;
			uni.previewImage({
				current: index,
				// 当前显示图片的http链接
				urls: list
			});
		},

		//取消售后
		cancelOrderRefund() {
			var tha = this;
			uni.showModal({
				title: '提示',
				content: '您确定要取消售后申请吗？',
				confirmText: '确定',
				success(res) {
					if (res.confirm) {
						req.getRequest(
							'/api/orderRefund/cancel',
							{
								refundId: tha.id
							},
							data => {
								req.msg('售后申请取消成功');
								setTimeout(function() {
									uni.navigateBack();
								}, 2000);
							}
						);
					}
				}
			});
		},

		getrefundDet() {
			// console.log(this.id);
			req.getRequest(
				'/api/orderRefund/detail',
				{
					id: this.id
				},
				data => {
					let res = data;
					if (data.imgUrl) {
						this.avatar = data.imgUrl.split(',');
					}

					req.getRequest('/api/orderRefund/refundReason', '', data => {
						// console.log(res.refundType); // data.forEach(res=>{console.log(res)})
						// if(res.refundType==1){

						let arr = data.refund.concat(data.reason);
						arr.forEach(it => {
							// console.log(it.value, res.refundReason);

							if (it.value == res.refundReason) {
								// res.refundReason=it.label
								this.setData({
									refundReason: it.label
								});
							}
						}); // }
						// if(res.refundType==2){
						//   data.reason.forEach(it=>{
						//     console.log(res.refundReason)
						//     if(it.value==res.refundReason){
						//       this.setData({refundReason:it.label})
						//     }
						//   })
						// }
					}); // if(data.refundReason==1){
					//   data.refundReason='发货不及时'
					// }
					// if(data.refundReason==2){
					//   data.refundReason='收到商品破损'
					// }
					// if(data.refundReason==3){
					//   data.refundReason='商品错发、漏发'
					// }
					// if(data.refundReason==4){
					//   data.refundReason='收到商品与描述不符'
					// }
					// if(data.refundReason==5){
					//   data.refundReason='商品质量问题'
					// }
					// if(data.refundReason==6){
					//   data.refundReason='未按约定时间发货'
					// }

					data.proInfo = data.proInfo.replace('件', '').split(',');

					if (data.refundState >= 42 || data.refundState == 32) {
						this.setData({
							isShow: true
						});
					}

					if (res.refundState >= 35 && this.isRefund == 2) {
						this.getAddress(res.id);
					}
					this.setData(res);
				}
			);
		},
		getAddress(id) {
			req.getRequest('/api/supplierDeliver/supplierReturnAddress', { returnId: id }, res => {
				if (res && res.length > 0) {
					this.address = res[0];
				}
			});
		},

		// 跳转物流
		goExpress() {
			uni.navigateTo({
				url: '/mine/refund/express/express?id=' + this.id + '&isrefund=' + this.isRefund
			});
		},

		// 选择退货方式
		gorefundmode() {
			uni.navigateTo({
				url: '/mine/refund/applyRefund/applyRefund?id=' + this.id + '&isrefund=' + this.isRefund + '&refundMethod=' + 5
			});
		},

		copy() {
			let content = this.address.address + ' ' + this.address.contactName + ' ' + this.address.contactPhone;
			uni.setClipboardData({
				data: content,
				success() {
					req.msg('复制退货信息成功');
				}
			});
		},

		//返回上一页
		goblack() {
			uni.navigateBack();
		},
		jumpUrl() {
			uni.navigateTo({
				url: '/mine/logistics/logistics?id=' + this.deliverId + '&orderId=' + this.orderId + '&type=' + 1
			});
		}
	}
};
</script>
<style>
@import './refundDetails.css';
</style>