fix:商户查看优惠券列表

src/pages/merchant/coupon-list.vue

@@ -1,43 +1,58 @@
 <template>
 	<crud-layout mainIsScroll bg="/static/page/blue-bg.png">
-		<template #main-top>
-			<view class="bg-white rounded-16rpx px-20rpx my-20rpx mx-4">
-				<z-tabs :list="tabs" @change="doTab" />
-			</view>
-		</template>
-
-		<view
-			class="card w-full h-400rpx relative activity-card overflow-hidden mb-2 px-10 py-2"
-			:style="{ backgroundColor: getActStatus(item.actStatus)?.color }"
-			v-for="(item, index) in couponList"
-			:key="index"
+		<z-paging
+			ref="pageRef"
+			height="100%"
+			:fixed="false"
+			v-model="pageHook.list"
+			:default-page-size="10"
+			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"
+			@scroll="pageHook.scroll"
 		>
-			<view class="ribbon" :style="{ backgroundColor: getActStatus(item.actStatus)?.color }">
-				{{ getActStatus(item.actStatus)?.name }}
-			</view>
-			<view class="text-28 c-#fff text-right">ID {{ item.id }}</view>
-			<view class="flex justify-between font-bold mt-1">
-				<text class="text-32 c-#FFD941">限时领取</text>
-				<text class="text-32 c-#FFD941 px-1 rounded-full bg-#eeeeee44">2025-09-21</text>
-			</view>
-			<view class="w-4/5 py-2 text-30 c-#fff">店内消费额外支付1元可领取价值89元的速干T恤1件</view>
-			<view class="absolute bottom-60 left-80 text-28 bg-#eeeeee44 c-#fff px-2 rounded-full">限量领取 先领先得</view>
-			<view class="absolute bottom-40 right-80 text-20 c-#fff">领取时间 {{ item.createTime }}</view>
-			<view class="absolute bottom-10 right-80 text-20 c-#fff">核销时间 {{ item.receiverTime }}</view>
-		</view>
+			<template #top>
+				<view class="bg-white rounded-16rpx px-20rpx my-20rpx mx-4">
+					<z-tabs :list="tabs" @change="doTab" />
+				</view>
+			</template>
 
-		<view class="h-100rpx"></view>
+			<view
+				class="card w-full h-400rpx relative activity-card overflow-hidden mb-2 px-10 py-2"
+				:style="{ backgroundColor: getActStatus(item.actStatus)?.color }"
+				v-for="(item, index) in couponList"
+				:key="index"
+			>
+				<view class="ribbon" :style="{ backgroundColor: getActStatus(item.actStatus)?.color }">
+					{{ getActStatus(item.actStatus)?.name }}
+				</view>
+				<view class="text-28 c-#fff text-right">ID {{ item.id }}</view>
+				<view class="flex justify-between font-bold mt-1">
+					<text class="text-32 c-#FFD941">限时领取</text>
+					<text class="text-32 c-#FFD941 px-1 rounded-full bg-#eeeeee44">2025-09-21</text>
+				</view>
+				<view class="w-4/5 py-2 text-30 c-#fff">店内消费额外支付1元可领取价值89元的速干T恤1件</view>
+				<view class="absolute bottom-60 left-80 text-28 bg-#eeeeee44 c-#fff px-2 rounded-full">限量领取 先领先得</view>
+				<view class="absolute bottom-40 right-80 text-20 c-#fff">领取时间 {{ item.createTime }}</view>
+				<view class="absolute bottom-10 right-80 text-20 c-#fff">核销时间 {{ item.receiverTime }}</view>
+			</view>
+
+			<view class="h-100rpx"></view>
+		</z-paging>
 	</crud-layout>
 </template>
 
 <script setup lang="ts">
 import { actCancel } from "@/sheep/api"
-import { onLoad } from "@dcloudio/uni-app"
 import { reactive, ref } from "vue"
 import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
+import { hooks } from "@/sheep"
 
 const tabs = [
-	{ id: null, name: "全部", disabled: false },
+	{ id: null, name: "全部", disabled: false, color: "#7f7f7f77" },
 	{ id: 1, name: "未核销", disabled: false, color: "#1879ff77" },
 	{ id: 2, name: "已核销", disabled: false, color: "#03DC6C77" },
 	{ id: 3, name: "已过期", disabled: false, color: "#FF672B77" },
@@ -47,25 +62,21 @@ const params = reactive({
 })
 const couponList = ref<any>([])
 
-onLoad(() => {
-	getCouponList()
-})
+const pageRef = ref<any>(null)
+const pageHook = hooks.usePage(pageRef, actCancel.appMchPage, null, "data.records")
+
+const query = (page: number, pagesize: number) => {
+	pageHook.startPage(page, pagesize, false, params)
+}
 
 const doTab = (e: any) => {
 	params.actStatus = tabs[e].id
-	getCouponList()
+	pageRef.value && pageRef.value.reload(false)
 }
 
 const getActStatus = (actStatus: string | number) => {
 	return tabs.find((item: any) => item.id == actStatus)
 }
-
-// 商家查看优惠券列表
-const getCouponList = async () => {
-	const { code, data, msg }: any = await actCancel.appMchPage(params)
-	if (code != 0) return uni.showToast({ title: msg || "列表获取失败", icon: "none" })
-	couponList.value = data ?? []
-}
 </script>
 
 <style scoped>