school_meal_wxapp/components/l-form/index.js

// components/l-form/index.js
import { areaList } from "../../utils/util";
Component({
  attached () { this._init(); },
  pageLifetimes: { show () { this._init() } },
  properties: {
    formData: { type: Array, value: [] },
  },

  /**
   * 组件的初始数据
   */
  data: {
    areaList,//地址列表
    show: true,//控制地址
    columns: [],//选择器配置
    pickershow: true,//控制选择器
    areaindex: 0,//区分地址所在数据位置
    pickerindex: 0,//区分选择器所在数据位置
    arealist: [],//储存不同地址选项
    // 默认提交
    Success (data) {
      console.log(data)
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 定义调用组件的js方法
    _init () {
      wx.lxd = wx.lxd || {}, wx.lxd.Form = e => {
        this.setData({
          // 页面传参
          ...e,
        })
      }
    },
    // 数据双向绑定
    input (e) {
      let { detail } = e, { item, index } = e.currentTarget.dataset, { formData } = this.data;
      item["value"] = detail;
      item["err"] = false;
      formData[index] = item;
      this.setData({ formData })
    },
    // 选择器
    pickerchoose (e) {
      let { index } = e.currentTarget.dataset, { formData } = this.data;
      this.setData({ pickershow: false, columns: formData[index]['columns'], pickerindex: index })
    },
    pickercancel () { this.setData({ pickershow: true }) },
    // 选择器
    pickerfunc (e, boolen) {
      let { value, index: indexd } = e.detail, { formData } = this.data, { index } = e.currentTarget.dataset;
      indexd = boolen ? '' : indexd;
      if (indexd == 0) {
        let { data, columns } = formData[index];
        columns[1]["values"] = Object.keys(data[value[0]]);
        columns[2]["values"] = data[value[0]][value[1]];
      }
      if (indexd == 1) {
        let { data, columns } = formData[index];
        columns[2]["values"] = data[value[0]][value[1]];
        formData[index]["columns"] = columns;
      }
      formData[index]["values"] = value;
      formData[index]["err"] = false;
      formData[index]["value"] = value.join(" ");
      this.setData({ formData, columns: formData[index]["columns"], pickershow: boolen ? true : false })
    },
    pickerconfirm (e) {
      this.pickerfunc(e, true)
    },
    // 挑选地址
    choose (e) {
      let { index } = e.currentTarget.dataset;
      this.setData({ show: false, areaindex: index })
    },
    // area完成
    areaconfirm (e) {
      this.areafunc(e);
    },
    cancel () {
      this.setData({ show: true })
    },
    // area改变
    areachange (e) { this.areafunc(e, true); },
    // area 共同执行
    areafunc (e, boolean) {
      let { values } = e.detail, addresss = '', { formData } = this.data, { index } = e.currentTarget.dataset;
      values.forEach(item => {
        !!item ? addresss += item.name + " " : ''
      })
      formData[index]["value"] = addresss;
      formData[index]["values"] = values;
      formData[index]["err"] = false;
      this.setData({
        formData,
        show: boolean ? false : true
      })
    },
    // 单选框
    onChangeradio (e) {
      let { detail } = e, { index } = e.currentTarget.dataset, { formData } = this.data;
      formData[index]["value"] = detail;
      this.setData({
        formData
      })
    },
    // 复选框
    onChange (e) {
      let { item, index } = e.currentTarget.dataset, { formData } = this.data, { detail } = e;
      item["value"] = detail;
      formData[index] = item;
      this.setData({
        formData
      })
    },
    // 保存
    submit () {
      if (!!this.data.submitlock) return false;
      let { formData } = this.data,
        lock = [], i = 0 //提交锁
        ;
      formData.forEach((item, index) => {
        if (item.require) {
          i++;
          let reg = /\S/;
          item.err = false;
          switch (item.rule) {
            case 'tel':
              reg = /^1[34578]\d{9}$/;
              reg.test(item.value) ? lock.push(true) : item.err = true;
              break;
            case 'picker':
              if (!item.value) {
                item.err = true;
                break;
              }
              lock.push(true);
              break;
            case 'address':
              if (!item.values || !item.values[2] || item.values[2].code == '') {
                item.err = true;
                item.errmsg = "请正确选择地址"
                break;
              }
              lock.push(true);
              break
            default:
              reg.test(item.value) ? lock.push(true) : item.err = true;
              break;
          }
        }
      })
      if (lock.length < i) {
        this.setData({
          formData
        })
        return false;
      }
      this.setData({
        submitlock: true
      })
      this.data.Success(formData);
    },
  }
})