H5_module/merchant/refundDetail.vue

<template>
	<view style="padding-bottom: 70px;">
		<view class="box">
			<view class="tits">商品信息</view>
			<view class="list product">
				<view class="lis ddflex" v-for="(pro, index) in refundDetail.productList" :key="index">
					<image :src="pro.image" mode="aspectFill" class="cimage"></image>
					<view class="zhinfo fflex">
						<view class="zhtit">{{pro.title}}</view>
						<view v-if="pro.specsList && pro.specsList.length > 0" class="guige">
							规格：
							<text v-for="(itemGuige, index) in pro.specsList" :key="index" class="guige" decode="true">{{ itemGuige.value }}&nbsp;</text>
						</view>
						<view class="jiage">
							<view class="price">
								<span>￥</span>
								{{ pro.money }}
							</view>
							<view class="num">×{{ pro.quantity }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="tits">售后信息</view>
			<view class="refund-list">
				<view class="li ddflex">
					<view class="label">订单号</view>
					<view class="li-r li-color fflex">{{refundDetail.orderId}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">申请售后时间</view>
					<view class="li-r fflex">{{refundDetail.createdDate}}</view>
				</view>
				<!-- <view class="li ddflex">
					<view class="label">发货单号</view>
					<view class="li-r fflex">{{refundDetail.deliverId}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">退款单号</view>
					<view class="li-r fflex">{{refundDetail.id}}</view>
				</view> -->
				<view class="li ddflex">
					<view class="label">退款类型</view>
					<view class="li-r fflex">{{refundDetail.refundType == 1 ? '只退款' : '退货并退款'}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">退款金额</view>
					<view class="li-r li-red fflex">￥{{refundDetail.refundMoney}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">退款状态</view>
					<view class="li-r fflex">{{refundDetail.refundStateName}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">售后原因</view>
					<view class="li-r fflex">{{refundDetail.refundReasonName ? refundDetail.refundReasonName : '无理由退款'}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">备注</view>
					<view class="li-r fflex">{{refundDetail.remarks ? refundDetail.remarks : '暂无'}}</view>
				</view>
				<view class="li" v-if="refundDetail.imgUrl&&refundDetail.imgUrl.length>0">
					<view class="label">售后凭证</view>
					<view class="imgbox">
						<image :src="it" mode="aspectFill" v-for="(it,index) in refundDetail.imgUrl" :key="index" @click="preview(index)"></image>
					</view>
				</view>
				<view class="li ddflex" v-if="refundDetail.refundFalseRes">
					<view class="label">商家留言</view>
					<view class="li-r fflex">{{refundDetail.refundFalseRes}}</view>
				</view>
			</view>
		</view>
		<view class="box" v-if="refundDetail.express.express">
			<view class="tits">物流信息</view>
			<view class="refund-list">
				<view class="li ddflex">
					<view class="label">快递公司</view>
					<view class="li-r fflex">{{refundDetail.express.express}}</view>
				</view>
				<view class="li ddflex">
					<view class="label">快递编号</view>
					<view class="li-r fflex">{{refundDetail.express.expressNo}}</view>
				</view>
			</view>
		</view>
		<view class="bot">
			<view class="sta-btn" @click="back">返回</view>
			<view class="sta-btn red" @click="showPop(0)" v-if="refundDetail.refundState == 30 || refundDetail.refundState == 39">售后审核</view>
			<view class="sta-btn" @click="showPop(1)" v-if="refundDetail.refundState == 36">退货确认</view>
		</view>
		<view class="chufangy" v-if="refundDetail.refundState == 40">请您到后台管理页面进行退款支付操作</view>
		
		<view class="ceng" v-if="isShowPop" @click="hidePop"></view>
		<view class="popup" v-if="isShowPop">
			<view class="pop-lis ddflex">
				<view class="pop-tit">售后类型</view>
				<view class="pop-type ddflex fflex">
					<view :class="'lis ddflex' + (psSwyIndex == index+1 ? ' active':'')" v-for="(item,index) in actions" :key="index" @click="onSelect(index)"><image :src="'static/images/' + (psSwyIndex == index+1 ? 'xyico_h.png' : 'xyico.png')"></image>{{item.name}}</view>
				</view>
			</view>
			<view class="pop-lis ddflex">
				<view class="pop-tit">退款金额<text>*实付金额</text></view>
				<view class="pop-money fflex">￥{{refundDetail.refundMoney}}</view>
			</view>
			<view class="pop-lis ddflex">
				<view class="pop-tit">审核</view>
				<view class="pop-type ddflex fflex">
					<view :class="'lis ddflex' + (checkState == 0 ? ' active':'')" @click="checkStates(0)"><image :src="'static/images/' + (checkState == 0 ? 'xyico_h.png' : 'xyico.png')"></image>拒绝</view>
					<view :class="'lis ddflex' + (checkState == 1 ? ' active':'')" @click="checkStates(1)"><image :src="'static/images/' + (checkState == 1 ? 'xyico_h.png' : 'xyico.png')"></image>通过</view>
				</view>
			</view>
			<textarea v-model="refundFalseRes" placeholder="请输入审核失败原因" placeholder-class="placeholder" class="reason" v-if="checkState == 0"></textarea>
			<view class="pop-btn ddflex">
				<view class="pop-cancel" @click="hidePop">取消</view>
				<view class="pop-confirm" @click="confirm">{{popType == 0 ? '审核' : '退货'}}确认</view>
			</view>
		</view>
	</view>
</template>

<script>
const req = require('../utils/request');
const utils = require("../utils/util");
export default {
	data() {
		return {
			refundReason: {},
			refundFalseRes: '',
			refundType: '',
			refundMethod: '',
			action: false,
			psSwyIndex: 0,
			actions: [
				{
					name: '只退款'
				},
				{
					name: '退货并退款'
				}
			],
			refundTypenum: 1,//默认1只退款
			refundDetail: {},
			imgUrl: [],
			imgIndex: 0,
			imgShow: false,
			show: false,
			refundId: '',
			active: 0,
			radio: 2,
			checkState: 1,
			isShowPop: false,
			popType: 0
		};
	},

	onLoad(opt) {
		this.refundId = opt.id;
		console.log('id》》》》》》');
		this.refundDataShow();
	},

	methods: {
		// 退款类型切换
		onSelect(index) {
			if(this.refundDetail.refundState == 36) return false;
			this.psSwyIndex = index + 1;
			this.refundDetail.refundType = index + 1
		},
		// 图片切换下标
		imgonChange(index) {
			this.imgIndex = index;
		},
		showPop(index){
			this.isShowPop = true
			this.popType = index
		},
		hidePop(){
			this.isShowPop = false
		},
		checkStates(index){
			this.checkState = index
		},
		preview(index){
			uni.previewImage({
			  current: index,//点击显示的图片
			  urls: this.refundDetail.imgUrl,//全部图片
			})
		},
		// 售后信息详情
		refundDataShow() {
			req.getRequest(
				'/api/v3/store/refund/detail',
				{
					id: this.refundId
				},
				res => {
					if (res.refundMethod == 1) {
						this.refundMethod = '邮寄';
					} else if (res.refundMethod == 2) {
						this.refundMethod = '送回门店';
					} else if (res.refundMethod == 3) {
						this.refundMethod = '货物拒收';
					}
					// res.dto.forEach(it => {
					// 	const pattern = /[`~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""' + - - _ % 。，、？\s]/g;
					// 	it.userName = it.userName.replace(pattern, '');
					// });
					this.psSwyIndex = res.refundType
					this.refundDetail = res;
					if (res.imgUrl) {
						res.imgUrl = res.imgUrl.split(',');
					}
					// console.log(res.dto.length);
					// this.active = res.dto.length - 1;
				},
				true
			);
		},
		// 二次确认框
		confirm() {
			console.log(this.checkState);
			if (this.checkState == -1) {
				req.msg('请您选择审核成功或审核失败');
			} else {
				this.showDialog();
			}
		},

		showDialog() {
			var tha=this;
			var msg = '';
			if (this.refundDetail.refundState == 40 && this.checkState == 1) {
				msg = '是否确认退款？';
			} else if (this.refundDetail.refundState == 40 && this.checkState == 0) {
				msg = '您确定拒绝退款？';
			} else if (this.checkState == 0 && (this.refundDetail.refundState == 39 || this.refundDetail.refundState == 30)) {
				msg = '您确认要拒绝客户的售后审核吗？';
			} else if (this.checkState == 1 && this.refundDetail.refundState != 40) {
				msg = '请确认是否发货，发货后的售后就让客户先退货！';
			} else if (this.refundDetail.refundState == 36 && this.checkState == 0) {
				msg = '您确认客户退回的商品不能入库，您要结束本次售后服务？';
			}
			uni.showModal({
				title: '提示',
				content: msg,
				success(res) {
					if (res.confirm) {
						// 售后申请
						if (tha.refundDetail.refundState == 39 || tha.refundDetail.refundState == 30) {
							console.log('您确认要拒绝客户的售后审核吗？');
							tha.applyRefund();
						}
						// 退款支付
						if (tha.refundDetail.refundState == 40) {
							req.msg('请您到后台管理页面进行最后一步退款操作');
						}
						//  退货中
						if (tha.refundDetail.refundState == 36) {
							tha.goodRefund();
						}
					} else if (res.cancel) {
						
					}
				}
			});
		},

		back() {
			uni.navigateBack(); // 返回上一层
		},

		radioChange: function(evt) {
			this.checkState = evt.detail.value;
		},

		applyRefund() {
			if (this.checkState == 1) {
				this.refundFalseRes = '';
			}
			// if (this.checkState == '') {
			// 	req.msg('请您选择审核成功或审核失败');
			// }
			let dto = {
				id: this.refundDetail.id,
				orderId: this.refundDetail.orderId,
				checkState: this.checkState,
				refundType: this.psSwyIndex
			};
			if (this.checkState == 0) {
				dto.refundFalseRes = this.refundFalseRes;
			}
			//+ JSON.stringify(dto)
			req.putRequestJson('/api/orderRefund/apply?'+utils.convertUrlObj(dto), dto, res => {
				req.msg('操作成功');
				this.hidePop()
				this.refundDataShow();
				console.log(res);
			});
		},
		goodRefund() {
			if (this.checkState == 1) {
				this.refundFalseRes = '';
			}
			let dto = {
				id: this.refundDetail.id,
				orderId: this.refundDetail.orderId,
				checkState: this.checkState,
				refundType: this.psSwyIndex
			};
			// if (dto.checkState == '') {
			// 	req.msg('请您选择审核成功或审核失败');
			// }
			if (this.checkState == 0) {
				dto.refundFalseRes = this.refundFalseRes;
			}
			//+ JSON.stringify(dto)
			req.putRequestJson('/api/orderRefund/goodRefund?'+utils.convertUrlObj(dto), dto, res => {
				req.msg('操作成功');
				this.hidePop()
				this.refundDataShow();
				console.log(res);
			});
		}
	}
};
</script>

<style scoped>
@import './static/css/main.css';
</style>