<template> <div class="address-select-component" v-show="show"> <div class="address-select-box"> <div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox"></span></div> <ul class="head-address-ul"> <li v-if="province.title" :class="{ 'head-address-li': common.titleActive, 'disable': !supportChangeProvince}" @click="clickTitle('province')">{{province.title}}</li> <li v-if="city.title" :class="{ 'head-address-li': province.titleActive }" @click="clickTitle('city')">{{city.title}}</li> <li v-if="area.title" :class="{ 'head-address-li': city.titleActive }" @click="clickTitle('area')">{{area.title}}</li> <li v-if="street.title" :class="{ 'head-address-li': area.titleActive }">{{street.title}}</li> </ul> <div class="address-container"> <div class="address-content"> <ul v-if="province.showList" class="address-ul"> <li v-for="(pprovince, index) in provinces" :key="index" @click="switchAddress(pprovince.id, pprovince.caption)">{{pprovince.caption}} <span v-if="pprovince.id === province.id" class="iconfont icon-v"></span></li> </ul> <ul v-if="city.showList" class="address-ul"> <li v-for="(pcity, index) in citys" :key="index" @click="switchAddress(pcity.id, pcity.caption)">{{pcity.caption}} <span v-if="pcity.id === city.id" class="iconfont icon-v"></span></li> </ul> <ul v-if="area.showList" class="address-ul"> <li v-for="(parea, index) in areas" :key="index" @click="switchAddress(parea.id, parea.caption)">{{parea.caption}} <span v-if="parea.id === area.id" class="iconfont icon-v"></span></li> </ul> <ul v-if="street.showList" class="address-ul"> <li v-for="(pstreet, index) in streets" :key="index" @click="switchAddress(pstreet.id, pstreet.caption)">{{pstreet.caption}} <span v-if="pstreet.id === street.id" class="iconfont icon-v"></span></li> </ul> </div> </div> </div> </div> </template> <style> .disable { color: #a6a6a6; } .icon-v:before { content: "\e6ea"; } .address-select-component { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5); .address-select-box { margin-top: 400px; background: #fff; .component-title { text-align: center; line-height: 80px; font-size: 32px; color: #ccc; padding: 0 30px; .close { float: right; } } .head-address-ul { margin: 0 0 0 30px; padding: 0; list-style: none; overflow: hidden; background-color: white; font-size: 24px; color: #444; li { display: block; float: left; height: 40px; line-height: 40px; position: relative; margin-right: 70px; } li:last-child { margin-right: 30px; } .head-address-li { color: #f23030; } .head-address-li:after { width: 100%; height: 1px; border-bottom: 2px solid #f23030; position: absolute; bottom: 0; left: 0; content: ""; } } .head-address-ul:after { content: ""; width: 100%; height: 1px; position: absolute; border-bottom: 1px solid #e3e5e9; left: 0; bottom: 0; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); } .address-container { margin: 0; overflow: hidden; height: 100%; width: 100%; border-top: solid 1px #ccc; .address-content { transform: translate(0, 0) translateZ(0); height: 620px; } } .address-ul { padding: 0; margin: 0; list-style: none; height: 100%; overflow: auto; font-size: 24px; color: #232326; li { height: 80px; line-height: 80px; padding-left: 30px; position: relative; overflow: hidden; span { color: #f23030; font-size: 14px; } } li:after { content: ""; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); } } } } </style> <script> require('home/address/address-index.page.css'); const $ = require('yoho-jquery'); const bus = require('plugin/vue-bus'); let areaForm = $('.edit-address'); let areaCode = areaForm.find('input[name=area_code]'); let area = areaForm.find('input[name=area]'); module.exports = { data() { return { supportChangeProvince: true, // 是否支持修改省 provinces: [], citys: [], areas: [], streets: [], show: false, common: { titleActive: true, }, province: { id: '', title: '', allTitle: '', showList: true, titleActive: false, }, city: { id: '', title: '', allTitle: '', showList: false, titleActive: false, }, area: { id: '', title: '', allTitle: '', showList: false, titleActive: false, }, street: { id: '', title: '', allTitle: '', showList: false, titleActive: false, } }; }, methods: { /* 返回标题处理 */ returnTitle() { let getTitle = ''; let returnTitle = ''; if (this.supportChangeProvince) { getTitle = this.province.allTitle + this.city.allTitle + this.area.allTitle + this.street.allTitle; } else { getTitle = this.city.allTitle + this.area.allTitle + this.street.allTitle; } if (getTitle.length > 11) { returnTitle = getTitle.substr(0, 5) + '...' + getTitle.substr(-5); } else { returnTitle = getTitle; } return returnTitle; }, /* 标题长度处理 */ titleHandle(caption) { if (caption.length > 3) { return caption.substring(0, 3) + '...'; } else { return caption; } }, /* 选择地址后的显示控制 */ changeShow(id, caption) { switch ((id + '').length) { case 2: this.province.id = id; this.province.allTitle = caption; this.province.title = this.titleHandle(caption); this.city.title = '请选择'; this.city.showList = this.province.titleActive = true; this.province.showList = this.area.showList = this.street.showList = false; this.common.titleActive = this.city.titleActive = this.area.titleActive = this.street.titleActive = false; break; case 4: this.city.id = id; this.city.allTitle = caption; this.city.title = this.titleHandle(caption); this.area.title = '请选择'; this.area.showList = this.city.titleActive = true; this.province.showList = this.city.showList = this.street.showList = false; this.province.titleActive = this.area.titleActive = this.street.titleActive = false; break; case 6: this.area.id = id; this.area.allTitle = caption; this.area.title = this.titleHandle(caption); this.street.title = '请选择'; this.street.showList = this.area.titleActive = true; this.province.showList = this.city.showList = this.area.showList = false; this.province.titleActive = this.city.titleActive = this.street.titleActive = false; break; case 9: this.street.id = id; this.street.allTitle = caption; this.street.title = this.titleHandle(caption); this.street.showList = this.street.titleActive = true; this.province.showList = this.city.showList = this.area.showList = false; this.province.titleActive = this.city.titleActive = this.area.titleActive = false; break; default: this.province.title = '请选择'; this.province.showList = this.province.titleActive = true; this.city.showList = this.area.showList = this.street.showList = false; this.city.titleActive = this.area.titleActive = this.street.titleActive = false; break; } }, /* 获取地址数据绑定 */ switchAddress(id, caption) { if (!id) { id = 0; } this.changeShow(id, caption); $.get('/home/getaddress.json', { id: id }, resultData => { /* 结果返回 */ if (resultData.length < 1) { areaCode.val(id); let returnTitle = this.returnTitle(); area.val(returnTitle); this.show = false; bus.$emit('modify.addressAct', { code: id, area: returnTitle }); } /* 数据绑定 */ switch ((id + '').length) { case 2: this.citys = resultData; break; case 4: this.areas = resultData; break; case 6: this.streets = resultData; break; default: this.provinces = resultData; break; } }); }, /* 关闭地址选择组件 */ closeAddBox() { this.show = false; }, /* 点击地址标题时的处理 */ clickTitle(type) { switch (type) { case 'province': if (!this.supportChangeProvince) { return false; } if (this.provinces.length < 1) { this.switchAddress(); } this.province.titleActive = this.province.showList = true; this.city.titleActive = this.area.titleActive = this.street.titleActive = false; this.city.title = this.area.title = this.street.title = ''; break; case 'city': this.city.titleActive = this.city.showList = true; this.province.titleActive = this.area.titleActive = this.street.titleActive = false; this.province.showList = this.area.showList = this.street.showList = false; this.area.title = this.street.title = ''; break; case 'area': this.area.titleActive = this.area.showList = true; this.province.titleActive = this.city.titleActive = this.street.titleActive = false; this.province.showList = this.city.showList = this.street.showList = false; this.street.title = ''; break; default: break; } }, }, created: function() { this.switchAddress(); } }; </script>