feat(Picker): add city cascade demo

ant-design · Jul 26, 2022 · c9bb18e · c9bb18e
1 parent 7c157f7
commit c9bb18e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 81 deletions.
diff --git a/demo/pages/Picker/index.axml b/demo/pages/Picker/index.axml
@@ -1,17 +1,3 @@
-
-<demo-block title="多列复杂类型数据" padding="0">
-  <list-item>
-    级联
-    <picker 
-      slot="extra"
-      placeholder="请选择" 
-      data="{{testList}}" 
-      onChange="handleTestPickerChange" 
-      onOk="handleTestOk"
-    />
-  </list-item>
-  </demo-block>
-
 <demo-block title="基础用法" padding="0">
   <list-item>
     选择城市
@@ -29,19 +15,21 @@
 </demo-block>
 
 <demo-block title="对象用法"  padding="0">
-<list-item>
-  选择日期
-  <picker 
-    slot="extra"
-    onDismiss="handleCancelPicker"
-    onOk="handleOk"
-    placeholder="请选择"
-    title="请选择"
-    onChange="handleChange"
-    data="{{weekList}}">
-  </picker>
-</list-item>
-</demo-block>
+  <list-item>
+    选择日期
+    <picker 
+      slot="extra"
+      onDismiss="handleCancelPicker"
+      onOk="handleOk"
+      placeholder="请选择"
+      title="请选择"
+      onChange="handleChange"
+      data="{{weekList}}">
+    </picker>
+  </list-item>
+  </demo-block>
+
+
 
 <demo-block title="多列复杂类型数据" padding="0">
 <list-item>
@@ -58,16 +46,16 @@
 </list-item>
 </demo-block>
 
-
 <demo-block title="多列复杂类型数据" padding="0">
   <list-item>
-    级联
+    城市级联
     <picker 
       slot="extra"
       placeholder="请选择归属地" 
       data="{{cityList}}" 
       onChange="handleCityPickerChange" 
       onOk="handleCityOnOk"
+      onFormat="handleCityFormat"
     />
   </list-item>
-  </demo-block>
+</demo-block>
diff --git a/demo/pages/Picker/index.js b/demo/pages/Picker/index.js
@@ -1,10 +1,6 @@
 import regionData from './city'
 Page({
   data: {
-    testList: [
-      [ { label: '周一', value: 'Mon' },],
-      [  { label: '上午', value: 'am' },]
-    ],
     value: '上海',
     list: ['北京', '上海', '深圳', '广州', '南京', '武汉', '无锡', '苏州'],
     weekList: [
@@ -29,49 +25,6 @@ Page({
     ],
     cityList: [regionData.province, regionData.city['11']]
   },
-
-  onLoad() {
-    const firstColumn = []
-    const secondColumn = []
-    for (let i = 0; i <= 16; i++) {
-      firstColumn.push({
-        value: i,
-        label: `${i}`
-      })
-    }
-    for (let i = 15; i <= 30; i++) {
-      secondColumn.push({
-        value: i,
-        label: `${i}`
-      })
-    }
-    this.setData({
-      testList: [firstColumn, secondColumn]
-    })
-  },
-
-  handleTestPickerChange(selectValue) {
-    const secondColumn = []
-    if (selectValue[0] === 0) {
-      for (let i = 15; i <= 30; i++) {
-        secondColumn.push({
-          value:  i,
-          label: `${i}`
-        })
-      } 
-    } else {
-      for (let i = 1; i <= 30; i++) {
-        secondColumn.push({
-          value: i,
-          label: `${i}`
-        })
-      } 
-    }
-    this.setData({
-      'testList[1]': secondColumn
-    })
-  },
-
   handleCancelPicker() {
     my.showToast({
       content: '取消操作，关闭 picker',
@@ -110,6 +63,21 @@ Page({
 
   handleCityOnOk(value, column) {
     console.log('value', value, 'column', column)
+  },
+
+  handleCityFormat(value) {
+    let provinceName = ''
+    let cityName = ''
+    if (value[0]) {
+      provinceName = regionData.province.filter(p => p.value === value[0])[0].label
+    }
+    if (value[1]) {
+      cityName = regionData.city[value[0]].filter(c => c.value === value[1])[0].label
+    }
+    if (provinceName && cityName) {
+      return `${provinceName}-${cityName}`
+    }
+    return ''
   }
 
 });
diff --git a/src/Picker/index.ts b/src/Picker/index.ts
@@ -149,7 +149,6 @@ Component({
     onChange(e) {
       const { onChange } = this.props;
       const { value: selectedIndex } = e.detail;
-      console.log('picker onChange selectedIndex', selectedIndex)
       this.tempSelectedIndex = selectedIndex;
       this.isChangingPickerView = true;
       const { matchedColumn, matchedValues } = getMatchedItemByIndex(
@@ -165,7 +164,6 @@ Component({
     async onOk() {
       let result;
       if (this.tempSelectedIndex) {
-        console.log('picker onOK columns', this.data.columns)
         result = getMatchedItemByIndex(
           this.data.columns,
           this.tempSelectedIndex,
@@ -189,8 +187,6 @@ Component({
           return
         }
       }
-      console.log('picker onOK tempSelectedIndex', this.tempSelectedIndex)
-      console.log('picker onOk matchedValues', matchedValues)
       this.setData({
         cValue: matchedValues,
       });