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">
				<scroll-view scroll-x="true" :scroll-left='wordLeft' class="word-title-box"
				v-if="listData.jieNumberList && listData.jieNumberList.length >0">
					<view :id="'item-' + item.jieId" class="title-item" v-for="(item,index) in listData.jieNumberList" :key="item.jieId"
					@click="handleTitleClick(item)" :class="{active: listData.activeIndex == index}">Unit{{item.number}}</view>
				</scroll-view>
				<view class="word-num-box"><icon></icon><text>{{listData.studyCount || 0}}/{{listData.count || 0}}词</text></view>
				<view class="word-list-body" v-if="listData.wordList && listData.wordList.length > 0">
				<!-- 单词 -->
					<view class="word-list-item" v-for="(item,index) in listData.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>
		</view>
	</view>
</template>

<script setup>
import {reactive,ref} from "vue";
import {toast} from "@/utils/common";
import {onLoad} from "@dcloudio/uni-app";
import {getWordList,getWordListYk} from "@/api/word.js";
import cacheManager from '@/utils/cacheManager.js';

const listData = reactive({
    count: 0, // 总数，默认值设为 0
    studyCount: 0, // 已学总数，默认值设为 0
    jieNumberList: [],//节名称
    title: '', // 版本+年级+学期
    wordList: [], // 单词列表，默认值设为空数组
	activeIndex: 0,
});
let wordJieId = ref(null); 
let routerOpt = ref(false);
let wordLeft =  ref(0);

onLoad((options) => {
	routerOpt = options;
	if (!cacheManager.get('auth')) {
		// 游客
		const youkeData = JSON.parse(routerOpt.youkePageData)
		wordJieId = youkeData.jieId
		getWordListDataYk();
	} else {
		// 非游客
		wordJieId = routerOpt.jieId
		getWordListData();
	}
});

// 返回
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`
		})
	}
	
}

function handleTitleClick(item){
	wordJieId = item.jieId;
	if (!cacheManager.get('auth')) {
		getWordListDataYk();
	}else {
		// 非游客
		getWordListData();
	}
}
function findIndexByJieId(list, jieId){
	const findIndex=list.findIndex(item => item.jieId == jieId)
	wordLeft.value = findIndex*40;
	return findIndex;
}
function getWordListData() {
    const opt = {
        jieId: wordJieId
    };
    getWordList(opt).then(res => {
        if (res.code === 0) {
            listData.count = res.data.count;
            listData.studyCount = res.data.studyCount;
            listData.jieNumberList = res.data.jieNumberList;
            listData.title = res.data.title;
            listData.wordList = res.data.wordList;
			listData.activeIndex = findIndexByJieId(listData.jieNumberList,wordJieId);
        }
    }).catch(err => {
        toast("获取单词列表数据失败");
    });
}

function getWordListDataYk() {
    const opt = {
        jieId: wordJieId
    };
    getWordListYk(opt).then(res => {
        if (res.code === 0) {
            listData.count = res.data.count;
            listData.studyCount = res.data.studyCount;
            listData.jieNumberList = res.data.jieNumberList;
            listData.title = res.data.title;
            listData.wordList = res.data.wordList;
			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=${youkeData.jieId}&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=${routerOpt.jieId}&wordId=${data.id}`
		})
	}
}
</script>