Browse Source

更新地区选择功能:调整当前选择显示位置,优化选择逻辑

pull/1/head
Default User 3 months ago
parent
commit
4b775cdca1
  1. 1564
      pages/seller/index.js
  2. 103
      pages/seller/index.wxml
  3. 66
      pages/seller/index.wxss

1564
pages/seller/index.js

File diff suppressed because it is too large

103
pages/seller/index.wxml

@ -534,13 +534,12 @@
<view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">地区</view> <view style="font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 12rpx; margin-left: 10rpx;">地区</view>
<view <view bindtap="openCreateRegionModal" style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block; background: white; position: relative; z-index: 1;">
class="region-picker input" <view style="display: flex; justify-content: space-between; align-items: center;">
bindtap="openCreateRegionModal" <text>{{newSupply.region || '请选择省市区'}}</text>
style="width: 100%; height: 90rpx; line-height: 90rpx; padding: 0 24rpx; font-size: 30rpx; border: 2rpx solid #eee; border-radius: 12rpx; box-sizing: border-box; margin: 0 auto 30rpx; display: block;" <text style="color: #999;">▼</text>
> </view>
<text>{{newSupply.region || '请选择省市区'}}</text> </view>
</view>
<view style="display: flex; justify-content: space-between; margin-top: 20rpx; margin-bottom: 20rpx; gap: 20rpx;"> <view style="display: flex; justify-content: space-between; margin-top: 20rpx; margin-bottom: 20rpx; gap: 20rpx;">
<button bindtap="hideModal" style="flex: 1; height: 90rpx; line-height: 90rpx; background-color: #f5f5f5; color: #666; font-size: 30rpx; border-radius: 12rpx; margin: 0; display: flex; align-items: center; justify-content: center;">取消</button> <button bindtap="hideModal" style="flex: 1; height: 90rpx; line-height: 90rpx; background-color: #f5f5f5; color: #666; font-size: 30rpx; border-radius: 12rpx; margin: 0; display: flex; align-items: center; justify-content: center;">取消</button>
@ -857,7 +856,7 @@
</view> </view>
<!-- 地区选择弹窗 --> <!-- 地区选择弹窗 -->
<view class="region-select-modal" wx:if="{{showRegionSelectModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; z-index: 9999;" catchtouchmove="true"> <view class="region-select-modal" wx:if="{{showRegionSelectModal}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; z-index: 9999;">
<view style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20rpx 20rpx 0 0; max-height: 80vh;"> <view style="position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 20rpx 20rpx 0 0; max-height: 80vh;">
<!-- 顶部操作栏:取消和确定按钮 --> <!-- 顶部操作栏:取消和确定按钮 -->
<view style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee;"> <view style="padding: 20rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #eee;">
@ -865,44 +864,80 @@
<view bindtap="confirmRegionSelection" style="font-size: 32rpx; color: #07c160; padding: 10rpx 20rpx;">确定</view> <view bindtap="confirmRegionSelection" style="font-size: 32rpx; color: #07c160; padding: 10rpx 20rpx;">确定</view>
</view> </view>
<!-- 搜索框区域 --> <!-- 搜索框 -->
<view style="padding: 20rpx;"> <view style="padding: 12rpx 20rpx; border-bottom: 1rpx solid #eee;">
<view style="position: relative; background: #f5f5f5; border-radius: 40rpx; padding: 0 30rpx;"> <view class="search-box-compact">
<text class="search-icon-text">🔍</text>
<input <input
type="text" class="search-input-compact"
placeholder="搜索地区" placeholder="搜索地区"
value="{{currentRegionMode === 'create' ? regionSearchKeyword : editRegionSearchKeyword}}" value="{{currentRegionMode === 'create' ? regionSearchKeyword : editRegionSearchKeyword}}"
bindinput="{{currentRegionMode === 'create' ? 'onRegionSearchInput' : 'onEditRegionSearchInput'}}" bindinput="onRegionSearchInput"
confirm-type="search" bindfocus="onRegionSearchFocus"
style="width: 100%; height: 70rpx; line-height: 70rpx; font-size: 28rpx; background: transparent;"
/> />
<view <image
wx:if="{{currentRegionMode === 'create' ? regionSearchKeyword : editRegionSearchKeyword}}" class="clear-icon-compact"
bindtap="{{currentRegionMode === 'create' ? 'clearRegionSearch' : 'clearEditRegionSearch'}}" wx:if="{{(currentRegionMode === 'create' && regionSearchKeyword) || (currentRegionMode === 'edit' && editRegionSearchKeyword)}}"
style="position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); color: #999;" src="/images/close.png"
> mode="aspectFit"
bindtap="clearRegionSearch"
</view> ></image>
</view> </view>
</view> </view>
<!-- 地区列表 --> <!-- 显示当前选择的地区 -->
<view style="padding: 20rpx; text-align: center; color: #666; font-size: 28rpx; border-bottom: 1rpx solid #f0f0f0;">
当前选择: {{regionOptions[selectedProvinceIndex].name}} {{currentCities[selectedCityIndex].name}} {{currentDistricts[selectedDistrictIndex]}}
</view>
<!-- 搜索结果区域 -->
<scroll-view <scroll-view
scroll-y="true" wx:if="{{showSearchResults}}"
style="max-height: 60vh; padding: 0; -webkit-overflow-scrolling: touch;" style="max-height: 200rpx; border-bottom: 1rpx solid #eee;"
enable-back-to-top="false" scroll-y
> >
<view <view
wx:for="{{filteredRegionOptions}}" wx:for="{{filteredRegionOptions}}"
wx:key="index" wx:key="item"
class="region-item {{selectedRegionIndex === index ? 'selected' : ''}}" class="search-result-item"
bindtap="selectRegion" bindtap="selectSearchRegion"
data-index="{{index}}" data-region="{{item.region}}"
style="padding: 32rpx 40rpx; border-bottom: 1rpx solid #f0f0f0; font-size: 32rpx; color: {{selectedRegionIndex === index ? '#07c160' : '#131413'}}; text-align: center;" data-province-index="{{item.provinceIndex}}"
data-city-index="{{item.cityIndex}}"
data-district-index="{{item.districtIndex}}"
> >
{{item}} {{item.region}}
</view>
<view wx:if="{{filteredRegionOptions.length === 0}}" style="padding: 20rpx; text-align: center; color: #999;">
未找到匹配的地区
</view> </view>
</scroll-view> </scroll-view>
<!-- 三级联动地区选择器 -->
<view style="height: 400rpx; padding: 20rpx 0;">
<picker-view
indicator-style="height: 60rpx; background-color: rgba(245, 245, 245, 0.8);"
style="width: 100%; height: 100%;"
value="{{[selectedProvinceIndex, selectedCityIndex, selectedDistrictIndex]}}"
bindchange="onRegionChange"
>
<picker-view-column>
<view wx:for="{{regionOptions}}" wx:key="index" style="line-height: 60rpx; text-align: center; font-size: 32rpx;">
{{item.name}}
</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{currentCities}}" wx:key="index" style="line-height: 60rpx; text-align: center; font-size: 32rpx;">
{{item.name}}
</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{currentDistricts}}" wx:key="index" style="line-height: 60rpx; text-align: center; font-size: 32rpx;">
{{item}}
</view>
</picker-view-column>
</picker-view>
</view>
</view> </view>
</view> </view>

66
pages/seller/index.wxss

@ -49,12 +49,37 @@ button {
background-color: white; background-color: white;
} }
/* 紧凑搜索框样式 */
.search-box-compact {
width: 100%;
display: flex;
align-items: center;
background-color: #f8f9fa;
border: 2rpx solid #e9ecef;
border-radius: 40rpx;
padding: 0 16rpx;
transition: all 0.3s ease;
}
.search-box-compact:focus-within {
border-color: #07c160;
box-shadow: 0 0 0 3rpx rgba(7, 193, 96, 0.1);
background-color: white;
}
.search-icon { .search-icon {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
margin-right: 16rpx; margin-right: 16rpx;
} }
/* 搜索图标文字 */
.search-icon-text {
font-size: 24rpx;
color: #999;
margin-right: 12rpx;
}
.search-input { .search-input {
flex: 1; flex: 1;
padding: 24rpx 0; padding: 24rpx 0;
@ -65,8 +90,20 @@ button {
outline: none; outline: none;
} }
.search-input::placeholder { /* 紧凑搜索输入框 */
.search-input-compact {
flex: 1;
padding: 16rpx 0;
font-size: 26rpx;
color: #333;
background-color: transparent;
border: none;
outline: none;
}
.search-input-compact::placeholder {
color: #ccc; color: #ccc;
font-size: 24rpx;
} }
.clear-icon { .clear-icon {
@ -79,11 +116,38 @@ button {
transition: all 0.2s ease; transition: all 0.2s ease;
} }
/* 紧凑清除图标 */
.clear-icon-compact {
width: 28rpx;
height: 28rpx;
margin-left: 8rpx;
cursor: pointer;
transition: all 0.2s ease;
}
.clear-icon:hover { .clear-icon:hover {
background-color: transparent; background-color: transparent;
color: #666; color: #666;
} }
/* 地区搜索结果项样式 */
.search-result-item {
padding: 24rpx 32rpx;
font-size: 28rpx;
color: #333;
background-color: white;
border-bottom: 1rpx solid #f0f0f0;
transition: background-color 0.2s ease;
}
.search-result-item:hover {
background-color: #f5f5f5;
}
.search-result-item:last-child {
border-bottom: none;
}
/* 页面标题栏 */ /* 页面标题栏 */
.title-bar { .title-bar {
display: flex; display: flex;

Loading…
Cancel
Save