[修改]代理-注册-选择区域省市区

src/views/AgentLogin.vue

@@ -96,25 +96,34 @@
         label-width="100px"
       >
         <el-form-item label="选择区域" prop="region_id">
-          <el-select
+<!--          <el-select-->
-            v-model="applyForm.region_id"
+<!--            v-model="applyForm.region_id"-->
-            placeholder="请选择代理区域"
+<!--            placeholder="请选择代理区域"-->
-            style="width: 100%"
+<!--            style="width: 100%"-->
-            filterable
+<!--            filterable-->
-          >
+<!--          >-->
-            <el-option-group
+<!--            <el-option-group-->
-              v-for="city in groupedRegions"
+<!--              v-for="city in groupedRegions"-->
-              :key="city.name"
+<!--              :key="city.name"-->
-              :label="city.name"
+<!--              :label="city.name"-->
-            >
+<!--            >-->
-              <el-option
+<!--              <el-option-->
-                v-for="region in city.districts"
+<!--                v-for="region in city.districts"-->
-                :key="region.id"
+<!--                :key="region.id"-->
-                :label="region.district_name"
+<!--                :label="region.district_name"-->
-                :value="region.id"
+<!--                :value="region.id"-->
-              />
+<!--              />-->
-            </el-option-group>
+<!--            </el-option-group>-->
-          </el-select>
+<!--          </el-select>-->
+
+          <el-cascader v-model="applyForm.region_id"
+                       popper-class="custom-cascader"
+                       :show-all-levels="false"
+                       placeholder="请选择代理区域"
+                       :options="regions"
+                       :props="regionsProp"
+                       clearable />
+
         </el-form-item>
         
         <el-form-item label="真实姓名" prop="real_name">
@@ -208,6 +217,13 @@ const applyRules = {
   ]
 }
 
+// 设置省市区级联选择器配置
+const regionsProp = {
+  value: 'code',
+  label: 'label',
+  children: 'children'
+}
+
 // 计算属性
 const groupedRegions = computed(() => {
   const grouped = {}
@@ -226,7 +242,7 @@ const groupedRegions = computed(() => {
 // 方法
 const loadRegions = async () => {
   try {
-    const { data } = await api.get('/agents/regions')
+    const { data } = await api.get('/regions/provinces')
     regions.value = data.data
   } catch (error) {
     ElMessage.error('加载区域列表失败')
@@ -262,11 +278,12 @@ const handleLogin = async () => {
 
 const handleApply = async () => {
   if (!applyFormRef.value) return
-  
   try {
     await applyFormRef.value.validate()
     applyLoading.value = true
-    
+
+    // 将区id设置为最终id
+    applyForm.region_id = applyForm.region_id[2]
     const { data } = await api.post('/agents/apply', applyForm)
     
     if (data.success) {
@@ -294,7 +311,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* 使用与主登录页面一致的样式 */
 .agent-login-page {
   min-height: 100vh;
@@ -505,4 +522,14 @@ onMounted(() => {
     padding: 30px 20px;
   }
 }
+</style>
+
+<style>
+.custom-cascader{
+  .el-cascader-panel{
+    .el-cascader-menu{
+      min-width: 100px;
+    }
+  }
+}
 </style>