小程序根据姓名和年龄筛选查询

微信   2024-12-26 08:19   83   0  

1239_8ya5_4089.png

index.wxml

<view>
  <picker mode="selector" range="{{names}}" bindchange="bindNameChange">
    <view class="picker">
      <text>姓名:</text>
      <text>{{selectedName}}</text>
    </view>
  </picker>
  <picker mode="selector" range="{{ages}}" bindchange="bindAgeChange">
    <view class="picker">
      <text>年龄:</text>
      <text>{{selectedAge}}</text>
    </view>
  </picker>
  <!-- 其他筛选条件的选择器 -->
  <button bindtap="filterData">筛选</button>
</view>


index.js

Page({
  data: {
    names: ['张三', '李四', '王五'],
    selectedName: '请选择',
    ages: ['20岁以下', '20~30岁', '30~40岁', '40岁以上'],
    selectedAge: '请选择',
    // 其他筛选条件的数组和变量
    results: [] // 保存符合条件的人的姓名
  },

  // 选择器值改变时的回调函数
  bindNameChange: function(e) {
    var names = this.data.names;
    var index = e.detail.value;
    this.setData({
      selectedName: names[index]
    })
  },
  bindAgeChange: function(e) {
    var ages = this.data.ages;
    var index = e.detail.value;
    this.setData({
      selectedAge: ages[index]
    })
  },
  // 其他选择器值改变时的回调函数

  // 筛选按钮的点击事件
  filterData: function() {
    var that = this;
    // 获取数据库实例
    const db = wx.cloud.database();
    // 构造筛选条件
    var where = {};
    if (that.data.selectedName != '请选择') {
      where.name = that.data.selectedName;
    }
    if (that.data.selectedAge != '请选择') {
      var ageRange = that.data.selectedAge.split;
      if (ageRange.length == 2) {
        var minAge = Number(ageRange[0]);
        var maxAge = Number(ageRange[1]);
        if (!isNaN(minAge) && !isNaN(maxAge)){
          where.age = db.command.gte(minAge).and(db.command.lte(maxAge));
        }
      }
    }
    // 其他筛选条件的判断和设置
    // 从数据库中查询符合条件的记录
    db.collection('people').where(where).get({
      success: function(res) {
        // 提取符合条件的人的姓名
        var results = res.data.map(function(item) {
          return item.name;
        });
        that.setData({
          results: results
        });
      },
      fail: function(res) {
        console.error(res);
      }
    });
  }
})


index.wxss

.results {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 10px;
}


来源:https://wenku.csdn.net/answer/94bdc9150fef4e9ab3ac621757060f2b

博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。