feat: 客服聊天接口对接

.env

@@ -1,2 +1,3 @@
 VITE_BASE_URL=/api
+VITE_SOCKET_URL=wss://k8s-horse-gateway.mashibing.cn/ws
 VITE_REQUEST_TIMEOUT=5000

.env.beta

@@ -1,2 +0,0 @@
-VITE_BASE_URL=https://gateway.mashibing.cn
-VITE_REQUEST_TIMEOUT=20000

.env.prod

@@ -1,2 +1,3 @@
 VITE_BASE_URL=https://you-gateway.mashibing.com
+VITE_SOCKET_URL=wss://you-gateway.mashibing.com/ws
 VITE_REQUEST_TIMEOUT=20000

.env.test

@@ -1,2 +1,3 @@
 VITE_BASE_URL=https://k8s-horse-gateway.mashibing.cn/
+VITE_SOCKET_URL=wss://k8s-horse-gateway.mashibing.cn/ws
 VITE_REQUEST_TIMEOUT=20000

src/api/chat/index.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request.js';
+export const login = (params) => {
+    return request({
+        url: '/im/waiter/getWaiterConnectTicket',
+        method: 'get',
+        params,
+    });
+};

src/configs/index.js

@@ -3,6 +3,10 @@ export default {
      * 接口请求地址前缀
      */
     baseURL: import.meta.env.VITE_BASE_URL,
+    /**
+     * 接口请求地址前缀
+     */
+    socketURL: import.meta.env.VITE_SOCKET_URL,
     /**
      * 接口请求超时时间
      */

src/layouts/default.vue

@@ -23,10 +23,7 @@
     import LayoutMenu from './components/menu.vue';
     import LayoutTabs from './components/tabs.vue';
     const store = useStore();
-    store.dispatch(
-        'chat/connect',
-        'eyJhbGciOiJSUzI1NiJ9.eyJleHAiOjQwNzA4ODAwMDAsImlkIjoyfQ.NlKpMH_bjVHlbj_GfAf196W4GUhpqmHY3efw7W_1F8WQeovw1ZgEeYo_oY24Q38z_yh6WIplq730ohoU5SLkLxdIxC60T9SoHwgmxOdd8w_Mo0ksOcsQs3xLytJca1KVvOfAT_flTjgOe0q5iSJeNCblTY4hsP6dn1aE69pqcng'
-    );
+    store.dispatch('chat/connect');
 </script>
 
 <style lang="less" scoped>

src/store/modules/chat/chat.js

@@ -1,3 +1,5 @@
+import { login } from '@/api/chat';
+import config from '@/configs';
 import { ElMessage } from '@/plugins/element-plus';
 import { UUID } from '@/utils/chat';
 
@@ -9,7 +11,7 @@ const state = () => ({
     sessionData: {},
     currentSession: null,
     messageList: [],
-    messageType: ['', 'text'],
+    messageType: { 1: 'text', 2: 'audio', 3: 'image', 4: 'video', 5: 'revoke', 6: 'custom', 7: 'notify' },
     customerServiceList: [],
     opts: {
         customerServiceType: [
@@ -65,10 +67,11 @@ const actions = {
     /**
      * 创建连接
      */
-    connect: ({ state, commit, dispatch }, token) => {
+    connect: async ({ state, commit, dispatch }) => {
+        let { ticket } = await login({ storeId: 1 });
         return new Promise((resolve, reject) => {
             if (window.WebSocket) {
-                const socket = new WebSocket('ws://192.168.10.93:8090/ws?client=' + token);
+                const socket = new WebSocket(`${config.socketURL}?client=${ticket}&type=2`);
                 socket.onmessage = ({ data }) => {
                     dispatch('receive', data);
                 };

src/views/chat/message.vue

@@ -6,64 +6,78 @@
             '--self': props.message.fromId !== props.session.fromId,
         }"
     >
-        <div class="avatar">
+        <!--  -->
+        <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="avatar">
             <el-avatar :src="props.message.fromAvatar" />
         </div>
         <div class="message-body">
-            <div class="name">
+            <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="name">
                 {{ props.message.fromNickname }}
             </div>
-            <el-card v-if="props.message.type === 'product'" class="shadow">
-                <template #header>
-                    <div class="flex">
-                        <div class="left">商品编号：{{ product.id }}</div>
-                        <el-button type="text">复制</el-button>
-                    </div>
-                </template>
-                <div class="flex">
-                    <el-image :alt="product.name" height="64px" :src="product.mainPicture" width="64px" />
-                    <div class="right">
-                        <div class="name">{{ product.name }}</div>
-                        <div class="price">￥{{ product.startingPrice }}</div>
-                    </div>
-                </div>
-                <div class="footer">
-                    <el-button>商品规格属性</el-button>
-                </div>
-            </el-card>
-            <el-card v-else-if="props.message.type === 'order'" class="shadow">
-                <template #header>
+            <template v-if="messageType[props.message.type] === 'custom'">
+                <el-card
+                    v-if="store.getters['chat/parseContent'](props.message.payload).type === 'product'"
+                    class="shadow"
+                >
+                    <template #header>
+                        <div class="flex">
+                            <div class="left">商品编号：{{ product.id }}</div>
+                            <el-button type="text">复制</el-button>
+                        </div>
+                    </template>
                     <div class="flex">
-                        <div class="status">{{ order.orderStatusDesc }}</div>
-                        <div class="service">售后中</div>
+                        <el-image :alt="product.name" height="64px" :src="product.mainPicture" width="64px" />
+                        <div class="right">
+                            <div class="name">{{ product.name }}</div>
+                            <div class="price">￥{{ product.startingPrice }}</div>
+                        </div>
                     </div>
-                    <div class="flex">
-                        <div class="no">订单编号：{{ order.orderNo }}</div>
-                        <el-button type="text">复制</el-button>
+                    <div class="footer">
+                        <el-button>商品规格属性</el-button>
                     </div>
-                </template>
-                <div class="flex">
-                    <el-image :alt="order.product.name" height="64px" :src="order.product.mainPicture" width="64px" />
-                    <div class="right">
+                </el-card>
+                <el-card
+                    v-if="store.getters['chat/parseContent'](props.message.payload).type === 'order'"
+                    class="shadow"
+                >
+                    <template #header>
                         <div class="flex">
-                            <div class="name">{{ order.product.name }}</div>
-                            <div class="price">￥{{ order.product.startingPrice }}</div>
+                            <div class="status">{{ order.orderStatusDesc }}</div>
+                            <div class="service">售后中</div>
                         </div>
                         <div class="flex">
-                            <div class="sku">{{ order.product.sku || '默认规格' }}</div>
-                            <div class="count">x{{ order.count || 1 }}</div>
+                            <div class="no">订单编号：{{ order.orderNo }}</div>
+                            <el-button type="text">复制</el-button>
                         </div>
+                    </template>
+                    <div class="flex">
+                        <el-image
+                            :alt="order.product.name"
+                            height="64px"
+                            :src="order.product.mainPicture"
+                            width="64px"
+                        />
+                        <div class="right">
+                            <div class="flex">
+                                <div class="name">{{ order.product.name }}</div>
+                                <div class="price">￥{{ order.product.startingPrice }}</div>
+                            </div>
+                            <div class="flex">
+                                <div class="sku">{{ order.product.sku || '默认规格' }}</div>
+                                <div class="count">x{{ order.count || 1 }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="footer">
+                        <el-button>查看详情</el-button>
                     </div>
-                </div>
-                <div class="footer">
-                    <el-button>查看详情</el-button>
-                </div>
-            </el-card>
+                </el-card>
+            </template>
             <div v-else class="content" :class="{ shadow: messageType[props.message.type] === 'text' }">
                 {{ store.getters['chat/parseContent'](props.message.payload) }}
             </div>
         </div>
-        <div v-if="props.message.type !== 7" class="time">
+        <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="time">
             {{ store.getters['chat/parseTime'](props.message.createTimeStamp) }}
         </div>
     </div>

vite.config.js

@@ -23,9 +23,9 @@ export default (configEnv) => {
                     // target: 'http://192.168.10.109:8090/', // 显雨
                     // target: 'http://192.168.10.251:8090', // 高玉
                     // target: 'http://192.168.10.67:8090', // 罗战
-                    // target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
-                    // target: 'https://gateway.mashibing.cn', // 预发地址
-                    target: 'https://you-gateway.mashibing.com', // 生产环境
+                    // target: 'http://192.168.10.93:8090', // 周渺
+                    target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
+                    // target: 'https://you-gateway.mashibing.com', // 生产环境
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api/, ''),
                 },