[improvement] Field: 示例中增加 picker-view 使用 (#115)

* 增加 field 中 picker-view 示例

* 格式对齐

* 示例函数放到最下方

example/pages/field/index.js

@@ -7,7 +7,14 @@ Page(Object.assign({}, Zan.Field, {
     value: 'test',
     textareaValue: 'test textarea',
     area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
-    areaIndex: 0
+    areaIndex: 0,
+    // picker-view 示例配置
+    pickerViewConfig: {
+      show: false,
+      value: [0, 0],
+      year: [2016, 2017, 2018],
+      sex: ['男', '女']
+    }
   },
 
   onAreaChange(e) {
@@ -52,5 +59,25 @@ Page(Object.assign({}, Zan.Field, {
 
   formReset(event) {
     console.log('[zan:field:reset]', event);
+  },
+
+  /* piker-view 示例相关函数 */
+  handleDateFieldClick() {
+    this.setData({
+      'pickerViewConfig.show': true
+    });
+  },
+
+  handlePopupDateChange(e) {
+    this.setData({
+      'pickerViewConfig.value': e.detail.value
+    });
+  },
+
+  hideDatePopup() {
+    this.setData({
+      'pickerViewConfig.show': false
+    });
   }
+
 }));

example/pages/field/index.wxml

@@ -72,6 +72,46 @@
 
   <view class="zan-panel-title">自定义显示内容</view>
   <view class="zan-panel">
+    <!-- 配合 popup 使用 picker-view -->
+    <view class="zan-cell zan-field">
+      <view class="zan-cell__hd zan-field__title">人员信息</view>
+      <view
+        class="zan-field__input zan-cell__bd"
+        bindtap="handleDateFieldClick"
+      >
+        出生日期: {{ pickerViewConfig.year[pickerViewConfig.value[0]] }}
+        性别: {{ pickerViewConfig.sex[pickerViewConfig.value[1]] }}
+      </view>
+    </view>
+    <!-- 对应的 popup 层 -->
+    <view
+      class="zan-popup zan-popup--bottom {{ pickerViewConfig.show ? 'zan-popup--show' : ''}}"
+    >
+      <view class="zan-popup__mask" bindtap="hideDatePopup"></view>
+      <view class="zan-popup__container popup-field-example--bottom">
+        <picker-view
+          value="{{ pickerViewConfig.value }}"
+          indicator-style="height: 50px"
+          class="picker-view-example"
+          bindchange="handlePopupDateChange"
+        >
+          <picker-view-column>
+            <view
+              class="picker-view-column-example"
+              wx:for="{{ pickerViewConfig.year }}"
+            >{{item}}年</view>
+          </picker-view-column>
+          <picker-view-column>
+            <view
+              class="picker-view-column-example"
+              wx:for="{{ pickerViewConfig.sex }}"
+            >{{item}}</view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+
+    <!-- 简单 picker 示例 -->
     <view class="zan-cell zan-field">
       <view class="zan-cell__hd zan-field__title">选择区域</view>
       <picker

example/pages/field/index.wxss

@@ -1,3 +1,17 @@
 .field__title--radius {
   padding-bottom: 10px;
 }
+
+.popup-field-example--bottom {
+  width: 100%;
+  height: 150px;
+}
+
+.picker-view-example {
+  height: 120px;
+}
+
+.picker-view-column-example {
+  line-height: 50px;
+  text-align: center;
+}