store-new/pagesA/pages/after-sale/after-sale.vue

<template>
	<view class="audit">
		<view>
			<view class="audit_bg flexC" :style="{
					background:
						(orderInfo.status == 2 && type == 1) || (orderInfo.apply_cancel == 3 && type == 0)
							? failBg
							: (orderInfo.status == 1 && type == 1) || (orderInfo.apply_cancel == 2 && type == 0)
							? suceBg
							: auditBg
				}">
				<view class="audit_state flexC"
					v-if="(orderInfo.status == 0 && type == 1) || (orderInfo.apply_cancel == 1 && type == 0)">
					<image src="../../../static/imgs/shop/audit.png" class="state_icon"></image>
					<view>
						<view>{{ type == 0 ? '取消订单' : '退货' }}审核中...</view>
						<text>正在审核请耐心等待</text>
					</view>
				</view>
				<view class="audit_state flexC"
					v-if="(orderInfo.status == 2 && type == 1) || (orderInfo.apply_cancel == 3 && type == 0)">
					<image src="../../static/fail.png" class="state_icon"></image>
					<view>
						<view>{{ type == 0 ? '取消订单失败' : '退货已驳回' }}</view>
						<text>{{ orderInfo.updated_at }}</text>
					</view>
				</view>
				<view class="audit_state flexC"
					v-if="(orderInfo.status == 1 && type == 1) || (orderInfo.apply_cancel == 2 && type == 0)">
					<image src="../../static/suce.png" class="state_icon"></image>
					<view>
						<view>{{ type == 0 ? '取消订单' : '退货' }}成功</view>
						<text>{{ orderInfo.updated_at }}</text>
					</view>
				</view>
			</view>
			<view class="audit_con">
				<view class="refund flexB">
					<view>退款金额</view>
					<view class="total">
						<text class="price">¥</text>
						<text v-if="goods">{{ goods | cancelPrice }}</text>
					</view>
				</view>
				<view class="goods_info">
					<view class="title">{{ type == 0 ? '商品信息' : '退货信息' }}</view>
					<view v-for="item in goods" :key="item.id" class="goods_con">
						<view class="flexS">
							<image :src="item.img" class="goods_img"></image>
							<view>
								<text class="goods_name">{{ item.name }}</text>
								<view class="one_year" style="width:120rpx;">3条装</view>
							</view>
						</view>
						<view class="goods_size">
							<view class="size_box flexB" v-for="temp in item.sku" :key="temp.id">
								<text>{{ temp.type }}</text>
								<text>{{ temp.size }}</text>
								<text>{{ temp.price }}</text>
								<text>X{{ temp.num }}</text>
							</view>
						</view>
					</view>
					<view class="flexE" style="margin-top:20rpx;">
						<text class="gray" v-if="goods">共{{ goods | totalNum }}套</text>
						<text class="gray">合计：</text>
						<text class="total">
							<text>¥</text>
							<text class="price" v-if="goods">{{ goods | cancelPrice }}</text>
						</text>
					</view>
				</view>
				<view class="audit_order">
					<view class="order_top">
						<view class="label flexS">
							<view>
								<text>订单号：</text>
								<text style="font-size:24rpx;">{{ orderInfo.order_no }}</text>
							</view>
							<view class="copy_new_btn" @click="copy(orderInfo.order_no)">复制</view>
						</view>
						<view class="label flexS" v-if="type == 1">
							<view>
								<text>退单号：</text>
								<text style="font-size:24rpx;">{{ orderInfo.refund_no }}</text>
							</view>
							<view class="copy_new_btn" @click="copy(orderInfo.refund_no)">复制</view>
						</view>
						<view class="label">
							<text>申请时间：</text>
							<text>{{ orderInfo.created_at ? orderInfo.created_at : orderInfo.cancel && orderInfo.cancel.created_at }}</text>
						</view>
						<view class="label">
							<text>服务类型：</text>
							<text>{{ type == 0 ? '取消订单' : '退货' }}</text>
						</view>
					</view>
					<view class="order_bottom" v-if="orderInfo.reason">
						<view class="label">
							<text>{{ type == 0 ? '取消' : '退货' }}原因：</text>
							<text
								style="color:#F76454">{{ orderInfo.reason ? orderInfo.reason : orderInfo.cancel && orderInfo.cancel.reason }}</text>
						</view>
						<view class="label" v-if="type == 1 && orderInfo.reason_all">
							<text>补充说明：</text>
							<text style="color:#F76454">{{ orderInfo.reason_all }}</text>
						</view>
						<view class="img_box flexS" v-if="type == 1 && imgs">
							<view v-for="(item, index) in imgs" :key="index">
								<image :src="item" @click="previewImg(item,imgs)"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="reject_box" v-if="orderInfo.cancel && orderInfo.cancel.remark">
					<view class="label">
						<text>驳回原因：</text>
						<text>{{ orderInfo.cancel.remark }}</text>
					</view>
				</view>
			</view>
			<view class="fixed_bottom flexC" v-if="orderInfo.status == 0 && orderInfo.op_type == 2"
				@click.stop="cancelRefund()">
				<view class="flexC">取消退货</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		handleClipboard
	} from '@/common/util/utils.js';
	import {
		orderQuery,
		refundOrderDetail,
		cancelRefund
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				orderInfo: '', //订单信息
				goods: '', //商品信息
				imgs: '', //退货时上传的图片
				type: '', //类型  1是取消订单 0退货订单
				remark: '', //驳回申请的原因
				suceBg: 'linear-gradient(315deg, #5fbc23 0%, #85ce52 100%)', //成功背景
				failBg: 'linear-gradient(45deg, #f86638 0%, #f44545 100%)', //失败背景
				auditBg: 'linear-gradient(89deg, #ffbf63 0%, #fc8924 100%)', //审核中背景
				refund_id: '' //退货id
			};
		},
		onLoad(ops) {
			this.type = ops.type;
			this.refund_id = ops.refund_id;
			if (ops.refund_id) {
				this.getDetail(ops.refund_id);
			} else {
				this.getOrder(ops.order_no);
			}
		},
		filters: {
			//取消订单总金额
			cancelPrice(data) {
				let cancelPrice = 0;
				data.map(i => {
					i.sku.map(j => {
						cancelPrice += j.num * j.price;
					});
				});
				return cancelPrice;
			}
		},
		methods: {
			//点击预览图片
			previewImg(img, imgs) {
				uni.previewImage({
					urls: imgs,
					current: img
				})
			},
			//取消退货
			cancelRefund() {
				uni.showModal({
					content: '你确定要取消退货吗?',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中...'
							});
							cancelRefund({
									refund_id: this.refund_id
								})
								.then(res => {
									if (res.code == 200) {
										uni.showModal({
											content: '取消退货成功',
											showCancel: false,
											success: res => {
												if (res.confirm) {
													uni.reLaunch({
														url: '../refund-manage/refund-manage?status=' +
															0
													});
												}
											}
										});
									} else {
										uni.showModal({
											content: res.data || '取消退货失败',
											showCancel: false
										});
									}
									uni.hideLoading();
								})
								.catch(err => {
									uni.hideLoading();
								});
						}
					}
				});
			},
			/*复制订单号*/
			copy(data) {
				uni.setClipboardData({
					data,
					success: res => {
						uni.showToast({
							title: '复制成功'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					}
				})
			},
			/*获取退货订单详情*/
			getDetail(refund_id) {
				uni.showLoading({
					title: '加载中...'
				});
				refundOrderDetail({
						refund_id
					})
					.then(res => {
						if (res.code == 200) {
							this.orderInfo = res.data;
							this.goods = res.data.goods;
							let img = res.data.img;
							if (img) {
								this.imgs = JSON.parse(img);
							}
						} else {
							uni.showModal({
								content: res.msg || '获取详情失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			/*取消订单详情*/
			getOrder(order_no) {
				uni.showLoading({
					title: '加载中...'
				});
				orderQuery({
						order_no
					})
					.then(res => {
						if (res.code == 200) {
							this.orderInfo = res.data;
							this.goods = res.data.goods;
						} else {
							uni.showModal({
								content: res.msg || '获取订单详情失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			//查看订单详情
			skipDetail() {
				uni.navigateTo({
					url: '../order-info/order-info?order_no=' + this.info.order_no
				});
			}
		}
	};
</script>
<style>
	page {
		min-height: 100%;
		width: 100%;
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.audit {
		padding-bottom: 180rpx;
	}

	.audit_bg {
		width: 100%;
		height: 282rpx;

		.audit_state {

			view,
			text {
				color: #fff;
				font-size: 28rpx;
			}

			view {
				magin-bottom: 15rpx;
				font-size: 36rpx;
				font-weight: bold;
			}

			.state_icon {
				width: 150rpx;
				height: 115rpx;
			}
		}
	}

	.audit_con {
		width: 690rpx;
		margin: -52rpx auto 0;
		position: relative;

		// padding-bottom: 180rpx;
		>view {
			padding: 0 30rpx;
			background: #fff;
			border-radius: 24rpx;
		}

		.refund {
			height: 110rpx;
		}

		.goods_info {
			margin: 30rpx 0;
			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: 30rpx;
					font-weight: bold;
				}
			}

			.size_box {
				width: 100%;
				background: #f9f9f9;
				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: 15rpx 20rpx;
			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;
		}
	}

	.btn_box {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 0 30rpx;

		view {
			width: 300rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}

		view:first-child {
			border: 2rpx solid #cccccc;
		}

		view:last-child {
			background: linear-gradient(93deg, #ffbf63 0%, #fc8924 100%);
			color: #fff;
		}
	}

	//取消弹窗样式
	.cancel_box {
		padding-top: 30rpx;

		.reason_box {
			width: 90%;
			margin: 15rpx auto 0;

			textarea {
				width: 100%;
				height: 282rpx;
				background: #f7f7f7;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
			}
		}

		.cancel_btn {
			margin-top: 50rpx;
			width: 100%;

			view {
				width: 300rpx;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				color: $base-color;
				border-radius: 44rpx;
				font-size: 32rpx;
				background: #fff4f3;
				border: 1rpx solid $base-color;
			}

			view:last-child {
				color: #fff;
				background: $base-color;
			}
		}
	}

	.fixed_bottom {
		width: 100%;
		background: #fff;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		view {
			width: 690rpx;
			height: 88rpx;
			margin: 0 auto;
			background: $base-line-bg;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>