<template>
|
<view class="page_bg">
|
<view class="section_1" @tap="show = true">
|
<text>{{cateName || '请选择分类'}}</text>
|
<u-icon name="arrow-down-fill"></u-icon>
|
</view>
|
<z-paging ref="paging" class="z-paging" v-model="chapters" @query="getListByChapter" :empty-view-fixed="false"
|
:hide-loading-more-when-no-more-by-limit="5">
|
<view class="group_item" v-for="item in chapters" :key="item._id">
|
<view class="title">{{item.title}}</view>
|
<view class="number">共{{item.questions.length}}题</view>
|
<view class="btns" v-if="item.questions.length > 0">
|
<block v-if="item.questions.length != item.history.length">
|
<view class="btn r_btn" @tap="starDoing(item)">开始做题</view>
|
</block>
|
<block v-else>
|
<view class="btn" @tap="checkAnswer(item)">查看解析</view>
|
<view class="btn r_btn" @tap="starDoing(item)">重新做题</view>
|
</block>
|
</view>
|
</view>
|
</z-paging>
|
<!-- 分类弹框 -->
|
<u-popup v-model="show" mode="bottom" height="70%" :closeable="true">
|
<view class="pop_bg">
|
<view class="title">分类筛选</view>
|
<view class="main">
|
<scroll-view scroll-y scroll-with-animation class="left_scroll">
|
<view v-for="(item,index) in treeDataF" :key="index" class="u-tab-item"
|
:class="index == leftSelect ? 'u-tab-item-active' : ''" @tap="leftSelect = index">
|
<text class="u-line-1">{{item.name}}</text>
|
</view>
|
</scroll-view>
|
<block v-for="(item,index) in treeDataF" :key="index">
|
<scroll-view scroll-y class="right_scroll" v-if="leftSelect == index">
|
<view class="page-view">
|
<view class="thumb-box" v-for="son in item.children" :key="son.id" @tap="screen(son)">
|
{{son.name}}
|
</view>
|
</view>
|
</scroll-view>
|
</block>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
cateName: '',
|
cateId: '',
|
treeDataF: [],
|
chapters: [],
|
|
collHeadStyle: { padding: '28rpx 20rpx' },
|
itemStyle: { borderBottom: '2rpx solid #f9f9f9' },
|
show: false,
|
leftSelect: 0, // 左侧分类选中项
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
methods: {
|
init(options) {
|
that.cateId = options.cateId
|
that.cateName = options.cateName
|
that.getCategories()
|
},
|
// 请求分类数据
|
getCategories() {
|
vk.callFunction({
|
url: 'client/course/pub/categories',
|
success(data) {
|
let tree = vk.pubfn.arrayToTree(data.rows, {
|
id: "_id",
|
parent_id: "parent_id",
|
children: "children"
|
});
|
that.treeDataF = tree
|
}
|
})
|
},
|
// 请求章节数据
|
getListByChapter(pageIndex, pageSize) {
|
// 根据id获取题库信息
|
vk.callFunction({
|
url: 'client/quest-bank/kh/real-exam/getBankRealExamList',
|
title: "加载中...",
|
data: { pageIndex, pageSize, cid: that.cateId, need_user_info: true },
|
success(data) {
|
let chapters = vk.pubfn.arrayToTree(data.rows, {
|
id: "_id",
|
parent_id: "parent_id",
|
children: "children"
|
});
|
that.$refs.paging.complete(chapters);
|
}
|
})
|
},
|
// 筛选完成
|
screen(son) {
|
this.show = false
|
this.$nextTick(() => {
|
this.cateId = son._id
|
this.cateName = this.treeDataF[this.leftSelect].name + son.name
|
that.$refs.paging.reload();
|
})
|
},
|
// 做题模式选择页面
|
starDoing(item) {
|
uni.navigateTo({
|
url: `/pages/question-bank/chooseExamType?from=real&id=${item._id}`
|
});
|
},
|
// 练习模式解析开启
|
checkAnswer(item) {
|
uni.navigateTo({
|
url: `/pages/question-bank/practice-page?pageTitle=历年真题&id=${item._id}&check=true`
|
});
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
height: 100vh;
|
background-color: #F5F5F5;
|
position: relative;
|
}
|
|
.section_1 {
|
padding: 16rpx 20rpx 14rpx 21rpx;
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
background-color: rgb(253, 211, 3);
|
box-shadow: 0px 3rpx 6rpx 0px rgba(255, 150, 12, 0.32);
|
border-radius: 32rpx;
|
position: absolute;
|
top: 14rpx;
|
left: 30rpx;
|
|
.u-icon {
|
margin-left: 6rpx;
|
}
|
}
|
|
.z-paging {
|
margin-top: 90rpx;
|
background-color: #FFFFFF;
|
|
.group_item {
|
font-size: 24rpx;
|
color: #333333;
|
border-bottom: 2rpx solid #F0F0F0;
|
padding: 32rpx 30rpx;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
|
.title {
|
width: 100%;
|
margin-bottom: 32rpx;
|
font-size: 28rpx;
|
font-weight: bold;
|
}
|
|
.number {
|
flex: 1;
|
color: #999999;
|
}
|
|
.btns {
|
display: flex;
|
align-items: center;
|
|
.btn {
|
padding: 9rpx 27rpx;
|
border-radius: 30rpx;
|
border: 1rpx solid #333333;
|
background: #FFFFFF;
|
margin-left: 12rpx;
|
font-size: 20rpx;
|
}
|
|
.r_btn {
|
background: #333333;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
|
.pop_bg {
|
padding: 30rpx;
|
box-sizing: border-box;
|
height: 100%;
|
|
.title {
|
text-align: center;
|
font-size: 30rpx;
|
font-weight: bold;
|
}
|
|
.main {
|
height: calc(100% - 50rpx);
|
margin-top: 10rpx;
|
overflow: hidden;
|
display: flex;
|
|
.left_scroll {
|
height: 100%;
|
width: 30%;
|
|
.u-tab-item {
|
height: 110rpx;
|
background: #f6f6f6;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24rpx;
|
color: #444;
|
font-weight: 400;
|
line-height: 1;
|
}
|
|
.u-tab-item-active {
|
position: relative;
|
color: #000;
|
font-size: 26rpx;
|
font-weight: 600;
|
background-color: #FFFFFF;
|
}
|
|
.u-tab-item-active::before {
|
content: "";
|
position: absolute;
|
border-left: 4px solid #FF960C;
|
height: 32rpx;
|
left: 0;
|
top: 39rpx;
|
}
|
}
|
|
.right_scroll {
|
width: 70%;
|
padding: 30rpx 0 0 20rpx;
|
|
.page-view {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.thumb-box {
|
background: #F5F5F5;
|
border-radius: 6px;
|
width: 47%;
|
padding: 21rpx 0;
|
text-align: center;
|
margin-bottom: 30rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
