GCLS_Page_Mobile/pages/tabbar/exercise/index.vue

<template>
	<view class="exercise">
		<navbar />
		<view style="height:92rpx;"></view>
		<view class="exercise_items_box">
			<view class="exercise_items" v-for="(item, index) in pageList" :key="index">
				<uni-list>
					<!-- :note="isEnable(item.is_finish)?item.exercise_name + ' / ' + item.finish_time:item.exercise_name" -->
					<uni-list-item :title="item.exercise_name"
						:thumb="isEnable(item.is_finish)?'/static/gear_lv.png':'/static/gear.png'" thumb-size="sm"
						:note="isEnable(item.is_finish)?item.finish_time:''" showArrow :to="'/pages/common/AnswerReport?answer_record_id='+item.id+'&answer_mode='
						 + item.answer_mode+'&exercise_share_record_id='+item.exercise_share_record_id+'&isTask=false'" />
				</uni-list>
			</view>
			<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="pageList.length > 0" />
			<view style="height:130rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		PageQueryMyExerciseAnswerRecordList,
		SubmitAnswer
	} from '@/api/exercise.js';
	import {
		isEnable,
		answer_mode_list
	} from '@/pages/answer_question/common/data/common.js';
	export default {
		data() {
			return {
				isEnable,
				answer_mode_list,
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '加载完毕'
				},
				pageQueryData: {
					page_capacity: 50, // 每页容量，最大不能超过 50
					cur_page: 1, // 当前查询第几页，页码序号从 1 开始
					search_content: '', // 搜索内容，练习题名称，空查询所有
					status_list: [0, 1],
				},
				total: 0, //数据总条数
				pageList: [],
			}
		},
		onLoad() {
			this.loadMoreData();
		},
		// 监听触底
		onReachBottom() {
			let that = this;
			if (that.total <= that.pageList.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
				that.status = 'noMore';
			} else {
				that.status = 'loading';
				that.pageQueryData.cur_page++;
				that.loadMoreData();
			}
		},
		methods: {
			//加载数据
			loadMoreData() {
				PageQueryMyExerciseAnswerRecordList(this.pageQueryData).then((res) => {
					if (res.status) {
						// console.log('cur_page', this.pageQueryData.cur_page);
						this.total = res.total_count;
						if (res.total_count > 0) {
							const dataMap = res.answer_record_list;
							this.pageList = this.reload ? dataMap : this.pageList.concat(dataMap);
							this.reload = false;
						}
						if (this.total === this.pageList.length) {
							this.reload = false;
							this.status = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.exercise_items_box {
		height: auto;
		padding: 8rpx 16rpx;

		.exercise_items {
			padding: 8rpx 0;

			/deep/ .uni-list {
				border-radius: 16rpx !important;

				.uni-list-item {
					padding: 16rpx 0;
					border-radius: 16rpx !important;

					.uni-list-item__content-title {
						color: #000;
						font-weight: 500;
						font-size: 36rpx;
					}

					.uni-list-item__content-note {
						font-weight: 400;
						font-size: 24rpx;
					}
				}

				.uni-icons {
					color: #000 !important;
					font-size: 24rpx !important;
				}
			}
		}
	}
</style>