输入

components/Yl_Field/index.js

@@ -1,216 +1,239 @@
 const verify = require('../../utils/Check');
 Component({
-    externalClasses: [],
-    properties: {
-        form: Array,
-        showAll: {
-            type: Boolean,
-            value: true
-        }, //不显示必填项
-        onConfirm: Function,
-        interrupt: 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;
+	externalClasses: [],
+	properties: {
+		form: Array,
+		showAll: {
+			type: Boolean,
+			value: true
+		}, //不显示必填项
+		onConfirm: Function,
+		interrupt: 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();
+		},
+		/* 单列选择器 */
+		bindSelectorChange(e) {
+			let {
+				item,
+				index
+			} = e.target.dataset,
+				value = e.detail.value;
+			this.setData({
+				[`form[${index}].value`]: item.range[value][item.rangeKey],
+				[`form[${index}].rangeIndex`]: value,
+				[`form[${index}].error`]: false,
+			});
+			if (item.interrupt) this.triggerEvent("interrupt", {
+				data: this.data.form[index],
+				form: this.data.form,
+				temporary: {
+					item,
+					index,
+				},
+				result: item.range[value]
+			});
+			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;
-        }
-    }
+			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;
+		}
+	}
 })

components/Yl_Field/index.wxml

@@ -1,152 +1,171 @@
 <view wx:for="{{form}}" wx:key="valueName" data-name="{{item.valueName}}">
-    <view hidden="{{ !item.required && !showAll }}">
-        <!-- 日期选择器 -->
-        <view class="picker" wx:if="{{item.type=='date'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="picker-slot" wx:if="{{item.slot}}">
-                    <slot name="{{item.slot}}" />
-                </view>
-                <picker mode='date' value="{{item.value}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
-                    <view class="content">
-                        <text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
-                        <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
-                    </view>
-                </picker>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 日期范围选择器 -->
-        <view class="picker" wx:elif="{{item.type=='dateRange'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="picker-slot" wx:if="{{item.slot}}">
-                    <slot name="{{item.slot}}" />
-                </view>
-                <view class="content" style="display: flex;">
-                    <picker mode='date' value="{{item.value[0]}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" data-index="0" bindchange="rangeDateChange">
-                        <text wx:if="{{item.value[0]}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[0]}}</text>
-                        <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder[0]}}</text>
-                    </picker>
-                    <view style="margin: 0 20rpx;color: #000;">至</view>
-                    <picker mode='date' value="{{item.value[1]}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.value[0]}}" end="{{item.end}}" data-item="{{item}}" data-index="1" bindchange="rangeDateChange">
-                        <text wx:if="{{item.value[1]}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[1]}}</text>
-                        <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder[1]}}</text>
-                    </picker>
-                </view>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 时间选择器 -->
-        <view class="picker" wx:elif="{{item.type=='time'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="picker-slot" wx:if="{{item.slot}}">
-                    <slot name="{{item.slot}}" />
-                </view>
-                <picker mode='time' value="{{item.value}}" disabled="{{item.disabled}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
-                    <view class="content">
-                        <text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
-                        <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
-                    </view>
-                </picker>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 省市县选择器 -->
-        <view class="picker" wx:elif="{{item.type=='region'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="picker-slot" wx:if="{{item.slot}}">
-                    <slot name="{{item.slot}}" />
-                </view>
-                <picker mode='region' value="{{item.value}}" disabled="{{item.disabled}}" data-item="{{item}}" bindchange="bindRegionChange">
-                    <view class="content">
-                        <text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
-                        <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
-                    </view>
-                </picker>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 性别 -->
-        <view class="picker" wx:elif="{{item.type=='sex'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="content">
-                    <van-radio-group value="{{ item.value }}" data-item="{{item}}" bind:change="sexChange">
-                        <view style="display: flex;">
-                            <van-radio icon-size='16' custom-class='radio' name="男">男</van-radio>
-                            <van-radio icon-size='16' name="女">女</van-radio>
-                        </view>
-                    </van-radio-group>
-                </view>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 单选 选择器 -->
-        <view class="picker" wx:elif="{{item.type=='radio'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="content">
-                    <van-radio-group value="{{ item.value }}" data-item="{{item}}" bind:change="radioChange">
-                        <van-radio wx:for="{{item.radioList}}" wx:for-item="it" wx:for-index="i" wx:key="it.name" icon-size="16" custom-class="radio {{i != 0 ? 'radio_margin_top' : '' }}" name="{{it.id}}">{{it.name}}</van-radio>
-                    </van-radio-group>
-                </view>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 类型选择 -->
-        <view class="picker" wx:elif="{{item.type=='option'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="toOptions">
-                    <text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
-                    <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
-                    <van-icon name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
-                </view>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 跳转路由选择 值使用数组，0保存显示名称，1保存ID -->
-        <view class="picker" wx:elif="{{item.type=='route'}}">
-            <view class="label">
-                <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
-                <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
-            </view>
-            <view style="position: relative;">
-                <view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="route">
-                    <text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[0]}}</text>
-                    <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
-                    <van-icon name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
-                </view>
-                <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
-            </view>
-        </view>
-        <!-- 输入框 -->
-        <van-field wx:else label="{{item.label}}" required="{{item.required}}" value="{{ item.value }}" placeholder="{{item.placeholder||'请填写'}}" label-class='label-class' type="{{item.type}}" error="{{item.error}}" error-message='{{item.errMsg}}' disabled="{{item.disabled}}" autosize border="{{ false }}" bind:input="inputChange" data-item="{{item}}">
-            <slot wx:if="{{item.slot}}" name="{{item.slot}}" slot='button' />
-        </van-field>
-    </view>
+	<view hidden="{{ !item.required && !showAll }}">
+		<!-- 单列选择器 -->
+		<view class="picker" wx:if="{{item.type=='selector'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="picker-slot" wx:if="{{item.slot}}">
+					<slot name="{{item.slot}}" />
+				</view>
+				<picker mode='selector' range="{{item.range}}" range-key='{{item.rangeKey}}' value="{{item.rangeIndex}}" disabled="{{item.disabled}}" data-item="{{item}}" data-index="{{index}}" bindchange="bindSelectorChange">
+					<view class="content">
+						<text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
+						<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+					</view>
+				</picker>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 日期选择器 -->
+		<view class="picker" wx:elif="{{item.type=='date'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="picker-slot" wx:if="{{item.slot}}">
+					<slot name="{{item.slot}}" />
+				</view>
+				<picker mode='date' value="{{item.value}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
+					<view class="content">
+						<text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
+						<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+					</view>
+				</picker>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 日期范围选择器 -->
+		<view class="picker" wx:elif="{{item.type=='dateRange'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="picker-slot" wx:if="{{item.slot}}">
+					<slot name="{{item.slot}}" />
+				</view>
+				<view class="content" style="display: flex;">
+					<picker mode='date' value="{{item.value[0]}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" data-index="0" bindchange="rangeDateChange">
+						<text wx:if="{{item.value[0]}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[0]}}</text>
+						<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder[0]}}</text>
+					</picker>
+					<view style="margin: 0 20rpx;color: #000;">至</view>
+					<picker mode='date' value="{{item.value[1]}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.value[0]}}" end="{{item.end}}" data-item="{{item}}" data-index="1" bindchange="rangeDateChange">
+						<text wx:if="{{item.value[1]}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[1]}}</text>
+						<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder[1]}}</text>
+					</picker>
+				</view>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 时间选择器 -->
+		<view class="picker" wx:elif="{{item.type=='time'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="picker-slot" wx:if="{{item.slot}}">
+					<slot name="{{item.slot}}" />
+				</view>
+				<picker mode='time' value="{{item.value}}" disabled="{{item.disabled}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
+					<view class="content">
+						<text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
+						<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+					</view>
+				</picker>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 省市县选择器 -->
+		<view class="picker" wx:elif="{{item.type=='region'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="picker-slot" wx:if="{{item.slot}}">
+					<slot name="{{item.slot}}" />
+				</view>
+				<picker mode='region' value="{{item.value}}" disabled="{{item.disabled}}" data-item="{{item}}" bindchange="bindRegionChange">
+					<view class="content">
+						<text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
+						<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+					</view>
+				</picker>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 性别 -->
+		<view class="picker" wx:elif="{{item.type=='sex'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="content">
+					<van-radio-group value="{{ item.value }}" data-item="{{item}}" bind:change="sexChange">
+						<view style="display: flex;">
+							<van-radio icon-size='16' custom-class='radio' name="男">男</van-radio>
+							<van-radio icon-size='16' name="女">女</van-radio>
+						</view>
+					</van-radio-group>
+				</view>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 单选 选择器 -->
+		<view class="picker" wx:elif="{{item.type=='radio'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="content">
+					<van-radio-group value="{{ item.value }}" data-item="{{item}}" bind:change="radioChange">
+						<van-radio wx:for="{{item.radioList}}" wx:for-item="it" wx:for-index="i" wx:key="it.name" icon-size="16" custom-class="radio {{i != 0 ? 'radio_margin_top' : '' }}" name="{{it.id}}">{{it.name}}</van-radio>
+					</van-radio-group>
+				</view>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 类型选择 -->
+		<view class="picker" wx:elif="{{item.type=='option'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="toOptions">
+					<text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
+					<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+					<van-icon name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
+				</view>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 跳转路由选择 值使用数组，0保存显示名称，1保存ID -->
+		<view class="picker" wx:elif="{{item.type=='route'}}">
+			<view class="label">
+				<text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
+				<text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{item.label}}</text>
+			</view>
+			<view style="position: relative;">
+				<view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="route">
+					<text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[0]}}</text>
+					<text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+					<van-icon name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
+				</view>
+				<view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
+			</view>
+		</view>
+		<!-- 输入框 -->
+		<van-field wx:else label="{{item.label}}" required="{{item.required}}" value="{{ item.value }}" placeholder="{{item.placeholder||'请填写'}}" label-class='label-class' type="{{item.type}}" error="{{item.error}}" error-message='{{item.errMsg}}' disabled="{{item.disabled}}" autosize border="{{ false }}" bind:input="inputChange" data-item="{{item}}">
+			<slot wx:if="{{item.slot}}" name="{{item.slot}}" slot='button' />
+		</van-field>
+	</view>
 </view>