From d2ce5bf6063ba278011b5347185e740ef71c7082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 22 Sep 2017 15:07:03 +0800
Subject: [PATCH 1/4] add Address edit component

---
 docs/examples-docs/address-edit.md     |  96 +++++++++++
 docs/src/doc.config.js                 |   4 +
 packages/address-edit/Detail.vue       | 104 +++++++++++
 packages/address-edit/index.vue        | 229 +++++++++++++++++++++++++
 packages/index.js                      |   3 +
 packages/vant-css/src/address-edit.css |  60 +++++++
 packages/vant-css/src/index.css        |   1 +
 7 files changed, 497 insertions(+)
 create mode 100644 docs/examples-docs/address-edit.md
 create mode 100644 packages/address-edit/Detail.vue
 create mode 100644 packages/address-edit/index.vue
 create mode 100644 packages/vant-css/src/address-edit.css

diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md
new file mode 100644
index 000000000..a5786cd0d
--- /dev/null
+++ b/docs/examples-docs/address-edit.md
@@ -0,0 +1,96 @@
+<script>
+import { Toast } from 'packages';
+import areaList from '../mock/area.json';
+
+export default {
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          name: '黄龙万科中心H座',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+};
+</script>
+
+## AddressEdit 地址编辑
+
+### 使用指南
+``` javascript
+import { AddressEdit } from 'vant';
+
+Vue.component(AddressEdit.name, AddressEdit);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-address-edit
+  :area-list="areaList"
+  :show-postal="true"
+  :show-set-default="true"
+  :show-search-result="true"
+  :search-result="searchResult"
+  @save="onSave"
+  @delete="onDelete"
+  @change-detail="onChangeDetail"
+/>
+```
+
+```javascript
+export default {
+  
+}
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中地址的 id | String | - | - |
+| list | 地址列表 | Array | `[]` | - |
+| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+
+### 数据格式
+#### 地址列表字段说明
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| address | 收货地址 | `String` |
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 619899742..1302676f1 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -214,6 +214,10 @@ module.exports = {
           {
             "groupName": "业务组件",
             "list": [
+              {
+                "path": "/address-edit",
+                "title": "AddressEdit 地址编辑"
+              },
               {
                 "path": "/address-list",
                 "title": "AddressList 地址列表"
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
new file mode 100644
index 000000000..611409ee7
--- /dev/null
+++ b/packages/address-edit/Detail.vue
@@ -0,0 +1,104 @@
+<template>
+  <div ref="root">
+    <van-field
+      label="详细地址"
+      placeholder="如街道、楼层、门牌号等"
+      maxlength="200"
+      type="textarea"
+      autosize
+      rows="1"
+      :value="value"
+      :error="isError"
+      :onIconClick="onIconClick"
+      @input="$emit('input', $event)"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      >
+      <template v-if="value && isFocused" slot="icon">
+        <span v-if="isAndroid" class="van-address-edit-detail__finish-edit van-font--12">完成</span>
+        <van-icon v-else name="clear" />
+      </template>
+    </van-field>
+
+    <van-cell-group class="van-address-edit-detail__suggest-list" v-if="showSearchList">
+      <van-cell
+        v-for="express in searchResult"
+        :key="express.name + express.address"
+        class="van-address-edit-detail__suggest-item"
+        @click="onSuggestSelect(express)">
+        <van-icon name="location" class="van-address-edit-detail__location" />
+        <div class="van-address-edit-detail__item-info">
+          <p class="van-address-edit-detail__title">{{ express.name }}</p>
+          <p class="van-address-edit-detail__subtitle">{{ express.address }}</p>
+        </div>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+import Field from '../field';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import UA from 'zan-utils/browser/ua_browser';
+
+export default {
+  name: 'van-address-edit-detail',
+
+  components: {
+    [Field.name]: Field,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  },
+
+  props: {
+    value: {},
+    isError: Boolean,
+    searchResult: Array,
+    showSearchResult: Boolean
+  },
+
+  data() {
+    return {
+      isAndroid: UA.isAndroid(),
+      isFocused: false
+    };
+  },
+
+  computed: {
+    showSearchList() {
+      return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
+    }
+  },
+
+  methods: {
+    handleFocus(e) {
+      this.isFocused = true;
+      this.$emit('focus', e);
+      this.$refs.root.scrollIntoView();
+    },
+
+    handleBlur(e) {
+      // 等待其他地方点击事件完了以后，再触发
+      setTimeout(() => {
+        this.isFocused = false;
+        this.$emit('blur', e);
+      }, 100);
+    },
+
+    onIconClick() {
+      // 安卓直接完成，不触发清除
+      if (this.isAndroid) {
+        return;
+      }
+      this.$emit('input', '');
+    },
+
+    onSuggestSelect(express) {
+      this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
+    }
+  }
+};
+</script>
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
new file mode 100644
index 000000000..24c8c1bfd
--- /dev/null
+++ b/packages/address-edit/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="van-address-edit">
+    <van-cell-group>
+      <van-field
+        maxlength="15"
+        placeholder="名字"
+        :label="addressText + '人'"
+        v-model="currentInfo.user_name"
+        :error="errorInfo.user_name"
+        @focus="onFocus('user_name')"
+      />
+      <van-field
+        type="tel"
+        label="联系电话"
+        placeholder="手机或固定电话"
+        v-model="currentInfo.tel"
+        :error="errorInfo.tel"
+        @focus="onFocus('tel')"
+      />
+      <van-cell class="van-address-edit__area" title="收件地区" @click="showAreaSelect = true">
+        <span>{{ currentInfo.province || '选择省' }}</span>
+        <span>{{ currentInfo.city || '选择市' }}</span>
+        <span>{{ currentInfo.county || '选择区' }}</span>
+      </van-cell>
+      <van-address-edit-detail
+        :value="currentInfo.address_detail"
+        :isError="errorInfo.address_detail"
+        :showSearchResult="showSearchResult"
+        :searchResult="searchResult"
+        @focus="onFocus('address_detail')"
+        @blur="onDetailBlur"
+        @input="onChangeDetail"
+      />
+      <van-field
+        v-if="showPostal"
+        v-show="!hideBottomFields"
+        type="tel"
+        label="邮政编码"
+        placeholder="邮政编码(选填)"
+        v-model="currentInfo.postal_code"
+        maxlength="6"
+        class="van-hairline--top"
+        :error="errorInfo.postal_code"
+        @focus="onFocus('postal_code')">
+      </van-field>
+      <van-switch-cell 
+        v-if="showSetDefault"
+        v-show="!hideBottomFields"
+        v-model="currentInfo.is_default"
+        :title="`设为默认${addressText}地址`"
+      />
+    </van-cell-group>
+    <div v-show="!hideBottomFields" class="van-address-edit__buttons">
+      <van-button block :loading="isSaving" @click="onSaveAddress" type="primary">保存</van-button>
+      <van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">删除{{ addressText }}地址</van-button>
+    </div>
+    <van-popup v-model="showAreaSelect" position="bottom">
+      <van-area
+        :value="currentInfo.area_code"
+        :areaList="areaList"
+        @confirm="onAreaConfirm"
+        @cancel="showAreaSelect = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import Field from '../field';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import Button from '../button';
+import Popup from '../popup';
+import Toast from '../toast';
+import Dialog from '../dialog';
+import Area from '../area';
+import Detail from './Detail';
+import SwitchCell from '../switch-cell';
+import validateMobile from 'zan-utils/validate/mobile';
+
+export default {
+  name: 'van-address-edit',
+
+  components: {
+    [Field.name]: Field,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [SwitchCell.name]: SwitchCell,
+    [Button.name]: Button,
+    [Popup.name]: Popup,
+    [Area.name]: Area,
+    [Detail.name]: Detail
+  },
+
+  props: {
+    isSaving: Boolean,
+    isDeleting: Boolean,
+    areaList: Object,
+    showPostal: Boolean,
+    showSetDefault: Boolean,
+    showSearchResult: Boolean,
+    addressText: {
+      type: String,
+      default: '收货'
+    },
+    addressInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    searchResult: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      showAreaSelect: false,
+      currentInfo: this.addressInfo,
+      isEdit: !!this.addressInfo.id,
+      detailFocused: false,
+      errorInfo: {
+        user_name: false,
+        tel: false,
+        address_detail: false,
+        postal_code: false
+      }
+    };
+  },
+
+  watch: {
+    addressInfo(val) {
+      this.currentInfo = val;
+      this.isEdit = !!val.id;
+    }
+  },
+
+  computed: {
+    // 当地址输入框开启了搜索，并且开始搜索后，隐藏所有地址详情以外的输入框
+    hideBottomFields() {
+      return this.searchResult.length && this.detailFocused;
+    }
+  },
+
+  methods: {
+    onFocus(key) {
+      this.errorInfo[key] = false;
+      this.detailFocused = key === 'address_detail';
+    },
+
+    onDetailBlur() {
+      this.detailFocused = false;
+    },
+
+    onChangeDetail(val) {
+      this.currentInfo.address_detail = val;
+      this.$emit('change-detail', val);
+    },
+
+    onAreaConfirm(values) {
+      if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
+        return Toast('请选择正确的收件地区');
+      }
+      Object.assign(this.currentInfo, {
+        province: values[0].name,
+        city: values[1].name,
+        county: values[2].name,
+        'area_code': values[2].code
+      });
+      this.showAreaSelect = false;
+    },
+
+    onSaveAddress() {
+      const items = [
+        'user_name',
+        'tel',
+        'area_code',
+        'address_detail'
+      ];
+
+      if (this.showPostal) {
+        items.push('postal_code');
+      }
+
+      const isValid = items.every(item => {
+        const msg = this.getErrorMessageByKey(item);
+        if (msg) {
+          this.errorInfo[item] = true;
+          Toast(msg);
+        }
+        return !msg;
+      });
+
+      if (isValid) {
+        this.$emit('save', this.currentInfo, this.isEdit);
+      }
+    },
+
+    getErrorMessageByKey(key) {
+      const value = this.currentInfo[key];
+
+      switch (key) {
+        case 'user_name':
+          return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
+        case 'tel':
+          return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
+        case 'area_code':
+          return value ? +value !== -1 ? '' : '请选择正确的收件地区' : '请选择收件地区';
+        case 'address_detail':
+          return value ? value.length <= 200 ? '' : '详细地址不能超过200个字符' : '请填写详细地址';
+        case 'postal_code':
+          return value && !/^\d{6}$/.test(value) ? '邮政编码格式不正确' : '';
+      }
+    },
+
+    onDeleteAddress() {
+      if (this.isDeleting) {
+        return;
+      }
+
+      Dialog.confirm({
+        message: `确定要删除这个${this.addressText}地址么`
+      }).then(() => {
+        this.$emit('delete', this.currentInfo);
+      });
+    }
+  }
+};
+</script>
diff --git a/packages/index.js b/packages/index.js
index 8b96fd8b8..83a94d62a 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,4 +1,5 @@
 import Actionsheet from './actionsheet';
+import AddressEdit from './address-edit';
 import AddressList from './address-list';
 import Area from './area';
 import Badge from './badge';
@@ -56,6 +57,7 @@ import Waterfall from './waterfall';
 const version = '0.9.7';
 const components = [
   Actionsheet,
+  AddressEdit,
   AddressList,
   Area,
   Badge,
@@ -123,6 +125,7 @@ export {
   install,
   version,
   Actionsheet,
+  AddressEdit,
   AddressList,
   Area,
   Badge,
diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css
new file mode 100644
index 000000000..f7dce207c
--- /dev/null
+++ b/packages/vant-css/src/address-edit.css
@@ -0,0 +1,60 @@
+@import './common/var.css';
+
+.van-address-edit {
+  &__buttons {
+    padding: 20px 10px;
+  }
+
+  &__area {
+    .van-cell__title {
+      width: 90px;
+    }
+
+    .van-cell__value {
+      text-align: left;
+
+      span {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .van-button {
+    margin-bottom: 10px;
+  }
+
+  &-detail {
+    &__finish-edit {
+      color: $blue;
+    }
+
+    &__suggest-list {
+      margin-left: -15px;
+
+      &::after {
+        border-top-width: 0;
+      }
+    }
+
+    &__location {
+      float: left;
+      font-size: 18px;
+      color: #666;
+    }
+
+    &__item-info {
+      margin-left: 26px;
+      line-height: 1.6;
+    }
+
+    &__title {
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    &__subtitle {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+}
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 7a008ee7f..cee46fcaa 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -50,6 +50,7 @@
 @import './tree-select.css';
 
 /* business components */
+@import './address-edit.css';
 @import './address-list.css';
 @import './coupon-list.css';
 @import './goods-action.css';

From fa06465d87eab04a1bec8226e4c888e716f353d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Tue, 26 Sep 2017 20:37:27 +0800
Subject: [PATCH 2/4] AddressEdit: add test cases

---
 docs/examples-docs/address-edit.md     |  76 +++++-
 packages/address-edit/Detail.vue       |  16 +-
 packages/address-edit/index.vue        |  25 +-
 packages/field/index.vue               |   5 +-
 packages/vant-css/src/address-edit.css |   9 +-
 test/unit/specs/address-edit.spec.js   | 327 +++++++++++++++++++++++++
 6 files changed, 433 insertions(+), 25 deletions(-)
 create mode 100644 test/unit/specs/address-edit.spec.js

diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md
index a5786cd0d..cc332e06f 100644
--- a/docs/examples-docs/address-edit.md
+++ b/docs/examples-docs/address-edit.md
@@ -4,14 +4,23 @@ import areaList from '../mock/area.json';
 
 export default {
   data() {
+    setTimeout(() => {
+      this.test.user_name = 'b';
+    }, 1000);
     return {
       areaList,
-      searchResult: []
+      searchResult: [],
+      test: {
+        user_name: 'a'
+      }
     }
   },
 
   methods: {
     onSave() {
+      this.test = {
+        user_name: 'b'
+      };
       Toast('save');
     },
     onDelete() {
@@ -52,6 +61,7 @@ Vue.component(AddressEdit.name, AddressEdit);
 :::demo 基础用法
 ```html
 <van-address-edit
+  :address-info="test"
   :area-list="areaList"
   :show-postal="true"
   :show-set-default="true"
@@ -65,7 +75,31 @@ Vue.component(AddressEdit.name, AddressEdit);
 
 ```javascript
 export default {
-  
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
 }
 ```
 :::
@@ -74,23 +108,45 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前选中地址的 id | String | - | - |
-| list | 地址列表 | Array | `[]` | - |
-| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+| areaList | 地区列表 | `Object` | - | - |
+| addressInfo | 收货人信息 | `Object` | `{}` | - |
+| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
+| addressText | "地址"文案前缀 | `String` | `收货` | - |
+| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
+| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
+| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
 
 ### Event
 
 | 事件名       | 说明      | 参数       |
 |-----------|-----------|-----------|
-| add | 点击新增按钮时触发 | - |
-| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
-| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
 
 ### 数据格式
-#### 地址列表字段说明
+
+#### addressInfo 数据格式
 | key       | 说明      | 类型       |
 |-----------|-----------|-----------|
 | id | 每条地址的唯一标识 | `String | Number` |
 | name | 收货人姓名 | `String` |
 | tel | 收货人手机号 | `String` |
-| address | 收货地址 | `String` |
+| province | 省份 | `String` |
+| city | 城市 | `String` |
+| county | 区县 | `String` |
+| address_detail | 详细地址 | `String` |
+| area_code | 地区编码，通过省市区选择获取 | `String` |
+| postal_code | 邮政编码 | `String` |
+| is_default | 是否为默认地址 | `String` |
+
+#### searchResult 数据格式
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| name | 地名 | `String` |
+| address | 详细地址 | `String` |
+
+#### 省市县列表数据格式
+请参考 [Area](/zanui/vue/component/area) 组件。
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index 611409ee7..1371f05b5 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -14,9 +14,9 @@
       @focus="handleFocus"
       @blur="handleBlur"
       >
-      <template v-if="value && isFocused" slot="icon">
-        <span v-if="isAndroid" class="van-address-edit-detail__finish-edit van-font--12">完成</span>
-        <van-icon v-else name="clear" />
+      <template slot="icon">
+        <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
+        <van-icon v-else-if="showIcon" name="clear"  />
       </template>
     </van-field>
 
@@ -70,6 +70,10 @@ export default {
   computed: {
     showSearchList() {
       return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
+    },
+
+    showIcon() {
+      return this.value && this.isFocused;
     }
   },
 
@@ -89,11 +93,11 @@ export default {
     },
 
     onIconClick() {
-      // 安卓直接完成，不触发清除
       if (this.isAndroid) {
-        return;
+        this.$refs.root.querySelector('.van-field__control').blur();
+      } else {
+        this.$emit('input', '');
       }
-      this.$emit('input', '');
     },
 
     onSuggestSelect(express) {
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 24c8c1bfd..489ef7dc2 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -105,7 +105,17 @@ export default {
     },
     addressInfo: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        user_name: '',
+        tel: '',
+        province: '',
+        city: '',
+        county: '',
+        area_code: '',
+        postal_code: '',
+        address_detail: '',
+        is_default: false
+      })
     },
     searchResult: {
       type: Array,
@@ -129,9 +139,12 @@ export default {
   },
 
   watch: {
-    addressInfo(val) {
-      this.currentInfo = val;
-      this.isEdit = !!val.id;
+    addressInfo: {
+      handler(val) {
+        this.currentInfo = val;
+        this.isEdit = !!val.id;
+      },
+      deep: true
     }
   },
 
@@ -191,8 +204,8 @@ export default {
         return !msg;
       });
 
-      if (isValid) {
-        this.$emit('save', this.currentInfo, this.isEdit);
+      if (isValid && !this.isSaving) {
+        this.$emit('save', this.currentInfo);
       }
     },
 
diff --git a/packages/field/index.vue b/packages/field/index.vue
index ba281a720..54603b7bc 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -15,11 +15,12 @@
     <textarea
       v-if="type === 'textarea'"
       v-bind="$attrs"
-      v-on="$listeners"
       ref="textarea"
       class="van-field__control"
       :value="value"
       @input="onInput"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <input
       v-else
@@ -29,6 +30,8 @@
       :type="type"
       :value="value"
       @input="onInput"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <div
       v-if="hasIcon"
diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css
index f7dce207c..d834a9834 100644
--- a/packages/vant-css/src/address-edit.css
+++ b/packages/vant-css/src/address-edit.css
@@ -23,9 +23,14 @@
     margin-bottom: 10px;
   }
 
+  .van-icon-clear {
+    color: $gray-dark;
+  }
+
   &-detail {
     &__finish-edit {
       color: $blue;
+      font-size: 12px;
     }
 
     &__suggest-list {
@@ -39,7 +44,7 @@
     &__location {
       float: left;
       font-size: 18px;
-      color: #666;
+      color: $gray-darker;
     }
 
     &__item-info {
@@ -54,7 +59,7 @@
 
     &__subtitle {
       font-size: 12px;
-      color: #666;
+      color: $gray-darker;
     }
   }
 }
diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js
new file mode 100644
index 000000000..7f8b58ae3
--- /dev/null
+++ b/test/unit/specs/address-edit.spec.js
@@ -0,0 +1,327 @@
+import { mount } from 'avoriaz';
+import AddressEdit from 'packages/address-edit';
+import AddressDetail from 'packages/address-edit/Detail';
+import areaList from '../../../docs/mock/area.json';
+
+describe('AddressEdit', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a AddressEdit', () => {
+    wrapper = mount(AddressEdit);
+    expect(wrapper.hasClass('van-address-edit')).to.be.true;
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal('选择省');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal('选择市');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal('选择区');
+  });
+
+  it('create a AddressEdit with props', () => {
+    const addressInfo = {
+      user_name: '测试',
+      tel: '123123213',
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      address_detail: '详细地址',
+      postal_code: '10000',
+      is_default: true
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: addressInfo,
+        showPostal: true,
+        showSetDefault: true,
+        showSearchResult: true,
+        searchResult: []
+      }
+    });
+
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.user_name);
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal(addressInfo.tel);
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal(addressInfo.address_detail);
+    expect(wrapper.find('.van-field__control')[3].element.value).to.equal(addressInfo.postal_code);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal(addressInfo.province);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal(addressInfo.city);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal(addressInfo.county);
+    expect(wrapper.find('.van-switch-cell').length).to.equal(1);
+  });
+
+  it('save AddressInfo', () => {
+    const addressInfo = {
+      user_name: '',
+      tel: '123123213',
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      address_detail: '详细地址',
+      postal_code: '10000',
+      is_default: true
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: addressInfo,
+        showPostal: true,
+        showSetDefault: true,
+        showSearchResult: true,
+        searchResult: []
+      }
+    });
+
+    const saveButton = wrapper.find('.van-button')[0];
+
+    // name empty
+    wrapper.vm.addressInfo.user_name = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.false;
+
+    // name too long
+    wrapper.vm.addressInfo.user_name = '111111111111111111111111111';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.false;
+
+    // tel empty
+    wrapper.vm.addressInfo.user_name = '123';
+    wrapper.vm.addressInfo.tel = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['tel']).to.be.true;
+    wrapper.find('.van-field__control')[1].trigger('focus');
+    expect(wrapper.vm.errorInfo['tel']).to.be.false;
+
+    // area_code empty
+    wrapper.vm.addressInfo.tel = '13000000000';
+    wrapper.vm.addressInfo.area_code = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['area_code']).to.be.true;
+
+    // area_code invalid
+    wrapper.vm.addressInfo.tel = '13000000000';
+    wrapper.vm.addressInfo.area_code = '-1';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['area_code']).to.be.true;
+
+    // address_detail empty
+    wrapper.vm.addressInfo.area_code = '100000';
+    wrapper.vm.addressInfo.address_detail = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
+
+    // address_detail too long
+    let longAddress = '1';
+    for (let i = 0; i < 300; i++) {
+      longAddress += '1';
+    }
+    wrapper.vm.addressInfo.address_detail = longAddress;
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
+
+    // postal_code invalid
+    wrapper.vm.addressInfo.address_detail = '123';
+    wrapper.vm.addressInfo.postal_code = '123';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.true;
+    wrapper.find('.van-field__control')[3].trigger('focus');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
+
+    // valid result
+    wrapper.vm.addressInfo.postal_code = '123456';
+    saveButton.trigger('click');
+
+    // not show postal_code
+    wrapper.vm.addressInfo.postal_code = '156';
+    wrapper.vm.showPostal = false;
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
+  });
+
+  it('show search result', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {},
+        showSearchResult: true,
+        searchResult: [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          address: '杭州市西湖区'
+        }]
+      }
+    });
+
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    wrapper.vm.$nextTick(() => {
+      const items = wrapper.find('.van-address-edit-detail__suggest-item');
+      expect(items.length).to.equal(3);
+
+      items[0].trigger('click');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心');
+
+        items[1].trigger('click');
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.find('.van-field__control')[2].element.value).to.equal('黄龙万科中心H座');
+          items[2].trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区');
+
+            wrapper.find('.van-field__control')[2].trigger('blur');
+            setTimeout(() => {
+              done();
+            }, 300);
+          });
+        });
+      });
+    });
+  });
+
+  it('select area', () => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: {}
+      }
+    });
+
+    wrapper.vm.onAreaConfirm([]);
+    wrapper.vm.onAreaConfirm([{ code: -1 }]);
+    wrapper.vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
+    wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
+    expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
+
+    wrapper.vm.onAreaConfirm([{ name: '浙江省' }, { name: '杭州市' }, { name: '西湖区', code: '123456' }]);
+    expect(wrapper.vm.addressInfo['province']).to.equal('浙江省');
+    expect(wrapper.vm.addressInfo['city']).to.equal('杭州市');
+    expect(wrapper.vm.addressInfo['county']).to.equal('西湖区');
+    expect(wrapper.vm.addressInfo['area_code']).to.equal('123456');
+  });
+
+  it('delete address', done => {
+    wrapper = mount(AddressEdit, {
+      attachToDocument: true,
+      propsData: {
+        areaList,
+        isDeleting: true,
+        addressInfo: {
+          id: '123'
+        }
+      }
+    });
+
+    const deleteButton = wrapper.find('.van-button')[1];
+    deleteButton.trigger('click');
+    wrapper.vm.onDeleteAddress();
+
+    setTimeout(() => {
+      expect(document.querySelectorAll('.van-dialog').length).to.equal(0);
+      wrapper.vm.isDeleting = false;
+      wrapper.vm.$nextTick(() => {
+        deleteButton.trigger('click');
+        setTimeout(() => {
+          expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
+
+          wrapper.vm.$on('delete', () => {
+            done();
+          });
+          document.querySelector('.van-dialog__confirm').click();
+          done();
+        }, 300);
+      });
+    }, 300);
+  });
+
+  it('on change detail', done => {
+    wrapper = mount(AddressEdit);
+
+    wrapper.vm.$on('change-detail', (val) => {
+      expect(val).to.equal('123');
+      done();
+    });
+
+    const field = wrapper.find('.van-field__control')[2];
+    field.element.value = '123';
+    field.trigger('input');
+  });
+
+  it('clear address detail in ios', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {
+          address_detail: '123'
+        }
+      }
+    });
+
+    wrapper.vm.isAndriod = false;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+
+    wrapper.vm.$nextTick(() => {
+      wrapper.find('.van-field__icon')[0].trigger('touchstart');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.addressInfo.address_detail).to.equal('');
+        done();
+      });
+    });
+  });
+
+  it('finish edit address detail in andriod', done => {
+    wrapper = mount(AddressDetail, {
+      propsData: {
+        value: '123'
+      }
+    });
+
+    wrapper.vm.$on('input', val => {
+      wrapper.vm.value = val;
+    });
+
+    wrapper.setData({
+      isAndroid: true
+    });
+    wrapper.find('.van-field__control')[0].trigger('focus');
+
+    wrapper.vm.$nextTick(() => {
+      wrapper.find('.van-field__icon')[0].trigger('touchstart');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.value).to.equal('123');
+        done();
+      });
+    });
+  });
+
+  it('watch address info', done => {
+    const addressInfo = {
+      user_name: '123'
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {}
+      }
+    });
+
+    wrapper.setProps({ addressInfo });
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.currentInfo.user_name).to.equal('123');
+      done();
+    });
+  });
+});

From 6dd0f18df26219425f850bb5aaa5bb215957cf36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 10:24:46 +0800
Subject: [PATCH 3/4] fix: AddressEdit test cases failed

---
 docs/examples-docs/address-edit.md   | 9 +--------
 test/unit/specs/address-edit.spec.js | 1 -
 test/unit/specs/dialog.spec.js       | 5 ++---
 test/unit/specs/field.spec.js        | 3 +++
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md
index cc332e06f..9e0ebf529 100644
--- a/docs/examples-docs/address-edit.md
+++ b/docs/examples-docs/address-edit.md
@@ -4,15 +4,9 @@ import areaList from '../mock/area.json';
 
 export default {
   data() {
-    setTimeout(() => {
-      this.test.user_name = 'b';
-    }, 1000);
     return {
       areaList,
-      searchResult: [],
-      test: {
-        user_name: 'a'
-      }
+      searchResult: []
     }
   },
 
@@ -61,7 +55,6 @@ Vue.component(AddressEdit.name, AddressEdit);
 :::demo 基础用法
 ```html
 <van-address-edit
-  :address-info="test"
   :area-list="areaList"
   :show-postal="true"
   :show-set-default="true"
diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js
index 7f8b58ae3..7f12bb249 100644
--- a/test/unit/specs/address-edit.spec.js
+++ b/test/unit/specs/address-edit.spec.js
@@ -242,7 +242,6 @@ describe('AddressEdit', () => {
             done();
           });
           document.querySelector('.van-dialog__confirm').click();
-          done();
         }, 300);
       });
     }, 300);
diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js
index 81d2a212e..ec1bf4a56 100644
--- a/test/unit/specs/dialog.spec.js
+++ b/test/unit/specs/dialog.spec.js
@@ -14,10 +14,9 @@ describe('Dialog', () => {
       done();
     });
 
-    expect(document.querySelector('.van-dialog')).to.exist;
-    expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
-
     setTimeout(() => {
+      expect(document.querySelector('.van-dialog')).to.exist;
+      expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
       document.querySelector('.van-dialog__confirm').click();
     }, 500);
   });
diff --git a/test/unit/specs/field.spec.js b/test/unit/specs/field.spec.js
index 5da380573..b0c92c0ee 100644
--- a/test/unit/specs/field.spec.js
+++ b/test/unit/specs/field.spec.js
@@ -136,12 +136,15 @@ describe('Field', () => {
 
   it('blur event', (done) => {
     const blur = sinon.spy();
+    const focus = sinon.spy();
     const clickIcon = sinon.spy();
 
     wrapper = mount(FieldWithIcon, {});
     wrapper.vm.$on('blur', blur);
+    wrapper.vm.$on('focus', focus);
 
     wrapper.find('.van-field__icon')[0].trigger('click');
+    wrapper.find('.van-field__control')[0].trigger('focus');
     wrapper.find('.van-field__control')[0].trigger('blur');
 
     expect(blur.calledOnce).to.be.true;

From c9f8c917a2ee40a0a7a16a087b3d01333cae51bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 10:25:08 +0800
Subject: [PATCH 4/4] fix: field blur event triigered twice

---
 packages/field/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/field/index.vue b/packages/field/index.vue
index 54603b7bc..cd0efd5cc 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -24,8 +24,7 @@
     />
     <input
       v-else
-      v-bind="$attrs"
-      v-on="$listeners"      
+      v-bind="$attrs"  
       class="van-field__control"
       :type="type"
       :value="value"