mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] translate AddressList & Contact (#437)
This commit is contained in:
neverland
GitHub
parent
03bb3cc6ef
commit
5fe28b539c
@ -3,7 +3,7 @@
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
:list="$t('list')"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
@ -15,16 +15,6 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
@ -44,16 +34,48 @@ export default {
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
]
|
||||
],
|
||||
add: '新增收货地址',
|
||||
edit: '编辑收货地址'
|
||||
},
|
||||
'en-US': {
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
address: 'Somewhere'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
address: 'Somewhere'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Tywin',
|
||||
tel: '1320000000',
|
||||
address: 'Somewhere'
|
||||
}
|
||||
],
|
||||
add: 'Add',
|
||||
edit: 'Edit'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
Toast(this.$t('add'));
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
Toast(this.$t('edit') + ':' + index);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -43,10 +43,10 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
name: '张三'
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
name: 'John Snow'
|
||||
}
|
||||
},
|
||||
|
||||
@ -57,14 +57,18 @@ export default {
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
list: []
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.list.push({
|
||||
name: this.$t('name'),
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
|
||||
@ -28,15 +28,15 @@ export default {
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
address: 'Somewhere'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
address: 'Somewhere'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -44,10 +44,10 @@ export default {
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
Toast('Add');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
Toast('Edit:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,23 +57,23 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中地址的 id | String | - | - |
|
||||
| list | 地址列表 | Array | `[]` | - |
|
||||
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
|
||||
| v-model | Id of chosen address | String | - | - |
|
||||
| list | Address list | Array | `[]` | - |
|
||||
| addButtonText | Add button text | String | `Add new address` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
|
||||
| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
|
||||
| add | Triggered when click add button | - |
|
||||
| edit | Triggered when click edit button | item: address object，index |
|
||||
| select | Triggered when select address | item: address object，index |
|
||||
|
||||
### Address Data Structure
|
||||
|
||||
### Data Structure
|
||||
#### 地址列表字段说明
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| address | 收货地址 | `String` |
|
||||
| id | Id | `String | Number` |
|
||||
| name | Name | `String` |
|
||||
| tel | Phone | `String` |
|
||||
| address | Address | `String` |
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
## Contact
|
||||
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
@ -16,7 +15,7 @@ Vue.use(ContactEdit);
|
||||
|
||||
|
||||
```html
|
||||
<!-- 联系人卡片 -->
|
||||
<!-- Contact Card -->
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
@ -24,7 +23,7 @@ Vue.use(ContactEdit);
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- 联系人列表 -->
|
||||
<!-- Contact List -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
@ -35,7 +34,7 @@ Vue.use(ContactEdit);
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 联系人编辑 -->
|
||||
<!-- Contact Edit -->
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contactInfo="editingContact"
|
||||
@ -56,7 +55,7 @@ export default {
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
@ -75,26 +74,26 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 添加联系人
|
||||
// add contact
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
// 编辑联系人
|
||||
// edit contact
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
// 选中联系人
|
||||
// select contact
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
// 保存联系人
|
||||
// save contact
|
||||
onSave(info) {
|
||||
this.showEdit = false;
|
||||
this.showList = false;
|
||||
@ -107,7 +106,7 @@ export default {
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
// 删除联系人
|
||||
// delete contact
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
@ -124,7 +123,7 @@ export default {
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
name="张三"
|
||||
name="John Snow"
|
||||
tel="13000000000"
|
||||
:editable="false"
|
||||
/>
|
||||
@ -134,47 +133,44 @@ export default {
|
||||
### ContactCard API
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | Type，分为添加和编辑两种样式 | `String` | `add` | `edit` |
|
||||
| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
|
||||
| name | 联系人姓名 | `String` | - | - |
|
||||
| tel | 联系人手机号 | `String` | - | - |
|
||||
| type | Type | `String` | `add` | `edit` |
|
||||
| addText | Add card text | `String` | `Add contact info` | - |
|
||||
| name | Name | `String` | - | - |
|
||||
| tel | Phone | `String` | - | - |
|
||||
|
||||
### ContactList API
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中联系人的 id | `String | Number` | - | - |
|
||||
| addText | 新建按钮文案 | `String` | `新建联系人` | - |
|
||||
| list | 联系人列表 | `Array` | `[]` | - |
|
||||
| v-model | Id of chosen contact | `String | Number` | - | - |
|
||||
| addText | Add button text | `String` | `Add new contact` | - |
|
||||
| list | Contact list | `Array` | `[]` | - |
|
||||
|
||||
### ContactList Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
|
||||
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
|
||||
|
||||
| add | Triggered when click add button | - |
|
||||
| edit | Triggered when click edit button | item: contact object，index |
|
||||
| select | Triggered when select contact | item: contact object |
|
||||
|
||||
### ContactEdit API
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| contactInfo | 联系人信息 | `Object` | `[]` | - |
|
||||
| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
|
||||
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
|
||||
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
|
||||
| contactInfo | Contact Info | `Object` | `[]` | - |
|
||||
| isEdit | Whether is editing | `Boolean` | `false` | - |
|
||||
| isSaving | Whether to show save button loading status | `Boolean` | `false` | - |
|
||||
| isDeleting | Whether to show delete button loading status | `Boolean` | `false` | - |
|
||||
|
||||
### ContactEdit Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
| save | Triggered when click save button | content：contact info |
|
||||
| delete | Triggered when click delete button | content：contact info |
|
||||
|
||||
### Data Structure
|
||||
|
||||
#### 联系人Data Structure
|
||||
### Contact Data Structure
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每位联系人的唯一标识 | `String | Number` |
|
||||
| name | 联系人姓名 | `String` |
|
||||
| tel | 联系人手机号 | `String` |
|
||||
| id | ID | `String | Number` |
|
||||
| name | Name | `String` |
|
||||
| tel | Phone | `String` |
|
||||
|
||||
@ -520,7 +520,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
path: '/address-list',
|
||||
title: 'AddressList (In translation)'
|
||||
title: 'AddressList'
|
||||
},
|
||||
{
|
||||
path: '/area',
|
||||
@ -528,7 +528,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
path: '/contact',
|
||||
title: 'Contact (In translation)'
|
||||
title: 'Contact'
|
||||
},
|
||||
{
|
||||
path: '/coupon',
|
||||
|
||||
@ -5,13 +5,19 @@
|
||||
<cell v-for="(item, index) in list" :key="item.id">
|
||||
<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>
|
||||
<div class="van-address-list__address">{{ $t('address') }}：{{ item.address }}</div>
|
||||
</radio>
|
||||
<icon name="edit" class="van-address-list__edit" @click="$emit('edit', item, index)" />
|
||||
</cell>
|
||||
</cell-group>
|
||||
</radio-group>
|
||||
<cell icon="add" class="van-address-list__add van-hairline--top" @click="$emit('add')" :title="addButtonText" isLink />
|
||||
<cell
|
||||
icon="add"
|
||||
class="van-address-list__add van-hairline--top"
|
||||
@click="$emit('add')"
|
||||
:title="addButtonText || $t('add')"
|
||||
isLink
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -33,14 +39,11 @@ export default create({
|
||||
},
|
||||
|
||||
props: {
|
||||
addButtonText: String,
|
||||
value: [String, Number],
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
addButtonText: {
|
||||
type: String,
|
||||
default: '新增收货地址'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -3,41 +3,6 @@ export default {
|
||||
cancel: 'Cancel',
|
||||
save: 'Save',
|
||||
complete: 'Complete',
|
||||
vanAddressEdit: {
|
||||
areaTitle: 'Area',
|
||||
areaWrong: 'Please select the correct receiving area',
|
||||
areaEmpty: 'Please select a receiving area',
|
||||
nameEmpty: 'Name can not be empty',
|
||||
nameOverlimit: 'Name length exceeds limit',
|
||||
telWrong: 'Wrong format of phone number',
|
||||
addressOverlimit: 'The length of the address can not exceed 200 characters',
|
||||
addressEmpty: 'Address can not be empty',
|
||||
postalEmpty: 'Wrong postal code',
|
||||
defaultAddress: 'Set as the default address',
|
||||
deleteAddress: 'Delete the address',
|
||||
confirmDelete: 'Are you sure you want to delete this address?',
|
||||
label: {
|
||||
name: 'Receiver',
|
||||
tel: 'Phone',
|
||||
postal: 'Postal'
|
||||
},
|
||||
placeholder: {
|
||||
name: 'Receiver name',
|
||||
tel: 'Phone',
|
||||
postal: 'Postal code (optional)',
|
||||
province: 'Province',
|
||||
city: 'City',
|
||||
county: 'County'
|
||||
}
|
||||
},
|
||||
vanAddressEditDetail: {
|
||||
label: {
|
||||
address: 'Address'
|
||||
},
|
||||
placeholder: {
|
||||
address: 'Address'
|
||||
}
|
||||
},
|
||||
vanContactCard: {
|
||||
name: 'Name',
|
||||
tel: 'Phone',
|
||||
@ -89,5 +54,44 @@ export default {
|
||||
unlimited: 'Unlimited',
|
||||
discount: discount => `${discount * 10}% off`,
|
||||
condition: condition => `At least ${condition}`
|
||||
},
|
||||
vanAddressEdit: {
|
||||
areaTitle: 'Area',
|
||||
areaWrong: 'Please select the correct receiving area',
|
||||
areaEmpty: 'Please select a receiving area',
|
||||
nameEmpty: 'Name can not be empty',
|
||||
nameOverlimit: 'Name length exceeds limit',
|
||||
telWrong: 'Wrong format of phone number',
|
||||
addressOverlimit: 'The length of the address can not exceed 200 characters',
|
||||
addressEmpty: 'Address can not be empty',
|
||||
postalEmpty: 'Wrong postal code',
|
||||
defaultAddress: 'Set as the default address',
|
||||
deleteAddress: 'Delete the address',
|
||||
confirmDelete: 'Are you sure you want to delete this address?',
|
||||
label: {
|
||||
name: 'Receiver',
|
||||
tel: 'Phone',
|
||||
postal: 'Postal'
|
||||
},
|
||||
placeholder: {
|
||||
name: 'Receiver name',
|
||||
tel: 'Phone',
|
||||
postal: 'Postal code (optional)',
|
||||
province: 'Province',
|
||||
city: 'City',
|
||||
county: 'County'
|
||||
}
|
||||
},
|
||||
vanAddressEditDetail: {
|
||||
label: {
|
||||
address: 'Address'
|
||||
},
|
||||
placeholder: {
|
||||
address: 'Address'
|
||||
}
|
||||
},
|
||||
vanAddressList: {
|
||||
address: 'Address',
|
||||
add: 'Add new address'
|
||||
}
|
||||
};
|
||||
|
||||
@ -3,42 +3,6 @@ export default {
|
||||
cancel: '取消',
|
||||
save: '保存',
|
||||
complete: '完成',
|
||||
vanAddressEdit: {
|
||||
areaTitle: '收件地区',
|
||||
addressText: '收货',
|
||||
areaWrong: '请选择正确的收件地区',
|
||||
areaEmpty: '请选择收件地区',
|
||||
nameEmpty: '请填写名字',
|
||||
nameOverlimit: '名字过长，请重新输入',
|
||||
telWrong: '请填写正确的手机号码或电话号码',
|
||||
addressOverlimit: '详细地址不能超过200个字符',
|
||||
addressEmpty: '请填写详细地址',
|
||||
postalEmpty: '邮政编码格式不正确',
|
||||
defaultAddress: text => `设为默认${text}地址`,
|
||||
deleteAddress: text => `删除${text}地址`,
|
||||
confirmDelete: text => `确定要删除这个${text}地址么`,
|
||||
label: {
|
||||
name: text => `${text}人`,
|
||||
tel: '联系电话',
|
||||
postal: '邮政编码'
|
||||
},
|
||||
placeholder: {
|
||||
name: '名字',
|
||||
tel: '手机或固定电话',
|
||||
postal: '邮政编码(选填)',
|
||||
province: '选择省',
|
||||
city: '选择市',
|
||||
county: '选择区'
|
||||
}
|
||||
},
|
||||
vanAddressEditDetail: {
|
||||
label: {
|
||||
address: '详细地址'
|
||||
},
|
||||
placeholder: {
|
||||
address: '如街道、楼层、门牌号等'
|
||||
}
|
||||
},
|
||||
vanContactCard: {
|
||||
name: '联系人',
|
||||
tel: '联系电话',
|
||||
@ -93,5 +57,45 @@ export default {
|
||||
unlimited: '无使用门槛',
|
||||
discount: discount => `${discount}折`,
|
||||
condition: (condition) => `满${condition}元可用`
|
||||
},
|
||||
vanAddressEdit: {
|
||||
areaTitle: '收件地区',
|
||||
addressText: '收货',
|
||||
areaWrong: '请选择正确的收件地区',
|
||||
areaEmpty: '请选择收件地区',
|
||||
nameEmpty: '请填写名字',
|
||||
nameOverlimit: '名字过长，请重新输入',
|
||||
telWrong: '请填写正确的手机号码或电话号码',
|
||||
addressOverlimit: '详细地址不能超过200个字符',
|
||||
addressEmpty: '请填写详细地址',
|
||||
postalEmpty: '邮政编码格式不正确',
|
||||
defaultAddress: text => `设为默认${text}地址`,
|
||||
deleteAddress: text => `删除${text}地址`,
|
||||
confirmDelete: text => `确定要删除这个${text}地址么`,
|
||||
label: {
|
||||
name: text => `${text}人`,
|
||||
tel: '联系电话',
|
||||
postal: '邮政编码'
|
||||
},
|
||||
placeholder: {
|
||||
name: '名字',
|
||||
tel: '手机或固定电话',
|
||||
postal: '邮政编码(选填)',
|
||||
province: '选择省',
|
||||
city: '选择市',
|
||||
county: '选择区'
|
||||
}
|
||||
},
|
||||
vanAddressEditDetail: {
|
||||
label: {
|
||||
address: '详细地址'
|
||||
},
|
||||
placeholder: {
|
||||
address: '如街道、楼层、门牌号等'
|
||||
}
|
||||
},
|
||||
vanAddressList: {
|
||||
address: '收货地址',
|
||||
add: '新增收货地址'
|
||||
}
|
||||
};
|
||||
|
||||
@ -49,13 +49,6 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
// for debug
|
||||
// watch: {
|
||||
// messageValues() {
|
||||
// console.log(this.messageValues);
|
||||
// }
|
||||
// },
|
||||
|
||||
computed: {
|
||||
internalMessages() {
|
||||
if (Object.prototype.toString.call(this.messages) === '[object Array]') {
|
||||
@ -115,7 +108,6 @@ export default {
|
||||
if (message.required == '1') { // eslint-disable-line
|
||||
if (message.type === 'image') {
|
||||
continue;
|
||||
// return `请上传${message.name}`;
|
||||
} else {
|
||||
return `请填写${message.name}`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user