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 show = this.focused && searchResult && this.showSearchResult;
-      if (show) {
+      const { value, shouldShowSearchResult, searchResult } = this;
+      if (shouldShowSearchResult) {
         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,64 +251,68 @@ export default createComponent({
 
     return (
       <div class={bem()}>
-        <Field
-          vModel={data.name}
-          clearable
-          label={t('name')}
-          placeholder={t('namePlaceholder')}
-          error={errorInfo.name}
-          onFocus={onFocus('name')}
-        />
-        <Field
-          vModel={data.tel}
-          clearable
-          type="tel"
-          label={t('tel')}
-          placeholder={t('telPlaceholder')}
-          error={errorInfo.tel}
-          onFocus={onFocus('tel')}
-        />
-        <Field
-          vShow={this.showArea}
-          readonly
-          label={t('area')}
-          placeholder={t('areaPlaceholder')}
-          value={this.areaText}
-          onClick={() => {
-            this.showAreaPopup = true;
-          }}
-        />
-        <Detail
-          vShow={this.showDetail}
-          focused={this.detailFocused}
-          value={data.addressDetail}
-          error={errorInfo.addressDetail}
-          detailRows={this.detailRows}
-          detailMaxlength={this.detailMaxlength}
-          searchResult={this.searchResult}
-          showSearchResult={this.showSearchResult}
-          onFocus={onFocus('addressDetail')}
-          onBlur={this.onDetailBlur}
-          onInput={this.onChangeDetail}
-          onSelect-search={event => {
-            this.$emit('select-search', event);
-          }}
-        />
-        {this.showPostal && (
+        <div class={bem('fields')}>
           <Field
-            vShow={!hideBottomFields}
-            vModel={data.postalCode}
-            type="tel"
-            maxlength="6"
-            label={t('postal')}
-            placeholder={t('postal')}
-            error={errorInfo.postalCode}
-            onFocus={onFocus('postalCode')}
+            vModel={data.name}
+            clearable
+            label={t('name')}
+            placeholder={t('namePlaceholder')}
+            error={errorInfo.name}
+            onFocus={onFocus('name')}
           />
-        )}
-        {this.slots()}
+          <Field
+            vModel={data.tel}
+            clearable
+            type="tel"
+            label={t('tel')}
+            placeholder={t('telPlaceholder')}
+            error={errorInfo.tel}
+            onFocus={onFocus('tel')}
+          />
+          <Field
+            vShow={this.showArea}
+            readonly
+            label={t('area')}
+            placeholder={t('areaPlaceholder')}
+            rightIcon="arrow"
+            value={this.areaText}
+            onClick={() => {
+              this.showAreaPopup = true;
+            }}
+          />
+          <Detail
+            vShow={this.showDetail}
+            focused={this.detailFocused}
+            value={data.addressDetail}
+            error={errorInfo.addressDetail}
+            detailRows={this.detailRows}
+            detailMaxlength={this.detailMaxlength}
+            searchResult={this.searchResult}
+            showSearchResult={this.showSearchResult}
+            onFocus={onFocus('addressDetail')}
+            onBlur={this.onDetailBlur}
+            onInput={this.onChangeDetail}
+            onSelect-search={event => {
+              this.$emit('select-search', event);
+            }}
+          />
+          {this.showPostal && (
+            <Field
+              vShow={!hideBottomFields}
+              vModel={data.postalCode}
+              type="tel"
+              maxlength="6"
+              label={t('postal')}
+              placeholder={t('postal')}
+              error={errorInfo.postalCode}
+              onFocus={onFocus('postalCode')}
+            />
+          )}
+          {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,41 +4,46 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-address-edit">
-      <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="收货人姓名" class="van-field__control"></div>
+      <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">
+            <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+          </div>
         </div>
-      </div>
-      <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+        <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+          </div>
         </div>
-      </div>
-      <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>
-      </div>
-      <div class="van-cell van-address-edit-detail">
-        <div class="van-cell__value van-cell__value--alone">
-          <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+        <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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+                  <!----></i></div>
             </div>
           </div>
         </div>
-      </div>
-      <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+        <div class="van-cell van-address-edit-detail">
+          <div class="van-cell__value van-cell__value--alone">
+            <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+          </div>
         </div>
       </div>
-      <div class="van-cell van-cell--center van-switch-cell">
+      <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,75 +2,85 @@
 
 exports[`create a AddressEdit 1`] = `
 <div class="van-address-edit">
-  <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="收货人姓名" class="van-field__control"></div>
+  <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">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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-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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+          </div>
         </div>
       </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[`create a AddressEdit with props 1`] = `
 <div class="van-address-edit">
-  <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="收货人姓名" class="van-field__control"></div>
+  <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">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+    <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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
         </div>
       </div>
     </div>
-  </div>
-  <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
     </div>
   </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <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,47 +88,52 @@ 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-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="收货人姓名" class="van-field__control"></div>
+  <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">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+    <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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
         </div>
       </div>
     </div>
-  </div>
-  <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
     </div>
   </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <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,47 +141,52 @@ 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-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="收货人姓名" class="van-field__control"></div>
+  <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">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+    <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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
         </div>
       </div>
     </div>
-  </div>
-  <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
     </div>
   </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <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,47 +194,52 @@ 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-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="收货人姓名" class="van-field__control"></div>
+  <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">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+    <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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
         </div>
       </div>
     </div>
-  </div>
-  <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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="tel" placeholder="邮政编码" class="van-field__control"></div>
+      </div>
     </div>
   </div>
-  <div class="van-cell van-cell--center van-switch-cell">
+  <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,40 +247,45 @@ 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-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="收货人姓名" class="van-field__control"></div>
+  <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">
+        <div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+    <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="tel" placeholder="收货人手机号" class="van-field__control"></div>
+      </div>
     </div>
-  </div>
-  <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-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 class="van-field__right-icon"><i class="van-icon van-icon-arrow">
+              <!----></i></div>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="van-cell van-address-edit-detail">
-    <div class="van-cell__value van-cell__value--alone">
-      <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+    <div class="van-cell van-address-edit-detail">
+      <div class="van-cell__value van-cell__value--alone">
+        <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"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
+          </div>
         </div>
       </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>
 `;

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;