单词列表页

pages/wordList/wordList.vue

@@ -1,22 +1,129 @@
 <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">{{listData.jieName || ''}}</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)">
+						<view class="item-word">
+							<view class="word-text">
+								<text v-for="(word, wordIndex) in item.chaifen[0].split(',')" 
+								: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>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
+<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
+    jieName: '',//节名称
+    title: '', // 版本+年级+学期
+    wordList: [] // 单词列表，默认值设为空数组
+});
+
+let routerOpt = ref(false);
+
+onLoad((options) => {
+	console.log('options555',options);
+	routerOpt = options;
+	if (!cacheManager.get('auth')) {
+		// 游客
+		getWordListDataYk();
+	} else {
+		// 非游客
+		getWordListData();
 	}
-</script>
+});
 
-<style>
+// 返回
+function goBack(){
+	if (!cacheManager.get('auth')) {
+		// 游客
+		uni.redirectTo({
+			url: `/pages/study/index?levelId=${routerOpt.levelId}&typeId=${routerOpt.typeId}&subjectId=${routerOpt.subjectId}&tipFlag=${routerOpt.tipFlag}&youkeZhangId=${routerOpt.youkeZhangId}&jieId=${routerOpt.jieId}`
+		})
+	} else {
+		// 非游客
+		uni.redirectTo({
+			url: `/pages/study/index`
+		})
+	}
+	
+}
+
+function getWordListData() {
+    const opt = {
+        jieId: routerOpt.jieId
+    };
+    getWordList(opt).then(res => {
+        if (res.code === 0) {
+            listData.count = res.data.count;
+            listData.studyCount = res.data.studyCount;
+            listData.jieName = res.data.jieName;
+            listData.title = res.data.title;
+            listData.wordList = res.data.wordList;
+        }
+    }).catch(err => {
+        toast("获取单词列表数据失败");
+    });
+}
 
-</style>
+function getWordListDataYk() {
+    const opt = {
+        jieId: routerOpt.jieId
+    };
+    getWordListYk(opt).then(res => {
+        if (res.code === 0) {
+            listData.count = res.data.count;
+            listData.studyCount = res.data.studyCount;
+            listData.jieName = res.data.jieName;
+            listData.title = res.data.title;
+            listData.wordList = res.data.wordList;
+        }
+    }).catch(err => {
+        toast("获取单词列表数据失败");
+    });
+}
+
+// 单词
+function toWord(data){
+	if (!cacheManager.get('auth')) {
+		// 游客
+		uni.redirectTo({
+			url: `/pages/newEnglish/index?jieId=${routerOpt.jieId}&wordId=${data.id}&levelId=${routerOpt.levelId}&typeId=${routerOpt.typeId}&subjectId=${routerOpt.subjectId}&tipFlag=${routerOpt.tipFlag}&youkeZhangId=${routerOpt.youkeZhangId}&jieId=${routerOpt.jieId}`
+		})
+	} else {
+		// 非游客
+		uni.redirectTo({
+			url: `/pages/newEnglish/index?jieId=${routerOpt.jieId}&wordId=${data.id}`
+		})
+	}
+}
+</script>