业务代理商-选择区域成功但是无法联级选择

pages/agents/agents.vue

@@ -101,6 +101,31 @@
         </view>
       </view>
     </view>
+
+    <!-- 服务区域选择模态框 -->
+    <view v-if="showAreaSelector" class="area-selector-overlay" @click="hideAreaSelector">
+      <view class="area-selector-modal" @click.stop>
+        <view class="area-selector-header">
+          <text class="area-selector-title">选择服务区域</text>
+          <text class="area-selector-close" @click="hideAreaSelector">×</text>
+        </view>
+        <scroll-view class="area-selector-content" scroll-y>
+          <view 
+            v-for="(area, index) in serviceAreas" 
+            :key="index"
+            class="area-item"
+            :class="{ 'area-item-selected': tempSelectedArea === area }"
+            @click="selectArea(area)"
+          >
+            <text class="area-item-text">{{ area }}</text>
+            <text v-if="tempSelectedArea === area" class="area-item-check">✓</text>
+          </view>
+        </scroll-view>
+        <view class="area-selector-footer">
+          <button class="area-selector-btn" @click="confirmAreaSelection">确定</button>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -145,6 +170,8 @@ export default {
       serviceAreas: [],
       agreementContent: '',
       showAgreementModal: false,
+      showAreaSelector: false,
+      tempSelectedArea: '',
       // 区域ID映射
       areaIdMap: {},
     }
@@ -223,12 +250,25 @@ export default {
         return
       }
 
-      uni.showActionSheet({
-        itemList: this.serviceAreas,
-        success: res => {
-          this.formData.serviceArea = this.serviceAreas[res.tapIndex]
-        },
-      })
+      this.tempSelectedArea = this.formData.serviceArea
+      this.showAreaSelector = true
+    },
+
+    // 选择区域
+    selectArea(area) {
+      this.tempSelectedArea = area
+    },
+
+    // 确认区域选择
+    confirmAreaSelection() {
+      this.formData.serviceArea = this.tempSelectedArea
+      this.hideAreaSelector()
+    },
+
+    // 隐藏区域选择器
+    hideAreaSelector() {
+      this.showAreaSelector = false
+      this.tempSelectedArea = ''
     },
 
     // 切换协议同意状态
@@ -635,4 +675,116 @@ export default {
     }
   }
 }
+
+// 服务区域选择器样式
+.area-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.area-selector-modal {
+  width: 90%;
+  max-width: 600rpx;
+  max-height: 80%;
+  background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.area-selector-header {
+  padding: 30rpx;
+  border-bottom: 1rpx solid #e8e8e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f8f8f8;
+
+  .area-selector-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .area-selector-close {
+    font-size: 40rpx;
+    color: #999;
+    cursor: pointer;
+    padding: 10rpx;
+  }
+}
+
+.area-selector-content {
+  flex: 1;
+  max-height: 600rpx;
+  overflow-y: auto;
+}
+
+.area-item {
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f8f8f8;
+  }
+
+  &:active {
+    background-color: #f0f0f0;
+  }
+
+  &.area-item-selected {
+    background-color: #fff5f0;
+    border-left: 4rpx solid #f15a04;
+  }
+
+  .area-item-text {
+    font-size: 28rpx;
+    color: #333;
+    flex: 1;
+  }
+
+  .area-item-check {
+    font-size: 32rpx;
+    color: #f15a04;
+    font-weight: bold;
+  }
+}
+
+.area-selector-footer {
+  padding: 30rpx;
+  border-top: 1rpx solid #e8e8e8;
+  background: #f8f8f8;
+
+  .area-selector-btn {
+    width: 100%;
+    height: 80rpx;
+    background: #f15a04;
+    color: #ffffff;
+    border: none;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
 </style>