uniProject/pages/study/product/yingyuNew.vue

<template>
	<view class="ezy-study-page ezy-cjdc-study-page">
		<view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
		<view class="ezy-study-wrap" @touchstart="onTouchStart" @touchend="onTouchEnd">
			<img class="study-name-img" :src="growthImg" />
			<!-- <img class="study-book-img" :src="bookImg"/> -->
			<view class="study-book-img" @click="handleCheckCatalogue">
				<view class="chapter-title-box">{{zhangName}}</view>
			</view>

			<!-- 动物类型 -->
			<view v-if="growthType!=null" :class="currentGrowth()"></view>
			<view>
				<!-- 小岛 -->

				<view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
					@click="listClick(item, index,options)" :class="getClass(options,index,isVip,item)">
					<view v-if="isVip === 'VIP'">
						<!-- 序号 -->
						<!-- 	<view class="brand-icon">{{ item.number }}</view> -->
						<!-- 星星 -->
						<view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
						<!-- 箭头 -->
						<view class="brand-arrow" v-if="animalNum == index"></view>
						<!-- 节名称 -->
						<view class="brand-content">
							<view class="content-text">{{ item.jieName }}</view>
						</view>
					</view>
					<view v-if="isVip == 'Not-Vip'">
						<!-- 序号 -->
						<!-- 			<view  class="brand-icon">{{ item.number }}</view> -->
						<!-- 星星 -->
						<view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
						<view v-if="item.number !=1" class="brand-lock"></view>
						<!-- 箭头 -->
						<view v-if="animalNum == index && isVip != 'Visitor'" class="brand-arrow"></view>
						<!-- 节名称 -->
						<view class="brand-content">
							<view class="content-text">{{ item.jieName }}</view>
						</view>

					</view>
					<view v-if="isVip == 'Visitor' && appleTishen =='true'&&item.type!=2 ">
						<!-- 锁 -->
						<!-- 				<view  class="brand-icon">{{ item.number }} </view> -->
						<!-- 锁 -->
						<!-- 节名称 -->
						<view class="brand-content">
							<view class="content-text">{{ item.jieName }} </view>
						</view>
					</view>
					
					<view v-if="isVip == 'Visitor'&& appleTishen =='false'">
						<!-- 锁 -->
						<!-- 				<view  class="brand-icon">{{ item.number }} </view> -->
						<!-- 锁 -->
						<view v-if="item.number !=1" class="brand-lock"></view>
						<!-- 箭头 -->
						<view v-if="animalNum == index && isVip != 'Visitor'" class="brand-arrow"></view>
						<!-- 节名称 -->
						<view class="brand-content">
							<view class="content-text">{{ item.jieName }} </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		getCurrentInstance,
		nextTick,
		onMounted
	} from "vue";
	import cacheManager from "@/utils/cacheManager.js";
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import {
		onShow
	} from '@dcloudio/uni-app';
	const growthType = ref(null);
		const appleTishen = ref(null);
	const growthImg = ref(null);
	const bookImg = ref(null);
	const youkeImageBook = ref(null);
	const $emit = defineEmits(['clickGradeTerm', 'onLeft', 'onRight', 'handleCheckCatalogue', 'listClick'])
	const props = defineProps({
		options: {
			type: Object,
		},
		youkeImage: {
			String: '',
		},
		youkeImageBook: {
			String: '',
		},
		gradeTerm: {
			type: String,
		},
		weizhiIndex: {
			type: String,
		},
		zhangName: {
			type: String,
		},
		currentSwiperIndex: {
			type: Number,
			default: 0
		}
	})
	onShow(() => {
		growthType.value = cacheManager.get('auth') ? cacheManager.get('auth').growthType : props.youkeImage
		growthImg.value = cacheManager.get('auth') ? cacheManager.get('zhangInfo').icon : props.youkeImage;
		// 待修改  wgy看这
		bookImg.value = cacheManager.get('auth') ? cacheManager.get('zhangInfo').icon : props.youkeImage;
		youkeImageBook.value = cacheManager.get('auth') ? cacheManager.get('zhangInfo').zhangIcon : props
			.youkeImageBook;
			appleTishen.value = cacheManager.get('youkeTishen').toString()
			console.log(appleTishen.value);

	})
	const isVip = getUserIdentity();
	console.log('isVip', isVip);
	const gradeMapping = {
		1: '一年级',
		2: '二年级',
		3: '三年级',
		4: '四年级',
		5: '五年级',
		6: '六年级'
	};

	const termMapping = {
		1: ' 数学',
		2: ' 英语'
	};

	let startX = ref(0);
	let isSliding = ref(false);
	let endX = ref(0);
	let gradeTerm = ref('');
	let animalNum = ref(0);

	function clickGradeTerm() {
		$emit('clickGradeTerm');
	}

	function aaa() {
		console.log('123123123');
	}

	function listClick(data, index, data2) {

		nextTick(() => {
			animalNum.value = index
		})
		cacheManager.updateObject('zhangInfo', {
			weizhiIndex: index
		})
		setTimeout(() => {
			$emit('listClick', data, data2, index);
		}, 300)

	}

	function currentGrowth(data) {
		if (growthType.value == 0) {
			return 'animal-img dan-img'
		} else if (growthType.value == 1) {
			return 'animal-img xiao-e-img'
		} else if (growthType.value == 2) {
			return 'animal-img zhong-e-img'
		} else {
			return 'animal-img da-e-img'
		}
	}

	// 获取节class
	function getClass(data, index, isVip, item) {

		let brandActive = '';
		if (isVip === 'VIP') {
			brandActive = 'brand-active';
		} else if (item.firstFlag == 1 && isVip == 'Not-Vip') {
			brandActive = 'brand-active';
		} else if (appleTishen.value == 'true' && isVip == 'Visitor') {
			brandActive = 'brand-active';
		} else if (item.firstFlag == 1 && isVip == 'Visitor' && item.type == 1) {
			brandActive = 'brand-active';
		} else {
			brandActive = '';
		}
		let indexLast = data.jieList.length - 1;
		
		if (appleTishen.value == 'true' && isVip == 'Visitor') {
			// 判断最后一个为名称是否为单元测试，是单元测试则返回ceshi-jie
			if (index === indexLast && data.jieList[data.jieList.length - 1].jieName == 'Testing') {
				return ''
			} else {
				return brandActive;
			}
		} else {
			// 判断最后一个为名称是否为单元测试，是单元测试则返回ceshi-jie
			if (index === indexLast && data.jieList[data.jieList.length - 1].jieName == 'Testing') {
				return 'ceshi-brand-item' + ' ' + brandActive;
			} else {
				return brandActive;
			}
		}
	}

	function handleCheckCatalogue() {
		if (appleTishen.value == 'true' && isVip == 'Visitor') {
			return false
		}
		$emit('handleCheckCatalogue');
	}

	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('11111');
		if (cacheManager.get('auth')) {
			$emit('onLeft');
		}
	}

	function onSwipeRight(event) {
		//console.log('22222');
		if (cacheManager.get('auth')) {
			$emit('onRight');
		}

	}

	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('error');
		}
	}

	function dataRecom(data) {
		// const index = data.jieList.findIndex(item => item.studyFlag == 0);

		// if (index !== -1) {
		// 	data.jieList[index].daeFlag = true;
		// 	animalNum.value = index
		// }
		animalNum.value = cacheManager.get("zhangInfo").weizhiIndex || 0
	}
	watch(() => props.options, (newVal, oldVal) => {
		//	console.log('New options:', newVal);
		//	console.log('Old options:', oldVal);
		// 在这里可以根据新的 options 做一些操作，比如发起请求等
		dataRecom(newVal)
	}, {
		deep: true,
		immediate: true
	});
	watch(
		() => props.currentSwiperIndex,
		(newVal, oldVal) => {
			console.log('swiper 索引变化:', newVal)
			animalNum.value  =0
			// 执行你的方法
			//yourMethodName(newVal)
		}
	)
	watch(() => props.gradeTerm, (newVal, oldVal) => {
		//	console.log('New options:', newVal);
		//	console.log('Old options:', oldVal);
		// 在这里可以根据新的 options 做一些操作，比如发起请求等
		gradeTerm.value = newVal
	
	}, {
		deep: true,
		immediate: true
	});
</script>

<style>

</style>