vux->XAddress
地址组件封装
components/address/pcaSelect.vue
<template> <div class="pca-select-wrapper"> <x-address title="选择地区" popup-title="选择地区" style="display:none;" v-model="chooseAddr" :list="addressData" :show.sync="showAddress" @on-hide="getChoose"> </x-address> </div></template><script> import { XAddress, Group } from 'vux' import addrApi from '@/api/order/address.js' // 接口文件，地址数据也可以从网上查找 export default { components: { XAddress, Group }, props: { // 弹框关闭后是否清除已选择数据 clearAddrData: { default: false, type: Boolean, require: false } }, data() { return { showAddress: false, // 是否显示选择地址弹框 resultPostcode: '', // 邮编 resultAddr: [], // 数据做了处理 最终结果需要处理 省前+0 市前+ 00 区前+ 000 -- 接口返回数据未处理区分省、市、区 chooseAddr: [], // 选择的地址 addressData: [], // 地址数据列表 ADDR_PRO: [], // 地址-省-数据列表 ADDR_CI: [], // 地址-市-数据列表 ADDR_DIS: [], // 地址-区-数据列表 } }, mounted() { this.getAddrList() }, methods: { // 确定或取消之后，重置数据 clearAddr() { this.resultPostcode = '' this.resultAddr = [] this.chooseAddr = [] }, // 重置省市区数据 实际数据与最终数据有出入 省前+0 市前+ 00 区前+ 000 最终数据需去掉 initAddrList(provinces, cities, districts) { let _newArry = [] provinces.map(pro => { _newArry.push({ name: pro.provinceName, value: '0' + pro.id, parent: null, postcode: pro.postcode }) }) cities.map(ci => { _newArry.push({ name: ci.cityName, value: '00' + ci.id, parent: '0' + ci.provinceId, postcode: ci.postcode }) }) districts.map(dis => { _newArry.push({ name: dis.districtName, value: '000' + dis.id, parent: '00' + dis.cityId, postcode: dis.postcode }) }) this.addressData = JSON.parse(JSON.stringify(_newArry)) }, // 从本地存储/接口获取地址数据 getAddrList() { if (window.localStorage.getItem('ADDR_PRO')) { this.ADDR_PRO = JSON.parse(window.localStorage.getItem('ADDR_PRO')) this.ADDR_CI = JSON.parse(window.localStorage.getItem('ADDR_CI')) this.ADDR_DIS = JSON.parse(window.localStorage.getItem('ADDR_DI')) this.initAddrList(this.ADDR_PRO, this.ADDR_CI, this.ADDR_DIS) return } // 调用接口，返回地址数据信息 addrApi.getAddresses() .then((res)=>{ console.log(res) if(res.data.code == 200) { this.ADDR_PRO = res.data.content.provinces this.ADDR_CI = res.data.content.cities this.ADDR_DIS = res.data.content.districts window.localStorage.setItem('ADDR_PRO', JSON.stringify(this.ADDR_PRO)) window.localStorage.setItem('ADDR_CI', JSON.stringify(this.ADDR_CI)) window.localStorage.setItem('ADDR_DI', JSON.stringify(this.ADDR_DIS)) this.initAddrList(res.data.content.provinces, res.data.content.cities, res.data.content.districts) } else { this.$Message.message(res.data.message) } }) .catch(err => { console.log(err) }) }, // 显示地址组件 showAddr() { this.showAddress = true }, // 获取结果 getChoose() { if(this.chooseAddr.length) { this.resultAddr = [] let _arr = JSON.parse(JSON.stringify(this.chooseAddr)) _arr.map((item, idx) => { this.resultAddr.push(item.substr(idx+1)) }) this.resultPostcode = this.ADDR_DIS.filter(item => item.id == this.resultAddr[2])[0].postcode let addrPro = this.ADDR_PRO.filter(item => item.id == this.resultAddr[0])[0].provinceName let addrCity = this.ADDR_CI.filter(item => item.id == this.resultAddr[1])[0].cityName let addrDis = this.ADDR_DIS.filter(item => item.id == this.resultAddr[2])[0].districtName let addrObj = { province: addrPro, city: addrCity, district: addrDis, postcode: this.resultPostcode } //⚠️ 点击确定输出选中的数据信息--addrObj this.$emit('getPostCode', addrObj) if(this.clearAddrData) { this.clearAddr() } } } } }</script>地址组件css样式更改 address.scss/address.css
⚠️ 使用地址组件的vue页面需要在entry-js文件引入该样式文件
assets/address/address.scss
.vux-cell-box{ background: #20a3ff !important;}.vux-popup-dialog{ background: #fff !important;}// 选择头部背景颜色.vux-popup-header{ background-color: #e8f6ff !important;}// 取消-完成按钮颜色更改.vux-popup-header-left, .vux-popup-header-right{ color: #20a3ff !important;}// 选择头部底部border颜色更改.vux-1px-b:after{ border-color: transparent !important;}input::-webkit-input-placeholder { /* WebKit browsers */ color:#999;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999;}input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#999;}input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#999;}textarea::-webkit-input-placeholder { /* WebKit browsers */ color:#999;}textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999;}textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#999;}textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#999;}页面调用地址组件
home.vue
<template> <div class="edit-address-wrapper">``` <div class="eac-ipt-box" @click="$refs.pcaSel.showAddr()">选择地址</div> <pca-sel :clearAddrData="true" ref="pcaSel" @getPostCode="getPostCode"></pca-sel> </div></template><script> import pcaSel from '@/components/address/pcaSelect' export default { components: { pcaSel }, data() { return {} }, methods: { // 获取选择地址结果 getPostCode(val) { if(val) { this.addr = val.province + ' '+ val.city + ' ' + val.district this.province = val.province this.city = val.city this.region = val.district this.postcode = val.postcode } } } }</script>entry-> js
import '@/assets/address/address.scss';