form.js 5.29 KB
let app = getApp();

// 联通专属
import area from '/const/area-lt';

Component({
  mixins: [],
  data: {
    queryForm: {
      selectMobilePhone: "", // 从父组件中传入
      name: "", // 姓名
      mobilePhone: "", // 用户手机号
      identNo: "", // 证件号
      province: "", // 省
      provinceCode: "", // 省编号
      city: "", // 市
      cityCode: "", // 市编号
      district: "", // 区
      districtCode: "", // 区编号
      address: "", // 收货地址
    },
    areaStr: "",

    fold: true
  },

  props: {
    item: {
      type: Object,
      value: null,
    },

    // 发送自定义事件 onChange 貌似为固定值
    onChange(data) {},
  },
  didMount() {
    // console.log("area:", area);
    // let res = app.func.addressToTree(area);
    // console.log("res:", res);
  },
  didUpdate() {},
  didUnmount() {},
  methods: {
    onBlur() {
      if (this.data.queryForm.name && this.data.queryForm.mobilePhone) {
        this.setData({
          fold: false,
        })
      }
    },

    // 封装 my.multiLevelSelect
    // - 对于传入的数据,只向底层接口传递 name 和 subList
    // - 对于选中的结果,替换成对应的完整数据条目再回调
    multiLevelSelect({
      title,
      list,
      success,
      fail,
      complete
    }) {
      const clean = ({
        name,
        subList
      }) => {
        return {
          name,
          subList: subList && subList.map(clean)
        };
      };
      const lookup = (array, index, pool) => {
        if (array && index < array.length) {
          array[index] = pool.filter(x => x.name === array[index].name)[0];
          lookup(array, index + 1, array[index].subList);
          delete array[index].subList; // 方便回调中的 my.alert 演示。真实代码请删除此行,避免副作用
        }
      };
      const wrap = func =>
        func &&
        (res => {
          res.success && lookup(res.result, 0, list);
          func(res);
        });
      return my.multiLevelSelect({
        title,
        list: list.map(clean),
        success: wrap(success),
        fail,
        complete: wrap(complete),
      });
    },

    // 选择地址
    onPickerArea() {
      let areas = app.func.addressToTree(area);
      console.log("areas:", areas);

      let updateList = []
      areas.forEach(element => {
        if (element.id == "440000") {
          updateList.push(element);
        }
      });
      this.multiLevelSelect({
        title: '请选择所在地区',
        list: updateList,
        success: res => {

          let region = res.result;
          console.log(region)
          this.setData({
            'queryForm.province': region[0].name,
            'queryForm.city': region[1].name,
            'queryForm.district': region[2].name,

            'queryForm.provinceCode': region[0].id,
            'queryForm.cityCode': region[1].id,
            'queryForm.districtCode': region[2].id,
            'areaStr': region[0].name + region[1].name + region[2].name
          })
        },
        fail: error => {
          // console.error('multiLevelSelect fail: ', JSON.stringify(error));
        },
      });
    },
    // 显示地址tips
    onAddressTips() {
      my.showToast({
        content: "请输入详细准确的地址,字数不少于4字(例如:**街身份证* 道…),且不能包含特殊符号(例如:? !/0等,可以输入小写-号)"
      })
    },


    /**
     * input绑定
     * 多输入文本绑定
     * 在input/texarea中设置 data-name="属性值即可"
     */
    inputEdit(e) {
      let dataset = e.currentTarget.dataset;
      let value = e.detail.value;
      let name = dataset.name;
      this.setData({
        [name]: value
      });
    },

    /**
     * 检查表单
     */
    checkSubmit() {
      return new Promise((resolve, reject) => {

        let {
          name,
          mobilePhone,
          identNo,
          district,
          address
        } = this.data.queryForm;

        console.log("this.data.queryForm:", this.data.queryForm);

        if (!name) {
          app.toast("请输入姓名")
          return;
        }

        if (!app.util.checkMobile(mobilePhone)) {
          app.toast("请输入正确的手机号码")
          return;
        }

        if (!app.util.checkIdentNo(identNo)) {
          app.toast("请输入正确的身份证号码")
          return;
        }

        if (!district) {
          app.toast("请选择所在地区")
          return;
        }

        if (!address) {
          app.toast("请输入详细地址")
          return;
        }

        resolve(this.data.queryForm)
      });
    },

    /**
     * 提交表单
     */
    onSubmit() {
      this.checkSubmit().then((params) => {
        params.selectMobilePhone = this.props.item.mobile;
        console.log("params:", params)

        my.showLoading({
          content: '稍等片刻,订单提交中',
          mask: true
        });

        app.post({
          url: app.api.createOrder,
          data: params,
        }).then((result) => {
          // 发送自定义事件 onChange 貌似为固定值
          this.props.onChange({
            name: "_evt_submit_complete"
          })
          my.hideLoading();
        }).catch((err) => {
          my.hideLoading();
        });
      });
    },
  },
});