uniProject/pages/wrong/index.vue

<template>
	<view>
		<view class="ezy-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">我的错题</text>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="data.current" :values="data.items" style-type="button"
				active-color="#007aff" @clickItem="onChangeTab" />
		</view>
		<view class="content">
			<view v-if="data.current === 0">
				<!--数学-->
				<uni-list>
					<uni-list-item v-for="item in data.shuxue.list">
						<template v-slot:body>
							<view class="slot-box">
								{{ item }}
								<text class="slot-text">{{ item.title }}</text>
								<text class="slot-text">{{ item.date }}</text>
								<text class="slot-text">错题数：{{ item.count }}题</text>
								<button @click="getCuotiData(item)">查看错题</button>
							</view>
						</template>
					</uni-list-item>
					<uni-load-more :status="data.shuxue.state" @click="getMore(0)"></uni-load-more>
				</uni-list>
			</view>
			<view v-if="data.current === 1">
				<!--英语-->
				<uni-list>
					<uni-list-item v-for="item in data.yingyu.list">
						<template v-slot:body>
							<view class="slot-box">
								{{ item }}
								<text class="slot-text">title</text>
								<text class="slot-text">date</text>
								<text class="slot-text">wrong</text>
								<button>查看错题</button>
							</view>
						</template>
					</uni-list-item>
					<uni-load-more :status="data.yingyu.state" @click="getMore(1)"></uni-load-more>
				</uni-list>
			</view>
		</view>
		<cuoti ref="wrongRef" :list="data.wrongList" @back="handleBackFromCuoti"></cuoti>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getWrongData
	} from "@/api/wrong";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import cuoti from "@/components/chengji/chengji.vue";
	import {
		getWrongInfo
	} from "@/api/wrong";

	const wrongRef = ref(null);

	const data = reactive({
		items: ['数学', '英语'],
		current: 0,
		shuxue: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
		},
		yingyu: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
		},
		wrongList: [],
	})

	function handleBack() {
		uni.redirectTo({
			url: '/pages/my/index'
		})
	}

	function handleBackFromCuoti() {
		wrongRef.value.closePopup();
	}

	function onChangeTab(e) {
		if (data.current !== e.currentIndex) {
			data.current = e.currentIndex;
			if (data.current == 0) {
				data.shuxue.page = 0
			} else if (data.current == 1){
				data.yingyu.page = 0
			}	 
			getMore(data.current);
		}
	}

	function getMore(code) {
		const opt = {
			page: 1,
			size: 10, // 固定查询10条
			cardId: data.current+1// 前台索引加1为学科cardId
		}

		if (code == 0) {
			// 数学
			if (data.shuxue.state == 'no-more') return;
			data.shuxue.state = 'loading';
			data.shuxue.page++;
			opt.page = data.shuxue.page;
		} else if (code == 1) {
			// 英语
			if (data.yingyu.state == 'no-more') return;
			data.yingyu.state = 'loading';
			data.yingyu.page++;
			opt.page = data.yingyu.page;
		}
		getWrongData(opt).then(res => {

			if (code == 0) {
				data.shuxue.list.push(res.data);
			} else if (code == 1) {
				data.yingyu.list.push(res.data);
			}

			if (res.data.total * res.data.size >= res.data.length) {
				if (code == 0) {
					// 数学
					data.shuxue.state = 'no-more';
				} else if (code == 1) {
					// 英语
					data.yingyu.state = 'no-more';
				}
			} else {
				if (code == 0) {
					// 数学
					data.shuxue.state = 'more';
				} else if (code == 1) {
					// 英语
					data.yingyu.state = 'more';
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				data.shuxue.state = 'more';
			} else if (code == 1) {
				// 英语
				data.yingyu.state = 'more';
			}
		})
	}

	function getCuotiData(item) {
		getWrongInfo({
			cardId: data.current+1,
			cdate: item.cdate
		}).then(res => {
			data.wrongList = res.data;
			wrongRef.value.showPopup();
		})
	}

	onLoad(() => {
		getMore(data.current);
	})
</script>

<style>

</style>