From 90bbfd2b1227aad9a9c32adf3c1c4e85c19aea31 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 12 Jun 2018 20:43:16 +0800 Subject: [PATCH] [Improvement] AddressEdit: simplify (#1274) --- packages/address-edit/demo/index.vue | 4 +- packages/address-edit/index.vue | 49 ++++++++++--------- .../test/__snapshots__/demo.spec.js.snap | 15 ++++-- .../test/__snapshots__/index.spec.js.snap | 22 ++++++--- packages/address-edit/test/index.spec.js | 26 ++-------- packages/contact-card/test/index.spec.js | 7 --- packages/contact-edit/index.vue | 2 +- packages/locale/lang/en-US.js | 24 +++------ packages/locale/lang/zh-CN.js | 32 +++--------- packages/locale/lang/zh-HK.js | 25 +++------- 10 files changed, 78 insertions(+), 128 deletions(-) diff --git a/packages/address-edit/demo/index.vue b/packages/address-edit/demo/index.vue index f95ee1b29..c08225a0b 100644 --- a/packages/address-edit/demo/index.vue +++ b/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) { diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue index 5cf3d3b37..409927122 100644 --- a/packages/address-edit/index.vue +++ b/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')" /> - - {{ data.province || $t('province') }} - {{ data.city || $t('city') }} - {{ data.county || $t('county') }} - + /> - {{ $t('deleteAddress') }} + {{ $t('delete') }} @@ -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 area ? area.getValues() : []; + return this.$refs.area ? this.$refs.area.getValues() : []; }, // set area code to area component diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap index af7514e84..c2d20aa3c 100644 --- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap @@ -31,12 +31,17 @@ exports[`renders demo correctly 1`] = ` -
+
收件地区
-
选择省份 选择城市 选择地区
+
+ + + + +
@@ -59,13 +64,13 @@ exports[`renders demo correctly 1`] = `
-
+
邮政编码
- + @@ -94,7 +99,7 @@ exports[`renders demo correctly 1`] = `
-
+
收件地区
-
选择省份 选择城市 选择地区
+
+ + + + +
@@ -114,12 +119,17 @@ exports[`create a AddressEdit with props 1`] = `
-
+
收件地区
-
北京市 北京市 朝阳区
+
+ + + + +
@@ -142,13 +152,13 @@ exports[`create a AddressEdit with props 1`] = `
-
+
邮政编码
- + diff --git a/packages/address-edit/test/index.spec.js b/packages/address-edit/test/index.spec.js index ce7693c92..8c0826801 100644 --- a/packages/address-edit/test/index.spec.js +++ b/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'); diff --git a/packages/contact-card/test/index.spec.js b/packages/contact-card/test/index.spec.js index 7b4b5faf8..4c93867dc 100644 --- a/packages/contact-card/test/index.spec.js +++ b/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', () => { diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue index 7aa1a0f25..6a4412686 100644 --- a/packages/contact-edit/index.vue +++ b/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'); } diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js index adccb33c9..80389e4ca 100644 --- a/packages/locale/lang/en-US.js +++ b/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?', - label: { - name: 'Receiver', - postal: 'Postal' - }, - placeholder: { - postal: 'Postal code (optional)' - } + confirmDelete: 'Are you sure you want to delete this address?' }, 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', - overlimit: 'not more than 200 words', + id_no: 'Please fill in the correct ID number message', onePic: 'only one picture', placeholder: { - 'id_no': 'Idcard Number', + id_no: 'Idcard Number', text: 'Text', tel: 'Number', email: 'Email', diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js index 0dfbef1c9..e956b7749 100644 --- a/packages/locale/lang/zh-CN.js +++ b/packages/locale/lang/zh-CN.js @@ -4,15 +4,13 @@ export default { save: '保存', confirm: '确认', cancel: '取消', + delete: '删除', complete: '完成', contact: '联系人', - province: '选择省份', - city: '选择城市', - county: '选择地区', loadingTip: '加载中...', nameEmpty: '请填写名字', - nameOverlimit: '名字过长，请重新输入', - telInvalid: '请填写正确的手机号码或电话号码', + confirmDelete: '确定要删除么', + 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: '设为默认收货地址', - deleteAddress: '删除收货地址', - confirmDelete: '确定要删除这个收货地址么', - label: { - name: '收货人', - postal: '邮政编码' - }, - placeholder: { - postal: '邮政编码(选填)' - } + defaultAddress: '设为默认收货地址' }, vanAddressEditDetail: { label: '详细地址', @@ -96,11 +81,10 @@ export default { upload: '请上传', number: '请填写正确的数字格式留言', email: '请填写正确的邮箱', - 'id_no': '请填写正确的身份证号码', - overlimit: '写的太多了，不要超过200字', + id_no: '请填写正确的身份证号码', onePic: '仅限一张', placeholder: { - 'id_no': '输入18位身份证号码', + id_no: '输入身份证号码', text: '输入文本', tel: '输入数字', email: '输入邮箱', diff --git a/packages/locale/lang/zh-HK.js b/packages/locale/lang/zh-HK.js index 3303c61b4..5a2e3c2bd 100644 --- a/packages/locale/lang/zh-HK.js +++ b/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: '確定要刪除這個收貨地址麼', - label: { - name: '收貨人', - postal: '郵政編碼' - }, - placeholder: { - postal: '郵政編碼(選填)' - } + confirmDelete: '確定要刪除這個收貨地址麼' }, vanAddressEditDetail: { label: '詳細地址', @@ -96,11 +84,10 @@ export default { upload: '請上傳', number: '請填寫正確的數字格式留言', email: '請填寫正確的電郵地址', - 'id_no': '請填寫正確的身份證號碼', - overlimit: '寫的太多了，不要超過200字', + id_no: '請填寫正確的身份證號碼', onePic: '僅限一張', placeholder: { - 'id_no': '輸入身份證號碼', + id_no: '輸入身份證號碼', text: '輸入文本', tel: '輸入數字', email: '輸入電郵地址',