1

pages/chanpinneirong/index.vue

@@ -3,62 +3,73 @@
 		<view class="icon-title-navBar-box">
 			<text class="nav-bar-title">学习</text>
 		</view>
-		<view v-if="existData" class="ezy-page-body xuexi-page-body">
-			<view class="xxjl-card-box">
-				<!-- 显示内容 -->
-				<view class="card-body-box">
-					<img :src="banbenInfo.cover" />
-					<view class="body-right">
-						<view class="right-name">{{ banbenInfo.chanpinName }}</view>
-						<view>等级：{{banbenInfo.dengjiName}}</view>
-						<view>版本：{{banbenInfo.name}}</view>
-						<view>单元：{{banbenInfo.curDanyuanName}}</view>
-						<view>课程：{{banbenInfo.curKechengName}}</view>
+		<scroll-view scroll-y>
+			<view v-if="existData" class="ezy-page-body xuexi-page-body">
+				<view class="xxjl-card-box">
+					<!-- 显示内容 -->
+					<view class="card-body-box">
+						<img :src="banbenInfo.cover" />
+						<view class="body-right">
+							<view class="right-name">{{ banbenInfo.chanpinName }}</view>
+							<view>等级：{{banbenInfo.dengjiName}}</view>
+							<view>版本：{{banbenInfo.name}}</view>
+							<view>单元：{{banbenInfo.curDanyuanName}}</view>
+							<view>课程：{{banbenInfo.curKechengName}}</view>
+						</view>
 					</view>
-				</view>
-				<view class="card-progress-box">
-					<view class="xx-progress-box">
-						<view>学习进度</view>
-						<progress :percent="curProcess" class="xx-progress" stroke-width="20" backgroundColor="#3c7dfd"
-							activeColor="#ffd11c" />
+					<view class="card-progress-box">
+						<view class="xx-progress-box">
+							<view>学习进度</view>
+							<progress :percent="curProcess" class="xx-progress" stroke-width="20"
+								backgroundColor="#3c7dfd" activeColor="#ffd11c" />
+						</view>
+						<view class="jxxx-btn" @click="handlePlay(banbenInfo,'jixu')"></view>
 					</view>
-					<view class="jxxx-btn" @click="handlePlay(banbenInfo,'jixu')"></view>
 				</view>
-			</view>
-			<view class="xx-scroll-body">
-				<view class="xx-item-list">
-					<view class="xx-item-title">— 以下为当前等级课程目录 —</view>
-					<scroll-view  v-for="danyuanItem in danyuanList" :key="danyuanItem.danyuanId">
-						<!-- 第一单元 -->
-						<view class="item-dy-box" @click="handleClickDanyuan">
-							<view class="dy-left-box">L{{banbenInfo.dengjiId}}</view>
-							<view class="dy-right-box">
-								<view class="dy-name">{{danyuanItem.danyuanName}}</view>
-								<view>{{danyuanItem.danyuanIntro}}</view>
+				<view class="xx-scroll-body">
+					<view class="xx-item-list">
+						<view class="xx-item-title">— 以下为当前等级课程目录 —</view>
+						<view v-for="(danyuanItem,index) in danyuanList" :key="danyuanItem.danyuanId">
+							<!-- 第一单元 -->
+							<view v-if="index ==0"  class="item-dy-box" :class="{ 'item-fixed': isFixed }" @click="handleClickDanyuan" :id="`unit-title-${danyuanItem.danyuanId}`">
+								<view class="dy-left-box">L{{banbenInfo.dengjiId}}</view>
+								<view class="dy-right-box">
+									<view class="dy-name">{{danyuanItem.danyuanName}}</view>
+									<view>{{danyuanItem.danyuanIntro}}</view>
+								</view>
 							</view>
-						</view>
-						<!-- 其他单元 -->
-						<view class="xx-item-title">— {{danyuanItem.danyuanName}} {{danyuanItem.danyuanIntro}} —</view>
-						<view class="xx-item-box" v-for="jieItem in danyuanItem.jieList" :key="jieItem.jieId"
-							@click="handlePlay(jieItem,'play')">
-							<view class="xx-item-status"
-								:class="jieItem.wanchengFlag == 1 ? 'completed-status' : 'uncompleted-status'"> </view>
-							<img :src="jieItem.cover" />
-							<view class="xx-text-box">
-								<view>{{ jieItem.jieName }}</view>
-								<view>{{ jieItem.jieIntro }}</view>
+							<!-- 其他单元 -->
+							<view v-if="index !=0" class="xx-item-title" :id="`unit-title-${danyuanItem.danyuanId}`">— {{danyuanItem.danyuanName}}
+								{{danyuanItem.danyuanIntro}} —
+							</view>
+						
+
+							<view class="xx-item-box" v-for="jieItem in danyuanItem.jieList" :key="jieItem.jieId"
+								@click="handlePlay(jieItem,'play')">
+								<view class="xx-item-status"
+									:class="jieItem.wanchengFlag == 1 ? 'completed-status' : 'uncompleted-status'">
+								</view>
+								<img :src="jieItem.cover" />
+								<view class="xx-text-box">
+									<view>{{ jieItem.jieName }}</view>
+									<view>{{ jieItem.jieIntro }}</view>
+								</view>
+								<view class="xx-item-btn"></view>
 							</view>
-							<view class="xx-item-btn"></view>
+
+
 						</view>
-					</scroll-view >
+					</view>
+
 				</view>
 
 			</view>
+			<view v-if="!existData">
 
-		</view>
-		<view v-if="!existData">
+			</view>
+
+		</scroll-view>
 
-		</view>
 		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>
 		<custom-tab-bar :show="true" :current-index="currentTabIndex" />
 		<!-- 回到顶部 -->
@@ -75,13 +86,15 @@
 	} from "@/api/chanpinneirong.js"
 	import {
 		onLoad,
-		onShow
+		onShow,
+		onHide,
+		onUnload
 	} from "@dcloudio/uni-app"
 	import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';
 	import {
 		toast
 	} from '../../utils/common';
-
+import {updateXuexiProcess} from "./useNeirongShuxue'
 	export default {
 		data() {
 			return {
@@ -100,7 +113,12 @@
 				cacheManagerLocal: null,
 				hasCache: false, // 是否有缓存的标志
 				needRefresh: false, // 是否需要刷新数据的标志
-				existData: true
+				existData: true,
+
+				currentVisibleUnit: '', // 当前可见的单元名称
+				observer: null, // IntersectionObserver实例
+				lastToastUnitId: null ,// 上一次toast的单元ID，防止重复触发
+				isFixed:true
 			}
 		},
 		components: {
@@ -108,54 +126,89 @@
 			danyuanInfoVue
 		},
 		onShow() {
-			//	console.log('学习页面显示，使用缓存数据')
 			this.currentTabIndex = 1
 			const cacheData = cacheManager.get('xuexi-shuxue');
-			// cacheData && this.shouldUseCache(options, cacheData)
+
 			if (cacheData) {
-				// 使用缓存数据
 				console.log('使用缓存数据');
 				this.updateFromCache();
 			} else {
-				// 没有缓存或参数不同，重新请求
 				console.log('重新请求数据');
 				this.hasCache = false;
 				const cacheDataAuth = cacheManager.get('auth');
 				this.initFromOptions(cacheDataAuth);
 			}
 
-			// // 如果从其他页面返回需要刷新数据
-			// if (this.needRefresh) {
-			// 	this.needRefresh = false;
-			// 	this.updateFromCache();
-			// }
-
-			// // 如果是第一次进入，已经有缓存数据了，直接使用缓存
-			// if (this.hasCache) {
-			// 	this.updateFromCache();
-			// }
+			// 数据加载完成后初始化观察器
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.initObserver();
+				}, 300);
+			});
 		},
 		onHide() {
-			console.log('学习页面隐藏，保存滚动位置')
-			this.needRefresh = true; // 标记离开页面，返回时需要刷新
-
+			console.log('学习页面隐藏')
+			this.needRefresh = true;
+			// 销毁观察器
+			if (this.observer) {
+				this.observer.disconnect();
+				this.observer = null;
+			}
+		},
+		onUnload() {
+			// 页面卸载时销毁观察器
+			if (this.observer) {
+				this.observer.disconnect();
+				this.observer = null;
+			}
 		},
 		onLoad(options) {
-			//	debugger
 			uni.hideTabBar()
 		},
 		methods: {
-			// 从缓存初始化方法
-			// initFromCache(cacheData) {
-			// 	console.log('cacheData',cacheData);
-			// 	this.banbenInfo = cacheData;
-			// 	this.curProcess = cacheData.curProcess;
-			// 	this.danyuanList = cacheData.danyuanList || [];
-			// 	this.banbenId = cacheData.banbenId || '';
-			// 	this.chanpinId = cacheData.chanpinId || '';
-			// 	this.danyuanId = cacheData.danyuanId || '';
-			// 	this.dengjiId = cacheData.dengjiId || '';
-			// },
+			// 初始化IntersectionObserver
+			initObserver() {
+			  if (this.observer) {
+			    this.observer.disconnect();
+			    this.observer = null;
+			  }
+			  
+			  // 监听每个单元标题的位置
+			  this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+			    top: 0,  // 监听进入屏幕顶部的标题
+			    bottom: 0
+			  });
+			  
+			  this.danyuanList.forEach((item, index) => {
+			    const titleId = `unit-title-${item.danyuanId}`;
+			    this.observer.observe(`#${titleId}`, (res) => {
+			      if (res.intersectionRatio > 0) {
+			        // 标题在屏幕顶部区域内
+			        if (this.lastToastUnitId !== item.danyuanId) {
+			          this.lastToastUnitId = item.danyuanId;
+			          console.log(`显示${item.danyuanName}`);
+			          
+						console.log('item',item);
+						if(item.danyuanName !="第一单元"){
+							this.isFixed = false
+						}else{
+							this.isFixed = true
+						}
+			          // uni.showToast({
+			          //   title: `${item.danyuanName}`,
+			          //   icon: 'none',
+			          //   duration: 1500
+			          // });
+			        }
+			      }
+			    });
+			  });
+			  
+			  // 页面初始时显示第一个单元
+			  if (this.danyuanList.length > 0) {
+			    this.lastToastUnitId = this.danyuanList[0].danyuanId;
+			  }
+			},
 
 			// 从参数初始化方法
 			initFromOptions(options) {
@@ -168,6 +221,7 @@
 			},
 			// 从缓存更新数据方法
 			updateFromCache() {
+				updateXuexiProcess()
 				const cacheData = cacheManager.get('xuexi-shuxue');
 				console.log('cacheData 从缓存更新数据方法', cacheData);
 				if (cacheData) {
@@ -176,6 +230,13 @@
 					};
 					this.curProcess = cacheData.curProcess;
 					this.danyuanList = [...(cacheData.danyuanList || [])];
+
+					// 数据更新后重新初始化观察器
+					this.$nextTick(() => {
+						setTimeout(() => {
+							this.initObserver();
+						}, 300);
+					});
 				}
 			},
 
@@ -196,7 +257,7 @@
 				shuxueChanpinBanbenInfo(req).then(res => {
 					if (res.code === 0) {
 						this.banbenInfo = res.data;
-						this.curProcess = res.data.curProcess;
+						this.curProcess =res.data.curProcess * 100;
 						this.danyuanList = res.data.danyuanList || [];
 
 						if (!this.danyuanList) {
@@ -220,6 +281,13 @@
 							danyuanId: this.danyuanId,
 							dengjiId: this.dengjiId
 						});
+
+						// 数据加载完成后初始化观察器
+						this.$nextTick(() => {
+							setTimeout(() => {
+								this.initObserver();
+							}, 300);
+						});
 					}
 				}).catch(res => {
 					cacheManager.remove("xuexi-shuxue");
@@ -328,4 +396,5 @@
 			},
 		}
 	}
-</script>
+</script>
+