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>
							</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>
					</view>
					<block v-else><image class="cart-empty" :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image></block>
				</view>
			</view>
		</view>
	</base-page>
</template>

<script>
import nsjournal from '@/components/ns-journal/ns-journal.vue';
export default {
	components: {
		nsjournal
	},
	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
			}
		};
	},
	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;
					}
				}
			});
		}
	}
};
</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>