uniProject/pages/newEnglish/index.vue

<template>
	<view class="ezy-exam-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
		<view class="ezy-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">学习</text>
		</view>
		<view>
			<template v-for="item in data.wordList">
				<mainCardVue :active-word="data.activeWord" :active-words="activeWords" v-if="item.id == data.activeId"
					:key="item.id">
				</mainCardVue>
			</template>
		</view>
		<view>
			底部
			<view>收藏</view>
			<view @click="prevWord" v-if="!isFirst">上一词</view>
			<view @click="nextWord" v-if="!isLast">下一词</view>
			<view v-if="isLast">完成</view>
		</view>
	</view>
</template>

<script setup>
	import mainCardVue from "./components/mainCard.vue";
	import {
		ref,
		reactive,
		computed
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as httpApi from "@/api/word.js"

	function courseBjFun() {
		return 'static/images/course/couse-shuxue-bj.png'
	}

	function chunkArray(arr, chunkSize) {
		const result = [];
		for (let i = 0; i < arr.length; i += chunkSize) {
			result.push(arr.slice(i, i + chunkSize));
		}
		return result;
	}

	function handleBack() {}

	const data = reactive({
		jieId: null, // 节/单元ID
		activeId: null, // 当前单词
		subjectId: null, // 学科ID
		levelId: null, // 等级
		jieName: '', // 节/单元名称
		title: '', // 版本+年级+学期
		studyCount: 0, // 已学习总数
		wordList: [], // 单词列表
		arrayList: [], // 整合数据
		activeWord: null, // 单词详情数据
		collectFlag: 0, // 收藏状态
	})

	onLoad(({
		jieId,
		wordId
	}) => {
		data.jieId = jieId;
		data.activeId = wordId;
		// 获取单词列表数据
		initWordInfo();
	})

	// 是否是最后一题
	const isLast = computed(() => {
		if (!data.wordList.length) {
			return false
		}
		return data.activeId == data.wordList[data.wordList.length - 1].id;
	})
	const isFirst = computed(() => {
		if (!data.wordList.length) {
			return false
		}
		return data.activeId == data.wordList[0].id;
	})

	const activeWords = computed(() => {
		if (!data.activeId) {
			return null
		}
		return data.arrayList.find(item => item.some(cit => cit.id == data.activeId))
	})

	function nextWord() {
		const index = data.wordList.findIndex(item => item.id == data.activeId);
		if (index < data.wordList.length - 1) {
			uni.redirectTo({
			  url: `/pages/newEnglish/index?jieId=${data.jieId}&wordId=${data.wordList[index + 1].id }`
			})
		}
	}

	function prevWord() {
		const index = data.wordList.findIndex(item => item.id == data.activeId);
		if (index > 0) {
			uni.redirectTo({
			  url: `/pages/newEnglish/index?jieId=${data.jieId}&wordId=${data.wordList[index - 1].id }`
			})
		}
	}

	function initWordInfo() {
		httpApi.getWordInfo({
			jieId: data.jieId,
			wordId: data.activeId
		}).then(res => {
			data.activeWord = res.data;
			data.wordList = res.data.danciList; // 单词组
			data.collectFlag = res.data.collectFlag; // 收藏状态
			if (data.wordList.length) {
				data.arrayList = chunkArray(data.wordList, 5); // 将1维单词数组转换为2维数组
			}
		})
	}
</script>

<style>

</style>