小程序 后台传值根据type判断checkbox，radio，text、input，date 等等

<template>
  <view>
    <view class="wrap2">
      <form @submit="formSubmit">
        <view v-for="(item,index) in list" :key="index">
          <view v-if="item.type==='input'||item.type==='password'">
            <input :type="item.type" class="uni-input gyInput" :name="item.name" placeholder="请输入"/>
          </view>
          <view v-else-if="item.type==='select'">
            <picker :name="item.name" @change="bindPickerChange" :value="item.value" :range="item.array" class="gy_select">
              <view class="uni-input">{{item.array[item.value]}}</view>
            </picker>
          </view>
          <view v-else-if="item.type==='date'">
            <picker mode="date" :name="item.name" :value="item.date" :start="startDate" :end="endDate" @change="bindDateChange">
              <view class="uni-input">{{item.date}}</view>
            </picker>
          </view>
          <view v-else-if="item.type==='checkbox'">
            <checkbox-group @change="checkboxChange" :name="item.name">
              <label class="uni-list-cell uni-list-cell-pd" v-for="arr in item.array" :key="arr.value">
                <view>
                  <checkbox :value="arr.value" :checked="arr.checked" />
                </view>
                <view>{{arr.name}}</view>
              </label>
            </checkbox-group>
          </view>
          <view v-else-if="item.type==='radio'">
            <radio-group @change="radioChange" :name="item.name">
              <label v-for="(arr, index) in item.array" :key="arr.value">
                  <radio :value="arr.value" :checked="index === item.current" /><text>{{arr.name}}</text>
              </label>
            </radio-group>
          </view>
        </view>
        <view class="approve_btn flex">
          <button type="primary" plain="true" form-type="submit">保存</button>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      list: [
        {
          type: 'input',
          name: 'inputVal',
        },
        {
          type: 'password',
          name: 'pwd',
          value: 'pwd'
        },
        {
          type: 'select',
          name: 'choose',
          array: ['选项一', '选项二'],
          value: 0
        },
        {
          type: 'date',
          name: 'date',
          date: currentDate,
          value: 0
        },
        {
          type: 'checkbox',
          name: 'checkbox',
          array: [
            {
              value: 'USA',
              name: '美国'
            },
            {
              value: 'CHN',
              name: '中国',
              checked:'true'
            }
          ]
        },
        {
          type: 'radio',
          name: 'radio',
          array: [
            {
              value: '男',
              name: '男',
            },
            {
              value: '女',
              name: '女',
            }
          ],
          current: 0
        }
      ],
    }
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    bindPickerChange: function (e) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].type === 'select') {
          this.list[i].index = e.target.value
        }
      }
    },
    bindDateChange: function(e) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].type === 'date') {
          this.list[i].date = e.target.value
        }
      }
      this.date = e.target.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    checkboxChange: function (e) {
      let values = e.detail.value;
      for(let i = 0;i < this.list.length;i++){
        if(this.list[i].type==='checkbox'){
          let items = this.list[i].array;
          for (let j = 0, lenI = items.length; j < lenI; j++) {
            const item = items[j];
            if(values.includes(item.value)){
              this.$set(item,'checked',true)
            }else{
              this.$set(item,'checked',false)
            }
          }
        }
      }
    },
    radioChange: function(evt) {
      for(let i = 0;i < this.list.length;i++){
        if(this.list[i].type==='radio'){
          let items = this.list[i];
          let array = this.list[i].array;
          for (let j = 0; j < array.length; j++) {
            if (array[j].value === evt.target.value) {
              items.current = j;
              break;
            }
          }
        }
      }
    },
    formSubmit: function (e) {
      var formData = e.detail.value;
      console.log('数据为：' + JSON.stringify(formData))
    },
  }
}
</script>

<style>
  @import "../../common/style/style.css";
  .uni-input{
    border: 1px solid #0A98D5;
    margin-bottom: 30rpx;
  }
</style>