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

index.wxml

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

  <!-- 弹出层 -->
  <view class="popup" wx:if="{{showPopupView}}">
    <view class="popup-mask" bindtap="hidePopup"></view>
    <view class="popup-content">
      <!-- 商品名称分类列表 -->
      <view class="category-list">
        <view class="category-title">商品名称分类</view>
        <view class="category-item" wx:for="{{productCategories}}" wx:key="*this" bindtap="selectItem" data-type="product" data-index="{{index}}">
          {{item}}
        </view>
      </view>
      <!-- 地区分类列表 -->
      <view class="category-list">
        <view class="category-title">地区分类</view>
        <view class="category-item" wx:for="{{areaCategories}}" wx:key="*this" bindtap="selectItem" data-type="area" data-index="{{index}}">
          {{item}}
        </view>
      </view>
      <!-- 查询按钮 -->
      <view class="query-btn" bindtap="queryData">查询</view>
    </view>
  </view>

  <!-- 显示选中信息 -->
  <view class="selected-info">
    <view>选中商品: {{selectedProductText}} (索引: {{selectedProductIndex}})</view>
    <view>选中地区: {{selectedAreaText}} (索引: {{selectedAreaIndex}})</view>
  </view>
</view>

index.wxss

.container {
  padding: 20px;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

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

.category-title {
  font-weight: bold;
  margin-bottom: 10px;
}

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

.query-btn {
  text-align: center;
  background-color: #007aff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.selected-info {
  margin-top: 20px;
}

index.js

Page({
  data: {
    showPopupView: false,
    productCategories: ['商品1', '商品2', '商品3'],
    areaCategories: ['地区1', '地区2', '地区3'],
    selectedProductText: '',
    selectedProductIndex: -1,
    selectedAreaText: '',
    selectedAreaIndex: -1
  },

  // 显示弹出层
  showPopup() {
    this.setData({
      showPopupView: true
    });
  },

  // 隐藏弹出层
  hidePopup() {
    this.setData({
      showPopupView: false
    });
  },

  // 选择列表项
  selectItem(e) {
    const { type, index } = e.currentTarget.dataset;
    if (type === 'product') {
      this.setData({
        selectedProductText: this.data.productCategories[index],
        selectedProductIndex: index
      });
    } else if (type === 'area') {
      this.setData({
        selectedAreaText: this.data.areaCategories[index],
        selectedAreaIndex: index
      });
    }
  },

  // 查询功能
  queryData() {
    const { selectedProductText, selectedProductIndex, selectedAreaText, selectedAreaIndex } = this.data;
    if (selectedProductIndex === -1 || selectedAreaIndex === -1) {
      wx.showToast({
        title: '请选择商品和地区',
        icon: 'none'
      });
      return;
    }
    console.log('查询商品:', selectedProductText, '索引:', selectedProductIndex);
    console.log('查询地区:', selectedAreaText, '索引:', selectedAreaIndex);
    // 这里可以添加实际的查询逻辑，例如发送请求到服务器
    wx.showToast({
      title: '查询成功',
      icon: 'success'
    });
    this.hidePopup();
  }
});

代码说明

1. index.wxml：包含一个点击文字触发弹出层的按钮，弹出层中显示商品名称分类列表和地区分类列表，每个列表项绑定了点击事件。还有一个查询按钮，绑定了查询事件。

2. index.wxss：定义了弹出层和列表的样式，实现了从下向上弹出的效果。

3. index.js：

• showPopup 方法用于显示弹出层。

• hidePopup 方法用于隐藏弹出层。

• selectItem 方法用于处理列表项的点击事件，根据点击的类型（商品或地区）更新选中信息。

• queryData 方法用于处理查询事件，检查是否选择了商品和地区，若选择则打印选中信息并显示查询成功提示，同时隐藏弹出层。

通过以上代码，你可以实现点击文字弹出分类列表，选择列表项并显示选中信息，以及点击查询的功