需求1-picker实现联动并查询

拜可肖
155 阅读2分钟

picker实现联动并查询

html
  • 思路：picker选择器绑定bindPickerChange事件 id 对应的分别是几级联动
  <!-- 查询条件 -->
  <view class="search_box">
    <!-- 年份 -->
    <picker bindchange="bindPickerChange" id="1" value="{{yearIndex}}" range="{{yearList}}">
      <view class="picker">
        {{yearIndex==null ? "请选择年份" : yearList[yearIndex]}}
      </view>
    </picker>
    <!-- 地市 -->
    <picker bindchange="bindPickerChange" id="2" value="{{dsIndex}}" range="{{dsList}}">
      <view class="picker">
        {{dsIndex==null ? "请选择城市" : dsList[dsIndex]}}
      </view>
    </picker>
    <!-- 学历 -->
    <picker bindchange="bindPickerChange" id="3" value="{{xlyqIndex}}" range="{{xlyqList}}">
      <view class="picker">
        {{xlyqIndex==null ? "请选择学历" : xlyqList[xlyqIndex]}}
      </view>
    </picker>
    <!-- 考试科目 -->
    <picker bindchange="bindPickerChange" id="4" value="{{kskmIndex}}" range="{{kskmList}}">
      <view class="picker">
        {{kskmIndex==null ? "请选择考试科目" : kskmList[kskmIndex]}}
      </view>
    </picker>
    <!-- 应届要求 -->
    <picker bindchange="bindPickerChange" id="5" value="{{yjyqIndex}}" range="{{yjyqList}}">
      <view class="picker">
        {{yjyqIndex==null ? "请选择应届要求" : yjyqList[yjyqIndex]}}
      </view>
    </picker>
    <!-- 点击查询 -->
    <view wx:if="{{!phoneFlag}}" bindtap="toGrant" class="search df m">点击查询.</view>
    <view wx:else bindtap="toSearch" class="search df m">点击查询</view>
  </view>
js
  • 思路：
  • onshow的时候调用一级联动接口 初始化第一级
  • bindPickerChange接收传递过来的id 分别去调用后面的二三四五级联动同时清空前面的值
 data: {
    yearIndex: null,
    dsIndex: null,
    qxIndex: null,
    zpdwIndex: null,
    zpgwIndex: null,
    yearList: [],
    dsList: [],
    qxList: [],
    zpdwList: [],
    zpgwList: [],
  },
  
  /*一级联动调用*/
  onShow: function () {
    this.getOneCascade(); // 初始化的时候要记得调用一级联动
  },
  
  /* picker start*/
  bindPickerChange(e) {
    switch (e.currentTarget.id) {
      case '1':
        this.setData({
          yearIndex: e.detail.value,
          dsIndex: null,
          xlyqIndex: null,
          kskmIndex:null,
          yjyqIndex:null
        })
        // console.log(e.detail.value)
        this.getTwoCascade(e.detail.value);
        break;
      case '2':
        if (this.data.yearIndex == null) {
          base.showToast('请选择年份');
          return;
        }
        this.setData({
          dsIndex: e.detail.value,
          xlyqIndex: null,
          kskmIndex:null,
          yjyqIndex:null
        })
        this.getThrCascade(e.detail.value);
        break;
      case '3':
        if (this.data.dsIndex == null) {
          base.showToast('请选择城市');
          return;
        }
        this.setData({
          xlyqIndex: e.detail.value,
          kskmIndex:null,
          yjyqIndex:null
        })
        this.getFourCascade(e.detail.value);
        break;
      case '4':
        if (this.data.xlyqIndex == null) {
          base.showToast('请选择学历要求');
          return;
        }
        this.setData({
          kskmIndex:e.detail.value,
          yjyqIndex:null
        })
        this.getFiveCascade(e.detail.value);
        break;
      case '5':
        if (this.data.kskmIndex == null) {
          base.showToast('请选择考试科目');
          return;
        }
        this.setData({
          yjyqIndex: e.detail.value
        })
        break;

    }
  },

  // 一级联动
  async getOneCascade() {
    const data = {
      level: '1',
      grfiled: '',
      grtext: '',
      sstime: tools.sstime(),
    };
    const result = await API.ChaXun_getCascadeAPI(
      this.data.actid, data
    )
    const resultInfo = JSON.parse(result.data.substring(1, result.data.length - 1));
    // console.log(resultInfo, '一级联动结果');
    if (resultInfo.status == 1) {
      const newArr = [];
      resultInfo.lists.forEach(item => {
        newArr.push(item.year)
      });
      this.setData({
        yearList: newArr
      })
    } else {
      // 这是啥
      wx.hideLoading();
      wx.showToast({
        title: '暂无数据',
        icon: 'none',
        duration: 1000,
      })
    }
  },

  // 二级联动
  async getTwoCascade(index) {
    const data = {
      level: '2',
      grfiled: 'year',
      grtext: `${this.data.yearList[index]}`,
      sstime: tools.sstime(),
    };
    const result = await API.ChaXun_getCascadeAPI(
      this.data.actid, data
    )
    const resultInfo = JSON.parse(result.data.substring(1, result.data.length - 1));
    // console.log(resultInfo, '二级联动结果');
    if (resultInfo.status == 1) {
      const newArr = [];
      resultInfo.lists.forEach(item => {
        newArr.push(item.city)
      });
      this.setData({
        dsList: newArr
      })
    } else {
      // 这是啥
      wx.hideLoading();
      wx.showToast({
        title: data.msg,
        icon: 'none',
        duration: 1000,
      })
    }
  },

  // 三级联动
  async getThrCascade(index) {
    const data = {
      level: '3',
      grfiled: 'city',
      grtext: `${this.data.dsList[index]}`,
      sstime: tools.sstime(),
    };
    const result = await API.ChaXun_getCascadeAPI(
      this.data.actid, data
    )
    const resultInfo = JSON.parse(result.data.substring(1, result.data.length - 1));
    // console.log(resultInfo, '三级联动结果');
    if (resultInfo.status == 1) {
      const newArr = [];
      resultInfo.lists.forEach(item => {
        newArr.push(item.xlyq)
      });
      this.setData({ 
        xlyqList: newArr
      })
    } else {
      // 这是啥
      wx.hideLoading();
      wx.showToast({
        title: data.msg,
        icon: 'none',
        duration: 1000,
      })
    }
  },

  // 四级联动
  async getFourCascade(index) {
    const data = {
      level: '4',
      grfiled: 'xlyq',
      grtext: `${this.data.xlyqList[index]}`,
      sstime: tools.sstime(),
    };
    const result = await API.ChaXun_getCascadeAPI(
      this.data.actid, data
    )
    const resultInfo = JSON.parse(result.data.substring(1, result.data.length - 1));
    // console.log(resultInfo, '四级联动结果');
    if (resultInfo.status == 1) {
      const newArr = [];
      resultInfo.lists.forEach(item => {
        newArr.push(item.kskm)
      });
      this.setData({
        kskmList: newArr
      })
    } else {
      // 这是啥
      wx.hideLoading();
      wx.showToast({
        title: data.msg,
        icon: 'none',
        duration: 1000,
      })
    }
  },

  // 五级联动
  async getFiveCascade(index) {
    const data = {
      level: '5',
      grfiled: 'kskm',
      grtext: `${this.data.kskmList[index]}`,
      sstime: tools.sstime(),
    };
    const result = await API.ChaXun_getCascadeAPI(
      this.data.actid, data
    )
    const resultInfo = JSON.parse(result.data.substring(1, result.data.length - 1));
    // console.log(resultInfo, '五级联动结果');
    if (resultInfo.status == 1) {
      const newArr = [];
      resultInfo.lists.forEach(item => {
        newArr.push(item.yjyq)
      });
      this.setData({
        yjyqList: newArr
      })
    } else {
      // 这是啥
      wx.hideLoading();
      wx.showToast({
        title: data.msg,
        icon: 'none',
        duration: 1000,
      })
    }
  },

  /*picker end*/
css
.picker {
  width: 500rpx;
  height: 60rpx;
  border: 1rpx solid #fff;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  color: #1f868d;
  margin: 30rpx auto;
  background: #fffbf5;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  line-height: 60rpx;
}

.search {
  width: 300rpx;
  height: 100rpx;
  border-radius: 10rpx;
  color: #fff;
  background: #1f394d;
}

获取完联动数据跳转查询

js
  • 思路：收集到值并且跳转
/* 点击查询-跳转到结果页 */
  toSearch() {
    if (!this.data.resFlag) {
      this.register();
    }
    const data = {
      year: this.data.yearList[this.data.yearIndex] || '',
      ds: this.data.dsList[this.data.dsIndex] || '',
      qx: this.data.qxList[this.data.qxIndex] || '',
      zpdw: this.data.zpdwList[this.data.zpdwIndex] || '',
      zpgw: this.data.zpgwList[this.data.zpgwIndex] || '',
    };
    if (!data.year || !data.ds || !data.qx || !data.zpdw ) {
      base.showToast('请至少选择前4项~');
      return;
    }
    // 跳转到结果页 传递筛选的项
    wx.navigateTo({
      url: `../rmcx/rmcx_page/rmcx_page?searchData=${JSON.stringify(data)}`,
    });
  },

在result_page页面接收 并 调接口查询

js
  • 思路：接收到传递过来的值赋值保存
 onLoad: function (options) {
  const {
    year,
    ds,
    qx,
    zpdw,
    zpgw,
  } = JSON.parse(options.searchData);

  this.setData({
    urlParams: {
      year: year || '',
      ds: ds || '',
      qx: qx || '',
      zpdw: zpdw || '',
      zpgw: zpgw || '',
    }
  }, () => {
    // console.log(this.data.urlParams, '成功了');
    this.getSearchResult();
  })
},
  • 思路：调接口查询 (此处还有一个分页，写在另一个帖子)
  /* 查询结果 */
async getSearchResult() {
  let onRefresh = this.data.onRefresh; //false为重新刷新数据，true为分页累加数据
  const {
    year,
    ds,
    qx,
    zpdw,
    zpgw,
  } = this.data.urlParams;
  const data = {
    year,
    ds,
    qx,
    zpdw,
    zpgw,
    tabnum: 1,
    page: this.data.page,
    limits: this.data.pageSize,
    sstimes: tools.sstime(),
  };
  
  // 请求后台数据
  const result = await API.ChaXun_getfylistAPI(this.data.actid, data)
  const resultInfo = JSON.parse(result.data.substring(1, result.data.length - 1));

  if (resultInfo.status == 1 && resultInfo.lists.length > 0) {
    // 这里
    if (onRefresh) {
      // 累加数据
      this.setData({
        positionList: this.data.positionList.concat(resultInfo.lists), // 累加
        page: this.data.page + 1,
        total: resultInfo.zcounts,
      })
    } else {
      this.setData({
        page: this.data.page + 1,
      })
    }
  } else if (resultInfo.status == 2) {
    wx.showToast({
      title: '到底啦~',
      icon: 'none',
      duration: 1000,
    })
  } else {
    wx.showToast({
      title: resultInfo.msg,
      icon: 'none',
      duration: 1000,
    })
  }
},
avatar
文章
阅读
粉丝