【uniapp】省市区三级联动手机端 picker，支付宝小程序省市区

原创

已于 2023-06-28 09:33:04 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-01-17 18:07:31 首次发布

本文介绍了一种在支付宝小程序中实现省市区选择的方法。通过使用picker组件并结合JavaScript进行数据处理，实现了用户友好的地区选择体验。文章还提供了一个兼容支付宝小程序的弹窗式省市区选择方案。

效果图

在这里插入图片描述

1. 支付宝小程序不兼容此方法

template

<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
	@change="pickerChange" @columnchange="pickerColumnchange" @cancel="close">
	<view class='areabox'>
		<p class='areatext'>所在地区</p>
		<u--input type="text" v-model="form.area" :disabled="true" border="none" inputAlign='right'
			placeholder="请选择"> </u--input>
	</view>
</picker>

javascript

export default {
   
   
		data() {
   
   
			return {
   
   
				oldpProvinceDataList:[],
				newProvinceDataList: [
				    [],
				    [],
				    []
				],
				placeshow:true,
				multiIndex: [0, 0, 0],
				show: false,
			},
		}
	},

	methods: {
   
   
// 省市区
			getregions(){
   
   
				this.$http.get(this.$api.regions).then(res => {
   
   
					this.columns = res.data;
					this.oldpProvinceDataList = res.data;
					console.log(this.oldpProvinceDataList,'省市区');
					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].children.length; i++) {
   
   
					    this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].children[i].name);
					}
					for (let i = 0; i < this.oldpProvinceDataList[0].children[0].children.length; i++) {
   
   
					    this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].children[0].children[i].name);
					}
				});
			},
			pickerChange(e) {
   
   
				this.placeshow = false
			    this.multiIndex = e.detail.value;
				
			    // 数组内的下标
			    // console.log(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]]}`
					
					this.form.area =  this.select;
				
				
			},
			pickerColumnchange(e) {
   
   
			    // 第几列滑动
			    // console.log(e.detail.column);
			    // 第几列滑动的下标
			    // console.log(e.detail.value)
			    // 第一列滑动
			    if (e.detail.column === 0) {
   
   
			        this.multiIndex[0] = e.detail.value
			        // console.log('第一列滑动');
			        // this.newProvinceDataList[1] = [];
			        this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].children.map((item,
			        index) => {
   
   
			            // console.log(item)
			            return item.name
			        })
			        // console.log(this.multiIndex)
			        if (this.oldpProvinceDataList[this.multiIndex[0]].children.length === 1) {
   
   
			            this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[0].children.map((
			                item,
			                index) => {
   
   
			                // console.log(item)
			                return item.name
			            })
			        } else {
   
   
			            this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[
			                1]].children.map((item, index) => {
   
   
			                // console.log(item)
			                return item.name
			            })
			        }
			        // 第一列滑动  第二列 和第三列 都变为第一个
			        this.multiIndex.splice(1, 1, 0)
			        this.multiIndex.splice(2, 1, 0)
			    }
			    // 第二列滑动
			    if (e.detail.column === 1) {
   
   
			        this.multiIndex[1] = e.detail.value
			        // console.log('第二列滑动');
			        this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]]
			            .children.map((item, index) => {
   
   
			                return item.name
			            })
			        // 第二列 滑动 第三列 变成第一个
			        this.multiIndex.splice(2, 1, 0)
			    }
			    // 第三列滑动
			    if (e.detail.column === 2) {
   
   
			        this.multiIndex[2] = e.detail.value
					
			    }
			},
			// 取消选择地区
			close(){
   
   
				this.placeshow = true;
			},
 }

数据格式为
在这里插入图片描述

2. uniapp使用picker获取省市区，兼容微信小程序推荐

uniapp使用picker获取省市区

<view class="SiresContent">
    <view class="siresname">收货地址：</view>
    <picker mode="region" :value="date" style="font-size: 30rpx; margin: 0 40rpx 0 0; color: #407bff"
      @change="bindTimeChange">
      <view class="uni-input" v-if="info.siteAddress">
        {
   
   {
   
    info.siteAddress.provinceName }}
        {
   
   {
   
    info.siteAddress.cityName }}
        {
   
   {
   
    info.siteAddress.areaName }}
      </view>
      <view class="uni-input" v-else>{
   
   {
   
    diqu }}</view>
    </picker>
  </view>

data(){
   
   
  return{
   
   
	    date: [],
	    diqu: '请选择省市区',
	    info:{
   
   
	         siteAddress: '',
	    }
 }
}
 methods: {
   
   
    // 获取省市区
    bindTimeChange(e) {
   
   
      console.log(e);
      let area = {
   
   
        provinceId: e.detail.code[0],
        provinceName: e.detail.value[0],
        cityId: e.detail.code[1],
        cityName: e.detail.value[1],
        areaId: e.detail.code[2],
        areaName: e.detail.value[2],
      };
      this.info.siteAddress = area;

      console.log('所选地区', area);
    },
   }

3. 支持支付宝小程序的省市区

template

<button @click="show=true">打开省市区弹窗</button>
	
		<u-popup :show="show" mode="bottom" >
			<view class="btn">
				 <u-row justify="space-between" customStyle="margin-bottom: 10px" >
					<u-col span="3" >
						<u-button type="text" text="取消" @click="show=false"></u-button>
					</u-col>
					<u-col span="3" >
						<u-button type="text" text="确定" @click="submit"></u-button>
					</u-col>
				</u-row>
			</view>
			<picker-view :value="multiIndex" @change="bindChange" :indicator-style="indicatorStyle">
				<picker-view-column>
					<view class="center" v-for="(item, index) in oldpProvinceDataList" :key="index">
						{
   
   {
   
    item.name }}
					</view>
				</picker-view-column>
				<picker-view-column v-if="oldpProvinceDataList[multiIndex[0]]">
					<view class="center" v-for="(item, index) in oldpProvinceDataList[multiIndex[0]].city" :key="index">
						{
   
   {
   
    item.name }}
					</view>
				</picker-view-column>
				<picker-view-column v-if="oldpProvinceDataList[multiIndex[0]]">
					<view class="center"
						v-for="(item, index) in oldpProvinceDataList[multiIndex[0]].city[multiIndex[1]].area" :key="index">
						{
   
   {
   
    item }}
					</view>
				</picker-view-column>
			</picker-view>
		</u-popup>

JavaScript

import provinceData from '@/static/area.js';
export default {
   
   
		data() {
   
   
			return {
   
   
				oldpProvinceDataList: provinceData.data,
				newProvinceDataList:[
					[],[],[]
				],
				multiIndex: [0,0,0],
				select:'选择省市区',
				
				addressData:{
   
   
					name:'',
					phone:'',
					address:''
				},
				binhao:'1',
				sheng:[],
				shi:[],
				xian:[],
				show:true,
				// #ifdef MP-ALIPAY
				indicatorStyle: `height: 60px;`,
				// #endif
				// #ifndef MP-ALIPAY
				indicatorStyle: `height: 45px;`,
				// #endif
			}
		},
methods:{
   
   
    submit(){
   
   
		this.show = false
		this.select = this.oldpProvinceDataList[this.multiIndex[0]].name + ' ' + this.oldpProvinceDataList[this.multiIndex[0]]
		.city[this.multiIndex[1]].name + ' ' + this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
		.area[this.multiIndex[2]]
        },
      //支付宝的选择值改变事件
			bindChange(e) {
   
   
				// 用于对比滑动的是哪一列数据
				const val = e.detail.value
				
				if(this.multiIndex[0] !== val[0]) {
   
   
					// 如果滑动的是第一列数据，让二三列恢复到0
					this.multiIndex = [val[0], 0, 0]
				} else if(this.multiIndex[1] !== val[1]) {
   
   
					// 滑动的是第二列数据
					this.multiIndex = [val[0], val[1], 0]
				} else {
   
   
					this.multiIndex = e.detail.value;
				}
				
			},
// 省市区确认事件
			pickerChange(e){
   
   
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(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(e){
   
   
				
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if(e.detail.column === 0){
   
   
					this.multiIndex[0] =  e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item,index)=>{
   
   
						
						return item.name
					})
					// console.log(this.multiIndex)
					if(this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1){
   
   
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,index)=>{
   
   
							// console.log(item)
							return item
						})
					}else{
   
   
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item,index)=>{
   
   
							// console.log(item)
							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
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item,index)=>{
   
   
						// console.log(item)
						return item
					})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
   
   
					this.multiIndex[2] =  e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
			}
}

style

picker-view {
   
   
	width: 750rpx;
	height: 600rpx;
	margin-top: 20rpx;
	padding-top: 20px;
	text-align: center;
}
.item {
   
   
	height:540px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.btn{
   
   
	.u-button{
   
   
		width: 49%;
	}
}

area.js 文件

let data = [
	{
   
   
		"name": "北京",
		"city": [{
   
   
			"name": "北京",
			"area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区",
				"平谷区",
				"怀柔区", "密云县", "延庆县"
			]
		}]
	},

	{
   
   
		"name": "天津",
		"city": [{
   
   
			"name": "天津",
			"area": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区",
				"宁河县", "静海县", "蓟  县"
			]
		}]
	},

	{
   
   
		"name": "河北",
		"city": [

			{
   
   
				"name": "石家庄",
				"area": ["长安区", "桥东区", "桥西区", "新华区", "郊  区", "井陉矿区", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县",
					"无极县",
					"平山县", "元氏县", "赵  县", "辛集市", "藁城区", "晋州市", "新乐市", "鹿泉市"
				]
			},

			{
   
   
				"name": "唐山",
				"area": ["路南区", "路北区", "古冶区", "开平区", "新  区", "丰润县", "滦  县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐海县", "遵化市", "丰南市",
					"迁安市"
				]
			},

			{
   
   
				"name": "秦皇岛",
				"area": ["海港区", "山海关区", "北戴河区", "青龙满族自治县", "昌黎县", "抚宁县", "卢龙县"]
			},

			{
   
   
				"name": "邯郸",
				"area": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉  县", "磁  县", "肥乡县", "永年县", "邱  县", "鸡泽县",
					"广平县", "馆陶县", "魏  县", "曲周县", "武安市"
				]
			},

			{
   
   
				"name": "邢台",
				"area": ["桥东区", "桥西区", "邢台县", "临城县", "内丘县", "柏乡县", "隆尧县", "任  县", "南和县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县",
					"威  县",
					"清河县", "临西县", "南宫市", "沙河市"
				]
			},

			{
   
   
				"name": "保定",
				"area": ["新市区", "北市区", "南市区", "满城县", "清苑县", "涞水县", "阜平县", "徐水县", "定兴县", "唐  县", "高阳县", "容城县", "涞源县", "望都县", "安新县",
					"易  县", "曲阳县", "蠡  县", "顺平县", "博野", "雄县", "涿州市", "定州市", "安国市", "高碑店市"
				]
			},

			{
   
   
				"name": "张家口",
				"area": ["桥东区", "桥西区", "宣化区", "下花园区", "宣化县", "张北县", "康保县", "沽源县", "尚义县", "蔚  县", "阳原县", "怀安县", "万全县", "怀来县",
					"涿鹿县",
					"赤城县", "崇礼县"
				]
			},

			{
   
   
				"name": "承德",
				"area": ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "平泉县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县"]
			},

			{
   
   
				"name": "沧州",
				"area": ["新华区", "运河区", "沧  县", "青  县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献  县", "孟村回族自治县", "泊头市", "任丘市",
					"黄骅市", "河间市"
				]
			},

			{
   
   
				"name": "廊坊",
				"area": ["安次区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "霸州市", "三河市"]
			},

			{
   
   
				"name": "衡水",
				"area": ["桃城区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景  县", "阜城县", "冀州市", "深州市"]
			}

		]
	},

	{
   
   
		"name": "山西",
		"city": [

			{
   
   
				"name": "太原",
				"area": ["小店区", "迎泽区", "杏花岭区", "尖草坪区", "万柏林区", "晋源区", "清徐县", "阳曲县", "娄烦县", "古交市"]
			},

			{
   
   
				"name": "大同",
				"area": ["城  区", "矿  区", "南郊区", "新荣区", "阳高县", "天镇县", "广灵县", "灵丘县", "浑源县", "左云县", "大同县"]
			},

			{
   
   
				"name": "阳泉",
				"area": ["城  区", "矿  区", "郊  区", "平定县", "盂  县"]
			},

			{
   
   
				"name": "长治",
				"area": ["城  区", "郊  区", "长治县", "襄垣县", "屯留县", "平顺县", "黎城县", "壶关县", "长子县", "武乡县", "沁  县", "沁源县", "潞城市"]
			},