[improvement] Area: support oversrea code (#1897)

packages/address-edit/index.vue

@@ -99,6 +99,7 @@ import validateMobile from '../utils/validate/mobile';
 const defaultData = {
   name: '',
   tel: '',
+  country: '',
   province: '',
   city: '',
   county: '',
@@ -181,13 +182,13 @@ export default create({
     },
 
     areaText() {
-      const { province, city, county, areaCode } = this.data;
+      const { country, province, city, county, areaCode } = this.data;
       if (areaCode) {
-        const arr = [province, city, county].filter(text => text);
+        const arr = [country, province, city, county];
-        if (province === city) {
+        if (province && province === city) {
-          arr.shift();
+          arr.splice(1, 1);
         }
-        return arr.join('/');
+        return arr.filter(text => text).join('/');
       }
       return '';
     }
@@ -225,19 +226,19 @@ export default create({
     },
 
     onAreaConfirm(values) {
-      const areaCode = (values[2] || values[1] || values[0]).code;
       this.showAreaPopup = false;
-      this.data.areaCode = areaCode;
+      this.assignAreaValues();
-      this.assignAreaValues(values);
       this.$emit('change-area', values);
     },
 
     assignAreaValues(values) {
-      Object.assign(this.data, {
+      const { area } = this.$refs;
-        province: values[0] ? values[0].name : '',
+      if (area) {
-        city: values[1] ? values[1].name : '',
+        const detail = area.getArea();
-        county: values[2] ? values[2].name : ''
+        detail.areaCode = detail.code;
-      });
+        delete detail.code;
+        Object.assign(this.data, detail);
+      }
     },
 
     onSave() {
@@ -299,12 +300,7 @@ export default create({
     // set area code to area component
     setAreaCode(code) {
       this.data.areaCode = code || '';
-      this.$nextTick(() => {
+      code && this.$nextTick(this.assignAreaValues);
-        const { area } = this.$refs;
-        if (area) {
-          this.assignAreaValues(area.getValues());
-        }
-      });
     },
 
     setAddressDetail(value) {

packages/address-edit/test/index.spec.js

@@ -120,26 +120,6 @@ test('valid postal code', () => {
   expect(errorInfo.postalCode).toBeFalsy();
 });
 
-test('select area', () => {
-  const wrapper = mount(AddressEdit, {
-    propsData: {
-      areaList
-    }
-  });
-  const { vm } = wrapper;
-  const { data } = vm;
-
-  vm.onAreaConfirm([
-    { name: '北京市' },
-    { name: '北京市' },
-    { name: '朝阳区', code: '123456' }
-  ]);
-  expect(data.province).toEqual('北京市');
-  expect(data.city).toEqual('北京市');
-  expect(data.county).toEqual('朝阳区');
-  expect(data.areaCode).toEqual('123456');
-});
-
 test('on change detail', () => {
   const wrapper = mount(AddressEdit);
   const field = wrapper.findAll('.van-field__control').at(3);

packages/area/demo/area.js

@@ -33,7 +33,8 @@ export default {
     '650000': '新疆维吾尔自治区',
     '710000': '台湾省',
     '810000': '香港特别行政区',
-    '820000': '澳门特别行政区'
+    '820000': '澳门特别行政区',
+    '900000': '海外'
   },
   city_list: {
     '110100': '北京市',
@@ -406,7 +407,10 @@ export default {
     '810200': '九龙',
     '810300': '新界',
     '820100': '澳门半岛',
-    '820200': '离岛'
+    '820200': '离岛',
+    '912400': '加拿大',
+    '941000': '韩国',
+    '984000': '美国'
   },
   county_list: {
     '110101': '东城区',

packages/area/index.vue

@@ -100,6 +100,11 @@ export default create({
       }));
 
       if (code) {
+        // oversea code
+        if (code[0] === '9' && type === 'city') {
+          code = '9';
+        }
+
         result = result.filter(item => item.code.indexOf(code) === 0);
       }
 
@@ -108,10 +113,15 @@ export default create({
 
     // get index by code
     getIndex(type, code) {
-      const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
+      let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
       const list = this.getList(type, code.slice(0, compareNum - 2));
-      code = code.slice(0, compareNum);
 
+      // oversea code
+      if (code[0] === '9' && type === 'province') {
+        compareNum = 1;
+      }
+
+      code = code.slice(0, compareNum);
       for (let i = 0; i < list.length; i++) {
         if (list[i].code.slice(0, compareNum) === code) {
           return i;
@@ -153,7 +163,36 @@ export default create({
     },
 
     getValues() {
-      return this.$refs.picker ? this.$refs.picker.getValues() : [];
+      return this.$refs.picker ? this.$refs.picker.getValues().filter(value => !!value) : [];
+    },
+
+    getArea() {
+      const values = this.getValues();
+      const area = {
+        code: '',
+        country: '',
+        province: '',
+        city: '',
+        county: ''
+      };
+
+      if (!values.length) {
+        return area;
+      }
+
+      const names = values.map(item => item.name);
+
+      area.code = values[values.length - 1].code;
+      if (area.code[0] === '9') {
+        area.country = names[1] || '';
+        area.province = names[2] || '';
+      } else {
+        area.province = names[0] || '';
+        area.city = names[1] || '';
+        area.county = names[2] || '';
+      }
+
+      return area;
     },
 
     reset() {

packages/vant-css/src/cell.css

@@ -1,4 +1,5 @@
 @import './common/var.css';
+@import "./mixins/hairline.css";
 
 .van-cell {
   width: 100%;