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

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
-          vModel={data.name}
-          clearable
-          maxlength="30"
-          label={t('name')}
-          placeholder={t('nameEmpty')}
-          error={errorInfo.name}
-          onFocus={onFocus('name')}
-        />
-        <Field
-          vModel={data.tel}
-          clearable
-          type="tel"
-          label={t('tel')}
-          placeholder={t('telEmpty')}
-          error={errorInfo.tel}
-          onFocus={onFocus('tel')}
-        />
+        <div class={bem('fields')}>
+          <Field
+            vModel={data.name}
+            clearable
+            maxlength="30"
+            label={t('name')}
+            placeholder={t('nameEmpty')}
+            error={errorInfo.name}
+            onFocus={onFocus('name')}
+          />
+          <Field
+            vModel={data.tel}
+            clearable
+            type="tel"
+            label={t('tel')}
+            placeholder={t('telEmpty')}
+            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;
   }
 }