From 815470aaf08c63db9f6e8c5845a3fe3f8c5d5d6e Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Mon, 18 Aug 2025 11:00:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=96=9C=E5=A5=BD=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/tabbar/canteenAnalyse.vue | 150 +++++++++++++++-------------
 1 file changed, 82 insertions(+), 68 deletions(-)

diff --git a/src/pages/tabbar/canteenAnalyse.vue b/src/pages/tabbar/canteenAnalyse.vue
index 3a7e017..d5e8dee 100644
--- a/src/pages/tabbar/canteenAnalyse.vue
+++ b/src/pages/tabbar/canteenAnalyse.vue
@@ -1,83 +1,97 @@
 <template>
-	<crud-layout title="详情" mainIsScroll bg="/static/page/blue-bg.png">
-		<tm-sheet :margin="[0, 20]">
-			<view class="prefix_title mb-15rpx">菜品分类购买数量占比图</view>
-			<view class="w-full h-600rpx">
-				<qiun-data-charts type="pie" :opts="pieChartOpts" :chartData="pieChartData" tooltipFormat="canteenPieTooltip" />
-			</view>
-		</tm-sheet>
-
-		<tm-sheet :margin="[0, 20]">
-			<view class="prefix_title mb-15rpx">近一周各食堂购买数量趋势图</view>
-			<view class="w-full h-600rpx">
-				<!-- tooltipFormat="canteenAreaTooltip" -->
-				<qiun-data-charts type="area" :opts="areaChartOpts" :chartData="areaChartData" />
-			</view>
-		</tm-sheet>
-
-		<tm-sheet :margin="[0, 20]">
-			<view class="prefix_title mb-15rpx">个人菜品喜好排行</view>
-			<view v-if="productLikeTopList.length > 0" class="rounded-16rpx bg-white overflow-hidden card">
-				<view class="bg-gradient-to-r from-blue-100 to-blue-100 px-20rpx py-16rpx flex items-center border-b border-gray-100">
-					<view class="w-80rpx text-center text-24rpx font-bold text-gray-600">排名</view>
-					<view class="flex-1 px-16rpx text-24rpx font-bold text-gray-600">菜品名称</view>
-					<view class="w-120rpx text-center text-24rpx font-bold text-gray-600">分类</view>
-					<view class="w-160rpx text-center text-24rpx font-bold text-gray-600">购买数量</view>
+	<crud-layout title="喜好分析" bg="/static/page/blue-bg.png">
+		<z-paging
+			ref="pageRef"
+			height="100%"
+			:fixed="false"
+			safe-area-inset-bottom
+			:loading-more-enabled="true"
+			:show-scrollbar="false"
+			@query="query"
+			:auto-clean-list-when-reload="false"
+			:auto-scroll-to-top-when-reload="false"
+			hide-empty-view
+		>
+			<tm-sheet :margin="[0, 20]">
+				<view class="prefix_title mb-15rpx">菜品分类购买数量占比图</view>
+				<view class="w-full h-600rpx">
+					<qiun-data-charts type="pie" :opts="pieChartOpts" :chartData="pieChartData" tooltipFormat="canteenPieTooltip" />
 				</view>
+			</tm-sheet>
 
-				<view
-					v-for="(item, index) in productLikeTopList"
-					:key="item.productId"
-					class="flex items-center px-20rpx py-16rpx border-b border-gray-50 hover:bg-gray-50 transition-colors"
-					:class="{
-						'bg-gradient-to-r from-yellow-50 to-orange-50': index === 0,
-						'bg-gradient-to-r from-gray-50 to-gray-100': index === 1,
-						'bg-gradient-to-r from-orange-50 to-red-50': index === 2,
-					}"
-				>
-					<view class="w-80rpx flex justify-center items-center">
-						<view
-							v-if="index < 3"
-							class="w-40rpx h-40rpx rounded-1 flex items-center justify-center text-20rpx font-bold text-white"
-							:class="{
-								'bg-gradient-to-r from-yellow-400 to-yellow-500': index === 0,
-								'bg-gradient-to-r from-gray-400 to-gray-500': index === 1,
-								'bg-gradient-to-r from-orange-400 to-orange-500': index === 2,
-							}"
-						>
-							{{ index + 1 }}
+			<tm-sheet :margin="[0, 20]">
+				<view class="prefix_title mb-15rpx">近一周各食堂购买数量趋势图</view>
+				<view class="w-full h-600rpx">
+					<!-- tooltipFormat="canteenAreaTooltip" -->
+					<qiun-data-charts type="area" :opts="areaChartOpts" :chartData="areaChartData" />
+				</view>
+			</tm-sheet>
+
+			<tm-sheet :margin="[0, 20]">
+				<view class="prefix_title mb-15rpx">个人菜品喜好排行</view>
+				<view v-if="productLikeTopList.length > 0" class="rounded-16rpx bg-white overflow-hidden card">
+					<view class="bg-gradient-to-r from-blue-100 to-blue-100 px-20rpx py-16rpx flex items-center border-b border-gray-100">
+						<view class="w-80rpx text-center text-24rpx font-bold text-gray-600">排名</view>
+						<view class="flex-1 px-16rpx text-24rpx font-bold text-gray-600">菜品名称</view>
+						<view class="w-120rpx text-center text-24rpx font-bold text-gray-600">分类</view>
+						<view class="w-160rpx text-center text-24rpx font-bold text-gray-600">购买数量</view>
+					</view>
+
+					<view
+						v-for="(item, index) in productLikeTopList"
+						:key="item.productId"
+						class="flex items-center px-20rpx py-16rpx border-b border-gray-50 hover:bg-gray-50 transition-colors"
+						:class="{
+							'bg-gradient-to-r from-yellow-50 to-orange-50': index === 0,
+							'bg-gradient-to-r from-gray-50 to-gray-100': index === 1,
+							'bg-gradient-to-r from-orange-50 to-red-50': index === 2,
+						}"
+					>
+						<view class="w-80rpx flex justify-center items-center">
+							<view
+								v-if="index < 3"
+								class="w-40rpx h-40rpx rounded-1 flex items-center justify-center text-20rpx font-bold text-white"
+								:class="{
+									'bg-gradient-to-r from-yellow-400 to-yellow-500': index === 0,
+									'bg-gradient-to-r from-gray-400 to-gray-500': index === 1,
+									'bg-gradient-to-r from-orange-400 to-orange-500': index === 2,
+								}"
+							>
+								{{ index + 1 }}
+							</view>
+							<view v-else class="text-24rpx font-medium text-gray-500">{{ index + 1 }}</view>
 						</view>
-						<view v-else class="text-24rpx font-medium text-gray-500">{{ index + 1 }}</view>
-					</view>
 
-					<view class="flex-1 px-16rpx">
-						<view class="text-26rpx font-medium text-gray-800 truncate">{{ item.productName || "未知菜品" }}</view>
-					</view>
+						<view class="flex-1 px-16rpx">
+							<view class="text-26rpx font-medium text-gray-800 truncate">{{ item.productName || "未知菜品" }}</view>
+						</view>
 
-					<view class="w-120rpx text-center">
-						<view class="text-22rpx text-gray-600 truncate">{{ item.classifyName || "未分类" }}</view>
-					</view>
+						<view class="w-120rpx text-center">
+							<view class="text-22rpx text-gray-600 truncate">{{ item.classifyName || "未分类" }}</view>
+						</view>
 
-					<view class="w-160rpx text-center">
-						<view class="px-12rpx py-6rpx bg-blue-100 text-blue-600 text-22rpx rounded-1 whitespace-nowrap">{{ item.payCount }}次</view>
+						<view class="w-160rpx text-center">
+							<view class="px-12rpx py-6rpx bg-blue-100 text-blue-600 text-22rpx rounded-1 whitespace-nowrap">{{ item.payCount }}次</view>
+						</view>
 					</view>
 				</view>
-			</view>
 
-			<view v-else class="bg-white rounded-16rpx p-60rpx flex flex-col items-center justify-center">
-				<view class="text-28rpx text-gray-500">暂无菜品喜好数据</view>
-			</view>
-		</tm-sheet>
+				<view v-else class="bg-white rounded-16rpx p-60rpx flex flex-col items-center justify-center">
+					<view class="text-28rpx text-gray-500">暂无菜品喜好数据</view>
+				</view>
+			</tm-sheet>
 
-		<view class="h-80rpx" />
+			<view class="h-80rpx" />
+		</z-paging>
 	</crud-layout>
 </template>
 
 <script setup lang="ts">
-import { onLoad, onShow } from "@dcloudio/uni-app"
+import { onLoad } from "@dcloudio/uni-app"
 import { ref } from "vue"
 import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts.vue"
 import { totalApi } from "@/sheep/api"
+import { hooks } from "@/sheep"
 
 const pieChartData = ref({})
 const areaChartData = ref({})
@@ -152,16 +166,16 @@ const areaChartOpts = {
 onLoad(() => {
 	const app = getApp()
 	app._initTabbar()
+})
 
+const pageRef = ref<any>(null)
+const pageHook = hooks.usePage(pageRef, () => [], null, "")
+const query = () => {
 	getPieChartData()
 	getAreaChartData()
 	getProductLikeTop()
-})
-onShow(() => {
-	getPieChartData()
-	getAreaChartData()
-	getProductLikeTop()
-})
+	pageHook.startPage()
+}
 
 const getPieChartData = async () => {
 	const { code, data, msg } = await totalApi.productByClassify({})