uniProject/pages/wordList/wordList.vue

<template>

	<view class="word-list-page">
		<view class="icon-title-navBar-box">
			<view @click="goBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{listData.title || ''}}</text>
		</view>
		<view class="ezy-tab-border">
			<view class="ezy-border-body">
          <view  class="word-title-box" style="display: flex;overflow-x: auto;" v-if="listData.jieNumberList && listData.jieNumberList.length >0">
					<view :id="'item-' + item.jieId" class="title-item" v-for="(item,index) in listData.jieNumberList" @click="handleTitleClick(item)"
						:key="item.jieId" :class="{active: listData.activeIndex == index}">Unit{{item.number}}</view>
          </view>

				<swiper class="word-list-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false" :current="listData.activeIndex"
					@change="handleSwiperChange" :disable-touch="!swiperData.isAllowed">
					<swiper-item class="word-list-swiper-item" v-for="citem in unitList" :key="citem.jieId" @touchstart="handleTouchStart"
						@touchend="handleTouchEnd">
						<view class="word-list-body" v-if="citem.wordList && citem.wordList.length > 0">
							<!-- num -->
							<view class="word-num-box">
								<icon></icon><text>{{citem.studyCount || 0}}/{{citem.count || 0}}词</text>
							</view>

							<!-- 单词 -->
							<view class="word-list-item" v-for="(item,index) in citem.wordList" :key="index"
								@click="toWord(item)" :class="{active: item.wcFlag == 1}">
								<view class="item-word">
									<view class="word-text">
										<text v-for="(word, wordIndex) in item.chaifen" :key="wordIndex"
											class="word-color">
											{{ word }}
										</text>
									</view>
									<view class="phonetic-alphabet">{{item.yinbiao || ''}}</view>
								</view>
								<view class="item-explain">
									<view class="item-explain-content">
										<view class="explain-text" v-for="(meaning, meaningIndex) in item.jianyi"
											:key="meaningIndex">{{meaning}}</view>
									</view>
								</view>
								<view class="item-arrow">
									<icon></icon>
								</view>
							</view>
						</view>
						<!-- 没有单词 -->
						<view class="no-word-box" v-else>
							暂无单词
						</view>
					</swiper-item>
				</swiper>



			</view>
		</view>
		<tip-big-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :imgShow="true"></tip-big-dialog>
		<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
	</view>
</template>

<script setup>
	import {reactive,ref,nextTick} from "vue";
	import {toast,getDataFromStr,useActiveDomIntoView} from "@/utils/common";
	import {onLoad} from "@dcloudio/uni-app";
	import {getWordZhangList,getWordZhangListYK,} from "@/api/word.js";
	import cacheManager from '@/utils/cacheManager.js';
	import tipBigDialog from '@/components/dialog/tipBigDialog.vue';
	import {useSwiper} from "@/utils/useSwiper";
	import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue'


	const goPayDialogRef = ref(null);
	const listData = reactive({
		jieNumberList: [], //节名称
		title: '', // 版本+年级+学期
		wordList: [], // 单词列表，默认值设为空数组
		activeIndex: 0,
	});
	let wordJieId = ref(null);
	let routerOpt = ref(false);
	let wordLeft = ref(0);
	const youkeDialogRef = ref(null);
	const unitList = ref([])
	const info = reactive({
		levelId: null,
		zhangId: null,
	})
	const tipContent = '是否前往开通付费？';

	const {
		swiperData,
		handleTouchStart,
		handleTouchEnd,
		userCode
	} = useSwiper(listData, (userCode) => {
		// 非VIP
		if (userCode == 'Not-Vip') {
			goPayDialogRef.value.handleShow();
		}else if(userCode == 'Visitor'){
			// 游客
			youkeDialogRef.value.handleShow();
		}
		
	});

	onLoad((options) => {
		routerOpt = options;
		if (!cacheManager.get('auth')) {
			// 游客
			const youkeData = JSON.parse(routerOpt.youkePageData)
			info.levelId = youkeData.levelId;
			info.zhangId = youkeData.youkeZhangId;
			wordJieId = youkeData.jieId
			getWordListDataYk();
		} else {
			// 获取缓存
			[info.levelId, info.zhangId] = getDataFromStr(cacheManager.get('auth').levelId)
			// 非游客
			wordJieId = routerOpt.jieId
			getWordListData();
		}
	});

	// Swiper 切换
	function handleSwiperChange(e) {

		listData.activeIndex = e.detail.current;
		if (!swiperData.isAllowed) {
			// 不满足条件时回退到原索引
			nextTick(() => {
				listData.activeIndex = 0; // 强制回退
			});
			swiperData.isAllowed = false; // 重置状态
		}
		if (userCode == 'VIP') {
		  findWordLeft(listData.activeIndex)
		  updataShuju(listData.jieNumberList[listData.activeIndex])
		}
	}

	// 游客弹窗---确定
	function ykConfirm() {
		uni.redirectTo({
			url: '/pages/login/index'
		});
	}

	// 返回
	function goBack() {
		if (!cacheManager.get('auth')) {
			const youkeData = JSON.parse(routerOpt.youkePageData)
			// 游客
			uni.redirectTo({
				url: `/pages/study/index?levelId=${youkeData.levelId}&typeId=${youkeData.typeId}&subjectId=${youkeData.subjectId}&tipFlag=${youkeData.tipFlag}&youkeZhangId=${youkeData.youkeZhangId}&jieId=${youkeData.jieId}`
			})
		} else {
			// 非游客
			uni.redirectTo({
				url: `/pages/study/index`
			})
		}

	}

	// 修改缓存zid  用于定位岛
	function updataCache(data) {
		cacheManager.updateObject('zhangInfo', {
			curZid: data
		})
	}

	//tab click
	function handleTitleClick(item) {
		if (!cacheManager.get('auth')) {
			youkeDialogRef.value.handleShow();
		} else {
			updataShuju(item)
		}
	}

	// 修改数据 &&定位岛
	function updataShuju(data){
		// 非游客
		wordJieId = data.jieId;
		// 修改缓存zid  用于定位岛
		updataCache(data.zhangZid)
		getWordListData();
	}

	// 返回节index
	function findIndexByJieId(list, jieId) {
		const findIndex = list.findIndex(item => item.jieId == jieId)
		// unit滚动到指定位置
		findWordLeft(findIndex)
		return findIndex;
	}

	// 获取滚动距离
	function findWordLeft(data) {
    useActiveDomIntoView('.word-title-box','.title-item.active')
		// wordLeft.value = data * 80;
		// return wordLeft.value;
	}

	// 非游客接口数据
	function getWordListData() {
		const opt = {
			levelId: info.levelId,
			zhangId: info.zhangId,
			jieId: wordJieId
		};
		getWordZhangList(opt).then(res => {
			if (res.code === 0) {
				listData.title = res.data.title;
				unitList.value = res.data.jieWordsList;
				listData.jieNumberList = res.data.jieNumberList;
				unitList.value.forEach(item => {
					if (item.jieId == wordJieId) {
						listData.activeIndex = findIndexByJieId(listData.jieNumberList, wordJieId);
					}
				})
			}
		}).catch(err => {
			toast("获取单词列表数据失败");
		});
	}

	// 游客接口数据
	function getWordListDataYk() {
		const opt = {
			levelId: info.levelId,
			zhangId: info.zhangId,
			jieId: wordJieId
		};
		getWordZhangListYK(opt).then(res => {
			if (res.code === 0) {
				listData.title = res.data.title;
				unitList.value = res.data.jieWordsList;
				listData.jieNumberList = res.data.jieNumberList;
				unitList.value.forEach(item => {
					if (item.jieId == wordJieId.value) {
						listData.activeIndex = findIndexByJieId(listData.jieNumberList, wordJieId);
					}
				})
			}
		}).catch(err => {
			toast("获取单词列表数据失败");
		});
	}

	// 单词
	function toWord(data) {
		if (!cacheManager.get('auth')) {
			// 游客
			const youkeData = JSON.parse(routerOpt.youkePageData)
			uni.redirectTo({
				url: `/pages/newEnglish/index?jieId=${wordJieId}&wordId=${data.id}&levelId=${youkeData.levelId}&typeId=${youkeData.typeId}&subjectId=${youkeData.subjectId}&tipFlag=${youkeData.tipFlag}&youkeZhangId=${youkeData.youkeZhangId}`
			})
		} else {
			// 非游客
			uni.redirectTo({
				url: `/pages/newEnglish/index?jieId=${wordJieId}&wordId=${data.id}`
			})
		}
	}

	// 去支付
	function goPayPage() {
		let zhangInfoLocal = cacheManager.get('zhangInfo')
		if (!zhangInfoLocal.cardId) {
			toast("cardId 丢失请重新选择学科LevelId");
			return false
		}
		uni.redirectTo({
			url: '/pages/mall/mallPage?cardId=' + zhangInfoLocal.cardId + '&from=daoPage' + '&subjectId=' +
				zhangInfoLocal.subjectId
		})
	}
</script>