小程序点击查询弹出多商品和地区分类筛选条件

index.wxml

<view class="container">
  <button bindtap="showPopup">点击查询</button>
  
  <!-- 弹出层 -->
  <view wx:if="{{showLayer}}" class="popup-layer">
    <view class="popup-content">
      <!-- 商品分类列表 -->
      <view class="category-list">
        <block wx:for="{{categories}}" wx:key="id">
          <view class="category-item {{selectedIndex === index ? 'active' : ''}}" bindtap="selectCategory" data-index="{{index}}">
            {{item.name}}
          </view>
        </block>
      </view>
      
      <!-- 地区分类列表 -->
      <view class="region-list">
        <block wx:for="{{regions}}" wx:key="id">
          <view class="region-item {{selectedRegionIndex === index ? 'active' : ''}}" bindtap="selectRegion" data-index="{{index}}">
            {{item.name}}
          </view>
        </block>
      </view>
      
      <button bindtap="confirmQuery">查询</button>
    </view>
  </view>
</view>

index.wxss

.container {
  padding: 20px;
}

.popup-layer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.category-item, .region-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.active {
  background-color: #169bd5;
  color: white;
}

index.js

Page({
  data: {
    showLayer: false,
    categories: [
      { id: 1, name: '电子产品' },
      { id: 2, name: '服装鞋帽' }
      // 更多分类...
    ],
    regions: [
      { id: 1, name: '北京' },
      { id: 2, name: '上海' }
      // 更多地区...
    ],
    selectedIndex: null,
    selectedRegionIndex: null
  },
  
  showPopup() {
    this.setData({ showLayer: true });
  },
  
  selectCategory(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({ selectedIndex: index });
  },
  
  selectRegion(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({ selectedRegionIndex: index });
  },
  
  confirmQuery() {
    const { selectedIndex, selectedRegionIndex, categories, regions } = this.data;
    const selectedCategory = categories[selectedIndex];
    const selectedRegion = regions[selectedRegionIndex];
    
    console.log(`选中的分类: ${selectedCategory.name}, 选中的地区: ${selectedRegion.name}`);
    
    // 这里可以添加查询逻辑，比如发送请求到服务器获取数据
    
    this.setData({ showLayer: false });
  }
});

说明

1. ‌页面布局 (WXML)‌: 定义了一个按钮用于触发弹出层，以及弹出层内的商品分类列表和地区分类列表。每个列表项都绑定了点击事件，用于选中项的高亮显示。

2. ‌样式 (WXSS)‌: 定义了弹出层的样式，以及选中项的高亮样式。

3. ‌逻辑处理 (JS)‌: 实现了弹出层的显示/隐藏，分类和地区的选中逻辑，以及确认查询时的处理逻辑。