1

src/store/chat.js

@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  chat: `/capi/chat`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.chat}`, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.chat}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.chat}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.chat}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.chat}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/customer.js

@@ -14,6 +14,10 @@ const actions = {
     const res = await this.$axios.$get('/capi/getRecord', payload);
     return res;
   },
+  async createChat({ commit }, payload) {
+    const res = await this.$axios.$post('/capi/chat', payload);
+    return res;
+  },
 };
 export default {
   namespaced: true,

src/store/index.js

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

src/views/customer/index.vue

@@ -11,7 +11,7 @@
           <el-col :span="24" class="left_2">
             <el-col :span="24" class="list" v-for="(item, index) in userList" :key="index" @click.native="chatBtn(item)">
               <el-col :span="4" class="icon">
-                <el-image :src="rightIcon"></el-image>
+                <el-image :src="leftIcon"></el-image>
               </el-col>
               <el-col :span="20" class="info">
                 <el-col :span="24" class="name textOver">
@@ -27,14 +27,14 @@
         <el-col :span="20" class="right">
           <el-col :span="24" class="right_1">
             <el-col :span="1" class="icon">
-              <el-image :src="rightIcon"></el-image>
+              <el-image :src="leftIcon"></el-image>
             </el-col>
             <el-col :span="23" class="info">
               <el-col :span="24" class="name">
-                姓名
+                {{ chatUserInfo.client_name }}
               </el-col>
               <el-col :span="24" class="date textOver">
-                2021-01-01
+                {{ getTime(chatUserInfo) }}
               </el-col>
             </el-col>
           </el-col>
@@ -99,39 +99,15 @@ export default {
       leftIcon: require('@a/rightIcon.png'),
       // 用户头像
       rightIcon: require('@a/leftIcon.png'),
-      userList: [
-        { name: '你好', renew_time: '2021-01-01' },
-        { name: '我不好', renew_time: '2021-01-01' },
-        { name: '你就好', renew_time: '2021-01-01' },
-      ],
+      // 用户列表
+      userList: [],
       // 聊天列表
-      chatList: [
-        {
-          id: '客服',
-          sender_name: '客服',
-          content: '信息内容1',
-        },
-        {
-          id: '用户',
-          sender_name: '用户',
-          content: '信息内容2',
-        },
-        {
-          id: '客服',
-          sender_name: '客服',
-          content: '信息内容3',
-        },
-        {
-          id: '用户',
-          sender_name: '用户',
-          content: '信息内容4',
-        },
-      ],
+      chatUserInfo: {},
+      chatList: [],
       content: '',
     };
   },
   created() {
-    this.search();
     this.toOnline();
     this.getClientList();
   },
@@ -139,13 +115,10 @@ export default {
     this.channel();
   },
   methods: {
-    ...customer(['online', 'record']),
-    search({ skip = 0, limit = 10, ...info } = {}) {
-      if (this.searchName) info.name = this.searchName;
-      console.log(info);
-    },
+    ...customer(['online', 'record', 'createChat']),
+    search() {},
     chatBtn(data) {
-      console.log(data);
+      this.$set(this, `chatUserInfo`, data);
     },
     // 区分发言人
     isSender(data) {
@@ -158,7 +131,6 @@ export default {
         this.$set(this, `userList`, res.data);
       }
     },
-
     channel() {
       this.$stomp({
         [`/exchange/${this._tenant}/customer.${this.user.id}`]: this.onMessage,
@@ -183,14 +155,30 @@ export default {
       return moment(ct).format('YYYY-MM-DD HH:mm:ss');
     },
     // 发言
-    send() {
+    async send() {
       if (!this.content) {
         this.$message({
           message: '发言内容不能为空',
           type: 'warning',
         });
       } else {
-        console.log(this.content);
+        console.log(this.chatUserInfo);
+        let data = {
+          _tenant: this._tenant,
+          client_id: this.chatUserInfo.client_id,
+          customer_id: this.chatUserInfo.customer_id,
+          sender_id: this.chatUserInfo.customer_id,
+          sender_name: this.user.name,
+          content: this.content,
+        };
+        let res = await this.createChat(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '消息发送成功',
+            type: 'success',
+          });
+          this.content = '';
+        }
       }
     },
   },