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

add Address edit component

Browse Source
This commit is contained in:
陈嘉涵
2017-09-22 15:07:03 +08:00
parent 72b013a440
commit d2ce5bf606
7 changed files with 497 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/address-edit/Detail.vue
+104
View 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>
packages/address-edit/index.vue
+229
View 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>
packages/index.js
+3
View File
@@ -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.7';
const components = [
Actionsheet,
AddressEdit,
AddressList,
Area,
Badge,
@@ -123,6 +125,7 @@ export {
install,
version,
Actionsheet,
AddressEdit,
AddressList,
Area,
Badge,
packages/vant-css/src/address-edit.css
+60
View 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;
}
}
}
packages/vant-css/src/index.css
+1
View File
@@ -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';