feat(AddressEdit): add area confirmation verification (#4724)

src/address-edit/README.md

@@ -21,6 +21,7 @@ Vue.use(AddressEdit);
   show-set-default
   show-search-result
   :search-result="searchResult"
+  area-columns-placeholder="['Choose', 'Choose', 'Choose']"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"

src/address-edit/README.zh-CN.md

@@ -21,6 +21,7 @@ Vue.use(AddressEdit);
   show-set-default
   show-search-result
   :search-result="searchResult"
+  area-columns-placeholder="['请选择', '请选择', '请选择']"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"

src/address-edit/demo/index.vue

@@ -8,6 +8,7 @@
         show-set-default
         show-search-result
         :search-result="searchResult"
+        :area-columns-placeholder="$t('areaColumnsPlaceholder')"
         @save="onSave"
         @delete="onDelete"
         @change-detail="onChangeDetail"
@@ -22,6 +23,7 @@ import areaList from '../../area/demo/area';
 export default {
   i18n: {
     'zh-CN': {
+      areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
       searchResult: [{
         name: '黄龙万科中心',
         address: '杭州市西湖区'
@@ -33,6 +35,7 @@ export default {
       }]
     },
     'en-US': {
+      areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'],
       searchResult: [{
         name: 'Name1',
         address: 'Address'

src/address-edit/index.js

@@ -139,6 +139,10 @@ export default createComponent({
     },
 
     onAreaConfirm(values) {
+      if (values.some(value => !value.code)) {
+        Toast(t('areaEmpty'));
+        return;
+      }
       this.showAreaPopup = false;
       this.assignAreaValues();
       this.$emit('change-area', values);

src/address-edit/test/__snapshots__/index.spec.js.snap

@@ -81,3 +81,181 @@ exports[`create a AddressEdit with props 1`] = `
   <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>
 `;
+
+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>
+  </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 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" maxlength="200" 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" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell">
+    <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;">
+        <div class="van-switch__node"></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>
+`;
+
+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>
+  </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 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" maxlength="200" 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" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell">
+    <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;">
+        <div class="van-switch__node"></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>
+`;
+
+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>
+  </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 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" maxlength="200" 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" maxlength="6" placeholder="邮政编码" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center van-switch-cell">
+    <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;">
+        <div class="van-switch__node"></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>
+`;
+
+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>
+  </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 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" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></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>
+`;

src/address-edit/test/index.spec.js

@@ -19,7 +19,8 @@ const createComponent = () => {
     propsData: {
       areaList,
       addressInfo,
-      showPostal: true
+      showPostal: true,
+      showSetDefault: true
     }
   });
 
@@ -54,6 +55,63 @@ test('create a AddressEdit with props', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('valid area placeholder confirm', async () => {
+  const wrapper = mount(AddressEdit, {
+    propsData: {
+      areaList,
+      areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
+    }
+  });
+
+  const { data } = wrapper.vm;
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+
+  expect(data.areaCode).toBe('');
+  await later(50);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('show area component', async () => {
+  const { wrapper } = createComponent();
+
+  const field = wrapper.findAll('.van-field').at(2);
+  field.trigger('click');
+
+  await later(50);
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.find('.van-picker__cancel').trigger('click');
+
+  await later(50);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('set-default', () => {
+  const { wrapper } = createComponent();
+  wrapper.find('.van-switch').trigger('click');
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('validator props', async () => {
+  const wrapper = mount(AddressEdit, {
+    propsData: {
+      areaList,
+      validator(key, value) {
+        return `${key}${value}`;
+      }
+    }
+  });
+
+  const { errorInfo, data } = wrapper.vm;
+  data.name = '';
+  const button = wrapper.find('.van-button');
+  button.trigger('click');
+
+  expect(errorInfo.name).toBeTruthy();
+});
+
 test('valid name', () => {
   const { data, field, button, errorInfo } = createComponent();
 

src/area/index.js

@@ -206,7 +206,10 @@ export default createComponent({
     },
 
     getValues() {
-      return this.$refs.picker ? this.$refs.picker.getValues().filter(value => !!value) : [];
+      const { picker } = this.$refs;
+      let getValues = picker ? picker.getValues().filter(value => !!value) : [];
+      getValues = this.parseOutputValues(getValues);
+      return getValues;
     },
 
     getArea() {
@@ -224,8 +227,9 @@ export default createComponent({
       }
 
       const names = values.map(item => item.name);
+      const filterCodeValues = values.filter(value => !!value.code);
+      area.code = filterCodeValues.length ? filterCodeValues[filterCodeValues.length - 1].code : '';
 
-      area.code = values[values.length - 1].code;
       if (this.isOverseaCode(area.code)) {
         area.country = names[1] || '';
         area.province = names[2] || '';