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

<template>

	<view class="review-list-page">

		<view class="review-tabs">

			<view

				v-for="tab in tabs"

				:key="tab.key"

				class="review-tabs__item"

				:class="{ 'review-tabs__item--on': activeTab === tab.key }"

				@click="onTabChange(tab.key)"

			>

				{{ tab.label }}

			</view>

		</view>



		<scroll-view

			class="review-scroll"

			scroll-y

			:style="{ height: scrollHeight }"

			refresher-enabled

			:refresher-triggered="refreshing"

			@refresherrefresh="onPullRefresh"

			@scrolltolower="onLoadMore"

		>

			<view v-if="loading && !displayList.length" class="review-state">

				<u-loading-icon mode="circle" />

			</view>

			<view v-else-if="!displayList.length" class="review-state">

				<u-empty mode="list" :text="emptyText" icon-size="80" />

			</view>

			<template v-else>

				<!-- 待评价：仅商品；点商品进订单详情，点「评价」进发表评价 -->

				<template v-if="activeTab === REVIEW_TAB.PENDING">

					<view

						v-for="entry in displayList"

						:key="entry.key"

						class="pending-item"

					>

						<order-goods-row

							:item="entry.item"

							:review-action="getItemReviewAction(entry.item)"

							@click="goOrderDetail(entry.orderId)"

							@review="(code) => onPendingReview(entry, code)"

						/>

					</view>

				</template>

				<!-- 已评价：紧凑摘要卡，点击进入查看评价页 -->

				<template v-else>

					<view

						v-for="entry in displayList"

						:key="entry.key"

						class="done-item"

						@click="onDoneItemClick(entry)"

					>

						<review-done-summary-card

							:item="entry.item"

							:score="entry.score"

							:content-brief="entry.contentBrief"

							:review-time="entry.reviewTime"

						/>

					</view>

				</template>

				<view class="review-footer">

					<text v-if="loadingMore">加载中...</text>

					<text v-else-if="finished">没有更多了</text>

				</view>

			</template>

		</scroll-view>

	</view>

</template>



<script setup>

import { ref, computed } from 'vue'

import { onLoad, onShow } from '@dcloudio/uni-app'

import { listReviews } from '@/api/orderReview'

import {

	flattenPendingReviewItems,

	mapReviewDoneRow,

	getItemReviewAction

} from '@/utils/orderDisplay'

import { REVIEW_TABS, REVIEW_TAB, ORDER_PAGE_SIZE, ORDER_ACTION } from '@/constants/order'

import { ensureApiToken } from '@/utils/apiAuth'

import { goOrderDetail, goReviewView, goReviewEdit } from '@/utils/orderNav'

import OrderGoodsRow from '@/components/order/OrderGoodsRow.vue'

import ReviewDoneSummaryCard from '@/components/order/ReviewDoneSummaryCard.vue'



const tabs = REVIEW_TABS

const activeTab = ref(REVIEW_TAB.PENDING)

/** 待评价为展平商品行；已评价为摘要行 */

const pendingList = ref([])

const doneList = 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')



const displayList = computed(() =>

	activeTab.value === REVIEW_TAB.PENDING ? pendingList.value : doneList.value

)



const emptyText = computed(() =>

	activeTab.value === REVIEW_TAB.PENDING ? '暂无待评价商品' : '暂无已评价'

)



function calcScrollHeight() {

	try {

		const sys = uni.getSystemInfoSync()

		scrollHeight.value = `${(sys.windowHeight || 600) - 52}px`

	} catch (e) {

		scrollHeight.value = '600px'

	}

}



function mapRowsByTab(rows) {

	if (activeTab.value === REVIEW_TAB.PENDING) {

		return flattenPendingReviewItems(rows)

	}

	return (rows || []).map(mapReviewDoneRow).filter((row) => row?.item)

}



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 listReviews({

			tab: activeTab.value,

			pageNum: pageNum.value,

			pageSize: ORDER_PAGE_SIZE

		})

		const rows = mapRowsByTab(res.rows || [])

		const total = Number(res.total) || 0

		const targetList =

			activeTab.value === REVIEW_TAB.PENDING ? pendingList : doneList

		if (isReset) {

			targetList.value = rows

		} else {

			targetList.value = targetList.value.concat(rows)

		}

		finished.value = targetList.value.length >= total || rows.length < ORDER_PAGE_SIZE

		if (!finished.value) pageNum.value += 1

	} catch (e) {

		if (isReset) {

			if (activeTab.value === REVIEW_TAB.PENDING) {

				pendingList.value = []

			} else {

				doneList.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)

}



function onPendingReview(entry, code) {

	if (code !== ORDER_ACTION.REVIEW || !entry?.orderId) return

	goReviewEdit(entry.orderId, entry.item?.orderItemId)

}



function onDoneItemClick(entry) {

	if (!entry?.orderId) return

	goReviewView(entry.orderId, entry.orderItemId)

}



onLoad((options) => {

	calcScrollHeight()

	if (options.tab) activeTab.value = options.tab

})



onShow(() => {

	if (!ensureApiToken(false)) return

	fetchPage(true)

})

</script>



<style lang="scss" scoped>

.review-list-page {

	height: calc(100vh - 88rpx);

	background: #f5f6f8;

}

.review-tabs {

	display: flex;

	background: #fff;

}

.review-tabs__item {

	flex: 1;

	text-align: center;

	padding: 24rpx 0;

	font-size: 28rpx;

	color: #666;

}

.review-tabs__item--on {

	color: #2e7d32;

	font-weight: 600;

	border-bottom: 4rpx solid #2e7d32;

}

.review-scroll {

	padding: 16rpx 24rpx;

	box-sizing: border-box;

}

.review-state {

	padding: 120rpx 48rpx;

	display: flex;

	flex-direction: column;

	align-items: center;

}

.pending-item {

	margin-bottom: 16rpx;

	padding: 8rpx 24rpx 12rpx;

	background: #fff;

	border-radius: 12rpx;

}

.done-item {

	margin-bottom: 16rpx;

}

.review-footer {

	padding: 24rpx;

	text-align: center;

	font-size: 24rpx;

	color: #999;

}

</style>