更改了省市区的获取方式

src/views/Address.vue

@@ -186,8 +186,41 @@ const addressForm = reactive({
   isDefault: false
 })
 
-// 省市区选项数据（简化版，实际项目中应该从API获取）
+// 省市区选项数据（从API获取）
-const regionOptions = ref([
+const regionOptions = ref([])
+
+// 表单验证规则
+const addressRules = {
+  recipientName: [
+    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
+    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
+  ],
+  recipientPhone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+  ],
+  region: [
+    { required: true, message: '请选择省市区', trigger: 'change' }
+  ],
+  detailAddress: [
+    { required: true, message: '请输入详细地址', trigger: 'blur' },
+    { min: 5, max: 100, message: '详细地址长度在 5 到 100 个字符', trigger: 'blur' }
+  ]
+}
+
+// 方法
+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: '北京市',
@@ -250,28 +283,10 @@ const regionOptions = ref([
           }
         ]
       }
-])
-
-// 表单验证规则
-const addressRules = {
-  recipientName: [
-    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
-    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
-  ],
-  recipientPhone: [
-    { required: true, message: '请输入手机号', trigger: 'blur' },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-  ],
-  region: [
-    { required: true, message: '请选择省市区', trigger: 'change' }
-  ],
-  detailAddress: [
-    { required: true, message: '请输入详细地址', trigger: 'blur' },
-    { min: 5, max: 100, message: '详细地址长度在 5 到 100 个字符', trigger: 'blur' }
     ]
   }
+}
 
-// 方法
 const loadAddresses = async () => {
   try {
     loading.value = true
@@ -415,6 +430,7 @@ const resetForm = () => {
 
 // 生命周期
 onMounted(() => {
+  loadRegionOptions()
   loadAddresses()
 })
 </script>