// 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] } }) } } })