E_WeChat/components/Yl_Field/index.js

const verify = require('../../utils/Check');
Component({
    externalClasses: [],
    properties: {
        form: {
            type: Array
        },
        showAll: {
            type: Boolean,
            value: true
        }, //不显示必填项
        onConfirm: {
            type: Function
        },
        interrupt: {
            type: Function
        }, //打断处理,用于条件判断 把form返回到上个页面处理重新传入
    },
    data: {
        temporary: null, //route选择暂存选中项
    },
    options: {
        multipleSlots: true //允许使用多个slot
    },
    methods: {
        route(e) {
            const {
                item
            } = e.currentTarget.dataset;
            getApp().globalData.handleSelect = this.handleRoute.bind(this);
            wx.navigateTo({
                url: item.url + '?params=' + JSON.stringify(item.params) + item.query
            })
            this.setData({
                temporary: {
                    item: item,
                    index: this.data.form.findIndex(v => v.valueName == item.valueName)
                }
            })
        },
        /* 处理路由返回结果 */
        handleRoute(data) {
            let temporary = this.data.temporary;
            if (temporary.item.interrupt) {
                this.triggerEvent("interrupt", {
                    data,
                    form: this.data.form,
                    temporary
                });
            } else {
                wx.navigateBack();
                this.setData({
                    [`form[${temporary.index}].value`]: data.value
                });
                this.confirm()
            }
        },
        /* 改变值 */
        inputChange(e) {
            let item = e.target.dataset.item,
                index = this.data.form.findIndex(v => v.valueName === item.valueName),
                value = e.detail;
            //开始校验  //校验规则 不填:不校验  "base":默认校验 "phone":手机号  "mail":邮箱  "正则表达式"：以自定义内容为校验标准
            if (item.checking) {
                let reg = item.checking;
                switch (item.checking) {
                    case 'base':
                        value = verify.queryStr(value);
                        break;
                    case 'phone':
                        reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
                        this.setData({
                            [`form[${index}].errMsg`]: !reg.test(value) ? '请输入正确11位手机号码' : ''
                        });
                        break;
                    case 'mail':
                        reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                        this.setData({
                            [`form[${index}].errMsg`]: !reg.test(value) ? '请输入正确的邮箱格式' : ''
                        });
                        break;
                    default:
                        reg = new RegExp(reg);
                        this.setData({
                            [`form[${index}].errMsg`]: !reg.test(value) ? item.hint || '输入文本不符合条件!' : ''
                        });
                        break;
                };
            };
            this.setData({
                [`form[${index}].value`]: value,
                [`form[${index}].error`]: false,
            });
            if (!item.required && value == '') this.setData({
                [`form[${index}].errMsg`]: "",
            });
            this.confirm();
        },
        /* 日期,时间 选择器 */
        bindDateChange(e) {
            let item = e.target.dataset.item,
                index = this.data.form.findIndex(v => v.valueName === item.valueName),
                value = e.detail.value;

            this.setData({
                [`form[${index}].value`]: value,
                [`form[${index}].error`]: false,
            });
            if (item.interrupt) this.triggerEvent("interrupt", {
                data: this.data.form[index],
                form: this.data.form
            });
            this.confirm();
        },
        /* 时间范围选择器 */
        rangeDateChange(e) {
            let item = e.target.dataset.item,
                i = e.target.dataset.index,
                index = this.data.form.findIndex(v => v.valueName === item.valueName),
                value = e.detail.value;
            this.setData({
                [`form[${index}].value[${i}]`]: value,
                [`form[${index}].error`]: false,
            });
            this.confirm();
        },
        /* 省市县 */
        bindRegionChange(e) {
            let item = e.currentTarget.dataset.item,
                index = this.data.form.findIndex(v => v.valueName === item.valueName),
                value = e.detail.value;
            this.setData({
                [`form[${index}].value`]: value,
                [`form[${index}].error`]: false,
            });
            this.confirm();
        },
        toOptions(e) {
            const {
                item
            } = e.currentTarget.dataset;
            wx.navigateTo({
                url: '/packageA/options/index?data=' + JSON.stringify(item),
            })
        },
        /* 自定义选项 */
        setOption(item) {
            let i = this.data.form.findIndex(v => v.valueName == item.valueName);
            this.setData({
                [`form[${i}].value`]: item.value
            });
            this.confirm();
        },
        /* 是否完成必填项 */
        confirm() {
            this.triggerEvent("onConfirm", this.data.form.some(v => {
                if (v.type == "dateRange" && v.required) {
                    return v.value[0] == "" || v.value[1] == "";
                } else {
                    return v.required && v.value === '';
                }
            }));
            this.setData({
                temporary: null
            })
        },
        /* 性别 */
        sexChange(e) {
            let item = e.currentTarget.dataset.item,
                index = this.data.form.findIndex(v => v.valueName === item.valueName);
            this.setData({
                [`form[${index}].value`]: e.detail,
                [`form[${index}].error`]: false,
            });
            this.confirm();
        },
        /* 单选 选择器改变 */
        radioChange(e) {
            let item = e.currentTarget.dataset.item,
                index = this.data.form.findIndex(v => v.valueName == item.valueName);
            this.setData({
                [`form[${index}].value`]: e.detail,
                [`form[${index}].error`]: false,
            });
            if (item.interrupt) this.triggerEvent("interrupt", {
                data: this.data.form[index],
                form: this.data.form
            });
            this.confirm();
        },
        /* 提交 */
        submit() {
            let obj = {},
                isPass = false;
            this.data.form.forEach((v, i) => {
                obj[v.valueName] = v.value;
                if (v.errMsg != '') {
                    this.setData({
                        [`form[${i}].error`]: true
                    });
                    isPass = true;
                }
            });
            if (isPass) {
                wx.showToast({
                    title: '请检查表单内容',
                    icon: "none"
                })
            } else {
                return obj;
            }
        },
        /* 查询结果 不验证是否必填 */
        query() {
            let obj = {};
            this.data.form.forEach(v => {
                obj[v.valueName] = v.value;
            });
            return obj;
        }
    }
})