feat: 聊天消息列表

public/index.html

@@ -18,7 +18,7 @@
   </noscript>
   <div id="app"></div>
   <script
-    src="//at.alicdn.com/t/font_2711356_646lbv1qwmi.js"></script>
+    src="//at.alicdn.com/t/font_2711356_ja0j0zte6tr.js"></script>
   <!-- built files will be auto injected -->
 </body>
 

src/components/ChatList/ChatListItem.vue

+<template>
+    <div class="flex chatlistitem relative -mr-1">
+        <div class="self-center mr-4 flex-shrink-0">
+            <img class="w-10 h-10 rounded-md object-cover" :src="avatar_url" alt="avatar" />
+        </div>
+        <div class="flex-grow border-b border-gray-400 overflow-hidden pr-1">
+            <div class="flex justify-between mt-5">
+                <div class="id">{{ id }}</div>
+                <div class="txt">{{ latest_msg_timeStamp && timestampFormat(latest_msg_timeStamp) }}</div>
+            </div>
+            <div class="flex justify-between mb-5 mt-1">
+                <div
+                    class="overflow-hidden overflow-ellipsis whitespace-nowrap txt"
+                >{{ latest_msg_content }}</div>
+                <div
+                    v-if="unReadMsgNum"
+                    class="dot flex items-center justify-center rounded-full flex-shrink-0 flex-grow-0 px-1"
+                >{{ unReadMsgNum }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { timestampFormat } from "@/utils/time";
+const props = defineProps({
+    avatar_url: { type: String, default: '--' },
+    id: { type: String, default: '--' },
+    latest_msg_timeStamp: {
+        type: Number,
+        default: new Date().getTime() - 1000 * 60,
+    },
+    latest_msg_content: { type: String, default: '--' },
+    unReadMsgNum: {
+        type: Number,
+        default: 10
+    },
+})
+
+</script>
+<style lang="less">
+.chatlistitem {
+    .id {
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+    }
+    .txt {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #8d92af;
+    }
+    .dot {
+        height: 20px;
+        min-width: 20px;
+        background: #f03a30;
+        box-shadow: 0px 4px 6px 0px rgba(240, 58, 48, 0.5);
+        font-size: 12px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+    }
+}
+</style>
\ No newline at end of file

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import 'tailwindcss/tailwind.css'
 import { NoticeBar, Popup, Search, Swipe, SwipeItem, Toast } from 'vant'
-import "@/assets/styles/style.less"
+import '@/assets/styles/style.less'
 import { Quasar } from 'quasar'
 import quasarConfig from './plugins/quasar-config'
 import '@/assets/styles/style.less'
@@ -19,7 +19,6 @@ import '@quasar/extras/ionicons-v4/ionicons-v4.css'
 // import '@quasar/extras/mdi-v4/mdi-v4.css'
 import '@quasar/extras/eva-icons/eva-icons.css'
 
-
 createApp(App)
   .use(router)
   .use(NoticeBar)

src/router/index.ts

@@ -32,6 +32,14 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "mine" */ '@/views/withMenu/Loan/index.vue'
           ),
       },
+      {
+        path: '/chatList',
+        name: 'ChatList',
+        component: () =>
+          import(
+            /* webpackChunkName: "chatList" */ '@/views/withMenu/ChatList/index.vue'
+          ),
+      },
     ],
   },
   {
@@ -47,32 +55,32 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/activityList',
     name: 'ActivityList',
-    component: ()=>import("@/views/ActivityList/index.vue")
+    component: () => import('@/views/ActivityList/index.vue'),
   },
   {
     path: '/activityDetail',
     name: 'ActivityDetail',
-    component: ()=>import("@/views/ActivityDetail/index.vue")
+    component: () => import('@/views/ActivityDetail/index.vue'),
   },
   {
     path: '/policySupport',
     name: 'PolicySupport',
-    component: ()=>import("@/views/PolicySupport/index.vue")
+    component: () => import('@/views/PolicySupport/index.vue'),
   },
   {
     path: '/news',
     name: 'News',
-    component: ()=>import("@/views/News/index.vue")
+    component: () => import('@/views/News/index.vue'),
   },
   {
     path: '/newsDetail',
     name: 'NewsDetail',
-    component: ()=>import("@/views/NewsDetail/index.vue")
+    component: () => import('@/views/NewsDetail/index.vue'),
   },
   {
     path: '/search',
     name: 'Search',
-    component: ()=>import("@/views/Search/index.vue")
+    component: () => import('@/views/Search/index.vue'),
   },
   {
     path: '/auth',
@@ -134,12 +142,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/branch',
     name: 'Branch',
-    component: ()=>import("@/views/withMenu/Mine/branch.vue")
+    component: () => import('@/views/withMenu/Mine/branch.vue'),
   },
   {
     path: '/chat',
     name: 'Chat',
-    component: ()=>import("@/views/Chat/Chat.vue")
+    component: () => import('@/views/Chat/Chat.vue'),
   },
   {
     path: '/:pathMatch(.*)*',

src/types/roleType.ts

+export enum eRole {
+  user,
+  serviceManager,
+}

src/types/userMsg.ts

+import { eRole } from "./roleType";
+
 export interface iUserMsg {
   token: string
+  role: eRole
   userInfo: any
 }

src/utils/time.ts

+export function timestampFormat(timestamp: number) {
+  if (String(timestamp).length === new Date().getTime().toString().length) {
+    timestamp /= 1000
+  }
+
+  function zeroize(num: number) {
+    return (String(num).length == 1 ? '0' : '') + num
+  }
+
+  var curTimestamp = new Date().getTime() / 1000 //当前时间戳
+  var timestampDiff = curTimestamp - timestamp // 参数时间戳与当前时间戳相差秒数
+
+  var curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
+  var tmDate = new Date(timestamp * 1000) // 参数时间戳转换成的日期对象
+
+  var Y = tmDate.getFullYear(),
+    m = tmDate.getMonth() + 1,
+    d = tmDate.getDate()
+  var H = tmDate.getHours(),
+    i = tmDate.getMinutes(),
+    s = tmDate.getSeconds()
+
+  if (timestampDiff < 60) {
+    // 一分钟以内
+    return '刚刚'
+  } else if (timestampDiff < 3600) {
+    // 一小时前之内
+    return Math.floor(timestampDiff / 60) + '分钟前'
+  } else if (
+    curDate.getFullYear() == Y &&
+    curDate.getMonth() + 1 == m &&
+    curDate.getDate() == d
+  ) {
+    return '今天' + zeroize(H) + ':' + zeroize(i)
+  } else {
+    var newDate = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
+    if (
+      newDate.getFullYear() == Y &&
+      newDate.getMonth() + 1 == m &&
+      newDate.getDate() == d
+    ) {
+      return '昨天' + zeroize(H) + ':' + zeroize(i)
+    } else if (curDate.getFullYear() == Y) {
+      return (
+        zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
+      )
+    } else {
+      return (
+        Y +
+        '年' +
+        zeroize(m) +
+        '月' +
+        zeroize(d) +
+        '日 ' +
+        zeroize(H) +
+        ':' +
+        zeroize(i)
+      )
+    }
+  }
+}

src/views/withMenu/ChatList/index.vue

+<template>
+    <Navbar title="我的客户" :showBackIcon="false" style="background-color: #F7F7FA !important;" />
+    <div class="mx-5">
+        <ChatListItem></ChatListItem>
+        <ChatListItem></ChatListItem>
+        <ChatListItem></ChatListItem>
+        <ChatListItem></ChatListItem>
+        <ChatListItem></ChatListItem>
+    </div>
+</template>
+<script lang="ts" setup>
+import Navbar from "@/components/NavBar/index.vue"
+import ChatListItem from "@/components/ChatList/ChatListItem.vue"
+
+
+</script>
\ No newline at end of file

src/views/withMenu/index.vue

@@ -3,17 +3,15 @@
     <div class="flex-grow overflow-auto">
       <router-view />
     </div>
-    <TabBar
-      :list="tabList"
-      :activeTabRouteName="activeTabRouteName"
-      class="mt-1 flex-shrink-0"
-    />
+    <TabBar :list="tabList" :activeTabRouteName="activeTabRouteName" class="mt-1 flex-shrink-0" />
     <div class="h-4 flex-shrink-0"></div>
   </div>
 </template>
 
-<script>
-import  { defineComponent } from "vue";
+<script lang="ts">
+import { eRole } from "@/types/roleType";
+import { getUserMsg } from "@/utils/userMsg";
+import { defineComponent } from "vue";
 import TabBar from "./Components/TabBar/index.vue";
 import tabList from "./tabList";
 
@@ -21,16 +19,15 @@ export default defineComponent({
   components: {
     TabBar,
   },
-  data() {
-    return {
-      tabList,
-    };
-  },
-  mounted() {},
+  mounted() { },
   computed: {
     activeTabRouteName() {
       return this.$route.name;
     },
+    tabList() {
+      const user = getUserMsg()
+      return (user && tabList.filter(i => i.roles.includes(user.role))) || tabList.filter(i => i.showNotLogin);
+    },
   },
 });
 </script>

src/views/withMenu/tabList.ts

+import { eRole } from '@/types/roleType'
+
 export default [
   {
     name: '首页',
     routeName: 'Home',
     icon: 'icon-shouye-tab-xuanze1',
+    roles: [eRole.user, eRole.serviceManager],
+    showNotLogin: true,
+  },
+  {
+    name: '聊天',
+    routeName: 'ChatList',
+    icon: 'icon-liaotian-dianji',
+    roles: [eRole.serviceManager, eRole.user],
   },
-  // {
-  //   name: '理财',
-  //   routeName: 'FinancialManagement',
-  //   icon: 'icon-licai-tabxuanze',
-  // },
   {
     name: '贷款',
     routeName: 'Loan',
     icon: 'icon-daikuan-tab-xuanze',
+    roles: [eRole.user, eRole.serviceManager],
+    showNotLogin: true,
   },
   {
     name: '我的',
     routeName: 'Mine',
     icon: 'icon-wode-tabdianji',
+    roles: [eRole.user, eRole.serviceManager],
+    showNotLogin: true,
   },
 ]