# add index page , plugin of timeago

Author: kai.zhang

src/components/LoadMore/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="scroll-box" v-scroll="scrollParams">
+    <slot></slot>
+    {{isLoading}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loadMore: {
+      type: Function,
+      required: true
+    },
+    offset: {
+      type: Number,
+      default: 50
+    }
+  },
+  data() {
+    return {
+      isLoading: false,
+      isLoadAll: false
+    };
+  },
+  computed: {
+    scrollParams() {
+      return {
+        offset: this.offset,
+        loadMoreFunc: this.loadMore,
+        isLoading: this.isLoading,
+        isLoadAll: this.isLoadAll
+      };
+    }
+  },
+  directives: {
+    scroll: {
+      bind: (el, binding) => {
+        let val = binding.value;
+        el.addEventListener("scroll", () => {
+          if (val.isLoading || val.isLoadAll) {
+            return;
+          }
+          if (el.scrollTop + el.offsetHeight + val.offset > el.scrollHeight) {
+            val.isLoading = true;
+            val.loadMoreFunc({
+              loaded() {
+                val.isLoading = false;
+              },
+              loadAll() {
+                val.isLoadAll = true;
+              }
+            });
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.scroll-box {
+  height: 100%;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
+

src/filters/index.js

@@ -1,3 +1,5 @@
+import timeAgo from '@/utils/timeago';
+
 // 常用数字精度换算
 export function toFixed(val, num = 2) {
   if (isNaN(val)) {
@@ -23,3 +25,8 @@ export function wordLimit(val, limitCount = 9999) {
   }
   return `${tmpStr}${realLen > limitCount ? '...' : ''}`;
 }
+
+
+export function setTimeAgo(val) {
+  return timeAgo(val);
+}

src/pages/index.vue

@@ -1,25 +1,156 @@
 <template>
-  <div>
-123
+  <div class="app-box">
+    <div class="app-flex app-flex-full">
+      <div class="app-tag">
+        <ul class="tag-box">
+          <li class="app-ellipsis">
+            <a href="javascript:;" class="active">
+              <i class="coverImg" :style="{'backgroundImage':'url(https://sfault-avatar.b0.upaiyun.com/399/739/3997397795-5a6edc1c3167f_small)'}"></i>
+              标签0
+            </a>
+          </li>
+          <li class="app-ellipsis" v-for="i in 5" :key="i">
+            <a href="javascript:;">
+              <i class="coverImg" :style="{'backgroundImage':'url(https://sfault-avatar.b0.upaiyun.com/399/739/3997397795-5a6edc1c3167f_small)'}"></i>
+              标签{{i+1}}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-1">
+          <load-more :load-more="loadMore">
+            <ul class="news">
+              <li class="item-card" v-for="(item, $idx) in dataList" :key="$idx">
+                <div class="app-flex app-flex-full">
+                  <div class="item-cover">
+                    <div class="coverImg" :style="{'backgroundImage':`url(${item.coverUrl})`}"></div>
+                  </div>
+                  <div class="col-1 item-section">
+                    <header class="text-cut2">{{item.title}}</header>
+                    <section class="text-cut2">{{item.describ}}</section>
+                    <footer>
+                      <i class="icon-eye"></i>
+                      {{item.viewCount}}
+                      {{item.createTime | setTimeAgo}}
+                    </footer>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </load-more>
+      </div>
+      <div>
+
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+const LoadMore = () => import("@/components/LoadMore/index.vue");
 
 export default {
   data() {
     return {
-
+      count: 100,
+      dataList: []
     };
   },
+  components: {
+    LoadMore
+  },
   methods: {
+    getDataList() {
+      let data = {
+        title: "测试标题",
+        describ:
+          "以前iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi， iOS 9+ 就开始支持 -apple-system 参数了， Chrome 使用 BlinkMacSystemFont ，兼容 iOS/MacOS。现在很多设计师的字体都是PingFang，所以这里...",
+        viewCount: 100,
+        createTime: "1410501101602",
+        coverUrl: "https://segmentfault.com/img/bVbcXWQ?w=500&amp;h=500"
+      };
+      let res = new Array(10).fill(data);
 
+      this.dataList = [...this.dataList, ...res];
+    },
+    loadMore(action) {
+      console.log("loadMore");
+      setTimeout(() => {
+        this.getDataList();
+        action.loaded();
+      }, 2000);
+    }
   },
   mounted() {
+    this.getDataList();
   }
 };
 </script>
 
 <style lang="less" scoped>
-
+.app-box {
+  width: 970px;
+  height: 100%;
+  margin: auto;
+  position: relative;
+}
+.app-tag {
+  width: 120px;
+  padding-right: 20px;
+  .tag-box {
+    a {
+      i {
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        left: 8px;
+        top: 50%;
+        transform: translate(0, -50%);
+      }
+      display: block;
+      position: relative;
+      padding: 8px 0;
+      border-radius: 2px;
+      text-align: center;
+      text-decoration: none;
+      color: #666;
+      transition: all 0.3s ease;
+      &:hover {
+        background-color: #a9c9e2;
+        transition: all 0.3s ease;
+      }
+    }
+  }
+}
+.item-card {
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+  .item-cover div {
+    width: 100px;
+    height: 100px;
+    margin-right: 10px;
+  }
+  .item-section {
+    > header {
+      font-size: 18px;
+      color: #222;
+    }
+    > section {
+      font-size: 13px;
+      color: #888;
+      line-height: 1.5;
+    }
+    > footer {
+      color: #666;
+      i {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        border-radius: 50%;
+        background-color: #eee;
+        color: #fff;
+      }
+    }
+  }
+}
 </style>

src/utils/timeago.js

@@ -0,0 +1,34 @@
+const getTimeAgo = (dateTimeStamp) => {
+  let now = new Date().getTime();
+  let diffValue = now - dateTimeStamp;
+  if (diffValue < 0) {
+    return '未知时间';
+  }
+  let minute = 1000 * 60;
+  let hour = minute * 60;
+  let day = hour * 24;
+  let month = day * 30;
+  let year = month * 12;
+  let yearC = diffValue / year;
+  let monthC = diffValue / month;
+  let weekC = diffValue / (7 * day);
+  let dayC = diffValue / day;
+  let hourC = diffValue / hour;
+  let minC = diffValue / minute;
+  if (yearC >= 1) {
+    return `${~~yearC}年前`;
+  } else if (monthC >= 1) {
+    return `${~~monthC}月前`;
+  } else if (weekC >= 1) {
+    return `${~~weekC}周前`;
+  } else if (dayC >= 1) {
+    return `${~~dayC}天前`;
+  } else if (hourC >= 1) {
+    return `${~~hourC}小时前`;
+  } else if (minC >= 1) {
+    return `${~~minC}分钟前`;
+  }
+  return `刚刚`;
+};
+
+export default getTimeAgo;