From c2bef6ef155b788b1762e41babbce23773d631db Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 13 Dec 2017 17:36:25 +0800 Subject: [PATCH] =?UTF-8?q?[Improvement]=20AddressEdit:=20add=20focus?= =?UTF-8?q?=E3=80=81change-area=E3=80=81select-search=20events=20(#426)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/markdown/zh-CN/address-edit.md | 3 + packages/address-edit/Detail.vue | 3 +- packages/address-edit/index.vue | 31 +++++++- packages/area/index.vue | 5 ++ test/unit/specs/address-edit.spec.js | 112 +++++++++++++++++++++------ test/unit/specs/area.spec.js | 24 +++++- 6 files changed, 148 insertions(+), 30 deletions(-) diff --git a/docs/markdown/zh-CN/address-edit.md b/docs/markdown/zh-CN/address-edit.md index 18b08af2d..aea451a9c 100644 --- a/docs/markdown/zh-CN/address-edit.md +++ b/docs/markdown/zh-CN/address-edit.md @@ -74,6 +74,9 @@ export default { |-----------|-----------|-----------| | save | 点击保存按钮时触发 | content：表单内容 | | delete | 点击删除按钮时触发 | content：表单内容 | +| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key | +| select-search | 选中搜索结果时触发 | value: 搜索结果 | +| change-area | 修改收件地区时触发 | values: 地区信息 | | change-detail | 修改详细地址时触发 | value: 详细地址内容 | ### 数据格式 diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue index 9d1d4d59d..3ae29d06b 100644 --- a/packages/address-edit/Detail.vue +++ b/packages/address-edit/Detail.vue @@ -16,7 +16,7 @@ >
{{ $t('complete') }} - +
@@ -101,6 +101,7 @@ export default create({ onSuggestSelect(express) { this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim()); + this.$emit('select-search', express); }, isString(str) { diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue index 2b867c985..a201dcf7f 100644 --- a/packages/address-edit/index.vue +++ b/packages/address-edit/index.vue @@ -30,6 +30,7 @@ @focus="onFocus('address_detail')" @blur="onDetailBlur" @input="onChangeDetail" + @select-search="$emit('select-search', $event)" /> - + @focus="onFocus('postal_code')" + /> { this.$emit('delete', this.currentInfo); }); + }, + + // get values of area component + getArea() { + const { area } = this.$refs; + return area ? area.getValues() : []; + }, + + // set area code to area component + setAreaCode(code) { + this.currentInfo.area_code = code; + this.$nextTick(() => { + const { area } = this.$refs; + if (area) { + this.assignAreaValues(area.getValues()); + } + }); } } }); diff --git a/packages/area/index.vue b/packages/area/index.vue index 7e8585bea..65be9f607 100644 --- a/packages/area/index.vue +++ b/packages/area/index.vue @@ -145,6 +145,11 @@ export default create({ [DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4))) ); } + }, + + getValues() { + const { picker } = this.$refs; + return picker ? picker.getValues() : []; } } }); diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js index 1ca4fe09c..14d9805f8 100644 --- a/test/unit/specs/address-edit.spec.js +++ b/test/unit/specs/address-edit.spec.js @@ -15,9 +15,15 @@ describe('AddressEdit', () => { 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('选择区'); + 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', () => { @@ -43,13 +49,27 @@ describe('AddressEdit', () => { } }); - expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.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-field__control')[0].element.value).to.equal( + addressInfo.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); }); @@ -155,14 +175,18 @@ describe('AddressEdit', () => { propsData: { addressInfo: {}, showSearchResult: true, - searchResult: [{ - name: '黄龙万科中心', - address: '杭州市西湖区' - }, { - name: '黄龙万科中心H座' - }, { - address: '杭州市西湖区' - }] + searchResult: [ + { + name: '黄龙万科中心', + address: '杭州市西湖区' + }, + { + name: '黄龙万科中心H座' + }, + { + address: '杭州市西湖区' + } + ] } }); @@ -173,15 +197,21 @@ describe('AddressEdit', () => { items[0].trigger('click'); wrapper.vm.$nextTick(() => { - expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心'); + 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座'); + 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('杭州市西湖区'); + expect( + wrapper.find('.van-field__control')[2].element.value + ).to.equal('杭州市西湖区'); wrapper.find('.van-field__control')[2].trigger('blur'); setTimeout(() => { @@ -207,7 +237,11 @@ describe('AddressEdit', () => { 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' }]); + 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('西湖区'); @@ -249,7 +283,7 @@ describe('AddressEdit', () => { it('on change detail', done => { wrapper = mount(AddressEdit); - wrapper.vm.$on('change-detail', (val) => { + wrapper.vm.$on('change-detail', val => { expect(val).to.equal('123'); done(); }); @@ -322,4 +356,36 @@ describe('AddressEdit', () => { done(); }); }); + + it('set/get area code', done => { + wrapper = mount(AddressEdit, { + propsData: { + areaList, + addressInfo: { + area_code: '' + } + } + }); + + expect(wrapper.vm.getArea()).to.eql([ + { code: '-1', name: '选择省份' }, + { code: '-1', name: '选择城市' }, + { code: '-1', name: '选择地区' } + ]); + + wrapper.vm.setAreaCode('110101'); + setTimeout(() => { + expect(wrapper.vm.currentInfo.area_code).to.eql('110101'); + expect(wrapper.vm.getArea()).to.eql([ + { code: '110000', name: '北京市' }, + { code: '110100', name: '北京市' }, + { code: '110101', name: '东城区' } + ]); + + wrapper.vm.$refs = []; + wrapper.vm.setAreaCode('110102'); + expect(wrapper.vm.getArea()).to.eql([]); + done(); + }, 50); + }); }); diff --git a/test/unit/specs/area.spec.js b/test/unit/specs/area.spec.js index 994be2be8..16a8fd039 100644 --- a/test/unit/specs/area.spec.js +++ b/test/unit/specs/area.spec.js @@ -18,7 +18,7 @@ describe('Area', () => { expect(wrapper.hasClass('van-area')).to.be.true; }); - it('create an area with default value', (done) => { + it('create an area with default value', done => { wrapper = mount(Area, { propsData: { areaList: AreaList, @@ -38,7 +38,7 @@ describe('Area', () => { }); }); - it('create an area and set value', (done) => { + it('create an area and set value', done => { wrapper = mount(Area, { propsData: { areaList: AreaList, @@ -89,7 +89,7 @@ describe('Area', () => { expect(wrapper.vm.areaColumns.length).to.equal(1); }); - it('create an area and click cancel', (done) => { + it('create an area and click cancel', done => { wrapper = mount(Area, { propsData: { areaList: AreaList @@ -125,4 +125,22 @@ describe('Area', () => { expect(list.length).to.equal(33); }); + + it('getValues method', () => { + wrapper = mount(Area, { + propsData: { + value: '110101', + areaList: AreaList + } + }); + + expect(wrapper.vm.getValues()).to.eql([ + { code: '110000', name: '北京市' }, + { code: '110100', name: '北京市' }, + { code: '110101', name: '东城区' } + ]); + + wrapper.vm.$refs = []; + expect(wrapper.vm.getValues()).to.eql([]); + }); });