海豚精灵：https://www.whhtjl.com；优课GO：https://mgo.whhtjl.com
最近，《优课GO》与《河小象》已达成合作关系并签订协议，河小象公司将相关课程授权给“优课GO”平台，课程包含大礼包，用户购课成功后需要将大礼包寄送给用户，因此要求用户在“优课GO”平台购买课程前必须提供详细的物流信息，根据要求完成的效果图如下所示：
演示地址：https://mgo.whhtjl.com/coursedetails/4128
用户名：12345678910；密码：123456
重要代码如下所示：
按照上面的目录创建data.js，将省市区组装成以下格式的数据
在App.vue中加入以下代码
<script> import region from "./common/js/data"; export default { globalData: { BaseUrl: 'https://mgo.whhtjl.com' }, onLaunch: function() { uni.setStorageSync("region", region); }, onShow: function() { }, onHide: function() { } }; </script> <style> </style>按照上面的目录创建region-picker.vue，并写入以下代码
// 支持添加默认id参数 // 支持默认选项添加到省市区第一个选项 // 支持确认后再更新选项结果(非双向绑定) // 支持 省市区,省市,省 <template> <view class="flex cu-form-group"> <view class="flex align-center" style="width: 200rpx;">{{title_}}</view> <picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray.slice(0,column_)" range-key="region_name" > <view class="flex uni-input"> <text v-for="(item, index) in column_" :key="index" class="margin-right-sm"> {{multiArrayClone[index][multiIndexClone[index]].region_name}} <text v-if="index!==column_-1">-</text> </text> </view> </picker> </view> <!-- </view> --> </template> <script> export default { name: "c-region", props: { title_: { type: String, default: "省市区", }, multiIndex_: { //eg: multiIndex_="['14','14002','14002002']" type: Array, default: function () { return []; }, }, //自定义第一个选项的名称 custom_: { type: String, default: "", }, column_: { type: Number, default: 3, }, }, components: {}, data() { return { multiArray: [], multiArrayClone: [], multiIndex: [0, 0, 0], multiIndexClone: [0, 0, 0], region: uni.getStorageSync("region") || {}, }; }, onShow() {}, mounted() { if (!uni.getStorageSync("region")) { uni.showToast({ title: "初始化省市区失败", }); } }, onLoad() {}, computed: {}, watch: { custom_: { handler: function (nVal, oVal) { if (nVal) { this.region = this.setDefaultFirstOption(); } }, immediate: true, }, multiIndex_: { handler: function (nVal, oVal) { if (!nVal.length) { const column1 = this.objToArr(this.region); const column2 = this.objToArr(column1[0].child); const column3 = this.objToArr(column2[0].child); this.multiArray = [column1, column2, column3]; this.multiArrayClone = JSON.parse(JSON.stringify(this.multiArray)); return; } const provinceId = nVal[0]; const cityId = nVal[1]; const areaId = nVal[2]; const tempMultiArray = []; const column0 = this.objToArr(this.region); const index0 = column0.findIndex( (item) => item.region_id === provinceId ); const column1 = this.objToArr(column0[index0].child); const index1 = column1.findIndex((item) => item.region_id === cityId); tempMultiArray.push(column0); this.multiIndex[0] = index0; tempMultiArray.push(column1); this.multiIndex[1] = index1; const column2 = this.objToArr(tempMultiArray[1][index1].child); const index2 = column2.findIndex((item) => item.region_id === areaId); tempMultiArray.push(column2); this.multiIndex[2] = index2; this.multiArray = tempMultiArray; this.multiArrayClone = JSON.parse(JSON.stringify(this.multiArray)); this.multiIndexClone = JSON.parse(JSON.stringify(this.multiIndex)); }, immediate: true, }, }, methods: { objToArr(obj) { const arr = Object.values(obj); let defaultIndex; let list = arr.map((item, index) => { if (item.region_name === this.custom_) { defaultIndex = index; } return { region_id: item.region_id, region_name: item.region_name, child: item.child, }; }); if (defaultIndex !== undefined) { const temp = list[defaultIndex]; list.splice(defaultIndex, 1); list.unshift(temp); } return list; }, MultiChange(e) { this.multiIndexClone = e.detail.value; this.multiArrayClone = JSON.parse(JSON.stringify(this.multiArray)); const arr = []; const arrname=[]; for (let index = 0; index < this.column_; index++) { arr.push( this.multiArrayClone[index][this.multiIndexClone[index]].region_id ); arrname.push( this.multiArrayClone[index][this.multiIndexClone[index]].region_name ); } /* uni.showToast({ title: "值:" + arr+"；名字："+arrname, }); */ const address=[]; address.push(arr); address.push(arrname); this.$emit("selecteRegion_", address); // return arr; }, MultiColumnChange(e) { let data = { multiArray: this.multiArray, multiIndex: this.multiIndex, }; data.multiIndex[e.detail.column] = e.detail.value; const column = e.detail.column; // 移动某一列 if (column === 0) { //移动第一列 const row = data.multiIndex[0]; //移动第一列的某一行 data.multiArray[1] = this.objToArr(data.multiArray[0][row].child); data.multiArray[2] = this.objToArr(data.multiArray[1][0].child); data.multiIndex[1] = 0; data.multiIndex[2] = 0; } else if (column === 1) { //移动第二列 const row = data.multiIndex[1]; //移动第一列的某一行 data.multiArray[2] = this.objToArr(data.multiArray[1][row].child); data.multiIndex[2] = 0; } this.multiArray = [...data.multiArray]; this.multiIndex = [...data.multiIndex]; }, setDefaultFirstOption() { let region = uni.getStorageSync("region"); region["00"] = { region_id: "00", region_name: this.custom_, child: { "00": { region_id: "00", region_name: this.custom_, child: { "00": { region_id: "00", region_name: this.custom_, }, }, }, }, }; for (const provinceK in region) { if (region.hasOwnProperty(provinceK)) { const province = region[provinceK]; if (province.child) { province.child["00"] = { region_id: "00", region_name: this.custom_, child: { "00": { region_id: "00", region_name: this.custom_, }, }, }; } for (const cityK in province.child) { if (province.child.hasOwnProperty(cityK)) { const city = province.child[cityK]; if (city.child) { city.child["00"] = { region_id: "00", region_name: this.custom_, }; } } } } } return region; }, }, }; </script> <style> .cu-form-group { width: 100%; } </style>随便创建一个.vue文件作为显示页
<view class="mb-2"> <regionPicker :multiIndex_="selections2" custom_="请选择" @selecteRegion_="selecteRegion2" title_="请选择地址："/> </view> import regionPicker from '@/components/picker/region-picker.vue' export default { components: { regionPicker }, data() { return { selections2: ["18", "18001", "18001007"],//我这里给的默认值是湖北省武汉市洪山区 address:'' }; }, methods: { //获得物流地址 selecteRegion2(value) { this.selections2 = value[0]; this.address = value[1][0]+value[1][1]+value[1][2]; } } }由于data.js文件过大，我已将此文件上传到我的博客中，大家自行下载，见：https://download.csdn.net/download/qq_35393693/13008646
