小程序问卷调查从后台获取数据显示

<template>

<view class="questionBox" v-for="(item,index) in jsonData" :key="item.id">
                <!-- item.type==20  只显示文字标题-->
                <view v-if="item.content!=''" class="titleFlex">
                    <view v-html="item.content"></view>
                </view>
                <!-- 评价 10-->
                <view v-if="item.type=='textarea'" style="margin: 20rpx 10rpx;" @click.native="getCurIndex(index)">
                    <u-textarea v-model="item.answer" placeholder="请输入内容" @input="OtherFun"></u-textarea>
                </view>
                <!-- 单选 40-->
                <view v-else-if="item.type=='radio'">
                
                     <radio-group  @change="((label)=>{radioChange2(label, index)})"  class="mt_15"
                        v-model="item.answer">
                        <label style="display: block;" v-for="(status, i) in item.optionals" :key="status.id">
                            <radio :value="status.id" style="transform:scale(0.7)" />
                            <text>{{status.optionValue}}</text>
                        </label>
                    </radio-group> 

                </view>
                <!-- 多选 30-->
                <view v-else-if="item.type=='checkbox'">
                    <checkbox-group v-model="item.answer1" @change="((label)=>{checkboxChangeList2(label, index)})"
                        class="mt_15">
                        <label style="display: block;" class="uni-list-cell uni-list-cell-pd"
                            v-for="info in item.optionals" :key="info.id" @click="getCurIndex(index)">
                            <checkbox :value="info.id" style="transform:scale(0.7)" />
                            <text>{{info.optionValue}}</text>
                        </label>
                    </checkbox-group>
                </view>


            </view>

        <view class="btn" @click="goSubmit">提交</view>

 </template>

<script>
      export default {
        data() {
            return {
             
                cur_item_index: 0, //记录当前选项下标
                //json数据
                jsonData: [],//从后台获取
              
            
            };
        },

       

        mounted() {

        },
        created() {
        },
        methods: {
           
            // 获取点击选项的当前下标
            getCurIndex(index) {
                this.cur_item_index = index
                console.log('下标改变', this.cur_item_index)
             
            },

  //answer1放多选的值,是数组类型,其他字段的值放在answer里面,是string类型
         // 单选
            
            radioChange2(val, index) {
                  // console.log(val,index)
                //label是绑定的值,index是下标
                this.jsonData[index].answer = val.detail.value;
                console.log(this.jsonData[index].answer,index)
                },
            // 多选
            
            checkboxChangeList2(val, index){
                 // console.log(val,index)
                 this.jsonData[index].answer1 = val.detail.value;
                 console.log(this.jsonData[index].answer1,index)
            },
            // 多文本框
            OtherFun(e) {
                console.log('文本框', e)
                // this.jsonData[this.cur_item_index].answer = "";
                this.jsonData[this.cur_item_index].answer = e;
            },
            // 提交
          

goSubmit() {
                let answerList = this.jsonData;
                
                // 传输id和结果
                let data = {};
                data.txTime = new Date();
                data.volunteerTemplateList = answerList;
                
                console.log(data, 'datassss')
                xxxx(data).then((response) => {
                    if (response.code === 200) {
                        uni.showToast({
                            title: '提交成功!',
                            icon: 'success',
                            duration: 3000,
                            complete: () => {}
                        })
                      

                    }

                })
                // console.log('提交', jsonData)
            },

          
        }
    };
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值