pull/1/head
parent
c46b07d1da
commit
1f258721df
@ -0,0 +1,16 @@ |
||||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数 |
||||
"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…
Reference in new issue