From 6411ea98ff93c8323accd115f538224eb136d5e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E5=B2=A9?= <tybb88x@gmail.com>
Date: Wed, 17 Sep 2025 09:42:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=E4=B8=8B=E6=8B=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   8 +-
 src/pages/courseDetail/index.vue              |   1 +
 .../components/examRecordList.vue             |  87 +++----
 .../components/practiceRecordList.vue         |  87 +++----
 .../components/studyRecordItem.vue            |   1 +
 .../components/studyRecordList.vue            |  88 +++----
 src/pages/courseRecord/index.vue              | 122 ++++------
 .../components/examRecordItem.vue             |  11 +-
 .../components/examRecordList.vue             |  68 ------
 src/pages/examinationRecord/index.vue         |  73 +++---
 .../favorites/components/favoritesCourse.vue  | 158 +++++--------
 .../favorites/components/favoritesTask.vue    | 217 ++++++++----------
 src/pages/favorites/index.vue                 | 144 +++++-------
 src/pages/index/dialog.vue                    |   1 +
 .../learningTasks/components/content.vue      |   4 -
 src/pages/learningTasks/index.vue             |  25 +-
 .../preview/components/previewCourse.vue      | 103 +++------
 src/pages/preview/index.vue                   | 126 +++++-----
 18 files changed, 493 insertions(+), 831 deletions(-)
 delete mode 100644 src/pages/examinationRecord/components/examRecordList.vue

diff --git a/.env.development b/.env.development
index d09195dc..5b24174e 100644
--- a/.env.development
+++ b/.env.development
@@ -1,17 +1,17 @@
 # 开发环境
 ENV = 'development'
 # 'development'
-
+VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 # UAT
 # VITE_APP_BASE_API_Url = 'http://25.18.122.78:9786'
 
 # DEV
-VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
 # app入口
-#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
+
+
 #VITE_APP_BASE_API_Url = 'http://25.16.122.65:7001'
-#VITE_APP_BASE_API_Url = 'http://25.16.122.91:9786'
+# VITE_APP_BASE_API_Url = 'http://25.16.122.92:9786'
 #VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786'
 
 # h5专用地址x2
diff --git a/src/pages/courseDetail/index.vue b/src/pages/courseDetail/index.vue
index 1a20ef05..2de16cca 100644
--- a/src/pages/courseDetail/index.vue
+++ b/src/pages/courseDetail/index.vue
@@ -286,6 +286,7 @@
 			if (pages.length >= 2) {
 				const prevPage = pages[pages.length - 2];
 				if (prevPage.route === 'pages/favorites/index') {
+					
 					uni.$emit('refresh_favorites_list', {
 						type: 'course',
 						state: !!form.value.collectId, // 最终是收藏了还是取消了
diff --git a/src/pages/courseRecord/components/examRecordList.vue b/src/pages/courseRecord/components/examRecordList.vue
index 5d4a33ec..ffbc474e 100644
--- a/src/pages/courseRecord/components/examRecordList.vue
+++ b/src/pages/courseRecord/components/examRecordList.vue
@@ -1,68 +1,41 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无记录</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
+	<z-paging
+		ref="pagingRef"
+		v-model="data_list"
+		@query="queryList"
+		class="scroll_div"
+		:auto="false"
+		empty-view-text="暂无记录"
+	>
+		<view class="scroll-Y">
+			<itemVue :item="item" v-for="item in data_list"></itemVue>
+		</view>
+	</z-paging>
 </template>
-<script setup>
+<script setup lang="ts">
 	import itemVue from './examRecordItem.vue';
-	import { ref, reactive } from 'vue';
+	import { ref, reactive, onMounted, watch } from 'vue';
 	import { queryCrsExamRecordPaging } from '@/api/courseRecord.js';
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
-
-	const getData = (from = '') => {
-		if (from === 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
-		queryCrsExamRecordPaging({
-			page: page.value,
-			limit: limit
-		})
-			.then((res) => {
-				total.value = res.total;
-				data_list.push(...res.body);
-			})
-			.finally(() => {
-				if (data_list.length >= total.value) {
-					status.value = 'nomore';
-				} else {
-					status.value = 'loadmore';
-				}
-			});
-	};
-
-	const scrolltolower = () => {
-		getData();
-	};
-
-	defineExpose({
-		getData
+	import useZpaging from '@/composables/useZpaging';
+	const { pagingRef, queryList, data_list, reload, total } = useZpaging({
+		fetchFunction: queryCrsExamRecordPaging
+	});
+	const props = defineProps<{
+		tabIndex: number;
+		currentIndex: number;
+	}>();
+	onMounted(() => {
+		watch(
+			() => props.currentIndex,
+			(v) => v === props.tabIndex && total.value === -1 && reload(),
+			{ immediate: true }
+		);
 	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
-	}
-
 	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+		background-color: #f1f5fa;
+		height: 100%;
 	}
 </style>
diff --git a/src/pages/courseRecord/components/practiceRecordList.vue b/src/pages/courseRecord/components/practiceRecordList.vue
index dc5ea6c9..cab11185 100644
--- a/src/pages/courseRecord/components/practiceRecordList.vue
+++ b/src/pages/courseRecord/components/practiceRecordList.vue
@@ -1,68 +1,41 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无记录</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
+	<z-paging
+		ref="pagingRef"
+		v-model="data_list"
+		@query="queryList"
+		class="scroll_div"
+		:auto="false"
+		empty-view-text="暂无记录"
+	>
+		<view class="scroll-Y">
+			<itemVue :item="item" v-for="item in data_list"></itemVue>
+		</view>
+	</z-paging>
 </template>
-<script setup>
+<script setup lang="ts">
 	import itemVue from './practiceRecordItem.vue';
-	import { ref, reactive } from 'vue';
+	import { ref, reactive, onMounted, watch } from 'vue';
+	import useZpaging from '@/composables/useZpaging';
 	import { queryPracticeRecordPaging } from '@/api/courseRecord.js';
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
-
-	const getData = (from = '') => {
-		if (from === 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
-		queryPracticeRecordPaging({
-			page: page.value,
-			limit: limit
-		})
-			.then((res) => {
-				total.value = res.total;
-				data_list.push(...res.body);
-			})
-			.finally(() => {
-				if (data_list.length >= total.value) {
-					status.value = 'nomore';
-				} else {
-					status.value = 'loadmore';
-				}
-			});
-	};
-
-	const scrolltolower = () => {
-		getData();
-	};
-
-	defineExpose({
-		getData
+	const { pagingRef, queryList, data_list, reload, total } = useZpaging({
+		fetchFunction: queryPracticeRecordPaging
+	});
+	const props = defineProps<{
+		tabIndex: number;
+		currentIndex: number;
+	}>();
+	onMounted(() => {
+		watch(
+			() => props.currentIndex,
+			(v) => v === props.tabIndex && total.value === -1 && reload(),
+			{ immediate: true }
+		);
 	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
-	}
-
 	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+		background-color: #f1f5fa;
+		height: 100%;
 	}
 </style>
diff --git a/src/pages/courseRecord/components/studyRecordItem.vue b/src/pages/courseRecord/components/studyRecordItem.vue
index 491aef22..7b017933 100644
--- a/src/pages/courseRecord/components/studyRecordItem.vue
+++ b/src/pages/courseRecord/components/studyRecordItem.vue
@@ -58,6 +58,7 @@
 </template>
 
 <script setup>
+	console.log('学习组件');
 	import { computed } from 'vue';
 	import common from '@/common/common';
 	import { queryStdyBatchByCrsId } from '@/api/courseRecord.js';
diff --git a/src/pages/courseRecord/components/studyRecordList.vue b/src/pages/courseRecord/components/studyRecordList.vue
index ae9c78e8..b9b70398 100644
--- a/src/pages/courseRecord/components/studyRecordList.vue
+++ b/src/pages/courseRecord/components/studyRecordList.vue
@@ -1,70 +1,42 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<itemVue :item="item"  v-for="(item, index) in data_list" ></itemVue>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无记录</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
+	<z-paging
+		ref="pagingRef"
+		v-model="data_list"
+		@query="queryList"
+		class="scroll_div"
+		:auto="false"
+		empty-view-text="暂无记录"
+	>
+		<view class="scroll-Y">
+			<itemVue :item="item" v-for="item in data_list"></itemVue>
+		</view>
+	</z-paging>
 </template>
-<script setup>
+<script setup lang="ts">
 	import itemVue from './studyRecordItem.vue';
-	import { ref, reactive} from 'vue';
+	import { ref, reactive, onMounted, watch } from 'vue';
 	import { queryStdyRecordPaging } from '@/api/courseRecord.js';
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
-	
-	const getData = (from = '') => {
-		if (from === 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
-		
-		queryStdyRecordPaging({
-			page: page.value,
-			limit: limit
-		})
-			.then((res) => {
-				total.value = res.total;
-				data_list.push(...res.body);
-			})
-			.finally(() => {
-				if (data_list.length >= total.value) {
-					status.value = 'nomore';
-				} else {
-					status.value = 'loadmore';
-				}
-			});
-		
-	};
-
-	const scrolltolower = () => {
-		getData();
-	};
-
-	defineExpose({
-		getData
+	import useZpaging from '@/composables/useZpaging';
+	const { pagingRef, queryList, data_list, reload, total } = useZpaging({
+		fetchFunction: queryStdyRecordPaging
+	});
+	const props = defineProps<{
+		tabIndex: number;
+		currentIndex: number;
+	}>();
+	onMounted(() => {
+		watch(
+			() => props.currentIndex,
+			(v) => v === props.tabIndex && total.value === -1 && reload(),
+			{ immediate: true }
+		);
 	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
+	.scroll-Y {
 		background-color: #f1f5fa;
+		height: 100%;
 	}
 	
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
-	}
 </style>
diff --git a/src/pages/courseRecord/index.vue b/src/pages/courseRecord/index.vue
index 7463f6e4..4c990064 100644
--- a/src/pages/courseRecord/index.vue
+++ b/src/pages/courseRecord/index.vue
@@ -1,54 +1,63 @@
 <template>
-	<view class="max_page detail-main">
-		<nav-bar :is_seat="false"></nav-bar>
-		<view class="fixed_search_div">
-			<view class="back_div" @click="common.navigateBack()">
-				<view class="back-icon"></view>
+	<z-paging-swiper>
+		<template #top>
+			<view class="detail-main">
+				<nav-bar :is_seat="false"></nav-bar>
+				<view class="fixed_search_div">
+					<view class="back_div" @click="common.navigateBack()">
+						<view class="back-icon"></view>
+					</view>
+					<view class="title font_pf">课程记录</view>
+				</view>
+				<view class="detail-body">
+					<view class="body-tab">
+						<uv-tabs
+							class="font_pf my_tabs"
+							:current="tabAct"
+							:list="tabList"
+							@change="tabChange"
+							:scrollable="false"
+							line-color="#0066FF"
+							:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
+							:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
+							:lineColor="`url(${LineBg}) 10% 10%`"
+						></uv-tabs>
+					</view>
+				</view>
 			</view>
-			<view class="title font_pf">课程记录</view>
-		</view>
-	
-		<view class="detail-body">
-			<view class="body-tab">
-				<uv-tabs
-					class="font_pf my_tabs"
-					:current="tabAct"
-					:list="tabList"
-					@change="tabChange"
-					:scrollable="false"
-					line-color="#0066FF"
-					:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
-					:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
-					:lineColor="`url(${LineBg}) 10% 10%`"
-				></uv-tabs>
-			</view>
-			<view class="uni-margin-wrap no-overflow">
-				<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
-					<swiper-item>
-						<studyRecordList :ref="(el) => (listItemRefs[0] = el)"></studyRecordList>
-					</swiper-item>
-					<swiper-item>
-						<practiceRecordList :ref="(el) => (listItemRefs[1] = el)"></practiceRecordList>
-					</swiper-item>
-					<swiper-item>
-						<examRecordList :ref="(el) => (listItemRefs[2] = el)"></examRecordList>
-					</swiper-item>
-				</swiper>
-			</view>
-		</view>
-	</view>
+		</template>
+		<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
+			<swiper-item class="swiper-item">
+				<studyRecordList
+					:ref="(el) => (listItemRefs[0] = el)"
+					:tabIndex="0"
+					:currentIndex="tabAct"
+				></studyRecordList>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<practiceRecordList
+					:ref="(el) => (listItemRefs[1] = el)"
+					:tabIndex="1"
+					:currentIndex="tabAct"
+				></practiceRecordList>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<examRecordList :ref="(el) => (listItemRefs[2] = el)" :tabIndex="2" :currentIndex="tabAct"></examRecordList>
+			</swiper-item>
+		</swiper>
+	</z-paging-swiper>
 </template>
 
 <script setup>
 	import { LineBg } from '@/enum.js';
-
 	import studyRecordList from './components/studyRecordList.vue';
 	import practiceRecordList from './components/practiceRecordList.vue';
 	import examRecordList from './components/examRecordList.vue';
 	import { ref, onMounted, watch } from 'vue';
 	import common from '@/common/common.js';
-	const listItemRefs = ref([]);
-	const tabAct = ref(0);
+	import useIndexList from '@/composables/useIndexList.js';
+	const { tabAct, listItemRefs, tabChange, swiperChange } = useIndexList();
+
 	const tabList = ref([
 		{
 			name: '学习记录'
@@ -60,30 +69,10 @@
 			name: '考试记录'
 		}
 	]);
-
-	const tabChange = (item) => {
-		tabAct.value = item.index;
-	};
-	const swiperChange = (item) => {
-		tabAct.value = item.detail.current;
-	};
-	onMounted(() => {
-		watch(
-			tabAct,
-			(newValue) => {
-				typeof listItemRefs.value[newValue]?.getData === 'function' &&
-					listItemRefs.value[newValue]?.getData('first');
-			},
-			{
-				immediate: true
-			}
-		);
-	});
 </script>
 
 <style lang="scss" scoped>
 	$bg-margin-left: 50rpx;
-
 	.my_tabs {
 		// 解决这个圆角的图片，开穿透
 		:deep(.uv-tabs__wrapper__nav__line) {
@@ -95,21 +84,12 @@
 	}
 
 	.swiper {
-		/*
-		状态栏 var(--status-bar-height)
-		标题高度88rpx
-		tab切换栏高度88rpx
-		下方滑动区域上下边距各10共20rpx
-		**/
-
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
+		height: 100%;
 	}
-
 	.swiper-item {
 		display: block;
 		height: 100%;
-		line-height: 300rpx;
-		text-align: center;
+		background-color: #f1f5fa;
 	}
 
 	.detail-body {
diff --git a/src/pages/examinationRecord/components/examRecordItem.vue b/src/pages/examinationRecord/components/examRecordItem.vue
index 50c47283..2184f37d 100644
--- a/src/pages/examinationRecord/components/examRecordItem.vue
+++ b/src/pages/examinationRecord/components/examRecordItem.vue
@@ -1,16 +1,13 @@
 <template>
 	<view class="item">
 		<view class="details_div">
-			<!-- <view class="img_div"> -->
-				<!-- <image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview> -->
-			<!-- </view> -->
 			<view class="right_div">
 				<view class="title ellipsis-text">
 					{{ item.examName }}
 				</view>
 				<view class="prompt_div">
 					<view class="prompt_div_left">
-						<view class="top">{{ item.flagQuery === 'Y'?item.highestGrade:'--' || 0 }}</view>
+						<view class="top">{{ item.flagQuery === 'Y' ? item.highestGrade : '--' || 0 }}</view>
 						<view class="bottom">历史最高分</view>
 					</view>
 					<view class="prompt_div_line"></view>
@@ -19,7 +16,7 @@
 							{{ item.examCnt || 0 }}
 							<uv-icon
 								class="click_text_icon"
-								:class="{click_text_icon_action:show_list_state}"
+								:class="{ click_text_icon_action: show_list_state }"
 								name="arrow-right"
 								color="#0066FF"
 								size="12"
@@ -40,7 +37,7 @@
 					</view>
 					<view class="list_small_item">
 						<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
-						<view class="prompt">考试得分：{{ item_list.flagQuery === 'Y'?item_list.examGrade:'--' }}</view>
+						<view class="prompt">考试得分：{{ item_list.flagQuery === 'Y' ? item_list.examGrade : '--' }}</view>
 					</view>
 				</view>
 				<view class="fl1"></view>
@@ -225,7 +222,7 @@
 								/* 添加过渡动画，包含延迟效果 */
 								transition: transform 0.2s ease;
 							}
-							.click_text_icon_action{
+							.click_text_icon_action {
 								transform: rotate(90deg);
 							}
 						}
diff --git a/src/pages/examinationRecord/components/examRecordList.vue b/src/pages/examinationRecord/components/examRecordList.vue
deleted file mode 100644
index 0f9ffedc..00000000
--- a/src/pages/examinationRecord/components/examRecordList.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无记录</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
-</template>
-<script setup>
-	import itemVue from './examRecordItem.vue';
-	import { ref, reactive } from 'vue';
-	import { queryExamRecordPaging } from '@/api/courseRecord.js';
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
-
-	const getData = (from = '') => {
-		if (from === 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
-		queryExamRecordPaging({
-			page: page.value,
-			limit: limit
-		})
-			.then((res) => {
-				total.value = res.total;
-				data_list.push(...res.body);
-			})
-			.finally(() => {
-				if (data_list.length >= total.value) {
-					status.value = 'nomore';
-				} else {
-					status.value = 'loadmore';
-				}
-			});
-	};
-
-	const scrolltolower = () => {
-		getData();
-	};
-
-	defineExpose({
-		getData
-	});
-</script>
-
-<style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
-	}
-
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
-	}
-</style>
diff --git a/src/pages/examinationRecord/index.vue b/src/pages/examinationRecord/index.vue
index 8e0fd61f..9bbab722 100644
--- a/src/pages/examinationRecord/index.vue
+++ b/src/pages/examinationRecord/index.vue
@@ -1,59 +1,34 @@
 <template>
-	<view class="max_page detail-main">
-		<nav-bar :is_seat="false"></nav-bar>
-		<view class="fixed_search_div">
-			<view class="back_div" @click="common.navigateBack()">
-				<view class="back-icon"></view>
+	<z-paging ref="pagingRef" v-model="data_list" @query="queryList" class="scroll_div" empty-view-text="暂无记录">
+		<template #top>
+			<view class="detail-main">
+				<nav-bar :is_seat="false"></nav-bar>
+				<view class="fixed_search_div">
+					<view class="back_div" @click="common.navigateBack()">
+						<view class="back-icon"></view>
+					</view>
+					<view class="title font_pf">考试记录</view>
+				</view>
 			</view>
-			<view class="title font_pf">考试记录</view>
+		</template>
+		<view class="scroll-Y">
+			<itemVue :item="item" v-for="item in data_list"></itemVue>
 		</view>
-		<view class="detail-body">
-			<examRecordList ref="listItemRef"></examRecordList>
-		</view>
-	</view>
+	</z-paging>
 </template>
 
 <script setup>
-	import examRecordList from './components/examRecordList.vue';
-	import { ref, onMounted } from 'vue';
+	import itemVue from './components/examRecordItem.vue';
+	import { queryExamRecordPaging } from '@/api/courseRecord.js';
+	import useZpaging from '@/composables/useZpaging.js';
 	import common from '@/common/common.js';
-	const listItemRef = ref(null);
-	onMounted(() => {
-		listItemRef.value?.getData('first');
+	const { pagingRef, queryList, data_list, reload, search, total, clear } = useZpaging({
+		fetchFunction: queryExamRecordPaging
 	});
 </script>
 
 <style lang="scss" scoped>
 	$bg-margin-left: 50rpx;
-
-	.my_tabs {
-		// 解决这个圆角的图片，开穿透
-		:deep(.uv-tabs__wrapper__nav__line) {
-			height: 26rpx !important;
-			left: 60rpx;
-			background-size: 28rpx !important;
-			background-repeat: no-repeat !important;
-		}
-	}
-
-	.swiper {
-		/*
-		状态栏 var(--status-bar-height)
-		标题高度88rpx
-		tab切换栏高度88rpx
-		下方滑动区域上下边距各10共20rpx
-		**/
-
-		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
-	}
-
-	.swiper-item {
-		display: block;
-		height: 100%;
-		line-height: 300rpx;
-		text-align: center;
-	}
-
 	.detail-body {
 		background: #ffffff;
 		border-radius: 15rpx;
@@ -131,4 +106,14 @@
 			}
 		}
 	}
+	.scroll-Y {
+		background-color: #f1f5fa;
+		border-radius: 16rpx;
+		// padding: 17rpx 12rpx 0 22rpx;
+		// margin: 17rpx 20rpx;
+	}
+	.scroll_div {
+		background-color: #f1f5fa;
+		// padding: 22rpx;
+	}
 </style>
diff --git a/src/pages/favorites/components/favoritesCourse.vue b/src/pages/favorites/components/favoritesCourse.vue
index 56a99ce1..15384c26 100644
--- a/src/pages/favorites/components/favoritesCourse.vue
+++ b/src/pages/favorites/components/favoritesCourse.vue
@@ -1,52 +1,55 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<uv-swipe-action :autoClose="true">
-				<uv-swipe-action-item
-					class="item-swipe-action"
-					:options="options"
-					:threshold="40"
-					:index="index"
-					:name="index"
-					v-for="(item, index) in data_list"
-					@click="swipeActionClick"
-				>
-					<view class="item" @touchmove.stop @click="click_item(item)">
-						<view class="img_div">
-							<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
-							<view class="subscript">{{ item.evalGrade ?? 0 }}分</view>
+	<z-paging
+		ref="pagingRef"
+		v-model="data_list"
+		@query="queryList"
+		:auto="false"
+		empty-view-text="暂无数据"
+		paging-class="pagingClass"
+	>
+		<uv-swipe-action :autoClose="true">
+			<uv-swipe-action-item
+				class="item-swipe-action"
+				:options="options"
+				:threshold="40"
+				:index="index"
+				:name="index"
+				v-for="(item, index) in data_list"
+				@click="swipeActionClick"
+			>
+				<view class="item" @touchmove.stop @click="click_item(item)">
+					<view class="img_div">
+						<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
+						<view class="subscript">{{ item.evalGrade ?? 0 }}分</view>
+					</view>
+					<view class="right_div">
+						<view class="title ellipsis-text">
+							{{ item.crsName }}
 						</view>
-						<view class="right_div">
-							<view class="title ellipsis-text">
-								{{ item.crsName }}
-							</view>
-							<view class="tag_div">
-								<view class="tag" v-for="tagItem in item?.tagCataList ?? []">
-									{{ tagItem?.tagName }}
-								</view>
-							</view>
-							<view class="time_and_num">
-								<view class="mr-10">发布：{{ item.issuTm?.substr(0, 10) }}</view>
-								<view>已学：{{ item.accmStdyCnt }}次</view>
+						<view class="tag_div">
+							<view class="tag" v-for="tagItem in item?.tagCataList ?? []">
+								{{ tagItem?.tagName }}
 							</view>
 						</view>
+						<view class="time_and_num">
+							<view class="mr-10">发布：{{ item.issuTm?.substr(0, 10) }}</view>
+							<view>已学：{{ item.accmStdyCnt }}次</view>
+						</view>
 					</view>
-				</uv-swipe-action-item>
-			</uv-swipe-action>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无数据</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
+				</view>
+			</uv-swipe-action-item>
+		</uv-swipe-action>
+	</z-paging>
 </template>
 <script setup>
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
-	import { ref, reactive} from 'vue';
+	import { ref, reactive, onMounted, watch } from 'vue';
 	import { queryTraPersonalCollectionCrsPaging, deleteTraPersonalCollectionById } from '@/api/favorites.js';
 	import common from '@/common/common';
+	import useZpaging from '@/composables/useZpaging';
+	const { pagingRef, queryList, data_list, reload, total } = useZpaging({
+		fetchFunction: queryTraPersonalCollectionCrsPaging
+	});
+
 	const options = [
 		{
 			text: '删除',
@@ -55,39 +58,7 @@
 			}
 		}
 	];
-	const getData = (from = '') => {
-		console.log('status.value', status.value);
-		if (from === 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
 
-		queryTraPersonalCollectionCrsPaging({
-			page: page.value,
-			limit: limit
-		})
-			.then((res) => {
-				total.value = res.total;
-				data_list.push(...res.body);
-			})
-			.finally(() => {
-				if (data_list.length >= total.value) {
-					status.value = 'nomore';
-				} else {
-					status.value = 'loadmore';
-				}
-				console.log('status.value', status.value);
-			});
-	};
 	// 进入课程详情页
 	const click_item = (item) => {
 		common.navigateTo(`/pages/courseDetail/index?crsId=${item.crsId}&collectId=${item.collectId}`);
@@ -108,52 +79,41 @@
 				});
 		});
 	};
-	const scrolltolower = () => {
-		getData();
-	};
-	const refreshData = () => {
-		total.value = -1;
-		getData('first');
-	};
 
-	const updateData = (item) => {
-		console.log('收藏的updateData');
-		
-	};
-	
+
+
 	defineExpose({
-		getData,
-		updateData,
-		refreshData
+	
+	});
+
+	const props = defineProps(['tabIndex', 'currentIndex']);
+	onMounted(() => {
+		watch(
+			() => props.currentIndex,
+			(v) => v === props.tabIndex && total.value === -1 && reload(),
+			{ immediate: true }
+		);
 	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
-		padding: 22rpx;
-	}
-
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
+	.pagingClass {
+		width: calc(100% - 44rpx);
+		margin: 22rpx auto;
 		background-color: #fff;
 		border-radius: 16rpx;
 	}
-
 	.item-swipe-action {
 		margin: 32rpx 22rpx;
 		overflow: hidden;
-
 		:deep(.uv-swipe-action-item__right__button__wrapper) {
 			border-radius: 20rpx !important;
 		}
 	}
 
-	.scroll-Y .item {
+	.item {
 		height: 170rpx;
 		display: flex;
-		// background-color: red;
-
 		.img_div {
 			position: relative;
 			width: 224rpx;
diff --git a/src/pages/favorites/components/favoritesTask.vue b/src/pages/favorites/components/favoritesTask.vue
index f689e461..7491eece 100644
--- a/src/pages/favorites/components/favoritesTask.vue
+++ b/src/pages/favorites/components/favoritesTask.vue
@@ -1,66 +1,73 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<uv-swipe-action :autoClose="true">
-				<uv-swipe-action-item
-					class="item-swipe-action"
-					:options="options"
-					:threshold="40"
-					:index="index"
-					:name="index"
-					v-for="(item, index) in data_list"
-					@click="swipeActionClick"
-				>
-					<view class="item" :class="getStatusClass(item.isFinish)" @touchmove.stop @click="click_item(item)">
-						<view class="img_div">
-							<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
-							<view class="subscript" v-if="item.isFinish === '02'">已完成</view>
-							<view class="subscript" v-else>未完成</view>
+	<z-paging
+		ref="pagingRef"
+		v-model="data_list"
+		@query="queryList"
+		:auto="false"
+		empty-view-text="暂无数据"
+		paging-class="pagingClass"
+	>
+		<uv-swipe-action :autoClose="true">
+			<uv-swipe-action-item
+				class="item-swipe-action"
+				:options="options"
+				:threshold="40"
+				:index="index"
+				:name="index"
+				v-for="(item, index) in data_list"
+				@click="swipeActionClick"
+			>
+				<view class="item" :class="getStatusClass(item.isFinish)" @touchmove.stop @click="click_item(item)">
+					<view class="img_div">
+						<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
+						<view class="subscript" v-if="item.isFinish === '02'">已完成</view>
+						<view class="subscript" v-else>未完成</view>
+					</view>
+					<view class="right_div">
+						<view class="title ellipsis-text">
+							{{ item.taskName }}
 						</view>
-						<view class="right_div">
-							<view class="title ellipsis-text">
-								{{ item.taskName }}
+						<view class="time_div">
+							起止时间：
+							<text class="blod_color">
+								{{ item.startTm?.substr(0, 10) }}至{{ item.endTm?.substr(0, 10) }}
+							</text>
+						</view>
+						<view class="people_progress_div">
+							<view class="mr-10">
+								完成人数：
+								<text class="blod_color">{{ item.taskFinishSums ?? 0 }}/{{ item.taskSums ?? 0 }}</text>
 							</view>
-							<view class="time_div">
-								起止时间：
+							<view>
+								进度：
 								<text class="blod_color">
-									{{ item.startTm?.substr(0, 10) }}至{{ item.endTm?.substr(0, 10) }}
+									{{ item.finishCrs ?? item.learnedNumber ?? 0 }}/{{
+										item.sumCrs ?? item.taskNumber ?? 0
+									}}门课程
 								</text>
 							</view>
-							<view class="people_progress_div">
-								<view class="mr-10">
-									完成人数：
-									<text class="blod_color">{{ item.taskFinishSums ?? 0 }}/{{ item.taskSums ?? 0 }}</text>
-								</view>
-								<view>
-									进度：
-									<text class="blod_color">{{ item.finishCrs ?? item.learnedNumber ?? 0 }}/{{ item.sumCrs ?? item.taskNumber ?? 0 }}门课程</text>
-								</view>
-								<!-- <view>
+							<!-- <view>
 									我的进度：
 									<text class="blod_color">{{ item.myProcess ?? 0 }}%</text>
 								</view> -->
-							</view>
 						</view>
 					</view>
-				</uv-swipe-action-item>
-			</uv-swipe-action>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无数据</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
+				</view>
+			</uv-swipe-action-item>
+		</uv-swipe-action>
+	</z-paging>
 </template>
 <script setup>
-	import { ref, reactive} from 'vue';
-	import { queryTraPersonalCollectionTaskPaging,deleteTraPersonalCollectionById } from '@/api/favorites.js';
+	import { ref, reactive, onMounted, watch } from 'vue';
+	import { queryTraPersonalCollectionTaskPaging, deleteTraPersonalCollectionById } from '@/api/favorites.js';
 	import { setPageCache } from '@/common/common';
 	import common from '@/common/common';
 
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
-	const data_list = reactive([]);
+	import useZpaging from '@/composables/useZpaging';
+	const { pagingRef, queryList, data_list, reload, total } = useZpaging({
+		fetchFunction: queryTraPersonalCollectionTaskPaging
+	});
+
 	const options = [
 		{
 			text: '删除',
@@ -69,39 +76,7 @@
 			}
 		}
 	];
-	const getData = (from = '') => {
-		if (from === 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
-		setTimeout(() => {
-			queryTraPersonalCollectionTaskPaging({
-				page: page.value,
-				limit: limit
-			})
-				.then((res) => {
-					total.value = res.total;
-					data_list.push(...res.body);
-				})
-				.finally(() => {
-					if (data_list.length >= total.value) {
-						status.value = 'nomore';
-					} else {
-						status.value = 'loadmore';
-					}
-				});
-		}, 200);
-	};
-	
+
 	const swipeActionClick = (click_item) => {
 		const index = click_item['name'];
 		const item = data_list[index];
@@ -118,13 +93,13 @@
 				});
 		});
 	};
-	
+
 	// 跳转到详情
 	const click_item = (item) => {
-		if(item.limitTyp === '02') {
-			if(item.isTimeOut === '01') {
+		if (item.limitTyp === '02') {
+			if (item.isTimeOut === '01') {
 				return common.msg('任务未开始');
-			} else if(item.isTimeOut === '02') {
+			} else if (item.isTimeOut === '02') {
 				return common.msg('任务已结束');
 			}
 		}
@@ -132,52 +107,51 @@
 		common.navigateTo(`/pages/learningTasks/details?collectId=${item.collectionId}`);
 	};
 	const getStatusClass = (isFinish) => {
-		// 01进行中、02已完成、03已超时
-		// if (isFinish === '00') return 'in_progress';
-		// if (isFinish === '01') return 'completed';
-		// return 'expired';
 		if (isFinish === '02') return 'completed';
 		return 'expired';
 	};
-	const scrolltolower = (item) => {
-		getData();
-	};
-	const refreshData = (params) => {
-		total.value = -1;
-		getData('first');
-		console.log('子组件refreshData');
-	};
-	
-	const updateData = (item) => {
-		console.log('收藏的updateData', item);
-		console.log('收藏的updatedata_list', data_list);
-		const index = data_list.findIndex((res) => res.taskId === item.taskId);
-		console.log('updateData', index, item);
-		if (index !== -1) {
-			data_list[index] = item;
-		}
-	};
-	
+
+	const props = defineProps(['tabIndex', 'currentIndex']);
+	onMounted(() => {
+		watch(
+			() => props.currentIndex,
+			(v) => v === props.tabIndex && total.value === -1 && reload(),
+			{ immediate: true }
+		);
+	});
+	// const updateData = (item) => {
+	// 	console.log('收藏的updateData', item);
+	// 	console.log('收藏的updatedata_list', data_list);
+	// 	const index = data_list.findIndex((res) => res.taskId === item.taskId);
+	// 	console.log('updateData', index, item);
+	// 	if (index !== -1) {
+	// 		data_list[index] = item;
+	// 	}
+	// };
+
 	defineExpose({
-		getData,
-		refreshData,
-		updateData
+		// getData,
+		// refreshData,
+		// updateData
 	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
-		padding: 22rpx;
-	}
-
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
+	.pagingClass {
+		width: calc(100% - 44rpx);
+		margin: 22rpx auto;
 		background-color: #fff;
 		border-radius: 16rpx;
 	}
 
-	.scroll-Y .item.in_progress {
+	.item-swipe-action {
+		overflow: hidden;
+		:deep(.uv-swipe-action-item__right__button__wrapper) {
+			border-radius: 20rpx !important;
+		}
+	}
+
+	.item.in_progress {
 		// 进行中
 		.subscript {
 			color: #0066ff;
@@ -189,7 +163,7 @@
 		}
 	}
 
-	.scroll-Y .item.completed {
+	.item.completed {
 		// 已完成
 		.subscript {
 			color: #ffffff;
@@ -201,7 +175,7 @@
 		}
 	}
 
-	.scroll-Y .item.expired {
+	.item.expired {
 		// 已超时
 		.subscript {
 			color: #ffffff;
@@ -221,9 +195,8 @@
 		}
 	}
 
-	.scroll-Y .item {
+	.item {
 		height: 170rpx;
-		// margin: 32rpx 22rpx;
 		display: flex;
 
 		.img_div {
diff --git a/src/pages/favorites/index.vue b/src/pages/favorites/index.vue
index 647d0a70..581362aa 100644
--- a/src/pages/favorites/index.vue
+++ b/src/pages/favorites/index.vue
@@ -1,57 +1,57 @@
 <template>
-	<view class="max_page detail-main">
-		<nav-bar :is_seat="false"></nav-bar>
-		<view class="fixed_search_div">
-			<view class="back_div" @click="common.navigateBack()">
-				<view class="back-icon"></view>
+	<z-paging-swiper>
+		<template #top>
+			<view class="detail-main">
+				<nav-bar :is_seat="false"></nav-bar>
+				<view class="fixed_search_div">
+					<view class="back_div" @click="common.navigateBack()">
+						<view class="back-icon"></view>
+					</view>
+					<view class="title font_pf">我的收藏</view>
+				</view>
+				<view class="detail-body">
+					<view class="body-tab">
+						<uv-tabs
+							class="font_pf my_tabs"
+							:current="tabAct"
+							:list="tabList"
+							@change="tabChange"
+							:scrollable="false"
+							line-color="#0066FF"
+							:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
+							:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
+							:lineColor="`url(${LineBg}) 10% 10%`"
+						></uv-tabs>
+					</view>
+				</view>
 			</view>
-			<view class="title font_pf">我的收藏</view>
-		</view>
-		<view class="detail-body">
-			<view class="body-tab">
-				<uv-tabs
-					class="font_pf my_tabs"
-					:current="tabAct"
-					:list="tabList"
-					@change="tabChange"
-					:scrollable="false"
-					line-color="#0066FF"
-					:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
-					:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
-					:lineColor="`url(${LineBg}) 10% 10%`"
-				></uv-tabs>
-			</view>
-			<view class="uni-margin-wrap no-overflow">
-				<swiper
-					class="swiper"
-					:current="tabAct"
-					:indicator-dots="false"
-					:disable-touch="true"
-					@change="swiperChange"
-				>
-					<swiper-item>
-						<FavoritesCourse ref="courseRef"></FavoritesCourse>
-					</swiper-item>
-					<swiper-item>
-						<FavoritesTask ref="taskRef"></FavoritesTask>
-					</swiper-item>
-				</swiper>
-			</view>
-		</view>
-	</view>
+		</template>
+		<swiper class="swiper" :current="tabAct" :indicator-dots="false" :disable-touch="true" @change="swiperChange">
+			<swiper-item>
+				<FavoritesCourse
+					:ref="(el) => (listItemRefs[0] = el)"
+					:tabIndex="0"
+					:currentIndex="tabAct"
+				></FavoritesCourse>
+			</swiper-item>
+			<swiper-item>
+				<FavoritesTask :ref="(el) => (listItemRefs[1] = el)" :tabIndex="1" :currentIndex="tabAct"></FavoritesTask>
+			</swiper-item>
+		</swiper>
+	</z-paging-swiper>
 </template>
 
 <script setup>
+	// 我的收藏
 	import FavoritesTask from './components/favoritesTask.vue';
 	import FavoritesCourse from './components/favoritesCourse.vue';
-	// 我的收藏
 	import { ref, onMounted, watch } from 'vue';
 	import { onLoad, onUnload } from '@dcloudio/uni-app';
 	import { LineBg } from '@/enum.js';
 	import common from '@/common/common';
-	const courseRef = ref(null);
-	const taskRef = ref(null);
-	const tabAct = ref(0);
+	import useIndexList from '@/composables/useIndexList.js';
+	const { tabAct, listItemRefs, tabChange, swiperChange, search } = useIndexList();
+	
 	const tabList = ref([
 		{
 			name: '课程收藏'
@@ -61,49 +61,28 @@
 		}
 	]);
 
-	const tabChange = (item) => {
-		tabAct.value = item.index;
-	};
-	const swiperChange = (item) => {
-		tabAct.value = item.detail.current;
-	};
-	onMounted(() => {
-		watch(
-			tabAct,
-			(newValue, oldValue) => {
-				if (newValue === 0) {
-					courseRef.value?.getData('first');
-				} else if (newValue === 1) {
-					taskRef.value?.getData('first');
-				}
-			},
-			{
-				immediate: true
-			}
-		); // 这里的immediate会在onMounted之后执行
-	});
 	onLoad(() => {
 		// 里面取消收藏后重新刷新列表
-		uni.$on('refresh_favorites_list', (params) => {
-			if (params.type === 'course') {
-				courseRef.value?.refreshData(params);
-			} else if (params.type === 'task') {
-				taskRef.value?.refreshData(params);
-			}
-		});
-		// 完成任务后更新列表单条信息
-		uni.$on('refresh_favorites_data', (res) => {
-			console.log('列表监听里面学习完成后更新任务历程', res);
-			if (tabAct.value === 0) {
-				courseRef.value?.updateData(res);
-			} else if (tabAct.value === 1) {
-				taskRef.value?.updateData(res);
-			}
-		});
+		// uni.$on('refresh_favorites_list', (params) => {
+		// 	if (params.type === 'course') {
+		// 		courseRef.value?.refreshData(params);
+		// 	} else if (params.type === 'task') {
+		// 		taskRef.value?.refreshData(params);
+		// 	}
+		// });
+		// // 完成任务后更新列表单条信息
+		// uni.$on('refresh_favorites_data', (res) => {
+		// 	console.log('列表监听里面学习完成后更新任务历程', res);
+		// 	if (tabAct.value === 0) {
+		// 		courseRef.value?.updateData(res);
+		// 	} else if (tabAct.value === 1) {
+		// 		taskRef.value?.updateData(res);
+		// 	}
+		// });
 	});
 	onUnload(() => {
-		uni.$off('refresh_favorites_data');
-		uni.$off('refresh_favorites_list');
+		// uni.$off('refresh_favorites_data');
+		// uni.$off('refresh_favorites_list');
 	});
 </script>
 
@@ -122,6 +101,7 @@
 
 	.swiper {
 		height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 10rpx);
+		background-color: #f1f5fa;
 	}
 
 	.swiper-item {
diff --git a/src/pages/index/dialog.vue b/src/pages/index/dialog.vue
index e5b8c304..3f8d4303 100644
--- a/src/pages/index/dialog.vue
+++ b/src/pages/index/dialog.vue
@@ -480,6 +480,7 @@
 					let fileUrl = base_url + '/traask/traFilePreview/' + info.docId;
 					uni.downloadFile({
 						url: fileUrl,
+						
 						success: function (res) {
 							var filePath = res.tempFilePath;
 							uni.openDocument({
diff --git a/src/pages/learningTasks/components/content.vue b/src/pages/learningTasks/components/content.vue
index f4461df3..b92706ae 100644
--- a/src/pages/learningTasks/components/content.vue
+++ b/src/pages/learningTasks/components/content.vue
@@ -1,4 +1,3 @@
-<!-- 在这个文件对每个tab对应的列表进行渲染 -->
 <template>
 	<z-paging
 		ref="pagingRef"
@@ -46,10 +45,7 @@
 			}
 		}
 	});
-	console.log('aaa', props.state);
 	const updateData = (item) => {
-		console.log('未完成专属逻辑，如果未完成列表出现了已完成状态，就重新加载未完成列表', props.tabIndex, item.isFinish);
-		// 未完成专属逻辑，如果未完成列表出现了已完成状态，就重新加载未完成列表
 		if(props.tabIndex !== 0 && item.isFinish === '02') {
 			reload()
 		} else{
diff --git a/src/pages/learningTasks/index.vue b/src/pages/learningTasks/index.vue
index a2f5173d..fb80c344 100644
--- a/src/pages/learningTasks/index.vue
+++ b/src/pages/learningTasks/index.vue
@@ -1,4 +1,3 @@
-<!-- 滑动切换选项卡演示(标准写法) -->
 <template>
 	<z-paging-swiper>
 		<template #top>
@@ -68,23 +67,9 @@
 			listItemRefs.value[1]?.updateData(res);
 			listItemRefs.value[2]?.updateData(res);
 		});
-		
-		// 完成任务后更新列表单条信息
-		// uni.$on('refresh_tasks_data', (res) => {
-		// 	listItemRefs.value[0]?.updateData(res);
-		// 	listItemRefs.value[1]?.clear();
-		// 	listItemRefs.value[2]?.clear();
-		// 	listItemRefs.value[tabAct.value]?.getData('first');
-		// 	if (tabAct.value === 0) {
-		// 		courseRef.value?.updateData(res);
-		// 	} else if (tabAct.value === 1) {
-		// 		taskRef.value?.updateData(res);
-		// 	}
-		// });
 	});
 	onUnload(() => {
 		uni.$off('update_tasks_item');
-		// uni.$off('refresh_tasks_data');
 	});
 </script>
 
@@ -100,7 +85,7 @@
 			background-repeat: no-repeat !important;
 		}
 	}
-
+	
 	.swiper {
 		height: 100%;
 	}
@@ -191,13 +176,5 @@
 	.scroll_div {
 		background-color: #f1f5fa;
 		padding: 22rpx;
-
-		// height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx - 30rpx);
-		.scroll_item_div {
-			background-color: #fff;
-			border-radius: 16rpx;
-			padding: 0 12rpx 0 22rpx;
-			box-sizing: border-box;
-		}
 	}
 </style>
diff --git a/src/pages/preview/components/previewCourse.vue b/src/pages/preview/components/previewCourse.vue
index 01e42a85..c63c15d9 100644
--- a/src/pages/preview/components/previewCourse.vue
+++ b/src/pages/preview/components/previewCourse.vue
@@ -1,87 +1,56 @@
 <template>
-	<view class="scroll_div">
-		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
-			<view class="item" v-for="item in data_list" @click="goto_course_detail(item)">
-				<view class="img_div">
-					<image-preview class="img" :imgId="item.imgId" mode="scaleToFill"></image-preview>
-				</view>
-				<view class="right_div">
-					<view class="title ellipsis-text">{{ item.crsName }}</view>
-					<view class="tag_div">
-						<view class="tag" v-for="tag in item.tagCataList">{{ tag.tagName }}</view>
-					</view>
-					<view class="time_and_num"></view>
-				</view>
+	<z-paging
+		ref="pagingRef"
+		v-model="data_list"
+		@query="queryList"
+		:auto="false"
+		empty-view-text="暂无数据"
+		paging-class="pagingClass"
+	>
+		<view class="item" v-for="item in data_list" @click="goto_course_detail(item)">
+			<view class="img_div">
+				<image-preview class="img" :imgId="item.imgId" mode="scaleToFill"></image-preview>
 			</view>
-			<list-no-data v-if="total === 0 && status == 'nomore'">暂无数据</list-no-data>
-			<uv-load-more v-if="total !== 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
-		</scroll-view>
-	</view>
+			<view class="right_div">
+				<view class="title ellipsis-text">{{ item.crsName }}</view>
+				<view class="tag_div">
+					<view class="tag" v-for="tag in item.tagCataList">{{ tag.tagName }}</view>
+				</view>
+				<view class="time_and_num"></view>
+			</view>
+		</view>
+	</z-paging>
 </template>
 <script setup>
-	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
-	const limit = 20;
-	const total = ref(-1);
-	const page = ref(0);
 	import common from '@/common/common';
-	const data_list = reactive([]);
-	import { ref, reactive, onMounted, nextTick } from 'vue';
+	import { ref, reactive, onMounted, nextTick, watch } from 'vue';
 	import { queryTraStdyInfoPreviewPaging } from '@/api/preview.js';
-	const getData = (from = '') => {
-		if (from == 'first') {
-			if (total.value !== -1) {
-				return;
-			}
-			status.value = 'loading';
-			total.value = -1;
-			page.value = 1;
-			data_list.length = 0;
-		} else {
-			if (status.value !== 'loadmore' && status.value !== '') return;
-			status.value = 'loading';
-			page.value++;
-		}
-		queryTraStdyInfoPreviewPaging({
-			page: page.value,
-			limit: limit
-		})
-			.then((res) => {
-				total.value = res.total;
-				data_list.push(...res.body);
-			})
-			.finally(() => {
-				if (data_list.length >= total.value) {
-					status.value = 'nomore';
-				} else {
-					status.value = 'loadmore';
-				}
-			});
-	};
-	const scrolltolower = (item) => {
-		getData();
-	};
+	import useZpaging from '@/composables/useZpaging';
+	const { pagingRef, queryList, data_list, reload, total } = useZpaging({
+		fetchFunction: queryTraStdyInfoPreviewPaging
+	});
+	const props = defineProps(['tabIndex', 'currentIndex']);
 	const goto_course_detail = (item) => {
 		common.navigateTo('/pages/courseDetail/index?isPreview=preview&crsId=' + item.crsId);
 	};
-
-	defineExpose({
-		getData
+	onMounted(() => {
+		watch(
+			() => props.currentIndex,
+			(v) => v === props.tabIndex && total.value === -1 && reload(),
+			{ immediate: true }
+		);
 	});
 </script>
 
 <style scoped lang="scss">
-	.scroll_div {
-		background-color: #f1f5fa;
-		padding: 22rpx;
-	}
-
-	.scroll-Y {
-		height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
+	.pagingClass {
+		width: calc(100% - 44rpx);
+		margin: 22rpx auto;
 		background-color: #fff;
 		border-radius: 16rpx;
 	}
 
-	.scroll-Y .item {
+	.item {
 		height: 170rpx;
 		margin: 32rpx 22rpx;
 		display: flex;
diff --git a/src/pages/preview/index.vue b/src/pages/preview/index.vue
index ed6af128..82bb3a3f 100644
--- a/src/pages/preview/index.vue
+++ b/src/pages/preview/index.vue
@@ -1,80 +1,68 @@
 <template>
-	<view class="max_page detail-main">
-		<nav-bar :is_seat="false"></nav-bar>
-		<view class="fixed_search_div">
-			<view class="back_div" @click="common.navigateBack()">
-				<view class="back-icon"></view>
+	<z-paging-swiper>
+		<template #top>
+			<view class="detail-main">
+				<nav-bar :is_seat="false"></nav-bar>
+				<view class="fixed_search_div">
+					<view class="back_div" @click="common.navigateBack()">
+						<view class="back-icon"></view>
+					</view>
+					<view class="title font_pf">我的预览</view>
+				</view>
+				<view class="detail-body">
+					<view class="body-tab">
+						<uv-tabs
+							class="font_pf my_tabs"
+							:current="tabAct"
+							:list="tabList"
+							@change="tabChange"
+							:scrollable="false"
+							line-color="#0066FF"
+							:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
+							:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
+							:lineColor="`url(${LineBg}) 10% 10%`"
+						></uv-tabs>
+					</view>
+				</view>
 			</view>
-			<view class="title font_pf">我的预览</view>
-		</view>
-		<view class="detail-body">
-			<view class="body-tab">
-				<uv-tabs class="font_pf my_tabs" :current="tabAct" :list="tabList" @change="tabChange"
-					:scrollable="false" line-color="#0066FF"
-					:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight:'600'}"
-					:activeStyle="{color:'#0066FF',fontSize:'30rpx', fontWeight:'600'}"
-					:lineColor="`url(${LineBg}) 10% 10%`"></uv-tabs>
-			</view>
-			<view class="uni-margin-wrap">
-				<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
-					<swiper-item>
-						<PreviewCourse ref="courseRef"></PreviewCourse>
-					</swiper-item>
-					<swiper-item>
-						<PreviewAiSparring ref="aiSparringRef"></PreviewAiSparring>
-					</swiper-item>
-				</swiper>
-			</view>
-		</view>
-	</view>
+		</template>
+		<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
+			<swiper-item>
+				<PreviewCourse :ref="(el) => (listItemRefs[0] = el)" :tabIndex="0" :currentIndex="tabAct"></PreviewCourse>
+			</swiper-item>
+			<swiper-item>
+				<PreviewAiSparring :ref="(el) => (listItemRefs[1] = el)" :tabIndex="1" :currentIndex="tabAct"></PreviewAiSparring>
+			</swiper-item>
+		</swiper>
+	</z-paging-swiper>
 </template>
 
 <script setup>
 	// 我的预览
-	import PreviewAiSparring from './components/previewAiSparring.vue'
-	import PreviewCourse from './components/previewCourse.vue'
-	import {
-		ref,
-		onMounted,
-		watch
-	} from 'vue';
+	import PreviewAiSparring from './components/previewAiSparring.vue';
+	import PreviewCourse from './components/previewCourse.vue';
+	import { ref, onMounted, watch } from 'vue';
 	import common from '@/common/common';
-	import {
-		LineBg
-	} from '@/enum.js'
-	const courseRef = ref(null);
-	const aiSparringRef = ref(null);
-	const tabAct = ref(0);
-	const tabList = ref([{
-		name: '预览课程'
-	}, {
-		name: '预览AI陪练'
-	}]);
-
-	const tabChange = (item) => {
-		tabAct.value = item.index;
-	};
-	const swiperChange = (item) => {
-		tabAct.value = item.detail.current;
-	};
-	onMounted(() => {
-		watch(tabAct, (newValue, oldValue) => {
-			if (newValue === 0) {
-				courseRef.value?.getData('first')
-			} else if (newValue === 1) {
-
-			}
-		}, {
-			immediate: true
-		})
-	})
+	import { LineBg } from '@/enum.js';
+	import useIndexList from '@/composables/useIndexList.js';
+	const { tabAct, listItemRefs, tabChange, swiperChange, search } = useIndexList();
+	
+	
+	const tabList = ref([
+		{
+			name: '预览课程'
+		},
+		{
+			name: '预览AI陪练'
+		}
+	]);
+	
 </script>
 
 <style lang="scss" scoped>
 	$bg-margin-left: 50rpx;
 
 	.my_tabs {
-
 		// 解决这个圆角的图片，开穿透
 		:deep(.uv-tabs__wrapper__nav__line) {
 			height: 26rpx !important;
@@ -86,6 +74,9 @@
 
 	.swiper {
 		height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 10rpx);
+		// background-color: red;
+		// height: 100%;
+		background-color: #f1f5fa;
 	}
 
 	.swiper-item {
@@ -107,7 +98,7 @@
 	}
 
 	.detail-main {
-		background-color: #F6F8FF;
+		background-color: #f6f8ff;
 		overflow: hidden;
 	}
 
@@ -120,7 +111,8 @@
 		line-height: 34rpx;
 	}
 
-	.swiper {}
+	.swiper {
+	}
 
 	.fixed_search_div {
 		padding: calc(20rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
@@ -163,4 +155,4 @@
 			}
 		}
 	}
-</style>
\ No newline at end of file
+</style>