dati/pages/questionBank/detail/index.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">{{name}}</view>
			</view>
		</view>
		<!--#endif-->
		<view class="kaoshi-tiku">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<block v-for="(item, index) in list" :key="index">
					<view class="kaoshi-tiku-content" @tap="goto_detail(item)">
						<view class="pub-flex-1">
							<view class="kaoshi-tiku-content-flex">
								<view class="kaoshi-tiku-content-top">
									<view>{{item.name}}
									<view v-if="item.is_vip == 1 && !subjectVip" class="vip">
										<image src="../../../static/img/vip.png" mode=""></image>
										<view>VIP</view>
									</view></view>
								</view>
								<view class="kaoshi-tiku-bilv">{{item.scale.toFixed(0)}}
									<view class="kaoshi-remind-title">%</view>
								</view>
							</view>
							<view class="kaoshi-tiku-content-flex">
								<view class="kaoshi-tiku-content-bottom">
									<view class="iconfont icon-dui2"></view>
									<view class="pub-gray">已答题{{item.test_num}}/{{item.total_num}}</view>
								</view>
								<view class="pub-gray">正确率</view>
							</view>
						</view>
						<view class="iconfont icon-arrow"></view>
					</view>
				</block>
			</mescroll-body>
		</view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from "vuex";
	import Error from '@/core/untils/error/index';
	import authVip from '@/components/authVip.vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				showAuthVip: false, //是否显示认证vip
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				list: [],

				pages_params: {
					// dotype: '' 'zhangjie 章节', 'moni模拟', 'yicuo易错', 'cuoti错题', 'vip答题'
				},
				type: '',
				name: '',
				id: '',
				//通过step确定当前页面层次，用于后退时逐层退出
				step: 0,
				arr: [],
			};
		},
		onLoad(opts) {
			this.pages_params = opts
			if (opts && opts.from_type) {
				this.type = opts.from_type
				this.name = opts.name
				this.id = opts.id
			}
			this.arr[0] = 0;
		},
		onShow() {
			if (this.type != '') {
				// this.getList()
				this.arr[this.step] = (this.id)
			}

		},
		mounted() {},
		computed: {
			...mapState(["subject", "userinfo", "subjectVip"]),
		},
		components: {
			authVip
		},
		onBackPress() {
			//逐层退出
			if (this.step == 0) {
				this.id = this.pages_params.id
				this.mescroll.resetUpScroll(false)
			} else {
				this.step -= 1;
				this.id = this.arr[this.step]
				this.mescroll.resetUpScroll(false)
				return true;
			}
		},
		methods: {
			/*上拉加载的回调*/
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let needLogin = false
				if (this.userinfo.token) {
					needLogin = true
				}

				let res = await this.$myHttp.post({
					url: this.type == '1' ? this.$myHttp.urlMap.unitList : this.$myHttp.urlMap.zhentiList,
					data: {
						subject_id: this.subject.id,
						unit_id: this.id,
						page: pageNum,
						limit: pageSize
					},
					needLogin: needLogin
				})
				if (res.code == 1) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.xxx;
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = res.data.total;

					this.mescroll.endBySize(curPageLen, totalSize);
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
				} else {
					this.mescroll.endErr()
				}
				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
			// async getList() {
			//   let needLogin = false
			//   if (this.userinfo.token) {
			//     needLogin = true
			//   }
			// 		let data = {
			//           subject_id: this.subject.id,
			//           unit_id:this.id,
			//           page:1,
			//           limit:0
			// 		}
			//   let res = await this.$myHttp.post({
			//     url: this.type == '1' ? this.$myHttp.urlMap.unitList : this.$myHttp.urlMap.zhentiList,
			//     data: data,
			//     needLogin: needLogin
			//   });
			//   if (res.code === 1) {
			//     this.list = res.data.data;
			//   }
			// },
			goto_detail(item) {
				if (!this.subjectVip && item.is_vip) {
					if (this.$myUserLogin.getToken()) {
						this.showAuthVip = true
						return
					} else {
						Error.errorNotLoggedIn();
						return
					}
				}
				if (this.$myUserLogin.getToken()) {
					if (item.is_last == 0) {
						//非终极栏目，点击进入下级栏目
						this.step += 1;
						this.arr[this.step] = (item.id)
						this.id = item.id
						this.name = item.name
						this.mescroll.resetUpScroll(false)
					} else if (item.is_last == 1) {
						//终极栏目，点击进入答题页
						this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=' + this
							.type + '&name=' + item.name)
					}
				} else {
					Error.errorNotLoggedIn();
				}
			}
		}
	};
</script>

<style>
	page {
		background: #f6f7f9;
	}

	/*题库列表*/
	.kaoshi-tiku {
		background: #fff;
	}

	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
		padding: 14px 0;
		border-bottom: solid 1px #f5f5f5;
	}

	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.kaoshi-tiku-content .icon-arrow {
		padding-left: 13px;
		color: #b3b3b3;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
		font-size: 14px;
	}

	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
	}

	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.kaoshi-tiku-content-bottom {
		display: flex;
		align-items: center;
	}

	.kaoshi-tiku-content-flex .icon-dui2 {
		margin: 2px 2px 0 0;
		color: #3c7bfc;
	}

	.kaoshi-tiku-bilv {
		font-size: 22px;
		color: #000;
		display: flex;
		align-items: baseline;
	}

	.kaoshi-remind-title {
		font-size: 13px;
		color: #000;
	}
</style>