微信小程序（同城小程序）_總結二（篩選功能）

一、前言                                                                               

二、主要內容                                                                        

1、功能描述：通過選擇類型和時間對請求到的活動進行帥選

2、具體實現

      2.1根據城市請求活動

/*獲取活動 :根據城市，日期，活動類型獲取*/
  getActicityByLocationId: function (locId, dayType, eventType ){
    var that = this;
    console.log("locId: "+ locId + ",dayType: " +dayType+ ", type: " + eventType)
    wx.showToast({
      title: '加載中',
      icon:'loading',
      duration: 10000
    });
    var parameter ="?"
    locId && (parameter +="loc=" + locId)
    dayType && (parameter += "day_Type=" + dayType)
    eventType && (parameter += "type="+ eventType)

    //請求活動列表
    var eventListURL = app.globalData.doubanBase + app.globalData.event_list_url +  parameter + "&&start=0&&count=50"
    wx.request({
      url: eventListURL,
      data:{},
      method:'GET',
      header:{'content-type': 'json'},
      success:function(res){
        console.log(res)
        that.handleEventListData(res.data.events)
      },
      fail:function(){

      },

      complete:function(){
        wx.hideToast()
      }
    })

  }

請求到的活動信息如下圖所示，下面是沒有分類的所有活動：

 

 

           2.2、對上面請求到的活動分類

  //處理活動信息
  handleEventListData:function(data){
    var events = {}
    for(let idx in data){
      var event = data[idx]

      var category = event.category
      console.log(category)
      //將所有的活動篩選出來
      if(!events[category]){
        events[category]=[]
      }
      console.log(events)//將上面的活動組裝成以category為屬性，ommonweal：[{ … }, { … }]
 
      //格式化時間
      var time_str = event.time_str//"2019.04.23 周二 起"
      var time = ""
      if(typeof time_str == 'string'){
        var time_arr = time_str.split(" ")
        time = time_arr[0]
      }

      var temp = {
        id: event.id,
        image:event.image,
        loc_name:event.loc_name,
        owner:event.owner,
        category:event.category,
        category_name:event.category_name,
        title:event.title,
        wisher_count:event.wisher_count,
        has_ticket:event.has_ticket,
        content:event.content,
        can_invite:event.can_invite,
        time_str: time,
        album: event.album,
        participant_count: event.participant_count,
        tags: event.tags,
        image_hlarge: event.image_hlarge,
        begin_time: event.begin_time,
        price_range: event.price_range,
        geo: event.geo,
        image_lmobile: event.image_lmobile,
        loc_id: event.loc_id,
        end_time: event.end_time,
        address: event.address,

      }
      events[category].push(temp)//event里面根據category來分
     
    }
    var keys = Object.keys(events); //方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列序和使用 for...in 循環遍歷該對象時返回的順序一致 
    keys.sort();
    console.log(events)
    var eventsKey = []
    for(let i in keys){
      var key = keys[i]
      var arr = events[key]
      if(arr.length>=4){
        eventsKey.push(key) //顯示活動類型大於4的
      }
    }
    console.log(events,eventsKey)
    this.setData({
        "events":events, "eventsKey":eventsKey
    })
 
  },

   處理之后活動為：

按照 event.category對活動進行分類
eventsKey篩選出活動類型中數量大於4的顯示

  

 3、點擊選擇類型時間，跳轉到篩選頁面

         3.1在篩選頁面生命周期onload中

 onLoad: function (options) {
    console.log(options)
    var windowWidth = app.globalData.windowWidth
    var windowHeight = app.globalData.windowHeight
    console.log(windowHeight)//獲取到當前窗口的寬和高

    var locId = options.locId;  //得到當前的城市id
    var eventType = options.type;  
    
    //自定義一個對象，活動種類
    var typeCategory = {
      "all": { "id": "all", "name": "all", "title": "全部" },
      "music": { "id": "music", "name": "music", "title": "音樂" },
      "film": { "id": "film", "name": "film", "title": "電影" },
      "drama": { "id": "drama", "name": "drama", "title": "戲劇 " },
      "commonweal": { "id": "commonweal", "name": "commonweal", "title": "公益" },
      "salon": { "id": "salon", "name": "salon", "title": "講座 " },
      "exhibition": { "id": "exhibition", "name": "exhibition", "title": "展覽" },
      "party": { "id": "party", "name": "party", "title": "聚會" },
      "sports": { "id": "sports", "name": "sports", "title": "運動" },
      "travel": { "id": "travel", "name": "travel", "title": "旅行" },
      "course": { "id": "course", "name": "course", "title": "課程" }
    };

    //自定義時間對象
    var dateCategory = {
      "future": { "id": "future", "name": "future", "title": "全部" },
      "today": { "id": "today", "name": "today", "title": "今天" },
      "tomorrow": { "id": "tomorrow", "name": "tomorrow", "title": "明天" },
      "weekend": { "id": "weekend", "name": "weekend", "title": "周末" },
      "week": { "id": "week", "name": "week", "title": "近期" },
    };

    // 全局保存的活動類型信息，travel:{id: "16", name: "travel", title: "旅行", color: "#cccc99"}
    var g_eventCategory = app.globalData.eventCategory;
    console.log(g_eventCategory)


    this.setData({
      "locId":locId,  //當前的城市id
      "typeCategory": typeCategory, //上面自定義的活動類型對象
      "dateCategory": dateCategory, //上面自定義的時間類型對象
      "g_eventCategory": g_eventCategory, //
      "windowWidth": windowWidth,
       "windowHeight": windowHeight
    })


    // 請求活動列表,
    this.getEventListData();


  }

         

        3.2：根據當前的城市ID, type, data請求數據

getEventListData:function(){
    var that = this;
    var offset = that.data.eventsData["offset"]||0;
    console.log(offset) //當前的活動條數
    var total = that.data.eventsData['total']||999;//總共的活動數目
    if(offset>=total){
      return; 
    }

    wx.showToast({
      title: '加載中',
      icon: 'loading',
      duration:10000
    });
    var params = "?"
    this.data.locId && (params += "loc=" +this.data.locId)
    this.data.type && (params +="&&type=" + this.data.type)
    this.data.date && (params +="&&day_type=" +this.data.date)
    
    var url = app.globalData.doubanBase + app.globalData.event_list_url + params + "&&start=" + offset + "&&count=5";
    console.log(url)
    wx.request({
      url: url,
      method:'GET',
      header:{'content-type':'json'},
      success:function(res){
        var data = res.data  //得到城市的所有活動
        console.log(data)
        that.processEventListData(data)
      }
    })
  }

        3.3對請求到的活動進行處理

processEventListData:function(data){
    var list = this.data.eventsData["event"]||[];

   var offset = this.data.eventsData["offset"]||0;
    var total = data.total;//總條數
    console.log(data.events.length)
    offset += data.events.length;
    //console.log(offset)
    for(let idx in data.events){
      var event = data.events[idx]
      var time_str = event.time_str
      var time =""
      //取出時間里面的日期
      if(typeof time_str =="string"){
        var time_arr = time_str.split(" ");
        time = time_arr[0]
      }

      var temp = {
        id: event.id,
        image: event.image,
        loc_name: event.loc_name,
        owner: event.owner,
        category: event.category,
        title: event.title,
        wisher_count: event.wisher_count,
        has_ticket: event.has_ticket,
        content: event.content,
        can_invite: event.can_invite,
        time_str: time,
        album: event.album,
        participant_count: event.participant_count,
        tags: event.tags,
        image_hlarge: event.image_hlarge,
        begin_time: event.begin_time,
        price_range: event.price_range,
        geo: event.geo,
        image_lmobile: event.image_lmobile,
        loc_id: event.loc_id,
        end_time: event.end_time,
        address: event.address,
      };
      list.push(temp)
    }

    var readyData = {}
    readyData["eventsData"]={
      "events":list,
      "offset":offset,
      "total":total
    }
   
    this.setData(readyData)
    console.log(this.data)


  },

 

 

 

     3.4、類型和事件切換：

     

 （1）html代碼： 

  如果當前的type==all就顯示類型，並且讓當前字體不高亮

  如果當前日期為future顯示時間，並且讓當前時間不高亮

<view class='session-header'>
    <text class='type-tab {{type == "all" ?"tab-normal":"tab-HL"}}' bindtap='handleType'>{{type=='all'?'類型':g_eventCategory[type].title}}</text>
    <text class='time-tab {{date =="future"? "tab-normal" : "tab-HL"}}' bindtap='handleTime' >{{date == 'future' ? '時間':dateCategory[date].title}}</text>
    <text class='loc-tab' bindtap='handleLocation'>地點</text>
  </view>
  <view class='category-session' wx:if="{{showCategory}}">
    <view class='type-category-session'>
      <block wx:for="{{eventCategory}}" wx:for-item="eventType">
       <text class='category' catchtap='handleCategory' data-id="{{eventType.id}}" data-name="{{eventType.name}}" data-title="{{eventType.title}}">{{eventType.title}}</text>
      </block>
    </view>
    <view class='category-cover' bindtap='handleCoverTap'></view>
  </view>

   （2）為類型和時間分別注冊點擊事件：

  resetMenuTap: function () {
    var readyData = { "isTypeTap": false, "isDateTap": false }
    this.setData(readyData)
  },

/*是否顯示選擇類型 */
  handleType:function(){
   
    this.setData({
      "showCategory":true,  //控制是否顯示下面的子選項，true為顯示
      "eventCategory": this.data.typeCategory,  //所有的類型
      "current":this.data.type  //當前的類型
    })
    this.resetMenuTap()
    this.setData({
      "isTypeTap": true  //是否點擊類型選項
    })
  },

 

為時間注冊點擊事件：

  resetMenuTap: function () {
    var readyData = { "isTypeTap": false, "isDateTap": false }
    this.setData(readyData)
  },

/*選擇顯示時間 */
  handleTime:function(){
     this.setData({
       "showCategory": true,  //控制是否選擇下面的子選項
       "eventCategory":this.data.dateCategory,  //日期類型
       "current":this.data.date //當前時間
     })

    this.resetMenuTap();//每次點擊都讓以前的置為false
     this.setData({
       "isDateTap":true
     })
   
    console.log(this.data.eventCategory)
  },

切換的時候子標簽也不一樣是因為，點擊日期的時候eventCategory和current里面存放的是日期對象， 點擊時間的時候eventCategory里面存放的是時間對象。

 

 

        3.5、對子標簽進行處理：

下面顯示的內容最開始是顯示的所有的類型，選擇不同的子標簽就會篩選出不同的類型，點擊某個子標簽的時候將當前對應的, 類型的id,name和title傳過去。

選擇類型時：

eventCategory:

 

選擇時間時：

 

 <view class='category-session' wx:if="{{showCategory}}">
    <view class='type-category-session'>
      <block wx:for="{{eventCategory}}" wx:for-item="eventType">
       <text class='category' catchtap='handleCategory' data-id="{{eventType.id}}" data-name="{{eventType.name}}" data-title="{{eventType.title}}">{{eventType.title}}</text>
      </block>
    </view>
    <view class='category-cover' bindtap='handleCoverTap'></view>
  </view>

 

 

/*點擊某個子類 */
  handleCategory:function(event){
  var id = event.currentTarget.dataset.id;
    console.log(id)
    console.log(this.data.isTypeTap)
    console.log(this.data.isDateTap)
  var readyData = {"showCategory":false} //點擊子標簽的時候，將當前的種類選擇隱藏
  this.data.isTypeTap && (readyData["type"]= id) //設置type
  this.data.isDateTap && (readyData["date"]=id)//設置date

  readyData["eventsData"]={}
  this.setData(readyData)
  console.log(this.data.date)
  this.getEventListData();  //根據對應的id type date請求活動信息
  this.resetMenuTap();  //每次點擊之后重置當前狀態

  },
 

 

 

 

 

 

三、總結