[new feature] AddressList: support disabled list (#1729)

packages/address-list/Item.vue

@@ -0,0 +1,32 @@
+<template>
+  <cell :class="b({ disabled })" :is-link="!disabled" @click="$emit('select')">
+    <radio :name="data.id">
+      <div :class="b('name')">{{ data.name }}，{{ data.tel }}</div>
+      <div :class="b('address')">{{ data.address }}</div>
+    </radio>
+    <icon
+      slot="right-icon"
+      name="edit"
+      :class="b('edit')"
+      @click.stop="$emit('edit')"
+    />
+  </cell>
+</template>
+
+<script>
+import Radio from '../radio';
+import create from '../utils/create';
+
+export default create({
+  name: 'address-item',
+
+  components: {
+    Radio
+  },
+
+  props: {
+    data: Object,
+    disabled: Boolean
+  }
+});
+</script>

packages/address-list/demo/index.vue

@@ -4,6 +4,8 @@
       <van-address-list
         v-model="chosenAddressId"
         :list="$t('list')"
+        :disabled-list="$t('disabledList')"
+        :disabled-text="$t('disabledText')"
         @add="onAdd"
         @edit="onEdit"
       />
@@ -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);
     }

packages/address-list/en-US.md

@@ -15,6 +15,8 @@ Vue.use(AddressList);
 <van-address-list
   v-model="chosenAddressId"
   :list="list"
+  :disabled-list="disabledList"
+  disabled-text="The following address is out of range"
   @add="onAdd"
   @edit="onEdit"
 />
@@ -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
 

packages/address-list/index.vue

@@ -1,22 +1,28 @@
 <template>
   <div :class="b()">
     <slot name="top" />
-    <radio-group :value="value" :class="b('group')" @input="$emit('input', $event)">
+    <radio-group :value="value" @input="$emit('input', $event)">
       <cell-group>
-        <cell v-for="(item, index) in list" :key="item.id" is-link>
+        <address-item
-          <radio :name="item.id" @click="$emit('select', item, index)">
+          v-for="(item, index) in list"
-            <div :class="b('name')">{{ item.name }}，{{ item.tel }}</div>
+          :data="item"
-            <div :class="b('address')">{{ $t('address') }}：{{ item.address }}</div>
+          :key="item.id"
-          </radio>
+          @select="$emit('select', item, index)"
-          <icon
+          @edit="$emit('edit', item, index)"
-            slot="right-icon"
-            name="edit"
-            :class="b('edit')"
-            @click="$emit('edit', item, index)"
         />
-        </cell>
       </cell-group>
     </radio-group>
+    <div v-if="disabledText" :class="b('disabled-text')">{{ disabledText }}</div>
+    <cell-group v-if="disabledList.length">
+      <address-item
+        v-for="(item, index) in disabledList"
+        disabled
+        :data="item"
+        :key="item.id"
+        @select="$emit('select-disabled', item, index)"
+        @edit="$emit('edit-disabled', item, index)"
+      />
+    </cell-group>
     <slot />
     <van-button
       square
@@ -31,25 +37,30 @@
 
 <script>
 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: () => []
     }
   }
 });

packages/address-list/test/__snapshots__/demo.spec.js.snap

@@ -4,40 +4,43 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-address-list">
-      <div class="van-radio-group van-address-list__group">
+      <div class="van-radio-group">
         <div class="van-cell-group van-hairline--top-bottom">
-          <div class="van-cell van-cell--clickable van-hairline">
+          <div class="van-cell van-cell--clickable van-hairline van-address-item">
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">张三，13000000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
             </div>
-            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;font-size:undefined;">
+            <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
               <!---->
             </i>
           </div>
-          <div class="van-cell van-cell--clickable van-hairline">
+          <div class="van-cell van-cell--clickable van-hairline van-address-item">
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">李四，1310000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
             </div>
-            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;font-size:undefined;">
+            <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
               <!---->
             </i>
           </div>
-          <div class="van-cell van-cell--clickable van-hairline">
+        </div>
+      </div>
+      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
+      <div class="van-cell-group van-hairline--top-bottom">
+        <div class="van-cell van-hairline van-address-item van-address-item--disabled">
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">王五，1320000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市滨江区江南大道 15 号</div></span></div>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
           </div>
-            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;font-size:undefined;">
+          <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
         </div>
       </div>
-      </div>
       <button class="van-button van-button--danger van-button--large van-button--square van-address-list__add">
         <!----><span class="van-button__text">新增地址</span></button>
     </div>

packages/address-list/zh-CN.md

@@ -15,6 +15,8 @@ Vue.use(AddressList);
 <van-address-list
   v-model="chosenAddressId"
   :list="list"
+  :disabled-list="disabledList"
+  disabled-text="以下地址超出配送范围"
   @add="onAdd"
   @edit="onEdit"
 />
@@ -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 | - |
+| v-model | 当前选中地址的 id | `String` | - |
-| list | 地址列表 | Array | `[]` |
+| list | 地址列表 | `Array` | `[]` |
-| add-button-text | 底部按钮文字 | String | `新增地址` |
+| disabled-list | 不可配送地址列表 | `Array` | `[]` |
+| disabled-text | 不可配送提示文案 | `String` | - |
+| add-button-text | 底部按钮文字 | `String` | `新增地址` |
 
 ### Event
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
 | add | 点击新增按钮时触发 | - |
-| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| edit | 点击编辑按钮时触发 | item: 地址对象，index: 索引 |
-| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+| select | 切换选中的地址时触发 | item: 地址对象，index: 索引 |
+| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 |
+| select-disabled | 选中不可配送的地址时触发 | item: 地址对象，index: 索引 |
 
 ### 数据格式
 

packages/locale/lang/en-US.js

@@ -63,7 +63,6 @@ export default {
     placeholder: 'Address'
   },
   vanAddressList: {
-    address: 'Address',
     add: 'Add new address'
   },
   vanSku: {

packages/locale/lang/zh-CN.js

@@ -63,7 +63,6 @@ export default {
     placeholder: '街道门牌、楼层房间号等信息'
   },
   vanAddressList: {
-    address: '收货地址',
     add: '新增地址'
   },
   vanSku: {

packages/locale/lang/zh-HK.js

@@ -63,7 +63,6 @@ export default {
     placeholder: '街道門牌、樓層房間號等信息'
   },
   vanAddressList: {
-    address: '收貨地址',
     add: '新增地址'
   },
   vanSku: {

packages/vant-css/src/address-list.css

@@ -5,10 +5,24 @@
   padding-bottom: 100px;
   box-sizing: border-box;
 
-  .van-cell {
+  &__add {
-    padding: 15px;
+    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;
-  }
 }