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

<template>
	<view class="aftersale-list-page">
		<view class="aftersale-tabs">
			<view
				v-for="tab in tabs"
				:key="tab.key"
				class="aftersale-tabs__item"
				:class="{ 'aftersale-tabs__item--on': activeTab === tab.key }"
				@click="onTabChange(tab.key)"
			>
				{{ tab.label }}
			</view>
		</view>

		<scroll-view
			class="aftersale-scroll"
			scroll-y
			:style="{ height: scrollHeight }"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onPullRefresh"
			@scrolltolower="onLoadMore"
		>
			<view v-if="loading && !list.length" class="aftersale-state">
				<u-loading-icon mode="circle" />
			</view>
			<view v-else-if="!list.length" class="aftersale-state">
				<u-empty mode="list" text="暂无售后记录" icon-size="80" />
			</view>
			<template v-else>
				<view
					v-for="row in list"
					:key="row.aftersaleId"
					class="aftersale-card"
					@click="goAftersaleDetail(row.aftersaleId)"
				>
					<view class="aftersale-card__head">
						<text class="aftersale-card__no">{{ row.aftersaleNo }}</text>
						<text class="aftersale-card__status">{{ row.statusText }}</text>
					</view>
					<view class="aftersale-card__goods">
						<image-preview class="aftersale-card__pic" :src="row.goodsImage" />
						<view class="aftersale-card__info">
							<text class="aftersale-card__name">{{ row.goodsName }}</text>
							<text class="aftersale-card__type">{{ row.applyTypeText }} · {{ row.applyReason }}</text>
						</view>
					</view>
					<view class="aftersale-card__foot">
						<text>申请金额 ¥{{ row.applyAmountText }}</text>
						<text>{{ row.createTime }}</text>
					</view>
				</view>
				<view class="aftersale-footer">
					<text v-if="loadingMore">加载中...</text>
					<text v-else-if="finished">没有更多了</text>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { listAftersales } from '@/api/orderAftersale'
import { mapAftersaleListRow } from '@/utils/orderDisplay'
import { AFTERSALE_TABS, AFTERSALE_TAB, ORDER_PAGE_SIZE } from '@/constants/order'
import { ensureApiToken } from '@/utils/apiAuth'
import { goAftersaleDetail } from '@/utils/orderNav'

const tabs = AFTERSALE_TABS
const activeTab = ref(AFTERSALE_TAB.IN_PROGRESS)
const list = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const pageNum = ref(1)
const scrollHeight = ref('600px')

function calcScrollHeight() {
	try {
		const sys = uni.getSystemInfoSync()
		scrollHeight.value = `${(sys.windowHeight || 600) - 52}px`
	} catch (e) {
		scrollHeight.value = '600px'
	}
}

async function fetchPage(isReset) {
	if (isReset) {
		loading.value = true
		pageNum.value = 1
		finished.value = false
	} else if (finished.value || loadingMore.value) {
		return
	} else {
		loadingMore.value = true
	}
	try {
		const res = await listAftersales({
			tab: activeTab.value,
			pageNum: pageNum.value,
			pageSize: ORDER_PAGE_SIZE
		})
		const rows = (res.rows || []).map(mapAftersaleListRow).filter(Boolean)
		const total = Number(res.total) || 0
		if (isReset) {
			list.value = rows
		} else {
			list.value = list.value.concat(rows)
		}
		finished.value = list.value.length >= total || rows.length < ORDER_PAGE_SIZE
		if (!finished.value) pageNum.value += 1
	} catch (e) {
		if (isReset) list.value = []
	} finally {
		loading.value = false
		loadingMore.value = false
		refreshing.value = false
	}
}

function onTabChange(key) {
	if (activeTab.value === key) return
	activeTab.value = key
	fetchPage(true)
}

function onPullRefresh() {
	refreshing.value = true
	fetchPage(true)
}

function onLoadMore() {
	fetchPage(false)
}

onLoad((options) => {
	calcScrollHeight()
	if (options.tab) activeTab.value = options.tab
})

onShow(() => {
	if (!ensureApiToken(false)) return
	fetchPage(true)
})
</script>

<style lang="scss" scoped>
.aftersale-list-page {
	height: calc(100vh - 88rpx);
	background: #f5f6f8;
}
.aftersale-tabs {
	display: flex;
	background: #fff;
}
.aftersale-tabs__item {
	flex: 1;
	text-align: center;
	padding: 24rpx 0;
	font-size: 28rpx;
	color: #666;
}
.aftersale-tabs__item--on {
	color: #2e7d32;
	font-weight: 600;
	border-bottom: 4rpx solid #2e7d32;
}
.aftersale-scroll {
	padding: 16rpx 24rpx;
	box-sizing: border-box;
}
.aftersale-state {
	padding: 120rpx 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.aftersale-card {
	margin-bottom: 16rpx;
	padding: 20rpx 24rpx;
	background: #fff;
	border-radius: 12rpx;
}
.aftersale-card__head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12rpx;
}
.aftersale-card__no {
	font-size: 26rpx;
	color: #666;
}
.aftersale-card__status {
	font-size: 26rpx;
	color: #e65100;
}
.aftersale-card__goods {
	display: flex;
}
.aftersale-card__pic {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	background: #eee;
}
.aftersale-card__info {
	flex: 1;
	margin-left: 16rpx;
}
.aftersale-card__name {
	display: block;
	font-size: 28rpx;
	color: #333;
}
.aftersale-card__type {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #999;
}
.aftersale-card__foot {
	margin-top: 12rpx;
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999;
}
.aftersale-footer {
	padding: 24rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999;
}
</style>