uniProject/pages/study/index.vue

<template>
	<view class="ezy-study-page">
		<view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
		<view class="ezy-study-wrap" @touchstart="onTouchStart" @touchend="onTouchEnd">
			<view class="chapter-box" @click="handleCheckCatalogue">{{infoData.numberStr}}</view>
			<view class="chapter-title-box">{{infoData.zhangName}}</view>
			<view>
				<view class="brand-item" v-for="(item, index) in infoData.jieList" :key="item.jieId"
					@click="listClick(item, index)" :class="{ 'brand-active': index === 0 }">
					<view class="brand-icon">
						<template v-if="item.vipFlag">{{ index + 1 }}</template>
						<template v-else-if="index === 0">1</template>
					</view>
					<view class="brand-lock" v-if="item.vipFlag==0 && index !== 0"></view>
					<view class="brand-growth">
						<template v-if="item.vipFlag ==1">
							<template v-if="item.growth === 0">蛋</template>
							<template v-else-if="item.growth === 10">小鹅</template>
							<template v-else-if="item.growth === 20">中鹅</template>
							<template v-else-if="item.growth === 50">大鹅</template>
						</template>
					</view>
					<view class="brand-content">{{ item.jieName }}</view>
				</view>
			</view>
		</view>
		<!-- <uni-button  style="margin-top: 200px;display: block;" @click="goKaoshi">goKaoshi</uni-button>
	 -->
		<!-- <uni-button @click="handleCheckCatalogue">go catalogue</uni-button>
		<uni-button @click="goKaoshi">goKaoshi</uni-button>
		<!-- 蛋 -->
		<egg-dialog ref="eggDialogRef" @eggBtn="eggBtn"></egg-dialog>

		<catalogue ref="catalogueRef" :nianji="routeParams.nianji" :xueke="routeParams.xueke"
			@change-zhang="handleChangeZhang"></catalogue>
		<CustomTabBar></CustomTabBar>

	</view>
</template>

<script setup>
	import {
		userZhangFirstInfo,
		getCommonZhangFirstInfo,
		userZhangInfo,
		userLocate,
		getCommonZhangInfo
	} from "@/api/learnPlan.js"
	import {
		reactive,
		ref,
		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 {
		getAuth
	} from '@/utils/auth.js';
	import {
		useTabBarHistory
	} from '@/utils/emitEvents.js';
	import eggDialog from './eggDialog.vue'
	import {
		toast
	} from "../../utils/common";
	import cacheManager from "../../utils/cacheManager.js";

	const eggDialogRef = ref(null);

	const catalogueRef = ref(null);
	let gradeTerm = ref('');
	let startX = ref(0);
	let isSliding = ref(false);
	let endX = ref(0);
	const selectZhang = ref(null);
	let infoData = reactive({
		jieList: [],
		haveFlag: '',
		nianji: '',
		number: '',
		xueke: '',
		zhangId: '',
		zhangName: '',
		numberStr: '',
	});
	// 来自单元测试的路由参数缓存
	const gradeMapping = {
		1: '一年级',
		2: '二年级',
		3: '三年级',
		4: '四年级',
		5: '五年级',
		6: '六年级'
	};

	const termMapping = {
		1: '上',
		2: '下'
	};
	const routeParams = ref(null);

	onLoad((options) => {

		//	 appContext.config.globalProperties.$state
		// const state = appContext.config.globalProperties.$state;
		console.log(options)
		console.log(cacheManager);
		// 获取路由参数
		routeParams.value = options;

		if (getAuth()) {
			// 已登录
			// 选择年级进入调用此接口
			if (options.flag == 'selectGrades') {
				getZhangFirst()
			} else {
				getZhangInfo()
			}
			// 设置全局变量

			// 蛋
			// eggDialogRef.value.eggShow();

		} else {
			if (options.flag == 'selectGrades') {
				getCommonZhangFirst()
			} else {
				getCommonZhang();
			}
			// 未登录

		}
	})

	function getCommonZhang(data) {
		let req = data ? {
			nianji: selectZhang.value.nianji,
			xueke: selectZhang.value.xueke,
			zhangId: selectZhang.value.zhangId,
		} : {
			nianji: routeParams.value.nianji,
			xueke: routeParams.value.xueke,
			zhangId: routeParams.value.zhangId,
		};
		getCommonZhangInfo(req).then(res => {
			infoData.jieList = res.data.jieList
			infoData.haveFlag = res.data.haveFlag
			infoData.nianji = res.data.nianji
			infoData.number = res.data.number
			infoData.numberStr = res.data.numberStr
			infoData.xueke = res.data.xueke
			infoData.zhangId = res.data.zhangId
			infoData.zhangName = res.data.zhangName
			gradeTerm.value = translateData(res.data);
			useTabBarHistory().setTabBarStorage({
				nianji: res.data.nianji,
				zhangId: res.data.zhangId,
				xueke: res.data.xueke
			})
			cacheManager.set("zhangJieCacheInfo", res.data)
		})
	}


	function onTouchStart(event) {
		console.log(event.touches.length);
		isSliding.value = false
		if (event.touches.length === 1) {
			isSliding.value = true;
			startX.value = event.touches[0].pageX;
		} else {
			isSliding.value = false;
			event.preventDefault()
			return
		}
	}
	function onSwipeLeft(event) {
		console.log('用户左滑了');
	}
	function onSwipeRight(event) {
		console.log('用户又滑了');
	}
	function onTouchEnd(event) {
		if (isSliding.value) {
			const distanceX = event.changedTouches[0].clientX - startX.value
			if (distanceX > 0) {
				onSwipeLeft();
			} else if (distanceX < 0) {
				onSwipeRight();
			}
			isSliding.value = false
		}else{
			console.log(11111);
		}
	}



	function recordZhangJie() {
		let req = {
			nianji: routeParams.value.nianji,
			userId: JSON.parse(getAuth()).userId,
			zhangId: infoData.zhangId,
			xueke: routeParams.value.xueke,

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

		})
	}

	function getCommonZhangFirst() {
		let req = {
			nianji: routeParams.value.nianji,
			xueke: routeParams.value.xueke,

		}
		getCommonZhangFirstInfo(req).then(res => {
			infoData.jieList = res.data.jieList
			infoData.haveFlag = res.data.haveFlag
			infoData.nianji = res.data.nianji
			infoData.number = res.data.number
			infoData.numberStr = res.data.numberStr
			infoData.xueke = res.data.xueke
			infoData.zhangId = res.data.zhangId
			infoData.zhangName = res.data.zhangName
			gradeTerm.value = translateData(res.data);
			useTabBarHistory().setTabBarStorage({
				nianji: res.data.nianji,
				zhangId: res.data.zhangId,
				xueke: res.data.xueke
			})
			cacheManager.set("zhangJieCacheInfo", res.data)
		})
	}

	function getZhangFirst() {
		let req = {
			nianji: routeParams.value.nianji,
			xueke: routeParams.value.xueke,

		}
		userZhangFirstInfo(req).then(res => {
			infoData.jieList = res.data.jieList
			infoData.haveFlag = res.data.haveFlag
			infoData.nianji = res.data.nianji
			infoData.number = res.data.number
			infoData.numberStr = res.data.numberStr
			infoData.xueke = res.data.xueke
			infoData.zhangId = res.data.zhangId
			infoData.zhangName = res.data.zhangName
			gradeTerm.value = translateData(res.data);
			recordZhangJie()
			useTabBarHistory().setTabBarStorage({
				nianji: res.data.nianji,
				zhangId: res.data.zhangId,
				xueke: res.data.xueke
			})
		})
	}

	function getZhangInfo(data) {
		let req = data ? {
			nianji: selectZhang.value.nianji,
			xueke: selectZhang.value.xueke,
			zhangId: selectZhang.value.zhangId,
		} : {
			nianji: routeParams.value.nianji,
			xueke: routeParams.value.xueke,
			zhangId: routeParams.value.zhangId,
		};
		userZhangInfo(req).then(res => {
			infoData.jieList = res.data.jieList
			infoData.haveFlag = res.data.haveFlag
			infoData.nianji = res.data.nianji
			infoData.number = res.data.number
			infoData.numberStr = res.data.numberStr
			infoData.xueke = res.data.xueke
			infoData.zhangId = res.data.zhangId
			infoData.zhangName = res.data.zhangName
			gradeTerm.value = translateData(res.data);
			recordZhangJie()
			useTabBarHistory().setTabBarStorage({
				nianji: res.data.nianji,
				zhangId: res.data.zhangId,
				xueke: res.data.xueke
			})
		})
	}

	function translateData(data) {
		return gradeMapping[data.nianji] + termMapping[data.xueke]
	}

	function handleChangeZhang(data) {
		console.log("章", data);
		selectZhang.value = data;
		getZhangInfo(true)
	}

	function goKaoshi(data) {
		let zhangId = selectZhang.value ? selectZhang.value.zhangId : infoData.zhangId;
		let nianji = routeParams.value.nianji;
		let xueke = routeParams.value.xueke;
		uni.navigateTo({
			url: `/pages/unitTest/index?jieId=${data.jieId}&zhangId=${zhangId}&nianji=${nianji}&xueke=${xueke}`
		})
	}

	function goLookShipin(data) {

		data.progressMarkers = [{
			offset: 30,
			isCustomized: true,
			coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png',
			title: '变式1',
			time: '00:00:30',
			describe: 'test string',
		}, {
			offset: 120,
			isCustomized: true,
			coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
			title: '变式2',
			time: '00:02:00',
			describe: 'test string',
		}, {
			offset: 300,
			isCustomized: true,
			coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
			title: '变式3',
			time: '00:05:00',
			describe: 'test string',
		}]
		data.zhangId = infoData.zhangId
		data.nianji = infoData.nianji
		data.xueke = infoData.xueke
		const pageData = {
			//	videoId:data.videoId,
			videoId: 'b997f16cb9cb474cb93526cff77d8801',
			progressMarkers: [{
				offset: 30,
				isCustomized: true,
				coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png',
				title: 'test title',
				describe: 'test string',
			}, {
				offset: 150,
				isCustomized: true,
				coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
				title: 'test title',
				describe: 'test string',
			}, {
				offset: 250,
				isCustomized: true,
				coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
				title: 'test title',
				describe: 'test string',
			}, {
				offset: 550,
				isCustomized: true,
				coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
				title: 'test title',
				describe: 'test string',
			}, {
				offset: 320,
				isCustomized: true,
				coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
				title: 'test title',
				describe: 'test string',
			}, {
				offset: 650,
				isCustomized: true,
				coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
				title: 'test title',
				describe: 'test string',
			}],
		}
		uni.navigateTo({
			//url: '/pages/study/lookShipin?studyData=' + JSON.stringify(pageData)
			url: '/pages/study/lookShipin?studyData=' + JSON.stringify(data)
		})
	}


	function listClick(data, index) {
		if (!getAuth()) {
			toast("当前为游客模式请登录！")
			uni.redirectTo({
				url: '/pages/login/index'
			})
			return;
		}

		// if(index !=0&&data.jieId!=79){

		// 			toast("付费章节！")
		// 			return false
		// }

		if (!data.vipFlag) {
			toast("付费章节！")
			return false
		}
		if (index == infoData.jieList.length - 1) {
			// 最后一项
			goKaoshi(data)
		} else {
			goLookShipin(data)
		}
	}

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

	function clickGradeTerm() {
		uni.navigateTo({
			url: `/pages/selectGradesTerms/index?&nianji=${routeParams.value.nianji}&xueke=${routeParams.value.xueke}`,
		})
	}

	function eggBtn() {
		console.log('点击：开启提分之旅');
	}
</script>

<style>

</style>