提交 #1

Merged
huxiaofeng666 merged 1 commits from dev-hxf into master 1 year ago
  1. 16
      .hbuilderx/launch.json
  2. 644
      src/pages/questionBank/components/Question.vue

@ -0,0 +1,16 @@
{ // launch.json configurations app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtypelocalremote, localremote
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

@ -1,146 +1,526 @@
<template>
<view style="margin-top: 100px;">
<view class="flex ai-c jc-c">
<view class="flex type_box">
<view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
<view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
</view>
</view>
<view class="m14lr">
<text class="tag_box">{{questionList[currentIndex].questionTypeDesc}}</text>
<text class="fs18">{{questionList[currentIndex].questionDesc}}</text>
</view>
<view class="flex m14lr ai-c mt20" v-for="(item,index) in questionList[currentIndex].optionList" :key="item.op">
<template v-if="clickAnswer&&item.op===questionList[currentIndex].rightAnswer">
<u-icon name="checkmark-circle-fill" color="#05C341" size="30"></u-icon>
</template>
<template v-else-if="clickAnswer===item.op&&item.op!==questionList[currentIndex].rightAnswer">
<u-icon name="close-circle-fill" color="red" size="30"></u-icon>
</template>
<template v-else-if="!clickAnswer">
<view class="option_item">{{item.op}}</view>
</template>
<text class="fs18">{{item.opDesc}}</text>
</view>
</view>
<view style="margin-top: 100px;">
<view class="flex ai-c jc-c">
<view class="flex type_box jc-sb ai-c">
<view class="type_item" :class="tCurrent==0?'checked':'unchecked'" @tap="sectionChange(0)">答题</view>
<view class="type_item" :class="tCurrent==1?'checked':'unchecked'" @tap="sectionChange(1)">背题</view>
</view>
</view>
<swiper class="swiper" :current="swiperIndex" :duration="duration" :autoplay="false" :disable-programmatic-animation="true" @change="onChange" @animationfinish="onAnimationfinish">
<swiper-item v-for="(quesItem,quesIndex) in swiperList" :key="quesIndex">
<scroll-view scroll-y="true" class="swiper-scroll">
<view>
<view class="m14lr">
<text class="tag_box">{{quesItem.questionTypeDesc}}</text>
<text class="fs18">{{quesItem.questionDesc}}</text>
</view>
<view class="flex m14lr ai-c mt20" v-for="(item,index) in quesItem.optionList"
:key="item.op" @tap="answerQues(item.op,index)">
<template
v-if="quesItem.clickAnswer&&item.op===quesItem.rightOp">
<u-icon class="mr15" name="checkmark-circle-fill" color="#05C341" size="30"></u-icon>
</template>
<template
v-else-if="quesItem.clickAnswer===item.op&&item.op!==quesItem.rightAnswer">
<u-icon class="mr15" name="close-circle-fill" color="red" size="30"></u-icon>
</template>
<template v-else-if="!item.chooseOption">
<view class="option_item">{{item.op}}</view>
</template>
<text class="fs18">{{item.opDesc}}</text>
</view>
<view class="m14lr mt30"
v-if="quesItem.clickAnswer&&quesItem.clickAnswer!==quesItem.rightOp || tCurrent===1">
<view class="answer_box">
<text class="fs18 fw600 cor-000">答案:{{quesItem.rightOp}}</text>
<view class="fs18 cor-000" style="text-indent:2em;"> 这里是相关解释文字这里是相关解释文字相关解释文字</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<u-modal :show="tipShow" :title="title" :content="content">
<template #confirmButton>
<view class="p10" >
<u-button :customStyle="{width:'100%',height:'68rpx',borderRadius:'34rpx'}">查看练题结果</u-button>
</view>
</template>
</u-modal>
</view>
</template>
<script>
export default {
data() {
return {
tCurrent:0,
clickAnswer:undefined,
questionList:[],
currentIndex:0,
}
},
onshow(){
this.getQuestionList()
},
methods: {
sectionChange(index){
this.tCurrent=index
},
getQuestionList(){
this.questionList=[{
questionId:0,
questionTypeDesc:'单选',
questionDesc:'在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList:[{
op:'A',
opDesc:'注意新手标志'
},{
op:'B',
opDesc:'注意新手标志'
},{
op:'C',
opDesc:'注意新手标志'
},{
op:'D',
opDesc:'注意新手标志'
}],
rightOp:'C',
},{
questionId:1,
questionDesc:'在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList:[{
op:'A',
opDesc:'注意新手标志'
},{
op:'B',
opDesc:'注意新手标志'
},{
op:'C',
opDesc:'注意新手标志'
},{
op:'D',
opDesc:'注意新手标志'
}],
rightOp:'B',
},{
questionId:2,
questionDesc:'在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList:[{
op:'A',
opDesc:'注意新手标志'
},{
op:'B',
opDesc:'注意新手标志'
},{
op:'C',
opDesc:'注意新手标志'
},{
op:'D',
opDesc:'注意新手标志'
}],
rightOp:'A',
}]
}
}
}
export default {
data() {
return {
content:'太棒啦,已答完最后一题',
tipShow:false,
title:'提示',
tCurrent:0,
questionList: [],//
swiperList: [], //
swiperIndex: 0, //
isChange: false, //
topicIndex: 0, //
duration: 200, //
}
},
onLoad() {
this.getQuestionList()
this.renderSwiper(0)
},
methods: {
// swiper
renderSwiper(index) {
let list = [];
let current = 1;
if (this.questionList[index - 1]) {
list.push(this.questionList[index - 1]);
} else {
current = 0;
}
list.push(this.questionList[index])
if (this.questionList[index + 1]) {
list.push(this.questionList[index + 1]);
}
this.duration = 0;
setTimeout(() => {
this.swiperList = list;
this.swiperIndex = current;
setTimeout(() => {
this.duration = 200;
}, 100)
}, 50)
},
//
onChange(e) {
//
if (e.detail.source != "touch") return;
//
this.isChange = true;
//
if (e.detail.current > this.swiperIndex) {
this.topicIndex++;
} else {
//
this.topicIndex--;
}
// Vue
this.swiperIndex = e.detail.current;
},
//
onAnimationfinish(e) {
if (!this.isChange) return;
this.isChange = false;
setTimeout(() => {
this.renderSwiper(this.topicIndex);
}, 10);
},
//
pickerTopic(index) {
this.topicIndex = index;
this.renderSwiper(index);
},
//
answerQues(op, index) {
if (!this.questionList[this.topicIndex].clickAnswer) {
this.questionList[this.topicIndex].optionList[index].chooseOption = op
this.questionList[this.topicIndex].clickAnswer = op
}
if(this.tCurrent!==1){
if(this.questionList[this.topicIndex].clickAnswer===this.questionList[this.topicIndex].rightOp){
if(this.topicIndex<=this.questionList.length-1){
if(this.topicIndex===this.questionList.length-1){
this.tipShow=true
}else{
this.tipShow=false
}
this.topicIndex ++;
setTimeout(()=>{
this.renderSwiper(this.topicIndex);
},1000)
}
}
}
},
sectionChange(index) {
this.tCurrent = index
this.getQuestionList()
this.renderSwiper(0)
},
getQuestionList() {
this.questionList = [{
questionId: 0,
questionTypeDesc: '单选',
questionDesc: '第一题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'C',
}, {
questionId: 1,
questionTypeDesc: '单选',
questionDesc: '第二题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'B',
}, {
questionId: 2,
questionTypeDesc: '单选',
questionDesc: '第三题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
},
{
questionId: 3,
questionTypeDesc: '单选',
questionDesc: '第四题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 4,
questionTypeDesc: '单选',
questionDesc: '第5题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
},
{
questionId: 5,
questionTypeDesc: '单选',
questionDesc: '第6题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 6,
questionTypeDesc: '单选',
questionDesc: '第7题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 7,
questionTypeDesc: '单选',
questionDesc: '第8题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 8,
questionTypeDesc: '单选',
questionDesc: '第9题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'C',
}, {
questionId: 9,
questionTypeDesc: '单选',
questionDesc: '第10题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'B',
}, {
questionId: 10,
questionTypeDesc: '单选',
questionDesc: '第11题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
},
{
questionId: 11,
questionTypeDesc: '单选',
questionDesc: '第12题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 12,
questionTypeDesc: '单选',
questionDesc: '第13题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
},
{
questionId: 13,
questionTypeDesc: '单选',
questionDesc: '第14题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 14,
questionTypeDesc: '单选',
questionDesc: '第15题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}, {
questionId: 15,
questionTypeDesc: '单选',
questionDesc: '第16题,在实习期内驾驶机动车的,应当在车身后部粘贴或者悬挂哪种标志?',
optionList: [{
op: 'A',
opDesc: '注意新手标志'
}, {
op: 'B',
opDesc: '注意新手标志'
}, {
op: 'C',
opDesc: '注意新手标志'
}, {
op: 'D',
opDesc: '注意新手标志'
}],
rightOp: 'A',
}
]
if(this.tCurrent===1){
this.questionList=this.questionList.map(item=>{
return{
...item,
clickAnswer:item.rightOp
}
})
}
}
}
}
</script>
<style scoped>
.type_box{
width: 280rpx;
height: 72rpx;
background-color: #FFFFFF;
border-radius: 8rpx;
.type_box {
width: 280rpx;
height: 72rpx;
background-color: #FFFFFF;
border-radius: 8rpx;
}
.type_item{
text-align: center;
line-height: 64rpx;
width: 126rpx;
height: 64rpx;
border-radius: 8rpx;
.type_item {
text-align: center;
line-height: 64rpx;
width: 126rpx;
height: 64rpx;
border-radius: 8rpx;
}
.checked{
color: #fff;
background-color: #05C341;
.checked {
color: #fff;
background-color: #05C341;
}
.unchecked{
color: #666;
.unchecked {
color: #666;
}
.tag_box{
display: inline-block;
width: 78rpx;
height: 42rpx;
background: #05C341;
border-radius: 8rpx;
text-align: center;
line-height: 42rpx;
color: #fff;
font-size: 12px;
margin-right: 5px;
.tag_box {
display: inline-block;
width: 78rpx;
height: 42rpx;
background: #05C341;
border-radius: 8rpx;
text-align: center;
line-height: 42rpx;
color: #fff;
font-size: 12px;
margin-right: 5px;
}
.option_item{
width: 60rpx;
height: 60rpx;
border: 1px solid #666;
border-radius: 50%;
text-align: center;
line-height: 60rpx;
margin-right: 30rpx;
.option_item {
width: 60rpx;
height: 60rpx;
border: 1px solid #666;
border-radius: 50%;
text-align: center;
line-height: 60rpx;
margin-right: 30rpx;
}
.swiper {
height: 100vh;
}
.answer_box {
width: 100%;
padding: 30rpx;
background: #EEEEEE;
border-radius: 20rpx;
}
</style>

Loading…
Cancel
Save