Mina/components/city/city.js

// components/city/city.js
const cityData = require('../../data/city').provinceObj;
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		// 省编码
		provinceCode: {
			type: String,
			value: '320000',
		},
		// 市编码
		cityCode: {
			type: String,
			value: '320200'
		},
		// 区编码
		countryCode: {
			type: String,
			value: '320214'
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		// 城市列表
		cityList: [],
		// 地区列表
		areaList: [],
		// 省名
		provinceName: '',
		// 市名
		cityName: '',
		// 地区名
		countryName: '',
		cityData: []
	},
	ready() {
		// 通过传进来的省市区编码 动态渲染列表
		cityData.forEach((value, index) => {
			value.cityList.forEach(val => {
				if (val.areaList) {
					val.areaList.unshift({
						"countryCode": "0",
						"countryName": "所有地区",
					})
				} else {
					val.areaList = [
						{
							"countryCode": "0",
							"countryName": "所有地区",
						}
					]
				}
			})
		});
		this.setData({
			cityData
		});
		this.init(cityData)
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		init(cityData) {
			const that = this;
			// 获取城市列表 并设置默认值
			for (let index = 0; index < cityData.length; index++) {
				const element = cityData[index];
				const provinceCode = that.data.provinceCode || '320000'
				if (element.provinceCode === provinceCode) {
					const cityList = element.cityList;
					that.setData({
						cityList,
						provinceName: element.provinceName,
						provinceCode
					})
					// 获取区列表 并设置默认值
					for (let key = 0; key < cityList.length; key++) {
						const element = cityList[key];
						const cityCode = that.data.cityCode || '320200'
						if (element.cityCode === cityCode) {
							const areaList = element.areaList;
							that.setData({
								areaList,
								cityName: element.cityName,
								cityCode
							})
							// 获取区名默认值
							for (let i = 0; i < areaList.length; i++) {
								const element = areaList[i];
								const countryCode = that.data.countryCode || '320214'
								if (element.countryCode === countryCode) {
									that.setData({
										countryName: element.countryName,
										countryCode
									})
									break;
								}
							}
							break;
						}
					}
					break;
				}
			}
		},
		// 选择城市并且设置市列表与区列表 同时设置其他默认值
		chooseProvince(e) {
			const { index } = e.currentTarget.dataset;
			const { cityData } = this.data;
			this.setData({
				cityList: cityData[index].cityList,
				provinceCode: cityData[index].provinceCode,
				provinceName: cityData[index].provinceName,
				areaList: cityData[index].cityList[0].areaList,
				cityCode: cityData[index].cityList[0].cityCode,
				cityName: cityData[index].cityList[0].cityName,
				countryCode: cityData[index].cityList[0].areaList[0].countryCode,
				countryName: cityData[index].cityList[0].areaList[0].countryName
			})
		},
		// 选择城市并设置去列表  同时设置其他默认值
		chooseCity(e) {
			const { index } = e.currentTarget.dataset;
			const { cityList } = this.data;
			this.setData({
				areaList: cityList[index].areaList,
				cityCode: cityList[index].cityCode,
				cityName: cityList[index].cityName,
				countryCode: cityList[index].areaList[0].countryCode,
				countryName: cityList[index].areaList[0].countryName,
			})
		},
		// 选择区  并设置区名
		chooseArea(e) {
			const { index } = e.currentTarget.dataset;
			const { areaList } = this.data;
			this.setData({
				countryCode: areaList[index].countryCode,
				countryName: areaList[index].countryName
			})
		},
		// 提交获取的值
		commit() {
			this.triggerEvent('commit', { region: { code: [this.data.provinceCode, this.data.cityCode, this.data.countryCode], value: [this.data.provinceName, this.data.cityName, this.data.countryName] } })
		}
	}
})