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

index.wxml

<view class="container">
  <button bindtap="showPopup">点击选择分类</button>

  <view wx:if="{{showPopup}}" class="popup-overlay" bindtap="hidePopup"></view>
  
  <view wx:if="{{showPopup}}" class="popup">
    <view class="popup-content">
      <view class="popup-title">请选择商品</view>
      <view class="category-list">
        <block wx:for="{{productCategories}}" wx:key="index">
          <view class="category-item {{selectedProductIndex === index ? 'selected' : ''}}" 
                bindtap="selectProduct" 
                data-index="{{index}}">
            {{item}}
            <text wx:if="{{selectedProductIndex === index}}"> ({{index}})</text>
          </view>
        </block>
      </view>
      <view class="popup-title">请选择地区</view>
      <view class="category-list">
        <block wx:for="{{regionCategories}}" wx:key="index">
          <view class="category-item {{selectedRegionIndex === index ? 'selected' : ''}}" 
                bindtap="selectRegion" 
                data-index="{{index}}">
            {{item}}
            <text wx:if="{{selectedRegionIndex === index}}"> ({{index}})</text>
          </view>
        </block>
      </view>
      
      <button class="query-button" bindtap="executeQuery">查询</button>
    </view>
  </view>
</view>

index.wxss

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.3s ease-out;
}

.popup-content {
  padding: 20px;
}

.popup-title {
  clear: both;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

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

.category-item {
  float: left;
  width:100px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.category-item.selected {
  background-color: #f0f0f0;
}

.query-button {
  clear: both;
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

index.js

Page({
  data: {
    showPopup: false,
    productCategories: ['电子产品', '服装', '食品', '家居'],
    regionCategories: ['华北', '华东', '华南', '西部'],
    selectedProductIndex: null,
    selectedRegionIndex: null
  },
  
  showPopup() {
    this.setData({ showPopup: true });
  },
  
  hidePopup() {
    this.setData({ showPopup: false });
  },
  
  selectProduct(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({ selectedProductIndex: index });
  },
  
  selectRegion(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({ selectedRegionIndex: index });
  },
  
  executeQuery() {
    const { selectedProductIndex, selectedRegionIndex, productCategories, regionCategories } = this.data;
    if (selectedProductIndex !== null && selectedRegionIndex !== null) {
      const selectedProduct = productCategories[selectedProductIndex];
      const selectedRegion = regionCategories[selectedRegionIndex];
      wx.showToast({
        title: `查询：${selectedProduct}${selectedRegion}`,
        icon: 'success',
        duration: 2000
      });
      this.hidePopup();
    } else {
      wx.showToast({
        title: '请选择完整的分类',
        icon: 'none',
        duration: 2000
      });
    }
  }
});

这段代码创建了一个简单的微信小程序页面，其中包含一个按钮用于显示弹出层，弹出层中包含商品名称分类列表和地区分类列表。用户可以选择分类，选中的分类会被高亮显示并显示其索引号。当用户点击“查询”按钮时，会显示一个包含所选分类的提示信息。