[Improvement] ContactEdit: optimize style (#1677)

packages/contact-card/demo/index.vue

@@ -128,6 +128,7 @@ export default {
 .demo-contact-card {
   .van-popup {
     height: 100%;
+    background-color: #f2f2f2;
   }
 }
 </style>

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

@@ -47,14 +47,14 @@ exports[`renders demo correctly 1`] = `
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-edit">
         <div class="van-cell-group van-hairline--top-bottom">
-          <div maxlength="30" placeholder="张三" class="van-cell van-hairline van-field">
+          <div maxlength="30" placeholder="请填写姓名" class="van-cell van-hairline van-field">
             <!---->
-            <div class="van-cell__title"><span>联系人</span>
+            <div class="van-cell__title"><span>张三</span>
               <!---->
             </div>
             <div class="van-cell__value">
               <div class="van-field__body">
-                <input type="text" maxlength="30" placeholder="张三" class="van-field__control">
+                <input type="text" maxlength="30" placeholder="请填写姓名" class="van-field__control">
                 <!---->
                 <!---->
                 <!---->
@@ -63,14 +63,14 @@ exports[`renders demo correctly 1`] = `
             </div>
             <!---->
           </div>
-          <div placeholder="手机或固定电话" class="van-cell van-hairline van-field">
+          <div placeholder="请填写电话" class="van-cell van-hairline van-field">
             <!---->
             <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">
+                <input type="tel" placeholder="请填写电话" class="van-field__control">
                 <!---->
                 <!---->
                 <!---->
@@ -81,7 +81,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
         <div class="van-contact-edit__buttons">
-          <button class="van-button van-button--primary van-button--normal van-button--block">
+          <button class="van-button van-button--danger van-button--normal van-button--block">
             <!----><span class="van-button__text">保存</span></button>
           <!---->
         </div>

packages/contact-edit/index.vue

@@ -4,8 +4,8 @@
       <field
         v-model="data.name"
         maxlength="30"
-        :label="$t('contact')"
+        :label="$t('name')"
-        :placeholder="$t('name')"
+        :placeholder="$t('nameEmpty')"
         :error="errorInfo.name"
         @focus="onFocus('name')"
       />
@@ -13,13 +13,13 @@
         v-model="data.tel"
         type="tel"
         :label="$t('tel')"
-        :placeholder="$t('telPlaceholder')"
+        :placeholder="$t('telEmpty')"
         :error="errorInfo.tel"
         @focus="onFocus('tel')"
       />
     </cell-group>
     <div :class="b('buttons')">
-      <van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button>
+      <van-button block :loading="isSaving" @click="onSave" type="danger">{{ $t('save') }}</van-button>
       <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
     </div>
   </div>

packages/locale/lang/en-US.js

@@ -8,10 +8,10 @@ export default {
   complete: 'Complete',
   contact: 'Name',
   loadingTip: 'Loading...',
-  nameEmpty: 'Name can not be empty',
+  telEmpty: 'Please fill in the tel',
+  nameEmpty: 'Please fill in the name',
   confirmDelete: 'Are you sure you want to delete?',
   telInvalid: 'Malformed phone number',
-  telPlaceholder: 'Phone',
   vanContactCard: {
     addText: 'Add contact info'
   },

packages/locale/lang/zh-CN.js

@@ -8,10 +8,10 @@ export default {
   complete: '完成',
   contact: '联系人',
   loadingTip: '加载中...',
+  telEmpty: '请填写电话',
   nameEmpty: '请填写姓名',
   confirmDelete: '确定要删除么',
   telInvalid: '请填写正确的电话',
-  telPlaceholder: '手机或固定电话',
   vanContactCard: {
     addText: '添加订单联系人信息'
   },

packages/locale/lang/zh-HK.js

@@ -8,10 +8,10 @@ export default {
   complete: '完成',
   contact: '聯系人',
   loadingTip: '加載中...',
+  telEmpty: '請填寫電話',
   nameEmpty: '請填寫姓名',
   confirmDelete: '確定要刪除麽',
   telInvalid: '請填寫正確的電話',
-  telPlaceholder: '手機或固定電話',
   vanContactCard: {
     addText: '添加訂單聯系人信息'
   },

packages/popup/test/index.spec.js

@@ -76,47 +76,46 @@ test('get container with parent', () => {
   expect(popup.parentNode).toEqual(wrapper.element);
 });
 
-test('get container without parent', () => {
-  const div = document.createElement('div');
-  wrapper = mount(Popup, {
-    propsData: {
-      getContainer: () => div
-    }
-  });
-  const popup = wrapper.element;
-  expect(popup.parentNode).toEqual(div);
-  wrapper.vm.getContainer = null;
-  expect(popup.parentNode).toEqual(div);
-});
-
 test('render overlay', () => {
   const div = document.createElement('div');
-  wrapper = mount(Popup, {
+  wrapper = mount({
-    propsData: {
+    template: `
-      value: true,
+      <div>
-      overlay: false,
+        <popup :value="true" :get-container="getContainer" />
-      getContainer: () => div
+      </div>
+    `,
+    components: {
+      Popup
+    },
+    data() {
+      return {
+        getContainer: () => div
+      };
     }
   });
 
-  expect(div.querySelector('.van-modal')).toBeFalsy();
-  wrapper.vm.overlay = true;
   expect(div.querySelector('.van-modal')).toBeTruthy();
 });
 
 test('close on click modal', () => {
   const div = document.createElement('div');
-  wrapper = mount(Popup, {
+  wrapper = mount({
-    propsData: {
+    template: `
-      value: true,
+      <div>
-      getContainer: () => div
+        <popup v-model="value" :get-container="getContainer" />
+      </div>
+    `,
+    components: {
+      Popup
+    },
+    data() {
+      return {
+        value: true,
+        getContainer: () => div
+      };
     }
   });
 
-  wrapper.vm.$on('input', val => {
-    wrapper.vm.value = val;
-  });
-
   const modal = div.querySelector('.van-modal');
   triggerDrag(modal, 0, -30);
   modal.click();

packages/vant-css/src/address-edit.css

@@ -2,10 +2,10 @@
 
 .van-address-edit {
   &__buttons {
-    padding: 20px 10px;
+    padding: 30px 15px;
 
     .van-button {
-      margin-bottom: 10px;
+      margin-bottom: 15px;
     }
   }
 

packages/vant-css/src/contact-edit.css

@@ -2,20 +2,14 @@
 
 .van-contact-edit {
   &__buttons {
-    padding: 20px 10px;
+    padding: 30px 15px;
   }
 
-  &__default {
+  .van-cell__title {
-    .van-cell__title {
+    max-width: 65px;
-      line-height: 31px;
-    }
-
-    .van-cell__value {
-      height: 31px;
-    }
   }
 
   .van-button {
-    margin-bottom: 10px;
+    margin-bottom: 15px;
   }
 }