[Improvement] AddressEdit: simplify (#1274)

packages/address-edit/demo/index.vue

@@ -54,11 +54,11 @@ export default {
 
   methods: {
     onSave() {
-      this.$toast('save');
+      this.$toast(this.$t('save'));
     },
 
     onDelete() {
-      this.$toast('delete');
+      this.$toast(this.$t('delete'));
     },
 
     onChangeDetail(val) {

packages/address-edit/index.vue

@@ -5,7 +5,7 @@
         v-model="data.name"
         maxlength="15"
         :placeholder="$t('name')"
-        :label="$t('label.name')"
+        :label="$t('receiver')"
         :error="errorInfo.name"
         @focus="onFocus('name')"
       />
@@ -17,16 +17,13 @@
         :error="errorInfo.tel"
         @focus="onFocus('tel')"
       />
-      <cell
+      <field
-        clickable
+        readonly
-        :class="b('area')"
+        :label="$t('area')"
-        :title="$t('area')"
+        :placeholder="$t('area')"
+        :value="areaText"
         @click="showArea = true"
-      >
+      />
-        <span>{{ data.province || $t('province') }}</span>
-        <span>{{ data.city || $t('city') }}</span>
-        <span>{{ data.county || $t('county') }}</span>
-      </cell>
       <address-edit-detail
         :value="data.address_detail"
         :is-error="errorInfo.address_detail"
@@ -41,8 +38,8 @@
         v-if="showPostal"
         v-show="!hideBottomFields"
         type="tel"
-        :label="$t('label.postal')"
+        :label="$t('postal')"
-        :placeholder="$t('placeholder.postal')"
+        :placeholder="$t('postal')"
         v-model="data.postal_code"
         maxlength="6"
         class="van-hairline--top"
@@ -62,7 +59,7 @@
         {{ $t('save') }}
       </van-button>
       <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">
-        {{ $t('deleteAddress') }}
+        {{ $t('delete') }}
       </van-button>
     </div>
     <popup v-model="showArea" position="bottom" :lazy-render="false" :get-container="getAreaContainer">
@@ -167,6 +164,14 @@ export default create({
 
     isEdit() {
       return this.showDelete || !!this.data.id;
+    },
+
+    areaText() {
+      const { province, city, county, area_code } = this.data;
+      if (province && city && county && area_code) {
+        return `${province} ${city} ${county}`;
+      }
+      return '';
     }
   },
 
@@ -205,9 +210,6 @@ export default create({
     },
 
     onAreaConfirm(values) {
-      if (values.length !== 3 || values.some(value => +value.code === -1)) {
-        return Toast(this.$t('areaEmpty'));
-      }
       this.data.area_code = values[2].code;
       this.assignAreaValues(values);
       this.showArea = false;
@@ -237,7 +239,7 @@ export default create({
       }
 
       const isValid = items.every(item => {
-        const msg = this.getErrorMessageByKey(item);
+        const msg = this.getErrorMessage(item);
         if (msg) {
           this.errorInfo[item] = true;
           Toast(msg);
@@ -250,19 +252,19 @@ export default create({
       }
     },
 
-    getErrorMessageByKey(key) {
+    getErrorMessage(key) {
       const value = this.data[key].trim();
       const { $t } = this;
 
       switch (key) {
         case 'name':
-          return value ? value.length <= 15 ? '' : $t('nameOverlimit') : $t('nameEmpty');
+          return value ? '' : $t('nameEmpty');
         case 'tel':
           return this.telValidator(value) ? '' : $t('telInvalid');
         case 'area_code':
-          return value && +value !== -1 ? '' : $t('areaEmpty');
+          return value ? '' : $t('areaEmpty');
         case 'address_detail':
-          return value ? value.length <= 200 ? '' : $t('addressOverlimit') : $t('addressEmpty');
+          return value ? '' : $t('addressEmpty');
         case 'postal_code':
           return value && !/^\d{6}$/.test(value) ? $t('postalEmpty') : '';
       }
@@ -270,7 +272,7 @@ export default create({
 
     onDelete() {
       Dialog.confirm({
-        message: this.$t('confirmDelete')
+        title: this.$t('confirmDelete')
       }).then(() => {
         this.$emit('delete', this.data);
       }).catch(() => {
@@ -280,8 +282,7 @@ export default create({
 
     // get values of area component
     getArea() {
-      const { area } = this.$refs;
+      return this.$refs.area ? this.$refs.area.getValues() : [];
-      return area ? area.getValues() : [];
     },
 
     // set area code to area component

packages/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -31,12 +31,17 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div class="van-cell van-cell--clickable van-hairline van-address-edit__area">
+        <div readonly="readonly" placeholder="收件地区" class="van-cell van-hairline van-field">
           <!---->
           <div class="van-cell__title"><span>收件地区</span>
             <!---->
           </div>
-          <div class="van-cell__value"><span>选择省份</span> <span>选择城市</span> <span>选择地区</span></div>
+          <div class="van-cell__value">
+            <input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
+            <!---->
+            <!---->
+            <!---->
+          </div>
           <!---->
         </div>
         <div>
@@ -59,13 +64,13 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div placeholder="邮政编码(选填)" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
+        <div placeholder="邮政编码" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
           <!---->
           <div class="van-cell__title"><span>邮政编码</span>
             <!---->
           </div>
           <div class="van-cell__value">
-            <input type="tel" placeholder="邮政编码(选填)" maxlength="6" value="" class="van-field__control">
+            <input type="tel" placeholder="邮政编码" maxlength="6" value="" class="van-field__control">
             <!---->
             <!---->
             <!---->
@@ -94,7 +99,7 @@ exports[`renders demo correctly 1`] = `
     </span></button>
         <button class="van-button van-button--default van-button--normal van-button--block">
           <!----><span class="van-button__text">
-      删除收货地址
+      删除
     </span></button>
       </div>
       <div class="van-popup van-popup--bottom" style="display:none;">

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

@@ -29,12 +29,17 @@ exports[`create a AddressEdit 1`] = `
       </div>
       <!---->
     </div>
-    <div class="van-cell van-cell--clickable van-hairline van-address-edit__area">
+    <div readonly="readonly" placeholder="收件地区" class="van-cell van-hairline van-field">
       <!---->
       <div class="van-cell__title"><span>收件地区</span>
         <!---->
       </div>
-      <div class="van-cell__value"><span>选择省份</span> <span>选择城市</span> <span>选择地区</span></div>
+      <div class="van-cell__value">
+        <input type="text" readonly="readonly" placeholder="收件地区" value="" class="van-field__control">
+        <!---->
+        <!---->
+        <!---->
+      </div>
       <!---->
     </div>
     <div>
@@ -114,12 +119,17 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div class="van-cell van-cell--clickable van-hairline van-address-edit__area">
+    <div readonly="readonly" placeholder="收件地区" class="van-cell van-hairline van-field">
       <!---->
       <div class="van-cell__title"><span>收件地区</span>
         <!---->
       </div>
-      <div class="van-cell__value"><span>北京市</span> <span>北京市</span> <span>朝阳区</span></div>
+      <div class="van-cell__value">
+        <input type="text" readonly="readonly" placeholder="收件地区" value="北京市 北京市 朝阳区" class="van-field__control">
+        <!---->
+        <!---->
+        <!---->
+      </div>
       <!---->
     </div>
     <div>
@@ -142,13 +152,13 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div placeholder="邮政编码(选填)" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
+    <div placeholder="邮政编码" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
       <!---->
       <div class="van-cell__title"><span>邮政编码</span>
         <!---->
       </div>
       <div class="van-cell__value">
-        <input type="tel" placeholder="邮政编码(选填)" maxlength="6" value="10000" class="van-field__control">
+        <input type="tel" placeholder="邮政编码" maxlength="6" value="10000" class="van-field__control">
         <!---->
         <!---->
         <!---->

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

@@ -68,13 +68,6 @@ test('valid name', () => {
   expect(errorInfo.name).toBeTruthy();
   field.at(0).trigger('focus');
   expect(errorInfo.name).toBeFalsy();
-
-  // name too long
-  data.name = '1'.repeat(30);
-  button.trigger('click');
-  expect(errorInfo.name).toBeTruthy();
-  field.at(0).trigger('focus');
-  expect(errorInfo.name).toBeFalsy();
 });
 
 it('valid tel', () => {
@@ -104,13 +97,8 @@ it('valid address_detail', () => {
   data.address_detail = '';
   button.trigger('click');
   expect(errorInfo.address_detail).toBeTruthy();
-  field.at(2).trigger('focus');
+  field.at(3).trigger('focus');
   expect(errorInfo.address_detail).toBeFalsy();
-
-  // // address_detail too long
-  data.address_detail = '1'.repeat(300);
-  button.trigger('click');
-  expect(errorInfo.address_detail).toBeTruthy();
 });
 
 test('valid postal code', () => {
@@ -120,7 +108,7 @@ test('valid postal code', () => {
   data.postal_code = '123';
   button.trigger('click');
   expect(errorInfo.postal_code).toBeTruthy();
-  field.at(3).trigger('focus');
+  field.at(4).trigger('focus');
   expect(errorInfo.postal_code).toBeFalsy();
 
   // valid result
@@ -143,12 +131,6 @@ test('select area', () => {
   const { vm } = wrapper;
   const { data } = vm;
 
-  vm.onAreaConfirm([]);
-  vm.onAreaConfirm([{ code: -1 }]);
-  vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
-  vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
-  expect(data['area_code']).toEqual('');
-
   vm.onAreaConfirm([
     { name: '北京市' },
     { name: '北京市' },
@@ -162,7 +144,7 @@ test('select area', () => {
 
 test('on change detail', () => {
   const wrapper = mount(AddressEdit);
-  const field = wrapper.findAll('.van-field__control').at(2);
+  const field = wrapper.findAll('.van-field__control').at(3);
 
   field.element.value = '123';
   field.trigger('input');
@@ -261,7 +243,7 @@ test('show search result', async() => {
     }
   });
 
-  const field = wrapper.findAll('.van-field__control').at(2);
+  const field = wrapper.findAll('.van-field__control').at(3);
   const input = field.element;
   field.trigger('focus');
 

packages/contact-card/test/index.spec.js

@@ -62,13 +62,6 @@ describe('ContactEdit', () => {
     expect(errorInfo.name).toBeTruthy();
     field.at(0).trigger('focus');
     expect(errorInfo.name).toBeFalsy();
-
-    // name too long
-    data.name = '1'.repeat(30);
-    button.trigger('click');
-    expect(errorInfo.name).toBeTruthy();
-    field.at(0).trigger('focus');
-    expect(errorInfo.name).toBeFalsy();
   });
 
   it('valid tel', () => {

packages/contact-edit/index.vue

@@ -89,7 +89,7 @@ export default create({
       const value = this.data[key].trim();
       switch (key) {
         case 'name':
-          return value ? value.length <= 15 ? '' : this.$t('nameOverlimit') : this.$t('nameEmpty');
+          return value ? '' : this.$t('nameEmpty');
         case 'tel':
           return this.telValidator(value) ? '' : this.$t('telInvalid');
       }

packages/locale/lang/en-US.js

@@ -4,14 +4,11 @@ export default {
   save: 'Save',
   confirm: 'Confirm',
   cancel: 'Cancel',
+  delete: 'Delete',
   complete: 'Complete',
   contact: 'Name',
-  province: 'Province',
-  city: 'City',
-  county: 'District',
   loadingTip: 'Loading...',
   nameEmpty: 'Name can not be empty',
-  nameOverlimit: 'Name length exceeds limit',
   telInvalid: 'Malformed phone number',
   telPlaceholder: 'Phone',
   vanContactCard: {
@@ -21,7 +18,6 @@ export default {
     addText: 'Add new contact'
   },
   vanContactEdit: {
-    delete: 'Delete',
     confirmDelete: 'Are you sure you want to delete this contact?'
   },
   vanPagination: {
@@ -55,20 +51,13 @@ export default {
   },
   vanAddressEdit: {
     area: 'Area',
+    receiver: 'Receiver',
+    postal: 'Postal',
     areaEmpty: 'Please select a receiving area',
-    addressOverlimit: 'The length of the address can not exceed 200 characters',
     addressEmpty: 'Address can not be empty',
     postalEmpty: 'Wrong postal code',
     defaultAddress: 'Set as the default address',
-    deleteAddress: 'Delete the address',
+    confirmDelete: 'Are you sure you want to delete this address?'
-    confirmDelete: 'Are you sure you want to delete this address?',
-    label: {
-      name: 'Receiver',
-      postal: 'Postal'
-    },
-    placeholder: {
-      postal: 'Postal code (optional)'
-    }
   },
   vanAddressEditDetail: {
     label: 'Address',
@@ -95,11 +84,10 @@ export default {
     upload: 'Please upload',
     number: 'Please fill in the correct number format message',
     email: 'Please fill in the correct email message',
-    idcard: 'Please fill in the correct ID number message',
+    id_no: 'Please fill in the correct ID number message',
-    overlimit: 'not more than 200 words',
     onePic: 'only one picture',
     placeholder: {
-      'id_no': 'Idcard Number',
+      id_no: 'Idcard Number',
       text: 'Text',
       tel: 'Number',
       email: 'Email',

packages/locale/lang/zh-CN.js

@@ -4,15 +4,13 @@ export default {
   save: '保存',
   confirm: '确认',
   cancel: '取消',
+  delete: '删除',
   complete: '完成',
   contact: '联系人',
-  province: '选择省份',
-  city: '选择城市',
-  county: '选择地区',
   loadingTip: '加载中...',
   nameEmpty: '请填写名字',
-  nameOverlimit: '名字过长，请重新输入',
+  confirmDelete: '确定要删除么',
-  telInvalid: '请填写正确的手机号码或电话号码',
+  telInvalid: '请填写正确的联系电话',
   telPlaceholder: '手机或固定电话',
   vanContactCard: {
     addText: '添加订单联系人信息'
@@ -20,10 +18,6 @@ export default {
   vanContactList: {
     addText: '新建联系人'
   },
-  vanContactEdit: {
-    delete: '删除联系人',
-    confirmDelete: '确定要删除这个联系人么'
-  },
   vanPagination: {
     prev: '上一页',
     next: '下一页'
@@ -55,21 +49,12 @@ export default {
   },
   vanAddressEdit: {
     area: '收件地区',
-    addressText: '收货',
+    receiver: '收货人',
+    postal: '邮政编码',
     areaEmpty: '请选择收件地区',
-    addressOverlimit: '详细地址不能超过200个字符',
     addressEmpty: '请填写详细地址',
     postalEmpty: '邮政编码格式不正确',
-    defaultAddress: '设为默认收货地址',
+    defaultAddress: '设为默认收货地址'
-    deleteAddress: '删除收货地址',
-    confirmDelete: '确定要删除这个收货地址么',
-    label: {
-      name: '收货人',
-      postal: '邮政编码'
-    },
-    placeholder: {
-      postal: '邮政编码(选填)'
-    }
   },
   vanAddressEditDetail: {
     label: '详细地址',
@@ -96,11 +81,10 @@ export default {
     upload: '请上传',
     number: '请填写正确的数字格式留言',
     email: '请填写正确的邮箱',
-    'id_no': '请填写正确的身份证号码',
+    id_no: '请填写正确的身份证号码',
-    overlimit: '写的太多了，不要超过200字',
     onePic: '仅限一张',
     placeholder: {
-      'id_no': '输入18位身份证号码',
+      id_no: '输入身份证号码',
       text: '输入文本',
       tel: '输入数字',
       email: '输入邮箱',

packages/locale/lang/zh-HK.js

@@ -4,14 +4,11 @@ export default {
   save: '儲存',
   confirm: '確認',
   cancel: '取消',
+  delete: '刪除',
   complete: '完成',
   contact: '聯絡人',
-  province: '選擇省份',
-  city: '選擇城市',
-  county: '選擇地區',
   loadingTip: '加載中...',
   nameEmpty: '請填寫姓名',
-  nameOverlimit: '姓名過長，請重新輸入',
   telInvalid: '請填寫正確的電話號碼',
   telPlaceholder: '電話號碼',
   vanContactCard: {
@@ -21,7 +18,6 @@ export default {
     addText: '新增聯絡人'
   },
   vanContactEdit: {
-    delete: '刪除聯絡人',
     confirmDelete: '確定要刪除這個聯絡人嗎'
   },
   vanPagination: {
@@ -55,21 +51,13 @@ export default {
   },
   vanAddressEdit: {
     area: '收件地區',
-    addressText: '收貨',
+    receiver: '收貨人',
+    postal: '郵政編碼',
     areaEmpty: '請選擇收件地區',
-    addressOverlimit: '詳細地址不能超過200個字元',
     addressEmpty: '請填寫詳細地址',
     postalEmpty: '郵政編碼格式不正確',
     defaultAddress: '設為默認收貨地址',
-    deleteAddress: '刪除收貨地址',
+    confirmDelete: '確定要刪除這個收貨地址麼'
-    confirmDelete: '確定要刪除這個收貨地址麼',
-    label: {
-      name: '收貨人',
-      postal: '郵政編碼'
-    },
-    placeholder: {
-      postal: '郵政編碼(選填)'
-    }
   },
   vanAddressEditDetail: {
     label: '詳細地址',
@@ -96,11 +84,10 @@ export default {
     upload: '請上傳',
     number: '請填寫正確的數字格式留言',
     email: '請填寫正確的電郵地址',
-    'id_no': '請填寫正確的身份證號碼',
+    id_no: '請填寫正確的身份證號碼',
-    overlimit: '寫的太多了，不要超過200字',
     onePic: '僅限一張',
     placeholder: {
-      'id_no': '輸入身份證號碼',
+      id_no: '輸入身份證號碼',
       text: '輸入文本',
       tel: '輸入數字',
       email: '輸入電郵地址',