purchase-let/pages/afterSales/afterSalesOrderDetail.vue

<template>
	<view class="detail" v-if="shopInfo">
		<view class="money" v-if="shopInfo.status == -2">
			<view style="display: flex;align-items: center;">
				<up-icon name="rmb-circle" color="#FC6957"></up-icon>
				<text style="margin-left: 8rpx;">退款总金额</text>
			</view>
			<view>￥{{shopInfo.refund_price}}</view>
		</view>

		<view class="close" v-if="shopInfo.status == 5">
			<view class="close-status">
				<text>退款关闭</text>
				<view>{{shopInfo.refund_cancle_time}}</view>
			</view>
			<view class="close-desc">因您取消退款申请，退款已关闭，交易将正常进行。</view>
		</view>

		<view class="detail-wrap">
			<view class="detail-wrap-title">退款信息</view>
			<view class="afterSales-goods-wrap" v-for="item in shopInfo.goods_list">
				<view class="afterSales-goods-left">
					<up-image width="140rpx" height="140rpx" radius="8rpx" :src="item.image"></up-image>
				</view>
				<view class="afterSales-goods-right">
					<view class="afterSales-goods-right-title">
						<text class="goods_name">{{item.store_name}}</text>
					</view>
					<view class="afterSales-goods-right-info">
						<text class="goods_desc">{{item.unit || ''}}</text>
					</view>
				</view>
			</view>

			<view class="info">
				<view class="info-item">
					<view class="info-label">退款原因</view>
					<view class="info-con">{{shopInfo.refund_reason}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">退款金额</view>
					<view class="info-con">￥{{shopInfo.refund_price}}</view>
				</view>

				<view class="info-item">
					<view class="info-label">申请件数</view>
					<view class="info-con">{{shopInfo.refund_num}}</view>
				</view>

				<view class="info-item">
					<view class="info-label">订单编号</view>
					<view class="info-con">{{shopInfo.order_id}}</view>
				</view>

				<view class="info-item">
					<view class="info-label">申请时间</view>
					<view class="info-con">{{shopInfo.refund_reason_time}}</view>
				</view>

				<view class="sh" v-if="shopInfo.status == -1">
					<view class="sh-item" @click="onCancelRefund">取消售后</view>
					<up-line direction="col" color="#707070" length="20rpx"></up-line>
					<view class="sh-item" @click="onContactShop(shopInfo.store_phone)">联系商家</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		getCurrentInstance
	} from "vue";
	import {
		cancelSaleApi
	} from "@/api/order.js";

	const instance = getCurrentInstance().proxy;
	const shopInfo = ref(null);

	onLoad(() => {
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('afterSalesDetail', function(data) {
			shopInfo.value = data;
			console.log(shopInfo.value);
		})
	})

	// 取消售后
	const onCancelRefund = () => {

		uni.showModal({
			title: '您确认要取消申请售后吗？',
			confirmText: '确认',
			cancelText: '申请售后',
			success: (e) => {
				if (!e.confirm) {
					cancelSaleApi({
						order_id: shopInfo.value.order_id
					}).then(res => {
						if (res.code == 1) {
							uni.$u.toast('取消成功');
						}
					})
				}
			},
			fail(err) {
				console.log(err);
			}
		})
	}

	// 联系商家
	const onContactShop = (e) => {
		if (!e) return;
		uni.makePhoneCall({
			phoneNumber: e
		})
	}
</script>

<style lang="scss">
	.detail {
		padding-top: 20rpx;

		.detail-wrap {
			margin: 0 20rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			padding: 20rpx 20rpx 1rpx 20rpx;
			box-sizing: border-box;

			.detail-wrap-title {
				font-weight: 600;
				font-size: 28rpx;
				color: #060606;
				margin-bottom: 30rpx;
			}

			.afterSales-goods-wrap {
				display: flex;
				margin-bottom: 30rpx;

				.afterSales-goods-left {
					margin-right: 20rpx;
				}

				.afterSales-goods-right {
					flex: 1;

					.afterSales-goods-right-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.goods_name {
							max-width: 400rpx;
							font-size: 28rpx;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.goods_price {
							font-weight: 600;
							font-size: 24rpx;
							color: #060606;
						}
					}

					.afterSales-goods-right-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						font-size: 24rpx;
						color: #777777;
						margin-bottom: 20rpx;
					}

					.refund {
						display: flex;
						color: #333333;

						.refund-txt {
							font-size: 24rpx;
							align-self: flex-end;
						}

						.refund-money {
							font-size: 32rpx;
						}
					}
				}
			}

			.info {
				.info-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.info-label {
						font-size: 28rpx;
						color: #333333;
					}

					.info-con {
						font-size: 28rpx;
						color: #777777;
					}
				}
			}
		}
	}

	.money {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #FC6957;
		background-color: #fff;
		border-radius: 12rpx;
		box-sizing: border-box;
		margin: 0 20rpx 20rpx;
	}

	.close {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin: 0 20rpx 20rpx;

		.close-status {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;

			text {
				margin-right: 10rpx;
				font-size: 28rpx;
				color: #FC6957;
			}

			view {
				font-size: 24rpx;
				color: #989898;
			}
		}

		.close-desc {
			font-size: 24rpx;
			color: #989898;
		}
	}

	.sh {
		display: flex;
		align-items: center;
		border-top: 2rpx solid #F3F3F3;

		.sh-item {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>