<template> <view> <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns" @confirm="confirm" keyName="name" @change="changeHandler" ></u-picker> </view> </template> <script> import Order from '@/request/order' import User from '@/request/user' export default { data(){ return { show: false, columns: [], cityInfo:[] } }, props:{ noSwitch:{ type:Boolean, default(){ return false } } }, methods:{ showArea() { uni.getSetting({ success: (res) => { // 已经授权位置不获取默认店铺 if(res.authSetting['scope.userLocation']) { User.getLocation((state, params) => { console.log("showArea, state:"+state+", params:" + JSON.stringify(params)); this.showAreaDialog(params); }); } else { console.log("showArea no location" ); this.showAreaDialog(); } } }) }, showAreaDialog(params) { Order.getShop(params).then(res => { const data = res.data.data; const two = data[0].children; const three = two[0].children; this.columns = [[...data], [...two], [...three]]; this.show = true; }) }, confirm(res) { const { value } = res; console.log(value) const areaName = { proviceName:value[0]&&value[0].name, cityName:value[1]&&value[1].name, disName:value[2]&&value[2].name } const shops = value[2].shops; this.show = false; // console.log(shops); uni.setStorageSync('shops', shops); uni.setStorageSync('areaName', areaName); if(this.noSwitch){ this.$emit('sendAreaInfo',{shops,areaName}) }else{ uni.navigateTo({ url: '/menuSubPackage/pages/areaSelect/areaSelect' }) } }, changeHandler(e) { const { columnIndex, index, picker = this.$refs.uPicker } = e if(columnIndex===0){ this.cityInfo = this.columns[0][index].children?this.columns[0][index].children:[] picker.setColumnValues(1, this.cityInfo) picker.setColumnValues(2, this.cityInfo[0].children?this.cityInfo[0].children:[]) } if(columnIndex===1){ picker.setColumnValues(2, this.cityInfo[index].children?this.cityInfo[index].children:[]) } }, } } </script> <style> </style>