消息时间格式化

src/App.vue

@@ -56,9 +56,9 @@ export default {
   height: 100vh;
 
   // 字体
-  font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-  background: #000;
+  // background: #000;
 
   // 防止某些浏览器 切换界面时出现滚动条
   overflow: hidden;

src/components/message/index.vue

@@ -2,24 +2,52 @@
   <div class="message">
     <search :autoFixed="false"></search>
     <group :gutter="0">
-      <cell v-for="session in sessionList" :title="session.title"
-      @click.native.stop="$router.push({name: 'chat'})">
-        <img slot="icon" src="" alt="" class="cell-hd__icon">
-        <span slot="inline-desc" class="cell-desc">这段文字很长很长很长很长很长很长很长很长很长很长很长很长</span>
-        <span slot="default" class="cell-time">14:20</span>
+      <cell v-for="session in sessionList"
+        :title="session.name"
+        @click.native.stop="$router.push({name: 'chat'})">
+        <img slot="icon" src="" class="cell-hd__icon">
+        <span slot="inline-desc" class="cell-desc">{{ session | lastMessage | messageText }}</span>
+        <span slot="default" class="cell-time">{{ session | lastMessage | messageTime }}</span>
       </cell>
     </group>
   </div>
 </template>
 
 <script>
 import { Search, Group, Cell } from 'vux'
-
 import { mapState } from 'vuex'
+import { format } from '../../utils'
 
 export default {
   name: 'message',
   computed: mapState(['sessionList']),
+  filters: {
+    lastMessage (session) {
+      const len = session.messages.length
+      return session.messages[len - 1]
+    },
+    messageText: message => message.content.text,
+    messageTime (message) {
+      const date = new Date(message.date)
+      const messageDay = format(date, 'dd')
+      const nowDay = format(new Date(), 'dd')
+      let time
+      switch (nowDay - messageDay) {
+        case 0:
+          time: format(date, 'hh:mm')
+          break
+        case 1:
+          time: '昨天'
+          break
+        case 2:
+          time: '前天'
+          break
+        default:
+          time: format(date, 'MM月dd日')
+      }
+      return time
+    }
+  },
   components: {
     Group,
     Search,
@@ -33,18 +61,13 @@ export default {
 
 .message {
   .cell-hd__icon {
-    width: 48px;
-    height: 48px;
+    width: 48px; height: 48px;
     border: 1px solid #000;
   }
-  .cell-desc {
-    @include textHidden
-  }
+  .cell-desc { @include textHidden }
   .cell-time {
     position: absolute;
-    right: 15px;
-    top: 15px;
-
+    right: 15px; top: 15px;
     font-size: 12px;
   }
 }

src/plugins/WRequest.js

@@ -20,10 +20,10 @@ const ax = axios.create({
 // window.ax = ax
 
 const request = options => {
-  return new Promise(async (resolve, reject) => {
+  return new Promise(async (resolve) => {
+    const loading = options.loading
+    loading && Vue.$loading(typeof loading === 'string' ? loading : null)
     try {
-      const loading = options.loading
-      loading && Vue.$loading(typeof loading === 'string' ? loading : '')
       const res = await ax.request(options)
       loading && Vue.$hide()
       const data = res.data
@@ -33,13 +33,13 @@ const request = options => {
           name: 'login',
           query: { mode: 'dismiss' }
         })
-        reject('未登录')
+        Vue.$toast(data.message || data)
       } else {
         resolve(data)
       }
     } catch (err) {
       loading && Vue.$hide()
-      reject(err)
+      Vue.$toast(err)
     }
   })
 }

src/plugins/common.js

@@ -5,14 +5,16 @@ const plugin = {
     // 注册
     Vue.use(LoadingPlugin)
     Vue.use(ToastPlugin)
-
     // toast
     Vue.prototype.$toast = Vue.$toast = options => {
-      if (options && options.text) {
-        Vue.$vux.toast.show(options)
-      } else {
-        Vue.$vux.toast.text(options, 'bottom')
+      if (!options.text) {
+        options = {
+          type: 'text',
+          text: options,
+          position: 'bottom'
+        }
       }
+      Vue.$vux.toast.show(options)
     }
     // loading
     Vue.prototype.$loading = Vue.$loading = options => {

src/router/index.js

@@ -113,18 +113,10 @@ router.beforeEach(async (to, from, next) => {
     return next()
   }
   if (!from.name || from.path === '/') {
-    // 检查是否登录
-    try {
-      // 检查登陆态
-      await Vue.$check()
-      // 连接socket
-      await Vue.$connect()
-      next()
-    } catch (err) {
-      Vue.$toast(err)
-      router.replace({ name: 'login', query: { mode: 'dismiss' } })
-    }
-  } else {
+    // 检查登陆态
+    await Vue.$check()
+    // 连接socket
+    await Vue.$connect()
     next()
   }
 })

src/utils/index.js

@@ -0,0 +1,18 @@
+export function format(date, fmt) {
+  const obj = {
+    'y{1,4}': date.getFullYear(),
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (const exp in obj) {
+    if (new RegExp(`(${exp})`).test(fmt)) {
+      const res = obj[exp].toString()
+      const $1 = RegExp.$1
+      fmt = fmt.replace($1, `0000${res}`.substr(res.length + 4 - $1.length))
+    }
+  }
+  return fmt
+}

src/vuex/state/index.js

@@ -1,45 +1,44 @@
 
 // 会话列表
 let sessionList = [
-    {
-        title: '聊天室',
-        messages: [
-            {
-                from: '小三',
-                to: '聊天室',
-                content: {
-                    text: '现在方便吗？'
-                },
-                time: '12:00'
-            },
-            {
-                from: '老王',
-                to: '聊天室',
-                content: {
-                    text: '你不要来烦我你不要来烦我你不要来烦我你不要来烦我你不要来烦我你不要来烦我'
-                },
-                time: '12:04'
-            }
-        ]
-    }
+  {
+    id: '12345',
+    name: '聊天室',
+    members: ['moohng', 'qqqqqq'],
+    messages: [
+      {
+        from: { username: 'moohng' },
+        content: {
+          text: '现在方便吗？'
+        },
+        date: 8786785656
+      },
+      {
+        from: { username: 'qqqqqq' },
+        content: {
+          text: '你不要来烦我你不要来烦我你不要来烦我你不要来烦我你不要来烦我你不要来烦我'
+        },
+        date: 232132131
+      }
+    ]
+  }
 ]
 // 好友列表
 let friendList = [
-    'moohng',
-    'b',
-    'bbbbbb'
+  'moohng',
+  'b',
+  'bbbbbb'
 ]
 
 
 let state = {
-    user: {},
-    // 聊天记录
-    sessionList,
+  user: {},
+  // 聊天记录
+  sessionList,
 
-    friendList,
-
-    newFriendList: [],
+  friendList,
 
+  newFriendList: [],
 }
 
 export default state

src/vuex/state/message.json

@@ -1,11 +1,11 @@
 {
-    "from": {
-        "username": "moohng"
-    },
-    "to": {
-        "username": "1"
-    },
-    "info": {
-        "text": "Hey! Nice a day!"
-    }
+  "from": {
+    "username": "moohng"
+  },
+  "to": {
+    "username": "1"
+  },
+  "info": {
+    "text": "Hey! Nice a day!"
+  }
 }

src/vuex/store.js

@@ -9,8 +9,8 @@ import getters from './getters'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-    state,
-    getters,
-    actions,
-    mutations
+  state,
+  getters,
+  actions,
+  mutations
 })