H5_module/merchant/refund.vue

<template>
	<view class="refundnew">
		<view class="van-cell">
			<view class="vvan-tit">售后信息</view>
			<view class="van-list">
				<view class="li" v-for="item in refundDetail.dto" :key="item.id">
					<image src="static/images/gou.png" class="gou"></image>
					<view>{{ item.remarks }}:{{ item.userName }},最后状态：{{ item.updateNowValue }}</view>
					<text>{{ item.createDate }}</text>
				</view>
			</view>
		</view>
		<view>
			<ul class="ddinfo">
				<li>
					<span>退款类型：</span>
					<view>
						<picker v-if="refundDetail.refundState == 30 || refundDetail.refundState == 39" class="picker" :value="psSwyIndex" :range="actions" @change="onSelect" range-key="name">
							<view>{{ actions[psSwyIndex].name }}</view>
							<image src="static/images/rico.png" class="rico"></image>
						</picker>
						<view v-else :class="refundDetail.refundState == 30 || refundDetail.refundState == 39 ? 'black' : ''">{{ refundDetail.refundTypeName }}</view>
					</view>
				</li>
				<li v-if="refundDetail.refundType == 2">
					<span>退货方式：</span>
					<view v-text="refundMethod"></view>
				</li>
				<li>
					<span>退款金额：</span>
					<view>¥ {{ refundDetail.refundMoney }}</view>
				</li>
				<li>
					<span>退款原因：</span>
					<view>{{ refundDetail.refundReasonName ? refundDetail.refundReasonName : '无理由退款' }}</view>
				</li>
				<li>
					<span>退款说明：</span>
					<view>{{ refundDetail.remarks ? refundDetail.remarks : '暂无' }}</view>
				</li>

				<li @click="refundDetail.imgUrl == '' || refundDetail.imgUrl == null ? (imgShow = false) : (imgShow = true)">
					<span>凭证:</span>
					<view v-text="refundDetail.imgUrl == '' || refundDetail.imgUrl == null ? '暂无凭证' : '查看'"></view>
				</li>
			</ul>
			<ul class="ddinfo" v-if="refundDetail.refundMethod == 1 && refundDetail.refundState == 36">
				<li>
					<span>快递公司：</span>
					<view v-text="refundDetail.express"></view>
				</li>
				<li>
					<span>快递编号：</span>
					<view v-text="refundDetail.expressNo"></view>
				</li>
			</ul>

			<ul class="ddinfo" v-if="refundDetail.refundState != 32 && refundDetail.refundState != 35 && refundDetail.refundState <= 39" style="display: none;">
				<li>
					<span>审核：</span>
					<!-- <template #right-icon>
						<van-radio name="1">成功</van-radio>
						<van-radio name="0">失败</van-radio>
					</template> -->
					<view class="dflex radio-rr">
						<radio-group @change="radioChange">
							<label class="radio">
								<radio value="1" />
								成功
							</label>
							<label class="radio">
								<radio value="0" />
								失败
							</label>
						</radio-group>
					</view>
				</li>
				<li v-if="checkState == 0">
					<span class="label">商家留言：</span>
					<view class="item flex dflex"><input v-model="refundFalseRes" placeholder="请输入审核失败原因" placeholder-class="placeholder" class="ipt flex" /></view>
				</li>

				<li v-if="refundDetail.refundState == 32">
					<span class="label">商家留言：</span>
					<view value="" v-if="refundDetail.refundState == 32">{{ refundDetail.refundFalseRes }}</view>
				</li>
			</ul>
		</view>

		<view class="bot">
			<view class="sta-btn" @click="back">返回</view>
			<!-- <view class="sta-btn red" @click="confirm" v-if="refundDetail.refundState == 30 || refundDetail.refundState == 39">售后审核</view>
			<view class="sta-btn" @click="confirm" v-if="refundDetail.refundState == 36">退货确认</view> -->
		</view>
		<!-- <view class="chufangy" v-if="refundDetail.refundState == 40">请您到后台管理页面进行退款支付操作</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,
			orderId: '',
			active: 0,
			radio: 2,
			checkState: -1
		};
	},

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

	methods: {
		// 退款类型切换
		onSelect(e) {
			this.psSwyIndex = e.target.value;
			var name = this.actions[this.psSwyIndex].name;
			if (name == '只退款') {
				this.refundTypenum = 1;
			} else if (name == '退货并退款') {
				this.refundTypenum = 2;
			}
			this.refundDetail.refundTypeName = name;
			console.log(this.refundTypenum);
		},
		// 图片切换下标
		imgonChange(index) {
			this.imgIndex = index;
		},
		// 售后信息详情
		refundDataShow() {
			req.getRequest(
				'/api/orderRefund/refundDataShow',
				{
					orderId: this.orderId
				},
				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.refundDetail = res;
					if (res.imgUrl) {
						this.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.orderId,
				checkState: this.checkState,
				refundType: this.refundTypenum
			};
			if (this.checkState == 0) {
				dto.refundFalseRes = this.refundFalseRes;
			}
			//+ JSON.stringify(dto)
			req.putRequestJson('/api/orderRefund/apply?'+utils.convertUrlObj(dto), dto, res => {
				req.msg('操作成功');
				this.refundDataShow();
				console.log(res);
			});
		},
		goodRefund() {
			if (this.checkState == 1) {
				this.refundFalseRes = '';
			}
			let dto = {
				id: this.refundDetail.id,
				orderId: this.orderId,
				checkState: this.checkState,
				refundType: this.refundTypenum
			};
			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.refundDataShow();
				console.log(res);
			});
		}
	}
};
</script>

<style scoped>
@import './static/css/main.css';
.view:not(:last-child) {
	margin-right: 10px;
}

.van-radio:not(:last-child) {
	margin-right: 10px;
}
.refundnew {
	padding: 0 0 70px 0;
}
.black {
	color: #000000;
}
.chufangy {
	position: fixed;
	background: rgba(247, 3, 3, 0.6);
	left: 0;
	right: 0;
	bottom: 50px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	z-index: 50;
}
.ddinfo {
	margin: 0;
	border-radius: 0;
}
.ddinfo li:last-child {
	border-bottom: 1px solid #eeeeee;
}
.sta-btn {
	padding: 0 6px;
	border-color: #fe0419;
	/* background: #FE0419; */
	border-radius: 12px;
	text-align: center;
	line-height: 25px;
	font-size: 11px;
	color: #fe0419;
	margin-left: 5px;
}

.sta-btn.red {
	color: #fff;
	background: #fe0419;
}
</style>