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="arrow-icon left-icon" :class="{ 'disabled': fontDanyuanId == 0 }" @click="prev"> </view>
				<!-- 显示内容 -->
				<view class="change-dy-content">
					<view>{{ danyuanInfo.danyuanName }}</view>
					<view>{{ danyuanInfo.danyuanIntro }}</view>
				</view>
				<view class="arrow-icon right-icon" @click="next" :class="{ 'disabled': nextDanyuanId == 0 }"> </view>
			</view>
			<view class="xx-scroll-body">
				<view class="xx-jd-box">
					<view class="xx-progress-btn-box">
						<view class="xx-progress-box">
							<view>当前学习进度</view>
							<progress :percent="20" class="xx-progress" stroke-width="10" backgroundColor="#3c7dfd"
								activeColor="#ffd11c" />
						</view>
						<view class="jxxx-btn" @click="handlePlay(danyuanInfo,'jixu')"></view>
					</view>
					<view class="jd-item-box">
						<view class="jd-item-btn" @click="handleClickDanyuan">
							<icon class="dydg-icon"></icon>单元大纲
						</view>
						<view class="jd-item-btn" @click="handleClickMulu">
							<icon class="dyml-icon"></icon>单元目录
						</view>
					</view>

				</view>
				<view class="xx-item-list">
					<view class="xx-item-box" v-for="section in dagangList" :key="section.jieId">
						<view class="xx-item-status"
							:class="section.wanchengFlag == 1 ? 'completed-status' : 'uncompleted-status'"> </view>
						<img :src="section.cover" />
						<view class="xx-text-box">
							<view>{{ section.jieName }}</view>
							<view>{{ section.jieIntro }}</view>
						</view>
						<view @click="handlePlay(section,'play')" class="xx-item-btn"></view>
					</view>
				</view>
				<!-- 底部占位 -->
				<view v-if="currentIndex != dagangList.length - 1" class="xx-next-btn" @click="next">
					学习下一单元</view>
				<!-- 	<view class="xx-xw-text">课程已学完</view> -->
			</view>

		</view>


		<!-- <scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop" @scroll="onScroll"> </scroll-view> -->

		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>
		<danyuanMuluVue ref="dyMlRef" @select="handleSelectDanyuan"></danyuanMuluVue>
		<CustomTabBar :currentTabNumber="1"></CustomTabBar>
	</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import cacheManager from "@/utils/cacheManager.js";
	import {
		shuxueChanpinDanyuanInfo
	} from "@/api/chanpinneirong.js"
	import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';
	import danyuanMuluVue from '@/pages/xinshuxue/components/danyuanMulu.vue';

	export default {
		data() {
			return {
				dagangList: [],
				currentUnitName: "",
				isShow: true,
				currentIndex: 0,
				danyuanInfo: {},
				banbenId: '',
				danyuanId: '',
				chanpinId: '',
				fontDanyuanId: '',
				nextDanyuanId: '',
				dengjiId: '',
				customType: '',
				cacheManagerLocal: null



			}
		},
		components: {
			CustomTabBar,
			danyuanInfoVue,
			danyuanMuluVue
		},
		onShow() {
			console.log('学习页面显示，尝试恢复滚动位置')
		},
		onHide() {

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

		onLoad(options) {
			console.log('options', options);
			this.customType = options.customType
			if (this.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-' + this.chanpinId)
				// 使用缓存
				this.danyuanInfo = this.cacheManagerLocal
				this.fontDanyuanId = this.cacheManagerLocal.fontDanyuanId
				this.nextDanyuanId = this.cacheManagerLocal.nextDanyuanId
				this.dagangList = this.cacheManagerLocal.dagangList || []
			}
		},

		methods: {
			handleSelectDanyuan(item) {
				console.log('切换单元', item)
				this.danyuanId =item.danyuanId
				this.loadDataFromApi()
			},
			handleClickMulu() {
				this.$refs.dyMlRef.showPopup(this.banbenId)
			},
			handleBack() {
				uni.navigateTo({
					url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
				})
			},
			loadDataFromApi() {
				const req = {
					banbenId: this.banbenId,
					danyuanId: this.danyuanId
				}
				shuxueChanpinDanyuanInfo(req).then(res => {
					this.danyuanInfo = res.data
					this.fontDanyuanId = res.data.fontDanyuanId
					this.nextDanyuanId = res.data.nextDanyuanId
					this.dagangList = res.data.dagangList || []
					cacheManager.set('xuexi-' + this.chanpinId, res.data)
					cacheManager.updateObject('auth', {
						chanpinId: this.chanpinId,
						banbenId: this.banbenId,
						danyuanId: this.danyuanId,
						dengjiId: this.dengjiId
					})	
				})
			},

			prev() {
				if (this.fontDanyuanId != 0) {
					this.danyuanId = this.fontDanyuanId
					this.loadDataFromApi()
				}


			},
			next() {
				if (this.nextDanyuanId != 0) {
					this.danyuanId = this.nextDanyuanId
					this.loadDataFromApi()
				}

			},

			handlePlay(da, code) {
				console.log('da', da)
				let jieId = null;
				if (code == 'jixu') {

					// 判断学习状态
					/* if (已学完) {
						
						return;
					} */


					jieId = da.curJieId;
					uni.navigateTo({
						url: `/pages/xinshuxue/lookShipin?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>