学习记录列表页

pages/my/learnRecord.vue

@@ -0,0 +1,378 @@
+<template>
+	<view class="learn-record-page">
+		<view class="icon-title-navBar-box">
+			<view @click="goBack" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">本书学习记录</text>
+		</view>
+		<view class="ezy-tab-border">
+
+			<uni-segmented-control :current="xxjlData.current" :values="xxjlData.items" active-color="#3A7FE9"
+				@clickItem="onChangeTab" class="ezy-tab-box" />
+			<view>
+				<view v-if="xxjlData.current == 0">
+					<scroll-view scroll-y="true" refresher-enabled="true" @scrolltolower="onScrolltolower"
+						:refresher-triggered="xxjlData.weizhangwo.loading" :refresher-threshold="50"
+						refresher-background="transparent" @refresherrefresh="onRefresh" class="learn-record-scroll-view">
+						<!--数学-->
+						<uni-list>
+							<uni-list-item v-for="(item,index) in xxjlData.weizhangwo.list" :key="index"
+								class="word-list-item">
+								<template v-slot:body>
+									<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>
+								</template>
+							</uni-list-item>
+							<uni-load-more :status="xxjlData.weizhangwo.state" @click="getMore(2)"
+								:contentText="xxjlData.weizhangwo.contentText">
+							</uni-load-more>
+						</uni-list>
+					</scroll-view>
+				</view>
+				<view v-if="xxjlData.current == 1">
+					<scroll-view scroll-y="true" refresher-enabled="true" @scrolltolower="onScrolltolower"
+						:refresher-triggered="xxjlData.yizhangwo.loading" :refresher-threshold="50"
+						refresher-background="transparent" @refresherrefresh="onRefresh" class="learn-record-scroll-view">
+						<!--数学-->
+						<uni-list>
+							<uni-list-item v-for="(item,index) in xxjlData.yizhangwo.list" :key="index"
+								class="word-list-item">
+								<template v-slot:body>
+									
+								</template>
+							</uni-list-item>
+							<uni-load-more :status="xxjlData.yizhangwo.state" @click="getMore(1)"
+								:contentText="xxjlData.yizhangwo.contentText">
+							</uni-load-more>
+						</uni-list>
+					</scroll-view>
+				</view>
+				<view v-if="xxjlData.current == 2">
+					<scroll-view scroll-y="true" refresher-enabled="true" @scrolltolower="onScrolltolower"
+						:refresher-triggered="xxjlData.shouchang.loading" :refresher-threshold="50"
+						refresher-background="transparent" @refresherrefresh="onRefresh" class="learn-record-scroll-view">
+						<!--数学-->
+						<uni-list>
+							<uni-list-item v-for="(item,index) in xxjlData.shouchang.list" :key="index"
+								class="word-list-item">
+								<template v-slot:body>
+									<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>
+								</template>
+							</uni-list-item>
+							<uni-load-more :status="xxjlData.shouchang.state" @click="getMore(0)"
+								:contentText="xxjlData.shouchang.contentText">
+							</uni-load-more>
+						</uni-list>
+					</scroll-view>
+				</view>
+			</view>
+		</view>
+		<CustomTabBar></CustomTabBar>
+	</view>
+</template>
+
+<script setup>
+	import {reactive,ref} from "vue";
+	import {getWordList} from "@/api/word.js"
+	import {onLoad} from "@dcloudio/uni-app";
+	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	const xxjlData = reactive({
+		items: [ '未掌握', '已掌握', '收藏'],
+		current: 0,
+		count: 0, // 总数，默认值设为 0
+		studyCount: 0, // 已学总数，默认值设为 0
+		shouchang: {
+			page: 0,
+			list: [],
+			loading: false,
+			state: 'more',
+			contentText: {
+				contentdown: '查看更多',
+				contentrefresh: '加载中',
+				contentnomore: '没有更多'
+			}
+
+		},
+		yizhangwo: {
+			page: 0,
+			list: [],
+			loading: false,
+			state: 'more',
+			contentText: {
+				contentdown: '查看更多',
+				contentrefresh: '加载中',
+				contentnomore: '没有更多'
+			}
+		},
+		weizhangwo: {
+			page: 0,
+			list: [],
+			loading: false,
+			state: 'more',
+			contentText: {
+				contentdown: '查看更多',
+				contentrefresh: '加载中',
+				contentnomore: '没有更多'
+			}
+		},
+	})
+
+
+
+	function onChangeTab(e) {
+		if (xxjlData.current !== e.currentIndex) {
+			xxjlData.current = e.currentIndex;
+			if (xxjlData.current == 0) {
+				xxjlData.weizhangwo.page = 0
+			} else if (xxjlData.current == 1) {
+				xxjlData.yizhangwo.page = 0
+			} else if (xxjlData.current == 2) {
+				xxjlData.shouchang.page = 0
+			}
+			refreshData(xxjlData.current);
+		}
+	}
+
+	function onScrolltolower() {
+		getMore(xxjlData.current)
+	}
+
+	function refreshData(code) {
+		const opt = {
+			jieId:"666",
+		}
+
+		if (code == 0) {
+			xxjlData.weizhangwo.list = [];
+			// 英语
+			xxjlData.weizhangwo.state = 'loading';
+			xxjlData.weizhangwo.page++;
+			opt.page = xxjlData.weizhangwo.page;
+		} else if (code == 1) {
+			xxjlData.yizhangwo.list = [];
+			// 英语
+			xxjlData.yizhangwo.state = 'loading';
+			xxjlData.yizhangwo.page++;
+			opt.page = xxjlData.yizhangwo.page;
+		} else if (code == 2) {
+			xxjlData.shouchang.list = [];
+			// 数学
+			xxjlData.shouchang.state = 'loading';
+			xxjlData.shouchang.page++;
+			opt.page = xxjlData.shouchang.page;
+		}
+		getWordList(opt).then(res => {
+			if (code == 0) {
+				xxjlData.weizhangwo.list = xxjlData.weizhangwo.list.concat(res.data.data);
+				xxjlData.weizhangwo.loading = false;
+				
+			} else if (code == 1) {
+				xxjlData.yizhangwo.list = xxjlData.yizhangwo.list.concat(res.data.data);
+				xxjlData.yizhangwo.loading = false;
+			} else if (code == 2) {
+				xxjlData.shouchang.list = xxjlData.shouchang.list.concat(res.data.data);
+				xxjlData.shouchang.loading = false;
+			}
+			if (code == 0) {
+				if (res.data.total > xxjlData.weizhangwo.list.length) {
+					// 英语
+					xxjlData.weizhangwo.state = 'more';
+					xxjlData.weizhangwo.loading = false;
+				} else {
+					// 英语
+					xxjlData.weizhangwo.state = 'no-more';
+					xxjlData.weizhangwo.loading = false;
+				}
+			} else if (code == 1) {
+				if (res.data.total > xxjlData.yizhangwo.list.length) {
+					// 英语
+					xxjlData.yizhangwo.state = 'more';
+					xxjlData.yizhangwo.loading = false;
+				} else {
+					// 英语
+					xxjlData.yizhangwo.state = 'no-more';
+					xxjlData.yizhangwo.loading = false;
+				}
+			} else if (code == 2) {
+				if (res.data.total > xxjlData.shouchang.list.length) {
+					// 数学
+					xxjlData.shouchang.state = 'more';
+					xxjlData.shouchang.loading = false;
+				} else {
+					// 数学
+					xxjlData.shouchang.state = 'no-more';
+					xxjlData.shouchang.loading = false;
+				}
+				
+			}
+		}).catch(err => {
+			if (code == 0) {
+				xxjlData.weizhangwo.state = 'more';
+				xxjlData.weizhangwo.loading = false;
+			} else if (code == 1) {
+				xxjlData.yizhangwo.state = 'more';
+				xxjlData.yizhangwo.loading = false;
+			} else if (code == 2) {
+				xxjlData.shouchang.state = 'more';
+				xxjlData.shouchang.loading = false;
+			}
+		})
+	}
+
+	function onRefresh() {
+		if (xxjlData.current == 0) {
+			xxjlData.weizhangwo.page = 0;
+			xxjlData.weizhangwo.list = [];
+			xxjlData.weizhangwo.loading = true;
+			
+		} else if (xxjlData.current == 1) {
+			xxjlData.yizhangwo.page = 0;
+			xxjlData.yizhangwo.list = [];
+			xxjlData.yizhangwo.loading = true;
+		} else if (xxjlData.current == 2) {
+			xxjlData.shouchang.page = 0;
+			xxjlData.shouchang.list = [];
+			xxjlData.shouchang.loading = true;
+		}
+		refreshData(xxjlData.current);
+	}
+
+	function getMore(code) {
+		const opt = {
+			jieId:"666",
+		}
+
+		if (code == 0) {
+			if (xxjlData.weizhangwo.state == 'no-more') {
+				return;
+			}
+			xxjlData.weizhangwo.state = 'loading';
+			xxjlData.weizhangwo.page++;
+			opt.page = xxjlData.weizhangwo.page;
+			
+		} else if (code == 1) {
+			if (xxjlData.yizhangwo.state == 'no-more') {
+				return;
+			}
+			xxjlData.yizhangwo.state = 'loading';
+			xxjlData.yizhangwo.page++;
+			opt.page = xxjlData.yizhangwo.page;
+		} else if (code == 2) {
+			if (xxjlData.shouchang.state == 'no-more') {
+				return;
+			}
+			// 数学
+			xxjlData.shouchang.state = 'loading';
+			xxjlData.shouchang.page++;
+			opt.page = xxjlData.shouchang.page;
+		}
+		getWordList(opt).then(res => {
+			if (code == 0) {
+				xxjlData.weizhangwo.list = res.data.wordList;
+				xxjlData.weizhangwo.loading = false;
+			} else if (code == 1) {
+				xxjlData.yizhangwo.list = xxjlData.yizhangwo.list.concat(res.data.data);
+				xxjlData.yizhangwo.loading = false;
+			} else if (code == 2) {
+				xxjlData.shouchang.list = xxjlData.shouchang.list.concat(res.data.data);
+				xxjlData.shouchang.loading = false;
+			}
+			if (code == 0) {
+				if (res.data.total > xxjlData.weizhangwo.list.length) {
+					// 英语
+					xxjlData.weizhangwo.state = 'more';
+					xxjlData.weizhangwo.state_text = '加载更多';
+					xxjlData.weizhangwo.loading = false;
+				} else {
+					// 英语
+					xxjlData.weizhangwo.state = 'no-more';
+					xxjlData.weizhangwo.state_text = '没有更多啦';
+				
+					xxjlData.weizhangwo.loading = false;
+				}
+				
+			} else if (code == 1) {
+				if (res.data.total > xxjlData.yizhangwo.list.length) {
+					// 英语
+					xxjlData.yizhangwo.state = 'more';
+					xxjlData.yizhangwo.state_text = '加载更多';
+
+					xxjlData.yizhangwo.loading = false;
+				} else {
+					// 英语
+					xxjlData.yizhangwo.state = 'no-more';
+					xxjlData.yizhangwo.state_text = '没有更多啦';
+					xxjlData.yizhangwo.loading = false;
+				}
+			} else if (code == 2) {
+				if (res.data.total > xxjlData.shouchang.list.length) {
+					// 数学
+					xxjlData.shouchang.state = 'more';
+					xxjlData.shouchang.state_text = '加载更多';
+					xxjlData.shouchang.loading = false;
+				} else {
+					// 数学
+					xxjlData.shouchang.state = 'no-more';
+					xxjlData.shouchang.state_text = '没有更多啦';
+				
+					xxjlData.shouchang.loading = false;
+				}
+			}
+		}).catch(err => {
+			if (code == 0) {
+				xxjlData.weizhangwo.state = 'more';
+				xxjlData.weizhangwo.state_text = '加载更多';
+				xxjlData.weizhangwo.loading = false;
+			} else if (code == 1) {
+				xxjlData.yizhangwo.state = 'more';
+				xxjlData.yizhangwo.state_text = '加载更多';
+				xxjlData.yizhangwo.loading = false;
+			} else if (code == 2) {
+				xxjlData.shouchang.state = 'more';
+				xxjlData.shouchang.state_text = '加载更多';
+				xxjlData.shouchang.loading = false;
+			}
+		})
+	}
+
+	function goBack() {
+		uni.redirectTo({
+			url: '/pages/my/index'
+		})
+	}
+	
+	onLoad((options) => {
+		xxjlData.current = Number(options.status) || xxjlData.current
+		getMore(xxjlData.current);
+	})
+</script>
+
+<style>
+
+</style>