Skip to content

T
transport-show-h5
提交 a7f92672 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

新加错题集列表

上级 415160c5
显示空白字符变更
内嵌 并排
正在显示 包含 502 行增加 和 0 行删除
src/pages/my/errorQuestionList.vue 0 → 100644
浏览文件 @ a7f92672
<template>
<div>
<div id="top-view">
<div class="top-tab">
<div :class="activeClass == '0' ? 'left btn active' : 'left btn'" @click="tab('0')">
<div class="num">{{ question.errorTotal }}</div>
<div class="txt">错题总数</div>
</div>
<!-- <div :class="activeClass == '1' ? 'right btn active' : 'right btn'" @click="tab('1')">
<div class="num">{{ question.total }}</div>
<div class="txt">做题总数</div>
</div> -->
</div>
<div class="exam-con">
<div class="sele" @click="screen.isShow = true">
<div class="title">选择题型</div>
<div class="txt">
<div class="t">{{ screen.checkedText }}</div>
<van-icon name="arrow" />
</div>
</div>
</div>
</div>
<div class="question-box" id="bottom-view">
<ul>
<template v-for="(item, index) in question.list">
<li :key="index" @click="listClick(item.question_id, index)">
<img src="../../assets/images/que-type1.png" alt="" v-if="item.question_type == '6'">
<img src="../../assets/images/que-type2.png" alt="" v-if="item.question_type == '5'">
<img src="../../assets/images/que-type3.png" alt="" v-if="item.question_type == '2'">
<img src="../../assets/images/que-type4.png" alt="" v-if="item.question_type == '1'">
<div class="text">{{ item.question_content }}</div>
<template v-if="!batchDel.selectShow">
<div class="del">
<div class="dels" @click.prevent.stop.stop="del(item.question_id)"></div>
<div :class="item.is_collection ? 'collect active' : 'collect'" @click.prevent.stop.stop="collectQuestion(item.question_id)"></div>
</div>
</template>
<template v-else>
<div :class="batchDel.countData.find(id => { return id === item.question_id }) ? 'opt active' : 'opt'"></div>
</template>
</li>
</template>
</ul>
<div class="loading" v-if="isLogding">
<div class="icon">
<van-loading color="#1989fa" />
</div>
</div>
</div>
<div class="sele-pop" v-if="screen.isShow">
<div class="picker">
<van-picker
show-toolbar
:columns="screen.columns"
@confirm="onConfirm"
@cancel="onCancel"
/>
</div>
</div>
<div class="btn-box">
<template v-if="!batchDel.selectShow">
<div class="w-btn" @click="batchToolShow">批量管理</div>
<div class="w-btn col">删除</div>
</template>
<template v-else>
<div class="z-btn" @click="batchDel.selectShow = false">返回</div>
<div class="z-btn mar" @click="allSelect">{{ batchDel.countData.length === question.list.length ? '取消全选' : '全选' }}</div>
<div :class="!batchDel.isDelBtn ? 'z-btn col' : 'z-btn'" @click="batchDelClick">删除</div>
</template>
</div>
</div>
</template>
<script>
import * as api from '@/api/my.js'
import { Toast } from 'vant'
export default {
metaInfo: {
title: '已做试题'
},
components: {
[Toast.name]: Toast
},
data() {
return {
batchDel: {
selectShow: false,
isDelBtn: false,
countData: []
},
screen: {
isShow: false,
checkedText: '全部',
columns: ['全部', '单选题', '多选题', '判断题', '案例题'],
screenVal: '0'
},
question: {
list: []
},
activeClass: '0',
changeGroup: false,
isLogding: false,
params: {
type: 1,
page: 1,
page_size: 50
},
scrollFlag: false
}
},
methods: {
batchToolShow() {
this.question.list.length ? this.batchDel.selectShow = true : Toast('没有可操作项')
},
batchDelClick() {
this.batchDel.isDelBtn ? this.del(this.batchDel.countData) : Toast('请选择删除内容')
},
allSelect() {
if (this.batchDel.countData.length === this.question.list.length) {
this.batchDel.countData = []
this.batchDel.isDelBtn = false
} else {
this.batchDel.countData = []
this.question.list.map(item => {
this.batchDel.countData.push(item.question_id)
})
this.batchDel.isDelBtn = true
}
},
listClick(id, index) {
this.batchDel.selectShow ? this.selectOpt(id) : this.goDetails(id, index)
},
goDetails(id, index) {
const pageCount = (index / 50).toString()
let num = 1
pageCount.indexOf('.') === -1 ? num = pageCount : num = parseInt(pageCount) + 1
window.localStorage.myQuestionDetileId = id
this.$router.push({
path: '/my/questionsDetails',
query: {
page: parseInt(num) === 0 ? 1 : num,
type: this.activeClass === '0' ? 1 : 3,
questionType: this.screen.screenVal
}
})
},
selectOpt(id) {
const isArr = this.batchDel.countData.findIndex(item => { return item === id })
const length = this.batchDel.countData.length
length === 0
? this.batchDel.countData.push(id)
: isArr === -1
? this.batchDel.countData.push(id)
: this.batchDel.countData.splice(isArr, 1)
this.batchDel.countData.length === 0
? this.batchDel.isDelBtn = false
: this.batchDel.isDelBtn = true
},
onCancel() {
this.screen.isShow = false
},
handleScroll(e) {
const contentH = document.getElementsByTagName('body')[0].offsetHeight
const clientH = document.documentElement.clientHeight
const pageScrollH = document.documentElement.scrollTop || document.body.scrollTop
if (this.scrollFlag) { return false }
if (contentH - clientH === pageScrollH) {
this.scrollFlag = true
this.isLogding = true
this.params.page = this.params.page + 1
this.initData()
}
},
// scrollDom() {
// const topViewH = document.getElementById('top-view').offsetHeight
// const clientHeight = document.documentElement.clientHeight
// const bottomView = document.getElementById('bottom-view')
// bottomView.style.height = (clientHeight - topViewH) + 'px'
// },
del(ids) {
const idGroup = Array.isArray(ids) ? ids : [ids]
const param = {
question_id: idGroup.toString(),
type: this.activeClass === '0' ? 1 : 3
}
api.deleteQuestion(param).then(res => {
if (res.code === 0) {
idGroup.map(id => {
const index = this.question.list.findIndex(item => { return item.question_id === id })
this.question.list.splice(index, 1)
})
if (this.question.list.length === 0) {
this.clear()
}
this.batchDel.isDelBtn = false
Toast('删除成功')
this.question.list.length ? this.initData(true) : this.initData()
}
})
},
collectQuestion(queId) {
// const idGroup = Array.isArray(ids) ? ids : [ids]
const queIds = Array.isArray(queId) ? queId : [queId]
queIds.map(id => {
const items = this.question.list.find(item => { return item.question_id === queId })
items.is_collection ? this.removeColl(queIds, () => {
Toast('取消收藏成功')
items.is_collection = false
}) : this.addColl(queIds, () => {
Toast('收藏成功')
items.is_collection = true
})
})
},
addColl(idGroup, callback) {
api.collectQuestion({ question_id: idGroup.toString() }).then(res => {
if (res.code === 0) {
callback()
}
})
},
removeColl(idGroup, callback) {
api.deleteQuestion({ type: 2, question_id: idGroup.toString() }).then(res => {
if (res.code === 0) {
callback()
}
})
},
tab(e) {
if (e === '0') {
this.params = {
type: 1,
page: 1,
page_size: 50
}
} else {
this.params = {
type: 3,
page: 1,
page_size: 50
}
}
this.screen.checkedText = '全部'
this.activeClass = e
this.clear()
document.getElementById('bottom-view').scrollTop = 0
this.initData()
},
onConfirm(value, index) {
const n = {
0: 0,
1: 1,
2: 2,
3: 6,
4: 5
}
this.params = {
type: this.activeClass === '0' ? 1 : 3,
question_type: n[index],
page: 1,
page_size: 50
}
this.screen.screenVal = n[index]
this.screen.checkedText = value
this.clear()
this.screen.isShow = false
this.initData()
},
clear() {
this.batchDel.selectShow = false
this.batchDel.isDelBtn = false
this.batchDel.countData = []
this.question.list = []
},
initData(isDel) {
api.getMyQuestion(this.params).then(res => {
if (!isDel) {
res.list.map(item => {
this.question.list.push(item)
})
}
this.question.total = res.total
this.question.errorTotal = res.error_total
// this.scrollDom()
if (res.list.length === 0) {
// Toast('没有更多了')
} else {
this.scrollFlag = false
}
this.isLogding = false
this.$forceUpdate()
})
}
},
mounted() {
this.initData()
window.addEventListener('scroll', this.handleScroll, true)
}
}
</script>
<style lang="scss" scoped>
.btn-box{
position: fixed;
bottom: 0;
left: 0;
width:100%;
height:1rem;
background:rgba(255,255,255,1);
box-shadow:0 0 .06rem 0 rgba(0,0,0,0.05);
display: flex;
padding: 0 .4rem;
.w-btn{
width:3rem;
height:.7rem;
background:#C62245;
border-radius:.12rem;
font-size:.3rem;
text-align: center;
line-height: .7rem;
color:rgba(255,255,255,1);
margin-top: .15rem;
}
.z-btn{
width:2.1rem;
height:.7rem;
background:#C62245;
border-radius:.12rem;
font-size: .3rem;
text-align: center;
line-height: .7rem;
margin: .15rem 0;
color: #fff;
}
.z-btn.mar{
margin: .15rem .2rem;
}
.z-btn.col{
background:rgba(247,247,247,1);
color:rgba(204,204,204,1);
}
.w-btn.col{
background:rgba(247,247,247,1);
color:rgba(204,204,204,1);
margin-left: .7rem;
}
}
.top-tab{
width: 6.7rem;
height: 1.76rem;
margin: 0 auto;
display: flex;
.btn{
margin: 0 auto;
height: 100%;
.num{
text-align: center;
line-height: 100%;
font-size:.46rem;
padding-top: .4rem;
color: #999;
}
.txt{
line-height: 100%;
font-size: .3rem;
margin-top: .2rem;
color: #999;
}
}
.active{
// border-bottom: 0.06rem solid #C62245;
.num{
color:#C62245;
}
.txt{
color:#C62245;
}
}
.right{
margin-left: auto;
margin-right: 1rem;
}
}
.exam-con{
padding: 0 .4rem;
.sele{
border-bottom: 0.01rem solid #eee;
height: 1.06rem;
display: flex;
align-items: center;
font-weight: bold;
margin-top: .4rem;
.title{
font-size: .26rem;
color: #222;
}
.txt{
font-size: .26rem;
margin-left: auto;
display: flex;
align-items: center;
}
}
}
.sele-pop{
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 99;
.picker{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
}
.question-box{
overflow-y: scroll;
padding: 0 .4rem;
ul{
padding-bottom: 1rem;
li{
position: relative;
border-bottom: 0.01rem solid #eee;
display: flex;
padding: .4rem 0;
img{
width: .48rem;
height: .6rem;
}
.text{
width: 5.2rem;
line-height:.34rem;
font-size: .26rem;
color:rgba(34,34,34,1);
margin-left: .2rem;
text-align: justify;
}
.del{
margin-left: auto;
font-size:.26rem;
color: #999;
line-height: 100%;
.dels{
width: .41rem;
height: .44rem;
background: url('../../assets/images/del.png');
background-size: 100% 100%;
}
.collect{
width: .44rem;
height: .44rem;
background: url('../../assets/images/collect.png');
background-size: 100% 100%;
margin-top: .2rem;
}
.active{
background: url('../../assets/images/collect2.png');
background-size: 100% 100%;
}
}
.opt{
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
width:.44rem;
height:.44rem;
background:rgba(204,204,204,1);
border-radius: 50%;
}
.opt.active{
background: url('../../assets/images/zq-icon.png');
background-size: 100% 100%;
background-color: none;
}
}
}
}
.loading{
position: relative;
width: 100%;
padding-bottom: .4rem;
.icon{
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
}
}
</style>
src/router/routes.js
浏览文件 @ a7f92672
......@@ -137,6 +137,13 @@ export default [
component: () => import('../pages/my/questionsList.vue'),
meta: { requiredLogin: true }
},
// 错题列表
{
path: '/errorQuestionList',
name: 'errorQuestionList',
component: () => import('../pages/my/errorQuestionList.vue'),
meta: { requiredLogin: true }
},
// 我的-已做试题详情
{
path: '/my/questionsDetails',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论