mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
neverland
GitHub
commit
b6667ef0e6
145
docs/examples-docs/address-edit.md
Normal file
145
docs/examples-docs/address-edit.md
Normal file
@ -0,0 +1,145 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
import areaList from '../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
this.test = {
|
||||
user_name: 'b'
|
||||
};
|
||||
Toast('save');
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心H座'
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## AddressEdit 地址编辑
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { AddressEdit } from 'vant';
|
||||
|
||||
Vue.component(AddressEdit.name, AddressEdit);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
:show-postal="true"
|
||||
:show-set-default="true"
|
||||
:show-search-result="true"
|
||||
:search-result="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
@change-detail="onChangeDetail"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
Toast('save');
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| areaList | 地区列表 | `Object` | - | - |
|
||||
| addressInfo | 收货人信息 | `Object` | `{}` | - |
|
||||
| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
|
||||
| addressText | "地址"文案前缀 | `String` | `收货` | - |
|
||||
| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
|
||||
| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
|
||||
| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
|
||||
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
|
||||
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### addressInfo 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| province | 省份 | `String` |
|
||||
| city | 城市 | `String` |
|
||||
| county | 区县 | `String` |
|
||||
| address_detail | 详细地址 | `String` |
|
||||
| area_code | 地区编码，通过省市区选择获取 | `String` |
|
||||
| postal_code | 邮政编码 | `String` |
|
||||
| is_default | 是否为默认地址 | `String` |
|
||||
|
||||
#### searchResult 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| name | 地名 | `String` |
|
||||
| address | 详细地址 | `String` |
|
||||
|
||||
#### 省市县列表数据格式
|
||||
请参考 [Area](/zanui/vue/component/area) 组件。
|
||||
@ -214,6 +214,10 @@ module.exports = {
|
||||
{
|
||||
"groupName": "业务组件",
|
||||
"list": [
|
||||
{
|
||||
"path": "/address-edit",
|
||||
"title": "AddressEdit 地址编辑"
|
||||
},
|
||||
{
|
||||
"path": "/address-list",
|
||||
"title": "AddressList 地址列表"
|
||||
|
||||
108
packages/address-edit/Detail.vue
Normal file
108
packages/address-edit/Detail.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div ref="root">
|
||||
<van-field
|
||||
label="详细地址"
|
||||
placeholder="如街道、楼层、门牌号等"
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
autosize
|
||||
rows="1"
|
||||
:value="value"
|
||||
:error="isError"
|
||||
:onIconClick="onIconClick"
|
||||
@input="$emit('input', $event)"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
>
|
||||
<template slot="icon">
|
||||
<span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
|
||||
<van-icon v-else-if="showIcon" name="clear" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-cell-group class="van-address-edit-detail__suggest-list" v-if="showSearchList">
|
||||
<van-cell
|
||||
v-for="express in searchResult"
|
||||
:key="express.name + express.address"
|
||||
class="van-address-edit-detail__suggest-item"
|
||||
@click="onSuggestSelect(express)">
|
||||
<van-icon name="location" class="van-address-edit-detail__location" />
|
||||
<div class="van-address-edit-detail__item-info">
|
||||
<p class="van-address-edit-detail__title">{{ express.name }}</p>
|
||||
<p class="van-address-edit-detail__subtitle">{{ express.address }}</p>
|
||||
</div>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import Field from '../field';
|
||||
import Cell from '../cell';
|
||||
import CellGroup from '../cell-group';
|
||||
import UA from 'zan-utils/browser/ua_browser';
|
||||
|
||||
export default {
|
||||
name: 'van-address-edit-detail',
|
||||
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[Icon.name]: Icon,
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
isError: Boolean,
|
||||
searchResult: Array,
|
||||
showSearchResult: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isAndroid: UA.isAndroid(),
|
||||
isFocused: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
showSearchList() {
|
||||
return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
|
||||
},
|
||||
|
||||
showIcon() {
|
||||
return this.value && this.isFocused;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFocus(e) {
|
||||
this.isFocused = true;
|
||||
this.$emit('focus', e);
|
||||
this.$refs.root.scrollIntoView();
|
||||
},
|
||||
|
||||
handleBlur(e) {
|
||||
// 等待其他地方点击事件完了以后，再触发
|
||||
setTimeout(() => {
|
||||
this.isFocused = false;
|
||||
this.$emit('blur', e);
|
||||
}, 100);
|
||||
},
|
||||
|
||||
onIconClick() {
|
||||
if (this.isAndroid) {
|
||||
this.$refs.root.querySelector('.van-field__control').blur();
|
||||
} else {
|
||||
this.$emit('input', '');
|
||||
}
|
||||
},
|
||||
|
||||
onSuggestSelect(express) {
|
||||
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
242
packages/address-edit/index.vue
Normal file
242
packages/address-edit/index.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="van-address-edit">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
maxlength="15"
|
||||
placeholder="名字"
|
||||
:label="addressText + '人'"
|
||||
v-model="currentInfo.user_name"
|
||||
:error="errorInfo.user_name"
|
||||
@focus="onFocus('user_name')"
|
||||
/>
|
||||
<van-field
|
||||
type="tel"
|
||||
label="联系电话"
|
||||
placeholder="手机或固定电话"
|
||||
v-model="currentInfo.tel"
|
||||
:error="errorInfo.tel"
|
||||
@focus="onFocus('tel')"
|
||||
/>
|
||||
<van-cell class="van-address-edit__area" title="收件地区" @click="showAreaSelect = true">
|
||||
<span>{{ currentInfo.province || '选择省' }}</span>
|
||||
<span>{{ currentInfo.city || '选择市' }}</span>
|
||||
<span>{{ currentInfo.county || '选择区' }}</span>
|
||||
</van-cell>
|
||||
<van-address-edit-detail
|
||||
:value="currentInfo.address_detail"
|
||||
:isError="errorInfo.address_detail"
|
||||
:showSearchResult="showSearchResult"
|
||||
:searchResult="searchResult"
|
||||
@focus="onFocus('address_detail')"
|
||||
@blur="onDetailBlur"
|
||||
@input="onChangeDetail"
|
||||
/>
|
||||
<van-field
|
||||
v-if="showPostal"
|
||||
v-show="!hideBottomFields"
|
||||
type="tel"
|
||||
label="邮政编码"
|
||||
placeholder="邮政编码(选填)"
|
||||
v-model="currentInfo.postal_code"
|
||||
maxlength="6"
|
||||
class="van-hairline--top"
|
||||
:error="errorInfo.postal_code"
|
||||
@focus="onFocus('postal_code')">
|
||||
</van-field>
|
||||
<van-switch-cell
|
||||
v-if="showSetDefault"
|
||||
v-show="!hideBottomFields"
|
||||
v-model="currentInfo.is_default"
|
||||
:title="`设为默认${addressText}地址`"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div v-show="!hideBottomFields" class="van-address-edit__buttons">
|
||||
<van-button block :loading="isSaving" @click="onSaveAddress" type="primary">保存</van-button>
|
||||
<van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">删除{{ addressText }}地址</van-button>
|
||||
</div>
|
||||
<van-popup v-model="showAreaSelect" position="bottom">
|
||||
<van-area
|
||||
:value="currentInfo.area_code"
|
||||
:areaList="areaList"
|
||||
@confirm="onAreaConfirm"
|
||||
@cancel="showAreaSelect = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Field from '../field';
|
||||
import Cell from '../cell';
|
||||
import CellGroup from '../cell-group';
|
||||
import Button from '../button';
|
||||
import Popup from '../popup';
|
||||
import Toast from '../toast';
|
||||
import Dialog from '../dialog';
|
||||
import Area from '../area';
|
||||
import Detail from './Detail';
|
||||
import SwitchCell from '../switch-cell';
|
||||
import validateMobile from 'zan-utils/validate/mobile';
|
||||
|
||||
export default {
|
||||
name: 'van-address-edit',
|
||||
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[SwitchCell.name]: SwitchCell,
|
||||
[Button.name]: Button,
|
||||
[Popup.name]: Popup,
|
||||
[Area.name]: Area,
|
||||
[Detail.name]: Detail
|
||||
},
|
||||
|
||||
props: {
|
||||
isSaving: Boolean,
|
||||
isDeleting: Boolean,
|
||||
areaList: Object,
|
||||
showPostal: Boolean,
|
||||
showSetDefault: Boolean,
|
||||
showSearchResult: Boolean,
|
||||
addressText: {
|
||||
type: String,
|
||||
default: '收货'
|
||||
},
|
||||
addressInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
user_name: '',
|
||||
tel: '',
|
||||
province: '',
|
||||
city: '',
|
||||
county: '',
|
||||
area_code: '',
|
||||
postal_code: '',
|
||||
address_detail: '',
|
||||
is_default: false
|
||||
})
|
||||
},
|
||||
searchResult: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showAreaSelect: false,
|
||||
currentInfo: this.addressInfo,
|
||||
isEdit: !!this.addressInfo.id,
|
||||
detailFocused: false,
|
||||
errorInfo: {
|
||||
user_name: false,
|
||||
tel: false,
|
||||
address_detail: false,
|
||||
postal_code: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
addressInfo: {
|
||||
handler(val) {
|
||||
this.currentInfo = val;
|
||||
this.isEdit = !!val.id;
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 当地址输入框开启了搜索，并且开始搜索后，隐藏所有地址详情以外的输入框
|
||||
hideBottomFields() {
|
||||
return this.searchResult.length && this.detailFocused;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus(key) {
|
||||
this.errorInfo[key] = false;
|
||||
this.detailFocused = key === 'address_detail';
|
||||
},
|
||||
|
||||
onDetailBlur() {
|
||||
this.detailFocused = false;
|
||||
},
|
||||
|
||||
onChangeDetail(val) {
|
||||
this.currentInfo.address_detail = val;
|
||||
this.$emit('change-detail', val);
|
||||
},
|
||||
|
||||
onAreaConfirm(values) {
|
||||
if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
|
||||
return Toast('请选择正确的收件地区');
|
||||
}
|
||||
Object.assign(this.currentInfo, {
|
||||
province: values[0].name,
|
||||
city: values[1].name,
|
||||
county: values[2].name,
|
||||
'area_code': values[2].code
|
||||
});
|
||||
this.showAreaSelect = false;
|
||||
},
|
||||
|
||||
onSaveAddress() {
|
||||
const items = [
|
||||
'user_name',
|
||||
'tel',
|
||||
'area_code',
|
||||
'address_detail'
|
||||
];
|
||||
|
||||
if (this.showPostal) {
|
||||
items.push('postal_code');
|
||||
}
|
||||
|
||||
const isValid = items.every(item => {
|
||||
const msg = this.getErrorMessageByKey(item);
|
||||
if (msg) {
|
||||
this.errorInfo[item] = true;
|
||||
Toast(msg);
|
||||
}
|
||||
return !msg;
|
||||
});
|
||||
|
||||
if (isValid && !this.isSaving) {
|
||||
this.$emit('save', this.currentInfo);
|
||||
}
|
||||
},
|
||||
|
||||
getErrorMessageByKey(key) {
|
||||
const value = this.currentInfo[key];
|
||||
|
||||
switch (key) {
|
||||
case 'user_name':
|
||||
return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
|
||||
case 'tel':
|
||||
return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
|
||||
case 'area_code':
|
||||
return value ? +value !== -1 ? '' : '请选择正确的收件地区' : '请选择收件地区';
|
||||
case 'address_detail':
|
||||
return value ? value.length <= 200 ? '' : '详细地址不能超过200个字符' : '请填写详细地址';
|
||||
case 'postal_code':
|
||||
return value && !/^\d{6}$/.test(value) ? '邮政编码格式不正确' : '';
|
||||
}
|
||||
},
|
||||
|
||||
onDeleteAddress() {
|
||||
if (this.isDeleting) {
|
||||
return;
|
||||
}
|
||||
|
||||
Dialog.confirm({
|
||||
message: `确定要删除这个${this.addressText}地址么`
|
||||
}).then(() => {
|
||||
this.$emit('delete', this.currentInfo);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -15,20 +15,22 @@
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
ref="textarea"
|
||||
class="van-field__control"
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
@focus="$emit('focus')"
|
||||
@blur="$emit('blur')"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
class="van-field__control"
|
||||
:type="type"
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
@focus="$emit('focus')"
|
||||
@blur="$emit('blur')"
|
||||
/>
|
||||
<div
|
||||
v-if="hasIcon"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import Actionsheet from './actionsheet';
|
||||
import AddressEdit from './address-edit';
|
||||
import AddressList from './address-list';
|
||||
import Area from './area';
|
||||
import Badge from './badge';
|
||||
@ -56,6 +57,7 @@ import Waterfall from './waterfall';
|
||||
const version = '0.9.9';
|
||||
const components = [
|
||||
Actionsheet,
|
||||
AddressEdit,
|
||||
AddressList,
|
||||
Area,
|
||||
Badge,
|
||||
@ -123,6 +125,7 @@ export {
|
||||
install,
|
||||
version,
|
||||
Actionsheet,
|
||||
AddressEdit,
|
||||
AddressList,
|
||||
Area,
|
||||
Badge,
|
||||
|
||||
65
packages/vant-css/src/address-edit.css
Normal file
65
packages/vant-css/src/address-edit.css
Normal file
@ -0,0 +1,65 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-address-edit {
|
||||
&__buttons {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
&__area {
|
||||
.van-cell__title {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.van-icon-clear {
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
&-detail {
|
||||
&__finish-edit {
|
||||
color: $blue;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__suggest-list {
|
||||
margin-left: -15px;
|
||||
|
||||
&::after {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__location {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
&__item-info {
|
||||
margin-left: 26px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 12px;
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -50,6 +50,7 @@
|
||||
@import './tree-select.css';
|
||||
|
||||
/* business components */
|
||||
@import './address-edit.css';
|
||||
@import './address-list.css';
|
||||
@import './coupon-list.css';
|
||||
@import './goods-action.css';
|
||||
|
||||
326
test/unit/specs/address-edit.spec.js
Normal file
326
test/unit/specs/address-edit.spec.js
Normal file
@ -0,0 +1,326 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import AddressEdit from 'packages/address-edit';
|
||||
import AddressDetail from 'packages/address-edit/Detail';
|
||||
import areaList from '../../../docs/mock/area.json';
|
||||
|
||||
describe('AddressEdit', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a AddressEdit', () => {
|
||||
wrapper = mount(AddressEdit);
|
||||
expect(wrapper.hasClass('van-address-edit')).to.be.true;
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
|
||||
expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
|
||||
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal('选择省');
|
||||
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal('选择市');
|
||||
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal('选择区');
|
||||
});
|
||||
|
||||
it('create a AddressEdit with props', () => {
|
||||
const addressInfo = {
|
||||
user_name: '测试',
|
||||
tel: '123123213',
|
||||
province: '浙江省',
|
||||
city: '杭州市',
|
||||
county: '西湖区',
|
||||
address_detail: '详细地址',
|
||||
postal_code: '10000',
|
||||
is_default: true
|
||||
};
|
||||
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
showSearchResult: true,
|
||||
searchResult: []
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.user_name);
|
||||
expect(wrapper.find('.van-field__control')[1].element.value).to.equal(addressInfo.tel);
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(addressInfo.address_detail);
|
||||
expect(wrapper.find('.van-field__control')[3].element.value).to.equal(addressInfo.postal_code);
|
||||
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal(addressInfo.province);
|
||||
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal(addressInfo.city);
|
||||
expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal(addressInfo.county);
|
||||
expect(wrapper.find('.van-switch-cell').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('save AddressInfo', () => {
|
||||
const addressInfo = {
|
||||
user_name: '',
|
||||
tel: '123123213',
|
||||
province: '浙江省',
|
||||
city: '杭州市',
|
||||
county: '西湖区',
|
||||
address_detail: '详细地址',
|
||||
postal_code: '10000',
|
||||
is_default: true
|
||||
};
|
||||
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
showSearchResult: true,
|
||||
searchResult: []
|
||||
}
|
||||
});
|
||||
|
||||
const saveButton = wrapper.find('.van-button')[0];
|
||||
|
||||
// name empty
|
||||
wrapper.vm.addressInfo.user_name = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['user_name']).to.be.true;
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['user_name']).to.be.false;
|
||||
|
||||
// name too long
|
||||
wrapper.vm.addressInfo.user_name = '111111111111111111111111111';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['user_name']).to.be.true;
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['user_name']).to.be.false;
|
||||
|
||||
// tel empty
|
||||
wrapper.vm.addressInfo.user_name = '123';
|
||||
wrapper.vm.addressInfo.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 = '';
|
||||
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';
|
||||
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 = '';
|
||||
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;
|
||||
|
||||
// address_detail too long
|
||||
let longAddress = '1';
|
||||
for (let i = 0; i < 300; i++) {
|
||||
longAddress += '1';
|
||||
}
|
||||
wrapper.vm.addressInfo.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';
|
||||
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';
|
||||
saveButton.trigger('click');
|
||||
|
||||
// not show postal_code
|
||||
wrapper.vm.addressInfo.postal_code = '156';
|
||||
wrapper.vm.showPostal = false;
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
|
||||
});
|
||||
|
||||
it('show search result', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {},
|
||||
showSearchResult: true,
|
||||
searchResult: [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心H座'
|
||||
}, {
|
||||
address: '杭州市西湖区'
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__control')[2].trigger('focus');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const items = wrapper.find('.van-address-edit-detail__suggest-item');
|
||||
expect(items.length).to.equal(3);
|
||||
|
||||
items[0].trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心');
|
||||
|
||||
items[1].trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('黄龙万科中心H座');
|
||||
items[2].trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区');
|
||||
|
||||
wrapper.find('.van-field__control')[2].trigger('blur');
|
||||
setTimeout(() => {
|
||||
done();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('select area', () => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: {}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.onAreaConfirm([]);
|
||||
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);
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
it('delete address', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
areaList,
|
||||
isDeleting: true,
|
||||
addressInfo: {
|
||||
id: '123'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.find('.van-button')[1];
|
||||
deleteButton.trigger('click');
|
||||
wrapper.vm.onDeleteAddress();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(document.querySelectorAll('.van-dialog').length).to.equal(0);
|
||||
wrapper.vm.isDeleting = false;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
deleteButton.trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
|
||||
|
||||
wrapper.vm.$on('delete', () => {
|
||||
done();
|
||||
});
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
}, 300);
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('on change detail', done => {
|
||||
wrapper = mount(AddressEdit);
|
||||
|
||||
wrapper.vm.$on('change-detail', (val) => {
|
||||
expect(val).to.equal('123');
|
||||
done();
|
||||
});
|
||||
|
||||
const field = wrapper.find('.van-field__control')[2];
|
||||
field.element.value = '123';
|
||||
field.trigger('input');
|
||||
});
|
||||
|
||||
it('clear address detail in ios', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {
|
||||
address_detail: '123'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.isAndriod = false;
|
||||
wrapper.find('.van-field__control')[2].trigger('focus');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.addressInfo.address_detail).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('finish edit address detail in andriod', done => {
|
||||
wrapper = mount(AddressDetail, {
|
||||
propsData: {
|
||||
value: '123'
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
wrapper.setData({
|
||||
isAndroid: true
|
||||
});
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.value).to.equal('123');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('watch address info', done => {
|
||||
const addressInfo = {
|
||||
user_name: '123'
|
||||
};
|
||||
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.setProps({ addressInfo });
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentInfo.user_name).to.equal('123');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -14,10 +14,9 @@ describe('Dialog', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
expect(document.querySelector('.van-dialog')).to.exist;
|
||||
expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(document.querySelector('.van-dialog')).to.exist;
|
||||
expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
@ -136,12 +136,15 @@ describe('Field', () => {
|
||||
|
||||
it('blur event', (done) => {
|
||||
const blur = sinon.spy();
|
||||
const focus = sinon.spy();
|
||||
const clickIcon = sinon.spy();
|
||||
|
||||
wrapper = mount(FieldWithIcon, {});
|
||||
wrapper.vm.$on('blur', blur);
|
||||
wrapper.vm.$on('focus', focus);
|
||||
|
||||
wrapper.find('.van-field__icon')[0].trigger('click');
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
wrapper.find('.van-field__control')[0].trigger('blur');
|
||||
|
||||
expect(blur.calledOnce).to.be.true;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user