add Feed page

Author: uniquexiaobai

app.json

@@ -5,7 +5,6 @@
     "pages/famous/famous",
     "pages/me/me",
     "pages/settings/settings",
-    "pages/logs/logs",
     "pages/auth/onboard/onboard"
   ],
   "window":{

pages/explore/explore.wxml

@@ -1,5 +1,5 @@
 <view class="container">
-  <loading hidden="{{loading_hidden}}" bindchange="loadingChange">
+  <loading hidden="{{loading_hidden}}">
     玩命加载中...
   </loading>
   <view class="col explore">

pages/explore/explore.wxss

@@ -1,5 +1,6 @@
 .container {
   height: 100%;
+  background: rgba(255,255,255,0.8);
 }
 .explore {
   flex: 1;

pages/famous/famous.wxml

@@ -1,5 +1,5 @@
 <view class="container">
-  <loading hidden="{{loading_hidden}}" bindchange="loadingChange">
+  <loading hidden="{{loading_hidden}}">
     玩命加载中...
   </loading>
   <view class="col famous">

pages/famous/famous.wxss

@@ -1,5 +1,6 @@
 .container {
   height: 100%;
+  background: rgba(255,255,255,0.8);
 }
 .famous {
   flex: 1;

pages/helper/index.js

@@ -0,0 +1,31 @@
+
+function formateActionType (type) {
+  switch (type) {
+    case 'CreateEvent':
+      return 'Create';
+    case 'DeleteEvent':
+      return 'Delete';
+    case 'ForkEvent':
+      return 'Forked';
+    case 'WatchEvent':
+      return 'Started';
+    case 'PushEvent':
+      return 'Push';
+    case 'PullRequestEvent':
+      return 'Pull Request';
+    case 'IssuesEvent':
+      return 'Create Issue'
+    case 'IssueCommentEvent':
+      return 'Comment Issue';
+    case 'MemberEvent':
+      return 'Add Member'
+    case 'PullRequestReviewCommentEvent':
+      return 'Pull Request Review';
+    default:
+      return 'Started';
+  }
+}
+
+module.exports = {
+  formateActionType: formateActionType
+};

pages/index/index.js

@@ -1,29 +1,63 @@
 const app = getApp();
+const services = require('../../utils/services.js');
+const helper = require('../helper/index.js');
 
 Page({
   data: {
-    motto: 'Feed',
+    loading_hidden: true,
+    items: [],
+    page: 1
   },
 
-  onLoad() {
+  onLoad () {
     const user = wx.getStorageSync('user');
     console.log(user);
     if(!user) {
       wx.navigateTo({
         url: '../auth/onboard/onboard'
       });
     }
+    this.refreshData();
   },
 
-  bindViewTap() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
+  _reloadUrl () {
+    const basic_url = 'https://api.github.com/users/uniquexiaobai/received_events?page=';
+    return basic_url + this.data.page;
   },
 
-  goRouteSignIn() {
-    wx.navigateTo({
-      url: '../auth/onboard/onboard'
+  _initData () {
+    this.setData({
+      items: [],
+      page: 1
     });
+  },
+
+  fetchEventsData (url) {
+    services.fetch(url).then(res => {
+      console.log(res.data);
+      res.data.forEach(item => {
+        item.type = helper.formateActionType(item.type);
+      });
+      this.setData({
+        items: this.data.items.concat(res.data),
+        loading_hidden: true
+      });
+    });
+  },
+
+  loadMoreData () {
+    this.setData({
+      page: ++this.data.page,
+      loading_hidden: false
+    });
+    this.fetchEventsData(this._reloadUrl());
+  },
+
+  refreshData () {
+    this.setData({
+      loading_hidden: false
+    });
+    this._initData();
+    this.fetchEventsData(this._reloadUrl());
   }
 });

pages/index/index.wxml

@@ -1,9 +1,22 @@
 <view class="container col">
-  <view bindtap="bindViewTap" class="userinfo">
-    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    <text>{{motto}}</text>
-  </view>
-  <view class="routes">
-    <button bindtap="goRouteSignIn" type="primary" size="mini">SignIn</button>
-  </view>
+  <loading hidden="{{loading_hidden}}" bindchange="loadingChange">
+    玩命加载中...
+  </loading>
+  <scroll-view scroll-y="true" bindscrolltolower="loadMoreData" bindscrolltoupper="refreshData">
+    <block wx:for="{{items}}">
+      <view class="col received_events">
+        <view class="row received_event_top">
+          <image class="actor_avatar" mode="aspectFit" src="{{item.actor.avatar_url}}"></image>
+          <view class="col">
+            <view class="actor_name">{{item.actor.display_login}}</view>
+            <text class="action_time">1 hours ago</text>
+          </view>
+        </view>
+        <view class="row received_event_bottom">
+          <text class="action_type">{{item.type}}</text>
+          <view class="action_repo">{{item.repo.name}}</view>
+        </view>
+      </view>
+    </block>
+  </scroll-view>
 </view>

pages/index/index.wxss

@@ -1,20 +1,41 @@
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.container {
+  height: 100%;
+  background: rgba(255,255,255,0.8);
 }
-
-.userinfo-avatar {
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+scroll-view {
+  width: 100%;
+  height: 100%;
+}
+.received_events {
+  border-bottom: 1rpx solid #ccc;
+  padding: 15rpx;
 }
 
-.userinfo-nickname {
-  color: #aaa;
+.received_event_top {
+  color: #5D5D5D;
+}
+.actor_avatar {
+  width: 80rpx;
+  height: 80rpx;
+  margin-right: 30rpx;
+}
+.actor_name {
+  color: #6491CC;
+}
+.action_time {
+  color: #B8B8B8;
+  font-size: 8rpx;
 }
 
-.routes {
-  display: flex;
+.received_event_bottom {
+  margin-top: 10rpx;
+}
+.action_type {
+  font-size: 25rpx;
+  font-weight: bold;
+  margin-right: 20rpx;
+}
+.action_repo {
+  font-size: 16rpx;
+  color: #6491CC;
 }