uniProject/pages/study/product/shuxue.vue

<template>
	<view>
		<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 class="chapter-title-box">{{options.zhangName}}</view>
			<view>
				<view class="brand-item" v-for="(item, index) in options.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>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		getCurrentInstance,
		onMounted
	} from "vue";
	const $emit = defineEmits(['clickGradeTerm', 'onLeft', 'onRight', 'handleCheckCatalogue'])
	const props = defineProps({
		options: {
			type: Object,
		},
	})
	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 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');
		$emit('onLeft');
	}

	function onSwipeRight(event) {
		console.log('22222');
		$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');
		}
	}
	watch(() => props.options, (newVal, oldVal) => {
		console.log('New options:', newVal);
		console.log('Old options:', oldVal);
		// 在这里可以根据新的 options 做一些操作，比如发起请求等
		gradeTerm.value = translateData(newVal);
	}, {
		deep: true,
		immediate: true
	});
</script>

<style>

</style>