feat(AddressList): refactor style & add new prop default-tag-text (#5106)

src/address-list/Item.tsx

@@ -3,6 +3,7 @@ import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
+import Tag from '../tag';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -13,12 +14,14 @@ export type AddressItemData = {
   tel: string | number;
   name: string;
   address: string;
+  isDefault: boolean;
 };
 
 export type AddressItemProps = {
   data: AddressItemData;
   disabled?: boolean;
   switchable?: boolean;
+  defaultTagText?: string;
 };
 
 export type AddressItemEvents = {
@@ -60,7 +63,14 @@ function AddressItem(
   const genContent = () => {
     const { data } = props;
     const Info = [
-      <div class={bem('name')}>{`${data.name}，${data.tel}`}</div>,
+      <div class={bem('name')}>
+        {`${data.name} ${data.tel}`}
+        {data.isDefault && props.defaultTagText && (
+          <Tag type="danger" round class={bem('tag')}>
+            {props.defaultTagText}
+          </Tag>
+        )}
+      </div>,
       <div class={bem('address')}>{data.address}</div>
     ];
 
@@ -77,6 +87,7 @@ function AddressItem(
     <Cell
       class={bem({ disabled })}
       valueClass={bem('value')}
+      border={false}
       clickable={switchable && !disabled}
       scopedSlots={{
         default: genContent,
@@ -91,7 +102,8 @@ function AddressItem(
 AddressItem.props = {
   data: Object,
   disabled: Boolean,
-  switchable: Boolean
+  switchable: Boolean,
+  defaultTagText: String
 };
 
 export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem);

src/address-list/README.md

@@ -77,6 +77,7 @@ export default {
 | disabled-text | Disabled text | *string* | - | - |
 | switchable | Whether to allow switch address | *boolean* | `true` | - |
 | add-button-text | Add button text | *string* | `Add new address` | - |
+| default-tag-text | Default tag text | *string* | - | - |
 
 ### Events
 
@@ -97,6 +98,7 @@ export default {
 | name | Name | *string* |
 | tel | Phone | *string \| number* |
 | address | Address | *string* |
+| isDefault | Is default address | *boolean* |
 
 ### Slots
 

src/address-list/README.zh-CN.md

@@ -78,6 +78,7 @@ export default {
 | disabled-text | 不可配送提示文案 | *string* | - | - |
 | switchable | 是否允许切换地址 | *boolean* | `true` | - |
 | add-button-text | 底部按钮文字 | *string* | `新增地址` | - |
+| default-tag-text | 默认地址标签文字 | *string* | - | - |
 
 ### Events
 
@@ -98,6 +99,7 @@ export default {
 | name | 收货人姓名 | *string* |
 | tel | 收货人手机号 | *string \| number* |
 | address | 收货地址 | *string* |
+| isDefault | 是否为默认地址 | *boolean* |
 
 ### Slots
 

src/address-list/demo/index.vue

@@ -3,6 +3,7 @@
     <demo-block :title="$t('basicUsage')">
       <van-address-list
         v-model="chosenAddressId"
+        :default-tag-text="$t('defaultTagText')"
         :list="$t('list')"
         :disabled-list="$t('disabledList')"
         :disabled-text="$t('disabledText')"
@@ -22,7 +23,8 @@ export default {
           id: '1',
           name: '张三',
           tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
+          isDefault: true
         },
         {
           id: '2',
@@ -41,7 +43,8 @@ export default {
       ],
       add: '新增地址',
       edit: '编辑地址',
-      disabledText: '以下地址超出配送范围'
+      disabledText: '以下地址超出配送范围',
+      defaultTagText: '默认'
     },
     'en-US': {
       list: [
@@ -49,7 +52,8 @@ export default {
           id: '1',
           name: 'John Snow',
           tel: '13000000000',
-          address: 'Somewhere'
+          address: 'Somewhere',
+          isDefault: true
         },
         {
           id: '2',
@@ -68,7 +72,8 @@ export default {
       ],
       add: 'Add',
       edit: 'Edit',
-      disabledText: 'The following address is out of range'
+      disabledText: 'The following address is out of range',
+      defaultTagText: 'Default'
     }
   },
 

src/address-list/index.less

@@ -3,17 +3,26 @@
 .van-address-list {
   box-sizing: border-box;
   height: 100%;
-  padding-bottom: 100px;
+  padding: @address-list-padding;
 
-  &__add {
+  &__bottom {
     position: fixed;
     bottom: 0;
     left: 0;
     z-index: @address-list-add-button-z-index;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 5px @padding-md;
+    background-color: @white;
+  }
+
+  &__add {
+    height: 40px;
+    line-height: 38px;
   }
 
   &__disabled-text {
-    padding: 0 @padding-md;
+    padding: @address-list-disabled-text-padding;
     color: @address-list-disabled-text-color;
     font-size: @address-list-disabled-text-font-size;
     line-height: @address-list-disabled-text-line-height;
@@ -22,16 +31,30 @@
 
 .van-address-item {
   padding: @address-list-item-padding;
+  border-radius: @border-radius-md;
+
+  &:not(:last-child) {
+    margin-bottom: @padding-sm;
+  }
 
   &__value {
-    padding-right: @padding-xl;
+    padding-right: 44px;
   }
 
   &__name {
-    margin-bottom: @padding-base;
-    font-weight: @font-weight-bold;
-    font-size: @font-size-md;
-    line-height: 20px;
+    display: flex;
+    align-items: center;
+    margin-bottom: @padding-xs;
+    font-size: @font-size-lg;
+    line-height: 22px;
+  }
+
+  &__tag {
+    flex: none;
+    margin-left: @padding-xs;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 1.4em;
   }
 
   &__address {
@@ -51,12 +74,21 @@
     position: absolute;
     top: 50%;
     right: @padding-md;
+    color: @gray-dark;
     font-size: @address-list-edit-icon-size;
     transform: translate(0, -50%);
   }
 
+  .van-radio__label {
+    margin-left: @padding-sm;
+  }
+
   .van-radio__icon--checked .van-icon {
     background-color: @address-list-item-radio-icon-color;
     border-color: @address-list-item-radio-icon-color;
   }
+
+  .van-radio__icon:not(.van-radio__icon--checked) {
+    visibility: hidden;
+  }
 }

src/address-list/index.tsx

@@ -15,6 +15,7 @@ export type AddressListProps = {
   addButtonText?: string;
   list?: AddressItemData[];
   disabledList?: AddressItemData[];
+  defaultTagText?: string;
 };
 
 export type AddressListSlots = DefaultSlots & {
@@ -40,6 +41,7 @@ function AddressList(
         key={item.id}
         disabled={disabled}
         switchable={props.switchable}
+        defaultTagText={props.defaultTagText}
         onSelect={() => {
           emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
 
@@ -67,16 +69,18 @@ function AddressList(
       {props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>}
       {DisabledList}
       {slots.default && slots.default()}
-      <Button
-        square
-        size="large"
-        type="danger"
-        class={bem('add')}
-        text={props.addButtonText || t('add')}
-        onClick={() => {
-          emit(ctx, 'add');
-        }}
-      />
+      <div class={bem('bottom')}>
+        <Button
+          round
+          block
+          type="danger"
+          class={bem('add')}
+          text={props.addButtonText || t('add')}
+          onClick={() => {
+            emit(ctx, 'add');
+          }}
+        />
+      </div>
     </div>
   );
 }
@@ -90,7 +94,8 @@ AddressList.props = {
   switchable: {
     type: Boolean,
     default: true
-  }
+  },
+  defaultTagText: String
 };
 
 export default createComponent<AddressListProps>(AddressList);

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

@@ -5,34 +5,37 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-address-list">
       <div role="radiogroup" class="van-radio-group">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
           <div class="van-cell__value van-cell__value--alone van-address-item__value">
             <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
               <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
+                  <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
             </div>
-          </div><i class="van-icon van-icon-edit van-address-item__edit">
-            <!----></i>
-        </div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
-          <div class="van-cell__value van-cell__value--alone van-address-item__value">
-            <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-              <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                  <!----></i></div><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-item__edit">
-            <!----></i>
-        </div>
-      </div>
-      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
-      <div class="van-cell van-address-item van-address-item--disabled">
-        <div class="van-cell__value van-cell__value--alone van-address-item__value">
-          <div class="van-address-item__name">王五，1320000000</div>
-          <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
+            <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
+          </div>
         </div><i class="van-icon van-icon-edit van-address-item__edit">
           <!----></i>
-      </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>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
+        <div class="van-cell__value van-cell__value--alone van-address-item__value">
+          <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+            <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
+                <!----></i></div><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-item__edit">
+          <!----></i>
+      </div>
     </div>
+    <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
+    <div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
+      <div class="van-cell__value van-cell__value--alone van-address-item__value">
+        <div class="van-address-item__name">王五 1320000000</div>
+        <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
+      </div><i class="van-icon van-icon-edit van-address-item__edit">
+        <!----></i>
+    </div>
+    <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
   </div>
 </div>
+</div>
 `;

src/address-list/test/__snapshots__/index.spec.js.snap

@@ -3,20 +3,21 @@
 exports[`unswitchable 1`] = `
 <div class="van-address-list">
   <div role="radiogroup" class="van-radio-group">
-    <div class="van-cell van-address-item">
+    <div class="van-cell van-cell--borderless van-address-item">
       <div class="van-cell__value van-cell__value--alone van-address-item__value">
-        <div class="van-address-item__name">张三，13000000000</div>
+        <div class="van-address-item__name">张三 13000000000</div>
         <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
       </div><i class="van-icon van-icon-edit van-address-item__edit">
         <!----></i>
     </div>
-    <div class="van-cell van-address-item">
+    <div class="van-cell van-cell--borderless van-address-item">
       <div class="van-cell__value van-cell__value--alone van-address-item__value">
-        <div class="van-address-item__name">李四，1310000000</div>
+        <div class="van-address-item__name">李四 1310000000</div>
         <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
       </div><i class="van-icon van-icon-edit van-address-item__edit">
         <!----></i>
     </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>
+  <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
 </div>
 `;

src/style/var.less

@@ -77,17 +77,19 @@
 @address-edit-detail-finish-font-size: @font-size-sm;
 
 // AddressList
+@address-list-padding: 12px 7px 100px 17px;
 @address-list-disabled-text-color: @gray-dark;
-@address-list-disabled-text-font-size: @font-size-sm;
-@address-list-disabled-text-line-height: 30px;
+@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
+@address-list-disabled-text-font-size: @font-size-md;
+@address-list-disabled-text-line-height: 20px;
 @address-list-add-button-z-index: 999;
-@address-list-item-padding: @padding-md;
-@address-list-item-text-color: @gray-darker;
-@address-list-item-disabled-text-color: @gray-dark;
-@address-list-item-font-size: @font-size-sm;
-@address-list-item-line-height: 16px;
+@address-list-item-padding: @padding-sm;
+@address-list-item-text-color: @text-color;
+@address-list-item-disabled-text-color: @gray;
+@address-list-item-font-size: 13px;
+@address-list-item-line-height: 18px;
 @address-list-item-radio-icon-color: @red;
-@address-list-edit-icon-size: 16px;
+@address-list-edit-icon-size: 18px;
 
 // Button
 @button-mini-height: 22px;