写一套完整的uniapp省市区三级联动并返回地区code，用js地区数据

好的，以下是一套完整的uniapp省市区三级联动并返回地区code的代码，使用了JS地区数据： ```html <template> <view class="container"> <view class="select-container"> <picker mode="selector" :range="{{provinceList}}" :value="provinceIndex" @change="onProvinceChange"> <view class="select-item"> {{provinceList[provinceIndex]}} </view> </picker> <picker mode="selector" :range="{{cityList}}" :value="cityIndex" @change="onCityChange"> <view class="select-item"> {{cityList[cityIndex]}} </view> </picker> <picker mode="selector" :range="{{countyList}}" :value="countyIndex" @change="onCountyChange"> <view class="select-item"> {{countyList[countyIndex]}} </view> </picker> </view> <view class="result-container"> <text>当前选择的地区编码为：{{selectedCode}}</text> </view> </view> </template> <script> export default { data() { return { provinceList: [], // 省份列表 cityList: [], // 城市列表 countyList: [], // 区县列表 provinceIndex: 0, // 当前选中的省份下标 cityIndex: 0, // 当前选中的城市下标 countyIndex: 0, // 当前选中的区县下标 provinceCode: '', // 当前选中的省份编码 cityCode: '', // 当前选中的城市编码 countyCode: '', // 当前选中的区县编码 selectedCode: '', // 最终选择的地区编码 data: [] // 地区数据 } }, mounted() { // 获取地区数据 this.data = require('./area.js').default // 初始化省份列表 this.provinceList = this.data.map(item => item.name) // 初始化城市列表 this.cityList = this.data[this.provinceIndex].city.map(item => item.name) // 初始化区县列表 this.countyList = this.data[this.provinceIndex].city[this.cityIndex].area.map(item => item.name) // 初始化编码 this.provinceCode = this.data[this.provinceIndex].code this.cityCode = this.data[this.provinceIndex].city[this.cityIndex].code this.countyCode = this.data[this.provinceIndex].city[this.cityIndex].area[this.countyIndex].code this.selectedCode = this.countyCode }, methods: { // 省份改变时触发 onProvinceChange(e) { this.provinceIndex = e.detail.value this.cityIndex = 0 this.countyIndex = 0 this.cityList = this.data[this.provinceIndex].city.map(item => item.name) this.countyList = this.data[this.provinceIndex].city[this.cityIndex].area.map(item => item.name) this.provinceCode = this.data[this.provinceIndex].code this.cityCode = this.data[this.provinceIndex].city[this.cityIndex].code this.countyCode = this.data[this.provinceIndex].city[this.cityIndex].area[this.countyIndex].code this.selectedCode = this.countyCode }, // 城市改变时触发 onCityChange(e) { this.cityIndex = e.detail.value this.countyIndex = 0 this.countyList = this.data[this.provinceIndex].city[this.cityIndex].area.map(item => item.name) this.cityCode = this.data[this.provinceIndex].city[this.cityIndex].code this.countyCode = this.data[this.provinceIndex].city[this.cityIndex].area[this.countyIndex].code this.selectedCode = this.countyCode }, // 区县改变时触发 onCountyChange(e) { this.countyIndex = e.detail.value this.countyCode = this.data[this.provinceIndex].city[this.cityIndex].area[this.countyIndex].code this.selectedCode = this.countyCode } } } </script> <style> .container { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .select-container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .select-item { width: 200rpx; height: 80rpx; line-height: 80rpx; text-align: center; } .result-container { margin-top: 20px; font-size: 28rpx; } </style> ``` 需要注意的是，这里的地区数据是一个JS文件，需要单独引入，可以按照以下格式编写： ```javascript export default [ { "code": "110000", "name": "北京市", "city": [ { "code": "110100", "name": "北京市", "area": [ { "code": "110101", "name": "东城区" }, { "code": "110102", "name": "西城区" }, { "code": "110105", "name": "朝阳区" }, ... ] } ] }, { "code": "120000", "name": "天津市", "city": [ { "code": "120100", "name": "天津市", "area": [ { "code": "120101", "name": "和平区" }, { "code": "120102", "name": "河东区" }, { "code": "120103", "name": "河西区" }, ... ] } ] }, ... ] ``` 其中，每个省份包含一个code和一个name属性，以及一个city数组，每个城市包含一个code和一个name属性，以及一个area数组，每个区县包含一个code和一个name属性。