|
|
@@ -1,48 +1,45 @@
|
|
|
<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 v-if="existData" class="ezy-page-body xuexi-page-body">
|
|
|
+ <view class="xxjl-card-box">
|
|
|
<!-- 显示内容 -->
|
|
|
- <view class="change-dy-content">
|
|
|
- <view>{{ banbenInfo.chanpinName }}</view>
|
|
|
- <view>
|
|
|
- <text>等级</text>
|
|
|
- <text>{{banbenInfo.dengjiName}}</text>
|
|
|
+ <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>
|
|
|
- <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 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 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 class="xx-item-title">— 以下为当前等级课程目录 —</view>
|
|
|
+ <scroll-view v-for="(danyuanItem,index) in danyuanList" :key="danyuanItem.danyuanId">
|
|
|
+ <!-- <view>显示当前第几单元</view> -->
|
|
|
+ <!-- 第一单元 -->
|
|
|
+ <view v-if="index ==0" class="item-dy-box" @click="handleClickDanyuan">
|
|
|
+ <view class="dy-left-box">L{{banbenInfo.dengjiId}}</view>
|
|
|
+ <view class="dy-right-box">
|
|
|
+ <view class="dy-name">{{danyuanItem.danyuanName}}</view>
|
|
|
+ <view>{{danyuanItem.danyuanIntro}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <!-- 其他单元 -->
|
|
|
+ <view v-if="index !=0" class="xx-item-title">— {{danyuanItem.danyuanName}} {{danyuanItem.danyuanIntro}} —</view>
|
|
|
<view class="xx-item-box" v-for="jieItem in danyuanItem.jieList" :key="jieItem.jieId"
|
|
|
@click="handlePlay(jieItem,'play')">
|
|
|
<view class="xx-item-status"
|
|
|
@@ -54,24 +51,33 @@
|
|
|
</view>
|
|
|
<view class="xx-item-btn"></view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </scroll-view >
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
+ <view v-if="!existData">
|
|
|
+
|
|
|
+ </view>
|
|
|
<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>
|
|
|
- <CustomTabBar :currentTabNumber="1"></CustomTabBar>
|
|
|
+ <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/custom-tabbar.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
|
|
|
+ } from "@dcloudio/uni-app"
|
|
|
import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';
|
|
|
import {
|
|
|
toast
|
|
|
@@ -80,6 +86,8 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ canExitApp: false,
|
|
|
+
|
|
|
danyuanList: [],
|
|
|
currentUnitName: "",
|
|
|
isShow: true,
|
|
|
@@ -89,8 +97,11 @@
|
|
|
chanpinId: '',
|
|
|
dengjiId: '',
|
|
|
curProcess: '',
|
|
|
+ currentTabIndex: 1,
|
|
|
cacheManagerLocal: null,
|
|
|
- isFirstFlag: false
|
|
|
+ hasCache: false, // 是否有缓存的标志
|
|
|
+ needRefresh: false, // 是否需要刷新数据的标志
|
|
|
+ existData: true
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -98,91 +109,125 @@
|
|
|
danyuanInfoVue
|
|
|
},
|
|
|
onShow() {
|
|
|
- console.log('学习页面显示，尝试恢复滚动位置')
|
|
|
- console.log('this.isFirstFlag', this.isFirstFlag);
|
|
|
- if (!this.isFirstFlag) {
|
|
|
- return false
|
|
|
+ // console.log('学习页面显示，使用缓存数据')
|
|
|
+ this.currentTabIndex = 1
|
|
|
+ const cacheData = cacheManager.get('xuexi-shuxue');
|
|
|
+ // cacheData && this.shouldUseCache(options, cacheData)
|
|
|
+ if (cacheData) {
|
|
|
+ // 使用缓存数据
|
|
|
+ console.log('使用缓存数据');
|
|
|
+ this.updateFromCache();
|
|
|
+ } else {
|
|
|
+ // 没有缓存或参数不同，重新请求
|
|
|
+ console.log('重新请求数据');
|
|
|
+ this.hasCache = false;
|
|
|
+ const cacheDataAuth = cacheManager.get('auth');
|
|
|
+ this.initFromOptions(cacheDataAuth);
|
|
|
}
|
|
|
- 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 || []
|
|
|
+
|
|
|
+ // // 如果从其他页面返回需要刷新数据
|
|
|
+ // if (this.needRefresh) {
|
|
|
+ // this.needRefresh = false;
|
|
|
+ // this.updateFromCache();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 如果是第一次进入，已经有缓存数据了，直接使用缓存
|
|
|
+ // if (this.hasCache) {
|
|
|
+ // this.updateFromCache();
|
|
|
+ // }
|
|
|
},
|
|
|
onHide() {
|
|
|
console.log('学习页面隐藏，保存滚动位置')
|
|
|
- this.isFirstFlag = true
|
|
|
+ this.needRefresh = 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
|
|
|
- }
|
|
|
+ // debugger
|
|
|
+ uni.hideTabBar()
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
- // 继续学习按钮是否可以点击
|
|
|
- jisuanWanchengStatus(dagangList) {
|
|
|
- // 查找第一个未完成的项目
|
|
|
- const firstUncompleted = danyuanList.find(item => item.wanchengFlag == 0);
|
|
|
- if (firstUncompleted) {
|
|
|
- return {
|
|
|
- allCompleted: false,
|
|
|
- firstUncompleted: firstUncompleted
|
|
|
- };
|
|
|
- } else {
|
|
|
- return {
|
|
|
- allCompleted: true,
|
|
|
- firstUncompleted: null
|
|
|
+ // 从缓存初始化方法
|
|
|
+ // initFromCache(cacheData) {
|
|
|
+ // console.log('cacheData',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) {
|
|
|
+ console.log('options', options);
|
|
|
+ this.chanpinId = options.chanpinId;
|
|
|
+ this.danyuanId = options.danyuanId;
|
|
|
+ this.banbenId = options.banbenId;
|
|
|
+ this.dengjiId = options.dengjiId;
|
|
|
+ this.loadDataFromApi();
|
|
|
+ },
|
|
|
+ // 从缓存更新数据方法
|
|
|
+ updateFromCache() {
|
|
|
+ const cacheData = cacheManager.get('xuexi-shuxue');
|
|
|
+ console.log('cacheData 从缓存更新数据方法', cacheData);
|
|
|
+ if (cacheData) {
|
|
|
+ this.banbenInfo = {
|
|
|
+ ...cacheData
|
|
|
};
|
|
|
+ this.curProcess = cacheData.curProcess;
|
|
|
+ this.danyuanList = [...(cacheData.danyuanList || [])];
|
|
|
}
|
|
|
},
|
|
|
- handleBack() {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
|
|
|
- })
|
|
|
+
|
|
|
+ shouldUseCache(options, cacheData) {
|
|
|
+ if (options.banbenId && cacheData.banbenId === options.banbenId) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
},
|
|
|
+ // 改成了
|
|
|
loadDataFromApi() {
|
|
|
+ this.banbenInfo = {}
|
|
|
+ this.curProcess = ''
|
|
|
+ this.danyuanList = []
|
|
|
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
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.banbenInfo = res.data;
|
|
|
+ this.curProcess = res.data.curProcess;
|
|
|
+ this.danyuanList = res.data.danyuanList || [];
|
|
|
+
|
|
|
+ if (!this.danyuanList) {
|
|
|
+ this.existData = false
|
|
|
+ }
|
|
|
+ // 保存到缓存（新增了参数保存）
|
|
|
+ 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 => {
|
|
|
- this.isFirstFlag = false
|
|
|
- cacheManager.remove("xuexi-shuxue")
|
|
|
- toast("shuxueChanpinBanbenInfo接口错误重置isFirstFlag,清除xuexi-shuxue缓存")
|
|
|
- return false
|
|
|
- })
|
|
|
+ cacheManager.remove("xuexi-shuxue");
|
|
|
+ this.hasCache = false;
|
|
|
+ toast("加载失败，请重试");
|
|
|
+ });
|
|
|
},
|
|
|
-
|
|
|
getJieAndDanyuan(data, jieId) {
|
|
|
// 循环单元
|
|
|
for (let danyuan of data.danyuanList) {
|
|
|
@@ -198,94 +243,90 @@
|
|
|
}
|
|
|
return null;
|
|
|
},
|
|
|
+ // 统一保存和跳转方法
|
|
|
+ async saveAndNavigate(jieId, type) {
|
|
|
+
|
|
|
+ if (!this.banbenId || !this.danyuanId) {
|
|
|
+ toast("banbenId或者danyuanId 丢失")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ 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("无jieId");
|
|
|
+ toast("无课程ID");
|
|
|
return;
|
|
|
}
|
|
|
jieId = da.curJieId;
|
|
|
-
|
|
|
- let req = {
|
|
|
- "banbenId": this.banbenId,
|
|
|
- "danyuanId": this.danyuanId,
|
|
|
- "jieId": jieId
|
|
|
- }
|
|
|
- shuxueSave(req).then(res => {
|
|
|
- console.log('res', res);
|
|
|
- if (res.code == 0 && res.data) {
|
|
|
- let curJieAndDanyuan = this.getJieAndDanyuan(da, jieId)
|
|
|
- console.log('curJieAndDanyuan', curJieAndDanyuan);
|
|
|
- if (!curJieAndDanyuan) {
|
|
|
- toast("curJieAndDanyuan没找到")
|
|
|
- return false
|
|
|
- }
|
|
|
- cacheManager.updateObject('xuexi-shuxue', {
|
|
|
- curDanyuanName: curJieAndDanyuan.danyuan.danyuanName,
|
|
|
- curKechengName: curJieAndDanyuan.danyuan.danyuanIntro,
|
|
|
- curJieId: jieId,
|
|
|
- type: curJieAndDanyuan.jie.type
|
|
|
- })
|
|
|
- if (da.type == 1) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- toast("save位置出错")
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
} else {
|
|
|
jieId = da.jieId;
|
|
|
- let req = {
|
|
|
- "banbenId": this.banbenId,
|
|
|
- "danyuanId": this.danyuanId,
|
|
|
- "jieId": jieId
|
|
|
- }
|
|
|
- shuxueSave(req).then(res => {
|
|
|
- console.log('res', res);
|
|
|
- if (res.code == 0 && res.data) {
|
|
|
- let curJieAndDanyuan = this.getJieAndDanyuan(this.banbenInfo, jieId)
|
|
|
- console.log('curJieAndDanyuan', curJieAndDanyuan);
|
|
|
- if (!curJieAndDanyuan) {
|
|
|
- toast("curJieAndDanyuan没找到")
|
|
|
- return false
|
|
|
- }
|
|
|
- cacheManager.updateObject('xuexi-shuxue', {
|
|
|
- curDanyuanName: curJieAndDanyuan.danyuan.danyuanName,
|
|
|
- curKechengName: curJieAndDanyuan.danyuan.danyuanIntro,
|
|
|
- curJieId: jieId,
|
|
|
- type: curJieAndDanyuan.jie.type
|
|
|
- })
|
|
|
- if (da.type == 1) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- toast("save位置出错")
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
}
|
|
|
+
|
|
|
+ this.saveAndNavigate(jieId, da.type);
|
|
|
},
|
|
|
handleClickDanyuan() {
|
|
|
+ if (!this.danyuanId) {
|
|
|
+ toast("this.danyuanId丢失")
|
|
|
+ return false
|
|
|
+ }
|
|
|
this.isShow = true;
|
|
|
setTimeout(() => {
|
|
|
this.$refs.dyRef.handleShow(this.danyuanId)
|
|
|
}, 100)
|
|
|
},
|
|
|
+ handleBack() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/chanpinXuanze/banben?dengjiId=` + this.dengjiId
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
wangguoyu