feat(AddressEdit): refactor style (#5117)

src/address-edit/Detail.js

@@ -17,6 +17,12 @@ export default createComponent({
     showSearchResult: Boolean
   },
 
+  computed: {
+    shouldShowSearchResult() {
+      return this.focused && this.searchResult && this.showSearchResult;
+    }
+  },
+
   methods: {
     onSelect(express) {
       this.$emit('select-search', express);
@@ -42,19 +48,30 @@ export default createComponent({
     },
 
     genSearchResult() {
-      const { searchResult } = this;
+      const { value, shouldShowSearchResult, searchResult } = this;
-      const show = this.focused && searchResult && this.showSearchResult;
+      if (shouldShowSearchResult) {
-      if (show) {
         return searchResult.map(express => (
           <Cell
             key={express.name + express.address}
-            title={express.name}
+            class={bem('search-item')}
             label={express.address}
+            border={false}
             icon="location-o"
             clickable
             onClick={() => {
               this.onSelect(express);
             }}
+            scopedSlots={{
+              title: () =>
+                express.name && (
+                  <div
+                    domPropsInnerHTML={express.name.replace(
+                      value,
+                      `<span class=${bem('keyword')}>${value}</span>`
+                    )}
+                  />
+                )
+            }}
           />
         ));
       }
@@ -72,6 +89,7 @@ export default createComponent({
           type="textarea"
           value={this.value}
           error={this.error}
+          border={!this.shouldShowSearchResult}
           label={t('label')}
           maxlength={this.detailMaxlength}
           placeholder={t('placeholder')}

src/address-edit/index.js

@@ -251,6 +251,7 @@ export default createComponent({
 
     return (
       <div class={bem()}>
+        <div class={bem('fields')}>
           <Field
             vModel={data.name}
             clearable
@@ -273,6 +274,7 @@ export default createComponent({
             readonly
             label={t('area')}
             placeholder={t('areaPlaceholder')}
+            rightIcon="arrow"
             value={this.areaText}
             onClick={() => {
               this.showAreaPopup = true;
@@ -307,8 +309,10 @@ export default createComponent({
             />
           )}
           {this.slots()}
+        </div>
         {this.showSetDefault && (
           <SwitchCell
+            class={bem('default')}
             vModel={data.isDefault}
             vShow={!hideBottomFields}
             title={t('defaultAddress')}
@@ -320,6 +324,7 @@ export default createComponent({
         <div vShow={!hideBottomFields} class={bem('buttons')}>
           <Button
             block
+            round
             loading={this.isSaving}
             type="danger"
             text={this.saveButtonText || t('save')}
@@ -328,6 +333,7 @@ export default createComponent({
           {this.showDelete && (
             <Button
               block
+              round
               loading={this.isDeleting}
               text={this.deleteButtonText || t('delete')}
               onClick={this.onDelete}

src/address-edit/index.less

@@ -1,6 +1,19 @@
 @import '../style/var';
 
 .van-address-edit {
+  padding: @address-edit-padding;
+
+  &__fields {
+    overflow: hidden;
+    border-radius: @padding-xs;
+  }
+
+  &__default {
+    margin-top: @padding-sm;
+    overflow: hidden;
+    border-radius: @padding-xs;
+  }
+
   &__buttons {
     padding: @address-edit-buttons-padding;
 
@@ -12,6 +25,14 @@
   &-detail {
     padding: 0;
 
+    &__search-item {
+      background-color: #f2f3f5;
+    }
+
+    &__keyword {
+      color: @red;
+    }
+
     &__finish {
       color: @address-edit-detail-finish-color;
       font-size: @address-edit-detail-finish-font-size;

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

@@ -4,6 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-address-edit">
+      <div class="van-address-edit__fields">
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>姓名</span></div>
           <div class="van-cell__value">
@@ -19,7 +20,10 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-field">
           <div class="van-cell__title van-field__label"><span>地区</span></div>
           <div class="van-cell__value">
-          <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+            <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+              <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+                  <!----></i></div>
+            </div>
           </div>
         </div>
         <div class="van-cell van-address-edit-detail">
@@ -38,7 +42,8 @@ exports[`renders demo correctly 1`] = `
             <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
           </div>
         </div>
-      <div class="van-cell van-cell--center van-switch-cell">
+      </div>
+      <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
         <div class="van-cell__title"><span>设为默认收货地址</span></div>
         <div class="van-cell__value">
           <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@@ -46,7 +51,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div>
+      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
     </div>
   </div>
 </div>

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

@@ -2,6 +2,7 @@
 
 exports[`create a AddressEdit 1`] = `
 <div class="van-address-edit">
+  <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
       <div class="van-cell__value">
@@ -17,7 +18,10 @@ exports[`create a AddressEdit 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
       </div>
     </div>
     <div class="van-cell van-address-edit-detail">
@@ -30,12 +34,14 @@ exports[`create a AddressEdit 1`] = `
         </div>
       </div>
     </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  </div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
 
 exports[`create a AddressEdit with props 1`] = `
 <div class="van-address-edit">
+  <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
       <div class="van-cell__value">
@@ -51,7 +57,10 @@ exports[`create a AddressEdit with props 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
       </div>
     </div>
     <div class="van-cell van-address-edit-detail">
@@ -70,7 +79,8 @@ exports[`create a AddressEdit with props 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
     <div class="van-cell__title"><span>设为默认收货地址</span></div>
     <div class="van-cell__value">
       <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@@ -78,12 +88,13 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
 
 exports[`set-default 1`] = `
 <div class="van-address-edit">
+  <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
       <div class="van-cell__value">
@@ -99,7 +110,10 @@ exports[`set-default 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
       </div>
     </div>
     <div class="van-cell van-address-edit-detail">
@@ -118,7 +132,8 @@ exports[`set-default 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
     <div class="van-cell__title"><span>设为默认收货地址</span></div>
     <div class="van-cell__value">
       <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@@ -126,12 +141,13 @@ exports[`set-default 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
 
 exports[`show area component 1`] = `
 <div class="van-address-edit">
+  <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
       <div class="van-cell__value">
@@ -147,7 +163,10 @@ exports[`show area component 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
       </div>
     </div>
     <div class="van-cell van-address-edit-detail">
@@ -166,7 +185,8 @@ exports[`show area component 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
     <div class="van-cell__title"><span>设为默认收货地址</span></div>
     <div class="van-cell__value">
       <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@@ -174,12 +194,13 @@ exports[`show area component 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
 
 exports[`show area component 2`] = `
 <div class="van-address-edit">
+  <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
       <div class="van-cell__value">
@@ -195,7 +216,10 @@ exports[`show area component 2`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
       </div>
     </div>
     <div class="van-cell van-address-edit-detail">
@@ -214,7 +238,8 @@ exports[`show area component 2`] = `
         <div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
       </div>
     </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
     <div class="van-cell__title"><span>设为默认收货地址</span></div>
     <div class="van-cell__value">
       <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@@ -222,12 +247,13 @@ exports[`show area component 2`] = `
       </div>
     </div>
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;
 
 exports[`valid area placeholder confirm 1`] = `
 <div class="van-address-edit">
+  <div class="van-address-edit__fields">
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>姓名</span></div>
       <div class="van-cell__value">
@@ -243,7 +269,10 @@ exports[`valid area placeholder confirm 1`] = `
     <div class="van-cell van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
-      <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div>
+        <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
+          <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
       </div>
     </div>
     <div class="van-cell van-address-edit-detail">
@@ -256,6 +285,7 @@ exports[`valid area placeholder confirm 1`] = `
         </div>
       </div>
     </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
+  </div>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
 </div>
 `;

src/style/var.less

@@ -75,7 +75,8 @@
 @action-sheet-cancel-padding-color: @background-color;
 
 // AddressEdit
-@address-edit-buttons-padding: @padding-xl @padding-md;
+@address-edit-padding: @padding-sm;
+@address-edit-buttons-padding: @padding-xl @padding-base;
 @address-edit-button-margin-bottom: @padding-sm;
 @address-edit-detail-finish-color: @blue;
 @address-edit-detail-finish-font-size: @font-size-sm;