dati/pages/questionBank/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"></view>
				<view class="kaoshi-head-m">题库</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="kaoshi-head-nav">
			<view class="kaoshi-head-nav-flex"
				@tap="$openrul('/pages/questionBank/questionBankList/index?from_type=1')">
				<image :src="static_media.img01" class="kaoshi-head-nav-img"></image>
				<view>章节练习</view>
			</view>
			<view class="kaoshi-head-nav-flex"
				@tap="$openrul('/pages/questionBank/questionBankList/index?from_type=2')">
				<image :src="static_media.img02" class="kaoshi-head-nav-img"></image>
				<view>真题练习</view>
			</view>
			<view class="kaoshi-head-nav-flex" @tap="navTo('/pages/my/wrongQuestion/index')">
				<image :src="static_media.img03" class="kaoshi-head-nav-img"></image>
				<view>题库错题</view>
			</view>
			<view class="kaoshi-head-nav-flex" @tap="navTo('/pages/my/collect/index')">
				<image :src="static_media.img04" class="kaoshi-head-nav-img"></image>
				<view>我的收藏</view>
			</view>
		</view>
		<view class="kaoshi-tiku-title" v-if="unit_list.length > 0">
			<view class="kaoshi-tiku-title-l">章节练习</view>
			<view @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=1')" class="kaoshi-tiku-title-r">
				全部章节
			</view>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in unit_list" :key="index">
				<view class="kaoshi-tiku-content" @tap="goto_detail(item,'1')">
					<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>
		</view>
		<view class="kaoshi-tiku-title" v-if="zhenti_list.length > 0">
			<view class="kaoshi-tiku-title-l">真题练习</view>
			<view @tap="$openrul('/pages/questionBank/questionBankList/index?from_type=2')" class="kaoshi-tiku-title-r">
				全部真题
			</view>
		</view>
		<view class="kaoshi-tiku">
			<block v-for="(item, index) in zhenti_list" :key="index">
				<view class="kaoshi-tiku-content" @tap="goto_detail(item,'2')">
					<view style="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}}
								<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>
		</view>
		<authVip v-if="showAuthVip" @hideAuthVip="showAuthVip = false"></authVip>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import Error from '@/core/untils/error/index';
	import authVip from '@/components/authVip.vue'
	export default {
		data() {
			return {
				unit_list: [],
				zhenti_list: [],
				showAuthVip: false,
			};
		},
		onShow() {
			this.get_tiku_list();
			this.get_zhenti_list();
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
		},
		computed: {
			...mapState(['subject', 'subjectVip', 'userinfo']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/tiku-icon1.png',
					img02: this.$myConfig.localMedia + '/static/img/tiku-icon2.png',
					img03: this.$myConfig.localMedia + '/static/img/tiku-icon3.png',
					img04: this.$myConfig.localMedia + '/static/img/tiku-icon4.png',
				};
			},
		},
		components: {
			authVip
		},
		methods: {
			//章节列表
			async get_tiku_list() {
				let needLogin = false
				if (this.userinfo.token) {
					needLogin = true
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitList,
					data: {
						subject_id: this.subject.id,
						unit_id: 0,
						page: 1,
						limit: 4
					},
					needLogin: needLogin
				});
				if (res.code === 1) {
					this.unit_list = res.data.data;
				}
			},
			//历年真题列表
			async get_zhenti_list() {
				let needLogin = false
				if (this.userinfo.token) {
					needLogin = true
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.zhentiList,
					data: {
						subject_id: this.subject.id,
						page: 1,
						limit: 4
					},
					needLogin: needLogin
				})
				if (res.code === 1) {
					this.zhenti_list = res.data.data;
				}
			},
			goto_detail(item, type) {
				if (this.$myUserLogin.getToken()) {
					if (item.total_num == 0) { //如果目录下没有题目，提示用户
						this.$myUtils.$prompt.showToast({
							icon: 'none',
							title: '当前目录下没有题目，请联系老师'
						});
						return
					}
					if (!this.subjectVip && item.is_vip) {
						this.showAuthVip = true
						return
					}
					if (type == '1') {
						if (item.is_last == 0) {
							//非终极栏目，点击进入下级栏目
							this.$openrul('/pages/questionBank/detail/index?id=' + item.id + '&from_type=1' + '&name=' +
								item.name)
						} else if (item.is_last == 1) {
							//终极栏目，点击进入答题页
							this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=1' +
								'&name=' + item.name)
						}
					} else if (type == '2') {
						//历年真题都是终极栏目，点击进入答题页
						this.$openrul('/pages/questionBank/questionBankAnswer/index?id=' + item.id + '&from_type=2' +
							'&name=' + item.name)
					}
				} else {
					Error.errorNotLoggedIn();
				}
			},
			//跳转前需要登录
			navTo(url) {
				if (this.$myUserLogin.getToken()) {
					this.$openrul(url)
				} else {
					Error.errorNotLoggedIn();
				}
			}
		}
	};
</script>
<style>
	page {
		background: #f6f6f6;
	}

	.kaoshi-head-nav {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 14px;
		color: #605d70;
		padding: 16px 0;
		z-index: 10000;
		background: #fff;
		width: 93%;
		margin: 11px auto;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}

	.kaoshi-head-nav .kaoshi-head-nav-flex {
		flex: 1;
	}

	.kaoshi-head-nav-img {
		width: 38px;
		height: 38px;
	}

	.kaoshi-tiku-title {
		width: 92%;
		margin: 0 auto;
		padding: 12px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kaoshi-tiku-title-l {
		display: flex;
		font-weight: bold;
		font-size: 17px;
	}

	.kaoshi-tiku-title-r {
		color: #000;
		border: solid 1px #d8d8d8;
		padding: 5px 13px;
		border-radius: 35px;
		font-size: 12px;
	}

	.kaoshi-tiku {
		background: #fff;
		width: 93%;
		margin: 0 auto 8px;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}

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

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

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

	.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;
		flex: 1;
		font-size: 16px;
	}

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

	.kaoshi-tiku-content-bottom {
		font-size: 13px;
		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>