更改了省市区的获取方式

src/views/Address.vue

@@ -186,71 +186,8 @@ const addressForm = reactive({
   isDefault: false
 })
 
-// 省市区选项数据（简化版，实际项目中应该从API获取）
+// 省市区选项数据（从API获取）
-const regionOptions = ref([
+const regionOptions = ref([])
-  {
-    value: '北京市',
-    label: '北京市',
-    children: [
-      {
-        value: '北京市',
-        label: '北京市',
-        children: [
-          { value: '东城区', label: '东城区' },
-          { value: '西城区', label: '西城区' },
-          { value: '朝阳区', label: '朝阳区' },
-          { value: '丰台区', label: '丰台区' },
-          { value: '石景山区', label: '石景山区' },
-          { value: '海淀区', label: '海淀区' }
-        ]
-      }
-    ]
-  },
-  {
-    value: '上海市',
-    label: '上海市',
-    children: [
-      {
-        value: '上海市',
-        label: '上海市',
-        children: [
-          { value: '黄浦区', label: '黄浦区' },
-          { value: '徐汇区', label: '徐汇区' },
-          { value: '长宁区', label: '长宁区' },
-          { value: '静安区', label: '静安区' },
-          { value: '普陀区', label: '普陀区' },
-          { value: '虹口区', label: '虹口区' }
-        ]
-      }
-    ]
-  },
-  {
-    value: '广东省',
-    label: '广东省',
-    children: [
-      {
-        value: '广州市',
-        label: '广州市',
-        children: [
-          { value: '天河区', label: '天河区' },
-          { value: '越秀区', label: '越秀区' },
-          { value: '荔湾区', label: '荔湾区' },
-          { value: '海珠区', label: '海珠区' }
-        ]
-      },
-      {
-        value: '深圳市',
-        label: '深圳市',
-        children: [
-          { value: '福田区', label: '福田区' },
-          { value: '罗湖区', label: '罗湖区' },
-          { value: '南山区', label: '南山区' },
-          { value: '宝安区', label: '宝安区' }
-        ]
-      }
-    ]
-  }
-])
 
 // 表单验证规则
 const addressRules = {
@@ -272,6 +209,84 @@ const addressRules = {
 }
 
 // 方法
+const loadRegionOptions = async () => {
+  try {
+    const response = await api.get('/regions')
+    if (response.data.success) {
+      regionOptions.value = response.data.data.regions || []
+    } else {
+      throw new Error(response.data.message || '获取省市区数据失败')
+    }
+  } catch (error) {
+    ElMessage.error(error.message || '获取省市区数据失败')
+    // 如果API获取失败，使用默认数据
+    regionOptions.value = [
+      {
+        value: '北京市',
+        label: '北京市',
+        children: [
+          {
+            value: '北京市',
+            label: '北京市',
+            children: [
+              { value: '东城区', label: '东城区' },
+              { value: '西城区', label: '西城区' },
+              { value: '朝阳区', label: '朝阳区' },
+              { value: '丰台区', label: '丰台区' },
+              { value: '石景山区', label: '石景山区' },
+              { value: '海淀区', label: '海淀区' }
+            ]
+          }
+        ]
+      },
+      {
+        value: '上海市',
+        label: '上海市',
+        children: [
+          {
+            value: '上海市',
+            label: '上海市',
+            children: [
+              { value: '黄浦区', label: '黄浦区' },
+              { value: '徐汇区', label: '徐汇区' },
+              { value: '长宁区', label: '长宁区' },
+              { value: '静安区', label: '静安区' },
+              { value: '普陀区', label: '普陀区' },
+              { value: '虹口区', label: '虹口区' }
+            ]
+          }
+        ]
+      },
+      {
+        value: '广东省',
+        label: '广东省',
+        children: [
+          {
+            value: '广州市',
+            label: '广州市',
+            children: [
+              { value: '天河区', label: '天河区' },
+              { value: '越秀区', label: '越秀区' },
+              { value: '荔湾区', label: '荔湾区' },
+              { value: '海珠区', label: '海珠区' }
+            ]
+          },
+          {
+            value: '深圳市',
+            label: '深圳市',
+            children: [
+              { value: '福田区', label: '福田区' },
+              { value: '罗湖区', label: '罗湖区' },
+              { value: '南山区', label: '南山区' },
+              { value: '宝安区', label: '宝安区' }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}
+
 const loadAddresses = async () => {
   try {
     loading.value = true
@@ -415,6 +430,7 @@ const resetForm = () => {
 
 // 生命周期
 onMounted(() => {
+  loadRegionOptions()
   loadAddresses()
 })
 </script>