zhongshen_project/addon/cashier---/source/os/pages/order/orderrefund.vue

<template>
	<base-page>
		<view class="goodslist">
			<view class="goodslist-box">
				<view class="goodslist-left">
					<view class="goods-title">
						退款维权
						<text class="iconfont icongengduo1"></text>
					</view>
					<view class="goods-search">
						<view class="search">
							<text class="iconfont icon31sousuo"></text>
							<input type="text" v-model="search_text" @input="search" placeholder="搜索订单号/商品名称" />
						</view>
					</view>
					<block v-if="!one_judge && order_list.length > 0">
						<scroll-view scroll-y="true" class="goods-list-scroll" :show-scrollbar="false"
							@scrolltolower="getOrderList">
							<view class="item" @click="getOrderDetail(item.order_goods_id, index)"
								v-for="(item, index) in order_list" :key="index"
								:class="index == selectGoodsKeys ? 'itemhover' : ''">
								<view class="title">
									<view>退款编号：{{ item.order_no }}</view>
									<view>{{ item.order_type_name }}</view>
								</view>
								<view class="total-money-num">
									<view class="box">
										<view>订单金额</view>
										<view>￥{{ item.real_goods_money }}</view>
									</view>
									<view class="box">
										<view>退款金额</view>
										<view>￥{{ item.refund_apply_money }}</view>
									</view>
								</view>
								<view class="total-money-num">
									<view class="member-info">
										<view>退款状态：</view>
										<view>
											{{ item.refund_status_name }}({{ item.refund_type == 1 ? '仅退款' : '退款退货' }})
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</block>
					<view class="notYet" v-else-if="!one_judge && order_list.length == 0">暂无数据</view>
				</view>
				<view class="goodslist-right">
					<view class="goods-title">订单详情</view>
					<view class="order-information tab-wrap" v-if="Object.keys(order_detail).length">
						<view class="tab-head">
							<text v-for="(item, index) in tabObj.list" :key="index"
								:class="{ active: tabObj.index == item.value }" @click="tabObj.index = item.value">
								{{ item.name }}
							</text>
						</view>
						<view class="tab-content">
							<view class="other-information" v-if="tabObj.index == 1">
								<view class="item-box">
									<view class="item">
										<view>买家：</view>
										<view v-if="order_detail.nickname">{{ order_detail.nickname }}</view>
										<view v-else>散客</view>
									</view>
									<view class="item">
										<view>退款编号：</view>
										<view>{{ order_detail.refund_no }}</view>
									</view>
									<view class="item">
										<view>申请时间：</view>
										<view>{{ $util.timeFormat(order_detail.refund_action_time) }}</view>
									</view>
									<view class="item">
										<view>维权类型：</view>
										<view>{{ order_detail.refund_mode > 1 ? '售后' : '退款' }}</view>
									</view>
									<view class="item">
										<view>退款方式：</view>
										<view>
											{{ order_detail.shop_active_refund == 1 ? '主动退款' : order_detail.refund_type == 1 ? '仅退款' : '退货退款' }}
											({{
												(order_detail.refund_type == 1 && '原路退款') || (order_detail.refund_type == 2 && '线下退款') || '退款到余额'
											}})
										</view>
									</view>
									<view class="item">
										<view>退款金额：</view>
										<view>
											￥{{ order_detail.refund_status == 3 ? order_detail.refund_real_money : order_detail.refund_apply_money }}
										</view>
									</view>
									<view class="item">
										<view>退款原因：</view>
										<view>{{ order_detail.refund_reason || '--' }}</view>
									</view>
									<view class="item">
										<view>退款说明：</view>
										<view>{{ order_detail.refund_remark || '--' }}</view>
									</view>
									<view class="item">
										<view>商家退款说明：</view>
										<view>{{ order_detail.shop_refund_remark || '--' }}</view>
									</view>
									<view class="item">
										<view>退款状态：</view>
										<view>{{ order_detail.refund_status_name }}</view>
									</view>
									<view class="item" v-if="order_detail.refund_refuse_reason">
										<view>拒绝理由：</view>
										<view>{{ order_detail.refund_refuse_reason }}</view>
									</view>
								</view>
							</view>

							<view class="goods-info" v-if="tabObj.index == 2">
								<view class="table">
									<view class="table-th table-all">
										<view class="table-td" style="width:45%">商品（元）</view>
										<view class="table-td" style="width:15%">价格</view>
										<view class="table-td" style="width:10%">数量</view>
										<view class="table-td" style="width:15%;">小计（元）</view>
										<view class="table-td" style="width:15%;justify-content: flex-end;">状态</view>
									</view>
									<view class="table-tr table-all">
										<view class="table-td" style="width:45%">{{ order_detail.sku_name }}</view>
										<view class="table-td" style="width:15%">{{ order_detail.price }}</view>
										<view class="table-td" style="width:10%">{{ order_detail.num }}</view>
										<view class="table-td" style="width:15%">{{ order_detail.goods_money }}</view>
										<view class="table-td uni-column" style="width:15%;align-items: flex-end;">
											{{ order_detail.refund_status_name }}
										</view>
									</view>
								</view>
							</view>

							<view class="other-information journal" v-if="tabObj.index == 3">
								<nsjournal :list="order_detail.refund_log_list"></nsjournal>
							</view>
							<view class="remarks-box" v-if="order_detail.refund_action.length">
								<block v-for="(item, index) in order_detail.refund_action" :key="index">
									<button type="primary" class="primary-btn btn remarks" @click="open(item['event'])">
										{{ item.title }}
									</button>
								</block>
							</view>
						</view>
					</view>
					<block v-else>
						<image class="cart-empty" :src="$util.img('public/uniapp/cashier/cart_empty.png')"
							mode="widthFix"></image>
					</block>
				</view>
			</view>

			<!-- 同意退款 -->
			<unipopup ref="orderRefundAgree" type="center">
				<view class="order-refund-agree">
					<view class="title">售后维权处理</view>
					<view class="content">
						<view class="content-item">
							<view class="title">注意：</view>
							<view class="info">
								<text v-if="order_detail.pay_type == 'OFFLINE_PAY'">该笔订单通过线下支付，商家同意后，退款将通过线下原路退回。</text>
								<text v-else>该笔订单通过在线付款，商家同意后，退款将自动原路退回买家付款账户。</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">退款方式：</view>
							<view class="info">
								<text>{{ order_detail.refund_type == 1 ? '仅退款' : '退货退款' }}</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">退款金额：</view>
							<view class="info">
								<text>￥{{ order_detail.refund_apply_money }}</text>
							</view>
						</view>
					</view>

					<view class="btn">
						<button type="primary" class="default-btn btn save"
							@click="$refs.orderRefundAgree.close()">取消</button>
						<button type="primary" class="primary-btn btn" @click="orderRefundAgree()">确认退款</button>
					</view>
				</view>
			</unipopup>

			<!-- 拒绝退款 -->
			<unipopup ref="orderRefundRefuse" type="center">
				<view class="order-refund-agree">
					<view class="title">售后维权处理</view>
					<view class="content">
						<view class="tips">注意：建议你与买家协商后，再确定是否拒绝退款。如你拒绝退款后，买家可修改退款申请协议重新发起退款。</view>
						<view class="content-item">
							<view class="title">退款方式：</view>
							<view class="info">
								<text>{{ order_detail.refund_type == 1 ? '仅退款' : '退货退款' }}</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">退款金额：</view>
							<view class="info">
								<text>￥{{ order_detail.refund_apply_money }}</text>
							</view>
						</view>
						<view class="content-item textarea-wrap">
							<view class="title">拒绝理由：</view>
							<view class="info textarea-box">
								<textarea v-model="refundRefuseReason" class="textarea" maxlength="200"
									placeholder="请输入拒绝理由，最多不超过200字"></textarea>
							</view>
						</view>
					</view>

					<view class="btn">
						<button type="primary" class="default-btn btn save"
							@click="$refs.orderRefundRefuse.close()">取消</button>
						<button type="primary" class="primary-btn btn" @click="orderRefundRefuse()">确认退款</button>
					</view>
				</view>
			</unipopup>

			<!-- 关闭维权 -->
			<unipopup ref="orderRefundClose" type="center">
				<view class="order-clsoe">
					<view class="title">确定要关闭本次维权吗？</view>
					<view class="btn">
						<button type="primary" class="default-btn btn save"
							@click="$refs.orderRefundClose.close()">取消</button>
						<button type="primary" class="primary-btn btn" @click="orderRefundClose()">确定</button>
					</view>
				</view>
			</unipopup>

			<!-- 转账 -->
			<unipopup ref="orderRefundTransfer" type="center">
				<view class="order-refund-agree">
					<view class="title">售后维权处理</view>
					<view class="content">
						<view class="content-item">
							<view class="title">申请退款金额：</view>
							<view class="info">
								<text>￥{{ order_detail.refund_apply_money }}</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">实际退款金额：</view>
							<view class="info">
								<view class="money-box">
									<input type="number" v-model="refundTransfer.refund_real_money" />
									元
								</view>
							</view>
						</view>
						<view class="content-item" v-if="order_detail.use_point>0">
							<view class="title">退还积分：</view>
							<view class="info">
								<text>{{ order_detail.use_point }}</text>
							</view>
						</view>
						<view class="content-item" v-if="order_detail.coupon_info && order_detail.coupon_info.length>0">
							<view class="title">退还优惠券：</view>
							<view class="info">
								<text>{{ order_detail.coupon_info.coupon_name }}</text>
								<text
									v-if="order_detail.coupon_info.money>0">（{{order_detail.coupon_info.money}}）</text>
								<text v-else>（{{order_detail.coupon_info.discount}}折）</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">退款方式：</view>
							<view class="info">
								<radio-group @change="refundTransfer.refund_money_type = $event.detail.value"
									class="form-radio-group">
									<label class="radio form-radio-item">
										<radio value="1" :checked="refundTransfer.refund_money_type == 1" />
										原路退款
									</label>
									<label class="radio form-radio-item">
										<radio value="2" :checked="refundTransfer.refund_money_type == 2" />
										线下退款
									</label>
									<label class="radio form-radio-item">
										<radio value="3" :checked="refundTransfer.refund_money_type == 3" />
										退款到余额
									</label>
								</radio-group>
							</view>
						</view>

						<view class="content-item textarea-wrap">
							<view class="title">退款说明：</view>
							<view class="info textarea-box">
								<textarea v-model="refundTransfer.shop_refund_remark" class="textarea" maxlength="200"
									placeholder="请输入拒绝理由，最多不超过200字"></textarea>
							</view>
						</view>
					</view>

					<view class="btn">
						<button type="primary" class="default-btn btn save"
							@click="$refs.orderRefundTransfer.close()">取消</button>
						<button type="primary" class="primary-btn btn" @click="orderRefundTransfer()">确认退款</button>
					</view>
				</view>
			</unipopup>

			<!-- 买家退货接收，维权收货 -->
			<unipopup ref="orderRefundTakeDelivery" type="center">
				<view class="order-refund-agree">
					<view class="title">售后维权处理</view>
					<view class="content">
						<view class="tips">注意：需你同意退款申请，买家才能退货给你；买家退货后你需再次确认收货后，退款将自动原路退回至买家付款账户。</view>
						<view class="content-item">
							<view class="title">退款方式：</view>
							<view class="info">
								<text>{{ order_detail.refund_type == 1 ? '仅退款' : '退货退款' }}</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">退款金额：</view>
							<view class="info">
								<text>￥{{ order_detail.refund_apply_money }}</text>
							</view>
						</view>
						<view class="content-item">
							<view class="title">退货地址：</view>
							<view class="info">
								<text>{{ order_detail.refund_address }}</text>
							</view>
						</view>
						<view class="content-item textarea-wrap">
							<view class="title">是否入库：</view>
							<view class="info">
								<radio-group @change="isRefundStock = $event.detail.value" class="form-radio-group">
									<label class="radio form-radio-item">
										<radio value="0" :checked="isRefundStock == 0" />
										否
									</label>
									<label class="radio form-radio-item">
										<radio value="1" :checked="isRefundStock == 1" />
										是
									</label>
								</radio-group>
							</view>
						</view>
					</view>

					<view class="btn">
						<button type="primary" class="default-btn btn save"
							@click="$refs.orderRefundTakeDelivery.close()">取消</button>
						<button type="primary" class="primary-btn btn"
							@click="orderRefundTakeDelivery()">确认收到退货</button>
					</view>
				</view>
			</unipopup>

		</view>
	</base-page>
</template>

<script>
	import nsjournal from '@/components/ns-journal/ns-journal.vue';
	import unipopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			nsjournal,
			unipopup
		},
		data() {
			return {
				selectGoodsKeys: 0,
				//获取订单的页数
				page: 1,
				//每次获取订单的条数
				page_size: 8,
				// 订单搜索是用到的数据
				search_text: '',
				//初始时加载详情数据判断
				one_judge: true,
				// 订单列表数据
				order_list: [],
				//订单详情数据
				order_detail: {},
				tabObj: {
					list: [{
							value: 1,
							name: '基础信息'
						},
						{
							value: 2,
							name: '商品信息'
						},
						{
							value: 3,
							name: '订单日志'
						}
					],
					index: 1
				},
				isRepeat: false,
				refundRefuseReason: '', // 拒绝理由
				refundTransfer: {
					refund_real_money: 0,
					refund_money_type: 1,
					shop_refund_remark: ''
				},
				isRefundStock: 0
			};
		},
		onLoad(option) {
			this.getOrderList();
		},
		methods: {
			// 搜索
			search() {
				this.page = 1;
				this.order_list = [];
				this.one_judge = true;
				this.getOrderList();
			},
			/**
			 * 获取订单列表
			 */
			getOrderList() {
				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/lists',
					data: {
						page: this.page,
						page_size: this.page_size,
						search: this.search_text
					},
					success: res => {
						if (res.data.list.length == 0) {
							this.order_detail = {};
							this.one_judge = false;
						}
						if (res.code >= 0) {
							this.page += 1;
							if (this.order_list.length == 0) {
								this.order_list = res.data.list;
							} else {
								this.order_list = this.order_list.concat(res.data.list);
							}
							//初始时加载一遍详情数据
							if (this.one_judge) {
								this.getOrderDetail(this.order_list[0].order_goods_id);
							}
						}
					}
				});
			},

			/**
			 * 获取订单详情数据
			 */
			getOrderDetail(order_goods_id, keys = 0, callback) {
				this.selectGoodsKeys = keys;
				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/detail',
					data: {
						order_goods_id
					},
					success: res => {
						if (res.code >= 0) {
							this.order_detail = res.data;
							if (typeof callback == 'function') {
								callback();
							}
							this.$forceUpdate();
							this.one_judge = false;
						}
					}
				});
			},
			/**
			 * @param {Object} 订单功能 弹窗开启
			 */
			open(action) {
				if (action == 'orderRefundTransfer') {
					this.refundTransfer.order_goods_id = this.order_detail.order_goods_id;
					this.refundTransfer.refund_real_money = this.order_detail.refund_apply_money;
					this.refundTransfer.refund_money_type = 1;
					this.refundTransfer.shop_refund_remark = '';
				}
				this.$refs[action].open();
			},
			/**
			 * @param {Object} 订单操作组弹窗关闭
			 */
			close(name) {
				this.$refs[name].close();
			},
			// 同意维权
			orderRefundAgree() {
				if (this.isRepeat) return;
				this.isRepeat = true;

				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/agree',
					data: {
						order_goods_id: this.order_detail.order_goods_id
					},
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						if (res.code >= 0) {
							this.getOrderDetail(this.order_detail.order_goods_id);
							this.$refs.orderRefundAgree.close();
						}
						this.isRepeat = false;
					}
				});
			},
			// 拒绝维权
			orderRefundRefuse() {
				if (!this.refundRefuseReason) {
					this.$util.showToast({
						title: '请输入拒绝理由'
					});
					return;
				}
				if (this.isRepeat) return;
				this.isRepeat = true;

				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/refuse',
					data: {
						order_goods_id: this.order_detail.order_goods_id,
						refund_refuse_reason: this.refundRefuseReason
					},
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						if (res.code >= 0) {
							this.getOrderDetail(this.order_detail.order_goods_id);
							this.$refs.orderRefundRefuse.close();
						}
						this.isRepeat = false;
					}
				});
			},
			// 关闭维权
			orderRefundClose() {
				if (this.isRepeat) return;
				this.isRepeat = true;

				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/close',
					data: {
						order_goods_id: this.order_detail.order_goods_id
					},
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						if (res.code >= 0) {
							this.getOrderDetail(this.order_detail.order_goods_id);
							this.$refs.orderRefundClose.close();
						}
						this.isRepeat = false;
					}
				});
			},
			// 转账
			orderRefundTransfer() {
				if (!this.refundTransfer.refund_real_money) {
					this.$util.showToast({
						title: '请输入退款金额'
					});
					return;
				}

				var money = parseFloat(this.refundTransfer.refund_real_money);
				if (isNaN(money)) {
					this.$util.showToast({
						title: '请输入正确的退款金额'
					});
					return;
				}
				if (money < 0) {
					this.$util.showToast({
						title: '退款金额不能为负数'
					});
					return;
				}

				if (this.isRepeat) return;
				this.isRepeat = true;

				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/complete',
					data: this.refundTransfer,
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						if (res.code >= 0) {
							this.getOrderDetail(this.order_detail.order_goods_id);
							this.$refs.orderRefundTransfer.close();
						}
						this.isRepeat = false;
					}
				});
			},
			// 买家退货接收，维权收货
			orderRefundTakeDelivery() {
				if (this.isRepeat) return;
				this.isRepeat = true;

				this.$api.sendRequest({
					url: '/cashier/storeapi/cashierorderrefund/receive',
					data: {
						order_goods_id: this.order_detail.order_goods_id,
						is_refund_stock: this.isRefundStock
					},
					success: res => {
						this.$util.showToast({
							title: res.message
						});
						if (res.code >= 0) {
							this.getOrderDetail(this.order_detail.order_goods_id);
							this.$refs.orderRefundTakeDelivery.close();
						}
						this.isRepeat = false;
					}
				});
			}

		}
	};
</script>

<style scoped lang="scss">
	@import './public/css/orderlist.scss';

	.total-money-num .box {
		margin-top: 0;
	}

	.goodslist {
		.goodslist-right {
			.other-information {
				.title {
					margin-bottom: 0.1rem !important;
				}

				.item-box {
					margin-bottom: 0.15rem;

					.item {

						&:nth-child(1),
						&:nth-child(2) {
							margin-top: 0 !important;
						}

						view:nth-child(1) {
							width: 1rem !important;
						}
					}
				}
			}
		}
	}

	.tab-wrap {
		padding: 0 !important;
		background-color: #fff !important;

		.tab-head {
			display: flex;
			background-color: #f8f8f8;

			text {
				width: 1.15rem;
				height: 0.55rem;
				line-height: 0.55rem;
				text-align: center;
				font-size: $uni-font-size-lg;

				&.active {
					background-color: #fff;
				}
			}
		}
	}

	.item-box {
		padding: 0.1rem;
	}
</style>