店铺列表店铺地址，选择经纬度调整

src/components/AddressSelect/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="center">
+    <el-select placeholder="请选择省" style="width: 100px" v-model="prov" @change="provChange">
+      <el-option
+        v-for="item in provList"
+        :key="item.regionId"
+        :label="item.regionName"
+        :value="item.regionName"
+      />
+    </el-select>
+    <el-select
+      placeholder="请选择市"
+      style="width: 100px"
+      :disabled="!prov"
+      v-model="city"
+      @change="cityChange"
+    >
+      <el-option
+        v-for="item in cityList"
+        :key="item.regionId"
+        :label="item.regionName"
+        :value="item.regionName"
+      />
+    </el-select>
+    <el-select
+      placeholder="请选择区"
+      style="width: 100px"
+      :disabled="!city"
+      v-model="area"
+      @change="areaChange"
+    >
+      <el-option
+        v-for="item in areaList"
+        :key="item.regionId"
+        :label="item.regionName"
+        :value="item.regionName"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { getRegion } from "@/api/common";
+
+const provList = ref<any[]>([]);
+const cityList = ref<any[]>([]);
+const areaList = ref<any[]>([]);
+
+const provCode = defineModel("provCode", {
+  type: String,
+  default: "",
+});
+
+// 监听省份code变化
+watch(
+  provCode,
+  async (n, o) => {
+    await getRegionAjax();
+    if (n && n !== undefined) {
+      provChange(n, true);
+
+      // 监听市区code变化
+      watch(
+        cityCode,
+        async (n, o) => {
+          if (n !== undefined && n) {
+            cityChange(n, true);
+          }
+        },
+        {
+          immediate: true, // 可选：初始化立即执行，验证是否监听到初始值
+        }
+      );
+    }
+  },
+  {
+    immediate: true, // 可选：初始化立即执行，验证是否监听到初始值
+  }
+);
+
+const cityCode = defineModel("cityCode", {
+  type: String,
+  default: "",
+});
+
+const areaCode = defineModel("areaCode", {
+  type: String,
+  default: "",
+});
+
+const prov = defineModel("prov", {
+  type: String,
+  default: "",
+});
+
+const city = defineModel("city", {
+  type: String,
+  default: "",
+});
+
+const area = defineModel("area", {
+  type: String,
+  default: "",
+});
+
+const wxProvinceCode = defineModel("wxProvinceCode", {
+  type: String,
+  default: "",
+});
+
+// 省份变化 e code isEcho是否回显
+function provChange(e: string, isEcho: boolean = false) {
+  console.log("provChange", e);
+  if (!isEcho) {
+    city.value = "";
+    area.value = "";
+    cityList.value = [];
+    areaList.value = [];
+  }
+  const provObj = provList.value.find((item) => item.regionName == e);
+  if (provObj && provObj.children) {
+    cityList.value = provObj.children;
+  }
+}
+
+// 市区变化
+function cityChange(e: string, isEcho: boolean = false) {
+  if (!isEcho) {
+    area.value = "";
+    areaList.value = [];
+  }
+  const cityObj = cityList.value.find((item) => item.regionName == e);
+
+  if (cityObj && cityObj.children) {
+    areaList.value = cityObj.children;
+    wxProvinceCode.value = cityObj.wxProvinceCode;
+  }
+}
+
+// 区变化
+function areaChange(e: string) {}
+
+// 获取省市区数据
+async function getRegionAjax() {
+  try {
+    const res = await getRegion();
+    provList.value = res;
+  } catch (error) {
+    console.error("获取省市区数据失败：", error);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.center {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+</style>