uni-app实现问卷调查试卷

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])
								}
							}
						}
					}
				}
			},