uniProject/pages/chanpinneirong/chanpin1.vue

<template>
	<view class="ezy-page-body xuexi-page-body">
		<!-- 滚动区域 -->
		<scroll-view v-if="existData" :scroll-with-animation="true" scroll-y :scroll-top="scrollTop"
			@scroll="handleScroll">
			<view class="xxjl-card-box-padding">
				<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 class="right-item right-item-mini">等级：{{banbenInfo.dengjiName}}</view>
							<view class="right-item">版本：{{banbenInfo.name}}</view>
							<view class="right-item right-item-mini">单元：{{banbenInfo.curDanyuanName}}</view>
							<view class="right-item">课程：{{banbenInfo.curKechengName}}</view>
						</view>
					</view>
					<view class="card-progress-box">
						<view class="xx-progress-box">
							<view class="progress-title">学习进度</view>
							<progress :percent="curProcess" class="xx-progress" stroke-width="20"
								backgroundColor="#3c7dfd" activeColor="#ffd11c" />
						</view>
						<ezyActiveVue class="ezy-btn-active jxxx-btn" @aclick="handlePlay(banbenInfo,'jixu')">
						</ezyActiveVue>
					</view>
				</view>
			</view>

			<view class="xx-item-list">
				<view class="xx-item-title">— 以下为当前等级课程目录 —</view>

				<view v-for="(danyuanItem, index) in danyuanList" :key="danyuanItem.danyuanId">
					<!-- 单元标题（带唯一ID，用于位置查询） -->
					<ezyActiveVue class="ezy-list-item-active item-dy-box"
						@aclick="handleClickDanyuan(danyuanItem.danyuanId)" :id="`unit-title-${danyuanItem.danyuanId}`">
						<view class="dy-left-box">L{{banbenInfo.dengjiId}}</view>
						<view class="dy-right-box">
							<view class="right-content">
								<view>{{danyuanItem.danyuanName}}</view>
								<view class="dy-name">{{danyuanItem.danyuanIntro}}</view>
							</view>
						</view>
					</ezyActiveVue>
					<!-- 节列表 -->
					<ezyActiveVue class="ezy-list-item-active xx-item-box" v-for="jieItem in danyuanItem.jieList"
						:key="jieItem.jieId" @aclick="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 v-if="jieItem.lock" class="xx-item-lock-btn"></view>
						<view v-else class="xx-item-btn"></view>
					</ezyActiveVue>
				</view>

				<view class="xx-item-title">本级别最后一单元啦~</view>
				<view class="xx-more-btn" @click="moreBtn"></view>
			</view>
		</scroll-view>
		<!-- 回到顶部 -->
		<view v-show="showGoTop" class="go-top-btn" @click="goTopBtn"></view>

		<!-- 无数据占位 -->
		<view v-if="!existData" class="ezy-page-body">
			<view class="ezy-no-sj">
				<icon></icon>
				<text>暂无数据</text>
			</view>
		</view>
		<!-- 弹窗组件 -->
		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow = false"></danyuanInfoVue>
		<!-- 购买提示窗 -->
		<tipSmallDialog ref="gmtRef" content="需要购买当前课程才能学习" @confirm-btn="handleConfirmBtn" qrBtnName="前往购买"></tipSmallDialog>
	</view>
</template>

<script>
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	import CustomTabBar from '@/components/custom-tabbar/index.vue';
	import cacheManager from "@/utils/cacheManager.js";
	import {
		shuxueChanpinBanbenInfo,
		shuxueSave
	} from "@/api/chanpinneirong.js"
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from "@dcloudio/uni-app"
	import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';
	import {
		toast
	} from '../../utils/common';
	import {
		updateChanpin1Process
	} from "./useNeirongChanpin1"
	import tipSmallDialog from "@/components/dialog/tipSmallDialog.vue";
	
	export default {
		data() {
			return {
				canExitApp: false,

				danyuanList: [],
				banbenInfo: {},
				banbenId: '',
				danyuanId: '',
				chanpinId: '',
				dengjiId: '',
				curProcess: '',
				existData: false,
				isShow: false,

				stickyHeight: 0, // 吸顶栏高度（px）
				currentStickyTitle: '', // 初始为空，不显示吸顶
				currentStickyIntro: '',
				currentDanyuanId: '',
				currentStickyDengjiId: '',
				titlePositions: [],
				scrollTop: 0,
				showGoTop: false,
				scrollThreshold: 300,
			}
		},
		components: {
			CustomTabBar,
			danyuanInfoVue,
			ezyActiveVue,
			tipSmallDialog
		},

		onHide() {
			console.log('学习页面隐藏')
		},
		onUnload() {
			// 页面卸载无需特殊处理
		},
		methods: {
			handleConfirmBtn() {
				// 加锁视频需要购买
				uni.navigateTo({
					url: "/pages/chanpinShop/cp1/dingdan"
				})
			},
			initData(banbenId) {
				console.log('123111');
				const cacheData = cacheManager.get('contentInfo');
				if (cacheData) {
					console.log('使用缓存数据');
					this.updateFromCache();
				} else {
					console.log('重新请求数据');
					this.initFromOptions(banbenId);
				}
			},
			goTopBtn() {
				// 替换原来的 uni.pageScrollTo
				this.scrollTop = Math.random(); // 先设置一个随机值
				this.$nextTick(() => {
					this.scrollTop = 0; // 再设置回0
				});

				this.showGoTop = false;
			},
			moreBtn() {
				uni.switchTab({
					url: '/pages/chanpinXuanze/index'
				})
			},

			initFromOptions(banbenId) {

				this.loadDataFromApi(banbenId);
			},
			// 从缓存更新数据方法
			updateFromCache() {
				console.log('12311');
				updateChanpin1Process()
				const cacheData = cacheManager.get('contentInfo');
				console.log('cacheData 从缓存更新数据方法', cacheData);
				if (cacheData) {
					this.banbenInfo = {
						...cacheData
					};
					this.curProcess = cacheData.curProcess;
					this.danyuanList = [...(cacheData.danyuanList || [])];
					this.banbenId = cacheData.banbenId


					if (this.danyuanList.length == 0) {
						this.existData = false
					} else {
						this.existData = true
					}
					// this.$nextTick(() => {
					// 	this.updateTitlePositions();
					// });
				} else {
					this.existData = false;
				}
			},

			loadDataFromApi(banbenId) {
				uni.showLoading({
					title: '加载中'
				});
				this.banbenId = banbenId
				this.banbenInfo = {}
				this.curProcess = ''
				this.danyuanList = []
				const req = {
					banbenId: banbenId
				}
				shuxueChanpinBanbenInfo(req).then(res => {
					if (res.code === 0) {
						this.banbenInfo = res.data;
						this.banbenInfo.danyuanId = res.data.curDanyuanId;
						this.curProcess = res.data.curProcess * 100;
						this.danyuanList = res.data.danyuanList || [];
						if (this.danyuanList.length == 0) {
							this.existData = false
						} else {
							this.existData = true
						}
						const cacheData = {
							...res.data,
							banbenId: banbenId,
						};
						cacheManager.set('contentInfo', cacheData);
						uni.hideLoading();
					}
				}).catch(res => {
					cacheManager.remove("contentInfo");
					toast("加载失败，请重试");
					uni.hideLoading();
				});
			},


			handleScroll(e) {
				const scrollTop = e.detail.scrollTop;
				console.log('scrollTop', scrollTop);
				this.showGoTop = scrollTop > this.scrollThreshold;
			},

			getJieAndDanyuan(data, jieId) {
				for (let danyuan of data.danyuanList) {
					for (let jie of danyuan.jieList) {
						if (jie.jieId == jieId) {
							return {
								danyuan,
								jie
							}
						}
					}
				}
				return null;
			},

			async saveAndNavigate(jieId, type, da, code) {

				console.log('this.banbenId', this.banbenId);
				console.log('this.danyuanIddanyuanId', da.danyuanId);
				if (code == 'jixu') {
					if (!this.banbenId || !da.danyuanId) {
						toast("banbenId或者danyuanId 丢失")
						return false
					}
				}

				let req = {
					"banbenId": this.banbenId,
					"danyuanId": da.danyuanId,
					"jieId": jieId
				}
				console.log('req', req);
				const res = await shuxueSave(req);
				if (res.code == 0) {
					let curJieAndDanyuan = this.getJieAndDanyuan(this.banbenInfo, jieId);
					if (!curJieAndDanyuan) {
						toast("未找到课程信息");
						return false;
					}

					const cacheData = cacheManager.get('contentInfo') || {};
					cacheData.curDanyuanName = curJieAndDanyuan.danyuan.danyuanName;
					cacheData.curKechengName = curJieAndDanyuan.jie.jieIntro;
					cacheData.danyuanId = curJieAndDanyuan.jie.danyuanId;
					cacheData.curJieId = jieId;
					cacheData.type = curJieAndDanyuan.jie.type;
					cacheManager.set('contentInfo', cacheData);

					if (type == 1) {
						uni.navigateTo({
							url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
						})
					}
				} else {
					return false;
				}
			},
			handlePlay(da, code) {

				if (da.lock && code == 'play') {
					
					this.$refs.gmtRef.handleShow();
					
					// 加锁视频需要购买
					// uni.navigateTo({
					// 	url: "/pages/chanpinShop/cp1/dingdan"
					// })
					return;
				}
				let jieId = code === 'jixu' ? da.curJieId : da.jieId;
				if (!jieId) {
					toast("无课程ID");
					return;
				}
				this.saveAndNavigate(jieId, da.type, da, code);
			},
			handleClickDanyuan(danyuanId) {

				if (!danyuanId) {
					toast("danyuanId丢失")
					return false
				}
				this.isShow = true;
				setTimeout(() => {
					// 更新为点击的动态单元Id [临时]
					this.$refs.dyRef.handleShow(danyuanId)
				}, 100)
			},
			handleBack() {
				uni.navigateTo({
					url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
				})
			},
		},

		// 计算吸顶栏下方的偏移（确保内容不被遮挡）
		computed: {


		}
	}
</script>