uniProject/pages/chanpinneirong/index.vue

<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="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 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>
			<view class="xx-scroll-body">
				<view class="xx-item-list">
					<view class="xx-item-title">— 以下为当前等级课程目录 —</view>
					<view v-for="danyuanItem in danyuanList" :key="danyuanItem.danyuanId">
						<view class="item-dy-box" @click="handleClickDanyuan">
							<view class="dy-left-box">L{{danyuanItem.danyuanId}}</view>
							<view class="dy-right-box">
								<view class="dy-name">{{danyuanItem.danyuanName}}</view>
								<view>{{danyuanItem.danyuanIntro}}</view>
							</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>
		<custom-tab-bar :show="true" :current-index="currentTabIndex" />
		<!-- 回到顶部 -->
		<view class="go-top-btn" v-if="false"></view>
	</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tabbar/index.vue';
	import cacheManager from "@/utils/cacheManager.js";
	import {
		shuxueChanpinBanbenInfo,
		shuxueSave
	} from "@/api/chanpinneirong.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	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: '',
				currentTabIndex: 1,
				cacheManagerLocal: null,
				hasCache: false, // 是否有缓存的标志
				needRefresh: false // 是否需要刷新数据的标志
			}
		},
		components: {
			CustomTabBar,
			danyuanInfoVue
		},
		onShow() {
			console.log('学习页面显示，使用缓存数据')
			console.log('this.needRefresh',this.needRefresh)
			console.log('this.hasCache',this.hasCache)
			this.currentTabIndex = 1
			// 如果从其他页面返回需要刷新数据
			if (this.needRefresh) {
				this.needRefresh = false;
				this.updateFromCache();
			}

			// 如果是第一次进入，已经有缓存数据了，直接使用缓存
			if (this.hasCache) {
				this.updateFromCache();
			}
		},
		onHide() {
			console.log('学习页面隐藏，保存滚动位置')
			this.needRefresh = true; // 标记离开页面，返回时需要刷新

		},
		onLoad(options) {
			uni.hideTabBar()
			const cacheData = cacheManager.get('xuexi-shuxue');
			// cacheData && this.shouldUseCache(options, cacheData)
			if (cacheData) {
				// 使用缓存数据
				console.log('使用缓存数据');
				this.hasCache = true;
				this.initFromCache(cacheData);
			} else {
				// 没有缓存或参数不同，重新请求
				console.log('重新请求数据');
				this.hasCache = false;
					const cacheDataAuth = cacheManager.get('auth');
				this.initFromOptions(cacheDataAuth);
				this.loadDataFromApi();
			}
		},
		methods: {
			// 从缓存初始化方法
			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 || [])];
				}
			},
			
			shouldUseCache(options, cacheData) {
				if (options.banbenId && cacheData.banbenId === options.banbenId) {
					return true;
				}
				return false;
			},
			// 改成了
			loadDataFromApi() {
				const req = {
					banbenId: this.banbenId
				}
				shuxueChanpinBanbenInfo(req).then(res => {
					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 => {
					cacheManager.remove("xuexi-shuxue");
					this.hasCache = false;
					toast("加载失败，请重试");
				});
			},
			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;
			},
			// 统一保存和跳转方法
			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("无课程ID");
						return;
					}
					jieId = da.curJieId;
				} else {
					jieId = da.jieId;
				}

				this.saveAndNavigate(jieId, da.type);
			},
			handleClickDanyuan() {
				this.isShow = true;
				setTimeout(() => {
					this.$refs.dyRef.handleShow(this.danyuanId)
				}, 100)
			},
			handleBack() {
				uni.navigateTo({
					url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
				})
			},
		}
	}
</script>