uniProject/pages/wrong/index.vue

<template>
	<view class="ezy-cuoti-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">我的错题</text>
		</view>
		<view class="cuoti-border-box">
			<uni-segmented-control :current="data.current" :values="data.items" active-color="#3A7FE9"
				@clickItem="onChangeTab" class="cuo-tab-box" />
			<view class="cuoti-content-box">
				<view v-if="data.current === 0">
					<scroll-view scroll-y="true" refresher-enabled="true"
						:refresher-triggered="data.shuxue.loading" :refresher-threshold="50"
						refresher-background="lightgreen" @refresherrefresh="onRefresh" class="cuoti-scroll-view">
						<!--数学-->
						<uni-list>
							<uni-list-item v-for="item in data.shuxue.list" class="list-item-box">
								<template v-slot:body>
									<!-- 时间 -->
									<view class="item-date-row">
										<icon class="data-icon"></icon>
										<text>{{ item.cdate }}</text>
									</view>
									<!-- 数量 -->
									<view class="item-cuoti-row">
											<icon class="cuoti-icon"></icon>
											<view class="cuoti-content">错题数：<text class="cuoti-text">{{ item.count }}</text>题</view>
									</view>
									<view @click="getCuotiData(item)" class="cuoti-btn">查看错题</view>
								</template>
							</uni-list-item>
							<uni-load-more :status="data.shuxue.state" @click="getMore(0)"
								:contentText="data.shuxue.contentText"></uni-load-more>
						</uni-list>
					</scroll-view>
				</view>
				<view v-if="data.current === 1">
					<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true"
						:refresher-triggered="data.yingyu.loading" :refresher-threshold="50"
						refresher-background="lightgreen" @refresherrefresh="onRefresh">
						<!--英语-->
						<uni-list>
							<uni-list-item v-for="item in data.yingyu.list">
                <template v-slot:body>
                  <!-- 时间 -->
                  <view class="item-date-row">
                    <icon class="data-icon"></icon>
                    <text>{{ item.cdate }}</text>
                  </view>
                  <!-- 数量 -->
                  <view class="item-cuoti-row">
                    <icon class="cuoti-icon"></icon>
                    <view class="cuoti-content">错题数：<text class="cuoti-text">{{ item.count }}</text>题</view>
                  </view>
                  <view @click="getCuotiData(item)" class="cuoti-btn">查看错题</view>
                </template>
              </uni-list-item>
							<uni-load-more :status="data.yingyu.state" @click="getMore(1)"
								:contentText="data.yingyu.contentText"></uni-load-more>
						</uni-list>
					</scroll-view>
				</view>
			</view>
		</view>
		<cuoti ref="wrongRef" :list="data.wrongList" @back="handleBackFromCuoti"></cuoti>
		<CustomTabBar :cardId="cardId" :nianji="nianji" :zhangId="zhangId"></CustomTabBar>
	</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";
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	
	const zhangId = ref(null);
	const nianji = ref(null);
	const cardId = ref(null);
	
	const wrongRef = ref(null);

	const data = reactive({
		items: ['数学', '英语'],
		current: 0,
		shuxue: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      }

		},
		yingyu: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      }
		},
		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
			}
			refreshData(data.current);
		}
	}

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

		if (code == 0) {
			data.shuxue.list = [];
			// 数学
			data.shuxue.state = 'loading';
			data.shuxue.page++;
			opt.page = data.shuxue.page;
		} else if (code == 1) {
			data.yingyu.list = [];
			// 英语
			data.yingyu.state = 'loading';
			data.yingyu.page++;
			opt.page = data.yingyu.page;
		}
		getWrongData(opt).then(res => {
			if (code == 0) {
				data.shuxue.list = data.shuxue.list.concat(res.data.data);
				data.shuxue.loading = false;
			} else if (code == 1) {
				data.yingyu.list = data.yingyu.list.concat(res.data.data);
				data.yingyu.loading = false;
			}
			if (code == 0) {
				if (res.data.total >= data.shuxue.list.length) {
					// 数学
					data.shuxue.state = 'no-more';
					data.shuxue.loading = false;
				} else {
					// 数学
					data.shuxue.state = 'more';
					data.shuxue.loading = false;
				}
			} else if (code == 1) {
				if (res.data.total >= data.yingyu.list.length) {
					// 英语
					data.yingyu.state = 'no-more';
					data.yingyu.loading = false;
				} else {
					// 英语
					data.yingyu.state = 'more';
					data.yingyu.loading = false;
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				data.shuxue.state = 'more';
				data.shuxue.loading = false;
			} else if (code == 1) {
				// 英语
				data.yingyu.state = 'more';
				data.yingyu.loading = false;
			}
		})
	}

	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 = data.shuxue.list.concat(res.data.data);
				data.shuxue.loading = false;
			} else if (code == 1) {
				data.yingyu.list = data.yingyu.list.concat(res.data.data);
				data.yingyu.loading = false;
			}
			if (code == 0) {
				if (res.data.total >= data.shuxue.list.length) {
					// 数学
					data.shuxue.state = 'no-more';
					data.shuxue.state_text = '没有更多啦';
					data.shuxue.loading = false;
				} else {
					// 数学
					data.shuxue.state = 'more';
					data.shuxue.state_text = '加载更多';
					data.shuxue.loading = false;
				}
			} else if (code == 1) {
				if (res.data.total >= data.yingyu.list.length) {
					// 英语
					data.yingyu.state = 'no-more';
					data.yingyu.state_text = '没有更多啦';
					data.yingyu.loading = false;
				} else {
					// 英语
					data.yingyu.state = 'more';
					data.yingyu.state_text = '加载更多';
					data.yingyu.loading = false;
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				data.shuxue.state = 'more';
				data.shuxue.state_text = '加载更多';
				data.shuxue.loading = false;
			} else if (code == 1) {
				// 英语
				data.yingyu.state = 'more';
				data.yingyu.state_text = '加载更多';
				data.yingyu.loading = false;
			}
		})
	}

	function formatListToUse(list) {
		list.forEach((item, index) => {
			item.mta_show = false;
			if (item.type == 3) {
				item.result = JSON.parse(item.result);
				item.placeholders = item.result.map((item, cindex) => `[bank${cindex}]`)
				item.reply = item.reply ? JSON.parse(item.reply) : item.result.map(() => '');
			}
		})
	}

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

	function onRefresh() {
		if (data.current == 0) {
			data.shuxue.page = 0;
			data.shuxue.list = [];
			data.shuxue.loading = true;
		} else if (data.current == 1) {
			data.yingyu.page = 0;
			data.yingyu.list = [];
			data.yingyu.loading = true;
		}
		refreshData(data.current);
	}

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

<style>

</style>