合并代码

src/views/Register.vue

@@ -67,6 +67,47 @@
             />
           </el-form-item>
           
+          <el-form-item prop="city">
+            <el-select
+              v-model="registerForm.city"
+              placeholder="请选择城市"
+              size="large"
+              clearable
+              @change="onCityChange"
+              style="width: 100%"
+            >
+              <template #prefix>
+                <el-icon><Location /></el-icon>
+              </template>
+              <el-option
+                v-for="city in cities"
+                :key="city"
+                :label="city"
+                :value="city"
+              />
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item prop="district_id">
+            <el-select
+              v-model="registerForm.district_id"
+              placeholder="请选择区域"
+              size="large"
+              clearable
+              :disabled="!registerForm.city"
+              style="width: 100%"
+            >
+              <template #prefix>
+                <el-icon><Location /></el-icon>
+              </template>
+              <el-option
+                v-for="district in filteredDistricts"
+                :key="district.id"
+                :label="district.district_name"
+                :value="district.id"
+              />
+            </el-select>
+          </el-form-item>
 
           
           <el-form-item prop="password">
@@ -172,7 +213,7 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Ticket } from '@element-plus/icons-vue'
+import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Ticket, Location } from '@element-plus/icons-vue'
 import Captcha from '@/components/Captcha.vue'
 
 const router = useRouter()
@@ -188,6 +229,8 @@ const registerForm = reactive({
   username: '',
   phone: '',
   registrationCode: '',
+  city: '',
+  district_id: '',
   password: '',
   confirmPassword: '',
   captcha: '',
@@ -203,6 +246,23 @@ const canSendSMS = computed(() => {
   return phoneRegex.test(registerForm.phone)
 })
 
+// 地区数据
+const regions = ref([])
+const cities = computed(() => {
+  const citySet = new Set()
+  regions.value.forEach(region => {
+    if (region.city_name) {
+      citySet.add(region.city_name)
+    }
+  })
+  return Array.from(citySet).sort()
+})
+
+const filteredDistricts = computed(() => {
+  if (!registerForm.city) return []
+  return regions.value.filter(region => region.city_name === registerForm.city)
+})
+
 // 自定义验证函数
 const validateUsername = (rule, value, callback) => {
   if (!value) {
@@ -269,7 +329,12 @@ const registerRules = {
     { required: true, message: '请输入短信验证码', trigger: 'blur' },
     { pattern: /^\d{6}$/, message: '短信验证码为6位数字', trigger: 'blur' }
   ],
-
+  city: [
+    { required: true, message: '请选择城市', trigger: 'change' }
+  ],
+  district_id: [
+    { required: true, message: '请选择区域', trigger: 'change' }
+  ],
   password: [{ validator: validatePassword, trigger: 'blur' }],
   confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
   captcha: [
@@ -326,6 +391,33 @@ const startCountdown = () => {
   }, 1000)
 }
 
+/**
+ * 获取地区数据
+ */
+const fetchRegions = async () => {
+  try {
+    const response = await fetch('/api/regions/zhejiang')
+    const result = await response.json()
+    
+    if (result.success) {
+      regions.value = result.data
+    } else {
+      ElMessage.error('获取地区数据失败')
+    }
+  } catch (error) {
+    console.error('获取地区数据失败:', error)
+    ElMessage.error('获取地区数据失败，请刷新页面重试')
+  }
+}
+
+/**
+ * 城市变化处理
+ */
+const onCityChange = () => {
+  // 清空区域选择
+  registerForm.district_id = ''
+}
+
 // 处理注册
 const handleRegister = async () => {
   if (!registerFormRef.value || !captchaRef.value) return
@@ -350,6 +442,8 @@ const handleRegister = async () => {
       username: registerForm.username,
       phone: registerForm.phone,
       registrationCode: registerForm.registrationCode,
+      city: registerForm.city,
+      district_id: registerForm.district_id,
       password: registerForm.password,
       smsCode: registerForm.smsCode,
       captchaId: captchaInfo.captchaId,
@@ -436,6 +530,9 @@ onMounted(() => {
     registerForm.registrationCode = inviteCode
     ElMessage.success('已自动填入邀请码')
   }
+  
+  // 获取地区数据
+  fetchRegions()
 })
 </script>