blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] AddressEdit: area code observer (#680)

Browse Source
This commit is contained in:
neverland 2018-03-12 17:19:24 +08:00 committed by GitHub
parent 2d441c5e86
commit 0b7468f596
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/address-edit/index.vue
View File

@ -17,7 +17,12 @@
:error="errorInfo.tel"
@focus="onFocus('tel')"
/>
<cell class="van-address-edit__area" :title="$t('areaTitle')" @click="showAreaSelect = true">
<cell
clickable
class="van-address-edit__area"
:title="$t('areaTitle')"
@click="showAreaSelect = true"
>
<span>{{ currentInfo.province || $t('placeholder.province') }}</span>
<span>{{ currentInfo.city || $t('placeholder.city') }}</span>
<span>{{ currentInfo.county || $t('placeholder.county') }}</span>
@ -63,6 +68,7 @@
<popup v-model="showAreaSelect" position="bottom">
<van-area
ref="area"
:loading="!areaListLoaded"
:value="currentInfo.area_code"
:area-list="areaList"
@confirm="onAreaConfirm"
@ -74,7 +80,7 @@
<script>
/* eslint-disable camelcase */
import { create } from '../utils';
import { create, isObj } from '../utils';
import Field from '../field';
import Cell from '../cell';
import CellGroup from '../cell-group';
@ -87,6 +93,18 @@ import AddressEditDetail from './Detail';
import SwitchCell from '../switch-cell';
import validateMobile from '../utils/validate/mobile';
const defaultAddress = {
name: '',
tel: '',
province: '',
city: '',
county: '',
area_code: '',
postal_code: '',
address_detail: '',
is_default: false
};
export default create({
name: 'van-address-edit',
@ -111,17 +129,7 @@ export default create({
addressText: String,
addressInfo: {
type: Object,
default: () => ({
name: '',
tel: '',
province: '',
city: '',
county: '',
area_code: '',
postal_code: '',
address_detail: '',
is_default: false
})
default: () => ({ ...defaultAddress })
},
searchResult: {
type: Array,
@ -136,7 +144,10 @@ export default create({
data() {
return {
showAreaSelect: false,
currentInfo: this.addressInfo,
currentInfo: {
...defaultAddress,
...this.addressInfo
},
isEdit: !!this.addressInfo.id,
detailFocused: false,
errorInfo: {
@ -151,10 +162,23 @@ export default create({
watch: {
addressInfo: {
handler(val) {
this.currentInfo = val;
this.currentInfo = {
...defaultAddress,
...val
};
this.isEdit = !!val.id;
if (val.area_code) {
this.setAreaCode(val.area_code);
}
},
deep: true
},
areaList() {
if (this.currentInfo.area_code) {
this.setAreaCode(this.currentInfo.area_code);
}
}
},
@ -166,6 +190,10 @@ export default create({
computedAddressText() {
return this.addressText || this.$t('addressText');
},
areaListLoaded() {
return isObj(this.areaList) && Object.keys(this.areaList).length;
}
},

74
test/specs/address-edit.spec.js
View File

@ -99,42 +99,42 @@ describe('AddressEdit', () => {
const saveButton = wrapper.find('.van-button')[0];
// name empty
wrapper.vm.addressInfo.name = '';
wrapper.vm.currentInfo.name = '';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['name']).to.be.true;
wrapper.find('.van-field__control')[0].trigger('focus');
expect(wrapper.vm.errorInfo['name']).to.be.false;
// name too long
wrapper.vm.addressInfo.name = '111111111111111111111111111';
wrapper.vm.currentInfo.name = '111111111111111111111111111';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['name']).to.be.true;
wrapper.find('.van-field__control')[0].trigger('focus');
expect(wrapper.vm.errorInfo['name']).to.be.false;
// tel empty
wrapper.vm.addressInfo.name = '123';
wrapper.vm.addressInfo.tel = '';
wrapper.vm.currentInfo.name = '123';
wrapper.vm.currentInfo.tel = '';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['tel']).to.be.true;
wrapper.find('.van-field__control')[1].trigger('focus');
expect(wrapper.vm.errorInfo['tel']).to.be.false;
// area_code empty
wrapper.vm.addressInfo.tel = '13000000000';
wrapper.vm.addressInfo.area_code = '';
wrapper.vm.currentInfo.tel = '13000000000';
wrapper.vm.currentInfo.area_code = '';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['area_code']).to.be.true;
// area_code invalid
wrapper.vm.addressInfo.tel = '13000000000';
wrapper.vm.addressInfo.area_code = '-1';
wrapper.vm.currentInfo.tel = '13000000000';
wrapper.vm.currentInfo.area_code = '-1';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['area_code']).to.be.true;
// address_detail empty
wrapper.vm.addressInfo.area_code = '100000';
wrapper.vm.addressInfo.address_detail = '';
wrapper.vm.currentInfo.area_code = '100000';
wrapper.vm.currentInfo.address_detail = '';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
wrapper.find('.van-field__control')[2].trigger('focus');
@ -145,26 +145,26 @@ describe('AddressEdit', () => {
for (let i = 0; i < 300; i++) {
longAddress += '1';
}
wrapper.vm.addressInfo.address_detail = longAddress;
wrapper.vm.currentInfo.address_detail = longAddress;
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
wrapper.find('.van-field__control')[2].trigger('focus');
expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
// postal_code invalid
wrapper.vm.addressInfo.address_detail = '123';
wrapper.vm.addressInfo.postal_code = '123';
wrapper.vm.currentInfo.address_detail = '123';
wrapper.vm.currentInfo.postal_code = '123';
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['postal_code']).to.be.true;
wrapper.find('.van-field__control')[3].trigger('focus');
expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
// valid result
wrapper.vm.addressInfo.postal_code = '123456';
wrapper.vm.currentInfo.postal_code = '123456';
saveButton.trigger('click');
// not show postal_code
wrapper.vm.addressInfo.postal_code = '156';
wrapper.vm.currentInfo.postal_code = '156';
wrapper.vm.showPostal = false;
saveButton.trigger('click');
expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
@ -235,17 +235,17 @@ describe('AddressEdit', () => {
wrapper.vm.onAreaConfirm([{ code: -1 }]);
wrapper.vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
expect(wrapper.vm.currentInfo['area_code']).to.equal('');
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('西湖区');
expect(wrapper.vm.addressInfo['area_code']).to.equal('123456');
expect(wrapper.vm.currentInfo['province']).to.equal('浙江省');
expect(wrapper.vm.currentInfo['city']).to.equal('杭州市');
expect(wrapper.vm.currentInfo['county']).to.equal('西湖区');
expect(wrapper.vm.currentInfo['area_code']).to.equal('123456');
});
it('delete address', done => {
@ -308,7 +308,7 @@ describe('AddressEdit', () => {
wrapper.vm.$nextTick(() => {
wrapper.find('.van-field__icon')[0].trigger('touchstart');
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.addressInfo.address_detail).to.equal('');
expect(wrapper.vm.currentInfo.address_detail).to.equal('');
done();
});
});
@ -388,4 +388,36 @@ describe('AddressEdit', () => {
done();
}, 50);
});
it('watch area code', done => {
wrapper = mount(AddressEdit, {
propsData: {
areaList: {},
addressInfo: {
area_code: '330304'
}
}
});
expect(wrapper.vm.currentInfo.city).to.equal('');
wrapper.vm.areaList = areaList;
setTimeout(() => {
expect(wrapper.vm.currentInfo.city).to.equal('温州市');
wrapper.vm.addressInfo = { area_code: '' };
wrapper.vm.areaList = {};
setTimeout(() => {
expect(wrapper.vm.currentInfo.city).to.equal('');
wrapper.vm.areaList = areaList;
wrapper.vm.addressInfo = { area_code: '330304' };
setTimeout(() => {
expect(wrapper.vm.currentInfo.city).to.equal('温州市');
done();
}, 50);
});
}, 50);
});
});