uni-app实现问卷调查试卷
先向后台请求试卷内容,请求方法如下:
data() {
return {
sjlist:[],
das:[],
tmidlist:[]
}
},
onLoad() {
this.getdata();
},
methods: {
// 请求页面数据
getdata(){
var access_token=uni.getStorageSync("access_token");
var userid=uni.getStorageSync("userId");
var category=uni.getStorageSync("category");
var type=''
if(category==1){
type="风险评估问卷(个人)"
}else{
type="风险评估问卷(机构)"
}
uni.request({
url: getApp().globalData.baseUrl+'/admin/syssjgl/sjmx',
data: {
type:type
},
header: {
isToken: false,
'TENANT-ID': "1566441363",
'Authorization':'Bearer'+access_token
},
success: (res) => {
console.log(res.data.data)
this.sjmc=res.data.data[0].sjmc
for(var i=0;i<res.data.data.length;i++){
this.sjlist.push(res.data.data[i])
}
}
});
}
}
数据可以是后台请求返回的,若不是就自己写吧,结果类似。
返回的数据如下(有三四层嵌套):
是一个三层嵌套的数组。最外层数组sjlist,里面有大标题就有几个对象;
每个对象里有sjid属性,tms选项数组,里面有几题就有几个对象;
tms数组里每个对象里有tmid属性,das选项数组,里面有几个选项就有几个对象;
das数组里每个对象有dasid,以及具体信息。
之后在界面上用三层v-for循环嵌套
第一层v-for循环显示大标题,
第二次v-for循环显示题目,
第三次v-for循环显示答案选项,第三层要结合radio-group实现单选。
代码如下:
<view v-for="(sjitem, jsi) of sjlist" :key="jsi">
<view class="title1">{{sjitem.ssfl}}</view>
<view v-for="(tmitem, tmi) of sjitem.tms" :key="tmi" class="title2">
<view>{{tmitem.tmxh+tmitem.tmmc}}</view>
<radio-group @change="radioChange($event,tmitem)">
<label v-for="(item, i) of tmitem.das" :key="i">
<view class="title2">
<radio :value="item.id.toString()" :checked="item.checked" />
<text>{{item.xxxh+item.xxmc}}</text>
</view>
</label>
</radio-group>
</view>
</view>
效果就出来了,如下图所示:
如何拿到试卷选项的答案呢
首先界面radio选项的时候,value值我已经绑定了das的id,所以value就是id,记得加上.toString(),不然会报错。然后radio-group加上@change="radioChange($event,tmitem)"事件,并传入这个题目对象的所有选项答案
获取方法如下:
// 选择项结果
radioChange($event,tmitem){
for(var j=0;j<this.das.length;j++){
this.tmidlist.push(this.das[j].tmid);
}
for(var i=0;i<tmitem.das.length;i++){
if($event.detail.value==tmitem.das[i].id){if(this.tmidlist.indexOf(tmitem.tmId)==-1){
this.das.push(tmitem.das[i])
}else{
for(var n=0;n<this.das.length;n++){
if(tmitem.tmId==this.das[n].tmid){
this.das.splice(n,1);
this.das.push(tmitem.das[i])
}
}
}
}
}
},