diff --git a/src/App.vue b/src/App.vue index c8635712895be6dfd941910217c7f55ce7bd53ae..15ac07c50f6373756d8a24f0a5d65d7bd6fa5b88 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,21 @@ @@ -17,11 +24,31 @@ import { RouterView } from 'vue-router'; width: 100%; height: 100%; /* background-image: linear-gradient(45deg, rgb(82, 51, 255) 0, rgb(77, 77, 245) 50%, #3ef784 0, #3ef784 60%, #029eef 0, #029eef); */ - background-image: linear-gradient(45deg, rgb(46, 49, 241), rgb(48, 232, 69)); - /* background-image: url("https://i.imgur.com/Jr0xL1l.jpg"); */ + /* background-image: radial-gradient(#ff5400 50%, #c6c1c1); */ + /* background-image: linear-gradient(45deg, rgb(46, 49, 241), rgb(48, 232, 69)); */ + /* background: conic-gradient(rgb(255, 84, 0, 0.7), transparent 100%, #ff9704 100%); */ + /* background: linear-gradient(-45deg, rgba(74, 153, 236, 0.7), #eccc59); */ z-index: 0; display: flex; justify-content: center; align-items: center; } + +.bg-1 { + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + top: 0; + left: 0; +} + +.bg-2 { + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + top: 0; + left: 0; +} diff --git a/src/apis/conversation.js b/src/apis/conversation.js index 22bef261e1f59edf166f6d4985478382f406a929..6fcf9d13cde2cf51dbddb42c0676e22080db01c2 100644 --- a/src/apis/conversation.js +++ b/src/apis/conversation.js @@ -2,7 +2,7 @@ import axios from '../axios/axios'; export function create(joiners) { return axios.post( - '/chat/conversation/create', + '/chat-service/conversation/insert', joiners, @@ -14,7 +14,7 @@ export function create(joiners) { ); } export function getAll(userId) { - return axios.get('/chat/conversation/' + userId, { + return axios.get('/chat-service/conversation/id/' + userId, { headers: { 'Content-Type': 'application/json', }, @@ -22,7 +22,7 @@ export function getAll(userId) { } export function getByConvId(convId) { - return axios.get('/conversation/' + convId + '/message', { + return axios.get('/chat-service/conversation/' + convId + '/message', { headers: { 'Content-Type': 'application/json', }, diff --git a/src/apis/keywords.js b/src/apis/keywords.js index b55b1c43cfacd188e462e9d92735f763748c0023..7bfc69bcbccc47fe246398ba5c8eb3b3de35cf2e 100644 --- a/src/apis/keywords.js +++ b/src/apis/keywords.js @@ -1,7 +1,7 @@ import axios from '../axios/axios'; export function getAll() { - return axios.get('/chat/keyword/question-list', { + return axios.get('/chat-service/keyword/question-list', { headers: { 'Content-Type': 'application/json', }, diff --git a/src/apis/massage.js b/src/apis/massage.js index 8f2519adba529de23a14ea6d1d32c8aec6b1db0e..f6b3067ca765c4afef77aedbb24bf59cb8a6ce29 100644 --- a/src/apis/massage.js +++ b/src/apis/massage.js @@ -1,7 +1,7 @@ import axios from '../axios/axios'; export function getByConvId(convId, page) { - return axios.get('/conversation/' + convId + '/message/page/' + page, { + return axios.get('/chat-service/conversation/' + convId + '/message/page/' + page, { headers: { 'Content-Type': 'application/json', }, diff --git a/src/apis/order.js b/src/apis/order.js new file mode 100644 index 0000000000000000000000000000000000000000..e243e4e8b16f8c94db5ee6101d40b9a3e1493f14 --- /dev/null +++ b/src/apis/order.js @@ -0,0 +1,15 @@ +import axios from '../axios/axios'; + +export function getOrder() { + return axios.post( + 'http://47.113.178.219:13000/order/orderMap', + { + userId: '12', + }, + { + headers: { + 'Content-Type': 'application/json', + }, + } + ); +} diff --git a/src/apis/user.js b/src/apis/user.js index 564ebdd354c9345a6a899de3cbb718cb8f0826c8..fb40c41c92b0a24b227507d9ccbdc4019691ae59 100644 --- a/src/apis/user.js +++ b/src/apis/user.js @@ -9,7 +9,7 @@ import axios from '../axios/axios'; export function login(username, password) { return axios.post( - '/login', + '/chat-service/login', { username, password, @@ -22,19 +22,18 @@ export function login(username, password) { ); } -export function register(username, password) { - console.log(username); - console.log(password); - return axios.post( - '/register', - { - username, - password, +export function saveUser(joiners) { + return axios.post('/chat-service/user/save/batch', joiners, { + headers: { + 'Content-Type': 'application/json', }, - { - headers: { - 'Content-Type': 'application/json', - }, - } - ); + }); +} + +export function getUser(id) { + return axios.get('/chat-service/user/id/' + id, { + headers: { + 'Content-Type': 'application/json', + }, + }); } diff --git a/src/apis/websockeet.js b/src/apis/websockeet.js index 506eabbcd2559214b05080c1d6f917ec10da1752..d729f5011df87d72af7af74049b21cab3e25fa66 100644 --- a/src/apis/websockeet.js +++ b/src/apis/websockeet.js @@ -1,5 +1,7 @@ export function useWebsocket(handleMessage, userId) { - const ws = new WebSocket(`ws://localhost:19000/chat/userId/` + userId); + console.log('ws中的userID ==========================>'); + console.log(userId); + const ws = new WebSocket(`ws://localhost:19000/chat-service/` + parseInt(userId)); // 47.115.211.73 const init = () => { diff --git a/src/assets/img/R-C.jpg b/src/assets/img/R-C.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b558f3f6c6a35a60aa2323efb45c97de4f530767 Binary files /dev/null and b/src/assets/img/R-C.jpg differ diff --git a/src/assets/img/online.png b/src/assets/img/online.png new file mode 100644 index 0000000000000000000000000000000000000000..34e7dd1141e9d248ee7feefc27aa0093b86bb8ff Binary files /dev/null and b/src/assets/img/online.png differ diff --git a/src/assets/img/unonline.png b/src/assets/img/unonline.png new file mode 100644 index 0000000000000000000000000000000000000000..a39ecc4235e45446d47a61d339745e863998fa23 Binary files /dev/null and b/src/assets/img/unonline.png differ diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue index 14d13a7d6a01557e6984a165c63ce05cfbc1e7cd..ff7b19bf680326d126fe62c60c282f1ad7745ea2 100644 --- a/src/layout/components/Header.vue +++ b/src/layout/components/Header.vue @@ -2,8 +2,8 @@ diff --git a/src/merchant/components/AppMain.vue b/src/merchant/components/AppMain.vue new file mode 100644 index 0000000000000000000000000000000000000000..432f1a47cc64043e7e9db74ea26d0f07390fef1d --- /dev/null +++ b/src/merchant/components/AppMain.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/merchant/components/Header.vue b/src/merchant/components/Header.vue new file mode 100644 index 0000000000000000000000000000000000000000..1ede8b70fa553a365094890d31af5c69230b05af --- /dev/null +++ b/src/merchant/components/Header.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/src/merchant/index.vue b/src/merchant/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..0dc6ac8a0840545b266c9420e51542eb4b8abdb9 --- /dev/null +++ b/src/merchant/index.vue @@ -0,0 +1,160 @@ + + + + + + diff --git a/src/router/index.js b/src/router/index.js index 17b622591253f8835bcc14a2c671b8ebe9298d80..5becc1c47c600655e0aad0c0fb654ac7935bd130 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,12 +1,14 @@ import { createRouter, createWebHistory } from 'vue-router'; import LoginView from '../views/customer/LoginView.vue'; import Layout from '../layout/index.vue'; +import Metchant from '../merchant/index.vue'; +import abuoutVue from '../views/customer/abuout.vue'; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { - path: '/', + path: '/login', name: 'login', component: LoginView, }, @@ -30,12 +32,23 @@ const router = createRouter({ ], }, { - path: '/about', + path: '/', name: 'about', // route level code-splitting // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. - component: () => import('../views/customer/abuout.vue'), + component: abuoutVue, + }, + { + path: '/chat', + name: 'chat', + component: Metchant, + children: [ + { + path: '/about', + component: () => import('@/views/customer/about.vue'), + }, + ], }, ], }); diff --git a/src/stores/ws.js b/src/stores/ws.js index c601ede6cdf90755c2e134f5044198b2d698a784..e14041a261fa03aea47ca7ba01d8a8dbb1d63da8 100644 --- a/src/stores/ws.js +++ b/src/stores/ws.js @@ -4,6 +4,9 @@ import { useWebsocket } from '../apis/websockeet'; export default createStore({ state: { userId: null, + username: null, + avatar: null, + userType: null, socket: null, messageList: [], online: [], @@ -25,6 +28,15 @@ export default createStore({ SET_CONV_ID(state, convId) { state.convId = convId; }, + SET_USERNAME(state, username) { + state.username = username; + }, + SET_AVATAR(state, avatar) { + state.avatar = avatar; + }, + SET_USER_TYPE(state, userType) { + state.userType = userType; + }, }, actions: { createWebSocket({ commit, state }, userId) { @@ -34,10 +46,10 @@ export default createStore({ console.log('处理WebSocket消息:', data); } - if (!userId) { - console.error('userId不能为空'); - return; - } + // if (!userId) { + // console.error('userId不能为空'); + // return; + // } // 使用useWebsocket函数创建WebSocket连接 const socket = useWebsocket(handleMessage, userId); @@ -61,15 +73,31 @@ export default createStore({ console.log('_msgData.content.content'); console.log(_msgData.content.content); const _online = _msgData.content.content; + console.log('online =========================>'); + + console.log(_online); commit('ADD_ONLINE', _online); } else if (_msgData.content.typeEnum === 'LINK') { console.log('_msgData.content.content'); + console.log('商品信息=============================>'); + + _msgData.content['content'] = JSON.parse(_msgData.content.content); + // const _link = JSON.parse(_msgData.content.content); + // _msgData.content.content = _link; + console.log(_msgData); + // console.log(_msgData.content.content.id); + // console.log(_link); + commit('ADD_MESSAGE', _msgData); + } else if (_msgData.content.typeEnum === 'ORDER') { + console.log('_msgData.content.content'); + console.log('订单信息=============================>'); - const _link = JSON.parse(_msgData.content.content); - _msgData.content.content = _link; + _msgData.content['content'] = JSON.parse(_msgData.content.content); + // const _link = JSON.parse(_msgData.content.content); + // _msgData.content.content = _link; console.log(_msgData); - console.log(_msgData.content.content.id); - console.log(_link); + // console.log(_msgData.content.content.id); + // console.log(_link); commit('ADD_MESSAGE', _msgData); } // handleMessage(event.data); // 调用handleMessage方法处理接收到的消息 @@ -89,5 +117,17 @@ export default createStore({ updateConvId({ commit }, convId) { commit('SET_CONV_ID', convId); }, + updateUserId({ commit }, userId) { + commit('SET_USER_ID', userId); + }, + updateUserName({ commit }, userName) { + commit('SET_USERNAME', userName); + }, + updateUserAvatar({ commit }, userAvatar) { + commit('SET_AVATAR', userAvatar); + }, + updateUserType({ commit }, userType) { + commit('SET_USER_TYPE', userType); + }, }, }); diff --git a/src/utlis/myUploadAdapter.js b/src/utlis/myUploadAdapter.js index e4aa3c97d4971d3da8f8436cbb0f06b687f134c5..4ba8eb85c38fb671348cb609edeb6d1bb1afa359 100644 --- a/src/utlis/myUploadAdapter.js +++ b/src/utlis/myUploadAdapter.js @@ -1,4 +1,4 @@ -import axios from 'axios' +import axios from 'axios'; function MyUploadAdapter(loader) { let reader; @@ -9,17 +9,16 @@ function MyUploadAdapter(loader) { const file = await loader.file; console.log('------------------'); console.log(file); - const formData = new FormData() - formData.append('file',file) - const res = await axios.post('/api/conversation/img/save',formData,{ - headers:{ - 'Content-Type':'multipart/form-data' - } - }) - const imgUrl = `http://localhost:19000/${res.data.message}` - console.log('imgUrl',imgUrl); - return imgUrl - + const formData = new FormData(); + formData.append('file', file); + const res = await axios.post('/api/conversation/img/save', formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); + const imgUrl = `http://localhost:19000/${res.data.message}`; + console.log('imgUrl', imgUrl); + return imgUrl; }, abort: () => { reader.abort(); @@ -29,15 +28,15 @@ function MyUploadAdapter(loader) { // canvas生成的格式为base64，如果需要Blob格式可按如下进行转化 function dataURLtoBlob(dataurl) { - const arr = dataurl.split(","), - mime = arr[0].match(/:(.*?);/)[1], - bstr = atob(arr[1]); - let n = bstr.length; - const u8arr = new Uint8Array(n); - while (n--) { - u8arr[n] = bstr.charCodeAt(n); - } - return new Blob([u8arr], { type: mime }); + const arr = dataurl.split(','), + mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]); + let n = bstr.length; + const u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + return new Blob([u8arr], { type: mime }); } function MyAdapterPlugin(editor) { diff --git a/src/views/customer/abuout.vue b/src/views/customer/abuout.vue index 444fff2a347b7bf977708c2d592ae0a2978362b5..af4501051af81506f43bc444cb57827d7b35dd67 100644 --- a/src/views/customer/abuout.vue +++ b/src/views/customer/abuout.vue @@ -7,33 +7,82 @@ import { ref } from 'vue'; import { create } from '../../apis/conversation'; import { useRouter, useRoute } from 'vue-router'; +import { saveUser } from '../../apis/user'; const router = useRouter(); const route = useRoute(); -let joiners = [4, 2]; +/** + * 聊天双方的信息 + * 第一个是发起聊天的人，第二个是接受聊天的人 + * { + inputId: 1, 用户ID一定是一个永远不变的属性 + avatar: 'https://ip:port/path/to/image', 头像，完整地址 + name: 'Jack', 用户名 + userTypeEnum: 'USER', 用户类型 USER: 普通用户，SHOP: 实体店，ESHOP：商家，SUPPLIER：供应商 + } + */ +const joiners = [ + { + inputId: 1, + avatar: 'https://ip:port/path/to/image', + name: 'Jack', + userTypeEnum: 'USER', + }, + { + inputId: 2, + avatar: 'https://ip:port/path/to/image', + name: 'aaaa', + userTypeEnum: 'SHOP', + }, +]; const dianji = () => { console.log('点击了'); console.log('test==', joiners); - gteAllList(joiners); + saveUsers(joiners); }; -async function gteAllList(test) { +async function saveUsers(test) { try { - const res = await create(test); + const res = await saveUser(test); + console.log('用户保存响应结果 ========================>'); console.log(res); // 响应成功的处理 if (res.data.code === 19000200) { const message = res.data.data; + console.log('用户保存响应成功结果 =======================>'); console.log(message); - router.push({ - name: 'home', - query: { - userId: route.query.userId, - username: route.query.username, - avatar: route.query.avatar, - }, - }); + const conV = { + userId1: message[0].id, + userId2: message[1].id, + }; + console.log('convID ======================>'); + console.log(conV); + + try { + const res1 = await create(conV); + console.log('创建会话响应结果 ========================>'); + console.log(res1); + + // 响应成功的处理 + if (res1.data.code === 19000200) { + const message1 = res1.data.data; + console.log('创建会话响应成功结果 =======================>'); + console.log(message1); + + router.push({ + name: 'home', + query: { + userId: message[0].id, + }, + }); + } else { + alert(res.data.message); + } + } catch (err) { + console.log(err); + // 响应失败的处理 + } } else { alert(res.data.message); } @@ -42,5 +91,20 @@ async function gteAllList(test) { // 响应失败的处理 } } + +// { +// "发起者":{ +// 'id' : id, +// 'username' : username, +// 'avatar' : avatar, +// 'role' : role, +// }, +// "接收者":{ +// 'id' : id, +// 'username' : username, +// 'avatar' : avatar, +// 'role' : role, +// } +// } diff --git a/src/views/customer/components/AsideMessage.vue b/src/views/customer/components/AsideMessage.vue index 4a7fc194136bdb171a640be373b9d2a469f52385..70203dab00645a43763e672e6bdc428d05580ed7 100644 --- a/src/views/customer/components/AsideMessage.vue +++ b/src/views/customer/components/AsideMessage.vue @@ -36,7 +36,7 @@ const contract = ref('contract'); height: 100%; } .jd-tabs :deep(.el-tabs__item.is-active) { - color: #409eff; + color: #ff5400; } .jd-tabs :deep(.el-tabs__nav-wrap::after) { background-color: lightgray; @@ -49,6 +49,6 @@ const contract = ref('contract'); } .jd-tabs :deep(.el-tabs__active-bar) { top: 0; - background-color: #409eff; + background-color: #ff5400; } diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue index 2e8bba235211aa1ee75ae3fbe4342bfd106c8a6d..05e583fd6dd55f42baa619cfff1d718b24c0938f 100644 --- a/src/views/customer/components/Chat.vue +++ b/src/views/customer/components/Chat.vue @@ -12,7 +12,6 @@