mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 23:49:14 +08:00
Merge branch 'feature/address-edit-component' into dev
This commit is contained in:
陈嘉涵
commit
4fd23129f9
96
docs/examples-docs/address-edit.md
Normal file
96
docs/examples-docs/address-edit.md
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<script>
|
||||||
|
import { Toast } from 'packages';
|
||||||
|
import areaList from '../mock/area.json';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
areaList,
|
||||||
|
searchResult: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSave() {
|
||||||
|
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 {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
### API
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
|
| v-model | 当前选中地址的 id | String | - | - |
|
||||||
|
| list | 地址列表 | Array | `[]` | - |
|
||||||
|
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
|
||||||
|
|
||||||
|
### Event
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 参数 |
|
||||||
|
|-----------|-----------|-----------|
|
||||||
|
| add | 点击新增按钮时触发 | - |
|
||||||
|
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
|
||||||
|
| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
|
||||||
|
|
||||||
|
### 数据格式
|
||||||
|
#### 地址列表字段说明
|
||||||
|
| key | 说明 | 类型 |
|
||||||
|
|-----------|-----------|-----------|
|
||||||
|
| id | 每条地址的唯一标识 | `String | Number` |
|
||||||
|
| name | 收货人姓名 | `String` |
|
||||||
|
| tel | 收货人手机号 | `String` |
|
||||||
|
| address | 收货地址 | `String` |
|
||||||
@ -214,6 +214,10 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
"groupName": "业务组件",
|
"groupName": "业务组件",
|
||||||
"list": [
|
"list": [
|
||||||
|
{
|
||||||
|
"path": "/address-edit",
|
||||||
|
"title": "AddressEdit 地址编辑"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "/address-list",
|
"path": "/address-list",
|
||||||
"title": "AddressList 地址列表"
|
"title": "AddressList 地址列表"
|
||||||
|
|||||||
104
packages/address-edit/Detail.vue
Normal file
104
packages/address-edit/Detail.vue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<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 v-if="value && isFocused" slot="icon">
|
||||||
|
<span v-if="isAndroid" class="van-address-edit-detail__finish-edit van-font--12">完成</span>
|
||||||
|
<van-icon v-else 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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit('input', '');
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuggestSelect(express) {
|
||||||
|
this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
229
packages/address-edit/index.vue
Normal file
229
packages/address-edit/index.vue
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
<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: () => ({})
|
||||||
|
},
|
||||||
|
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(val) {
|
||||||
|
this.currentInfo = val;
|
||||||
|
this.isEdit = !!val.id;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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.$emit('save', this.currentInfo, this.isEdit);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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>
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import Actionsheet from './actionsheet';
|
import Actionsheet from './actionsheet';
|
||||||
|
import AddressEdit from './address-edit';
|
||||||
import AddressList from './address-list';
|
import AddressList from './address-list';
|
||||||
import Area from './area';
|
import Area from './area';
|
||||||
import Badge from './badge';
|
import Badge from './badge';
|
||||||
@ -56,6 +57,7 @@ import Waterfall from './waterfall';
|
|||||||
const version = '0.9.7';
|
const version = '0.9.7';
|
||||||
const components = [
|
const components = [
|
||||||
Actionsheet,
|
Actionsheet,
|
||||||
|
AddressEdit,
|
||||||
AddressList,
|
AddressList,
|
||||||
Area,
|
Area,
|
||||||
Badge,
|
Badge,
|
||||||
@ -123,6 +125,7 @@ export {
|
|||||||
install,
|
install,
|
||||||
version,
|
version,
|
||||||
Actionsheet,
|
Actionsheet,
|
||||||
|
AddressEdit,
|
||||||
AddressList,
|
AddressList,
|
||||||
Area,
|
Area,
|
||||||
Badge,
|
Badge,
|
||||||
|
|||||||
60
packages/vant-css/src/address-edit.css
Normal file
60
packages/vant-css/src/address-edit.css
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-detail {
|
||||||
|
&__finish-edit {
|
||||||
|
color: $blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__suggest-list {
|
||||||
|
margin-left: -15px;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-top-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__location {
|
||||||
|
float: left;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-info {
|
||||||
|
margin-left: 26px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -50,6 +50,7 @@
|
|||||||
@import './tree-select.css';
|
@import './tree-select.css';
|
||||||
|
|
||||||
/* business components */
|
/* business components */
|
||||||
|
@import './address-edit.css';
|
||||||
@import './address-list.css';
|
@import './address-list.css';
|
||||||
@import './coupon-list.css';
|
@import './coupon-list.css';
|
||||||
@import './goods-action.css';
|
@import './goods-action.css';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user