组件

components/Yl_Detail/index.js

@@ -1,5 +1,8 @@
 Component({
-  properties: {
-    list: Array
-  }
+    properties: {
+        list: Array
+    },
+    options: {
+        multipleSlots: true
+    }
 })

components/Yl_Detail/index.wxml

@@ -1,6 +1,8 @@
 <view class="box" wx:if="{{list}}">
-  <view class="row" wx:for="{{list}}" wx:key="index">
-    <view class="label">{{item.label}}：</view>
-    <view class="value">{{item.value||'--'}}</view>
-  </view>
+    <slot name='top' />
+    <view class="row" wx:for="{{list}}" wx:key="index">
+        <view class="label">{{item.label}}：</view>
+        <view class="value">{{item.value||'--'}}</view>
+    </view>
+    <slot name='bottom' />
 </view>

components/Yl_field/index.js

@@ -80,6 +80,16 @@ Component({
         confirm() {
             this.triggerEvent("onConfirm", this.data.form.some(v => v.required && v.value == ''))
         },
+        /* 性别 */
+        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();
+        },
         /* 提交 */
         submit() {
             let obj = {},

components/Yl_field/index.json

@@ -1,7 +1,9 @@
 {
-  "component": true,
-  "usingComponents": {
-    "van-field": "@vant/weapp/field/index",
-    "van-transition": "@vant/weapp/transition/index"
-  }
+    "component": true,
+    "usingComponents": {
+        "van-field": "@vant/weapp/field/index",
+        "van-transition": "@vant/weapp/transition/index",
+        "van-radio": "@vant/weapp/radio/index",
+        "van-radio-group": "@vant/weapp/radio-group/index"
+    }
 }

components/Yl_field/index.wxml

@@ -1,67 +1,85 @@
 <van-cell-group>
-  <block wx:for="{{form}}" wx:key="item.valueName" data-name="{{item.valueName}}">
-    <van-transition show="{{ item.required || showAll }}" name="fade" custom-class="block">
-      <!-- 日期选择器 -->
-      <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">{{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}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
-            <view class="content">
-              <text wx:if="{{item.value}}" style="color: #000;">{{item.value}}</text>
-              <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+    <block wx:for="{{form}}" wx:key="item.valueName" data-name="{{item.valueName}}">
+        <van-transition show="{{ item.required || showAll }}" name="fade" custom-class="block">
+            <!-- 日期选择器 -->
+            <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">{{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}}" 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: #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>
-          </picker>
-          <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">{{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}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
-            <view class="content">
-              <text wx:if="{{item.value}}" style="color: #000;">{{item.value}}</text>
-              <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+            <!-- 时间选择器 -->
+            <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">{{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}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
+                        <view class="content">
+                            <text wx:if="{{item.value}}" style="color: #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>
-          </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">{{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}}" data-item="{{item}}" bindchange="bindRegionChange">
-            <view class="content">
-              <text wx:if="{{item.value.length}}" style="color: #000;">{{item.value}}</text>
-              <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
+            <!-- 省市县选择器 -->
+            <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">{{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}}" data-item="{{item}}" bindchange="bindRegionChange">
+                        <view class="content">
+                            <text wx:if="{{item.value.length}}" style="color: #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>
-          </picker>
-          <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}}' autosize border="{{ false }}" bind:input="inputChange" data-item="{{item}}">
-        <slot wx:if="{{item.slot}}" name="{{item.slot}}" slot='button' />
-      </van-field>
-    </van-transition>
-  </block>
+            <!-- 性别 -->
+            <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">{{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>
+            <!-- 输入框 -->
+            <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}}' autosize border="{{ false }}" bind:input="inputChange" data-item="{{item}}">
+                <slot wx:if="{{item.slot}}" name="{{item.slot}}" slot='button' />
+            </van-field>
+        </van-transition>
+    </block>
 </van-cell-group>

components/Yl_field/index.wxss

@@ -43,4 +43,8 @@
   position: absolute;
   height: 48rpx;
   right: -30rpx;
+}
+
+.radio{
+    margin-right: 26rpx;
 }