uni-app封装省市区下拉组件(后台获取数据)

一.后台数据格式

PROCINCE:[{itemName:'',itemValue:''}]

CITY:[{itemName:'',itemValue}]

AREA:[{itemName:'',itemValue}]

前端将地址数据缓存在了pinia中

前端主要使用picker进行勾选

二.代码

javascript 复制代码
<template>
	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="pickerIndex"
		mode="multiSelector">
		<slot></slot>
	</picker>
</template>

<script>
import { glPinia } from '@/pinia/index';
import { sysDictList } from '@/api/glApi';
import { getDictCacheKey } from "@/config/dictCacheKey";
const _glPinia = glPinia();
let provinceData = _glPinia.dictsData.PROCINCE;
let cityData = _glPinia.dictsData.CITY;
let areaData = _glPinia.dictsData.AREA;

export default {
	data() {
		return {
			array: [],
			pickerIndex: [0, 0, 0],
			value: [],	//由外部事件传入的值
			comType: 'normal'	//当前组件是初始状态还是修改状态
		};
	},

	created() {

	},

	methods: {
		//整个事件的起点,由外部事件调用
		initSelect(value) {
			this.value = value;
			if (!provinceData) {
				let dictsArr = getDictCacheKey();
				sysDictList(dictsArr).then(res => {
					if (res.code == 200) {
						_glPinia.setDictsData(res.data);
						provinceData = _glPinia.dictsData.PROCINCE;
						cityData = _glPinia.dictsData.CITY;
						areaData = _glPinia.dictsData.AREA;
						this.startPageEvent(value);
					}
				})
			} else {
				this.startPageEvent(value);
			}
		},

		startPageEvent(value) {
			if (Array.isArray(value) && value.length == 3 && value[0].length == 6) {
				this.comType = 'edit';
			} else {
				this.comType = 'normal';
			}

			let provinceCode = this.setProvinceData();
			let cityCode = this.setCityData(provinceCode, 'original');
			this.setAreaData(cityCode, 'original');
		},

		bindPickerChange(selectInfo) {
			let _index = selectInfo.detail.value;
			let forData = [0, 1, 2];
			let data = [];
			let code = [];
			forData.forEach(item => {
				code.push(this.array[item][_index[item]].value);
				data.push(this.array[item][_index[item]].name);
			})
			this.$emit('changeAddress', {
				data,
				code
			});
		},

		//列改变
		columnchange(columnInfo) {
			let _index = columnInfo.detail.value;
			let _column = columnInfo.detail.column;

			//省改变
			if (_column == 0) {
				this.pickerIndex[0] = _index;
				let provinceCode = this.array[0][_index].value.substr(0, 2);
				let cityCode = this.setCityData(provinceCode, 'select');
				this.setAreaData(cityCode, 'select');
			}

			//市改变
			if (_column == 1) {
				this.pickerIndex[1] = _index;
				let cityCode = this.array[1][_index].value.substr(0, 4);
				this.setAreaData(cityCode, 'select');
			}

			//区改变
			if (_column == 2) {
				this.pickerIndex[2] = _index;
			}
		},

		//设置省数据
		setProvinceData() {
			let _index;
			this.array[0] = provinceData.map(item => {
				return {
					name: item.itemName,
					value: item.itemValue
				}
			})
			if (this.comType == 'edit') {
				_index = this.array[0].findIndex(item => {
					return item.value == this.value[0];
				})
				this.pickerIndex[0] = _index;
			} else {
				this.pickerIndex[0] = 0;
			}

			return this.array[0][this.pickerIndex[0]].value.substr(0, 2);
		},

		//设置市数据,type区分是初始状态还是修改状态
		setCityData(provinceCode, type) {
			let _index, _data;
			_data = cityData.filter(item => {
				return item.itemValue.substr(0, 2) == provinceCode;
			})
			this.array[1] = _data.map(item => {
				return {
					name: item.itemName,
					value: item.itemValue
				}
			})
			if (type == 'original') {
				if (this.comType == 'edit') {
					_index = this.array[1].findIndex(item => {
						return item.value == this.value[1];
					})
					this.pickerIndex[1] = _index;
				} else {
					this.pickerIndex[1] = 0;
				}
			} else {
				this.pickerIndex[1] = 0;
			}


			return this.array[1][this.pickerIndex[1]].value.substr(0, 4);
		},

		//设置区数据,type区分是初始状态还是修改状态
		setAreaData(cityCode, type) {
			let _index, _data;
			_data = areaData.filter(item => {
				return item.itemValue.substr(0, 4) == cityCode;
			})
			this.array[2] = _data.map(item => {
				return {
					name: item.itemName,
					value: item.itemValue
				}
			})
			if (type == 'original') {
				if (this.comType == 'edit') {
					_index = this.array[2].findIndex(item => {
						return item.value == this.value[2];
					})
					this.pickerIndex[2] = _index;
				} else {
					this.pickerIndex[2] = 0;
				}
			} else {
				this.pickerIndex[2] = 0;
			}
		},
	}
};
</script>

<style></style>
相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app