store-new/pages/refund_detail/refund_detail.vue

<template>
	<view class="audit">
		<view class="refund_num" v-if="refundInfo.length > 0">退货次数：{{ refundInfo.length }}次</view>
		<view class="audit_con" v-for="item in refundInfo" :key="item.id">
			<view class="goods_info">
				<view class="title">退货信息</view>

				<view v-for="temp in item.goods" :key="temp.id" class="goods_con">
					<view class="flexS">
						<image :src="temp.img" class="goods_img"></image>
						<view>
							<text class="goods_name">{{ temp.name }}</text>
							<view class="one_year" style="width: 200rpx;">3条装</view>
						</view>
					</view>
					<view class="goods_size">
						<view class="size_box flexB" v-for="sku in temp.sku" :key="sku.id">
							<text>{{ sku.type }}</text>
							<text>{{ sku.size }}</text>
							<text>{{ sku.price }}</text>
							<text>X{{ sku.num }}</text>
						</view>
					</view>
				</view>
				<view class="flexE" style="margin-top:20rpx;">
					<text class="gray" v-if="item.goods">共{{ item.goods | totalNum }}件</text>
					<text class="gray">合计：</text>
					<text class="total">
						<text>¥</text>
						<text class="price" v-if="item.goods">{{ item.goods | totalPrice }}</text>
					</text>
				</view>
			</view>
			<view class="audit_order">
				<view class="order_top">
					<view class="label flexS">
						<view>
							<text>订单号：</text>
							<text style="font-size:24rpx;">{{ item.order_no }}</text>
						</view>
						<view class="copy_new_btn" @click="copy(item.order_no)">复制</view>
					</view>
					<view class="label flexS">
						<view>
							<text>退货单号：</text>
							<text style="font-size:24rpx;">{{ item.refund_no }}</text>
						</view>
						<view class="copy_new_btn" @click="copy(item.refund_no)">复制</view>
					</view>
					<view class="label">
						<text>退货状态：</text>
						<text style="color:#f00;">{{ item.status | getStatus }}</text>
					</view>
					<view class="label">
						<text>申请时间：</text>
						<text>{{ item.created_at }}</text>
					</view>
					<view class="label">
						<text>退货原因：</text>
						<text>{{ item.reason }}</text>
					</view>
				</view>
				<view class="order_bottom" v-if="item.reason_all">
					<view class="label">
						<text>补充说明：</text>
						<text style="color:#F76454">{{ item.reason_all }}</text>
					</view>
					<view class="img_box flexS" v-if="item.img">
						<view v-for="(curImg, index) in item.img" :key="index">
							<image :src="curImg" @click="previewImg(curImg,item.img)"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="sub_btn" @click="cancelApply(item.id)" v-if="item.status == 0 && item.op_type == 2">取消退货</view>
		</view>
		<view class="noData" v-if="refundInfo.length == 0">
			<image src="../../static/imgs/default/no_order.png" mode=""></image>
			<view>--暂无数据--</view>
		</view>
	</view>
</template>

<script>
	import {
		handleClipboard
	} from '../../common/util/utils.js';
	import {
		getRefund,
		cancelRefund
	} from '../../apis/shop.js';
	export default {
		data() {
			return {
				refundInfo: [], //退货详情
				imgs: [],
				order_no: ''
			};
		},
		onLoad(ops) {
			this.order_no = ops.order_no;
			this.getDetail(ops.order_no);
		},
		filters: {
			getStatus(val) {
				switch (val) {
					case 0:
						return '审核中';
						break;
					case 1:
						return '已同意';
						break;
					case 2:
						return '已驳回';
						break;
					case 3:
						return '已完成';
						break;
					default:
						return '暂无';
				}
			}
		},
		methods: {
			//点击预览图片
			previewImg(img, imgs) {
				uni.previewImage({
					urls: imgs,
					current: img
				})
			},
			//取消退货申请
			cancelApply(refund_id) {
				uni.showModal({
					content: '你确定要取消此次退货吗？',
					success: res => {
						if (res.confirm) {
							cancelRefund({
								refund_id
							}).then(res => {
								if (res.code == 200) {
									this.getDetail(this.order_no);
									uni.showToast({
										title: '取消退货成功'
									});
								} else {
									uni.showModal({
										content: res.data || '取消失败',
										showCancel: false
									});
								}
							});
						}
					}
				});
			},
			/*获取退货订单详情*/
			getDetail(order_no) {
				getRefund({
					order_no
				}).then(res => {
					if (res.code == 200) {
						let refund = res.data;
						refund.map(i => {
							i.img = i.img ? JSON.parse(i.img) : "";
						})
						this.refundInfo = refund;
					} else {
						uni.showModal({
							content: res.data || '获取详情失败',
							showCancel: false
						});
					}
				});
			},
			/*复制订单号*/
			copy(data) {
				uni.setClipboardData({
					data,
					success: res => {
						uni.showToast({
							title: '复制成功'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					}
				})
			},
		}
	};
</script>
<style>
	page {
		min-height: 100%;
		width: 100%;
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.audit {
		padding-bottom: 150rpx;

		.refund_num {
			width: 690rpx;
			background: #fff;
			margin: 30rpx auto;
			border-radius: 8rpx;
			padding: 15rpx;
			font-size: 32rpx;
			font-weight: bold;
			box-sizing: border-box;
		}

		.audit_con {
			width: 690rpx;
			margin: 0 auto 30rpx;
			background: #fff;
			border-radius: 24rpx;
			padding-bottom: 30rpx;

			.sub_btn {
				margin: 20rpx auto;
			}

			.audit_money {
				padding: 10rpx 30rpx;
			}

			.refund {
				height: 110rpx;
			}

			.goods_info {
				padding: 30rpx 30rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					padding: 0 0 20rpx 0;
				}

				.goods_con {
					padding-bottom: 20rpx;

					.goods_img {
						width: 180rpx;
						height: 144rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}

					.goods_name {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.size_box {
					width: 100%;
					background: #f9f9f9;
					// padding: 15rpx;
					padding: 15rpx 0;
					margin-top: 15rpx;
					border-radius: 8rpx;

					text {
						width: 20%;
						text-align: center;
					}
				}
			}

			.label {
				padding: 10rpx 0;

				text:first-child {
					font-size: 30rpx;
					color: #999;
				}

				text:last-child {
					font-size: 28rpx;
					color: #333;
				}
			}

			.audit_order {
				padding: 10rpx 30rpx;
				margin-bottom: 15rpx;

				.order_bottom {
					border-top: 2rpx solid #eeeeee;

					.img_box {
						image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 8rpx;
							margin-right: 10rpx;
						}
					}

				}

			}

			.reject_box {
				padding: 15rpx 30rpx;
			}
		}
	}
</style>