diff --git a/packages/address-list/Item.vue b/packages/address-list/Item.vue new file mode 100644 index 000000000..7d5ae0886 --- /dev/null +++ b/packages/address-list/Item.vue @@ -0,0 +1,32 @@ + + + + {{ data.name }},{{ data.tel }} + {{ data.address }} + + + + + + diff --git a/packages/address-list/demo/index.vue b/packages/address-list/demo/index.vue index 9ac4a419d..375c2558e 100644 --- a/packages/address-list/demo/index.vue +++ b/packages/address-list/demo/index.vue @@ -4,6 +4,8 @@ @@ -27,7 +29,9 @@ export default { name: '李四', tel: '1310000000', address: '浙江省杭州市拱墅区莫干山路 50 号' - }, + } + ], + disabledList: [ { id: '3', name: '王五', @@ -36,7 +40,8 @@ export default { } ], add: '新增地址', - edit: '编辑地址' + edit: '编辑地址', + disabledText: '以下地址超出配送范围' }, 'en-US': { list: [ @@ -51,7 +56,9 @@ export default { name: 'Ned Stark', tel: '1310000000', address: 'Somewhere' - }, + } + ], + disabledList: [ { id: '3', name: 'Tywin', @@ -60,7 +67,8 @@ export default { } ], add: 'Add', - edit: 'Edit' + edit: 'Edit', + disabledText: 'The following address is out of range' } }, @@ -74,6 +82,7 @@ export default { onAdd() { this.$toast(this.$t('add')); }, + onEdit(item, index) { this.$toast(this.$t('edit') + ':' + index); } diff --git a/packages/address-list/en-US.md b/packages/address-list/en-US.md index e400a7d83..9fb7d6de0 100644 --- a/packages/address-list/en-US.md +++ b/packages/address-list/en-US.md @@ -15,6 +15,8 @@ Vue.use(AddressList); @@ -38,6 +40,14 @@ export default { tel: '1310000000', address: 'Somewhere' } + ], + disabledList: [ + { + id: '3', + name: 'Tywin', + tel: '1320000000', + address: 'Somewhere' + } ] } }, @@ -59,6 +69,8 @@ export default { |-----------|-----------|-----------|-------------| | v-model | Id of chosen address | String | - | | list | Address list | Array | `[]` | +| disabled-list | Disabled address list | `Array` | `[]` | +| disabled-text | Disabled text | `String` | - | | add-button-text | Add button text | String | `Add new address` | ### Event @@ -66,8 +78,10 @@ export default { | Event | Description | Arguments | |-----------|-----------|-----------| | add | Triggered when click add button | - | -| edit | Triggered when click edit button | item: address object,index | +| edit | Triggered when edit address | item: address object,index | | select | Triggered when select address | item: address object,index | +| edit-disabled | Triggered when edit disabled address | item: address object,index | +| select-disabled | Triggered when select disabled address | item: address object,index | ### Address Data Structure diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue index ec7f8d3fa..023c8994a 100644 --- a/packages/address-list/index.vue +++ b/packages/address-list/index.vue @@ -1,22 +1,28 @@ - + - - - {{ item.name }},{{ item.tel }} - {{ $t('address') }}:{{ item.address }} - - - + + {{ disabledText }} + + + import create from '../utils/create'; -import Radio from '../radio'; import RadioGroup from '../radio-group'; import VanButton from '../button'; +import AddressItem from './Item'; export default create({ name: 'address-list', components: { - Radio, RadioGroup, - VanButton + VanButton, + AddressItem }, props: { + disabledText: String, addButtonText: String, value: [String, Number], list: { type: Array, default: () => [] + }, + disabledList: { + type: Array, + default: () => [] } } }); diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap index 3f69b88e0..aece16b0b 100644 --- a/packages/address-list/test/__snapshots__/demo.spec.js.snap +++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap @@ -4,38 +4,41 @@ exports[`renders demo correctly 1`] = ` - + - + - 张三,13000000000 收货地址:浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室 + 张三,13000000000 浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室 - + - + - 李四,1310000000 收货地址:浙江省杭州市拱墅区莫干山路 50 号 + 李四,1310000000 浙江省杭州市拱墅区莫干山路 50 号 - + - - - - - 王五,1320000000 收货地址:浙江省杭州市滨江区江南大道 15 号 - - - - + + + 以下地址超出配送范围 + + + + + + 王五,1320000000 浙江省杭州市滨江区江南大道 15 号 + + + diff --git a/packages/address-list/zh-CN.md b/packages/address-list/zh-CN.md index 0cc47f761..8bce10143 100644 --- a/packages/address-list/zh-CN.md +++ b/packages/address-list/zh-CN.md @@ -15,6 +15,8 @@ Vue.use(AddressList); @@ -38,6 +40,14 @@ export default { tel: '1310000000', address: '浙江省杭州市拱墅区莫干山路 50 号' } + ], + disabledList: [ + { + id: '3', + name: '王五', + tel: '1320000000', + address: '浙江省杭州市滨江区江南大道 15 号' + } ] } }, @@ -46,6 +56,7 @@ export default { onAdd() { Toast('新增地址'); }, + onEdit(item, index) { Toast('编辑地址:' + index); } @@ -58,17 +69,21 @@ export default { | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| -| v-model | 当前选中地址的 id | String | - | -| list | 地址列表 | Array | `[]` | -| add-button-text | 底部按钮文字 | String | `新增地址` | +| v-model | 当前选中地址的 id | `String` | - | +| list | 地址列表 | `Array` | `[]` | +| disabled-list | 不可配送地址列表 | `Array` | `[]` | +| disabled-text | 不可配送提示文案 | `String` | - | +| add-button-text | 底部按钮文字 | `String` | `新增地址` | ### Event | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | add | 点击新增按钮时触发 | - | -| edit | 点击编辑按钮时触发 | item: 当前地址对象,index: 索引 | -| select | 切换选中的地址时触发 | item: 当前地址对象,index: 索引 | +| edit | 点击编辑按钮时触发 | item: 地址对象,index: 索引 | +| select | 切换选中的地址时触发 | item: 地址对象,index: 索引 | +| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象,index: 索引 | +| select-disabled | 选中不可配送的地址时触发 | item: 地址对象,index: 索引 | ### 数据格式 diff --git a/packages/locale/lang/en-US.js b/packages/locale/lang/en-US.js index e942452b6..f989b399d 100644 --- a/packages/locale/lang/en-US.js +++ b/packages/locale/lang/en-US.js @@ -63,7 +63,6 @@ export default { placeholder: 'Address' }, vanAddressList: { - address: 'Address', add: 'Add new address' }, vanSku: { diff --git a/packages/locale/lang/zh-CN.js b/packages/locale/lang/zh-CN.js index 5c288039e..a8d13db98 100644 --- a/packages/locale/lang/zh-CN.js +++ b/packages/locale/lang/zh-CN.js @@ -63,7 +63,6 @@ export default { placeholder: '街道门牌、楼层房间号等信息' }, vanAddressList: { - address: '收货地址', add: '新增地址' }, vanSku: { diff --git a/packages/locale/lang/zh-HK.js b/packages/locale/lang/zh-HK.js index 342426634..20282f60d 100644 --- a/packages/locale/lang/zh-HK.js +++ b/packages/locale/lang/zh-HK.js @@ -63,7 +63,6 @@ export default { placeholder: '街道門牌、樓層房間號等信息' }, vanAddressList: { - address: '收貨地址', add: '新增地址' }, vanSku: { diff --git a/packages/vant-css/src/address-list.css b/packages/vant-css/src/address-list.css index 7c338cc49..ad524d162 100644 --- a/packages/vant-css/src/address-list.css +++ b/packages/vant-css/src/address-list.css @@ -5,10 +5,24 @@ padding-bottom: 100px; box-sizing: border-box; - .van-cell { - padding: 15px; + &__add { + position: fixed; + left: 0; + bottom: 0; + z-index: 9999; } + &__disabled-text { + color: $gray-dark; + padding: 0 15px; + font-size: 12px; + line-height: 30px; + } +} + +.van-address-item { + padding: 15px; + .van-cell__value { color: $text-color; padding-right: 34px; @@ -16,6 +30,7 @@ } .van-radio__label { + width: 100%; margin-left: 27px; } @@ -31,14 +46,6 @@ color: $red; } - &__group { - height: 100%; - overflow-y: scroll; - padding-bottom: 100px; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - } - &__name { font-size: 14px; font-weight: 500; @@ -52,6 +59,21 @@ color: $gray-darker; } + &--disabled { + .van-address-item__name, + .van-address-item__address { + color: $gray-dark; + } + + .van-radio__input { + display: none; + } + + .van-radio__label { + margin-left: 0; + } + } + &__edit { position: absolute; top: 50%; @@ -59,11 +81,4 @@ font-size: 16px; transform: translate(0, -50%); } - - &__add { - position: fixed; - left: 0; - bottom: 0; - z-index: 9999; - } }