You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.0 KiB
95 lines
3.0 KiB
<view class="container">
|
|
<!-- 已选择区域路径显示 -->
|
|
<view class="selected-path" wx:if="{{selectedRegions.length > 0}}">
|
|
<text class="path-title">已选择：</text>
|
|
<view class="path-items">
|
|
<view
|
|
wx:for="{{selectedRegions}}"
|
|
wx:key="index"
|
|
class="path-item {{index === selectedRegions.length - 1 ? 'last' : ''}}"
|
|
data-index="{{index}}"
|
|
bindtap="reSelectRegion"
|
|
>
|
|
<text>{{item.name}}</text>
|
|
<text class="separator" wx:if="{{index < selectedRegions.length - 1}}">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选择按钮 -->
|
|
<view class="select-btn-container">
|
|
<button
|
|
class="select-btn"
|
|
bindtap="startSelection"
|
|
loading="{{loading}}"
|
|
>
|
|
{{selectedRegions.length === 0 ? '开始选择区域' : '继续选择下一级'}}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="action-buttons">
|
|
<button
|
|
class="btn complete-btn"
|
|
bindtap="completeSelection"
|
|
disabled="{{selectedRegions.length === 0}}"
|
|
>
|
|
完成选择
|
|
</button>
|
|
<button
|
|
class="btn reset-btn"
|
|
bindtap="resetSelection"
|
|
wx:if="{{selectedRegions.length > 0}}"
|
|
>
|
|
重置
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 选择器弹出层 -->
|
|
<view class="picker-modal" wx:if="{{showPicker}}">
|
|
<view class="picker-mask" bindtap="closePicker"></view>
|
|
<view class="picker-content">
|
|
<view class="picker-header">
|
|
<text class="picker-title">{{regionTitle}}</text>
|
|
<text class="picker-close" bindtap="closePicker">×</text>
|
|
</view>
|
|
|
|
<view class="picker-body">
|
|
<!-- 加载状态 -->
|
|
<view class="loading-container" wx:if="{{loading}}">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 区域列表 -->
|
|
<scroll-view scroll-y class="region-list" wx:else>
|
|
<view
|
|
wx:for="{{regionList}}"
|
|
wx:key="id"
|
|
class="region-item"
|
|
data-index="{{index}}"
|
|
bindtap="selectRegion"
|
|
>
|
|
<view class="region-info">
|
|
<text class="region-name">{{item.name}}</text>
|
|
</view>
|
|
<text class="arrow">›</text>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{regionList.length === 0}}">
|
|
<text class="empty-text">
|
|
{{selectedRegions.length > 0 ? '已选择到最后一级' : '暂无区域数据'}}
|
|
</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 使用说明 -->
|
|
<view class="instruction">
|
|
<text class="instruction-title">使用说明：</text>
|
|
<text class="instruction-text">1. 点击"开始选择区域"开始选择\n2. 选择后会加载下一级区域\n3. 点击已选择区域的任意级别可以重新选择\n4. 选择最后一级时会直接替换\n5. 完成选择后点击"完成选择"按钮</text>
|
|
</view>
|
|
</view>
|