EXEED_wxapp/pages/user/subpage/quest/quest.js

// pages/quest/quest.js
import {
  http
} from '../../../../utils/util'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navItem: [{
      id: 0,
      name: '全部状态',
      is: false
    }, {
      id: 1,
      name: '全部标签',
      is: false
    }, {
      id: 2,
      name: '全部日期',
      is: false
    }, {
      id: 3,
      name: '全部车型',
      is: false
    }],
    selectItem: [{
      id: 0,
      rank: [{
        title: '全部状态',
        is: true,
        id: ''
      }, {
        title: '待领取',
        is: false,
        id: 0
      }, {
        title: '进行中',
        is: false,
        id: 1
      }, {
        title: '已完成',
        is: false,
        id: 2
      }]
    }, {
      id: 1,
      rank: [{
        title: '全部标签',
        is: true,
        id: ''
      }]
    }, {
      id: 2,
      rank: [{
        title: '全部日期',
        is: true,
        month: '',
        id: ''
      }, {
        title: '一个月内',
        is: false,
        month: 1,
        id: 0
      }, {
        title: '三个月内',
        is: false,
        month: 3,
        id: 1
      }, {
        title: '半年内',
        is: false,
        month: 6,
        id: 2
      }, {
        title: '一年内',
        is: false,
        month: 12,
        id: 3
      }, {
        title: '自定义',
        is: false,
        month: 99,
        id: 4
      }]
    }, {
      id: 3,
      rank: [{
        title: '全部车型',
        is: true,
        id: ''
      }]
    }],
    // 下拉选项，被选中那组的数据，由下面的js控制赋值
    selectedItem: [],
    // 记录菜单栏第几项被点开，方便对样式的绑定
    listNum: -1,
    // 下拉选项的隐藏和显示，默认隐藏
    showOrHide: false,
    questes: [],
    maxpage: 1,
    page: 1,
    cdn: getApp().globalData.cdn,
    status: '',
    month: '',
    tagIdList: [],
    brandIdList: [],
    keyword: '',
    beginTime: '',
    endTime: '',
    datepick: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '任务中心',
      success: function (res) {}
    })
    http("/brand/list", "post", {}).then(res => {
      // console.log(res.data.records)
      res.data.records.forEach(element => {
        element.is = false
        element.title = element.name
        let a = element
        this.setData({
          'selectItem[3].rank': this.data.selectItem[3].rank.concat(a)
        })
      });
    })
    http("/tag/list", "post", {}).then(res => {
      // console.log(res.data.records)
      res.data.records.forEach(element => {
        element.is = false
        let a = element
        this.setData({
          'selectItem[1].rank': this.data.selectItem[1].rank.concat(a)
        })
      });
    })
  },
  handleSearch (e) {
    console.log(e)
    this.setData({
      keyword: e.detail,
      questes: [],
      page:1,
      maxpage:1
    })
    this.getdata()
  },
  to(e) {
    wx.navigateTo({
      url: e.currentTarget.dataset.url
    })
    wx.setStorage({
      key: 'quest',
      data: e.currentTarget.dataset.quest
    })
  },
  getdata() {
    http("/task/list", "post", {
      pageNum: this.data.page,
      status: this.data.status,
      month: this.data.month,
      beginTime:this.data.beginTime?this.data.beginTime + ' 00:00:00':'',
      endTime:this.data.endTime?this.data.endTime + ' 00:00:00':'',
      tagIdList: this.data.tagIdList[0]?this.data.tagIdList:[],
      brandIdList: this.data.brandIdList[0]?this.data.brandIdList:[],
      keyword: this.data.keyword
    }).then(res => {
      res.data.records.forEach(el => {
        let element = el
        if (element.start) {
          element.start = el.start.slice(0, 16)
        }
        if (element.end) {
          element.end = el.end.slice(0, 16)
        }
        this.setData({
          'questes': this.data.questes.concat(element),
        })
      })
      this.setData({
        'maxpage': res.data.pages,
      })
    })
  },
  // 点击菜单栏触发的事件函数
  handleClick: function (e) {
    const index = e.currentTarget.dataset.id;
    const {
      selectItem,
      navItem
    } = this.data;
    // 点击事件，开始时一定会执行的，先令所有下拉选项先隐藏
    const promise = new Promise((res) => {
      this.setData({
        showOrHide: false
      })
      res()
    })
    promise.then(() => {
      // 定义一个延迟0.1秒的函数，和函数动画事件对上
      setTimeout(() => {
        // 当点击的是已经点开的菜单项，则隐藏
        if (this.data.listNum === index) {
          navItem[index].is = false
          // 重置所有样式
          this.setData({
            navItem,
            listNum: -1
          })
          return;
        } else {
          // 否则就令当前的index = listNum方便下一次判断
          this.setData({
            listNum: index
          })
        }
        // 令当前点击的菜单栏高亮
        navItem.forEach((v, i) => i === index ? v.is = true : v.is = false)
        // console.log(selectItem[index].rank)
        this.setData({
          showOrHide: true,
          selectedItem: selectItem[index].rank,
          navItem
        })
      }, 100)
    })
  },
  // 关闭下拉选项的函数
  // 两种情况下会关闭下拉选项
  //  1. 选择下拉选项，选择后被选的下拉选项高亮，关闭下拉选项列表
  //  2. 点击遮罩层关闭 
  closeMask: function (e) {
    let {
      navItem,
      listNum,
      selectedItem
    } = this.data;
    // 获取点击的下拉选项内容
    const {
      contant
    } = e.currentTarget.dataset
    // 被点击的下拉选项高亮
    selectedItem.forEach((v) =>v.title === contant ? v.is = true : v.is = false)
    // 判断点击的是遮罩层还是下拉选项，如果是下拉选项则把选择的内容赋值到导航栏上，并且把v.is = false，让菜单栏高亮消失
    // 如果不是，不用赋值，直接把v.is = false，让菜单栏高亮消失
    contant ? (navItem.forEach((v, i) => {
      (i === listNum ? (v.name = contant) : (v.name = v.name));
      // (i === listNum ? ( e.currentTarget.dataset.id !== 0 ? v.is = true : v.is = false) : (v.is = v.is));
      v.is = false
    })) : (navItem.forEach((v) => v.is = false))
    // 调取借口触发筛选
    // console.log(navItem)
    this.setData({
      listNum: -1,
      showOrHide: false,
      navItem,
      selectedItem
    })
    this.data.selectItem[2].rank.forEach(el=>{
      // console.log(el)
      if (el.is) {
        if (el.month === 99) {
          this.setData({
            datepick: true
          })
        } else {
          this.setData({
            month: el.month,
            beginTime: '',
            endTime: ''
          })
        }
      }
    })
    this.data.selectItem[1].rank.forEach(el=>{
      // console.log(el)
      if(el.is){
        this.setData({
          'tagIdList[0]': el.id
        })
      }
    })
    this.data.selectItem[3].rank.forEach(el=>{
      // console.log(el)
      if(el.is){
        this.setData({
          'brandIdList[0]': el.id
        })
      }
    })
    this.data.selectItem[0].rank.forEach(el=>{
      // console.log(el)
      if(el.is){
        this.setData({
          status: el.id
        })
      }
    })
    this.setData({
      questes: [],
      page:1,
      maxpage:1
    })
    this.getdata()
  },
  bindDateChange: function (e) {
    this.setData({
      beginTime: e.detail.value
    })
  },
  bindDateChange2: function (e) {
    this.setData({
      endTime: e.detail.value
    })
  },
  timeclick(e) {
    console.log(e)
    if (e.currentTarget.dataset.tu === '1') {
      this.setData({
        beginTime: '',
        endTime: '',
        datepick: false,
        'selectItem[2].rank[5].title': '自定义',
        'selectItem[2].rank[0].is': true,
        'selectItem[2].rank[0].is': false,
        'navItem[2].name': '全部日期'
      })
      let e = {
        currentTarget:{
          dataset:{
            contant: '全部日期',
            id: 0
          }
        }
      }
      this.closeMask(e)
    } else {
      if (this.data.beginTime === '') {
        wx.showToast({
          title: '请输入开始时间',
          icon: 'none',
          duration: 2000
        })
      } else if (this.data.endTime === '') {
        wx.showToast({
          title: '请输入结束时间',
          icon: 'none',
          duration: 2000
        })
      } else {
        this.setData({
          datepick: false,
          'selectItem[2].rank[5].title': this.data.beginTime + ' ~ ' + this.data.endTime,
          'navItem[2].name': this.data.beginTime + ' ~ ' + this.data.endTime,
          month: '',
          questes: [],
          page: 1,
          maxpage: 1
        })
        this.getdata()
      }
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      questes: [],
      page: 1,
      maxpage: 1
    })
    this.getdata()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.onRefresh()
  },
  onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading()
    //loading 提示框
    wx.showLoading({
      title: 'Loading...',
    })
    console.log("下拉刷新啦");
    this.setData({
      questes: [],
      page: 1,
      maxpage: 1
    })
    this.getdata()
    setTimeout(function () {
      wx.hideLoading();
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000)
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.page === this.data.maxpage) {
      wx.showToast({
        title: '到底啦~',
        icon: 'none',
        duration: 2000
      })
    } else {
      this.setData({
        'page': this.data.page + 1
      })
      this.getdata()
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})