<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">
|
<u-collapse :head-style="collHeadStyle" :item-style="itemStyle" :accordion="false" ref="colla">
|
<u-collapse-item :title="item.title" v-for="item in chapters" :key="item._id">
|
<block v-if="item.children">
|
<view class="section" v-for="(sec,index) in item.children" :key="sec._id">
|
<view class="left_circle">
|
<view class="direct" v-if="index != 0"></view>
|
</view>
|
<view class="middle_text">
|
<view class="title">{{sec.title}}</view>
|
<view class="line_bg">
|
<u-line-progress height="12" :show-percent="false" active-color="#FF960C"
|
inactive-color="rgba(253, 211, 3, 0.2)" :striped="true"
|
:percent="showNumber(sec)" :striped-active="true">
|
</u-line-progress>
|
<view class="info">{{sec.history.length}}/{{sec.questions.length}}</view>
|
</view>
|
</view>
|
<view class="btns">
|
<block v-if="sec.questions.length > 0">
|
<view class="btn" v-if="checkShow(sec)" @tap="practiceWithCheck(sec)">查看解析</view>
|
<view class="btn r_btn" @tap="starPractice(sec)">{{doExamShow(sec)}}</view>
|
</block>
|
<block v-else>
|
<view class="btn n_btn">暂无题目</view>
|
</block>
|
</view>
|
</view>
|
</block>
|
<view class="section" style="color:#999" v-else> 暂无小节 </view>
|
</u-collapse-item>
|
</u-collapse>
|
</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' : ''" @click="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() {},
|
// 函数
|
computed: {
|
// 进度条显隐
|
showNumber() {
|
return (sec) => {
|
if (sec.history.length == 0 || sec.questions.length == 0) return 0
|
return (sec.history.length / sec.questions.length) * 100
|
}
|
},
|
// 查看解析按钮显隐
|
checkShow() {
|
return (sec) => {
|
return sec.history.length == sec.questions.length
|
}
|
},
|
// 做题按钮状态
|
doExamShow() {
|
return (sec) => {
|
if (sec.history.length == 0) return '开始做题'
|
if (sec.history.length < sec.questions.length) return '继续做题'
|
return '重新做题'
|
}
|
}
|
},
|
methods: {
|
init(options) {
|
that.cateId = options.cateId
|
that.cateName = options.cateName
|
that.getCategories()
|
|
uni.$on('chapterUpdate', function(data) {
|
that.getListByChapter(1, 10)
|
})
|
},
|
// 请求分类数据
|
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/chapter/getBankChapterList',
|
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();
|
})
|
},
|
// 开始做题
|
starPractice(sec) {
|
uni.navigateTo({
|
url: `/pages/question-bank/practice-page?pageTitle=章节练习&id=${sec._id}`
|
})
|
},
|
// 做题并查看解析
|
practiceWithCheck(sec) {
|
uni.navigateTo({
|
url: `/pages/question-bank/practice-page?pageTitle=章节练习&id=${sec._id}&check=true`
|
})
|
}
|
},
|
onUnload() {
|
uni.$off('chapterUpdate')
|
}
|
}
|
</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;
|
|
.section {
|
display: flex;
|
align-items: center;
|
padding: 16rpx 20rpx 24rpx 42rpx;
|
font-size: 24rpx;
|
color: #333333;
|
position: relative;
|
|
.left_circle {
|
width: 20rpx;
|
height: 20rpx;
|
background: rgba(255, 255, 255, 0.39);
|
border: 2rpx solid #FDD303;
|
border-radius: 50%;
|
margin-right: 28rpx;
|
}
|
|
.middle_text {
|
flex: 1;
|
margin-right: 14rpx;
|
|
.title {
|
margin-bottom: 8rpx;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
|
.line_bg {
|
width: 172rpx;
|
display: flex;
|
align-items: center;
|
|
.info {
|
margin-left: 20rpx;
|
}
|
}
|
}
|
|
.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;
|
}
|
|
.n_btn {
|
background: #999;
|
border: 1rpx solid #999;
|
color: #FFFFFF;
|
}
|
}
|
|
.direct {
|
width: 0;
|
height: 60%;
|
border-left: 2rpx solid #AEAEAE;
|
position: absolute;
|
bottom: 75%;
|
left: 51rpx;
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.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>
|
