add Contact components
This commit is contained in:
陈嘉涵
@@ -3,7 +3,7 @@
|
||||
<van-radio-group :value="value" @input="$emit('input', $event)" class="van-address-list__group">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item.id">
|
||||
<van-radio :name="item.id" @click="$emit('change', item, index)">
|
||||
<van-radio :name="item.id" @click="$emit('select', item, index)">
|
||||
<div class="van-address-list__name">{{ item.name }}，{{ item.tel }}</div>
|
||||
<div class="van-address-list__address">收货地址：{{ item.address }}</div>
|
||||
</van-radio>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<template v-else-if="type === 'edit'">
|
||||
<van-icon class="van-contact-card__icon" name="contact" />
|
||||
<div class="van-contact-card__text">
|
||||
<p>联系人：{{ username }}</p>
|
||||
<p>联系人：{{ name }}</p>
|
||||
<p>联系电话：{{ tel }}</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
username: {
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
tel: {
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="van-contact-edit">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
label="联系人"
|
||||
maxlength="30"
|
||||
placeholder="名字"
|
||||
v-model="currentInfo.name"
|
||||
:error="errorInfo.name"
|
||||
@focus="onFocus('name')">
|
||||
</van-field>
|
||||
<van-field
|
||||
type="tel"
|
||||
label="联系电话"
|
||||
placeholder="手机或固定电话"
|
||||
v-model="currentInfo.tel"
|
||||
:error="errorInfo.tel"
|
||||
@focus="onFocus('tel')">
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div class="van-contact-edit__buttons">
|
||||
<van-button block :loading="isSaving" @click="onSaveContact" type="primary">保存</van-button>
|
||||
<van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">删除联系人</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Field from '../field';
|
||||
import Button from '../button';
|
||||
import CellGroup from '../cell-group';
|
||||
import Dialog from '../dialog';
|
||||
import Toast from '../toast';
|
||||
import validateMobile from 'zan-utils/validate/mobile';
|
||||
|
||||
export default {
|
||||
name: 'van-contact-edit',
|
||||
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[Button.name]: Button,
|
||||
[CellGroup.name]: CellGroup
|
||||
},
|
||||
|
||||
props: {
|
||||
isEdit: Boolean,
|
||||
isSaving: Boolean,
|
||||
isDeleting: Boolean,
|
||||
contactInfo: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
id: '',
|
||||
tel: '',
|
||||
name: ''
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentInfo: this.contactInfo,
|
||||
errorInfo: {
|
||||
name: false,
|
||||
tel: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
contactInfo(val) {
|
||||
this.currentInfo = val;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFocus(key) {
|
||||
this.errorInfo[key] = false;
|
||||
},
|
||||
|
||||
getErrorMessageByKey(key) {
|
||||
const value = this.currentInfo[key];
|
||||
switch (key) {
|
||||
case 'name':
|
||||
return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
|
||||
case 'tel':
|
||||
return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
|
||||
}
|
||||
},
|
||||
|
||||
onSaveContact() {
|
||||
const items = [
|
||||
'name',
|
||||
'tel'
|
||||
];
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
onDeleteContact() {
|
||||
if (this.isDeleting) {
|
||||
return;
|
||||
}
|
||||
|
||||
Dialog.confirm({
|
||||
message: `确定要删除这个联系人么`
|
||||
}).then(() => {
|
||||
this.$emit('delete', this.currentInfo);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="van-contact-list">
|
||||
<van-radio-group :value="value" @input="$emit('input', $event)">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item.id">
|
||||
<van-radio :name="item.id" @click="$emit('select', item, index)">
|
||||
<p class="van-contact-list__text">联系人：{{ item.name }}</p>
|
||||
<p class="van-contact-list__text">联系电话：{{ item.tel }}</p>
|
||||
</van-radio>
|
||||
<van-icon name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<van-cell icon="add" class="van-contact-list__add van-hairline--top" @click="$emit('add')" :title="addText" isLink />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import Cell from '../cell';
|
||||
import Radio from '../radio';
|
||||
import CellGroup from '../cell-group';
|
||||
import RadioGroup from '../radio-group';
|
||||
|
||||
export default {
|
||||
name: 'van-contact-list',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon,
|
||||
[Cell.name]: Cell,
|
||||
[Radio.name]: Radio,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[RadioGroup.name]: RadioGroup
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
addText: {
|
||||
type: String,
|
||||
default: '新建联系人'
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -13,6 +13,8 @@ import Checkbox from './checkbox';
|
||||
import CheckboxGroup from './checkbox-group';
|
||||
import Col from './col';
|
||||
import ContactCard from './contact-card';
|
||||
import ContactEdit from './contact-edit';
|
||||
import ContactList from './contact-list';
|
||||
import CouponCell from './coupon-cell';
|
||||
import CouponList from './coupon-list';
|
||||
import DatetimePicker from './datetime-picker';
|
||||
@@ -72,6 +74,8 @@ const components = [
|
||||
CheckboxGroup,
|
||||
Col,
|
||||
ContactCard,
|
||||
ContactEdit,
|
||||
ContactList,
|
||||
CouponCell,
|
||||
CouponList,
|
||||
DatetimePicker,
|
||||
@@ -141,6 +145,8 @@ export {
|
||||
CheckboxGroup,
|
||||
Col,
|
||||
ContactCard,
|
||||
ContactEdit,
|
||||
ContactList,
|
||||
CouponCell,
|
||||
CouponList,
|
||||
DatetimePicker,
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-contact-card {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
|
||||
&--add {
|
||||
line-height: 40px;
|
||||
|
||||
.van-contact-card__icon {
|
||||
color: $blue;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&--edit {
|
||||
.van-contact-card__icon {
|
||||
font-size: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
&__icon,
|
||||
&__text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
color: $gray-dark;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-image: url('data:image/false;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAECAYAAAA3S5neAAAAAXNSR0IArs4c6QAAAIpJREFUOBHF0iESg1AMBNDshx4H0+EUSCxnQKBAVDIMjhnOgO8NOADTI7V/CcjU58ckq/aJQHTYto2u7bpdB3hjXWvb+Ry/jTC6e6CeQBIK6i3KJWfZbHsuDxiTeCCcc+m6SlGFhTnkHcty2J5y+lVM4NHv2D+vxxEkxsGiXHIIf99x95JJPIDcnhMVeyVty5S/SAAAAABJRU5ErkJggg==');
|
||||
background-size: 34px 2px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-contact-edit {
|
||||
&__buttons {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
&__default {
|
||||
.van-cell__title {
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
height: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-contact-list {
|
||||
height: 100%;
|
||||
|
||||
.van-cell__value {
|
||||
color: $text-color;
|
||||
padding-right: 34px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.van-radio__input {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.van-icon-checked {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4px;
|
||||
font-size: 24px;
|
||||
color: $gray-dark;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
&__add {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
padding-left: 15px;
|
||||
|
||||
.van-cell__text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.van-icon-add {
|
||||
color: $blue;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -52,8 +52,10 @@
|
||||
/* business components */
|
||||
@import './address-edit.css';
|
||||
@import './address-list.css';
|
||||
@import './contact-card.css';
|
||||
@import './contact-list.css';
|
||||
@import './contact-edit.css';
|
||||
@import './coupon-list.css';
|
||||
@import './goods-action.css';
|
||||
@import './submit-bar.css';
|
||||
@import './sku.css';
|
||||
@import './contact-card.css';
|
||||
|
||||
Reference in New Issue
Block a user