Micro-letter applet (a small city program) _ the summary of 20 (filtering function)

I. Introduction                                                                               

Second, the main content                                                                        

1. Functional Description: be selected from the commander request to activities by selecting the type and time

2, the specific implementation

      2.1 According to the city request activities

/ * Get Events: obtained according to the city, date, event type * / 
  getActicityByLocationId: function (LOCID, dayType, the eventType) {
     var that = the this ; 
    the console.log ( "LOCID:" + LOCID + ", dayType:" + + dayType " , type: " + the eventType) 
    wx.showToast ({ 
      title: 'loading' , 
      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()
      }
    })

  }

Request to the event information as shown below is not classified all activities:

 

 

           2.2, a request for the above activities classification

  // process the activity information 
  handleEventListData: function (Data) {
     var Events = {}
     for (IDX the let in Data) {
       var Event = Data [IDX] 

      var category = event.category 
      the console.log (category) 
      // all activities screened 
      IF (! Events [category]) { 
        Events [category] = [] 
      } 
      the console.log (Events) // will be assembled into the above activities in category attribute, ommonweal: [{...}, {...}] 
 
      / / formatting time 
      var time_str event.time_str = // "2019.04.23 from Tuesday"
      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); //The method returns an array of a given object itself may be enumerated attributes, the attribute names in the same order array arrangement used for ... in sequence and when the returned loop through the object 
    dict keys.sort (); 
    Console. log (Events) 
    var eventsKey = []
     for (the let I in Keys) {
       var Key = Keys [I]
       var ARR = Events [Key]
       IF (arr.length> =. 4 ) { 
        eventsKey.push (Key) // display type of activity greater than 4 
      } 
    } 
    the console.log (Events, eventsKey) 
    the this .setData ({
         "Events" : Events, "eventsKey" : eventsKey 
    }) 
 
  },

   After processing activities:

according to event.category activities classification
eventsKey display selected activity type in quantities greater than 4

  

 3, click to select the type of time, jump to the screening of the page

         3.1 Screening in the page lifecycle onload

the onLoad: function (Options) { 
    the console.log (Options) 
    var windowWidth = app.globalData.windowWidth
     var windowHeight = app.globalData.windowHeight 
    the console.log (windowHeight) // Get the current window width and height 

    var LOCID = Options. LOCID;   // get the current city ID 
    var the eventType = options.type;   
    
    // custom object, activity type 
    var typeCategory = {
       "All" : { "ID" : "All" , "name" : "All" , "title" : "All " },
      "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,  //The current city the above mentioned id 
      "typeCategory" : typeCategory, // above-defined event type object 
      "dateCategory" : dateCategory, // above from time type of object definitions 
      "g_eventCategory" : g_eventCategory, //
       "windowWidth" : windowWidth,
        "windowHeight " : windowHeight 
    }) 


    // request event list, 
    the this .getEventListData (); 


  }

         

        3.2: According to the current city ID, type, data request data

getEventListData: function () {
     var that = the this ;
     var offset = that.data.eventsData [ "offset" ] || 0 ; 
    the console.log (offset) // current number of active bars 
    var Total = that.data.eventsData [ 'total' ] || 999; // total number of events 
    IF (offset> = total) {
       return ; 
    } 

    wx.showToast ({ 
      title: 'loading' , 
      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   // get all activities city 
        the console.log (Data) 
        that.processEventListData (Data) 
      } 
    }) 
  }

        3.3 pairs for processing the request to the event

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, and the type of event to switch:

     

 (1) html Code: 

  If the current type == all on display type, and let the current font is not highlighted

  If the current date display time for the future, and let the current time is not highlighted

<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();  //每次点击之后重置当前状态

  },
 

 

 

 

 

 

三、总结