效果图：
所有代码：
<template>
<view class=”content”>
<!– 居住信息 –>
<view class=”item-address”>
<view class=”addressCot”>
<view class=”addressEdit”>
<view class=”texttitle”>选择地区 ：</view>
<view class=”dialog-address” @click=”btnChooseRegion”>{{select}}</view>
</view>
</view>
</view>
<!– 修改按钮 –>
<button class=”changeaddress” @click=”btnChangeAddress”>修改</button>
<!– 地址所在地区的选择框 –>
<view class=”view-region” v-if=”isDialog”>
<view class=”tips-top”>
<text class=”text-dizhi”>选择地址</text>
<text class=”text-true” @click=”btnSelectedData”>确定</text>
</view>
<!– 地址选择 –>
<scroll-view class=”scrollvuew-x” scroll-x=”true”>
<text :class=”isShengFenColor?’text-dzlan’:’text-dz'” v-if=”isShengFen”
@click=”btnProviceStr”>{{liveProvince}}</text>
<text class=”text-dzlan” v-if=”isShengFenC” @click=”btnProviceStr”>请选择</text>
<text :class=”isCityColor?’text-dzlan’:’text-dz'” v-if=”isCity” @click=”btnCityStr”>{{liveCity}}</text>
<text class=”text-dzlan” v-if=”isCityC” @click=”btnCityStr”>请选择</text>
<text :class=”isCountyColor?’text-dzlan’:’text-dz'” v-if=”isCounty” @click=”btnCountyStr”>
{{liveCounty}}</text>
<text class=”text-dzlan” v-if=”isCountyC” @click=”btnCountyStr”>请选择</text>
<text :class=”isRoadColor?’text-dzlan’:’text-dz'” v-if=”isRoad” @click=”btnRoadStr”>{{liveRoad}}</text>
<text class=”text-dzlan” v-if=”isRoadC” @click=”btnRoadStr”>请选择</text>
</scroll-view>
<view class=”dialog-line”></view>
<!– 地址选择列表 –>
<scroll-view class=”scrollvuew-y” scroll-y=”true”>
<text class=”text-list” v-if=”isShengFenList” v-for=”(item ,index) in provinceList”
@click=”btnClickSheng(index)”>{{item.name}}</text>
<text class=”text-list” v-if=”isCityList” v-for=”(item ,index) in cityList”
@click=”btnClickCity(index)”>{{item.name}}</text>
<text class=”text-list” v-if=”isCountyList” v-for=”(item ,index) in countyList”
@click=”btnClickCounty(index)”>{{item.name}}</text>
<text class=”text-list” v-if=”isRoadList” v-for=”(item ,index) in roadList”
@click=”btnClickRoad(index)”>{{item.name}}</text>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isDialog: false, //是否显示区域选择框
isShengFen: false, //是否选择了省份
isCity: false, //是否选择了城市
isCounty: false, //是否选择了县区
isRoad: false, //是否选择了街道
isShengFenList: true, //是否选择了省份 — list
isCityList: false, //是否选择了城市 — list
isCountyList: false, //是否选择了县区 — list
isRoadList: false, //是否选择了街道 — list
isShengFenC: true, //是否选择了省份 –请选择
isCityC: false, //是否选择了城市 –请选择
isCountyC: false, //是否选择了县区 –请选择
isRoadC: false, //是否选择了街道 –请选择
isShengFenColor: false, //是否选择了省份 — 颜色
isCityColor: false, //是否选择了城市 — 颜色
isCountyColor: false, //是否选择了县区 — 颜色
isRoadColor: false, //是否选择了街道 — 颜色
// multiIndex: [0, 0, 0, 0],
select: “请选择所在地区”,
liveProvince: “”, //省份
liveCity: “”, //城市
liveCounty: “”, //区县
liveRoad: “”, //街道
provinceList: [],
cityList: [],
countyList: [],
roadList: [],
}
},
onLoad(opins) {
// 开始省市区默认数据
var _this = this
},
methods: {
// 选择所在地区
btnChooseRegion: function() {
var _this = this
if (!_this.isDialog) {
_this.isDialog = true
// 获取省份
_this.getAddressP(“0”)
}
},
// 确定选择地区内容
btnSelectedData: function() {
var _this = this
_this.isDialog = false
_this.select = _this.liveProvince + _this.liveCity + _this.liveCounty + _this.liveRoad
if (!_this.select) {
_this.select = “请选择所在地区”
}
},
// 选择所在地 — 省份
btnClickSheng: function(index) {
var _this = this
// 选择省份，城市请选择文字显示、对应数据也显示出来
_this.isShengFenColor = false
_this.isCityColor = false
_this.isCountyColor = false
_this.isRoadColor = false
_this.isShengFen = true
_this.isCity = false
_this.isCounty = false
_this.isRoad = false
_this.isShengFenC = false
_this.isCityC = true
_this.isCountyC = false
_this.isRoadC = false
_this.isShengFenList = false
_this.isCityList = true
_this.isCountyList = false
_this.isRoadList = false
// 选中省份，将之后数据清空
_this.liveProvince = _this.provinceList[index].name
_this.liveCity = “”
_this.liveCounty = “”
_this.liveRoad = “”
var proviceCode = _this.provinceList[index].code
console.log(“省份ID = ” + proviceCode)
_this.getAddressCity(proviceCode)
},
// 选择所在地 — 城市
btnClickCity: function(index) {
var _this = this
// 选择城市，区县请选择文字显示、对应数据也显示出来
_this.isShengFenColor = false
_this.isCityColor = false
_this.isCountyColor = false
_this.isRoadColor = false
_this.isShengFen = true
_this.isCity = true
_this.isCounty = false
_this.isRoad = false
_this.isShengFenC = false
_this.isCityC = false
_this.isCountyC = true
_this.isRoadC = false
_this.isShengFenList = false
_this.isCityList = false
_this.isCountyList = true
_this.isRoadList = false
// 选中城市，将之后数据清空
_this.liveCity = _this.cityList[index].name
_this.liveCounty = “”
_this.liveRoad = “”
var cityCode = _this.cityList[index].code
console.log(“城市ID = ” + cityCode)
_this.getAddressCounty(cityCode)
},
// 选择所在地 — 区县
btnClickCounty: function(index) {
var _this = this
// 选择城市，区县请选择文字显示、对应数据也显示出来
_this.isShengFenColor = false
_this.isCityColor = false
_this.isCountyColor = false
_this.isRoadColor = false
_this.isShengFen = true
_this.isCity = true
_this.isCounty = true
_this.isRoad = false
_this.isShengFenC = false
_this.isCityC = false
_this.isCountyC = false
_this.isRoadC = true
_this.isShengFenList = false
_this.isCityList = false
_this.isCountyList = false
_this.isRoadList = true
// 选中区县，将之后数据清空
_this.liveCounty = _this.countyList[index].name
_this.liveRoad = “”
var countyCode = _this.countyList[index].code
console.log(“区县ID = ” + countyCode)
_this.getAddressRoad(countyCode)
},
// 选择所在地 — 街道
btnClickRoad: function(index) {
var _this = this
// 选择城市，区县请选择文字显示、对应数据也显示出来
_this.isShengFenColor = false
_this.isCityColor = false
_this.isCountyColor = false
_this.isRoadColor = true
_this.isShengFen = true
_this.isCity = true
_this.isCounty = true
_this.isRoad = true
_this.isShengFenC = false
_this.isCityC = false
_this.isCountyC = false
_this.isRoadC = false
// 选中区县，将之后数据清空
_this.liveRoad = _this.roadList[index].name
},
// 省份点击
btnProviceStr: function() {
var _this = this
_this.isShengFenColor = true
_this.isCityColor = false
_this.isCountyColor = false
_this.isRoadColor = false
_this.isShengFenList = true
_this.isCityList = false
_this.isCountyList = false
_this.isRoadList = false
},
// 城市点击
btnCityStr: function() {
var _this = this
_this.isShengFenColor = false
_this.isCityColor = true
_this.isCountyColor = false
_this.isRoadColor = false
_this.isShengFenList = false
_this.isCityList = true
_this.isCountyList = false
_this.isRoadList = false
},
// 区县点击
btnCountyStr: function() {
var _this = this
_this.isShengFenColor = false
_this.isCityColor = false
_this.isCountyColor = true
_this.isRoadColor = false
_this.isShengFenList = false
_this.isCityList = false
_this.isCountyList = true
_this.isRoadList = false
},
// 街道点击
btnRoadStr: function() {
var _this = this
_this.isShengFenColor = false
_this.isCityColor = false
_this.isCountyColor = false
_this.isRoadColor = true
_this.isShengFenList = false
_this.isCityList = false
_this.isCountyList = false
_this.isRoadList = true
},
//确定修改居住信息
btnChangeAddress: function() {
var _this = this
console.log(“地区 = ” + _this.select)
console.log(“省份 = ” + _this.liveProvince)
console.log(“城市 = ” + _this.liveCity)
console.log(“区县 = ” + _this.liveCounty)
console.log(“乡镇 = ” + _this.liveRoad)
},
// 获取省份 1111
getAddressP: function(govId) {
var _this = this
if (_this.$WebUrl.isContentNet()) {
_this.$Control.getAddress({
code: govId
}).then(res => {
console.log(“获取省份 1111 = ” + JSON.stringify(res.data))
if (res.data.code == 1000) {
_this.provinceList = res.data.data
} else {
_this.$Control.requestError(res.data)
}
}).catch(err => {
console.log(“err activity = ” + JSON.stringify(err))
})
} else {
uni.showToast({
title: “当前无网络，请检查您的网络链接”,
icon: “none”,
duration: 2000
})
}
},
// 城市city 2222
getAddressCity: function(proviceId) {
var _this = this
_this.$Control.getAddress({
code: proviceId
}).then(res => {
console.log(“城市city 2222 ” + JSON.stringify(res.data))
if (res.data.code == 1000) {
_this.cityList = res.data.data
} else {
_this.$Control.requestError(res.data)
}
})
},
// 区县 area 333333
getAddressCounty: function(cityId) {
var _this = this
_this.$Control.getAddress({
code: cityId
}).then(res => {
console.log(“区县 area 333333 = ” + JSON.stringify(res.data))
if (res.data.code == 1000) {
_this.countyList = res.data.data
} else {
_this.$Control.requestError(res.data)
}
})
},
// 街道 street 4444
getAddressRoad: function(areaId) {
var _this = this
_this.$Control.getAddress({
code: areaId
}).then(res => {
console.log(“街道 street 4444 = ” + JSON.stringify(res.data))
if (res.data.code == 1000) {
_this.roadList = res.data.data
} else {
_this.$Control.requestError(res.data)
}
})
}
}
}
</script>
<style>
.text-list {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
height: 50rpx;
margin: 5rpx;
color: #333333;
font-size: 30rpx;
}
.scrollvuew-y {
width: auto;
height: 400rpx;
margin-left: 40rpx;
margin-right: 40rpx;
margin-top: 22rpx;
margin-bottom: 22rpx;
}
.dialog-line {
width: 100%;
height: 1rpx;
background-color: #DDDDDD;
}
.text-dzlan {
color: #217EE9;
font-size: 30rpx;
padding-left: 15rpx;
padding-right: 15rpx;
}
.text-dz {
color: gray;
font-size: 30rpx;
padding-left: 15rpx;
padding-right: 15rpx;
}
.scrollvuew-x {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 70rpx;
margin-top: 10rpx;
white-space: nowrap;
}
/* 隐藏滑动条 */
scroll-view ::-webkit-scrollbar {
display: none;
}
.text-true {
color: #217EE9;
font-size: 30rpx;
padding: 20rpx;
margin-right: 20rpx;
}
.text-dizhi {
color: black;
font-size: 36rpx;
font-weight: bold;
margin-left: 30rpx;
flex-grow: 1;
}
.tips-top {
display: flex;
flex-direction: row;
align-items: center;
height: 60rpx;
margin-top: 15rpx;
}
.view-region {
display: flex;
flex-direction: column;
width: 100%;
height: 600rpx;
background-color: #FFFFFF;
position: absolute;
bottom: 0;
}
.dialog-address {
color: black;
font-size: 30rpx;
flex-grow: 1;
}
.changeaddress {
width: 90%;
color: #FFFFFF;
font-size: 36rpx;
background-color: #217EE9;
margin-top: 115rpx;
}
.inputcontent {
color: #333333;
font-size: 28rpx;
flex-grow: 1;
height: 80rpx;
}
.texttitle {
color: #000000;
font-size: 28rpx;
min-width: 150rpx;
}
.addressEdit2 {
display: flex;
flex-direction: row;
align-items: center;
width: 90%;
min-height: 92rpx;
}
.addressEdit {
display: flex;
flex-direction: row;
align-items: center;
width: 90%;
min-height: 92rpx;
border-bottom: 1rpx solid #DEDBDE;
}
.addressCot {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.item-address {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
min-height: 120rpx;
background-color: #FFFFFF;
border-radius: 8rpx;
margin-top: 30rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: #F0F4FC;
}
page {
background-color: #F0F4FC;
}
</style>
2.说明：
（1）.
（2）.
（3）.
3.网络请求数据JSON
整体项目地址：https://download.csdn.net/download/yyxhzdm/21059917
最后是交流公众号，大家可以关注一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119147.html
