fix(SPA): 修正动态卡片时间

(cherry picked from commit c57333d) # Conflicts: # resources/spa/src/components/FeedCard/FeedCard.vue # resources/spa/src/filters.js
slimkit · Mar 4, 2019 · b9ad1fc · b9ad1fc
1 parent b0c4ce0
commit b9ad1fc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/resources/spa/src/components/FeedCard/FeedCard.vue b/resources/spa/src/components/FeedCard/FeedCard.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="m-box-model m-card" @click="handleView('')">
     <div class="m-box">
-      <div
-        v-if="timeLine"
-        class="m-box-model m-aln-center m-flex-grow0 m-flex-shrink0 m-card-time-line"
-        v-html="timeLineText"
-      />
+      <template v-if="timeLine">
+        <div v-if="isToday" v-text="'今天'" />
+        <div v-else class="timeline-text">
+          <span>{{ time.getDate() }}</span>
+          <span class="month">{{ time.getMonth() + 1 }}月</span>
+        </div>
+      </template>
       <Avatar v-else :user="user" />
       <section class="m-box-model m-flex-grow1 m-flex-shrink1 m-card-main">
         <header v-if="!timeLine" class="m-box m-aln-center m-justify-bet m-card-usr">
@@ -91,11 +93,12 @@
 
 <script>
 import { mapState } from 'vuex'
+import * as api from '@/api/feeds.js'
+import { transTime } from '@/util'
+import { escapeHTML } from '@/filters.js'
 import FeedImage from './FeedImage.vue'
 import FeedVideo from './FeedVideo.vue'
 import CommentItem from './CommentItem.vue'
-import { time2txt, escapeHTML } from '@/filters.js'
-import * as api from '@/api/feeds.js'
 
 export default {
   name: 'FeedCard',
@@ -166,7 +169,14 @@ export default {
       return this.feed.feed_view_count || 0
     },
     time () {
-      return this.feed.created_at
+      let str = this.feed.created_at
+      return transTime(str)
+    },
+    isToday () {
+      // 时间差 = 当前时间 - date (单位: 秒)
+      let offset = (new Date() - this.time) / 1000
+      if (offset / 3600 < 24) return true
+      return false
     },
     user () {
       const user = this.feed.user
@@ -193,16 +203,6 @@ export default {
         this.feed.has_collect = val
       },
     },
-    timeLineText () {
-      const text = time2txt(this.time)
-      const len = text.length
-      return len > 4
-        ? `<span>${text.substr(0, len - 2)}</span><span>${text.substr(
-          -2,
-          2
-        )}</span>`
-        : `<span>${text}</span>`
-    },
     title () {
       return this.feed.title || ''
     },

diff --git a/resources/spa/src/filters.js b/resources/spa/src/filters.js
@@ -1,5 +1,6 @@
 import plueMessageBundle from 'plus-message-bundle'
 import xss from 'xss'
+import { transTime } from '@/util'
 
 /**
  * ThinkSNS Plus 消息解析器，获取顶部消息.
@@ -111,12 +112,7 @@ export const addTimeOffset = date => {
 
 export const time2tips = date => {
   if (typeof date === 'string') {
-    date = date.replace(/-/g, '/') // for safari
-    // match 2018/10/17 01:48:52"
-    if (date.match(/^\d{4}\/\d{2}\/\d{2} \d{2}:\d{2}:\d{2}$/)) {
-      // 如果匹配到服务器返回的时间是非标准格式的祖鲁时间，需要进行本地化
-      date = +new Date(date) - timeOffset
-    }
+    date = transTime(date)
   }
   const time = new Date(date)
   const offset = (new Date().getTime() - time) / 1000

diff --git a/resources/spa/src/util/index.js b/resources/spa/src/util/index.js
@@ -1,3 +1,5 @@
+import { timeOffset } from '@/filters'
+
 /**
  * 空函数
  * 用于默认函数引用判断
@@ -184,3 +186,13 @@ export const generateString = length => {
     .toString(36)
     .substr(2, length)
 }
+
+export const transTime = (date) => {
+  // match 2018/10/17 01:48:52"
+  if (date.match(/^\d{4}[-/]\d{2}[-/]\d{2} \d{2}:\d{2}:\d{2}$/)) {
+    date = date.replace(/-/g, '/') // for safari
+    // 如果匹配到服务器返回的时间是非标准格式的祖鲁时间，需要进行本地化
+    date = +new Date(date) - timeOffset
+  }
+  return new Date(date)
+}