huxiaofeng666
/
jwl-applet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

提交 #1

Merged
huxiaofeng666 merged 1 commits from dev-hxf into master 1 year ago
Conversation 0 Commits 1 Files Changed 2
2 changed files with 528 additions and 132 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 16
      .hbuilderx/launch.json
  2. 644
      src/pages/questionBank/components/Question.vue

16
.hbuilderx/launch.json
Unescape View File

@ -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"
}
]
}

644
src/pages/questionBank/components/Question.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save