AI智能客服集成

README.md

@@ -1,4 +1 @@
->#迅羽科技商品图片前端
->>商品图片第三版本的前端信息多如下内容进行了优化<br>
-    1、商品编辑进行优化<br>
-    2、商品自定义分类、属性对商品可进行快速上新
+>#歌莉娅海外订单中心前端

src/api/oms/ai.js

@@ -0,0 +1,9 @@
+import request from '@/utils/requestOms'
+
+export function createCozeToken(data) {
+  return request({
+    url:  '/coze/create_token',
+    method: 'post',
+    data: data
+  })
+}

src/layout/MenuSingleLayer.vue

@@ -15,6 +15,7 @@
             <div style="margin: 10px 0 0 10px">
               <tags-view v-if="needTagsView" />
               <app-main />
+              <CozeChat></CozeChat>
             </div>
           </div>
         </div>
@@ -30,7 +31,7 @@
 
 <script>
 	import RightPanel from '@/components/RightPanel'
-	import { AppMain, Navbar, Settings, Sidebar, TagsView, HelpWord } from './components'
+	import { AppMain, Navbar, Settings, Sidebar, TagsView, HelpWord,CozeChat } from './components'
 	import SubSidebar from './components/subSidebar'
 	import ResizeMixin from './mixin/ResizeHandler'
   import sidebarA from './components/SidebarA'
@@ -47,7 +48,8 @@
 			SubSidebar,
 			TagsView,
 			HelpWord,
-      sidebarA
+      sidebarA,
+      CozeChat
 		},
 		mixins: [ResizeMixin],
 		computed: {

src/layout/components/ai/layoutAi.vue

@@ -0,0 +1,116 @@
+<template>
+  <div id="coze-chat-container"></div>
+</template>
+
+<script>
+import {createCozeToken} from '@/api/oms/ai'
+import { mapState } from "vuex";
+export default {
+  name: "CozeChat",
+  computed: {
+    ...mapState("user", ["token", "userId", "name","loginName"]),
+  },
+  data: function() {
+    return {
+      botId: "",
+      cozeToken: "",
+    };
+  },
+
+  mounted() {
+    this.getToken().then(() => {
+      console.log('初始化获取Token');
+      this.initCozeChat();
+    });
+  },
+
+  methods: {
+    /**
+     * 获取授权
+     * @returns {Promise<unknown>}
+     */
+    getToken() {
+      let data={
+        userId: this.userId,
+        token: this.token,
+        userName: this.loginName,
+      }
+      return new Promise((resolve, reject) => {
+        createCozeToken(data).then(res => {
+          console.log('扣子Token获取结果', res);
+          if (res.code === 0) {
+            this.cozeToken = res.data.accessToken;
+            this.botId = res.data.botId;
+            resolve();
+          } else {
+            console.error('获取扣子Token失败');
+            reject(new Error('获取 Token 失败'));
+          }
+        }).catch(error => {
+          console.error('获取 Token 时发生错误', error);
+          reject(error);
+        });
+      });
+    },
+    initCozeChat() {
+      if (window.CozeWebSDK) {
+        new window.CozeWebSDK.WebChatClient({
+          config: {
+            bot_id: this.botId,
+          },
+          auth: {
+            type: 'token',
+            token: this.cozeToken,
+            onRefreshToken: () => {
+              this.getToken().then(() => {
+                console.log('刷新Token');
+                return this.cozeToken;
+              });
+            },
+          },
+          ui: {
+            chatBot: {
+              title: 'OMS智能客服',
+              uploadable: false,
+            },
+            base: {
+              layout: 'pc',
+              icon: 'https://gloria-pim-oss.tos-cn-guangzhou.volces.com/omsCoaz.png',
+            },
+            footer: {
+              isShow: true,
+              expressionText: '广州市格风服饰有限公司',
+              // linkvars: {
+              //   name: {
+              //     text: 'WuXi SwiftWings Tech Company Ltd.',
+              //     link: 'https://www.swiftwings.cn/main/index.html#/home'
+              //   }
+              // },
+            }
+          },
+          userInfo: {
+            id: this.userId+"",
+            url: 'https://public-swings.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250221163447.png',
+            nickname: this.name,
+          },
+        });
+      } else {
+        const script = document.createElement("script");
+        script.src = "https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.3/libs/cn/index.js";
+        script.onload = this.initCozeChat;
+        document.body.appendChild(script);
+      }
+    },
+
+
+  },
+};
+</script>
+
+<style scoped>
+#coze-chat-container {
+  position: absolute;
+  right: 10px;
+  bottom: 20px;
+}
+</style>

src/layout/components/index.js

@@ -3,4 +3,5 @@ export { default as Navbar } from './Navbar'
 export { default as Settings } from './Settings'
 export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'
-export { default as HelpWord } from './HelpWord'
+export { default as HelpWord } from './HelpWord'
+export { default as CozeChat } from './ai/layoutAi.vue'

src/store/modules/user.js

@@ -15,6 +15,7 @@ const state = {
   btns: [],
   orgGroup:'',
   orgName:'',
+  userId: ''
 };
 
 const mutations = {
@@ -45,18 +46,22 @@ const mutations = {
   SET_LOGINNAME:(state,loginName)=>{
   	state.loginName = loginName;
   }
+  ,
+  SET_USERID:(state,userId)=>{
+  	state.userId = userId;
+  }
 };
 
 const actions = {
 	// user login
 	login({commit}, userInfo) {
 		const {username,password} = userInfo ;
+    commit('SET_LOGINNAME',username);
 		return new Promise((resolve, reject) => {
 			login({username: username.trim(),password: password}).then(
 				response => {
 					const {data} = response;
 					commit('SET_TOKEN', data.token);
-
 					setToken(data.token);
 					resolve();
 				}).catch(error => {
@@ -86,13 +91,16 @@ const actions = {
         //头像
         commit('SET_AVATAR', data.avatar);
         //用户名
-        commit('SET_LOGINNAME',response.userName);
+        if(response.userName){
+          commit('SET_LOGINNAME',response.userName);
+        }
         //组织名称
         commit('SET_ORGNAME', orgName);
        	//组织角色
         if (orgGroup !== null && orgGroup !== '') {
           commit('SET_ORG_GROUP', orgGroup.orgGroupCode);
         }
+        commit('SET_USERID', data.userId);
 				resolve(response);
 			}).catch(error => {
 				reject(error);