1

pages/chanpinneirong/index copy.vue

@@ -0,0 +1,291 @@
+<template>
+	<view class="ezy-xuexi-page">
+		<view class="icon-title-navBar-box">
+			<view @click="handleBack" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">学习</text>
+		</view>
+		<view class="ezy-page-body xuexi-page-body">
+			<view class="change-dy-box">
+				<!-- 显示内容 -->
+				<view class="change-dy-content">
+					<view>{{ banbenInfo.chanpinName }}</view>
+					<view>
+						<text>等级</text>
+						<text>{{banbenInfo.dengjiName}}</text>
+					</view>
+					<view>
+						<text>版本</text>
+						<text>{{banbenInfo.name}}</text>
+					</view>
+					<view>
+						<text>单元</text>
+						<text>{{banbenInfo.curDanyuanName}}</text>
+					</view>
+					<view>
+						<text>课程</text>
+						<text>{{banbenInfo.curKechengName}}</text>
+					</view>
+					<view>
+						<view class="xx-progress-box">
+							<view>当前学习进度</view>
+							<progress :percent="curProcess" class="xx-progress" stroke-width="10"
+								backgroundColor="#3c7dfd" activeColor="#ffd11c" />
+						</view>
+						<view class="jxxx-btn" @click="handlePlay(banbenInfo,'jixu')">继续学习</view>
+					</view>
+				</view>
+			</view>
+			<view class="xx-scroll-body">
+				<view class="xx-item-list">
+					<view v-for="danyuanItem in danyuanList" :key="danyuanItem.danyuanId">
+						<view @click="handleClickDanyuan">
+							<view>L{{danyuanItem.danyuanId}}</view>
+							<view>{{danyuanItem.danyuanName}}</view>
+							<view>{{danyuanItem.danyuanIntro}}</view>
+						</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>
+				</view>
+
+			</view>
+
+		</view>
+		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>
+		<CustomTabBar :currentTabNumber="1"></CustomTabBar>
+	</view>
+</template>
+
+<script>
+	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	import cacheManager from "@/utils/cacheManager.js";
+	import {
+		shuxueChanpinBanbenInfo,
+		shuxueSave
+	} from "@/api/chanpinneirong.js"
+	import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';
+	import {
+		toast
+	} from '../../utils/common';
+
+	export default {
+		data() {
+			return {
+				danyuanList: [],
+				currentUnitName: "",
+				isShow: true,
+				banbenInfo: {},
+				banbenId: '',
+				danyuanId: '',
+				chanpinId: '',
+				dengjiId: '',
+				curProcess: '',
+				cacheManagerLocal: null,
+				isFirstFlag: false
+			}
+		},
+		components: {
+			CustomTabBar,
+			danyuanInfoVue
+		},
+		onShow() {
+			console.log('学习页面显示，尝试恢复滚动位置')
+			console.log('this.isFirstFlag', this.isFirstFlag);
+			if (!this.isFirstFlag) {
+				return false
+			}
+			this.chanpinId = cacheManager.get('auth').chanpinId
+			this.danyuanId = cacheManager.get('auth').danyuanId
+			this.banbenId = cacheManager.get('auth').banbenId
+			//用于返回
+			this.dengjiId = cacheManager.get('auth').dengjiId
+			this.cacheManagerLocal = cacheManager.get('xuexi-shuxue') || {}
+			// 使用缓存
+			this.banbenInfo = this.cacheManagerLocal
+			this.curProcess = this.cacheManagerLocal.curProcess
+			this.danyuanList = this.cacheManagerLocal.danyuanList || []
+		},
+		onHide() {
+			console.log('学习页面隐藏，保存滚动位置')
+			this.isFirstFlag = true
+
+		},
+		onLoad(options) {
+			if (this.isFirstFlag) {
+				return false
+			}
+			console.log('options', options);
+			if (!cacheManager.get('xuexi-shuxue')) {
+				console.log('没有缓存');
+				this.chanpinId = options.chanpinId
+				this.danyuanId = options.danyuanId
+				this.banbenId = options.banbenId
+				this.dengjiId = options.dengjiId
+				this.loadDataFromApi()
+			} else {
+				toast("使用xuexi-shuxue缓存,并且this.isFirstFlag 为false")
+				return false
+			}
+		},
+
+		methods: {
+			// 继续学习按钮是否可以点击
+			jisuanWanchengStatus(dagangList) {
+				// 查找第一个未完成的项目
+				const firstUncompleted = danyuanList.find(item => item.wanchengFlag == 0);
+				if (firstUncompleted) {
+					return {
+						allCompleted: false,
+						firstUncompleted: firstUncompleted
+					};
+				} else {
+					return {
+						allCompleted: true,
+						firstUncompleted: null
+					};
+				}
+			},
+			handleBack() {
+				uni.navigateTo({
+					url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
+				})
+			},
+			loadDataFromApi() {
+				const req = {
+					banbenId: this.banbenId
+				}
+				shuxueChanpinBanbenInfo(req).then(res => {
+					this.banbenInfo = res.data
+					this.curProcess = res.data.curProcess
+					this.danyuanList = res.data.danyuanList || []
+					cacheManager.set('xuexi-shuxue', res.data)
+					cacheManager.updateObject('auth', {
+						chanpinId: this.chanpinId,
+						banbenId: this.banbenId,
+						danyuanId: this.danyuanId,
+						dengjiId: this.dengjiId
+					})
+					this.isFirstFlag = true
+				}).catch(res => {
+					this.isFirstFlag = false
+					cacheManager.remove("xuexi-shuxue")
+					toast("shuxueChanpinBanbenInfo接口错误重置isFirstFlag,清除xuexi-shuxue缓存")
+					return false
+				})
+			},
+
+			getJieAndDanyuan(data, jieId) {
+				// 循环单元
+				for (let danyuan of data.danyuanList) {
+					// 循环节
+					for (let jie of danyuan.jieList) {
+						if (jie.jieId == jieId) {
+							return {
+								danyuan: danyuan,
+								jie: jie
+							}
+						}
+					}
+				}
+				return null;
+			},
+			handlePlay(da, code) {
+				console.log('da', da);
+				let jieId = null;
+				if (code == 'jixu') {
+					if (!da.curJieId) {
+						toast("无jieId");
+						return;
+					}
+					jieId = da.curJieId;
+
+					let req = {
+						"banbenId": this.banbenId,
+						"danyuanId": this.danyuanId,
+						"jieId": jieId
+					}
+					shuxueSave(req).then(res => {
+						console.log('res', res);
+						if (res.code == 0 && res.data) {
+							let curJieAndDanyuan = this.getJieAndDanyuan(da, jieId)
+							console.log('curJieAndDanyuan', curJieAndDanyuan);
+							if (!curJieAndDanyuan) {
+								toast("curJieAndDanyuan没找到")
+								return false
+							}
+							cacheManager.updateObject('xuexi-shuxue', {
+								curDanyuanName: curJieAndDanyuan.danyuan.danyuanName,
+								curKechengName: curJieAndDanyuan.danyuan.danyuanIntro,
+								curJieId: jieId,
+								type: curJieAndDanyuan.jie.type
+							})
+							if (da.type == 1) {
+								uni.navigateTo({
+									url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
+								})
+							} else {
+								uni.navigateTo({
+									url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
+								})
+							}
+						} else {
+							toast("save位置出错")
+							return false
+						}
+					})
+				} else {
+					jieId = da.jieId;
+					let req = {
+						"banbenId": this.banbenId,
+						"danyuanId": this.danyuanId,
+						"jieId": jieId
+					}
+					shuxueSave(req).then(res => {
+						console.log('res', res);
+						if (res.code == 0 && res.data) {
+							let curJieAndDanyuan = this.getJieAndDanyuan(this.banbenInfo, jieId)
+							console.log('curJieAndDanyuan', curJieAndDanyuan);
+							if (!curJieAndDanyuan) {
+								toast("curJieAndDanyuan没找到")
+								return false
+							}
+							cacheManager.updateObject('xuexi-shuxue', {
+								curDanyuanName: curJieAndDanyuan.danyuan.danyuanName,
+								curKechengName: curJieAndDanyuan.danyuan.danyuanIntro,
+								curJieId: jieId,
+								type: curJieAndDanyuan.jie.type
+							})
+							if (da.type == 1) {
+								uni.navigateTo({
+									url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
+								})
+							} else {
+								uni.navigateTo({
+									url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
+								})
+							}
+						} else {
+							toast("save位置出错")
+							return false
+						}
+					})
+				}
+			},
+			handleClickDanyuan() {
+				this.isShow = true;
+				setTimeout(() => {
+					this.$refs.dyRef.handleShow(this.danyuanId)
+				}, 100)
+			},
+		}
+	}
+</script>

pages/chanpinneirong/index.vue

@@ -90,7 +90,8 @@
 				dengjiId: '',
 				curProcess: '',
 				cacheManagerLocal: null,
-				isFirstFlag: false
+				hasCache: false, // 是否有缓存的标志
+				needRefresh: false // 是否需要刷新数据的标志
 			}
 		},
 		components: {
@@ -98,91 +99,115 @@
 			danyuanInfoVue
 		},
 		onShow() {
-			console.log('学习页面显示，尝试恢复滚动位置')
-			console.log('this.isFirstFlag', this.isFirstFlag);
-			if (!this.isFirstFlag) {
-				return false
+			console.log('学习页面显示，使用缓存数据')
+			console.log('this.needRefresh',this.needRefresh)
+			console.log('this.hasCache',this.hasCache)
+			// 如果从其他页面返回需要刷新数据
+			if (this.needRefresh) {
+				this.needRefresh = false;
+				this.updateFromCache();
+			}
+
+			// 如果是第一次进入，已经有缓存数据了，直接使用缓存
+			if (this.hasCache) {
+				this.updateFromCache();
 			}
-			this.chanpinId = cacheManager.get('auth').chanpinId
-			this.danyuanId = cacheManager.get('auth').danyuanId
-			this.banbenId = cacheManager.get('auth').banbenId
-			//用于返回
-			this.dengjiId = cacheManager.get('auth').dengjiId
-			this.cacheManagerLocal = cacheManager.get('xuexi-shuxue') || {}
-			// 使用缓存
-			this.banbenInfo = this.cacheManagerLocal
-			this.curProcess = this.cacheManagerLocal.curProcess
-			this.danyuanList = this.cacheManagerLocal.danyuanList || []
 		},
 		onHide() {
 			console.log('学习页面隐藏，保存滚动位置')
-			this.isFirstFlag = true
+			this.needRefresh = true; // 标记离开页面，返回时需要刷新
 
 		},
 		onLoad(options) {
-			if (this.isFirstFlag) {
-				return false
-			}
-			console.log('options', options);
-			if (!cacheManager.get('xuexi-shuxue')) {
-				console.log('没有缓存');
-				this.chanpinId = options.chanpinId
-				this.danyuanId = options.danyuanId
-				this.banbenId = options.banbenId
-				this.dengjiId = options.dengjiId
-				this.loadDataFromApi()
+			const cacheData = cacheManager.get('xuexi-shuxue');
+			// cacheData && this.shouldUseCache(options, cacheData)
+			if (cacheData) {
+				// 使用缓存数据
+				console.log('使用缓存数据');
+				this.hasCache = true;
+				this.initFromCache(cacheData);
 			} else {
-				toast("使用xuexi-shuxue缓存,并且this.isFirstFlag 为false")
-				return false
+				// 没有缓存或参数不同，重新请求
+				console.log('重新请求数据');
+				this.hasCache = false;
+				this.initFromOptions(options);
+				this.loadDataFromApi();
 			}
 		},
-
 		methods: {
-			// 继续学习按钮是否可以点击
-			jisuanWanchengStatus(dagangList) {
-				// 查找第一个未完成的项目
-				const firstUncompleted = danyuanList.find(item => item.wanchengFlag == 0);
-				if (firstUncompleted) {
-					return {
-						allCompleted: false,
-						firstUncompleted: firstUncompleted
-					};
-				} else {
-					return {
-						allCompleted: true,
-						firstUncompleted: null
+			// 新增的从缓存初始化方法
+			initFromCache(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 || '';
+			},
+
+			// 新增的从参数初始化方法
+			initFromOptions(options) {
+				this.chanpinId = options.chanpinId;
+				this.danyuanId = options.danyuanId;
+				this.banbenId = options.banbenId;
+				this.dengjiId = options.dengjiId;
+			},
+			// 新增的从缓存更新数据方法
+			updateFromCache() {
+				const cacheData = cacheManager.get('xuexi-shuxue');
+				console.log('cacheData 新增的从缓存更新数据方法',cacheData);
+				if (cacheData) {
+					this.banbenInfo = {
+						...cacheData
 					};
+					this.curProcess = cacheData.curProcess;
+					this.danyuanList = [...(cacheData.danyuanList || [])];
 				}
 			},
-			handleBack() {
-				uni.navigateTo({
-					url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
-				})
+			
+			shouldUseCache(options, cacheData) {
+				if (options.banbenId && cacheData.banbenId === options.banbenId) {
+					return true;
+				}
+				return false;
 			},
+			// 改成了
 			loadDataFromApi() {
 				const req = {
 					banbenId: this.banbenId
 				}
 				shuxueChanpinBanbenInfo(req).then(res => {
-					this.banbenInfo = res.data
-					this.curProcess = res.data.curProcess
-					this.danyuanList = res.data.danyuanList || []
-					cacheManager.set('xuexi-shuxue', res.data)
-					cacheManager.updateObject('auth', {
-						chanpinId: this.chanpinId,
-						banbenId: this.banbenId,
-						danyuanId: this.danyuanId,
-						dengjiId: this.dengjiId
-					})
-					this.isFirstFlag = true
+					if (res.code === 0) {
+						this.banbenInfo = res.data;
+						this.curProcess = res.data.curProcess;
+						this.danyuanList = res.data.danyuanList || [];
+
+						// 保存到缓存（新增了参数保存）
+						const cacheData = {
+							...res.data,
+							banbenId: this.banbenId,
+							chanpinId: this.chanpinId,
+							danyuanId: this.danyuanId,
+							dengjiId: this.dengjiId
+						};
+						cacheManager.set('xuexi-shuxue', cacheData);
+						this.hasCache = true;
+
+						// 更新全局auth信息
+						cacheManager.updateObject('auth', {
+							chanpinId: this.chanpinId,
+							banbenId: this.banbenId,
+							danyuanId: this.danyuanId,
+							dengjiId: this.dengjiId
+						});
+					}
 				}).catch(res => {
-					this.isFirstFlag = false
-					cacheManager.remove("xuexi-shuxue")
-					toast("shuxueChanpinBanbenInfo接口错误重置isFirstFlag,清除xuexi-shuxue缓存")
-					return false
-				})
+					cacheManager.remove("xuexi-shuxue");
+					this.hasCache = false;
+					toast("加载失败，请重试");
+				});
 			},
-
 			getJieAndDanyuan(data, jieId) {
 				// 循环单元
 				for (let danyuan of data.danyuanList) {
@@ -198,87 +223,68 @@
 				}
 				return null;
 			},
+			// 这个是新增的统一保存和跳转方法
+			async saveAndNavigate(jieId, type) {
+				let req = {
+					"banbenId": this.banbenId,
+					"danyuanId": this.danyuanId,
+					"jieId": jieId
+				}
+
+				try {
+					const res = await shuxueSave(req);
+					console.log('res', res);
+
+					if (res.code == 0 && res.data) {
+						let curJieAndDanyuan = this.getJieAndDanyuan(this.banbenInfo, jieId);
+						console.log('curJieAndDanyuan', curJieAndDanyuan);
+
+						if (!curJieAndDanyuan) {
+							toast("未找到课程信息");
+							return false;
+						}
+
+						// 更新缓存
+						const cacheData = cacheManager.get('xuexi-shuxue') || {};
+						cacheData.curDanyuanName = curJieAndDanyuan.danyuan.danyuanName;
+						cacheData.curKechengName = curJieAndDanyuan.danyuan.danyuanIntro;
+						cacheData.curJieId = jieId;
+						cacheData.type = curJieAndDanyuan.jie.type;
+						cacheManager.set('xuexi-shuxue', cacheData);
+
+						// 跳转到学习页面
+						if (type == 1) {
+							uni.navigateTo({
+								url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
+							})
+						} else {
+							uni.navigateTo({
+								url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
+							})
+						}
+					} else {
+						toast("保存位置出错");
+						return false;
+					}
+				} catch (error) {
+					toast("保存失败");
+					return false;
+				}
+			},
 			handlePlay(da, code) {
 				console.log('da', da);
 				let jieId = null;
 				if (code == 'jixu') {
 					if (!da.curJieId) {
-						toast("无jieId");
+						toast("无课程ID");
 						return;
 					}
 					jieId = da.curJieId;
-
-					let req = {
-						"banbenId": this.banbenId,
-						"danyuanId": this.danyuanId,
-						"jieId": jieId
-					}
-					shuxueSave(req).then(res => {
-						console.log('res', res);
-						if (res.code == 0 && res.data) {
-							let curJieAndDanyuan = this.getJieAndDanyuan(da, jieId)
-							console.log('curJieAndDanyuan', curJieAndDanyuan);
-							if (!curJieAndDanyuan) {
-								toast("curJieAndDanyuan没找到")
-								return false
-							}
-							cacheManager.updateObject('xuexi-shuxue', {
-								curDanyuanName: curJieAndDanyuan.danyuan.danyuanName,
-								curKechengName: curJieAndDanyuan.danyuan.danyuanIntro,
-								curJieId: jieId,
-								type: curJieAndDanyuan.jie.type
-							})
-							if (da.type == 1) {
-								uni.navigateTo({
-									url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
-								})
-							} else {
-								uni.navigateTo({
-									url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
-								})
-							}
-						} else {
-							toast("save位置出错")
-							return false
-						}
-					})
 				} else {
 					jieId = da.jieId;
-					let req = {
-						"banbenId": this.banbenId,
-						"danyuanId": this.danyuanId,
-						"jieId": jieId
-					}
-					shuxueSave(req).then(res => {
-						console.log('res', res);
-						if (res.code == 0 && res.data) {
-							let curJieAndDanyuan = this.getJieAndDanyuan(this.banbenInfo, jieId)
-							console.log('curJieAndDanyuan', curJieAndDanyuan);
-							if (!curJieAndDanyuan) {
-								toast("curJieAndDanyuan没找到")
-								return false
-							}
-							cacheManager.updateObject('xuexi-shuxue', {
-								curDanyuanName: curJieAndDanyuan.danyuan.danyuanName,
-								curKechengName: curJieAndDanyuan.danyuan.danyuanIntro,
-								curJieId: jieId,
-								type: curJieAndDanyuan.jie.type
-							})
-							if (da.type == 1) {
-								uni.navigateTo({
-									url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
-								})
-							} else {
-								uni.navigateTo({
-									url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
-								})
-							}
-						} else {
-							toast("save位置出错")
-							return false
-						}
-					})
 				}
+
+				this.saveAndNavigate(jieId, da.type);
 			},
 			handleClickDanyuan() {
 				this.isShow = true;
@@ -286,6 +292,11 @@
 					this.$refs.dyRef.handleShow(this.danyuanId)
 				}, 100)
 			},
+			handleBack() {
+				uni.navigateTo({
+					url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
+				})
+			},
 		}
 	}
 </script>