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

index.wxml

<view class="container">
  <!-- 点击文字触发弹出层 -->
  <view class="trigger" bind:tap="showPopup">点击选择分类</view>

  <!-- 弹出层 -->
  <view class="popup" style="display:{{popupStyle}};">
    <view class="popup-content">
      <!-- 商品名称分类列表 -->
      <view class="category-list">
        <view 
          wx:for="{{goodsCategories}}" 
          wx:key="index" 
          class="category-item {{selectedGoodsIndex === index ? 'selected' : ''}}" 
          bindtap="selectGoodsCategory" 
          data-index="{{index}}"
        >
          {{item}}
        </view>
      </view>

      <!-- 地区分类列表 -->
      <view class="category-list">
        <view 
          wx:for="{{regionCategories}}" 
          wx:key="index" 
          class="category-item {{selectedRegionIndex === index ? 'selected' : ''}}" 
          bindtap="selectRegionCategory" 
          data-index="{{index}}"
        >
          {{item}}
        </view>
      </view>

      <!-- 查询按钮 -->
      <view class="query-button" bindtap="handleQuery">查询</view>
    </view>
  </view>
</view>

index.wxss

.container {
  padding: 20px;
}

.trigger {
  padding: 10px;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 5px;
}

.popup {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: #fff;
  transition: bottom 0.3s ease;
}

/* .popup.show {
  bottom: 0;
} */
.popup{
  bottom: 0;
}
.show {
  bottom: 0;
}

.popup-content {
  padding: 20px;
}

.category-list {
  margin-bottom: 20px;
}

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

.category-item.selected {
  background-color: #e0f7fa;
  color: #007bff;
}

.query-button {
  margin-top: 20px;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}

index.js

Page({
  data: {
    popupStyle: 'none', // 控制弹出层的样式
    goodsCategories: ['商品A', '商品B', '商品C', '商品D'], // 商品分类列表
    regionCategories: ['地区A', '地区B', '地区C', '地区D'], // 地区分类列表
    selectedGoodsIndex: -1, // 选中的商品分类索引
    selectedRegionIndex: -1, // 选中的地区分类索引
  },

  // 显示弹出层
  showPopup() {
    console.log('111111111')
    this.setData({
      popupStyle: 'block'
    });
  },

  // 选择商品分类
  selectGoodsCategory(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      selectedGoodsIndex: index
    });
  },

  // 选择地区分类
  selectRegionCategory(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      selectedRegionIndex: index
    });
  },

  // 处理查询
  handleQuery() {
    const { selectedGoodsIndex, selectedRegionIndex, goodsCategories, regionCategories } = this.data;
    if (selectedGoodsIndex === -1 || selectedRegionIndex === -1) {
      wx.showToast({
        title: '请选择分类',
        icon: 'none'
      });
      return;
    }

    const selectedGoods = goodsCategories[selectedGoodsIndex];
    const selectedRegion = regionCategories[selectedRegionIndex];

    wx.showToast({
      title: `查询: ${selectedGoods} - ${selectedRegion}`,
      icon: 'none'
    });

    // 这里可以执行查询逻辑
    // ...

    // 关闭弹出层
    this.setData({
      popupStyle: 'none'
    });
  }
});

4. 逻辑说明

• 弹出层控制：通过 popupStyle 控制弹出层的显示和隐藏。点击触发按钮时，设置 popupStyle 为 show，弹出层从底部滑出。

• 分类选择：点击商品分类或地区分类时，记录选中的索引，并通过样式 selected 高亮显示选中的项。

• 查询功能：点击查询按钮时，检查是否选择了商品和地区分类，如果未选择则提示用户选择，否则执行查询逻辑并关闭弹出层。