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

index.wxml

<!-- 页面结构 -->
<view class="container">
  <!-- 显示按钮 -->
  <button bind:tap="togglePopup">点击显示弹出层</button>

  <!-- 弹出层 -->
  <view class="popup" hidden="{{!isPopupVisible}}">
    <view class="popup-content">
      <view class="category-list">
        <text>商品分类</text>
        <view wx:for="{{goodsList}}" wx:key="index" class="item" data-index="{{index}}" bindtap="selectItem" data-type="goods">
          <text class="{{selectedGoodsIndex === index ? 'selected' : ''}}">{{item}}</text>
        </view>
      </view>

      <view class="category-list">
        <text>地区分类</text>
        <view wx:for="{{areaList}}" wx:key="index" class="item" data-index="{{index}}" bindtap="selectItem" data-type="area">
          <text class="{{selectedAreaIndex === index ? 'selected' : ''}}">{{item}}</text>
        </view>
      </view>

      <button bindtap="query">查询</button>
    </view>
  </view>

  <!-- 结果显示 -->
  <view class="result">
    <text>已选商品分类：{{selectedGoodsName}} (索引: {{selectedGoodsIndex}})</text>
    <text>已选地区分类：{{selectedAreaName}} (索引: {{selectedAreaIndex}})</text>
  </view>
</view>

index.css

/* 样式 */
.container {
  padding: 20px;
}

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  transform: translateY();
}

.popup.visible {
  transform: translateY(0);
}

.popup-content {
  padding: 20px;
}

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

.item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  border-radius: 5px;
}

.selected {
  background-color: #e7f3ff;
  color: #007aff;
  font-weight: bold;
}

.result {
  margin-top: 20px;
}

index.js

// 页面逻辑
Page({
  data: {
    isPopupVisible: false, // 控制弹出层显示状态
    goodsList: ['水果', '蔬菜', '肉类', '饮料'], // 商品分类列表
    areaList: ['北京', '上海', '广州', '深圳'], // 地区分类列表
    selectedGoodsIndex: null, // 已选商品分类索引
    selectedGoodsName: '', // 已选商品分类名称
    selectedAreaIndex: null, // 已选地区分类索引
    selectedAreaName: '' // 已选地区分类名称
  },

  // 切换弹出层显示
  togglePopup() {
    console.log("111111111")
    this.setData({
      isPopupVisible: !this.data.isPopupVisible
    });
  },

  // 点击选择项
  selectItem(e) {
    const { index, type } = e.currentTarget.dataset;

    if (type === 'goods') {
      this.setData({
        selectedGoodsIndex: index,
        selectedGoodsName: this.data.goodsList[index]
      });
    } else if (type === 'area') {
      this.setData({
        selectedAreaIndex: index,
        selectedAreaName: this.data.areaList[index]
      });
    }
  },

  // 查询功能
  query() {
    if (this.data.selectedGoodsIndex === null || this.data.selectedAreaIndex === null) {
      wx.showToast({
        title: '请选择完整的分类',
        icon: 'none'
      });
      return;
    }

    wx.showToast({
      title: `查询条件：商品-${this.data.selectedGoodsName}，地区-${this.data.selectedAreaName}`,
      icon: 'success'
    });

    // 关闭弹出层
    this.togglePopup();
  }
});

功能说明

1. 点击按钮：点击“点击显示弹出层”按钮时，弹出层会从下方滑动出现。

2. 选择分类：在弹出层中，用户可以选择商品分类和地区分类。选中的项会高亮显示。

3. 查询功能：点击“查询”按钮后，检查是否选择了完整的分类。如果未选择完整，则提示用户；否则显示查询条件。

4. 样式效果：通过 CSS 实现了简单的动画效果，使弹出层更自然地从底部滑入或滑出。