uniapp开发实现城市选择组件

返回结果

{
	"data": ["北京市", "北京市", "东城区"],
	"code": "110101",
	"address": "北京市 北京市 东城区"
}

使用实例 uniapp 结合uivew实现城市选择

城市选择组件

<template>
	<div>
		<picker id="picker" mode="multiSelector" :range="range" :value="value" @columnchange="columnchange"
			@cancel="pickerCancel" @change="getcity">
			<slot></slot>
		</picker>
	</div>
</template>

<script>
	import {
		area
	} from './lisenh-cityPicker/area.js'
	export default {
		data() {
			return {
				selected: '',
				range: [
					[''],
					[''],
					['']
				],
				provinceCodes: [],
				cityCodes: [],
				citycode: '',
				value: [0, 0, 0],
				cityarr: [],
				checkboxs: [],
				address: ''
			};
		},
		methods: {
			pickerCancel() {
				console.log('pickerCancel')
			},
			queren() {
				uni.setStorageSync('citydata', JSON.stringify(this.checkboxs))
				uni.setStorageSync('cityarr', JSON.stringify(this.cityarr))
				uni.navigateBack({

				})
			},
			// 获取县区id
			getcode() {
				var that = this;
				if (that.cityarr[2]) {
					var obj = area.county_list
					Object.keys(obj).forEach(function(key) {
						// console.log(key, obj[key]);
						if (that.cityarr[2] == obj[key]) {
							that.citycode = key
						}
					});
				}
				console.log(that.cityarr)
				that.$emit('getdata', {
					data: that.cityarr,
					code: that.citycode,
					address: this.address,
				})
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			getcity(e) {
				console.log(e.detail.value)
				var cityselect = e.detail.value
				this.cityarr = []
				this.cityarr.push(this.range[0][cityselect[0]])
				this.cityarr.push(this.range[1][cityselect[1]])
				this.cityarr.push(this.range[2][cityselect[2]])
				this.address = this.range[0][cityselect[0]] + " " + this.range[1][cityselect[1]] + " " +
					this.range[2][cityselect[2]]
				this.getcode()
			},
			columnchange: function(e) {
				this.value[e.detail.column] = e.detail.value
				this.selected = ''
				if (0 == e.detail.column) {
					let provinceCode = this.provinceCodes[e.detail.value - 1]
					this.range[1] = ['']
					this.range[2] = ['']
					let cities = ['']
					this.cityCodes = []
					for (let cityCode in area.city_list) {
						if (Number(cityCode) >= Number(provinceCode) && Number(cityCode) <= Number(provinceCode) +
							9900) {
							cities.push(area.city_list[cityCode])
							this.cityCodes.push(cityCode)
						}
					}
					this.range[1] = cities
					this.value.splice(1, 1, 0)
					this.value.splice(2, 1, 0)
				} else if (1 == e.detail.column) {
					this.value[2] = 0
					let cityCode = this.cityCodes[e.detail.value - 1]
					this.range[2] = ['']
					let counties = ['']
					for (let countyCode in area.county_list) {
						if (Number(countyCode) >= Number(cityCode) && Number(countyCode) <= Number(cityCode) + 99) {
							counties.push(area.county_list[countyCode])
						}
					}
					this.range[2] = counties

					this.value.splice(2, 1, 0)
					console.log(this.value)
					console.log(this.cityCodes)
					console.log(this.range)
				}
				this.$forceUpdate()
				if (this.range[2][this.value[2]]) {
					this.selected = this.range[2][this.value[2]]
				} else if (this.range[1][this.value[1]]) {
					this.selected = this.range[1][this.value[1]]
				} else if (this.range[0][this.value[0]]) {
					this.selected = this.range[0][this.value[0]]
				}
			}
		},
		mounted: function() {
			for (let provinceCode in area.province_list) {
				this.range[0].push(area.province_list[provinceCode])
				this.provinceCodes.push(provinceCode)
			}
		}
	};
</script>

<style>
</style>

gitee

gitee