vue+vant 动态表单

效果如图：

代码如下：

<template>
  <div class="Question w100 pb10 bgf">
    <div class="fz14 color3 pt10 borderbe0 tc pb15 mt10">
      <div class="img"></div>
      <div class="fw">平台满意度问卷</div>
    </div>

    <van-form @submit="onSubmit" class="mt10">
      <div v-for="(item ,index) in questionArr" :key='index' class="ml15 mr15">
        <div class="color3 fz14 fw">{{item.title}}</div>
        <van-radio-group v-model="form[item.key]" class="flex justc alic wrap mt10 mb10" v-if="item.options">
          <van-radio :name="n.val+''" v-for="(n,j) in item.options" :key='j' class="inline h40 flex justc alic mb10 borRad">
            <span slot='icon' slot-scope="props" :class="['opt',props.checked ? 'active':'tt',j%2==0 ? 'mr10':'' ]">{{n.title}}</span>
          </van-radio>
        </van-radio-group>
        <van-field
          v-else
          v-model="form[item.key]"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入留言"
        />
      </div>
      
      <div class="tc borderte0">
        <van-button block type="info" class="inline mt10" style="width:50%" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import wx from 'weixin-js-sdk'

export default {
  data() {
    return {
      type:'',
      form:{},
      questionArr:[],
    };
  },
  name: "Question",
  created() {
    //type : 1患者，2志愿者
    this.type = this.$route.query.type
    if(this.$route.query.type == 1){
      this.questionArr = [
        {title:'1.您对我们的电话随访服务是否满意？',key:'surveyOne',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'2.您对我们电话随访的哪块服务内容比较满意？',key:'surveyTwo',options:[{title:'疑问解答',val:1},{title:'运动饮食建议',val:2},{title:'日常关爱',val:3},{title:'信息反馈',val:4}]},
        {title:'3.您对我们的热线接听服务是否满意？',key:'surveyThree',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'4.平台热线服务是否及时解答了您提出的问题？',key:'surveyFour',options:[{title:'非常及时',val:1},{title:'较及时',val:2},{title:'一般',val:3},{title:'非常不及时',val:4}]},
        {title:'5.您对我们平台推送的文章是否满意？',key:'surveyFive',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'6.您希望平台更多的推送哪种类型的文章？',key:'surveySix',options:[{title:'疾病相关',val:1},{title:'用药相关',val:2},{title:'护理相关',val:3},{title:'饮食运动相关',val:4}]},
        {title:'7.您对我们的"名医在线"答疑及教育服务是否满意？',key:'surveySeven',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'8.您对我们“大讲堂”的服务是否满意（如果您参加过请填写）？',key:'surveyEight',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'9.您是否有线上咨询您的主治医生的需求？',key:'surveyNine',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'10.您对我们药品援助服务是否满意？',key:'surveyTen',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'11.您对我们平台服务的整体满意度是多少？',key:'surveyEleven',options:[{title:100,val:1},{title:80,val:2},{title:60,val:3},{title:'60以下',val:4}]},
        {title:'12.您对平台有什么建议？',key:'surveyRemark'},
      ]
      this.form = {
        openid:'',
        surveyOne:'',
        surveyTwo:'',
        surveyThree:'',
        surveyFour:'',
        surveyFive:'',
        surveySix:'',
        surveySeven:'',
        surveyEight:'',
        surveyNine:'',
        surveyTen:'',
        surveyEleven:'',
        surveyRemark:''
      }
    }else{
      this.questionArr = [
        {title:'1.您对平台的援助审核及时性是否满意？',key:'surveyOne',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'2.您对平台脱失风险患者的反馈及时性是否满意？',key:'surveyTwo',options:[{title:'疑问解答',val:1},{title:'运动饮食建议',val:2},{title:'日常关爱',val:3},{title:'信息反馈',val:4}]},
        {title:'3.您对平台随访专员的服务是否满意？',key:'surveyThree',options:[{title:'非常好',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不满意',val:4}]},
        {title:'4.您对平台反馈的患者用药信息是否满意？',key:'surveyFour',options:[{title:'非常及时',val:1},{title:'较及时',val:2},{title:'一般',val:3},{title:'非常不及时',val:4}]},
        {title:'5.您是否希望您负责的医院入驻平台医生端？',key:'surveyFive',options:[{title:'非常希望',val:1},{title:'还可以',val:2},{title:'一般',val:3},{title:'不希望',val:4}]},
        {title:'6.您对我们平台服务的整体满意度是多少？',key:'surveySix',options:[{title:100,val:1},{title:80,val:2},{title:60,val:3},{title:'60以下',val:4}]},
        {title:'7.您对平台有什么建议？',key:'surveyRemark'},
      ]
      this.form = {
        openid:'',
        surveyOne:'',
        surveyTwo:'',
        surveyThree:'',
        surveyFour:'',
        surveyFive:'',
        surveySix:'',
        surveyRemark:''
      }
    }
    
    this.check()
  },
  methods: {
    check(){
      let url = this.type == 1?'/survey/checkPatient':'/survey/checkBaseUser';
      axios.get(this.$my.api+url+'?openid='+localStorage.getItem('openid'))
        .then(res => {
          if(res.data&&res.data.code == 200){
            //我什么都不干，咋滴
          }else{
            this.$toast(res.data.message)
            setTimeout(()=>{
              //不需要jssdk 两种方法都行
              document.addEventListener('WeixinJSBridgeReady', function() {
                  WeixinJSBridge.call('closeWindow');
              }, false);
              //这个可以关闭ios系统的手机
              WeixinJSBridge.call('closeWindow');
              //需要jssdk
              wx.closeWindow() 
            },1000)
          }
        }, response => {
            console.log("error");
        });
    },
    onSubmit(values) {
      console.log('submit', this.form);
      let rules = {}
      let url = this.type == 1?'/survey/setPatientSurvey':'/survey/setbaseUserSurvey';
      let data = {
        ...this.form,
        openid:localStorage.getItem('openid')
      }
      if(this.type == 1){
        rules = {
          surveyOne:'1',
          surveyTwo:'2',
          surveyThree:'3',
          surveyFour:'4',
          surveyFive:'5',
          surveySix:'6',
          surveySeven:'7',
          surveyNine:'9',
          surveyTen:'10',
          surveyEleven:'11',
        }
      }else{
        rules = {
          surveyOne:'1',
          surveyTwo:'2',
          surveyThree:'3',
          surveyFour:'4',
          surveyFive:'5',
          surveySix:'6',
        }
      }
      if(Object.keys(rules).find(item=>this.form[item] == '')){
        this.$toast(`请选择第${rules[Object.keys(rules).find(item=>this.form[item] == '')]}题`)
        return false
      }
      axios.post(this.$my.api+url,data)
        .then(res => {
          if(res.data&&res.data.code == 200){
            this.$toast.loading({
              type:'success',
              mask: true,
              message: res.data.message
            });
            document.addEventListener('WeixinJSBridgeReady', function() {
                WeixinJSBridge.call('closeWindow');
            }, false);
            //这个可以关闭ios系统的手机
            WeixinJSBridge.call('closeWindow');
          }else{
            this.$toast(res.data.message)
          }
        }, response => {
            console.log("error");
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active{background: #00A0E9 !important;color: #fff;}
.opt{
  display: inline-block;
  width:1.6rem;
  height:.4rem;
  line-height: .4rem;
  background:#F2F2F2;
  text-align: center;
  border-radius:.05rem;
}
.img{
  display:inline-block;
  width: 60%;height: 1rem;
  background: url('../../assets/img/logo.jpg') no-repeat center center;
  background-size: 100% 130%;
}
.h40{height: .4rem;}
.h40 >>> .van-radio__icon{height: .4rem;}
.Question{height:max-content;}
</style>

备注： 心态随着股市崩了，不要走，决战到天明！