mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[breaking change] AddressEdit: use camelcase data (#1644)
This commit is contained in:
neverland
GitHub
parent
abd4819ca1
commit
05c4804958
@ -103,10 +103,10 @@ export default {
|
||||
| province | Province | `String` |
|
||||
| city | City | `String` |
|
||||
| county | County | `String` |
|
||||
| address_detail | Detailed Address | `String` |
|
||||
| area_code | Area code | `String` |
|
||||
| postal_code | Postal code | `String` |
|
||||
| is_default | Is default address | `Boolean` |
|
||||
| addressDetail | Detailed Address | `String` |
|
||||
| areaCode | Area code | `String` |
|
||||
| postalCode | Postal code | `String` |
|
||||
| isDefault | Is default address | `Boolean` |
|
||||
|
||||
#### searchResult Data Structure
|
||||
| key | Description | Type |
|
||||
|
||||
@ -26,11 +26,11 @@
|
||||
/>
|
||||
<address-edit-detail
|
||||
:focused="detailFocused"
|
||||
:value="data.address_detail"
|
||||
:error="errorInfo.address_detail"
|
||||
:value="data.addressDetail"
|
||||
:error="errorInfo.addressDetail"
|
||||
:search-result="searchResult"
|
||||
:show-search-result="showSearchResult"
|
||||
@focus="onFocus('address_detail')"
|
||||
@focus="onFocus('addressDetail')"
|
||||
@blur="detailFocused = false"
|
||||
@input="onChangeDetail"
|
||||
@select-search="$emit('select-search', $event)"
|
||||
@ -38,20 +38,20 @@
|
||||
<field
|
||||
v-if="showPostal"
|
||||
v-show="!hideBottomFields"
|
||||
v-model="data.postal_code"
|
||||
v-model="data.postalCode"
|
||||
type="tel"
|
||||
maxlength="6"
|
||||
class="van-hairline--top"
|
||||
:label="$t('postal')"
|
||||
:placeholder="$t('postal')"
|
||||
:error="errorInfo.postal_code"
|
||||
@focus="onFocus('postal_code')"
|
||||
:error="errorInfo.postalCode"
|
||||
@focus="onFocus('postalCode')"
|
||||
/>
|
||||
<slot />
|
||||
<switch-cell
|
||||
v-if="showSetDefault"
|
||||
v-show="!hideBottomFields"
|
||||
v-model="data.is_default"
|
||||
v-model="data.isDefault"
|
||||
:title="$t('defaultAddress')"
|
||||
/>
|
||||
</cell-group>
|
||||
@ -69,7 +69,7 @@
|
||||
<van-area
|
||||
ref="area"
|
||||
:loading="!areaListLoaded"
|
||||
:value="data.area_code"
|
||||
:value="data.areaCode"
|
||||
:area-list="areaList"
|
||||
@confirm="onAreaConfirm"
|
||||
@cancel="showArea = false"
|
||||
@ -98,10 +98,10 @@ const defaultData = {
|
||||
province: '',
|
||||
city: '',
|
||||
county: '',
|
||||
area_code: '',
|
||||
postal_code: '',
|
||||
address_detail: '',
|
||||
is_default: false
|
||||
areaCode: '',
|
||||
postalCode: '',
|
||||
addressDetail: '',
|
||||
isDefault: false
|
||||
};
|
||||
|
||||
export default create({
|
||||
@ -148,8 +148,8 @@ export default create({
|
||||
errorInfo: {
|
||||
tel: false,
|
||||
name: false,
|
||||
postal_code: false,
|
||||
address_detail: false
|
||||
postalCode: false,
|
||||
addressDetail: false
|
||||
}
|
||||
};
|
||||
},
|
||||
@ -169,8 +169,8 @@ export default create({
|
||||
},
|
||||
|
||||
areaText() {
|
||||
const { province, city, county, area_code } = this.data;
|
||||
return province && city && county && area_code
|
||||
const { province, city, county, areaCode } = this.data;
|
||||
return province && city && county && areaCode
|
||||
? `${province} ${city} ${county}`
|
||||
: '';
|
||||
}
|
||||
@ -184,32 +184,32 @@ export default create({
|
||||
...val
|
||||
};
|
||||
|
||||
this.setAreaCode(val.area_code);
|
||||
this.setAreaCode(val.areaCode);
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
|
||||
areaList() {
|
||||
this.setAreaCode(this.data.area_code);
|
||||
this.setAreaCode(this.data.areaCode);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus(key) {
|
||||
this.errorInfo[key] = false;
|
||||
this.detailFocused = key === 'address_detail';
|
||||
this.detailFocused = key === 'addressDetail';
|
||||
this.$emit('focus', key);
|
||||
},
|
||||
|
||||
onChangeDetail(val) {
|
||||
this.data.address_detail = val;
|
||||
this.data.addressDetail = val;
|
||||
this.$emit('change-detail', val);
|
||||
},
|
||||
|
||||
onAreaConfirm(values) {
|
||||
this.showArea = false;
|
||||
this.data.area_code = values[2].code;
|
||||
this.data.areaCode = values[2].code;
|
||||
this.assignAreaValues(values);
|
||||
this.$emit('change-area', values);
|
||||
},
|
||||
@ -223,10 +223,10 @@ export default create({
|
||||
},
|
||||
|
||||
onSave() {
|
||||
const items = ['name', 'tel', 'area_code', 'address_detail'];
|
||||
const items = ['name', 'tel', 'areaCode', 'addressDetail'];
|
||||
|
||||
if (this.showPostal) {
|
||||
items.push('postal_code');
|
||||
items.push('postalCode');
|
||||
}
|
||||
|
||||
const isValid = items.every(item => {
|
||||
@ -252,11 +252,11 @@ export default create({
|
||||
return value ? '' : $t('nameEmpty');
|
||||
case 'tel':
|
||||
return this.telValidator(value) ? '' : $t('telInvalid');
|
||||
case 'area_code':
|
||||
case 'areaCode':
|
||||
return value ? '' : $t('areaEmpty');
|
||||
case 'address_detail':
|
||||
case 'addressDetail':
|
||||
return value ? '' : $t('addressEmpty');
|
||||
case 'postal_code':
|
||||
case 'postalCode':
|
||||
return value && !/^\d{6}$/.test(value) ? $t('postalEmpty') : '';
|
||||
}
|
||||
},
|
||||
@ -280,7 +280,7 @@ export default create({
|
||||
|
||||
// set area code to area component
|
||||
setAreaCode(code) {
|
||||
this.data.area_code = code || '';
|
||||
this.data.areaCode = code || '';
|
||||
this.$nextTick(() => {
|
||||
const { area } = this.$refs;
|
||||
if (area) {
|
||||
|
||||
@ -12,10 +12,10 @@ const addressInfo = {
|
||||
province: '北京市',
|
||||
city: '北京市',
|
||||
county: '朝阳区',
|
||||
address_detail: '详细地址',
|
||||
area_code: '110101',
|
||||
postal_code: '10000',
|
||||
is_default: true
|
||||
addressDetail: '详细地址',
|
||||
areaCode: '110101',
|
||||
postalCode: '10000',
|
||||
isDefault: true
|
||||
};
|
||||
|
||||
const createComponent = () => {
|
||||
@ -77,47 +77,47 @@ it('valid tel', () => {
|
||||
expect(errorInfo.tel).toBeFalsy();
|
||||
});
|
||||
|
||||
it('valid area_code', () => {
|
||||
it('valid areaCode', () => {
|
||||
const { data, button, errorInfo } = createComponent();
|
||||
// area_code empty
|
||||
data.area_code = '';
|
||||
// areaCode empty
|
||||
data.areaCode = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.area_code).toBeTruthy();
|
||||
expect(errorInfo.areaCode).toBeTruthy();
|
||||
|
||||
// area_code invalid
|
||||
data.area_code = '-1';
|
||||
// areaCode invalid
|
||||
data.areaCode = '-1';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.area_code).toBeTruthy();
|
||||
expect(errorInfo.areaCode).toBeTruthy();
|
||||
});
|
||||
|
||||
it('valid address_detail', () => {
|
||||
it('valid addressDetail', () => {
|
||||
const { data, field, button, errorInfo } = createComponent();
|
||||
data.address_detail = '';
|
||||
data.addressDetail = '';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.address_detail).toBeTruthy();
|
||||
expect(errorInfo.addressDetail).toBeTruthy();
|
||||
field.at(3).trigger('focus');
|
||||
expect(errorInfo.address_detail).toBeFalsy();
|
||||
expect(errorInfo.addressDetail).toBeFalsy();
|
||||
});
|
||||
|
||||
test('valid postal code', () => {
|
||||
const { vm, data, field, button, errorInfo } = createComponent();
|
||||
|
||||
// postal_code invalid
|
||||
data.postal_code = '123';
|
||||
// postalCode invalid
|
||||
data.postalCode = '123';
|
||||
button.trigger('click');
|
||||
expect(errorInfo.postal_code).toBeTruthy();
|
||||
expect(errorInfo.postalCode).toBeTruthy();
|
||||
field.at(4).trigger('focus');
|
||||
expect(errorInfo.postal_code).toBeFalsy();
|
||||
expect(errorInfo.postalCode).toBeFalsy();
|
||||
|
||||
// valid result
|
||||
data.postal_code = '123456';
|
||||
data.postalCode = '123456';
|
||||
button.trigger('click');
|
||||
|
||||
// not show postal_code
|
||||
data.postal_code = '156';
|
||||
// not show postalCode
|
||||
data.postalCode = '156';
|
||||
vm.showPostal = false;
|
||||
button.trigger('click');
|
||||
expect(errorInfo.postal_code).toBeFalsy();
|
||||
expect(errorInfo.postalCode).toBeFalsy();
|
||||
});
|
||||
|
||||
test('select area', () => {
|
||||
@ -137,7 +137,7 @@ test('select area', () => {
|
||||
expect(data.province).toEqual('北京市');
|
||||
expect(data.city).toEqual('北京市');
|
||||
expect(data.county).toEqual('朝阳区');
|
||||
expect(data.area_code).toEqual('123456');
|
||||
expect(data.areaCode).toEqual('123456');
|
||||
});
|
||||
|
||||
test('on change detail', () => {
|
||||
@ -169,7 +169,7 @@ test('set/get area code', async() => {
|
||||
wrapper.vm.setAreaCode('110102');
|
||||
|
||||
await later(50);
|
||||
expect(wrapper.vm.data.area_code).toEqual('110102');
|
||||
expect(wrapper.vm.data.areaCode).toEqual('110102');
|
||||
expect(wrapper.vm.getArea()).toEqual([
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
@ -186,7 +186,7 @@ test('watch area code', async() => {
|
||||
propsData: {
|
||||
areaList: {},
|
||||
addressInfo: {
|
||||
area_code: '110101'
|
||||
areaCode: '110101'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -105,10 +105,10 @@ export default {
|
||||
| province | 省份 | `String` |
|
||||
| city | 城市 | `String` |
|
||||
| county | 区县 | `String` |
|
||||
| address_detail | 详细地址 | `String` |
|
||||
| area_code | 地区编码，通过省市区选择获取 | `String` |
|
||||
| postal_code | 邮政编码 | `String` |
|
||||
| is_default | 是否为默认地址 | `Boolean` |
|
||||
| addressDetail | 详细地址 | `String` |
|
||||
| areaCode | 地区编码，通过省市区选择获取 | `String` |
|
||||
| postalCode | 邮政编码 | `String` |
|
||||
| isDefault | 是否为默认地址 | `Boolean` |
|
||||
|
||||
#### searchResult 数据格式
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user