[Improvement] AddressEdit: add focus、change-area、select-search events (#426)

docs/markdown/zh-CN/address-edit.md

@@ -74,6 +74,9 @@ export default {
 |-----------|-----------|-----------|
 | save | 点击保存按钮时触发 | content：表单内容 |
 | delete | 点击删除按钮时触发 | content：表单内容 |
+| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key |
+| select-search | 选中搜索结果时触发 | value: 搜索结果 |
+| change-area | 修改收件地区时触发 | values: 地区信息 |
 | change-detail | 修改详细地址时触发 | value: 详细地址内容 |
 
 ### 数据格式

packages/address-edit/Detail.vue

@@ -16,7 +16,7 @@
     >
       <div slot="icon">
         <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">{{ $t('complete') }}</span>
-        <icon v-else-if="showIcon" name="clear"  />
+        <icon v-else-if="showIcon" name="clear" />
       </div>
     </field>
 
@@ -101,6 +101,7 @@ export default create({
 
     onSuggestSelect(express) {
       this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
+      this.$emit('select-search', express);
     },
 
     isString(str) {

packages/address-edit/index.vue

@@ -30,6 +30,7 @@
         @focus="onFocus('address_detail')"
         @blur="onDetailBlur"
         @input="onChangeDetail"
+        @select-search="$emit('select-search', $event)"
       />
       <field
         v-if="showPostal"
@@ -41,8 +42,8 @@
         maxlength="6"
         class="van-hairline--top"
         :error="errorInfo.postal_code"
-        @focus="onFocus('postal_code')">
+        @focus="onFocus('postal_code')"
-      </field>
+      />
       <switch-cell 
         v-if="showSetDefault"
         v-show="!hideBottomFields"
@@ -60,6 +61,7 @@
     </div>
     <popup v-model="showAreaSelect" position="bottom">
       <van-area
+        ref="area"
         :value="currentInfo.area_code"
         :areaList="areaList"
         @confirm="onAreaConfirm"
@@ -164,6 +166,7 @@ export default create({
     onFocus(key) {
       this.errorInfo[key] = false;
       this.detailFocused = key === 'address_detail';
+      this.$emit('focus', key);
     },
 
     onDetailBlur() {
@@ -179,13 +182,18 @@ export default create({
       if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
         return Toast(this.$t('areaWrong'));
       }
+      this.assignAreaValues(values);
+      this.showAreaSelect = false;
+      this.$emit('change-area', values);
+    },
+
+    assignAreaValues(values) {
       Object.assign(this.currentInfo, {
         province: values[0].name,
         city: values[1].name,
         county: values[2].name,
         area_code: values[2].code
       });
-      this.showAreaSelect = false;
     },
 
     onSaveAddress() {
@@ -242,6 +250,23 @@ export default create({
       }).then(() => {
         this.$emit('delete', this.currentInfo);
       });
+    },
+
+    // get values of area component
+    getArea() {
+      const { area } = this.$refs;
+      return area ? area.getValues() : [];
+    },
+
+    // set area code to area component
+    setAreaCode(code) {
+      this.currentInfo.area_code = code;
+      this.$nextTick(() => {
+        const { area } = this.$refs;
+        if (area) {
+          this.assignAreaValues(area.getValues());
+        }
+      });
     }
   }
 });

packages/area/index.vue

@@ -145,6 +145,11 @@ export default create({
           [DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
         );
       }
+    },
+
+    getValues() {
+      const { picker } = this.$refs;
+      return picker ? picker.getValues() : [];
     }
   }
 });

test/unit/specs/address-edit.spec.js

@@ -15,9 +15,15 @@ describe('AddressEdit', () => {
     expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
     expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
     expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
-    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal('选择省');
+    expect(
-    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal('选择市');
+      wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()
-    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal('选择区');
+    ).to.equal('选择省');
+    expect(
+      wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()
+    ).to.equal('选择市');
+    expect(
+      wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()
+    ).to.equal('选择区');
   });
 
   it('create a AddressEdit with props', () => {
@@ -43,13 +49,27 @@ describe('AddressEdit', () => {
       }
     });
 
-    expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.name);
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal(
-    expect(wrapper.find('.van-field__control')[1].element.value).to.equal(addressInfo.tel);
+      addressInfo.name
-    expect(wrapper.find('.van-field__control')[2].element.value).to.equal(addressInfo.address_detail);
+    );
-    expect(wrapper.find('.van-field__control')[3].element.value).to.equal(addressInfo.postal_code);
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal(
-    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal(addressInfo.province);
+      addressInfo.tel
-    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal(addressInfo.city);
+    );
-    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal(addressInfo.county);
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
+      addressInfo.address_detail
+    );
+    expect(wrapper.find('.van-field__control')[3].element.value).to.equal(
+      addressInfo.postal_code
+    );
+    expect(
+      wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()
+    ).to.equal(addressInfo.province);
+    expect(
+      wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()
+    ).to.equal(addressInfo.city);
+    expect(
+      wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()
+    ).to.equal(addressInfo.county);
     expect(wrapper.find('.van-switch-cell').length).to.equal(1);
   });
 
@@ -155,14 +175,18 @@ describe('AddressEdit', () => {
       propsData: {
         addressInfo: {},
         showSearchResult: true,
-        searchResult: [{
+        searchResult: [
-          name: '黄龙万科中心',
+          {
-          address: '杭州市西湖区'
+            name: '黄龙万科中心',
-        }, {
+            address: '杭州市西湖区'
-          name: '黄龙万科中心H座'
+          },
-        }, {
+          {
-          address: '杭州市西湖区'
+            name: '黄龙万科中心H座'
-        }]
+          },
+          {
+            address: '杭州市西湖区'
+          }
+        ]
       }
     });
 
@@ -173,15 +197,21 @@ describe('AddressEdit', () => {
 
       items[0].trigger('click');
       wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心');
+        expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
+          '杭州市西湖区 黄龙万科中心'
+        );
 
         items[1].trigger('click');
         wrapper.vm.$nextTick(() => {
-          expect(wrapper.find('.van-field__control')[2].element.value).to.equal('黄龙万科中心H座');
+          expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
+            '黄龙万科中心H座'
+          );
           items[2].trigger('click');
 
           wrapper.vm.$nextTick(() => {
-            expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区');
+            expect(
+              wrapper.find('.van-field__control')[2].element.value
+            ).to.equal('杭州市西湖区');
 
             wrapper.find('.van-field__control')[2].trigger('blur');
             setTimeout(() => {
@@ -207,7 +237,11 @@ describe('AddressEdit', () => {
     wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
     expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
 
-    wrapper.vm.onAreaConfirm([{ name: '浙江省' }, { name: '杭州市' }, { name: '西湖区', code: '123456' }]);
+    wrapper.vm.onAreaConfirm([
+      { name: '浙江省' },
+      { name: '杭州市' },
+      { name: '西湖区', code: '123456' }
+    ]);
     expect(wrapper.vm.addressInfo['province']).to.equal('浙江省');
     expect(wrapper.vm.addressInfo['city']).to.equal('杭州市');
     expect(wrapper.vm.addressInfo['county']).to.equal('西湖区');
@@ -249,7 +283,7 @@ describe('AddressEdit', () => {
   it('on change detail', done => {
     wrapper = mount(AddressEdit);
 
-    wrapper.vm.$on('change-detail', (val) => {
+    wrapper.vm.$on('change-detail', val => {
       expect(val).to.equal('123');
       done();
     });
@@ -322,4 +356,36 @@ describe('AddressEdit', () => {
       done();
     });
   });
+
+  it('set/get area code', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: {
+          area_code: ''
+        }
+      }
+    });
+
+    expect(wrapper.vm.getArea()).to.eql([
+      { code: '-1', name: '选择省份' },
+      { code: '-1', name: '选择城市' },
+      { code: '-1', name: '选择地区' }
+    ]);
+
+    wrapper.vm.setAreaCode('110101');
+    setTimeout(() => {
+      expect(wrapper.vm.currentInfo.area_code).to.eql('110101');
+      expect(wrapper.vm.getArea()).to.eql([
+        { code: '110000', name: '北京市' },
+        { code: '110100', name: '北京市' },
+        { code: '110101', name: '东城区' }
+      ]);
+
+      wrapper.vm.$refs = [];
+      wrapper.vm.setAreaCode('110102');
+      expect(wrapper.vm.getArea()).to.eql([]);
+      done();
+    }, 50);
+  });
 });

test/unit/specs/area.spec.js

@@ -18,7 +18,7 @@ describe('Area', () => {
     expect(wrapper.hasClass('van-area')).to.be.true;
   });
 
-  it('create an area with default value', (done) => {
+  it('create an area with default value', done => {
     wrapper = mount(Area, {
       propsData: {
         areaList: AreaList,
@@ -38,7 +38,7 @@ describe('Area', () => {
     });
   });
 
-  it('create an area and set value', (done) => {
+  it('create an area and set value', done => {
     wrapper = mount(Area, {
       propsData: {
         areaList: AreaList,
@@ -89,7 +89,7 @@ describe('Area', () => {
     expect(wrapper.vm.areaColumns.length).to.equal(1);
   });
 
-  it('create an area and click cancel', (done) => {
+  it('create an area and click cancel', done => {
     wrapper = mount(Area, {
       propsData: {
         areaList: AreaList
@@ -125,4 +125,22 @@ describe('Area', () => {
 
     expect(list.length).to.equal(33);
   });
+
+  it('getValues method', () => {
+    wrapper = mount(Area, {
+      propsData: {
+        value: '110101',
+        areaList: AreaList
+      }
+    });
+
+    expect(wrapper.vm.getValues()).to.eql([
+      { code: '110000', name: '北京市' },
+      { code: '110100', name: '北京市' },
+      { code: '110101', name: '东城区' }
+    ]);
+
+    wrapper.vm.$refs = [];
+    expect(wrapper.vm.getValues()).to.eql([]);
+  });
 });