You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.7 KiB
91 lines
2.7 KiB
<template>
|
|
<view>
|
|
<view class="uni-padding-wrap uni-common-mt" v-if="isLoad">
|
|
|
|
<view v-for="(question,q_index) in questions" :key="q_index" class="question uni-flex uni-column">
|
|
<text class="title uni-center">{{question.question}}</text>
|
|
<radio-group>
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(answer,a_index) in question.answers" :key="a_index">
|
|
<view>
|
|
<radio :value="a_index"/>
|
|
</view>
|
|
<view>{{answer}}</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
|
|
<view class="uni-flex uni-row button-group question">
|
|
<view class="flex-item">
|
|
<button type="primary" @click="submit">提交答卷</button>
|
|
</view>
|
|
<view class="flex-item">
|
|
<button type="primary" class="reset" @click="reset">重置答卷</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "question",
|
|
data: function () {
|
|
return {
|
|
title: "垃圾百科测验",
|
|
questions:[],
|
|
isLoad:false
|
|
}
|
|
},
|
|
methods:{
|
|
reset:function () {
|
|
uni.reLaunch({
|
|
url: 'question'
|
|
});
|
|
},
|
|
submit:function () {
|
|
console.info("提交答卷")
|
|
}
|
|
},
|
|
onShow:function(){
|
|
console.info("加载试题中")
|
|
uni.showLoading({
|
|
title:"加载试题中"
|
|
})
|
|
let _this=this
|
|
console.info(_this)
|
|
setTimeout(function () {
|
|
_this.questions=[
|
|
{
|
|
question: "测试问题?",
|
|
answers: ["答案1", "答案2", "答案3", "答案4"]
|
|
},
|
|
{
|
|
question: "测试问题?",
|
|
answers: ["答案1", "答案2", "答案3", "答案4"]
|
|
},
|
|
{
|
|
question: "测试问题?",
|
|
answers: ["答案1", "答案2", "答案3", "答案4"]
|
|
}
|
|
]
|
|
_this.isLoad=true
|
|
uni.hideLoading()
|
|
},1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.uni-list-cell {
|
|
justify-content: flex-start
|
|
}
|
|
.question{
|
|
margin-top:10px;
|
|
}
|
|
.reset{
|
|
margin-left: 20px;
|
|
}
|
|
.button-group{
|
|
justify-content: center;
|
|
}
|
|
</style> |