共计 4505 个字符，预计需要花费 12 分钟才能阅读完成。
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';正文完