效果图：
1.vue主要代码
template：
<template>
<view class="content">
<!-- 居住信息 -->
<view class="item-address">
<view class="addressCot">
<view class="addressEdit">
<view class="texttitle">选择地区 ：</view>
<view class="input" type="text" placeholder="请选择地区">
<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
@change="pickerChange" @columnchange="pickerColumnchange">
<view class="">{{select}}</view>
</picker>
</view>
</view>
<view class="addressEdit">
<view class="texttitle">居住村(小区) ：</view>
<input class="inputcontent" v-model="xiaoqu" placeholder="请填写居住村(小区) 名称" />
</view>
<view class="addressEdit2">
<view class="texttitle">详细地址 ：</view>
<input class="inputcontent" v-model="details" placeholder="请填写详细地址(门牌号)" />
</view>
</view>
</view>
<!-- 修改按钮 -->
<button class="changeaddress" @click="btnChangeAddress">修改</button>
</view>
</template>
2.script
<script>
import provinceData from "../../provinceAndCity.js"
export default {
data() {
return {
oldpProvinceDataList: provinceData.data,
newProvinceDataList: [
[],
[],
[]
],
multiIndex: [0, 0, 0],
select: "请选择所在地区",
xiaoqu: "",
details: "",
changeCardNo: "",
changeParticpantId: ""
}
},
onLoad(opins) {
// 开始省市区默认数据
var _this = this
console.log("参与人身份证号码 curCardNo = " + opins.caseCardNo)
console.log("参与人ID pantId = " + opins.caseParticipantId)
_this.changeCardNo = opins.caseCardNo
_this.changeParticpantId = opins.caseParticipantId
// 省
for (let i = 0; i < _this.oldpProvinceDataList.length; i++) {
_this.newProvinceDataList[0].push(_this.oldpProvinceDataList[i].name)
}
// 市
for (let i = 0; i < _this.oldpProvinceDataList[0].city.length; i++) {
_this.newProvinceDataList[1].push(_this.oldpProvinceDataList[0].city[i].name)
}
// 区县
for (let i = 0; i < _this.oldpProvinceDataList[0].city[0].area.length; i++) {
_this.newProvinceDataList[2].push(_this.oldpProvinceDataList[0].city[0].area[i])
}
},
methods: {
// 省市区确认事件
pickerChange: function(e) {
var _this = this
_this.multiIndex = e.detail.value
// 数组内的下标
console.log(JSON.stringify(_this.multiIndex))
// 获取省市区总数据
console.log(_this.newProvinceDataList[0][_this.multiIndex[0]])
console.log(_this.newProvinceDataList[1][_this.multiIndex[1]])
console.log(_this.newProvinceDataList[2][_this.multiIndex[2]])
_this.select =
_this.newProvinceDataList[0][_this.multiIndex[0]] +
_this.newProvinceDataList[1][_this.multiIndex[1]] +
_this.newProvinceDataList[2][_this.multiIndex[2]]
},
// 每列滑动的监听
pickerColumnchange: function(e) {
var _this = this
// 第几列滑动
console.log("第几列滑动 = " + JSON.stringify(e.detail.column))
// 第几列滑动选中的下标
console.log("第几列滑动选中的下标 = " + JSON.stringify(e.detail.value))
// 第一列滑动
if (e.detail.column === 0) {
_this.multiIndex[0] = e.detail.value
// 第二列更新相应的数据
_this.newProvinceDataList[1] = _this.oldpProvinceDataList[_this.multiIndex[0]].city.map((item,
index) => {
return item.name
})
if (_this.oldpProvinceDataList[_this.multiIndex[0]].city.length === 1) {
_this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[0].area
.map((
item,
index) => {
return item
})
} else {
_this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[_this
.multiIndex[
1]].area.map((item, index) => {
return item
})
}
// 第一列滑动 第二列 和第三列 都变为第一个
_this.multiIndex.splice(1, 1, 0)
_this.multiIndex.splice(2, 1, 0)
}
// 第二列滑动
if (e.detail.column === 1) {
_this.multiIndex[1] = e.detail.value
_this.newProvinceDataList[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].city[_this
.multiIndex[
1]].area.map((item, index) => {
return item
})
// 第二列 滑动 第三列 变成第一个
_this.multiIndex.splice(2, 1, 0)
}
// 第三列滑动
if (e.detail.column === 2) {
_this.multiIndex[2] = e.detail.value
}
},
//确定修改居住信息
btnChangeAddress: function() {
var _this = this
console.log("地区 = " + _this.select)
console.log("居住村（小区） = " + _this.xiaoqu)
console.log("详细地址 = " + _this.details)
// uni.navigateBack({
// delta: 1
// })
},
// 修改参与人居住地址
changeCaseAddressP:function(){
var _this = this
if (_this.$WebUrl.isContentNet()) {
_this.$Control.getParticipantList({
cardNo:_this.changeCardNo,
participantId:_this.changeParticpantId,
liveProvince:"",
liveCity:"",
liveCounty:"",
liveRoad:"",
liveCun:"",
liveGroup:""
}).then(res => {
console.log("修改参与人居住地址 res = " + JSON.stringify(res.data))
if (res.data.code == 1000) {
} else if (res.data.code == 1002) { //跳转登录
uni.reLaunch({
url: "../loginActivity/loginActivity"
})
} else {
_this.$Control.requestError(res.data)
}
}).catch(err => {
console.log("err activity = " + JSON.stringify(err))
})
} else {
uni.showToast({
title: "当前无网络，请检查您的网络链接",
icon: "none",
duration: 2000
})
}
},
}
}
</script>
3.style
<style>
.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;
}
.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>
4.省市区本地数据provinceAndCity.js
调用：
一些数据结构（完整代码在demo中）
最后是交流公众号，大家可以关注一下
