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="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
	} 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,
				currentIndex: 0,
				banbenInfo: {},
				banbenId: '',
				danyuanId: '',
				chanpinId: '',
				fontDanyuanId: '',
				nextDanyuanId: '',
				dengjiId: '',
				customType: '',
				curProcess: '',
				cacheManagerLocal: null,
				curJieObject: null
			}
		},
		components: {
			CustomTabBar,
			danyuanInfoVue
		
		},
		onShow() {
			console.log('学习页面显示，尝试恢复滚动位置')
	
			
		},
		onHide() {

			console.log('学习页面隐藏，保存滚动位置')
		},

		onLoad(options) {
			console.log('options', options);

			if (!cacheManager.get('xuexi-shuxue')) {
				console.log('没有缓存');
				this.customType = options.customType
				this.chanpinId = options.chanpinId
				this.danyuanId = options.danyuanId
				this.banbenId = options.banbenId
				this.dengjiId = options.dengjiId
				this.loadDataFromApi()
			} else {
				console.log('使用缓存');
				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.fontDanyuanId = this.cacheManagerLocal.fontDanyuanId
				this.nextDanyuanId = this.cacheManagerLocal.nextDanyuanId
				this.danyuanList = this.cacheManagerLocal.danyuanList || []
				const result = this.jisuanWanchengStatus(this.danyuanList);
				if (result.allCompleted) {
					console.log('全部完成');
				} else {
					this.banbenInfo.curJieId = result.firstUncompleted.jieId
					console.log('未完成项目：', result.firstUncompleted);
					console.log('未完成项目jieId：', result.firstUncompleted.jieId);
				}



			}
		},

		methods: {
			// 继续学习按钮是否可以点击
			jisuanWanchengStatus(dagangList) {
				// 查找第一个未完成的项目
				const firstUncompleted = danyuanList.find(item => item.wanchengFlag == 0);
				if (firstUncompleted) {
					return {
						allCompleted: false,
						firstUncompleted: firstUncompleted
					};
				} else {
					return {
						allCompleted: true,
						firstUncompleted: null
					};
				}
			},


			handleSelectDanyuan(item) {
				console.log('切换单元', item)
				this.danyuanId = item.danyuanId
				this.loadDataFromApi()
			},
		
			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.fontDanyuanId = res.data.fontDanyuanId
					this.nextDanyuanId = res.data.nextDanyuanId
					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
					})
				})
			},


			handlePlay(da, code) {
				let jieId = null;
				if (code == 'jixu') {
					if (!da.curJieId) {
						toast("无jieId");
						return;
					}
					jieId = da.curJieId;
					if (da.type == 1) {
						uni.navigateTo({
							url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
						})
					}
				} else {
					jieId = da.jieId;
					if (da.type == 1) {
						uni.navigateTo({
							url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
						})
					}
				}
			},
			handleClickDanyuan() {
				this.isShow = true;
				setTimeout(() => {
					this.$refs.dyRef.handleShow(this.danyuanId)
				}, 100)
			},






			// 滚动事件处理
			onScroll(e) {
				const scrollTop = e.detail.scrollTop;
				// 更新滚动位置
				this.scrollTop = scrollTop;
			}
		}
	}
</script>