baqing-shop/shop-app/subpackage/order/aftersale-detail.vue

<template>
	<view class="aftersale-detail-page">
		<view v-if="pageLoading" class="aftersale-detail-state">
			<u-loading-icon mode="circle" />
		</view>

		<view v-else-if="pageError" class="aftersale-detail-state">
			<u-empty mode="page" :text="pageError" icon-size="80" />
			<u-button type="primary" text="重试" size="small" custom-style="margin-top:24rpx" @click="loadDetail" />
		</view>

		<scroll-view v-else-if="detail" class="aftersale-detail-scroll" scroll-y>
			<view class="as-progress">
				<text class="as-progress__title">{{ detail.statusText }}</text>
				<text class="as-progress__step">{{ progressText }}</text>
			</view>

			<view class="as-card">
				<text class="as-card__title">商品信息</text>
				<view class="as-goods">
					<image-preview class="as-goods__pic" :src="detail.goodsImage" />
					<view class="as-goods__info">
						<text class="as-goods__name">{{ detail.goodsName }}</text>
						<text
							v-for="(spec, idx) in detail.specList"
							:key="idx"
							class="as-goods__spec"
						>{{ spec }}</text>
					</view>
				</view>
			</view>

			<view class="as-card">
				<text class="as-card__title">售后信息</text>
				<view class="as-row">
					<text class="as-row__label">售后编号</text>
					<text class="as-row__val">{{ detail.aftersaleNo }}</text>
				</view>
				<view class="as-row">
					<text class="as-row__label">订单编号</text>
					<text class="as-row__val">{{ detail.orderNo || '—' }}</text>
				</view>
				<view class="as-row">
					<text class="as-row__label">申请类型</text>
					<text class="as-row__val">{{ detail.applyTypeText }}</text>
				</view>
				<view class="as-row">
					<text class="as-row__label">售后原因</text>
					<text class="as-row__val">{{ detail.applyReason }}</text>
				</view>
				<view v-if="detail.returnQuantity" class="as-row">
					<text class="as-row__label">退货数量</text>
					<text class="as-row__val">{{ detail.returnQuantity }}</text>
				</view>
				<view class="as-row">
					<text class="as-row__label">申请金额</text>
					<text class="as-row__val">¥{{ detail.applyAmountText }}</text>
				</view>
				<view class="as-row">
					<text class="as-row__label">申请时间</text>
					<text class="as-row__val">{{ detail.createTime }}</text>
				</view>
				<view v-if="detail.finishTime" class="as-row">
					<text class="as-row__label">完结时间</text>
					<text class="as-row__val">{{ detail.finishTime }}</text>
				</view>
				<view v-if="detail.description" class="as-row">
					<text class="as-row__label">补充描述</text>
					<text class="as-row__val">{{ detail.description }}</text>
				</view>
			</view>

			<view v-if="detail.evidencePics && detail.evidencePics.length" class="as-card">
				<text class="as-card__title">凭证图片</text>
				<view class="as-pics">
					<image-preview
						v-for="(pic, idx) in detail.evidencePics"
						:key="idx"
						class="as-pics__item"
						:src="pic"
						preview
						:preview-list="detail.evidencePics"
						:preview-index="idx"
					/>
				</view>
			</view>

			<view v-if="detail.processResult" class="as-card">
				<text class="as-card__title">处理结果</text>
				<text class="as-result">{{ detail.processResult }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getAftersaleDetail } from '@/api/orderAftersale'
import { mapAftersaleDetail } from '@/utils/orderDisplay'
import { ensureApiToken } from '@/utils/apiAuth'
const aftersaleId = ref('')
const detail = ref(null)
const pageLoading = ref(true)
const pageError = ref('')

const progressText = computed(() => {
	if (!detail.value) return ''
	if (detail.value.progressText) return detail.value.progressText
	const p = detail.value.progress
	if (p === 'FINISHED') return '商家处理 → 售后完结（当前：售后完结）'
	return '商家处理 → 售后完结（当前：商家处理）'
})

async function loadDetail() {
	if (!aftersaleId.value) return
	pageLoading.value = !detail.value
	pageError.value = ''
	try {
		const res = await getAftersaleDetail(aftersaleId.value)
		detail.value = mapAftersaleDetail(res.data)
		if (!detail.value) throw new Error('售后数据异常')
	} catch (e) {
		pageError.value = (e && e.message) || '加载失败'
	} finally {
		pageLoading.value = false
	}
}

onLoad((options) => {
	aftersaleId.value = options.aftersaleId || ''
	if (!aftersaleId.value) {
		pageError.value = '售后信息缺失'
		pageLoading.value = false
	}
})

onShow(() => {
	if (!ensureApiToken(false)) return
	if (!aftersaleId.value) return
	loadDetail()
})
</script>

<style lang="scss" scoped>
.aftersale-detail-page {
	min-height: 100vh;
	background: #f5f6f8;
}
.aftersale-detail-state {
	padding: 120rpx 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.aftersale-detail-scroll {
	height: 100vh;
	padding: 16rpx 24rpx;
	box-sizing: border-box;
}
.as-progress {
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
	border-radius: 12rpx;
	color: #fff;
}
.as-progress__title {
	display: block;
	font-size: 34rpx;
	font-weight: 600;
}
.as-progress__step {
	display: block;
	margin-top: 12rpx;
	font-size: 26rpx;
	opacity: 0.9;
}
.as-card {
	margin-bottom: 16rpx;
	padding: 24rpx;
	background: #fff;
	border-radius: 12rpx;
}
.as-card__title {
	display: block;
	margin-bottom: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}
.as-goods {
	display: flex;
}
.as-goods__pic {
	width: 140rpx;
	height: 140rpx;
	border-radius: 8rpx;
	background: #eee;
}
.as-goods__info {
	flex: 1;
	margin-left: 16rpx;
}
.as-goods__name {
	display: block;
	font-size: 28rpx;
	color: #333;
}
.as-goods__spec {
	display: block;
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #999;
}
.as-row {
	display: flex;
	padding: 10rpx 0;
	font-size: 26rpx;
}
.as-row__label {
	width: 160rpx;
	color: #999;
	flex-shrink: 0;
}
.as-row__val {
	flex: 1;
	color: #333;
	word-break: break-all;
}
.as-pics {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}
.as-pics__item {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	background: #eee;
}
.as-result {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}
</style>