uniProject/pages/study/product/shuxue.vue

<template>
	<view class="ezy-study-page ezy-shuxue-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">{{options.numberStr}}</view>
			<view @click="handleCheckCatalogue" :class="getTitleClass(options.zhangName)">{{getZhangName(options.zhangName)}}</view>
			<view>
				<!-- 小岛 -->
				<view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
					@click="listClick(item, index)" :class="getClass(options.jieList,index,isVip)">
					<view v-if="isVip === 'VIP'">
						<!-- 序号 -->
						<view class="brand-icon" v-if="item.studyFlag===0">{{ item.number }}</view>
						<!-- 星星 -->
						<view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
						<!-- 动物类型 -->
						<view v-if="item.daeFlag && growthType ==0" class="animal-img dan-img"></view>
						<view v-if="item.daeFlag && growthType ==1" class="animal-img xiao-e-img"></view>
						<view v-if="item.daeFlag && growthType ==2" class="animal-img zhong-e-img"></view>
						<view v-if="item.daeFlag && growthType ==3" class="animal-img da-e-img"></view>
						<!-- 节名称 -->
						<view class="brand-content">{{ item.jieName }}</view>
					</view>
					<view v-if="isVip !== 'VIP'">
						<!-- 序号或锁 -->
						<view v-if="item.firstFlag ==1" class="brand-icon">{{ item.number }}</view>
						<view v-if="item.firstFlag !=1" class="brand-lock"></view>
						<!-- 动物类型 -->
						<view v-if="item.daeFlag && growthType ==0" class="animal-img dan-img"></view>
						<view v-if="item.daeFlag && growthType ==1" class="animal-img xiao-e-img"></view>
						<view v-if="item.daeFlag && growthType ==2" class="animal-img zhong-e-img"></view>
						<view v-if="item.daeFlag && growthType ==3" class="animal-img da-e-img"></view>
						<!-- 节名称 -->
						<view class="brand-content"> {{ item.jieName }} </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		getCurrentInstance,
		onMounted
	} from "vue";
	import cacheManager from "@/utils/cacheManager.js";
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	const $emit = defineEmits(['clickGradeTerm', 'onLeft', 'onRight', 'handleCheckCatalogue', 'listClick'])
	const props = defineProps({
		options: {
			type: Object,
		},
	})
	const isVip = getUserIdentity();
	const growthType = cacheManager.get('auth').growthType;
	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('');

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

	function listClick(data) {
		$emit('listClick', data);
	}
	// 获取章name
	function getZhangName(data){
		if(data.length <=9){
			return data
		}else{
			return getZhangContent(data);
		}
	}
	
	// 章换行显示
	function getZhangContent(data){
		console.log(data.length,'data.length');
		let length = data.length;
		// 初始将字符串平分成两半
		let halfLength = Math.floor(length / 2); 
		
		// 插入换行符
		let firstLine = data.slice(0, halfLength);
		let secondLine = data.slice(halfLength);
		console.log(firstLine + '\n' + secondLine,'firstLine + + secondLine');
		return firstLine + '\n' + secondLine;
	}
	
	// 章class
	function getTitleClass(data){
		console.log(data.length,'getTitleClass');
		if(data.length <=5){
			return 'chapter-title-box chapter-small-title-box'
		}else if(data.length <=9){
			return 'chapter-title-box chapter-middle-title-box'
		}else if(data.length >9){
			return 'chapter-title-box chapter-big-title-box'
		}
	}
	
	// 获取节class
	function getClass (data,index,isVip){
		let brandActive = '';
		if(isVip==='VIP'){
			brandActive = 'brand-active';
		}else if(index===0){
			brandActive = 'brand-active';
		}else{
			brandActive = '';
		}
		let indexLast = data.length -1;
		// 判断最后一个为名称是否为单元测试，是单元测试则返回ceshi-jie
		if(index===indexLast && data[data.length -1].jieName =='单元测试'){
			return 'ceshi-brand-item' +' '+ brandActive;
		}else{
			return getJieClass(data,index,brandActive)
		}
	}
	// 根据获取节字数获取class
	function getJieClass(data,index,active){
		let itemJieName = data[index].jieName.length;
		if(itemJieName > 7){
			return 'big-brand-item' +' '+ active;
		}else{
			return 'small-brand-item' +' '+ active;
		}
	}
	
	function translateData(data) {
		return gradeMapping[data.nianji] + termMapping[data.cardId]
	}

	function handleCheckCatalogue() {
		$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){
		if(data&&data.jieList.length>0){
			data.jieList.some(item => {
			    if (item.studyFlag == 0) {
			        item.daeFlag = true;
			        return true; // 返回 true 以终止 some 循环
			    }
			    return false;
			});
		}
	}
	watch(() => props.options, (newVal, oldVal) => {
	//	console.log('New options:', newVal);
	//	console.log('Old options:', oldVal);
		// 在这里可以根据新的 options 做一些操作，比如发起请求等
		gradeTerm.value = translateData(newVal);
		dataRecom(newVal)
	}, {
		deep: true,
		immediate: true
	});
</script>

<style>

</style>