导入uv-ui,优化申请代理地址三级选择器，优化申请代理界面布局

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@climblee/uv-ui": "^1.1.20",
         "@dcloudio/uni-app": "3.0.0-4070520250711001",
         "qrcode": "^1.5.4",
         "uview-ui": "^1.8.8",
@@ -281,6 +282,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@climblee/uv-ui": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@climblee/uv-ui/-/uv-ui-1.1.20.tgz",
+      "integrity": "sha512-jkyesHJsPJkF4Nap9ZmG1/ibKlxXA5M8+ntqKXwwloIsYSYL5SOKb0gyPj17aBOU1PkJpmeiZ8PwnTolhK2/HA==",
+      "license": "ISC"
+    },
     "node_modules/@dcloudio/types": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/@dcloudio/types/-/types-3.4.19.tgz",

package.json

@@ -24,6 +24,7 @@
     "prettier": "^3.0.0"
   },
   "dependencies": {
+    "@climblee/uv-ui": "^1.1.20",
     "@dcloudio/uni-app": "3.0.0-4070520250711001",
     "qrcode": "^1.5.4",
     "uview-ui": "^1.8.8",

pages.json

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

pages/agents/agents.vue

@@ -8,7 +8,7 @@
       title=""
     ></custom-nav-bar>
     <view class="header">
-      <image :src="commonEnum.AGENT" class="agent-background" mode="aspectFill"></image>
+      <image :src="commonEnum.AGENT" class="agent-background" mode="widthFix"></image>
     </view>
 
     <!-- 主要内容区域 -->
@@ -52,68 +52,23 @@
         <!-- 服务区域选择 - 三级选择 -->
         <view class="form-item">
           <view class="form-label">请选择您的服务区域</view>
-
+          <view class="region-selector" @click="open">
-          <!-- 省份选择 -->
+            <view class="selector-display">
-          <view class="region-picker-item">
+              <text class="selector-text">
-            <view class="picker-label">省份</view>
+                {{ formData.serviceArea || '请选择服务区域' }}
-            <picker
+              </text>
-              :range="provinceList"
+              <text class="selector-arrow">></text>
-              :value="selectedProvinceIndex"
+            </view>
-              range-key="name"
+          </view>
-              @change="onProvinceChange"
+          <uv-picker
+            ref="picker"
+            :columns="addressList"
+            :loading="loading"
+            keyName="name"
+            @change="change"
+            @confirm="confirm"
           >
-              <view class="picker-display">
+          </uv-picker>
-                <text class="picker-text"
-                  >{{ selectedProvince ? selectedProvince.name : '请选择省份' }}
-                </text>
-                <text class="picker-arrow">▼</text>
-              </view>
-            </picker>
-          </view>
-
-          <!-- 城市选择 -->
-          <view v-if="selectedProvince" class="region-picker-item">
-            <view class="picker-label">城市</view>
-            <picker
-              :range="cityList"
-              :value="selectedCityIndex"
-              range-key="name"
-              @change="onCityChange"
-            >
-              <view class="picker-display">
-                <text class="picker-text"
-                  >{{ selectedCity ? selectedCity.name : '请选择城市' }}
-                </text>
-                <text class="picker-arrow">▼</text>
-              </view>
-            </picker>
-          </view>
-
-          <!-- 区县选择 -->
-          <view v-if="selectedCity" class="region-picker-item">
-            <view class="picker-label">区县</view>
-            <picker
-              :range="districtList"
-              :value="selectedDistrictIndex"
-              range-key="name"
-              @change="onDistrictChange"
-            >
-              <view class="picker-display">
-                <text class="picker-text"
-                  >{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }}
-                </text>
-                <text class="picker-arrow">▼</text>
-              </view>
-            </picker>
-          </view>
-
-          <!-- 显示完整地址 -->
-          <view v-if="selectedDistrict" class="selected-address">
-            <text class="address-text"
-              >已选择: {{ selectedProvince.name }} {{ selectedCity.name }}
-              {{ selectedDistrict.name }}
-            </text>
-          </view>
         </view>
 
         <!-- 详细地址输入 -->
@@ -189,18 +144,21 @@ import { applyForAgent, getAgentAgreement, getServiceAreas } from '@/api/agents'
 
 export default {
   name: 'AgentsPage',
-  components: {},
   computed: {
+    addressList() {
+      return [this.provinces, this.citys, this.areas]
+    },
     commonEnum() {
       return commonEnum
     },
     canSubmit() {
       return (
-        // this.formData.name &&
+        this.formData.name &&
-        // this.formData.phone &&
+        this.formData.phone &&
-        // this.formData.idCard &&
+        this.formData.idCard &&
-        // this.selectedDistrict && // 必须选择到区县级别
+        this.selectedRegionId &&
-        // this.formData.detailAddress &&
+        this.formData.detailAddress &&
+        this.formData.agreed &&
         !this.submitting
       )
     },
@@ -209,13 +167,6 @@ export default {
     // 页面加载时获取服务区域列表和协议内容
     this.loadServiceAreas()
     this.loadAgreement()
-    this.loadRegionTreeData()
-
-    // 重置协议同意状态，用于测试协议弹窗功能
-    this.formData.agreed = false
-
-    // 添加测试数据
-    console.log('页面加载完成，三级选择器已初始化')
   },
   data() {
     return {
@@ -228,25 +179,16 @@ export default {
         agreed: false,
       },
       submitting: false,
-      serviceAreas: [],
       agreementContent: '',
       showAgreementModal: false,
-      // 区域ID映射
+
-      areaIdMap: {},
+      loading: true,
-      // 三级选择相关数据
+      provinces: [], //省
-      regionTreeData: [],
+      citys: [], //市
-      // 省份相关
+      areas: [], //区
-      provinceList: [],
+      pickerValue: [0, 0, 0],
-      selectedProvince: null,
+      defaultValue: [3442, 1, 2],
-      selectedProvinceIndex: -1,
+      selectedRegionId: null, // 选中的区域ID
-      // 城市相关
-      cityList: [],
-      selectedCity: null,
-      selectedCityIndex: -1,
-      // 区县相关
-      districtList: [],
-      selectedDistrict: null,
-      selectedDistrictIndex: -1,
     }
   },
   methods: {
@@ -256,48 +198,67 @@ export default {
         const response = await getServiceAreas()
         if (response.code === 200 && response.data) {
           // 处理服务器返回的区域数据，提取所有区域名称和ID映射
-          const { names, idMap } = this.extractRegionData(response.data)
+          this.provinces = response.data.sort((left, right) =>
-          this.serviceAreas = names
+            Number(left.code) > Number(right.code) ? 1 : -1
-          this.areaIdMap = idMap
+          )
-          console.log('获取到的区域列表:', this.serviceAreas)
+          console.log(this.provinces)
-          console.log('区域ID映射:', this.areaIdMap)
+          this.loading = false
+          this.handlePickValueDefault()
         }
       } catch (error) {
         console.error('获取服务区域失败:', error)
-        // 使用默认区域列表
+        this.loading = false
-        this.serviceAreas = [
-          '福建省宁德市福鼎市',
-          '福建省宁德市霞浦县',
-          '福建省宁德市古田县',
-          '福建省宁德市屏南县',
-        ]
-        // 默认区域ID映射
-        this.areaIdMap = {
-          福建省宁德市福鼎市: 8,
-          福建省宁德市霞浦县: 9,
-          福建省宁德市古田县: 10,
-          福建省宁德市屏南县: 11,
-        }
       }
     },
 
-    // 从区域数据中提取区域名称和ID映射
+    handlePickValueDefault() {
-    extractRegionData(regions) {
+      // 设置省
-      const names = []
+      this.pickerValue[0] = this.provinces.findIndex(
-      const idMap = {}
+        item => Number(item.id) === this.defaultValue[0]
+      )
+      // 设置市
+      this.citys = this.provinces[this.pickerValue[0]]?.children || []
+      this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1])
+      // 设置区
+      this.areas = this.citys[this.pickerValue[1]]?.children || []
+      this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2])
+      // 重置下位置
+      this.$refs.picker.setIndexs(
+        [this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],
+        true
+      )
+    },
 
-      const extractData = regionList => {
+    change(e) {
-        regionList.forEach(region => {
+      if (this.loading) return
-          names.push(region.name)
+      const { columnIndex, index, indexs } = e
-          idMap[region.name] = region.id
+      // 改变了省
-          if (region.children && region.children.length > 0) {
+      if (columnIndex === 0) {
-            extractData(region.children)
+        this.citys = this.provinces[index]?.children || []
+        this.areas = this.citys[0]?.children || []
+        this.$refs.picker.setIndexs([index, 0, 0], true)
+      } else if (columnIndex === 1) {
+        this.areas = this.citys[index]?.children || []
+        this.$refs.picker.setIndexs(indexs, true)
       }
+    },
+
+    open() {
+      this.$refs.picker.open()
+      this.handlePickValueDefault()
+    },
+
+    confirm(e) {
+      console.log('确认选择的地区：', e)
+      // 保存选中的区域ID
+      this.selectedRegionId = e.value[2]?.id || e.value[1]?.id || e.value[0]?.id
+      // 更新服务区域显示
+      this.formData.serviceArea = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
+
+      uni.showToast({
+        icon: 'none',
+        title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`,
       })
-      }
-
-      extractData(regions)
-      return { names, idMap }
     },
 
     // 加载代理商协议
@@ -374,7 +335,7 @@ export default {
         return false
       }
 
-      if (!this.formData.serviceArea) {
+      if (!this.selectedRegionId) {
         uni.showToast({
           title: '请选择服务区域',
           icon: 'none',
@@ -420,32 +381,15 @@ export default {
       this.submitting = true
 
       try {
-        // 构建请求数据
-        const regionId = this.getSelectedRegionId()
-        if (!regionId) {
-          uni.showToast({
-            title: '请选择服务区域',
-            icon: 'none',
-          })
-          return
-        }
-
         const requestData = {
           name: this.formData.name.trim(),
           phone: this.formData.phone.trim(),
           idCard: this.formData.idCard.trim(),
-          regionId: regionId,
+          regionId: this.selectedRegionId,
           address: this.formData.detailAddress.trim(),
         }
 
         console.log('提交代理商申请:', requestData)
-        console.log('三级选择信息:', {
-          省份: this.selectedProvince?.name,
-          城市: this.selectedCity?.name,
-          区县: this.selectedDistrict?.name,
-          完整地址: this.formData.serviceArea,
-          区域ID: regionId,
-        })
 
         const response = await applyForAgent(requestData)
 
@@ -487,147 +431,7 @@ export default {
         detailAddress: '',
         agreed: false,
       }
-      // 重置三级选择
+      this.selectedRegionId = null
-      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
     },
   },
 }
@@ -642,7 +446,6 @@ export default {
 // 头部区域
 .header {
   position: relative;
-  background: #fedfcd;
 
   .agent-background {
     position: relative;
@@ -985,4 +788,42 @@ export default {
     font-weight: 500;
   }
 }
+
+// 服务区域选择器样式
+.region-selector {
+  .selector-display {
+    width: 100%;
+    height: 80rpx;
+    background: #ffffff;
+    border: 2rpx solid #e8e8e8;
+    border-radius: 12rpx;
+    padding: 0 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:active {
+      background: #f5f5f5;
+    }
+
+    .selector-text {
+      font-size: 28rpx;
+      color: #333;
+      flex: 1;
+
+      &:empty::before {
+        content: '请选择服务区域';
+        color: #999;
+      }
+    }
+
+    .selector-arrow {
+      font-size: 24rpx;
+      color: #999;
+      transform: rotate(90deg);
+    }
+  }
+}
 </style>