uniProject/pages/study/index.vue

<template>
	<view>
	<swiper :circular="true"  @change="onChangeTab" :duration="currentDuration"
		:current="current" class="ezy-study-swiper" :class="'ezy-study-swiper'+ currentProduct" >
		<swiper-item v-for="(item,index) in zhangList" :key="index">
			<shuxueZhangjie v-if="currentProduct ==1" @clickGradeTerm="clickGradeTerm"
				@handleCheckCatalogue="handleCheckCatalogue(item)" @listClick="listClick" :gradeTerm='gradeTerm'
				:options="item">
			</shuxueZhangjie>
			<yingyuZhangjie v-if="currentProduct ==2" @clickGradeTerm="clickGradeTerm"
				@handleCheckCatalogue="handleCheckCatalogue(item)" @listClick="listClick" :gradeTerm='gradeTerm' :options="item">
			</yingyuZhangjie>
		</swiper-item>
	</swiper>
	<!-- 蛋 -->
	<egg-dialog ref="eggDialogRef" @eggBtn="eggBtn"></egg-dialog>
	<catalogue ref="catalogueRef" :list=zhangList @change-zhang="handleChangeZhang" @listSelectJieClick="listSelectJieClick"></catalogue>
	<CustomTabBar :cardId="cardId" :currentTabNumber="0" :nianji="nianji" :zhangId="zhangId" :tipFlag="tipFlag"></CustomTabBar>
	<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
	<tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :content="YouKeContent"></tip-middle-dialog>
	<dao-tip-dialog ref="daoTipDialogRef" v-if="showDaoTip" :productTip="productTipImg" @dao-tip-close="daoTipClose"></dao-tip-dialog>
	</view>
</template>
<script setup>
	import daoTipDialog from './daoTipDialog.vue';
	import {
		userZhangInfo,
		userLocate,
		userZhangForntInfo,
		userZhangNextInfo,
		getCommonZhangInfo
	} from "@/api/learnPlan.js"
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		onMounted
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import catalogue from "@/components/catalogue/catalogue.vue";
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue'
	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
	import dSwiper from '@/components/wSwiper/DSwiper.vue';

	import shuxueZhangjie from './product/shuxue.vue';
	import yingyuZhangjie from './product/yingyu.vue';

	import {
		useTabBarHistory
	} from '@/utils/emitEvents.js';
	import eggDialog from './eggDialog.vue'
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import cacheManager from "@/utils/cacheManager.js";
	const tipContent = '付费章节,是否前往开通付费？'; //当前产品
	const goPayDialogRef = ref(null);
	const youkeDialogRef = ref(null);
	const dSwiperRef = ref(null);
	const eggDialogRef = ref(null);
	const current = ref(0);
	const currentDuration = ref(500)
	const YouKeContent = '您当前是游客身份，登录后才能浏览内容，现在去登录？';
	const zhangId = ref(null); //游客使用
	const nianji = ref(null); //游客使用
	const cardId = ref(null); //游客使用
	const tipFlag = ref(null) //游客使用
	const catalogueRef = ref(null);
	const youkeZhangInfoData = ref(null);
	const currentProduct = ref(null);
	const selectZhang = ref(null);
	const zhangList = ref(null);
	const gradeTerm = ref(null);
	let infoData = reactive({
		jieList: [],
		haveFlag: '',
		nianji: '',
		number: '',
		cardId: '',
		zhangId: '',
		zhangName: '',
		numberStr: '',
	});
	const gradeMapping = {
		1: 'L1',
		2: 'L2',
		3: 'L3',
		4: 'L4',
		5: 'L5',
		6: 'L6'
	};

	const termMapping = {
		1: ' 数学',
		2: ' 英语'
	};
	
	const daoTipDialogRef = ref(null);
	const showDaoTip = ref(true);
	const productTipImg = ref('');
		
	onLoad((options) => {
		init(options);
	})
	
	function listSelectJieClick(item,jie) {
		if( cacheManager.get('auth')){
			cacheManager.updateObject('auth', {
				currentZhang: zhangList.value.findIndex(citem => citem.zhangId == item.zhangId),
				zhangId: item.zhangId
			})
		}
		listClick(jie);
	}
	
	function getProjectImg(){
		if(currentProduct.value ==1){
			// 数学
			productTipImg.value = 'static/images/study/shuxue/shuxue-tip.gif';
			getBj('shuxue')
		}else if(currentProduct.value ==2){
			// 英语
			productTipImg.value = 'static/images/study/yingyu/yingyu-tip.gif'
			getBj('yingyu');
		}
	}
	function getBj(data){
		let bjType =cacheManager.get('dao-tip')[data];
		if(cacheManager.get('auth')){
			// 非游客
			if(bjType!=='has'){
				nextTick(() => {
					daoTipDialogRef.value.handleShow();
				})
			}
		}else{
			// 游客
			if(tipFlag.value==='0'){
				nextTick(() => {
					daoTipDialogRef.value.handleShow();
				})
			}
		}
	}
	function daoTipClose(){
		if(cacheManager.get('auth')){
			// 非游客 记缓存
			if(currentProduct.value ==1){
				// 数学
				cacheManager.updateObject('dao-tip',{shuxue:'has'})
			}else if(currentProduct.value ==2){
				// 英语
				cacheManager.updateObject('dao-tip',{yingyu:'has'})
			}
		}else{
			//游客
			tipFlag.value = '1';
		}
	}
	function onChangeTab(e) {
		console.log('e',e);	
		console.log(e.detail.current);
		if( cacheManager.get('auth')){
			infoData.zhangId = cacheManager.get('zhangInfo').zhangList[e.detail.current].zhangId
			cacheManager.updateObject('auth', {
				currentZhang: e.detail.current,
				zhangId: infoData.zhangId
			})
		}
	}

	function init(options) {
		if (cacheManager.get('auth')) {
			//会员 取auth
			selectZhang.value = cacheManager.get('auth');
			currentProduct.value = cacheManager.get('auth').cardId;
			//let currentObject = this.cacheZhangInfo.jieList.find(item => item.jieId == this.jieId);
			console.log(selectZhang.value);
			// 已登录
			if (selectZhang.value.firstLogin) {
				nextTick(() => {
					eggDialogRef.value.eggShow();
				})
			}
			// cacheManager.set('daoPageCache',{isCache:true})
			if(!cacheManager.get('daoPageCache').isCache){
					getZhangInfo()
				
			}else{
					console.log('shiyonghuancun');
					translateData(cacheManager.get('auth'))
					zhangList.value = cacheManager.get('zhangInfo').zhangList
					current.value = cacheManager.get('auth').currentZhang
					infoData.zhangId = cacheManager.get('zhangInfo').zhangList[current.value].zhangId
					recordZhangJie()	
			}
			
			// 已登录付费未支付选择返回 -> 恢复弹窗
			if (options.studyWithCatalgue) {
				// 展开弹窗
				nextTick(() => {
					catalogueRef.value.showPopup({zhangId: infoData.zhangId});
				}) 
			}
		} else {
			zhangId.value = options.zhangId
			nianji.value = options.nianji
			cardId.value = options.cardId
			tipFlag.value = options.tipFlag;
			currentProduct.value = options.cardId
			// 未登录 游客 
			getCommonZhang(options)
			getProjectImg()
		}
	}

	function getZhangInfo(data) {
		let req = {
			nianji: selectZhang.value.nianji,
			cardId: selectZhang.value.cardId,
			zhangId: selectZhang.value.zhangId,
		}
		userZhangInfo(req).then(res => {
			cacheManager.set('zhangInfo', res.data)
			let zhang = cacheManager.get('zhangInfo').zhangList.findIndex(zhang => zhang.zhangId == selectZhang
				.value.zhangId);
			if (zhang != -1) {
				cacheManager.updateObject('auth', {
					currentZhang: zhang
				})
			} else {
				cacheManager.updateObject('auth', {
					currentZhang: 0
				})
			}
			cacheManager.set('daoPageCache',{isCache:true})
			
			nextTick(() => {
				translateData(res.data)
				zhangList.value = res.data.zhangList
				current.value = cacheManager.get('auth').currentZhang
				infoData.zhangId = res.data.zhangList[current.value].zhangId
				recordZhangJie()
			})

		})
	}

	function getCommonZhang(data) {

		let req = {
			nianji: data.nianji,
			cardId: data.cardId,
			zhangId: data.zhangId,
		}
		getCommonZhangInfo(req).then(res => {
			translateData(res.data)
			youkeZhangInfoData.value =  res.data
			zhangList.value = res.data.zhangList
			current.value = 0
		})
	}

	function recordZhangJie() {
		let req = {
			nianji: selectZhang.value.nianji,
			userId: cacheManager.get('auth').userId,
			zhangId: infoData.zhangId,
			cardId: selectZhang.value.cardId,

		}
		userLocate(req).then(res => {

		})
	}

	function goPayPage() {
		uni.redirectTo({
			url: '/pages/pay/svip?cardId='+currentProduct.value
		})
	}

	function handleChangeZhang(data) {
		console.log(data);
		selectZhang.value = data;
		const authCode = getUserIdentity();
		if (authCode !== 'Visitor') {
			cacheManager.updateObject('auth', {
				zhangId: data.zhangId
			})
		}
		currentDuration.value = 0
		setTimeout(() => {
			current.value = data.number - 1
			nextTick(() => {
				currentDuration.value = 500
			})
		}, 100)
		//	init()
	}

	function goKaoshi(data) {
		uni.redirectTo({
			// url: `/pages/unitTest/index?jieNumber=` + data.number
			url: `/pages/unitTest/index?jieId=` + data.jieId
		})
	}

	function goLookShipin(data) {
		if (!cacheManager.get('auth')) {
			console.log('zhangList.value[0].jieList[0]',zhangList.value[0].jieList);
			let youkeData = {
				cardId:cardId.value,
				nianji:nianji.value,
				zhangId:zhangId.value,
				tipFlag:tipFlag.value,
				jieList:zhangList.value[0].jieList,
				jieName:zhangList.value[0].jieList[0].jieName
			}
			uni.redirectTo({
				url: '/pages/study/lookShipin?youkePageData=' + JSON.stringify(youkeData)
			})
		} else {
			uni.redirectTo({
				url: '/pages/study/lookShipin?jieId=' + data.jieId
			})
		}


	}

	function translateData(data) {
		gradeTerm.value = termMapping[data.cardId] +' · '+ gradeMapping[data.nianji]
	}

	function listClick(data) {
		if (!cacheManager.get('auth') && data.firstFlag != 1) {
			youkeDialogRef.value.handleShow();
			return;
		}
		const authCode = getUserIdentity();
		console.log('authCode', authCode);
		if (!(authCode == 'VIP' || data.firstFlag == 1)) {
			goPayDialogRef.value.handleShow();
			return false
		}
		if (data.type == 2) {
			// 最后一项
			goKaoshi(data)
		} else {
			goLookShipin(data)
		}
	}

	function handleCheckCatalogue(item) {
		catalogueRef.value.showPopup(item);
	}

	function clickGradeTerm() {
		// if(cacheManager.get('auth')){
		// 	cacheManager.updateObject('auth', {
		// 		currentZhang: 0
		// 	})
		// }
		uni.navigateTo({
			url: `/pages/selectGradesTerms/index?tipFlag=${tipFlag.value}`,
		})
	}
	// 游客弹窗---确定
	function ykConfirm() {
		uni.redirectTo({
			url: '/pages/login/index'
		});
	}

	function eggBtn() {
		console.log('点击：开启提分之旅');
		getProjectImg();
		cacheManager.updateObject('auth', {
			firstLogin: false
		})
	}
</script>
<style>
</style>