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>

備註： 心態隨着股市崩了，不要走，決戰到天明！