[Improvement] AddressList: upgrade style, add slot (#1628)

packages/address-edit/zh-CN.md

@@ -111,6 +111,7 @@ export default {
 | is_default | 是否为默认地址 | `Boolean` |
 
 #### searchResult 数据格式
+
 | key | 说明 | 类型 |
 |-----------|-----------|-----------|
 | name | 地名 | `String` |

packages/address-list/demo/index.vue

@@ -35,8 +35,8 @@ export default {
           address: '浙江省杭州市滨江区江南大道 15 号'
         }
       ],
-      add: '新增收货地址',
+      add: '新增地址',
-      edit: '编辑收货地址'
+      edit: '编辑地址'
     },
     'en-US': {
       list: [

packages/address-list/en-US.md

@@ -77,3 +77,10 @@ export default {
 | name | Name | `String` |
 | tel | Phone | `String` |
 | address | Address | `String` |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | Custom content after list |
+| top | Custom content before list |

packages/address-list/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div :class="b()">
+    <slot name="top" />
     <radio-group :value="value" :class="b('group')" @input="$emit('input', $event)">
       <cell-group>
         <cell v-for="(item, index) in list" :key="item.id" is-link>
@@ -16,12 +17,13 @@
         </cell>
       </cell-group>
     </radio-group>
-    <cell
+    <slot />
-      icon="add"
+    <van-button
-      is-link
+      square
+      size="large"
+      type="danger"
       :class="b('add')"
-      class="van-hairline--top"
+      :text="addButtonText || $t('add')"
-      :title="addButtonText || $t('add')"
       @click="$emit('add')"
     />
   </div>
@@ -31,13 +33,15 @@
 import create from '../utils/create';
 import Radio from '../radio';
 import RadioGroup from '../radio-group';
+import VanButton from '../button';
 
 export default create({
   name: 'address-list',
 
   components: {
     Radio,
-    RadioGroup
+    RadioGroup,
+    VanButton
   },
 
   props: {

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

@@ -38,18 +38,8 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-hairline--top van-cell van-cell--clickable van-hairline van-address-list__add">
+      <button class="van-button van-button--danger van-button--large van-button--square van-address-list__add">
-        <i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;size:undefined;">
+        <!----><span class="van-button__text">新增地址</span></button>
-          <!---->
-        </i>
-        <div class="van-cell__title"><span>新增收货地址</span>
-          <!---->
-        </div>
-        <!---->
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
-          <!---->
-        </i>
-      </div>
     </div>
   </div>
 </div>

packages/address-list/zh-CN.md

@@ -44,10 +44,10 @@ export default {
 
   methods: {
     onAdd() {
-      Toast('新增收货地址');
+      Toast('新增地址');
     },
     onEdit(item, index) {
-      Toast('编辑收货地址:' + index);
+      Toast('编辑地址:' + index);
     }
   }
 }
@@ -60,7 +60,7 @@ export default {
 |-----------|-----------|-----------|-------------|
 | v-model | 当前选中地址的 id | String | - |
 | list | 地址列表 | Array | `[]` |
-| add-button-text | 底部按钮文字 | String | `新增收货地址` |
+| add-button-text | 底部按钮文字 | String | `新增地址` |
 
 ### Event
 
@@ -71,6 +71,7 @@ export default {
 | select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
 
 ### 数据格式
+
 #### 地址列表字段说明
 | key | 说明 | 类型 |
 |-----------|-----------|-----------|
@@ -78,3 +79,10 @@ export default {
 | name | 收货人姓名 | `String` |
 | tel | 收货人手机号 | `String` |
 | address | 收货地址 | `String` |
+
+### Slot
+
+| 名称 | 说明 |
+|-----------|-----------|
+| - | 在列表下方插入内容 |
+| top | 在顶部插入内容 |

packages/locale/lang/zh-CN.js

@@ -61,7 +61,7 @@ export default {
   },
   vanAddressList: {
     address: '收货地址',
-    add: '新增收货地址'
+    add: '新增地址'
   },
   vanSku: {
     unavailable: '商品已经无法购买啦',

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

@@ -3,6 +3,10 @@
 .van-address-list {
   height: 100%;
 
+  .van-cell {
+    padding: 15px;
+  }
+
   .van-cell__value {
     color: $text-color;
     padding-right: 34px;
@@ -10,18 +14,19 @@
   }
 
   .van-radio__label {
-    margin-left: 32px;
+    margin-left: 27px;
   }
 
   .van-radio__input {
     top: 50%;
     left: 0;
+    font-size: 16px;
     position: absolute;
     transform: translate(0, -50%);
   }
 
   .van-icon-checked {
-    color: $blue;
+    color: $red;
   }
 
   &__group {
@@ -35,12 +40,14 @@
 
   &__name {
     font-size: 14px;
-    line-height: 1.5;
+    font-weight: bold;
+    line-height: 20px;
+    margin-bottom: 5px;
   }
 
   &__address {
     font-size: 12px;
-    line-height: 1.5;
+    line-height: 16px;
     color: $gray-darker;
   }
 
@@ -48,8 +55,7 @@
     position: absolute;
     top: 50%;
     right: 15px;
-    font-size: 20px;
+    font-size: 16px;
-    color: $gray-dark;
     transform: translate(0, -50%);
   }
 
@@ -58,13 +64,5 @@
     left: 0;
     bottom: 0;
     z-index: 9999;
-    padding-left: 15px;
-    font-size: 16px;
-
-    .van-icon-add {
-      color: $blue;
-      font-size: 20px;
-      line-height: 1.2;
-    }
   }
 }