Skip to content

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

updata

上级 f2598e58
隐藏空白字符变更
内嵌 并排
正在显示 包含 679 行增加 和 72 行删除
src/pages/my/collectQuestions.vue 0 → 100644
浏览文件 @ 2e082725
<template>
<div>
<div id="top-view">
<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)">
<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: 2,
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.goDetail(id, index)
// this.$router.push({
// path: '/my/questionsDetails',
// query: {
// id: id,
// isError: this.params.is_error
// }
// })
},
goDetail(id) {
// this.$router.push({
// path: '/my/questionsDetails',
// query: {
// id: id,
// }
// })
},
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: 2
}
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.initData(true)
}
})
},
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: 5,
4: 6
}
this.params = {
type: 2,
question_type: n[index],
page: 1,
page_size: 50
}
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:rgba(43,124,233,1);
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:rgba(43,124,233,1);
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-left: 1rem;
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 rgba(43,124,233,1);
.num{
color:rgba(43,124,233,1);
}
.txt{
color:rgba(43,124,233,1);
}
}
.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/pages/my/index.vue
浏览文件 @ 2e082725
......@@ -33,6 +33,10 @@ export default {
title: '已做试题',
url: '/my/questionsList'
},
{
title: '收藏试题',
url: '/my/collectQuestions'
},
// {
// title: '已学课程',
// url: '/my/buyCourses'
......
src/pages/my/questionsDetails.vue
浏览文件 @ 2e082725
......@@ -4,19 +4,19 @@
<div class="topic-box">
<swiper ref="mySwiper" :options="swiperOptions">
<template v-for="item in questionData.list">
<swiper-slide :key="item.id" :data-id="item.id">
<swiper-slide :key="item.id" :data-id="item.question_id">
<div id="top-view">
<div class="tool-box">
<div class="time">{{ item.sheet_time }}</div>
<div class="tool-all">
<div class="icon1"></div>
<div class="icon2"></div>
<div v-if="$route.query.type != 2" :class="item.is_collection ? 'icon1 active' : 'icon1'" @click="collectQuestion(item.question_id)"></div>
<div class="icon2" @click="delQuestion(item.question_id)"></div>
</div>
</div>
</div>
<div class="title">
<div class="type">{{ other.type[item.question_type] }}</div>
<div class="count">{{ item.num }}/{{ questionData.error_total }}</div>
<div class="count">{{ item.num }}/{{ $route.query.type == 1 ? questionData.error_total : $route.query.type == 2 ? questionData.collection_total : questionData.total }}</div>
</div>
<div class="topic-bt" v-if="item.question_type == '5'" v-html="item.common_content"></div>
<div class="topic" v-html="item.question_content"></div>
......@@ -35,11 +35,27 @@
</ul>
<div class="analy" v-show="isAnalysis">
<div class="tit">答案解析</div>
<div class="txt">正确答案：<span>A</span></div>
<div class="txt">您的答案：<span>A</span></div>
<div class="txt">正确答案：
<span>
{{
item.question_answer.map((i, index) => {
return A_Z[item.question_options.findIndex(id => { return id.id === i })]
}).toString().replace(new RegExp(',', 'g'), '')
}}
</span>
</div>
<div class="txt">您的答案：
<span>
{{
item.user_answer.map((i, index) => {
return A_Z[item.question_options.findIndex(id => { return id.id === i })]
}).toString().replace(new RegExp(',', 'g'), '')
}}
</span>
</div>
<div class="exp">
<p class="name">解析：</p>
<p class="nr">：</p>
<p class="nr" v-html="item.question_analysis"></p>
</div>
</div>
</swiper-slide>
......@@ -48,8 +64,14 @@
</div>
<template>
<div class="btn-box">
<div class="padd">
<div class="analysis" @click="isAnalysis = !isAnalysis" v-if="$route.query.type == 1">查看解析</div>
<div class="padd" v-if="$route.query.type != 2">
<div class="analysis" @click="isAnalysis = !isAnalysis" v-if="$route.query.type == 1 || $route.query.type == 2">查看解析</div>
<div class="btn left" @click="switchQuestions('left')">上一题</div>
<div class="btn right" @click="switchQuestions('right')" >下一题</div>
</div>
<div class="padd new" v-else>
<div class="ysc">已收藏</div>
<div class="analysis" @click="isAnalysis = !isAnalysis" v-if="$route.query.type == 1 || $route.query.type == 2">查看解析</div>
<div class="btn left" @click="switchQuestions('left')">上一题</div>
<div class="btn right" @click="switchQuestions('right')" >下一题</div>
</div>
......@@ -80,7 +102,8 @@ export default {
data() {
const _this = this
return {
i: 1,
pages: 0,
isMove: true,
other: {
type: {
1: '单选题',
......@@ -89,13 +112,31 @@ export default {
6: '判断题'
}
},
questionData: [],
A_Z: ['A', 'B', 'C', 'D', 'E', 'F'],
questionData: {
list: []
},
isAnalysis: false,
swiperOptions: {
observer: true,
autoHeight: true,
on: {
slideChangeTransitionStart: function() {
const qId = this.slides[this.activeIndex].attributes['data-id'].nodeValue
const item = _this.questionData.list.find(item => { return item.question_id === qId })
const totalNum = parseInt(_this.$route.query.type) === 1 ? _this.questionData.error_total : _this.questionData.total
if (this.activeIndex === this.slides.length - 1) {
if (item.num < totalNum) {
_this.pages++
_this.initData(_this.pages)
}
}
if (this.activeIndex === 0) {
if (item.num > 5) {
_this.pages--
_this.initData(_this.pages, 1)
}
}
_this.switchPages()
}
}
......@@ -104,9 +145,10 @@ export default {
},
created() {
parseInt(this.$route.query.type) === 3 ? this.isAnalysis = true : this.isAnalysis = false
this.initData()
},
mounted() {
this.pages = this.$route.query.page
this.initData(this.pages)
},
computed: {
swiper() {
......@@ -114,6 +156,54 @@ export default {
}
},
methods: {
collectQuestion(queId) {
const queIds = Array.isArray(queId) ? queId : [queId]
queIds.map(id => {
const items = this.questionData.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()
}
})
},
delQuestion(ids) {
const idGroup = Array.isArray(ids) ? ids : [ids]
const param = {
question_id: idGroup.toString(),
type: this.$route.query.type
}
api.deleteQuestion(param).then(res => {
if (res.code === 0) {
const isNext = this.questionData.list[this.questionData.list.findIndex(item => { return item.question_id === ids }) + 1]
isNext === undefined ? this.swiper.slidePrev() : this.swiper.slideNext()
this.$router.replace({
path: '/my/questionsDetails',
query: {
id: this.swiper.slides[this.swiper.activeIndex].attributes['data-id'].nodeValue,
page: this.$route.query.page,
type: this.$route.query.type
}
})
}
})
},
switchQuestions(e) {
if (e === 'left') {
this.swiper.slidePrev()
......@@ -125,62 +215,59 @@ export default {
parseInt(this.$route.query.type) === 3 ? this.isAnalysis = true : this.isAnalysis = false
},
selectOptions(item, opt) {
if (parseInt(item.question_type) === 1 || parseInt(item.question_type) === 6) {
if (parseInt(item.question_type) === 1 || parseInt(item.question_type) === 6 || (parseInt(item.question_type) === 5 && item.answer_count === 1)) {
item.user_answer = [opt.id]
} else {
const fIndex = item.user_answer.findIndex(id => { return id === opt.id })
fIndex === -1 ? item.user_answer.push(opt.id) : item.user_answer.splice(fIndex, 1)
}
},
delQuestion(id) {
const param = {
id: id,
type: this.$route.query.type
initData(pages, isPush) {
const params = {
type: this.$route.query.type,
page: pages,
page_size: 50
}
api.deleteQuestion(param).then(res => {
if (res.code === 0) {
Toast('删除成功')
this.initData()
api.getMyQuestion(params).then(res => {
this.questionData.error_total = res.error_total
this.questionData.total = res.total
this.questionData.collection_total = res.collection_total
const list = []
res.list.map(item => {
const isCf = this.questionData.list.findIndex(i => { return i.question_id === item.question_id })
isCf === -1 && list.push(item)
})
if (!isPush) {
if (this.swiper.slides.length !== 0) {
this.questionData.list = [...this.questionData.list, ...list]
this.swiper.slideTo(0, 0, false)
} else {
this.questionData.list = [...this.questionData.list, ...list]
}
if (this.questionData.list.length > 90) {
for (let i = 0; i < 50; i++) {
this.questionData.list.splice(0, 1)
}
}
} else {
if (this.swiper.slides.length !== 0) {
this.questionData.list = [...list, ...this.questionData.list]
this.swiper.slideTo(this.questionData.list.length - 1, 0, false)
} else {
this.questionData.list = [...list, ...this.questionData.list]
}
if (this.questionData.list.length > 90) {
for (let i = 0; i < 50; i++) {
this.questionData.list.splice(this.questionData.list.length - 1, 1)
}
}
}
})
},
collectQuestion() {
api.collectQuestion({ question_id: 111 }).then(res => {
if (res.code === 0) {
Toast('删除成功')
this.initData()
if (this.isMove) {
this.isMove = false
const goIndex = this.questionData.list.findIndex(item => { return item.question_id === this.$route.query.id })
this.swiper.slideTo(goIndex, 0, false)
}
})
},
initData() {
const datas = {
error_total: 10,
list: []
}
for (let i = 0; i < 50; i++) {
const data = {
num: 1,
id: `${i}`,
question_type: '1',
question_content: 'xinjia',
common_content: null,
question_options: [
{
id: '667965608969004648412',
option: 'A选项'
},
{
id: '667965608969004648512',
option: 'B选项'
}
],
question_answer: ['667965608969004648412'],
question_analysis: '解析',
answer_count: 1,
user_answer: ['11111'],
sheet_time: '2020-07xxxx'
}
datas.list.push(data)
}
this.questionData = datas
}
}
}
......@@ -222,14 +309,18 @@ export default {
.icon1{
width: .44rem;
height: .44rem;
background: url('../../assets/images/del.png');
background: url('../../assets/images/collect.png');
background-size: 100% 100%;
margin-right: .53rem;
}
.icon1.active{
background: url('../../assets/images/collect2.png');
background-size: 100% 100%;
}
.icon2{
width: .41rem;
height: .44rem;
background: url('../../assets/images/collect.png');
background: url('../../assets/images/del.png');
background-size: 100% 100%;
}
}
......@@ -382,6 +473,19 @@ export default {
line-height: .7rem;
color: #fff;
}
.new{
.btn{
width:1.7rem;
height:.7rem;
}
.ysc{
color: #ccc;
}
.analysis{
margin-left: .4rem;
margin-right: .4rem;
}
}
.left{
margin-right: .4rem;
}
......
src/pages/my/questionsList.vue
浏览文件 @ 2e082725
......@@ -24,7 +24,7 @@
<div class="question-box" id="bottom-view">
<ul>
<template v-for="(item, index) in question.list">
<li :key="index" @click="listClick(item.question_id)">
<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'">
......@@ -128,15 +128,21 @@ export default {
this.batchDel.isDelBtn = true
}
},
listClick(id) {
this.batchDel.selectShow ? this.selectOpt(id) : this.onCancel()
// this.$router.push({
// path: '/my/questionsDetails',
// query: {
// id: id,
// isError: this.params.is_error
// }
// })
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
this.$router.push({
path: '/my/questionsDetails',
query: {
id: id,
page: parseInt(num) === 0 ? 1 : num,
type: this.activeClass === '0' ? 1 : 3
}
})
},
selectOpt(id) {
const isArr = this.batchDel.countData.findIndex(item => { return item === id })
......@@ -402,6 +408,7 @@ export default {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 99;
.picker{
width: 100%;
position: absolute;
......
src/router/routes.js
浏览文件 @ 2e082725
......@@ -124,6 +124,13 @@ export default [
component: () => import('../pages/my/questionsDetails.vue'),
meta: { requiredLogin: true }
},
// 我的-收藏试题
{
path: '/my/collectQuestions',
name: 'collectQuestions',
component: () => import('../pages/my/collectQuestions.vue'),
meta: { requiredLogin: true }
},
// 我的-发票页面
{
path: '/my/invoice',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论