alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[Improvement] AddressEdit: simplify (#1274)

Browse Source
This commit is contained in:
neverland
2018-06-12 20:43:16 +08:00
committed by GitHub
parent c4c93ebbf7
commit 90bbfd2b12
10 changed files with 78 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/address-edit/demo/index.vue
+2 -2
View File
@@ -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
+25 -24
View File
@@ -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
clickable
:class="b('area')"
:title="$t('area')"
<field
readonly
:label="$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')"
:placeholder="$t('placeholder.postal')"
:label="$t('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 area ? area.getValues() : [];
return this.$refs.area ? this.$refs.area.getValues() : [];
},
// set area code to area component
packages/address-edit/test/__snapshots__/demo.spec.js.snap
+10 -5
View File
@@ -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
+16 -6
View File
@@ -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
+4 -22
View File
@@ -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');