uniapp三级地区城市联动，uni-data-picker

从后端返回给前端地区的数据

定义一个hooks，useRegion

export function useRegion() {
  const REGION_TREE = "region_tree";

  const getRegionTree = () => {
    return new Promise<[]>((resolve, reject) => {
      // 判断缓存中是否存在
       //这里要自己写getStorage，可以用vuex,pinna
      const data = getStorage(REGION_TREE,null);
      // 从服务端获取全部地区数据
      if (data) {
        resolve(JSON.parse(data));
      } else {
        getSysRegionTree()
          .then(response => {
            //这里要自己写setStorage
            setStorage(REGION_TREE, JSON.stringify(response.data));
            resolve(response.data);
          })
          .catch(error => {
            reject(error);
          });
      }
    });
  };



  return  {
      getRegionTree,
 
  }
}


export default useRegion;

然后在对应的地方，比如说是更新收货地址

//使用uni-data-picker,需要去uni-ui官网查看教程
<uni-forms-item label="地区" name="region">
	<uni-data-picker 
        // 这个map是映射，就是把label映射成text字段
	    :map="{text:'label',value:'value'}	"
	    :localdata="localData"
	    placeholder="请选择居住地址"
	    popup-title="请选择城市"
	    v-model="formData.region"
	    @change="handleChangeRegion"
	    :border="false"
	>
    </uni-data-picker>
</uni-forms-item>

import useRegion  from "@/hooks/useRegion";
const {getRegionTree }=useRegion();


const formData=reactive({
	region: [],
});

onLoad(()=>{
	getTreeData();
});


const localData=ref([]);
// 获取地区数据
const getTreeData=()=> {
	isLoading.value = true;
	getRegionTree()
		.then(regions => {
			// 格式化级联选择器数据
			localData.value = getOptions(regions);
		})
		.finally(() => (isLoading.value = false));
};

/**
 * 格式化级联选择器数据
 * @param {*} regions 地区数据
 */
const getOptions=(regions)=> {
	const options = [];
	for (const index in regions) {
		const item = regions[index];
		const children = item.children;
		const optionItem = {
			value: item.id,
			label: item.name
		};
		if (children) {
			optionItem.children = getOptions(children);
		}
		options.push(optionItem);
	}
	return options;
};
//当uni-data-picker发生改变的时候
const handleChangeRegion=(e)=>{
	formData.region=e.detail.value
	console.log("formData.region",formData.region)
};

//以下代码是假如获取到了一个人的地址信息，然后格式化一下,然后回显到页面上
// 生成默认的表单数据
const createFormData=(detail)=> {
	formData.region = createRegion(detail);
};

const createRegion=(detail)=> {
	return [
		{
			label: detail.provinceName,
			value: detail.provinceId
		},
		{
			label: detail.cityName,
			value: detail.cityId
		},
		{
			label: detail.regionName,
			value: detail.regionId
		}
	];
};

上面console.log输出的是

在提交的时候，如果需要省id，城市id，地域id就直接

formData.provinceId = formData.region[0].value;
formData.cityId = formData.region[1].value;
formData.regionId = formData.region[2].value;

最后成果就是