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,
				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
				})
			},


			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)
			},
		}
	}
</script>