业务代理商-三级区域选择

pages.json

@@ -121,7 +121,8 @@
   "easycom": {
     "autoscan": true,
     "custom": {
-      "^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue"
+      "^custom-nav-bar": "@/components/custom-nav-bar/custom-nav-bar.vue",
+      "^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue"
     }
   }
 }

pages/agents/agents.vue

@@ -44,12 +44,61 @@
           />
         </view>
 
-        <!-- 服务区域选择 -->
+        <!-- 服务区域选择 - 三级选择 -->
         <view class="form-item">
           <view class="form-label">请选择您的服务区域</view>
-          <view class="form-selector" @click="selectServiceArea">
+          
-            <text class="selector-text">{{ formData.serviceArea || '请选择服务区域' }}</text>
+          <!-- 省份选择 -->
-            <text class="arrow-icon">></text>
+          <view class="region-picker-item">
+            <view class="picker-label">省份</view>
+            <picker 
+              :range="provinceList" 
+              range-key="name"
+              @change="onProvinceChange"
+              :value="selectedProvinceIndex"
+            >
+              <view class="picker-display">
+                <text class="picker-text">{{ selectedProvince ? selectedProvince.name : '请选择省份' }}</text>
+                <text class="picker-arrow">▼</text>
+              </view>
+            </picker>
+          </view>
+
+          <!-- 城市选择 -->
+          <view class="region-picker-item" v-if="selectedProvince">
+            <view class="picker-label">城市</view>
+            <picker 
+              :range="cityList" 
+              range-key="name"
+              @change="onCityChange"
+              :value="selectedCityIndex"
+            >
+              <view class="picker-display">
+                <text class="picker-text">{{ selectedCity ? selectedCity.name : '请选择城市' }}</text>
+                <text class="picker-arrow">▼</text>
+              </view>
+            </picker>
+          </view>
+
+          <!-- 区县选择 -->
+          <view class="region-picker-item" v-if="selectedCity">
+            <view class="picker-label">区县</view>
+            <picker 
+              :range="districtList" 
+              range-key="name"
+              @change="onDistrictChange"
+              :value="selectedDistrictIndex"
+            >
+              <view class="picker-display">
+                <text class="picker-text">{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }}</text>
+                <text class="picker-arrow">▼</text>
+              </view>
+            </picker>
+          </view>
+
+          <!-- 显示完整地址 -->
+          <view class="selected-address" v-if="selectedDistrict">
+            <text class="address-text">已选择: {{ selectedProvince.name }} {{ selectedCity.name }} {{ selectedDistrict.name }}</text>
           </view>
         </view>
 
@@ -107,9 +156,13 @@
 <script>
 import commonEnum from '../../enum/commonEnum'
 import { applyForAgent, getAgentAgreement, getServiceAreas } from '@/api/agents'
+import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
 
 export default {
   name: 'AgentsPage',
+  components: {
+    uniDataPicker
+  },
   computed: {
     commonEnum() {
       return commonEnum
@@ -119,7 +172,7 @@ export default {
         this.formData.name &&
         this.formData.phone &&
         this.formData.idCard &&
-        this.formData.serviceArea &&
+        this.selectedDistrict && // 必须选择到区县级别
         this.formData.detailAddress &&
         this.formData.agreed &&
         !this.submitting
@@ -130,6 +183,10 @@ export default {
     // 页面加载时获取服务区域列表和协议内容
     this.loadServiceAreas()
     this.loadAgreement()
+    this.loadRegionTreeData()
+    
+    // 添加测试数据
+    console.log('页面加载完成，三级选择器已初始化')
   },
   data() {
     return {
@@ -137,7 +194,7 @@ export default {
         name: '张珊珊',
         phone: '',
         idCard: '',
-        serviceArea: '福建省宁德市福鼎市',
+        serviceArea: '',
         detailAddress: '太姥山镇秦屿大道2号',
         agreed: true,
       },
@@ -147,6 +204,20 @@ export default {
       showAgreementModal: false,
       // 区域ID映射
       areaIdMap: {},
+      // 三级选择相关数据
+      regionTreeData: [],
+      // 省份相关
+      provinceList: [],
+      selectedProvince: null,
+      selectedProvinceIndex: -1,
+      // 城市相关
+      cityList: [],
+      selectedCity: null,
+      selectedCityIndex: -1,
+      // 区县相关
+      districtList: [],
+      selectedDistrict: null,
+      selectedDistrictIndex: -1,
     }
   },
   methods: {
@@ -213,24 +284,6 @@ export default {
       }
     },
 
-    // 选择服务区域
-    selectServiceArea() {
-      if (this.serviceAreas.length === 0) {
-        uni.showToast({
-          title: '暂无可用区域',
-          icon: 'none',
-        })
-        return
-      }
-
-      uni.showActionSheet({
-        itemList: this.serviceAreas,
-        success: res => {
-          this.formData.serviceArea = this.serviceAreas[res.tapIndex]
-        },
-      })
-    },
-
     // 切换协议同意状态
     toggleAgreement() {
       this.formData.agreed = !this.formData.agreed
@@ -329,10 +382,10 @@ export default {
 
       try {
         // 构建请求数据
-        const regionId = this.areaIdMap[this.formData.serviceArea]
+        const regionId = this.getSelectedRegionId()
         if (!regionId) {
           uni.showToast({
-            title: '无效的服务区域，请重新选择',
+            title: '请选择服务区域',
             icon: 'none',
           })
           return
@@ -347,7 +400,13 @@ export default {
         }
 
         console.log('提交代理商申请:', requestData)
-        console.log('选择的区域:', this.formData.serviceArea, '对应ID:', regionId)
+        console.log('三级选择信息:', {
+          省份: this.selectedProvince?.name,
+          城市: this.selectedCity?.name,
+          区县: this.selectedDistrict?.name,
+          完整地址: this.formData.serviceArea,
+          区域ID: regionId
+        })
 
         const response = await applyForAgent(requestData)
 
@@ -389,6 +448,147 @@ export default {
         detailAddress: '',
         agreed: false,
       }
+      // 重置三级选择
+      this.selectedProvince = null
+      this.selectedProvinceIndex = -1
+      this.selectedCity = null
+      this.selectedCityIndex = -1
+      this.selectedDistrict = null
+      this.selectedDistrictIndex = -1
+      this.cityList = []
+      this.districtList = []
+    },
+
+    // 三级选择相关方法
+    async loadRegionTreeData() {
+      try {
+        const response = await getServiceAreas()
+        if (response.code === 200 && response.data) {
+          this.regionTreeData = response.data
+          console.log('获取到的区域树形数据:', this.regionTreeData)
+        }
+      } catch (error) {
+        console.error('获取区域树形数据失败:', error)
+        // 使用默认的树形数据
+        this.regionTreeData = [
+          {
+            id: 1,
+            name: '福建省',
+            children: [
+              {
+                id: 2,
+                name: '宁德市',
+                children: [
+                  { id: 8, name: '福鼎市' },
+                  { id: 9, name: '霞浦县' },
+                  { id: 10, name: '古田县' },
+                  { id: 11, name: '屏南县' }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+      
+      // 初始化三级选择数据
+      this.initThreeLevelData()
+    },
+
+    // 初始化三级选择数据
+    initThreeLevelData() {
+      // 初始化省份列表
+      this.provinceList = this.regionTreeData
+      
+      // 初始化 areaIdMap
+      this.initAreaIdMap()
+    },
+
+    // 初始化区域ID映射
+    initAreaIdMap() {
+      const idMap = {}
+      const extractIds = (regions) => {
+        regions.forEach(region => {
+          idMap[region.name] = region.id
+          if (region.children && region.children.length > 0) {
+            extractIds(region.children)
+          }
+        })
+      }
+      extractIds(this.regionTreeData)
+      this.areaIdMap = idMap
+      console.log('区域ID映射:', this.areaIdMap)
+    },
+
+    // 省份选择事件
+    onProvinceChange(e) {
+      const index = e.detail.value
+      this.selectedProvinceIndex = index
+      this.selectedProvince = this.provinceList[index]
+      
+      // 重置城市和区县选择
+      this.selectedCity = null
+      this.selectedCityIndex = -1
+      this.selectedDistrict = null
+      this.selectedDistrictIndex = -1
+      
+      // 更新城市列表
+      this.cityList = this.selectedProvince.children || []
+      this.districtList = []
+      
+      // 更新服务区域
+      this.updateServiceArea()
+    },
+
+    // 城市选择事件
+    onCityChange(e) {
+      const index = e.detail.value
+      this.selectedCityIndex = index
+      this.selectedCity = this.cityList[index]
+      
+      // 重置区县选择
+      this.selectedDistrict = null
+      this.selectedDistrictIndex = -1
+      
+      // 更新区县列表
+      this.districtList = this.selectedCity.children || []
+      
+      // 更新服务区域
+      this.updateServiceArea()
+    },
+
+    // 区县选择事件
+    onDistrictChange(e) {
+      const index = e.detail.value
+      this.selectedDistrictIndex = index
+      this.selectedDistrict = this.districtList[index]
+      
+      // 更新服务区域
+      this.updateServiceArea()
+    },
+
+    // 更新服务区域
+    updateServiceArea() {
+      if (this.selectedProvince && this.selectedCity && this.selectedDistrict) {
+        this.formData.serviceArea = `${this.selectedProvince.name}${this.selectedCity.name}${this.selectedDistrict.name}`
+      } else if (this.selectedProvince && this.selectedCity) {
+        this.formData.serviceArea = `${this.selectedProvince.name}${this.selectedCity.name}`
+      } else if (this.selectedProvince) {
+        this.formData.serviceArea = this.selectedProvince.name
+      } else {
+        this.formData.serviceArea = ''
+      }
+    },
+
+    // 获取选中区域的ID
+    getSelectedRegionId() {
+      if (this.selectedDistrict) {
+        return this.selectedDistrict.id
+      } else if (this.selectedCity) {
+        return this.selectedCity.id
+      } else if (this.selectedProvince) {
+        return this.selectedProvince.id
+      }
+      return null
     },
   },
 }
@@ -635,4 +835,72 @@ export default {
     }
   }
 }
+
+.debug-info {
+  background: #f0f0f0;
+  padding: 10rpx;
+  margin-bottom: 10rpx;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #666;
+  
+  text {
+    display: block;
+    margin-bottom: 5rpx;
+  }
+}
+
+// 三级选择器样式
+.region-picker-item {
+  margin-bottom: 20rpx;
+  
+  .picker-label {
+    font-size: 26rpx;
+    color: #666;
+    margin-bottom: 10rpx;
+    font-weight: 500;
+  }
+  
+  .picker-display {
+    height: 80rpx;
+    background: #ffffff;
+    border: 2rpx solid #e8e8e8;
+    border-radius: 12rpx;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    
+    &:active {
+      background: #f5f5f5;
+    }
+    
+    .picker-text {
+      font-size: 28rpx;
+      color: #333;
+      flex: 1;
+    }
+    
+    .picker-arrow {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+}
+
+.selected-address {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+  border: 2rpx solid #e9ecef;
+  
+  .address-text {
+    font-size: 28rpx;
+    color: #495057;
+    font-weight: 500;
+  }
+}
 </style>