feat(ContactCard): refactor style & add new prop show-set-default (#5083)

src/contact-card/README.md

@@ -173,6 +173,8 @@ export default {
 | is-saving | Whether to show save button loading status | *boolean* | `false` | - |
 | is-deleting | Whether to show delete button loading status | *boolean* | `false` | - |
 | tel-validator | The method to validate tel | *(tel: string) => boolean* | - | - |
+| show-set-default | Whether to show default contact switch | *boolean* | `false` | - |
+| set-default-label | default contact switch label | *string* | - | - |
 
 ### ContactEdit Events
 

src/contact-card/README.zh-CN.md

@@ -177,6 +177,8 @@ export default {
 | is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - |
 | is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - |
 | tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - |
+| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - |
+| set-default-label | 默认联系人栏文案 | *string* | - | - |
 
 ### ContactEdit Events
 

src/contact-card/demo/index.vue

@@ -28,6 +28,8 @@
         :lazy-render="false"
       >
         <van-contact-edit
+          show-set-default
+          :set-default-label="$t('defaultLabel')"
           :contact-info="editingContact"
           :is-edit="isEdit"
           @save="onSave"
@@ -51,10 +53,12 @@
 export default {
   i18n: {
     'zh-CN': {
-      name: '张三'
+      name: '张三',
+      defaultLabel: '设为默认联系人'
     },
     'en-US': {
-      name: 'John Snow'
+      name: 'John Snow',
+      defaultLabel: 'Set as the default contact'
     }
   },
 

src/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -25,19 +25,29 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
       <div class="van-contact-edit">
-        <div class="van-cell van-field">
+        <div class="van-contact-edit__fields">
-          <div class="van-cell__title van-field__label"><span>张三</span></div>
+          <div class="van-cell van-field">
-          <div class="van-cell__value">
+            <div class="van-cell__title van-field__label"><span>张三</span></div>
-            <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
+            <div class="van-cell__value">
+              <div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></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-field">
+        <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
-          <div class="van-cell__title van-field__label"><span>电话</span></div>
+          <div class="van-cell__title"><span>设为默认联系人</span></div>
           <div class="van-cell__value">
-            <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
+            <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
+              <div class="van-switch__node"></div>
+            </div>
           </div>
         </div>
-        <div class="van-contact-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-contact-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>
     </div>
   </div>

src/contact-edit/index.js

@@ -3,6 +3,8 @@ import Button from '../button';
 import Field from '../field';
 import Toast from '../toast';
 import Dialog from '../dialog';
+import Switch from '../switch';
+import Cell from '../cell';
 import { isMobile } from '../utils/validate/mobile';
 
 const [createComponent, bem, t] = createNamespace('contact-edit');
@@ -17,6 +19,8 @@ export default createComponent({
     isEdit: Boolean,
     isSaving: Boolean,
     isDeleting: Boolean,
+    showSetDefault: Boolean,
+    setDefaultLabel: String,
     contactInfo: {
       type: Object,
       default: () => ({ ...defaultContact })
@@ -94,34 +98,58 @@ export default createComponent({
 
     return (
       <div class={bem()}>
-        <Field
+        <div class={bem('fields')}>
-          vModel={data.name}
+          <Field
-          clearable
+            vModel={data.name}
-          maxlength="30"
+            clearable
-          label={t('name')}
+            maxlength="30"
-          placeholder={t('nameEmpty')}
+            label={t('name')}
-          error={errorInfo.name}
+            placeholder={t('nameEmpty')}
-          onFocus={onFocus('name')}
+            error={errorInfo.name}
-        />
+            onFocus={onFocus('name')}
-        <Field
+          />
-          vModel={data.tel}
+          <Field
-          clearable
+            vModel={data.tel}
-          type="tel"
+            clearable
-          label={t('tel')}
+            type="tel"
-          placeholder={t('telEmpty')}
+            label={t('tel')}
-          error={errorInfo.tel}
+            placeholder={t('telEmpty')}
-          onFocus={onFocus('tel')}
+            error={errorInfo.tel}
-        />
+            onFocus={onFocus('tel')}
+          />
+        </div>
+        {this.showSetDefault && (
+          <Cell
+            title={this.setDefaultLabel}
+            class={bem('switch-cell')}
+            border={false}
+          >
+            <Switch
+              vModel={data.isDefault}
+              size={24}
+              onChange={event => {
+                this.$emit('change-default', event);
+              }}
+            />
+          </Cell>
+        )}
         <div class={bem('buttons')}>
           <Button
             block
+            round
             type="danger"
             text={t('save')}
             loading={this.isSaving}
             onClick={this.onSave}
           />
           {this.isEdit && (
-            <Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} />
+            <Button
+              block
+              round
+              text={t('delete')}
+              loading={this.isDeleting}
+              onClick={this.onDelete}
+            />
           )}
         </div>
       </div>

src/contact-edit/index.less

@@ -1,15 +1,39 @@
 @import '../style/var';
 
 .van-contact-edit {
+  padding: @contact-edit-padding;
+
+  &__fields {
+    overflow: hidden;
+    border-radius: @contact-edit-fields-radius;
+
+    .van-cell__title {
+      max-width: @contact-edit-field-label-width;
+    }
+  }
+
+  &__switch-cell {
+    margin-top: 10px;
+    padding-top: 9px;
+    padding-bottom: 9px;
+    overflow: hidden;
+    border-radius: @contact-edit-fields-radius;
+
+    .van-cell__value {
+      flex: none;
+    }
+
+    .van-switch {
+      vertical-align: top;
+    }
+  }
+
   &__buttons {
     padding: @contact-edit-buttons-padding;
   }
 
-  .van-cell__title {
-    max-width: @contact-edit-field-label-width;
-  }
-
   .van-button {
     margin-bottom: @contact-edit-button-margin-bottom;
+    font-size: @contact-edit-button-font-size;
   }
 }

src/style/var.less

@@ -199,8 +199,11 @@
 @contact-card-value-line-height: 20px;
 
 // ContactEdit
-@contact-edit-buttons-padding: @padding-xl @padding-md;
+@contact-edit-padding: @padding-md;
+@contact-edit-fields-radius: @border-radius-md;
+@contact-edit-buttons-padding: @padding-xl 0;
 @contact-edit-button-margin-bottom: @padding-sm;
+@contact-edit-button-font-size: 16px;
 @contact-edit-field-label-width: 65px;
 
 // ContactList