updarte

.env

@@ -1,2 +1,2 @@
 VUE_APP_AXIOS_BASE_URL = ''
-VUE_APP_ROUTER="/customeradmin"
+VUE_APP_ROUTER="customeradmin"

package.json

@@ -8,12 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@stomp/stompjs": "^6.1.0",
     "axios": "^0.20.0",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.20",
+    "moment": "^2.29.1",
     "naf-core": "^0.1.2",
     "qrcode": "^1.4.4",
     "vue": "^2.6.11",

src/main.js

@@ -4,6 +4,8 @@ import router from './router';
 import store from './store';
 import ElementUI from 'element-ui';
 import VueI18n from 'vue-i18n';
+import InitStomp from '@/plugins/stomp';
+InitStomp();
 import '@/plugins/axios';
 import '@/plugins/check-res';
 import '@/plugins/meta';

src/plugins/setting.js

@@ -10,7 +10,7 @@ Vue.config.stomp = {
   // brokerURL: 'ws://http://free.liaoningdoupo.com/ws',
   brokerURL: '/ws', // ws://${location.host}/ws
   connectHeaders: {
-    host: 'visit',
+    host: 'platform',
     login: 'visit', //visit
     passcode: 'visit', //visit123
   },

src/plugins/stomp.js

@@ -5,7 +5,7 @@
 import Vue from 'vue';
 import _ from 'lodash';
 import assert from 'assert';
-import { Client } from '@stomp/stompjs/esm5/client';
+import { Client } from '@stomp/stompjs/esm6/client';
 
 const Plugin = {
   install(Vue, options) {

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router';
 Vue.use(Router);
 export default new Router({
   mode: 'history',
-  base: process.env.NODE_ENV === 'development' ? '' : 'customeradmin',
+  base: process.env.VUE_APP_ROUTER,
   routes: [
     {
       path: '/',

src/store/customer.js

@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async online({ commit }, payload) {
+    const res = await this.$axios.$get('/capi/customer', payload);
+    return res;
+  },
+  async record({ commit }, payload) {
+    const res = await this.$axios.$get('/capi/getRecord', payload);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -1,12 +1,13 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import customer from './customer';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: { ...ustate },
+  state: { ...ustate, _tenant: 'platform' },
   mutations: { ...umutations },
   actions: {},
-  modules: {},
+  modules: { customer },
 });

src/store/user/state.js

@@ -1,2 +1,5 @@
-export const user = {};
+export const user = {
+  id: '5f6ad08fbe2d3b407b41a693',
+  name: '客服1',
+};
 export const menuList = [];

src/views/customer/index.vue

@@ -15,10 +15,10 @@
               </el-col>
               <el-col :span="20" class="info">
                 <el-col :span="24" class="name textOver">
-                  {{ item.name }}
+                  {{ item.client_name }}
                 </el-col>
                 <el-col :span="24" class="date textOver">
-                  {{ item.renew_time }}
+                  {{ getTime(item) }}
                 </el-col>
               </el-col>
             </el-col>
@@ -78,7 +78,10 @@
 </template>
 
 <script>
+const _ = require('lodash');
+const moment = require('moment');
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: customer } = createNamespacedHelpers('customer');
 export default {
   name: 'index',
   props: {},
@@ -123,8 +126,14 @@ export default {
   },
   created() {
     this.search();
+    this.toOnline();
+    this.getClientList();
+  },
+  mounted() {
+    this.channel();
   },
   methods: {
+    ...customer(['online', 'record']),
     search({ skip = 0, limit = 10, ...info } = {}) {
       if (this.searchName) info.name = this.searchName;
       console.log(info);
@@ -136,9 +145,40 @@ export default {
     isSender(data) {
       return data.id == '客服';
     },
+    //获取客户列表
+    async getClientList() {
+      const res = await this.record({ _tenant: this._tenant, customer_id: this.user.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `userList`, res.data);
+      }
+    },
+
+    channel() {
+      this.$stomp({
+        [`/exchange/${this._tenant}/customer.${this.user.id}`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      // customer/5f6ad08fbe2d3b407b41a693
+      console.log('receive a message: ', message.body);
+      if (message.body === 'research') this.getClientList();
+    },
+
+    async toOnline() {
+      console.log('in function:');
+      const time = 5000; //1min 600000
+      setInterval(() => {
+        this.online({ _tenant: this._tenant, customer_id: this.user.id });
+      }, time);
+    },
+    getTime(item) {
+      const ct = _.get(item.meta, 'createdAt');
+      if (!ct) return;
+      return moment(ct).format('YYYY-MM-DD HH:mm:ss');
+    },
   },
   computed: {
-    ...mapState(['user']),
+    ...mapState(['user', '_tenant']),
   },
   metaInfo() {
     return { title: this.$route.meta.title };

vue.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  publicPath: process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_ROUTER,
+  publicPath: `/${process.env.VUE_APP_ROUTER}`,
   // 打包文件
   outputDir: 'customeradmin',
   configureWebpack: config => {
@@ -22,9 +22,8 @@ module.exports = {
       '/files': {
         target: 'http://broadcast.waityou24.cn',
       },
-      '/api': {
-        target: 'http://broadcast.waityou24.cn',
-        changeOrigin: true,
+      '/capi': {
+        target: 'http://192.168.1.19:9106',
         ws: false,
       },
       '/ws': {