uniProject/pages/my/learnRecord.vue

<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 -1" :values="xxjlData.items" active-color="#3A7FE9"
				@clickItem="onChangeTab" class="ezy-tab-box" />
			<view>
				<view v-if="xxjlData.current == 1">
					<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-item-box">
								<template v-slot:body>
									<view @click="goLearn(item)" class="word-list-item">
										<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>

								</template>
							</uni-list-item>
							<uni-load-more :status="xxjlData.weizhangwo.state" @click="getMore(1)"
								:contentText="xxjlData.weizhangwo.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.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>
									<view class="item-word">
										<view @click="goLearn(item)">
											<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>
								</template>
							</uni-list-item>
							<uni-load-more :status="xxjlData.yizhangwo.state" @click="getMore(2)"
								:contentText="xxjlData.yizhangwo.contentText">
							</uni-load-more>
						</uni-list>
					</scroll-view>
				</view>
				<view v-if="xxjlData.current == 3">
					<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 @click="goLearn(item)">
										<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>
								</template>
							</uni-list-item>
							<uni-load-more :status="xxjlData.shouchang.state" @click="getMore(3)"
								: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 {
		myWordList
	} from "@/api/my.js"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	const xxjlData = reactive({
		items: ['未掌握', '已掌握', '收藏'],
		current: 1,
		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 goLearn(data) {
		uni.redirectTo({
			url: `/pages/newEnglish/index?jieId=0&wordId=${data.id}&isLearnStatus=${xxjlData.current}`
		})
	}

	function onChangeTab(e) {
		console.log('xxjlData.current', xxjlData.current);
		console.log(' e.currentIndex', e.currentIndex);
		xxjlData.current = e.currentIndex + 1;
		if (xxjlData.current == 1) {
			xxjlData.weizhangwo.page = 0
		} else if (xxjlData.current == 2) {
			xxjlData.yizhangwo.page = 0
		} else if (xxjlData.current == 3) {
			xxjlData.shouchang.page = 0
		}
		refreshData(xxjlData.current);
	}

	function onScrolltolower() {
		getMore(xxjlData.current)
	}

	function refreshData(code) {
		const opt = {
			type: code
		}

		if (code == 1) {
			xxjlData.weizhangwo.list = [];
			// 英语
			xxjlData.weizhangwo.state = 'loading';
			xxjlData.weizhangwo.page++;
			opt.page = xxjlData.weizhangwo.page;
		} else if (code == 2) {
			xxjlData.yizhangwo.list = [];
			// 英语
			xxjlData.yizhangwo.state = 'loading';
			xxjlData.yizhangwo.page++;
			opt.page = xxjlData.yizhangwo.page;
		} else if (code == 3) {
			xxjlData.shouchang.list = [];
			// 数学
			xxjlData.shouchang.state = 'loading';
			xxjlData.shouchang.page++;
			opt.page = xxjlData.shouchang.page;
		}
		myWordList(opt).then(res => {
			if (code == 1) {
				xxjlData.weizhangwo.list = xxjlData.weizhangwo.list.concat(res.data);
				xxjlData.weizhangwo.loading = false;

			} else if (code == 2) {
				xxjlData.yizhangwo.list = xxjlData.yizhangwo.list.concat(res.data);
				xxjlData.yizhangwo.loading = false;
			} else if (code == 3) {
				xxjlData.shouchang.list = xxjlData.shouchang.list.concat(res.data);
				xxjlData.shouchang.loading = false;
			}
			if (code == 1) {
				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 == 2) {
				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 == 3) {
				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 == 1) {
				xxjlData.weizhangwo.state = 'more';
				xxjlData.weizhangwo.loading = false;
			} else if (code == 2) {
				xxjlData.yizhangwo.state = 'more';
				xxjlData.yizhangwo.loading = false;
			} else if (code == 3) {
				xxjlData.shouchang.state = 'more';
				xxjlData.shouchang.loading = false;
			}
		})
	}

	function onRefresh() {
		if (xxjlData.current == 1) {
			xxjlData.weizhangwo.page = 0;
			xxjlData.weizhangwo.list = [];
			xxjlData.weizhangwo.loading = true;

		} else if (xxjlData.current == 2) {
			xxjlData.yizhangwo.page = 0;
			xxjlData.yizhangwo.list = [];
			xxjlData.yizhangwo.loading = true;
		} else if (xxjlData.current == 3) {
			xxjlData.shouchang.page = 0;
			xxjlData.shouchang.list = [];
			xxjlData.shouchang.loading = true;
		}
		refreshData(xxjlData.current);
	}

	function getMore(code) {
		const opt = {
			type: code,
		}

		if (code == 1) {
			if (xxjlData.weizhangwo.state == 'no-more') {
				return;
			}
			xxjlData.weizhangwo.state = 'loading';
			xxjlData.weizhangwo.page++;
			opt.page = xxjlData.weizhangwo.page;

		} else if (code == 2) {
			if (xxjlData.yizhangwo.state == 'no-more') {
				return;
			}
			xxjlData.yizhangwo.state = 'loading';
			xxjlData.yizhangwo.page++;
			opt.page = xxjlData.yizhangwo.page;
		} else if (code == 3) {
			if (xxjlData.shouchang.state == 'no-more') {
				return;
			}
			// 数学
			xxjlData.shouchang.state = 'loading';
			xxjlData.shouchang.page++;
			opt.page = xxjlData.shouchang.page;
		}
		myWordList(opt).then(res => {
			if (code == 1) {
				xxjlData.weizhangwo.list = xxjlData.weizhangwo.list.concat(res.data)
				xxjlData.weizhangwo.loading = false;
			} else if (code == 2) {
				xxjlData.yizhangwo.list = xxjlData.yizhangwo.list.concat(res.data);
				xxjlData.yizhangwo.loading = false;
			} else if (code == 3) {
				xxjlData.shouchang.list = xxjlData.shouchang.list.concat(res.data);
				xxjlData.shouchang.loading = false;
			}
			if (code == 1) {
				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 == 2) {
				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 == 3) {
				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 == 1) {
				xxjlData.weizhangwo.state = 'more';
				xxjlData.weizhangwo.state_text = '加载更多';
				xxjlData.weizhangwo.loading = false;
			} else if (code == 2) {
				xxjlData.yizhangwo.state = 'more';
				xxjlData.yizhangwo.state_text = '加载更多';
				xxjlData.yizhangwo.loading = false;
			} else if (code == 3) {
				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.isLearnStatus) || xxjlData.current
		getMore(xxjlData.current);
	})
</script>

<style>

</style>