From 5d7985444198a05809669775a87731fe7ca549f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Fri, 18 Aug 2023 16:05:58 +0800
Subject: [PATCH 01/13] =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=8F=91=E9=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utlis/myUploadAdapter.js                  | 104 ++++--------------
 src/views/customer/components/ConsultItem.vue | 100 +++++------------
 src/views/customer/components/Operation.vue   |  79 ++++++++++++-
 3 files changed, 125 insertions(+), 158 deletions(-)

diff --git a/src/utlis/myUploadAdapter.js b/src/utlis/myUploadAdapter.js
index e7f4517..4ba8eb8 100644
--- a/src/utlis/myUploadAdapter.js
+++ b/src/utlis/myUploadAdapter.js
@@ -1,3 +1,5 @@
+import axios from 'axios';
+
 function MyUploadAdapter(loader) {
 	let reader;
 
@@ -5,76 +7,18 @@ function MyUploadAdapter(loader) {
 		upload: async () => {
 			reader = new FileReader();
 			const file = await loader.file;
-
-			// console.log(loader,file,reader,'loader,file,reader')
-
-			const result = await new Promise((resolve, reject) => {
-				reader.addEventListener('load', () => {
-					// 检查图片大小de
-					if (file.size > 2 * 1024 * 1024) {
-						// 2MB
-						// 图片大小超出限制，不执行上传
-						reject('图片大小超过限制');
-					} else {
-						// 加载图片
-						const img = new Image();
-						img.src = reader.result;
-						img.onload = () => {
-							const maxDimension = 300;
-							// 最大尺寸maxDimension,可以根据需要调整这个值来控制压缩后的图片尺寸
-							let newWidth = img.width;
-							let newHeight = img.height;
-
-							if (newWidth > newHeight) {
-								if (newWidth > maxDimension) {
-									newHeight *= maxDimension / newWidth;
-									newWidth = maxDimension;
-								}
-							} else {
-								if (newHeight > maxDimension) {
-									newWidth *= maxDimension / newHeight;
-									newHeight = maxDimension;
-								}
-							}
-							const canvas = document.createElement('canvas');
-							//设置canvas尺寸为压缩后的尺寸
-							canvas.width = newWidth;
-							canvas.height = newHeight;
-							const ctx = canvas.getContext('2d');
-							// canvas中，png转jpg会变黑底，所以先给canvas铺一张白底
-							ctx.fillStyle = '#fff';
-							// fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在
-							// (x, y) ，它的宽度和高度分别由width 和 height 确定，填充样式由当前的fillStyle 决定。
-							ctx.fillRect(0, 0, canvas.width, canvas.height);
-							// 绘制图像
-							ctx.drawImage(img, 0, 0, newWidth, newHeight);
-							// canvas转图片达到图片压缩效果
-							// 返回一个包含图片展示的 data URI base64 在指定图片格式为 image/jpeg 或 image/webp的情况下，
-							// 可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
-							const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
-
-							// base64格式文件转成Blob文件格式
-							// const blobFile = dataURLtoBlob(dataUrl);
-							// 拿到这个blobFile文件也可以作为返回值
-
-							resolve({ default: dataUrl });
-						};
-					}
-				});
-
-				reader.addEventListener('error', (err) => {
-					reject(err);
-				});
-
-				reader.addEventListener('abort', () => {
-					reject();
-				});
-				// readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，
-				// 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
-				reader.readAsDataURL(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',
+				},
 			});
-
-			return result;
+			const imgUrl = `http://localhost:19000/${res.data.message}`;
+			console.log('imgUrl', imgUrl);
+			return imgUrl;
 		},
 		abort: () => {
 			reader.abort();
@@ -83,17 +27,17 @@ 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 });
-// }
+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 });
+}
 
 function MyAdapterPlugin(editor) {
 	editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 1a75df6..9b0d244 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/attributes-order -->
 <!-- 单个商品组件 -->
 
 <template>
@@ -7,11 +6,8 @@
 		<div class="right">
 			<div class="title" @click="detailPage(id)">{{ goodsName }}</div>
 			<div class="bottom">
-				<div class="price" v-if="price !== null">￥{{ price }}</div>
-				<div class="price" v-else></div>
-				<div style="clear: both; overflow: hidden">
-					<el-button style="display: block; float: right" size="small" @click="sengGood(id, goodsName, price, goodsCover)">发送</el-button>
-				</div>
+				<div class="price">￥{{ price }}</div>
+				<div class="buttom"><button class="buttom">发送</button></div>
 			</div>
 		</div>
 	</div>
@@ -19,13 +15,13 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import wsStore from '../../../stores/ws';
-import { ref, onMounted } from 'vue';
+
 const router = useRouter();
 
 /**
  * 接收consult.vue传过来的商品信息
  */
+// eslint-disable-next-line no-unused-vars
 const props = defineProps({
 	// eslint-disable-next-line vue/require-default-prop
 	id: {
@@ -43,10 +39,6 @@ const props = defineProps({
 	price: {
 		type: Number,
 	},
-	// eslint-disable-next-line vue/require-default-prop
-	content: {
-		type: String,
-	},
 });
 
 /**
@@ -55,57 +47,12 @@ const props = defineProps({
  */
 const detailPage = (id) => {
 	console.log(id);
-	// router.push({
-	// 	name: 'text',
-	// 	query: {
-	// 		id: id,
-	// 	},
-	// });
-	let url = 'http://8.130.95.183:5173/#/LogisticsManage?id=' + id;
-	window.location.href = url;
-};
-
-const socket = ref(null);
-const convId = ref(null);
-onMounted(() => {
-	console.log(props.id);
-	socket.value = wsStore.state.socket;
-	if (props.content !== null) {
-		console.log('聊天content ====================》');
-		console.log(props.content);
-		// const conten = JSON.parse(props.content);
-		// // eslint-disable-next-line vue/no-mutating-props
-		// props.id = conten.id;
-		// // eslint-disable-next-line vue/no-mutating-props
-		// props.goodsCover = conten.image;
-		// // eslint-disable-next-line vue/no-mutating-props
-		// props.goodsName = conten.name;
-		// props.price = content.price;
-	}
-});
-
-/**
- * 发送商品
- * @param {number} id
- * @param {string} goodsName
- * @param {number} price
- */
-const sengGood = (id, goodsName, price, goodsCover) => {
-	convId.value = wsStore.state.convId;
-	socket.value.send(
-		JSON.stringify({
-			conversationId: convId.value,
-			content: {
-				typeEnum: 'LINK', // ONLINE
-				content: {
-					id: id,
-					goodsName: goodsName,
-					price: price,
-					image: goodsCover,
-				}, // []
-			},
-		})
-	);
+	router.push({
+		name: 'text',
+		query: {
+			id: id,
+		},
+	});
 };
 </script>
 
@@ -119,21 +66,20 @@ const sengGood = (id, goodsName, price, goodsCover) => {
 	border-bottom: solid 1px lightgray;
 	margin-top: 20px;
 	cursor: pointer;
-	padding: 1px;
 }
 
 .left {
-	width: 80px;
-	height: 80px;
+	width: 100px;
+	height: 100px;
 }
 
 .img {
-	width: 80px;
-	height: 80px;
+	width: 100px;
+	height: 100px;
 }
 
 .right {
-	width: 150px;
+	width: 200px;
 	height: 60px;
 	display: flex;
 	flex-direction: column;
@@ -142,20 +88,30 @@ const sengGood = (id, goodsName, price, goodsCover) => {
 .title {
 	font-size: smaller;
 	max-lines: 2;
-	min-height: 40px;
 }
 
 .bottom {
 	width: 100%;
-	height: 30px;
+	height: 40px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	margin-top: 10px;
+	margin-top: 20px;
 }
 
 .price {
 	color: #ff534c;
 	font-size: large;
 }
+
+.buttom {
+	width: 60px;
+	height: 30px;
+	font-size: smaller;
+	background-color: white;
+	border: solid 1px lightgray;
+	border-radius: 5px;
+	color: gray;
+	cursor: pointer;
+}
 </style>
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index adfb293..be17bfb 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -31,12 +31,12 @@ import { sendMessage } from '../../../apis/sendMessage';
 import { ref, reactive, onMounted, watch } from 'vue';
 import { useWebsocket } from '../../../apis/websockeet';
 import { useRoute } from 'vue-router';
-
+import axios from 'axios';
 import { component as ckeditor } from '@ckeditor/ckeditor5-vue'; //ckeditor5组件插件
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; //ckeditor5经典版
 import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'; //中文包
 //图片文件适配器插件
-import MyAdapterPlugin from '../../../utlis/myUploadAdapter';
+// import MyAdapterPlugin from '../../../utlis/myUploadAdapter';
 
 import { storeToRefs } from 'pinia';
 import useCkeditor from '../../../stores/ckeditor';
@@ -47,12 +47,14 @@ const ckeditorStore = useCkeditor();
 //editorResult是富文本的数据
 const { editorResult } = storeToRefs(ckeditorStore);
 
+// const emit = defineEmits(['refresh'])
+
 const route = useRoute();
 const state = reactive({
 	msg: '',
 	msglist: [],
 });
-
+const imgSrc = ref('');
 /**
  * 用户信息
  * account:用户名
@@ -109,6 +111,8 @@ onMounted(() => {
 	// console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
 });
 
+// watch(
+
 // eslint-disable-next-line vue/no-setup-props-destructure
 console.log('user ===' + props.user);
 
@@ -143,7 +147,7 @@ const editorConfig = {
 	},
 };
 
-const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy']);
+const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy', 'enter']);
 const editorRef = ref(null);
 
 const onEditorReady = () => {
@@ -153,10 +157,12 @@ const onEditorReady = () => {
 
 const onEditorFocus = () => {
 	console.log('聚焦');
+	isE.value = true;
 	emit('focus');
 };
 const onEditorBlur = () => {
 	console.log('失去焦点');
+	isE.value = false;
 	emit('blur');
 };
 
@@ -168,6 +174,21 @@ const onEditorDestroy = () => {
 	console.log('销毁');
 	emit('destroy');
 };
+const isE = ref(false);
+watch(isE, (newVal) => {
+	console.log(newVal);
+	if (newVal) {
+		window.addEventListener('keydown', handleKeyDown);
+	} else {
+		window.removeEventListener('keydown', handleKeyDown);
+	}
+});
+function handleKeyDown(event) {
+	if (event.keyCode === 13 || event.key === 'Enter') {
+		console.log('Enter键被按下');
+		send();
+	}
+}
 
 /**
  * 发送聊天消息
@@ -189,8 +210,8 @@ const send = () => {
 	let pattern = /<p[^>]*?>/gi;
 
 	// 将匹配到的<p>标签替换为添加了样式的<p>标签
-	let replacedMsg = _msg.replace(pattern, `<p style="max-width: ${maxWidth}px; word-wrap: break-word;">`);
-
+	// let replacedMsg = _msg.replace(pattern, `<p style="max-width: ${maxWidth}px; word-wrap: break-word;">`);
+	let replacedMsg = _msg.replace(/<figure class="image"><img([^>]*)><\/figure>/, `<img src="${imgSrc.value}" width="200px">`);
 	console.log(replacedMsg);
 
 	console.log('_msg ==' + _msg);
@@ -200,6 +221,7 @@ const send = () => {
 		msg: _msg,
 	};
 	console.log('aaaaaaaaaaaaaaaaa');
+	console.log(MyAdapterPlugin);
 	console.log(param);
 	// sendMessage(param).then((res) => {
 	// 	console.log(res);
@@ -230,6 +252,51 @@ const send = () => {
 };
 
 const add = [1, 2, 3];
+function MyUploadAdapter(loader) {
+	let reader;
+
+	return {
+		upload: async () => {
+			reader = new FileReader();
+			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}`;
+			imgSrc.value = imgUrl;
+			console.log('>>>>>>>>>>>>>>', imgUrl.value);
+		},
+		abort: () => {
+			reader.abort();
+		},
+	};
+}
+
+// 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 });
+}
+
+function MyAdapterPlugin(editor) {
+	editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+		return new MyUploadAdapter(loader);
+	};
+}
+
 const sendFaMessage = (message) => {
 	// 执行操作
 	console.log('sendFamessage');
-- 
Gitee


From 261bf82c7c6939ddac0dd5011fb90827072bba92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Sun, 20 Aug 2023 21:14:25 +0800
Subject: [PATCH 02/13] =?UTF-8?q?=E5=8F=91=E9=80=81=E5=95=86=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/ws.js                              |  8 ++--
 src/views/customer/components/Chat.vue        | 14 +++++-
 src/views/customer/components/ConsultItem.vue | 44 +++++++++++++++++--
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/stores/ws.js b/src/stores/ws.js
index c601ede..8ca5035 100644
--- a/src/stores/ws.js
+++ b/src/stores/ws.js
@@ -65,11 +65,11 @@ export default createStore({
 				} else if (_msgData.content.typeEnum === 'LINK') {
 					console.log('_msgData.content.content');
 
-					const _link = JSON.parse(_msgData.content.content);
-					_msgData.content.content = _link;
+					// 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方法处理接收到的消息
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 2e8bba2..065d7e6 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -88,9 +88,8 @@
 										"
 									>
 										<div class="message-r" v-if="item.content.typeEnum === 'LINK'">
-											<div>{{ item.content.content.id }}</div>
 											<!-- 单个商品组件 -->
-											<ConsultItem :content="item" />
+											<ConsultItem :item="item" />
 										</div>
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
@@ -196,6 +195,17 @@ async function gteAllList(convId, page) {
 				msg.value = '没有更多了';
 			}
 			console.log(message);
+
+			for (let i = 0; i < message.length; i++) {
+				console.log('单个message');
+				console.log(message[i].content);
+				if (message[i].content.typeEnum === 'LINK') {
+					console.log(JSON.parse(message[i].content.content));
+					message[i].content['content'] = JSON.parse(message[i].content.content);
+					console.log('修改后的content ===========>');
+					console.log(message[i].content);
+				}
+			}
 			message.reverse();
 			wsStore.state.messageList.unshift(...message);
 
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 9b0d244..5d6bb00 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -2,12 +2,12 @@
 
 <template>
 	<div class="aside">
-		<div class="left" @click="detailPage(id)"><img class="img" :src="goodsCover" /></div>
+		<div class="left" @click="detailPage(id)"><img class="img" :src="goods.goodsCover" /></div>
 		<div class="right">
-			<div class="title" @click="detailPage(id)">{{ goodsName }}</div>
+			<div class="title" @click="detailPage(id)">{{ goods.goodsName }}</div>
 			<div class="bottom">
-				<div class="price">￥{{ price }}</div>
-				<div class="buttom"><button class="buttom">发送</button></div>
+				<div v-if="goods.price" class="price">￥{{ goods.price }}</div>
+				<div v-if="item === null" class="buttom"><button v-if="item === null" class="buttom">发送</button></div>
 			</div>
 		</div>
 	</div>
@@ -15,6 +15,7 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
+import { computed, onMounted, reactive } from 'vue';
 
 const router = useRouter();
 
@@ -25,20 +26,36 @@ const router = useRouter();
 const props = defineProps({
 	// eslint-disable-next-line vue/require-default-prop
 	id: {
+		default: 1,
 		type: Number,
 	},
 	// eslint-disable-next-line vue/require-default-prop
 	goodsCover: {
+		default: 'https://img1.baidu.com/it/u=1969209144,3525132852&fm=26&fmt=auto&gp=0.jpg',
 		type: String,
 	},
 	// eslint-disable-next-line vue/require-default-prop
 	goodsName: {
+		default: '商品名称',
 		type: String,
 	},
 	// eslint-disable-next-line vue/require-default-prop
 	price: {
+		default: 0,
 		type: Number,
 	},
+	// eslint-disable-next-line vue/require-default-prop
+	item: {
+		default: null,
+		type: Object,
+	},
+});
+
+const goods = reactive({
+	id: 1,
+	goodsCover: '',
+	goodsName: '',
+	price: 0,
 });
 
 /**
@@ -54,6 +71,25 @@ const detailPage = (id) => {
 		},
 	});
 };
+
+onMounted(() => {
+	if (props.item === null) {
+		goods.id = props.id;
+		goods.goodsCover = props.goodsCover;
+		goods.goodsName = props.goodsName;
+		goods.price = props.price;
+	} else {
+		console.log('组件中的item ======>');
+		console.log(props.item);
+		console.log(props.item.content);
+		console.log(props.item.content.content);
+		goods.id = props.item.content.content.id;
+		goods.goodsCover = props.item.content.content.goodsCover;
+		goods.goodsName = props.item.content.content.goodsName;
+		goods.price = props.item.content.content.price;
+		console.log(goods.price);
+	}
+});
 </script>
 
 <style scoped>
-- 
Gitee


From a2ee4b59a3384f49b12367dd104995bd514f612c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Sun, 20 Aug 2023 21:47:58 +0800
Subject: [PATCH 03/13] =?UTF-8?q?=E9=9A=90=E8=97=8F=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/customer/components/Chat.vue        |  1 +
 src/views/customer/components/ConsultItem.vue |  6 +--
 src/views/customer/components/JimiLeft.vue    | 45 ++++++++++++-------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 065d7e6..b88fa61 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -194,6 +194,7 @@ async function gteAllList(convId, page) {
 			if (message.length === 0) {
 				msg.value = '没有更多了';
 			}
+			console.log('聊天记录 =============================>');
 			console.log(message);
 
 			for (let i = 0; i < message.length; i++) {
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 5d6bb00..5981097 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -2,9 +2,9 @@
 
 <template>
 	<div class="aside">
-		<div class="left" @click="detailPage(id)"><img class="img" :src="goods.goodsCover" /></div>
+		<div class="left" @click="detailPage(goods.id)"><img class="img" :src="goods.goodsCover" /></div>
 		<div class="right">
-			<div class="title" @click="detailPage(id)">{{ goods.goodsName }}</div>
+			<div class="title" @click="detailPage(goods.id)">{{ goods.goodsName }}</div>
 			<div class="bottom">
 				<div v-if="goods.price" class="price">￥{{ goods.price }}</div>
 				<div v-if="item === null" class="buttom"><button v-if="item === null" class="buttom">发送</button></div>
@@ -84,7 +84,7 @@ onMounted(() => {
 		console.log(props.item.content);
 		console.log(props.item.content.content);
 		goods.id = props.item.content.content.id;
-		goods.goodsCover = props.item.content.content.goodsCover;
+		goods.goodsCover = props.item.content.content.image;
 		goods.goodsName = props.item.content.content.goodsName;
 		goods.price = props.item.content.content.price;
 		console.log(goods.price);
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index f32f604..b8b3707 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -4,17 +4,21 @@
 		<JimiLeftHeader @search="handleSearch" />
 		<div class="list">
 			<!-- <div>{{ contracts.value }}</div> -->
-			<div class="contract-list-container">
-				<div v-for="(group, letter) in groupedContracts" :key="letter" :data-letter="letter">
-					<ul>
-						<li v-for="(item, index) in group" :key="index">
-							<div class="user-info-item" @click="SwitchContact(item, change, index)">
-								<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
-								<div class="username">{{ item.user.username }}</div>
-								<div class="online">在线</div>
-							</div>
-						</li>
-					</ul>
+			<div class="aside">
+				<div class="contract-list-container-side">
+					<div class="contract-list-container">
+						<div v-for="(group, letter) in groupedContracts" :key="letter" :data-letter="letter">
+							<ul>
+								<li v-for="(item, index) in group" :key="index">
+									<div class="user-info-item" @click="SwitchContact(item, change, index)">
+										<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
+										<div class="username">{{ item.user.username }}</div>
+										<div class="online">在线</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div class="alphabet-list">
@@ -278,17 +282,28 @@ const groupedContracts = computed(() => {
 	width: 100%;
 	height: calc(100% - 104px);
 	overflow: hidden;
-	overflow-y: auto;
+	/* overflow-y: auto; */
 	display: flex;
 	flex-direction: row;
 }
 
-.contract-list-container {
+.aside {
 	width: 100%;
-	height: 900%;
+	height: calc(100% - 104px);
+	overflow: hidden;
+}
+.contract-list-container-side {
+	width: calc(100% + 40px);
+	height: calc(100% - 104px);
 	overflow: hidden;
 	overflow-y: auto;
 }
+.contract-list-container {
+	width: calc(100% + 40px);
+	height: 900%;
+	/* overflow: hidden;
+	overflow-y: auto; */
+}
 
 ul,
 li {
@@ -324,7 +339,7 @@ li:hover {
 
 .online {
 	position: relative;
-	left: 70px;
+	left: 100px;
 }
 
 .alphabet-letter {
-- 
Gitee


From 8f99be242a9a656334075a26e55500aedc1c81c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 21 Aug 2023 11:20:14 +0800
Subject: [PATCH 04/13] =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/ws.js                           |  4 ++
 src/views/customer/components/Chat.vue     |  1 -
 src/views/customer/components/JimiLeft.vue | 50 +++++++++++++++-------
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/stores/ws.js b/src/stores/ws.js
index 8ca5035..c746970 100644
--- a/src/stores/ws.js
+++ b/src/stores/ws.js
@@ -61,6 +61,10 @@ export default createStore({
 					console.log('_msgData.content.content');
 					console.log(_msgData.content.content);
 					const _online = _msgData.content.content;
+					console.log('online =========================>');
+
+					console.log(_online);
+					console.log(_online['35']);
 					commit('ADD_ONLINE', _online);
 				} else if (_msgData.content.typeEnum === 'LINK') {
 					console.log('_msgData.content.content');
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index b88fa61..19e1070 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -12,7 +12,6 @@
 					<el-scrollbar height="100%" ref="scrollbar" @scroll="scroll" class="el-scrollbar">
 						<div class="message-list-box">
 							<ul v-if="userInfo.item !== ''">
-								<div>{{ userInfo.item.user }}</div>
 								<div class="more" @click="getMore()">{{ msg }}</div>
 								<li v-for="(item, index) in messageL" :key="index">
 									<!-- v-if="
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index b8b3707..2e5d67a 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -13,7 +13,10 @@
 									<div class="user-info-item" @click="SwitchContact(item, change, index)">
 										<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
 										<div class="username">{{ item.user.username }}</div>
-										<div class="online">在线</div>
+										<div v-for="(onl, i) in online" :key="i">
+											<div class="online" v-if="item.user.id === Number(i) && online[i] === false">离线</div>
+											<div class="online" v-else-if="item.user.id === Number(i) && online[i] === true">在线</div>
+										</div>
 									</div>
 								</li>
 							</ul>
@@ -151,39 +154,56 @@ const handleSearch = (keyword) => {
 const online = computed(() => wsStore.state.online);
 
 const timer = ref(null); // 保存定时器引用
+const onlineUser = ref([]); // 保存在线用户
 
-function checkOnline() {
-	// 创建一个空的 onlineUser 数组
-	const onlineUser = [];
+const contracts1 = []; // 保存在线用户
 
+function checkOnline() {
+	console.log('checkOnline ========================>');
+	console.log(groupedContracts.value);
 	// 遍历 contracts 数组
 	contracts.value.forEach((contract) => {
 		// 获取 contract 中的 user 对象，并添加到 onlineUser 数组中
-		onlineUser.push(contract.user.id);
+		onlineUser.value.push(contract.user.id);
 	});
 
 	console.log(contracts.value);
-	console.log(onlineUser);
+	console.log('好友列表 =============>');
+	console.log(onlineUser.value);
+	console.log('单个好友 ======================>');
+	console.log(online.value);
 
 	socket.value.send(
 		JSON.stringify({
-			conversationId: filteredContracts.value[1].conversation.id,
+			conversationId: filteredContracts.value[0].conversationId,
 			content: {
 				typeEnum: 'ONLINE', // ONLINE
-				content: onlineUser, // []
+				content: onlineUser.value, // []
 			},
-		})
+		}),
+		console.log('send online ===========================>'),
+		console.log(
+			JSON.stringify({
+				conversationId: filteredContracts.value[0].conversationId,
+				content: {
+					typeEnum: 'ONLINE', // ONLINE
+					content: contracts1, // []
+				},
+			})
+		)
 	);
-
-	console.log('send online');
-	console.log(online.value);
 }
 
 onMounted(() => {
+	setTimeout(() => {
+		checkOnline(); // 在500毫秒后执行的函数
+	}, 500); // 500毫秒
+	// checkOnline(); // 初始化时调用一次
 	// 在组件挂载后开始定时执行 checkOnline 函数
-	// timer.value = setInterval(() => {
-	// 	checkOnline();
-	// }, 5000); // 每10秒执行一次
+	timer.value = setInterval(() => {
+		onlineUser.value = []; // 先将 online 置为 null
+		checkOnline();
+	}, 10000); // 每10秒执行一次
 });
 
 onUnmounted(() => {
-- 
Gitee


From 41199b4c4fb1d01ea64f54d821eba7082142380c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 21 Aug 2023 15:17:22 +0800
Subject: [PATCH 05/13] =?UTF-8?q?=E5=95=86=E5=93=81=E5=8F=91=E9=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/ws.js                              |  2 +
 src/views/customer/components/Chat.vue        | 38 ++++++++++++------
 src/views/customer/components/ConsultItem.vue | 40 ++++++++++++++++++-
 src/views/customer/components/JimiLeft.vue    |  2 +-
 4 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/src/stores/ws.js b/src/stores/ws.js
index c746970..aa51f84 100644
--- a/src/stores/ws.js
+++ b/src/stores/ws.js
@@ -68,7 +68,9 @@ export default createStore({
 					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);
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 19e1070..b9b85db 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -230,6 +230,18 @@ const message = ref();
 // 这将自动更新messageL数组的值
 const messageL = computed(() => wsStore.state.messageList);
 
+// 监听 messageL 的更新
+watch(messageL, (newVal, oldVal) => {
+	// 使用 nextTick 来确保 DOM 更新已经完成
+	nextTick(() => {
+		// 获取消息列表容器的 DOM 元素
+		const messageListContainer = document.getElementById('message-list-container');
+
+		// 滚动到容器底部
+		messageListContainer.scrollTop = messageListContainer.scrollHeight;
+	});
+});
+
 /**
  *
  * @param {array} msglist 接收Operation返回的聊天记录
@@ -246,20 +258,20 @@ const messageL = computed(() => wsStore.state.messageList);
 // 	console.log('messagelistaaaaa');
 // 	console.log(messageList);
 // 	console.log(messageList.value);
-// 	// 更新消息列表后，将滚动条位置设置为底部
-// 	nextTick(() => {
-// 		console.log(scrollbar.value);
-// 		// 获取当前页面滚动条的位置
-// 		const scrollPosition = window.scrollY;
-
-// 		console.log(scrollPosition);
-// 		// 锁定页面位置
-// 		window.scrollTo({
-// 			top: 19000,
-// 			left: 0,
-// 			behavior: 'smooth', // 添加此选项可以平滑滚动，如果不需要平滑滚动，可以省略此选项
-// 		});
+// // 更新消息列表后，将滚动条位置设置为底部
+// nextTick(() => {
+// 	console.log(scrollbar.value);
+// 	// 获取当前页面滚动条的位置
+// 	const scrollPosition = window.scrollY;
+
+// 	console.log(scrollPosition);
+// 	// 锁定页面位置
+// 	window.scrollTo({
+// 		top: 19000,
+// 		left: 0,
+// 		behavior: 'smooth', // 添加此选项可以平滑滚动，如果不需要平滑滚动，可以省略此选项
 // 	});
+// });
 // };
 
 async function gteAllKeywords() {
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 5981097..80af6fa 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -7,7 +7,9 @@
 			<div class="title" @click="detailPage(goods.id)">{{ goods.goodsName }}</div>
 			<div class="bottom">
 				<div v-if="goods.price" class="price">￥{{ goods.price }}</div>
-				<div v-if="item === null" class="buttom"><button v-if="item === null" class="buttom">发送</button></div>
+				<div v-if="item === null" class="buttom">
+					<button v-if="item === null" class="buttom" @click="sendGood(goods.id, goods.goodsName, goods.goodsCover, goods.price)">发送</button>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -16,6 +18,7 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { computed, onMounted, reactive } from 'vue';
+import wsStore from '../../../stores/ws';
 
 const router = useRouter();
 
@@ -87,9 +90,42 @@ onMounted(() => {
 		goods.goodsCover = props.item.content.content.image;
 		goods.goodsName = props.item.content.content.goodsName;
 		goods.price = props.item.content.content.price;
-		console.log(goods.price);
+		console.log(goods.goodsName);
 	}
 });
+
+const sendGood = (id, goodsName, goodsCover, price) => {
+	const socket = wsStore.state.socket; // 获取socket
+	socket.send(
+		JSON.stringify({
+			conversationId: wsStore.state.convId,
+			content: {
+				typeEnum: 'LINK', // ONLINE
+				content: {
+					id: id,
+					goodsName: goodsName,
+					image: goodsCover,
+					price: price,
+				}, // []
+			},
+		})
+	);
+	console.log('商品数据 ==============================>');
+	console.log(
+		JSON.stringify({
+			conversationId: wsStore.state.convId,
+			content: {
+				typeEnum: 'LINK', // ONLINE
+				content: {
+					id: id,
+					goodsName: goodsName,
+					image: goodsCover,
+					price: price,
+				}, // []
+			},
+		})
+	);
+};
 </script>
 
 <style scoped>
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index 2e5d67a..8173aae 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -187,7 +187,7 @@ function checkOnline() {
 				conversationId: filteredContracts.value[0].conversationId,
 				content: {
 					typeEnum: 'ONLINE', // ONLINE
-					content: contracts1, // []
+					content: onlineUser.value, // []
 				},
 			})
 		)
-- 
Gitee


From 353d633a275b41f23dac556aa260c228d3cdca32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 21 Aug 2023 16:34:07 +0800
Subject: [PATCH 06/13] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/order.js                             | 15 +++++++++++++++
 src/apis/websockeet.js                        |  2 +-
 src/views/customer/components/ConsultItem.vue |  4 +++-
 src/views/customer/components/consult.vue     |  2 +-
 vite.config.js                                |  2 +-
 5 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/apis/order.js

diff --git a/src/apis/order.js b/src/apis/order.js
new file mode 100644
index 0000000..6d9abb5
--- /dev/null
+++ b/src/apis/order.js
@@ -0,0 +1,15 @@
+import axios from '../axios/axios';
+
+export function getOrder() {
+	return axios.post(
+		'http://172.19.85.181:13000/order/orderMap',
+		{
+			userId: '12',
+		},
+		{
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		}
+	);
+}
diff --git a/src/apis/websockeet.js b/src/apis/websockeet.js
index 506eabb..5b997c5 100644
--- a/src/apis/websockeet.js
+++ b/src/apis/websockeet.js
@@ -1,5 +1,5 @@
 export function useWebsocket(handleMessage, userId) {
-	const ws = new WebSocket(`ws://localhost:19000/chat/userId/` + userId);
+	const ws = new WebSocket(`ws://47.115.211.73/chat/userId/` + userId);
 	// 47.115.211.73
 
 	const init = () => {
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 80af6fa..ed436ed 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -2,7 +2,9 @@
 
 <template>
 	<div class="aside">
-		<div class="left" @click="detailPage(goods.id)"><img class="img" :src="goods.goodsCover" /></div>
+		<div class="left" @click="detailPage(goods.id)">
+			<img class="img" :src="goods.goodsCover" />
+		</div>
 		<div class="right">
 			<div class="title" @click="detailPage(goods.id)">{{ goods.goodsName }}</div>
 			<div class="bottom">
diff --git a/src/views/customer/components/consult.vue b/src/views/customer/components/consult.vue
index 82f817c..43f9dab 100644
--- a/src/views/customer/components/consult.vue
+++ b/src/views/customer/components/consult.vue
@@ -20,7 +20,7 @@
 								<ul>
 									<li v-for="(item, index) in goodList" :key="index">
 										<!-- 单个商品组件 -->
-										<ConsultItem :id="item.id" :goodsCover="item.image" :goodsName="item.name" :price="item.price" />
+										<ConsultItem :id="parseInt(item.id)" :goodsCover="item.image" :goodsName="item.name" :price="item.price" />
 									</li>
 								</ul>
 							</div>
diff --git a/vite.config.js b/vite.config.js
index 01062ca..029a2d9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -25,7 +25,7 @@ export default defineConfig({
 			//跨域代理
 			'/api': {
 				// 'http://47.115.211.73:19000'
-				target: 'http://localhost:19000',
+				target: 'http://47.115.211.73:19000',
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/api/, ''),
 			},
-- 
Gitee


From a230f76d3e7646b570bcc695020f9e8f6ad43e10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 21 Aug 2023 18:07:59 +0800
Subject: [PATCH 07/13] =?UTF-8?q?=E5=8F=91=E9=80=81=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/conversation.js                    |   6 +-
 src/apis/keywords.js                        |   2 +-
 src/apis/massage.js                         |   2 +-
 src/apis/order.js                           |   2 +-
 src/apis/user.js                            |   2 +-
 src/apis/websockeet.js                      |   2 +-
 src/stores/ws.js                            |  11 ++
 src/views/customer/components/Chat.vue      |  19 ++-
 src/views/customer/components/OrderItem.vue | 155 +++++++++++++++++---
 src/views/customer/components/OrderList.vue | 115 ++++-----------
 vite.config.js                              |   2 +-
 11 files changed, 203 insertions(+), 115 deletions(-)

diff --git a/src/apis/conversation.js b/src/apis/conversation.js
index 22bef26..ce7abb0 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/create',
 
 		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/' + 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 b55b1c4..7bfc69b 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 8f2519a..f6b3067 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
index 6d9abb5..e243e4e 100644
--- a/src/apis/order.js
+++ b/src/apis/order.js
@@ -2,7 +2,7 @@ import axios from '../axios/axios';
 
 export function getOrder() {
 	return axios.post(
-		'http://172.19.85.181:13000/order/orderMap',
+		'http://47.113.178.219:13000/order/orderMap',
 		{
 			userId: '12',
 		},
diff --git a/src/apis/user.js b/src/apis/user.js
index 564ebdd..a189f26 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,
diff --git a/src/apis/websockeet.js b/src/apis/websockeet.js
index 5b997c5..f956d49 100644
--- a/src/apis/websockeet.js
+++ b/src/apis/websockeet.js
@@ -1,5 +1,5 @@
 export function useWebsocket(handleMessage, userId) {
-	const ws = new WebSocket(`ws://47.115.211.73/chat/userId/` + userId);
+	const ws = new WebSocket(`ws://localhost:19000/chat-service/userId/` + userId);
 	// 47.115.211.73
 
 	const init = () => {
diff --git a/src/stores/ws.js b/src/stores/ws.js
index aa51f84..27883ed 100644
--- a/src/stores/ws.js
+++ b/src/stores/ws.js
@@ -70,6 +70,17 @@ export default createStore({
 					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('订单信息=============================>');
+
 					_msgData.content['content'] = JSON.parse(_msgData.content.content);
 					// const _link = JSON.parse(_msgData.content.content);
 					// _msgData.content.content = _link;
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index b9b85db..76a6cab 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -94,6 +94,22 @@
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
 										</div>
 									</div>
+
+									<div
+										class="message-right"
+										v-else-if="
+											item.content.typeEnum == 'ORDER' && item.conversationId == userInfo.item.conversation.id && item.userId != userInfo.item.user.id
+										"
+									>
+										<div class="message-r" v-if="item.content.typeEnum === 'ORDER'">
+											<!-- 单个订单组件 -->
+
+											<OrderItem :content="item.content.content" />
+										</div>
+										<div class="img">
+											<img src="../../../assets/img/dongdong-female.png" class="img" />
+										</div>
+									</div>
 								</li>
 							</ul>
 						</div>
@@ -134,6 +150,7 @@ import { getByConvId } from '../../../apis/massage';
 import { getAll } from '../../../apis/keywords';
 import wsStore from '../../../stores/ws';
 import ConsultItem from './ConsultItem.vue';
+import OrderItem from '@/views/customer/components/OrderItem.vue';
 
 // eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['userInfo']);
@@ -199,7 +216,7 @@ async function gteAllList(convId, page) {
 			for (let i = 0; i < message.length; i++) {
 				console.log('单个message');
 				console.log(message[i].content);
-				if (message[i].content.typeEnum === 'LINK') {
+				if (message[i].content.typeEnum === 'LINK' || message[i].content.typeEnum === 'ORDER') {
 					console.log(JSON.parse(message[i].content.content));
 					message[i].content['content'] = JSON.parse(message[i].content.content);
 					console.log('修改后的content ===========>');
diff --git a/src/views/customer/components/OrderItem.vue b/src/views/customer/components/OrderItem.vue
index ad76de7..58f73f5 100644
--- a/src/views/customer/components/OrderItem.vue
+++ b/src/views/customer/components/OrderItem.vue
@@ -1,31 +1,64 @@
 <template>
-	<div class="order-item-container">
-		<div class="order-item-header">
-			<el-text>订单号：{{ orderNo }}</el-text>
-			<el-text>{{ date }}</el-text>
-		</div>
-		<el-divider />
-		<div class="order-item-message">
-			<img class="goods-cover" :src="goodsCover" alt="" @click="detailPage(goodNo)" />
-			<div style="clear: both; overflow: hidden">
-				<el-text class="goods-name" @click="detailPage(goodNo)">{{ goodsName }}</el-text>
-				<div style="clear: both; overflow: hidden">
-					<el-button style="display: block; float: right" size="small">发送</el-button>
+	<div v-if="content === null" class="order-item-container">
+		<div v-for="(order, index) in item" :key="index" class="order-item-container">
+			<!-- <div>{{ order.title }}</div> -->
+			<div class="order-item-header">
+				<el-text>订单号：{{ order.orderId }}</el-text>
+			</div>
+			<el-divider />
+			<div class="order-item-message">
+				<img class="goods-cover" :src="order.picPath" alt="" @click="detailPage(goodNo)" />
+				<div style="clear: both; overflow: hidden" class="right">
+					<el-text class="goods-name" @click="detailPage(goodNo)">{{ order.title }}</el-text>
+
+					<div class="buttom">
+						<div class="order-footer-container">
+							<span class="amount">{{ order.totalFee }}</span>
+							<!-- <el-tag class="ml-2" :type="tagType">{{ tagContent }}</el-tag> -->
+						</div>
+						<div style="clear: both; overflow: hidden">
+							<el-button
+								style="display: block; float: right"
+								size="small"
+								@click="sendOrder(order.orderId, order.title, order.totalFee, order.picPath)"
+								>发送</el-button
+							>
+						</div>
+					</div>
 				</div>
 			</div>
+			<el-divider />
 		</div>
-		<el-divider />
-		<div class="order-footer-container">
-			<span
-				>订单金额: <span class="amount">{{ amount }}</span></span
-			>
-			<el-tag class="ml-2" :type="tagType">{{ tagContent }}</el-tag>
+	</div>
+
+	<div v-if="content !== null" class="order-item-containera">
+		<div class="order-item-containera">
+			<!-- <div>{{ order.title }}</div> -->
+			<div class="order-item-header">
+				<el-text>订单号：{{ orderx.orderId }}</el-text>
+			</div>
+			<el-divider />
+			<div class="order-item-message">
+				<img class="goods-cover" :src="orderx.picPath" alt="" @click="detailPage(goodNo)" />
+				<div style="clear: both; overflow: hidden" class="right">
+					<el-text class="goods-name" @click="detailPage(goodNo)">{{ orderx.title }}</el-text>
+
+					<div class="buttom">
+						<div class="order-footer-container">
+							<span class="amount">{{ orderx.totalFee }}</span>
+							<!-- <el-tag class="ml-2" :type="tagType">{{ tagContent }}</el-tag> -->
+						</div>
+					</div>
+				</div>
+			</div>
+			<el-divider />
 		</div>
 	</div>
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted, reactive } from 'vue';
 import { useRouter } from 'vue-router';
+import wsStore from '../../../stores/ws';
 /**
  * 接收OrderList.vue传递的订单信息
  */
@@ -58,9 +91,23 @@ const props = defineProps({
 	finish: {
 		type: Boolean,
 	},
+	item: {
+		default: Array,
+		type: Object,
+	},
+	content: {
+		default: null,
+		type: Object,
+	},
 });
-const tagContent = computed(() => (props.finish ? '已完成' : '未完成'));
-const tagType = computed(() => (props.finish ? 'danger' : 'info'));
+
+const orderx = reactive({
+	orderId: '',
+	title: '',
+	totalFee: '',
+	picPath: '',
+});
+
 const router = useRouter();
 
 /**
@@ -76,6 +123,55 @@ const detailPage = (id) => {
 		},
 	});
 };
+
+onMounted(() => {
+	if (props.item) {
+		console.log('单个订单 ========================>');
+		console.log(props.item);
+	}
+	if (props.content) {
+		console.log('单个订单 content ====================>');
+		console.log(props.content);
+		orderx.orderId = props.content.orderId;
+		orderx.title = props.content.title;
+		orderx.totalFee = props.content.totalFee;
+		orderx.picPath = props.content.picPath;
+	}
+});
+
+const sendOrder = (orderId, title, totalFee, picPath) => {
+	console.log('sendOrder');
+	const socket = wsStore.state.socket; // 获取socket
+	socket.send(
+		JSON.stringify({
+			conversationId: wsStore.state.convId,
+			content: {
+				typeEnum: 'ORDER', // ONLINE
+				content: {
+					orderId: orderId,
+					title: title,
+					totalFee: totalFee,
+					picPath: picPath,
+				}, // []
+			},
+		})
+	);
+	console.log('商品数据 ==============================>');
+	console.log(
+		JSON.stringify({
+			conversationId: wsStore.state.convId,
+			content: {
+				typeEnum: 'ORDER', // ONLINE
+				content: {
+					orderId: orderId,
+					title: title,
+					totalFee: totalFee,
+					picPath: picPath,
+				}, // []
+			},
+		})
+	);
+};
 </script>
 <style scoped>
 .order-item-header {
@@ -98,6 +194,18 @@ const detailPage = (id) => {
 	margin-right: 8px;
 }
 
+.right {
+	display: flex;
+	flex-direction: column;
+	width: calc(100% - 100px);
+	justify-content: space-between;
+}
+.buttom {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	width: 100%;
+}
 .order-item-message {
 	display: flex;
 	padding: 8px 8px 8px 0;
@@ -106,6 +214,7 @@ const detailPage = (id) => {
 
 .amount {
 	color: #f24847;
+	font-size: small;
 }
 
 .order-footer-container {
@@ -118,4 +227,8 @@ const detailPage = (id) => {
 	background-color: white;
 	margin: 8px;
 }
+
+.order-item-containera {
+	margin: 8px;
+}
 </style>
diff --git a/src/views/customer/components/OrderList.vue b/src/views/customer/components/OrderList.vue
index 90e15b8..c2d4159 100644
--- a/src/views/customer/components/OrderList.vue
+++ b/src/views/customer/components/OrderList.vue
@@ -17,7 +17,8 @@
 					<el-scrollbar max-height="563px">
 						<div class="message-list-box">
 							<ul>
-								<li v-for="(item, index) in orderList" :key="index">
+								<!-- 订单列表 -->
+								<li v-for="(item, index) in orderList.value" :key="index">
 									<OrderItem
 										:goodNo="item.goodNO"
 										:orderNo="item.orderNo"
@@ -26,6 +27,7 @@
 										:amount="item.amount"
 										:finish="item.finish"
 										:date="item.date"
+										:item="item.orderItemEntities"
 									/>
 								</li>
 							</ul>
@@ -37,93 +39,38 @@
 	</div>
 </template>
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import OrderItem from '@/views/customer/components/OrderItem.vue';
+import { getOrder } from '../../../apis/order';
 
 const searchKey = ref();
-const orderList = reactive([
-	{
-		goodNO: 1,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 2,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 3,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 4,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 5,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 6,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 7,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-	{
-		goodNO: 8,
-		orderNo: '154615133114534135',
-		date: '2023-07-28 21:15:16',
-		goodsCover: 'https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg',
-		goodsName: '舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机',
-		amount: 24.9,
-		finish: true,
-	},
-]);
+const orderList = reactive([]);
+
+onMounted(() => {
+	getOrderList();
+});
+
+const getOrderList = async () => {
+	try {
+		const res = await getOrder();
+		console.log(res);
+		// 响应成功的处理
+		if (res.data.code === 1300001) {
+			const jsonData = res.data.data;
+			console.log('订单数据 ============================>');
+			console.log(jsonData);
+			orderList.value = jsonData;
+			console.log('订单数据 orderList ============================>');
+			console.log(orderList);
+		} else {
+			alert(res.data.message);
+		}
+	} catch (err) {
+		console.log(err);
+		// 响应失败的处理
+	}
+};
 </script>
 <style scoped>
 ul,
diff --git a/vite.config.js b/vite.config.js
index 029a2d9..01062ca 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -25,7 +25,7 @@ export default defineConfig({
 			//跨域代理
 			'/api': {
 				// 'http://47.115.211.73:19000'
-				target: 'http://47.115.211.73:19000',
+				target: 'http://localhost:19000',
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/api/, ''),
 			},
-- 
Gitee


From bbf587c3ee3a97e1546e98bfb7fa2489bf354595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 21 Aug 2023 18:29:34 +0800
Subject: [PATCH 08/13] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=98=BE=E7=A4=BAbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/customer/components/Chat.vue      | 25 ++++++++++++++++-----
 src/views/customer/components/OrderItem.vue |  7 +++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 76a6cab..7629c7e 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -50,12 +50,25 @@
 											<!-- <div class="name">{{ userInfo.item.user.userName }}</div> -->
 											<div class="message-l">
 												<!-- 单个商品组件 -->
-												<ConsultItem
-													:id="item.content.content.id"
-													:goodsCover="item.content.content.image"
-													:goodsName="item.content.content.name"
-													:price="item.content.content.price"
-												/>
+												<ConsultItem :item="item" />
+											</div>
+										</div>
+									</div>
+
+									<div
+										class="message-left"
+										v-else-if="
+											item.content.typeEnum == 'ORDER' && item.conversationId == userInfo.item.conversation.id && item.userId == userInfo.item.user.id
+										"
+									>
+										<div class="img">
+											<img src="../../../assets/img/dongdong-female.png" class="img" />
+										</div>
+										<div class="message-le">
+											<!-- <div class="name">{{ userInfo.item.user.userName }}</div> -->
+											<div class="message-l">
+												<!-- 单个订单组件 -->
+												<OrderItem :content="item.content.content" />
 											</div>
 										</div>
 									</div>
diff --git a/src/views/customer/components/OrderItem.vue b/src/views/customer/components/OrderItem.vue
index 58f73f5..cca7044 100644
--- a/src/views/customer/components/OrderItem.vue
+++ b/src/views/customer/components/OrderItem.vue
@@ -13,7 +13,7 @@
 
 					<div class="buttom">
 						<div class="order-footer-container">
-							<span class="amount">{{ order.totalFee }}</span>
+							<span class="amount">总价：{{ order.totalFee }}</span>
 							<!-- <el-tag class="ml-2" :type="tagType">{{ tagContent }}</el-tag> -->
 						</div>
 						<div style="clear: both; overflow: hidden">
@@ -45,7 +45,7 @@
 
 					<div class="buttom">
 						<div class="order-footer-container">
-							<span class="amount">{{ orderx.totalFee }}</span>
+							<span class="amount">总价：{{ orderx.totalFee }}</span>
 							<!-- <el-tag class="ml-2" :type="tagType">{{ tagContent }}</el-tag> -->
 						</div>
 					</div>
@@ -202,7 +202,8 @@ const sendOrder = (orderId, title, totalFee, picPath) => {
 }
 .buttom {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
+	align-items: center;
 	justify-content: space-between;
 	width: 100%;
 }
-- 
Gitee


From e414a7b635b9d8c948a15d9a4cdcdc9e88bc15f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 21 Aug 2023 18:32:45 +0800
Subject: [PATCH 09/13] =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/customer/components/OrderItem.vue | 8 ++++----
 src/views/customer/components/text.vue      | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/customer/components/OrderItem.vue b/src/views/customer/components/OrderItem.vue
index cca7044..c75f9d9 100644
--- a/src/views/customer/components/OrderItem.vue
+++ b/src/views/customer/components/OrderItem.vue
@@ -7,9 +7,9 @@
 			</div>
 			<el-divider />
 			<div class="order-item-message">
-				<img class="goods-cover" :src="order.picPath" alt="" @click="detailPage(goodNo)" />
+				<img class="goods-cover" :src="order.picPath" alt="" @click="detailPage(order.orderId)" />
 				<div style="clear: both; overflow: hidden" class="right">
-					<el-text class="goods-name" @click="detailPage(goodNo)">{{ order.title }}</el-text>
+					<el-text class="goods-name" @click="detailPage(order.orderId)">{{ order.title }}</el-text>
 
 					<div class="buttom">
 						<div class="order-footer-container">
@@ -39,9 +39,9 @@
 			</div>
 			<el-divider />
 			<div class="order-item-message">
-				<img class="goods-cover" :src="orderx.picPath" alt="" @click="detailPage(goodNo)" />
+				<img class="goods-cover" :src="orderx.picPath" alt="" @click="detailPage(order.orderId)" />
 				<div style="clear: both; overflow: hidden" class="right">
-					<el-text class="goods-name" @click="detailPage(goodNo)">{{ orderx.title }}</el-text>
+					<el-text class="goods-name" @click="detailPage(order.orderId)">{{ orderx.title }}</el-text>
 
 					<div class="buttom">
 						<div class="order-footer-container">
diff --git a/src/views/customer/components/text.vue b/src/views/customer/components/text.vue
index 6d386da..6f498a4 100644
--- a/src/views/customer/components/text.vue
+++ b/src/views/customer/components/text.vue
@@ -2,6 +2,7 @@
 <template>
 	<div>
 		<div>这是一个测试页面</div>
+		<div>携带参数跳转到商品详情或订单详情页面</div>
 		<div>{{ good.goodNO }}</div>
 	</div>
 </template>
-- 
Gitee


From 7b413ccbb467e11c3aae6984f81ae0ccff9f1c8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Tue, 22 Aug 2023 15:02:46 +0800
Subject: [PATCH 10/13] =?UTF-8?q?=E5=95=86=E5=AE=B6=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/merchant/components/AppMain.vue           | 33 +++++++++++
 src/merchant/components/Header.vue            | 32 +++++++++++
 src/merchant/index.vue                        | 56 +++++++++++++++++++
 src/router/index.js                           | 12 ++++
 src/views/customer/components/ConsultItem.vue |  2 +-
 .../customer/components/JimiLeftHeader.vue    |  2 +-
 6 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 src/merchant/components/AppMain.vue
 create mode 100644 src/merchant/components/Header.vue
 create mode 100644 src/merchant/index.vue

diff --git a/src/merchant/components/AppMain.vue b/src/merchant/components/AppMain.vue
new file mode 100644
index 0000000..432f1a4
--- /dev/null
+++ b/src/merchant/components/AppMain.vue
@@ -0,0 +1,33 @@
+<!-- eslint-disable vue/attributes-order -->
+<!-- eslint-disable vue/attribute-hyphenation -->
+<template>
+	<el-row class="row">
+		<el-col class="col1">
+			<KeepAlive><Chat :userInfo="props.userInfo" :key="props.userInfo.item" /></KeepAlive>
+		</el-col>
+	</el-row>
+</template>
+<script setup>
+import Chat from '@/views/customer/components/Chat.vue';
+
+// eslint-disable-next-line vue/require-prop-types
+const props = defineProps(['userInfo']);
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+console.log('assdddddd');
+// eslint-disable-next-line vue/no-setup-props-destructure
+console.log(props.userInfo);
+</script>
+<style scoped>
+.row {
+	height: 100%;
+}
+
+.col1 {
+	height: 100%;
+}
+
+.col2 {
+	height: 100%;
+}
+</style>
diff --git a/src/merchant/components/Header.vue b/src/merchant/components/Header.vue
new file mode 100644
index 0000000..14d13a7
--- /dev/null
+++ b/src/merchant/components/Header.vue
@@ -0,0 +1,32 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/attributes-order -->
+<template>
+	<div class="header-container">
+		<el-avatar :src="userInfo.item.user.avatar" shape="square" class="user-avatar" v-if="userInfo.item != ''" />
+		<el-text class="user-account" v-if="userInfo.item != ''">{{ userInfo.item.user.username }}</el-text>
+	</div>
+</template>
+<script setup>
+// eslint-disable-next-line vue/require-prop-types
+const props = defineProps(['userInfo']);
+// eslint-disable-next-line vue/no-setup-props-destructure
+</script>
+
+<style scoped>
+.header-container {
+	background-color: #f2f2f2;
+	border-bottom: 1px solid lightgray;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding-left: 24px;
+}
+.user-avatar {
+	margin-right: 8px;
+}
+.user-account {
+	font-size: 14px;
+	color: #343036;
+}
+</style>
diff --git a/src/merchant/index.vue b/src/merchant/index.vue
new file mode 100644
index 0000000..db92dfd
--- /dev/null
+++ b/src/merchant/index.vue
@@ -0,0 +1,56 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
+<!-- eslint-disable vue/attributes-order -->
+<!-- eslint-disable vue/attribute-hyphenation -->
+<template>
+	<div class="common-layout">
+		<el-container>
+			<el-aside width="300px">
+				<JimiLeft @SwitchContact="transmit" />
+			</el-aside>
+			<el-container>
+				<el-header class="el-header">
+					<Header :userInfo="userInfo" :key="userInfo" />
+				</el-header>
+				<el-main class="el-main">
+					<AppMain :userInfo="userInfo" :key="userInfo" />
+				</el-main>
+			</el-container>
+		</el-container>
+	</div>
+</template>
+<script setup>
+import JimiLeft from '@/views/customer/components/JimiLeft.vue';
+import Header from '@/merchant/components/Header.vue';
+import AppMain from '@/merchant/components/AppMain.vue';
+import { reactive, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const userInfo = reactive({
+	item: '',
+});
+
+const transmit = (item) => {
+	console.log(item);
+	userInfo.item = item;
+	console.log(userInfo.item);
+};
+</script>
+<style scoped>
+.common-layout {
+	height: 84%;
+	width: 1200px;
+}
+.common-layout :deep(.el-aside),
+.common-layout :deep(.el-container) {
+	height: 100%;
+	background-color: white;
+}
+.el-header {
+	padding: 0;
+}
+:deep(.el-main) {
+	padding: 0;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 17b6225..bf5975b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 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';
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -37,6 +38,17 @@ const router = createRouter({
 			// which is lazy-loaded when the route is visited.
 			component: () => import('../views/customer/abuout.vue'),
 		},
+		{
+			path: '/chat',
+			name: 'chat',
+			component: Metchant,
+			children: [
+				{
+					path: '/about',
+					component: () => import('@/views/customer/about.vue'),
+				},
+			],
+		},
 	],
 });
 
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index ed436ed..45ed06d 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -3,7 +3,7 @@
 <template>
 	<div class="aside">
 		<div class="left" @click="detailPage(goods.id)">
-			<img class="img" :src="goods.goodsCover" />
+			<img class="img" :src="'http://' + goods.goodsCover" />
 		</div>
 		<div class="right">
 			<div class="title" @click="detailPage(goods.id)">{{ goods.goodsName }}</div>
diff --git a/src/views/customer/components/JimiLeftHeader.vue b/src/views/customer/components/JimiLeftHeader.vue
index af1deb0..dd20149 100644
--- a/src/views/customer/components/JimiLeftHeader.vue
+++ b/src/views/customer/components/JimiLeftHeader.vue
@@ -38,7 +38,7 @@ const userInfo = reactive({
 	isPlus: false,
 });
 onMounted(() => {
-	detection();
+	// detection();
 });
 
 // 检测是否登录
-- 
Gitee


From aed02b8cd8274dcd01ac8de98e5a34cf5b5b4e23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Wed, 23 Aug 2023 14:50:40 +0800
Subject: [PATCH 11/13] =?UTF-8?q?=E8=81=94=E7=B3=BB=E4=BA=BAtab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/ws.js                           |   1 -
 src/views/customer/abuout.vue              |  16 +
 src/views/customer/components/JimiLeft.vue | 302 ++++-------------
 src/views/customer/components/LinkMan.vue  | 359 +++++++++++++++++++++
 4 files changed, 433 insertions(+), 245 deletions(-)
 create mode 100644 src/views/customer/components/LinkMan.vue

diff --git a/src/stores/ws.js b/src/stores/ws.js
index 27883ed..cb5a768 100644
--- a/src/stores/ws.js
+++ b/src/stores/ws.js
@@ -64,7 +64,6 @@ export default createStore({
 					console.log('online =========================>');
 
 					console.log(_online);
-					console.log(_online['35']);
 					commit('ADD_ONLINE', _online);
 				} else if (_msgData.content.typeEnum === 'LINK') {
 					console.log('_msgData.content.content');
diff --git a/src/views/customer/abuout.vue b/src/views/customer/abuout.vue
index 444fff2..3503072 100644
--- a/src/views/customer/abuout.vue
+++ b/src/views/customer/abuout.vue
@@ -7,6 +7,7 @@
 import { ref } from 'vue';
 import { create } from '../../apis/conversation';
 import { useRouter, useRoute } from 'vue-router';
+import { id } from 'element-plus/es/locale';
 
 const router = useRouter();
 const route = useRoute();
@@ -42,5 +43,20 @@ async function gteAllList(test) {
 		// 响应失败的处理
 	}
 }
+
+// {
+// 	"发起者":{
+// 		'id' : id,
+// 		'username' : username,
+// 		'avatar' : avatar,
+// 		'role' : role,
+// 	},
+// 	"接收者":{
+// 		'id' : id,
+// 		'username' : username,
+// 		'avatar' : avatar,
+// 		'role' : role,
+// 	}
+// }
 </script>
 <style scoped></style>
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index 8173aae..c2798cf 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -1,31 +1,38 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
 <!-- eslint-disable vue/attributes-order -->
 <template>
 	<div class="left-aside-container">
 		<JimiLeftHeader @search="handleSearch" />
-		<div class="list">
-			<!-- <div>{{ contracts.value }}</div> -->
-			<div class="aside">
-				<div class="contract-list-container-side">
-					<div class="contract-list-container">
-						<div v-for="(group, letter) in groupedContracts" :key="letter" :data-letter="letter">
-							<ul>
-								<li v-for="(item, index) in group" :key="index">
-									<div class="user-info-item" @click="SwitchContact(item, change, index)">
-										<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
-										<div class="username">{{ item.user.username }}</div>
-										<div v-for="(onl, i) in online" :key="i">
-											<div class="online" v-if="item.user.id === Number(i) && online[i] === false">离线</div>
-											<div class="online" v-else-if="item.user.id === Number(i) && online[i] === true">在线</div>
-										</div>
-									</div>
-								</li>
-							</ul>
-						</div>
-					</div>
-				</div>
+		<div class="tab">
+			<div class="tab">
+				<div class="ta" :class="{ active: tabRef === 1 }" @click="tabChange(1)">好友</div>
+				<div class="ta" :class="{ active: tabRef === 2 }" @click="tabChange(2)">商家</div>
+				<div class="ta" :class="{ active: tabRef === 3 }" @click="tabChange(3)">供应商</div>
+				<div class="ta" :class="{ active: tabRef === 4 }" @click="tabChange(4)">实体店</div>
 			</div>
-			<div class="alphabet-list">
-				<div v-for="letter in sortedLetters" :key="letter" @click="scrollToLetter(letter)" class="alphabet-letter">{{ letter }}</div>
+		</div>
+
+		<div v-if="tabRef == 1" class="side">
+			<div v-if="tabRef == 1" class="list" :key="tabRef">
+				<LinkMan @SwitchContactL="SwitchContact"></LinkMan>
+			</div>
+		</div>
+
+		<div v-if="tabRef == 2" class="side">
+			<div v-if="tabRef == 2" class="list" :key="tabRef">
+				<div>这是商家好友列表</div>
+			</div>
+		</div>
+
+		<div v-if="tabRef == 3" class="side">
+			<div v-if="tabRef == 3" class="list" :key="tabRef">
+				<div>这是供应商好友列表</div>
+			</div>
+		</div>
+
+		<div v-if="tabRef == 4" class="side">
+			<div v-if="tabRef == 4" class="list" :key="tabRef">
+				<div>这是实体店好友列表</div>
 			</div>
 		</div>
 	</div>
@@ -38,6 +45,7 @@ import { reactive, ref, computed, onMounted, onUnmounted } from 'vue';
 import { getAll } from '../../../apis/conversation';
 import { useRoute } from 'vue-router';
 import wsStore from '../../../stores/ws';
+import LinkMan from './LinkMan.vue';
 
 import { pinyin } from 'pinyin';
 
@@ -58,18 +66,12 @@ console.log('userInfo', userInfo);
 const socket = ref(null);
 
 const contracts = reactive([]);
-/**
- * 获取联系人列表
- */
-onMounted(() => {
-	gteAllList(userInfo.id);
 
+onMounted(() => {
 	// ws.value = useWebsocket(handleMessage, userInfo.userId);
 	// 设置userId
 	// 在钩子函数中调用createWebSocket action
-	wsStore.dispatch('createWebSocket', userInfo.id);
-	// 调用vuex中的action来创建WebSocket连接
-	// store.dispatch('createWebSocket', userInfo.userId);
+	wsStore.dispatch('createWebSocket', userInfo.id); // 创建ws连接
 
 	// 通过vuex store的state属性获取socket
 	socket.value = wsStore.state.socket;
@@ -77,29 +79,10 @@ onMounted(() => {
 	console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb');
 });
 
-async function gteAllList(userId) {
-	console.log('获取联系人列表 ==================>');
-	console.log(userId);
-	try {
-		const res = await getAll(userId);
-		// console.log('联系人res');
-		console.log(res);
-
-		// 响应成功的处理
-		if (res.data.code === 19000200) {
-			contracts.value = res.data.data;
-			console.log(contracts.value);
-		} else {
-			alert(res.data.message);
-		}
-	} catch (err) {
-		console.log(err);
-		// 响应失败的处理
-	}
-}
-
 /**
  * 点击切换联系人
+ * 接收LinkMan中的参数，传递到
+ * 父组件中，父组件中通过emit触发事件
  */
 const emits = defineEmits(['SwitchContact']); // 定义可以触发的事件
 
@@ -149,147 +132,11 @@ const handleSearch = (keyword) => {
 	searchKeyword.value = keyword;
 };
 
-// 使用computed属性创建一个响应式计算属性
-// 这将自动更新message数组的值
-const online = computed(() => wsStore.state.online);
+const tabRef = ref(1);
 
-const timer = ref(null); // 保存定时器引用
-const onlineUser = ref([]); // 保存在线用户
-
-const contracts1 = []; // 保存在线用户
-
-function checkOnline() {
-	console.log('checkOnline ========================>');
-	console.log(groupedContracts.value);
-	// 遍历 contracts 数组
-	contracts.value.forEach((contract) => {
-		// 获取 contract 中的 user 对象，并添加到 onlineUser 数组中
-		onlineUser.value.push(contract.user.id);
-	});
-
-	console.log(contracts.value);
-	console.log('好友列表 =============>');
-	console.log(onlineUser.value);
-	console.log('单个好友 ======================>');
-	console.log(online.value);
-
-	socket.value.send(
-		JSON.stringify({
-			conversationId: filteredContracts.value[0].conversationId,
-			content: {
-				typeEnum: 'ONLINE', // ONLINE
-				content: onlineUser.value, // []
-			},
-		}),
-		console.log('send online ===========================>'),
-		console.log(
-			JSON.stringify({
-				conversationId: filteredContracts.value[0].conversationId,
-				content: {
-					typeEnum: 'ONLINE', // ONLINE
-					content: onlineUser.value, // []
-				},
-			})
-		)
-	);
-}
-
-onMounted(() => {
-	setTimeout(() => {
-		checkOnline(); // 在500毫秒后执行的函数
-	}, 500); // 500毫秒
-	// checkOnline(); // 初始化时调用一次
-	// 在组件挂载后开始定时执行 checkOnline 函数
-	timer.value = setInterval(() => {
-		onlineUser.value = []; // 先将 online 置为 null
-		checkOnline();
-	}, 10000); // 每10秒执行一次
-});
-
-onUnmounted(() => {
-	// 在组件卸载前停止定时执行
-	clearInterval(timer.value);
-});
-
-const sortedLetters = [
-	'A',
-	'B',
-	'C',
-	'D',
-	'E',
-	'F',
-	'G',
-	'H',
-	'I',
-	'J',
-	'K',
-	'L',
-	'M',
-	'N',
-	'O',
-	'P',
-	'Q',
-	'R',
-	'S',
-	'T',
-	'U',
-	'V',
-	'W',
-	'X',
-	'Y',
-	'Z',
-	'#',
-];
-
-const scrollToLetter = (letter) => {
-	const targetElement = document.querySelector(`[data-letter="${letter}"]`);
-
-	if (targetElement) {
-		targetElement.scrollIntoView({ behavior: 'smooth' }); // 滚动到可视区域
-	}
+const tabChange = (tab) => {
+	tabRef.value = tab;
 };
-
-const sortedContracts = computed(() => {
-	if (contracts.value) {
-		console.log('constractaaaaa ==================== >');
-		console.log(contracts.value);
-		return contracts.value.slice().sort((a, b) => {
-			const pinyinA = pinyin(a.user.username, { style: pinyin.STYLE_FIRST_LETTER });
-			const pinyinB = pinyin(b.user.username, { style: pinyin.STYLE_FIRST_LETTER });
-			return pinyinA.join('').localeCompare(pinyinB.join(''));
-		});
-	} else {
-		return [];
-	}
-});
-
-// 在计算属性 groupedContracts 中添加逻辑来检查用户名的第一个字符是否是字母或中文
-const groupedContracts = computed(() => {
-	const grouped = {};
-
-	sortedContracts.value.forEach((contract) => {
-		const firstChar = contract.user.username[0];
-		let letter = '';
-
-		// 判断用户名的第一个字符是否是字母或中文
-		if (/^[A-Za-z\u4e00-\u9fa5]+$/.test(firstChar)) {
-			const pinyinFirstLetter = pinyin(firstChar, { style: pinyin.STYLE_FIRST_LETTER });
-			letter = pinyinFirstLetter[0][0].toUpperCase();
-		} else {
-			letter = '#'; // 不是字母或中文，则放入以 "#" 作为导航的分组
-		}
-
-		if (!grouped[letter]) {
-			grouped[letter] = [];
-		}
-		grouped[letter].push(contract);
-	});
-
-	console.log('groupedContracts ==================== >');
-	console.log(grouped);
-
-	return grouped;
-});
 </script>
 <style scoped>
 .left-aside-container {
@@ -298,71 +145,38 @@ const groupedContracts = computed(() => {
 	border-right: 1px solid lightgray;
 }
 
-.list {
+.tab {
 	width: 100%;
-	height: calc(100% - 104px);
-	overflow: hidden;
-	/* overflow-y: auto; */
+	height: 20px;
 	display: flex;
+	justify-content: space-around;
+	align-items: center;
 	flex-direction: row;
 }
 
-.aside {
-	width: 100%;
-	height: calc(100% - 104px);
-	overflow: hidden;
-}
-.contract-list-container-side {
-	width: calc(100% + 40px);
-	height: calc(100% - 104px);
-	overflow: hidden;
-	overflow-y: auto;
-}
-.contract-list-container {
-	width: calc(100% + 40px);
-	height: 900%;
-	/* overflow: hidden;
-	overflow-y: auto; */
-}
-
-ul,
-li {
-	list-style: none;
-	padding: 1px;
-}
-
-.user-info-container {
-	padding: 4px;
-}
-
-.user-info-item {
-	display: flex;
-	padding: 4px;
+.ta {
+	width: 15%;
+	font-size: smaller;
 	align-items: center;
-	justify-content: left;
 	cursor: pointer;
+	display: flex;
+	justify-content: center;
 }
 
-.user-info-item-avatar {
-	width: 30px;
-	height: 30px;
-	margin-right: 4px;
-}
-
-li:hover {
-	background-color: #f2f2f2;
-}
-
-.username {
-	width: 100px;
+.active {
+	color: #409eff;
+	border-bottom: #409eff solid 1px;
 }
 
-.online {
-	position: relative;
-	left: 100px;
+.side {
+	width: 100%;
+	height: calc(100% - 124px);
+	overflow: hidden;
 }
 
-.alphabet-letter {
-	cursor: pointer;
+.list {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
 }
 </style>
diff --git a/src/views/customer/components/LinkMan.vue b/src/views/customer/components/LinkMan.vue
new file mode 100644
index 0000000..861004d
--- /dev/null
+++ b/src/views/customer/components/LinkMan.vue
@@ -0,0 +1,359 @@
+<template>
+	<div class="list">
+		<div class="aside">
+			<div class="contract-list-container-side">
+				<div class="contract-list-container">
+					<div v-for="(group, letter) in groupedContracts" :key="letter" :data-letter="letter">
+						<ul>
+							<li v-for="(item, index) in group" :key="index">
+								<div class="user-info-item" @click="SwitchContactL(item, change, index)">
+									<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
+									<div class="username">{{ item.user.username }}</div>
+									<div v-for="(onl, i) in online" :key="i">
+										<div v-if="item.user.id === Number(i) && online[i] === false" class="online">离线</div>
+										<div v-else-if="item.user.id === Number(i) && online[i] === true" class="online">在线</div>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="alphabet-list">
+			<div v-for="letter in sortedLetters" :key="letter" class="alphabet-letter" @click="scrollToLetter(letter)">{{ letter }}</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { reactive, ref, computed, onMounted, onUnmounted } from 'vue';
+import { getAll } from '../../../apis/conversation';
+import { useRoute } from 'vue-router';
+import wsStore from '../../../stores/ws';
+
+import { pinyin } from 'pinyin';
+
+const route = useRoute();
+/**
+ * 用户信息
+ * account:用户名
+ * isPlus:是否会员
+ */
+const userInfo = reactive({
+	username: route.query.username,
+	id: route.query.id,
+});
+
+console.log('jimileft');
+console.log('userInfo', userInfo);
+
+const socket = ref(null);
+
+const contracts = reactive([]);
+/**
+ * 获取联系人列表
+ */
+onMounted(() => {
+	gteAllList(userInfo.id);
+
+	// ws.value = useWebsocket(handleMessage, userInfo.userId);
+	// 设置userId
+	// 在钩子函数中调用createWebSocket action
+	wsStore.dispatch('createWebSocket', userInfo.id);
+	// 调用vuex中的action来创建WebSocket连接
+	// store.dispatch('createWebSocket', userInfo.userId);
+
+	// 通过vuex store的state属性获取socket
+	socket.value = wsStore.state.socket;
+
+	console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb');
+});
+
+async function gteAllList(userId) {
+	console.log('获取联系人列表 ==================>');
+	console.log(userId);
+	try {
+		const res = await getAll(userId);
+		// console.log('联系人res');
+		console.log(res);
+
+		// 响应成功的处理
+		if (res.data.code === 19000200) {
+			contracts.value = res.data.data;
+			console.log(contracts.value);
+		} else {
+			alert(res.data.message);
+		}
+	} catch (err) {
+		console.log(err);
+		// 响应失败的处理
+	}
+}
+
+/**
+ * 点击切换联系人
+ */
+const emits = defineEmits(['SwitchContactL']); // 定义可以触发的事件
+
+const SwitchContactL = (item, change, index) => {
+	console.log(index);
+	// change(index);
+	console.log('item =========================>');
+	console.log(item);
+	console.log(item.conversationId);
+	wsStore.dispatch('updateConvId', item.conversationId);
+	emits('SwitchContactL', item);
+};
+
+const change = (index) => {
+	const element = document.querySelectorAll('.user-info-item'); // 获取user-info-item元素
+	for (let i = 0; i < element.length; i++) {
+		element[i].classList.remove('blue-bg'); // 移除blue-bg类
+	}
+	element[index].classList.toggle('blue-bg'); // 切换blue-bg类
+};
+
+/**
+ * 联系人搜索
+ * @param {string} keyword 搜索关键字 接收来自JimiLeftHeader.vue中输入框的值
+ * @returns {array} 搜索结果
+ * @example
+ * searchContracts('京东京造自营店');
+ */
+const searchKeyword = ref('');
+
+const filteredContracts = computed(() => {
+	console.log('searchKeyword', searchKeyword.value);
+	console.log(contracts.value);
+	return searchContracts(searchKeyword.value);
+});
+const searchContracts = (keyword) => {
+	if (contracts.value) {
+		console.log(contracts.value.filter((contract) => contract.user.username.includes(keyword)));
+		return contracts.value.filter((contract) => contract.user.username.includes(keyword));
+	} else {
+		console.log('contracts.value is undefined');
+		return [];
+	}
+};
+
+const handleSearch = (keyword) => {
+	searchKeyword.value = keyword;
+};
+
+// 使用computed属性创建一个响应式计算属性
+// 这将自动更新message数组的值
+const online = computed(() => wsStore.state.online);
+
+const timer = ref(null); // 保存定时器引用
+const onlineUser = ref([]); // 保存在线用户
+
+const contracts1 = []; // 保存在线用户
+
+function checkOnline() {
+	console.log('checkOnline ========================>');
+	console.log(groupedContracts.value);
+	// 遍历 contracts 数组
+	contracts.value.forEach((contract) => {
+		// 获取 contract 中的 user 对象，并添加到 onlineUser 数组中
+		onlineUser.value.push(contract.user.id);
+	});
+
+	console.log(contracts.value);
+	console.log('好友列表 =============>');
+	console.log(onlineUser.value);
+	console.log('单个好友 ======================>');
+	console.log(online.value);
+
+	socket.value.send(
+		JSON.stringify({
+			conversationId: filteredContracts.value[0].conversationId,
+			content: {
+				typeEnum: 'ONLINE', // ONLINE
+				content: onlineUser.value, // []
+			},
+		}),
+		console.log('send online ===========================>'),
+		console.log(
+			JSON.stringify({
+				conversationId: filteredContracts.value[0].conversationId,
+				content: {
+					typeEnum: 'ONLINE', // ONLINE
+					content: onlineUser.value, // []
+				},
+			})
+		)
+	);
+}
+
+onMounted(() => {
+	setTimeout(() => {
+		checkOnline(); // 在500毫秒后执行的函数
+	}, 500); // 500毫秒
+	// checkOnline(); // 初始化时调用一次
+	// 在组件挂载后开始定时执行 checkOnline 函数
+	timer.value = setInterval(() => {
+		onlineUser.value = []; // 先将 online 置为 null
+		checkOnline();
+	}, 10000); // 每10秒执行一次
+});
+
+onUnmounted(() => {
+	// 在组件卸载前停止定时执行
+	clearInterval(timer.value);
+});
+
+const sortedLetters = [
+	'A',
+	'B',
+	'C',
+	'D',
+	'E',
+	'F',
+	'G',
+	'H',
+	'I',
+	'J',
+	'K',
+	'L',
+	'M',
+	'N',
+	'O',
+	'P',
+	'Q',
+	'R',
+	'S',
+	'T',
+	'U',
+	'V',
+	'W',
+	'X',
+	'Y',
+	'Z',
+	'#',
+];
+
+const scrollToLetter = (letter) => {
+	const targetElement = document.querySelector(`[data-letter="${letter}"]`);
+
+	if (targetElement) {
+		targetElement.scrollIntoView({ behavior: 'smooth' }); // 滚动到可视区域
+	}
+};
+
+const sortedContracts = computed(() => {
+	if (contracts.value) {
+		console.log('constractaaaaa ==================== >');
+		console.log(contracts.value);
+		return contracts.value.slice().sort((a, b) => {
+			const pinyinA = pinyin(a.user.username, { style: pinyin.STYLE_FIRST_LETTER });
+			const pinyinB = pinyin(b.user.username, { style: pinyin.STYLE_FIRST_LETTER });
+			return pinyinA.join('').localeCompare(pinyinB.join(''));
+		});
+	} else {
+		return [];
+	}
+});
+
+// 在计算属性 groupedContracts 中添加逻辑来检查用户名的第一个字符是否是字母或中文
+const groupedContracts = computed(() => {
+	const grouped = {};
+
+	sortedContracts.value.forEach((contract) => {
+		const firstChar = contract.user.username[0];
+		let letter = '';
+
+		// 判断用户名的第一个字符是否是字母或中文
+		if (/^[A-Za-z\u4e00-\u9fa5]+$/.test(firstChar)) {
+			const pinyinFirstLetter = pinyin(firstChar, { style: pinyin.STYLE_FIRST_LETTER });
+			letter = pinyinFirstLetter[0][0].toUpperCase();
+		} else {
+			letter = '#'; // 不是字母或中文，则放入以 "#" 作为导航的分组
+		}
+
+		if (!grouped[letter]) {
+			grouped[letter] = [];
+		}
+		grouped[letter].push(contract);
+	});
+
+	console.log('groupedContracts ==================== >');
+	console.log(grouped);
+
+	return grouped;
+});
+
+const tabRef = ref(1);
+</script>
+<style scoped>
+.list {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	/* overflow-y: auto; */
+	display: flex;
+	flex-direction: row;
+}
+
+.aside {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+.contract-list-container-side {
+	width: calc(100% + 40px);
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
+}
+.contract-list-container {
+	width: calc(100% + 40px);
+	height: 900%;
+	/* overflow: hidden;
+	overflow-y: auto; */
+}
+
+ul,
+li {
+	list-style: none;
+	padding: 1px;
+}
+
+.user-info-container {
+	padding: 4px;
+}
+
+.user-info-item {
+	display: flex;
+	padding: 4px;
+	align-items: center;
+	justify-content: left;
+	cursor: pointer;
+}
+
+.user-info-item-avatar {
+	width: 30px;
+	height: 30px;
+	margin-right: 4px;
+}
+
+li:hover {
+	background-color: #f2f2f2;
+}
+
+.username {
+	width: 100px;
+}
+
+.online {
+	position: relative;
+	left: 100px;
+}
+
+.alphabet-list {
+	height: calc(100% + 100px);
+}
+.alphabet-letter {
+	cursor: pointer;
+}
+</style>
-- 
Gitee


From ab8a3b73055b059805452dd0fea3df20c4543d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Thu, 24 Aug 2023 16:55:42 +0800
Subject: [PATCH 12/13] =?UTF-8?q?=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 22 ++++++++++++++++++-
 .../customer/components/AsideMessage.vue      |  4 ++--
 src/views/customer/components/JimiLeft.vue    |  4 ++--
 .../customer/components/JimiLeftHeader.vue    |  1 +
 src/views/customer/components/LinkMan.vue     |  4 +---
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c863571..1d2566f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,28 @@ 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: radial-gradient(#ff5400 50%, #c6c1c1); */
 	background-image: linear-gradient(45deg, rgb(46, 49, 241), rgb(48, 232, 69));
-	/* background-image: url("https://i.imgur.com/Jr0xL1l.jpg"); */
+	/* background: conic-gradient(rgb(255, 84, 0, 0.7), transparent 100%, #ff9704 100%); */
+	/* background: linear-gradient(-45deg, rgba(74, 153, 236, 0.7), #eccc59); */
+	/* background-image: linear-gradient(45deg, #ff9704, #ff5400, #ff9704); */
+	/* background-color: rgb(38, 34, 34); */
+	/* background:
+		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0,
+		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0,
+		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px,
+		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px,
+		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px,
+		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0,
+		linear-gradient(to right, #ff9704, #ff5400, #ff9704);
+	background-size:
+		470px 470px,
+		970px 970px,
+		410px 410px,
+		610px 610px,
+		530px 530px,
+		730px 730px,
+		100% 100%; */
 	z-index: 0;
 	display: flex;
 	justify-content: center;
diff --git a/src/views/customer/components/AsideMessage.vue b/src/views/customer/components/AsideMessage.vue
index 4a7fc19..70203da 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;
 }
 </style>
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index c2798cf..762d097 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -164,8 +164,8 @@ const tabChange = (tab) => {
 }
 
 .active {
-	color: #409eff;
-	border-bottom: #409eff solid 1px;
+	color: #ff5400;
+	border-bottom: #ff5400 solid 1px;
 }
 
 .side {
diff --git a/src/views/customer/components/JimiLeftHeader.vue b/src/views/customer/components/JimiLeftHeader.vue
index dd20149..ea64ccb 100644
--- a/src/views/customer/components/JimiLeftHeader.vue
+++ b/src/views/customer/components/JimiLeftHeader.vue
@@ -71,6 +71,7 @@ const handleSearch = () => {
 <style scoped>
 .header-container {
 	background-color: white;
+	/* background-image: linear-gradient(to right, #ff9569 0%, #ff5400 100%); */
 	height: 104px;
 	padding: 10px;
 }
diff --git a/src/views/customer/components/LinkMan.vue b/src/views/customer/components/LinkMan.vue
index 861004d..c9e97b8 100644
--- a/src/views/customer/components/LinkMan.vue
+++ b/src/views/customer/components/LinkMan.vue
@@ -56,12 +56,9 @@ const contracts = reactive([]);
 onMounted(() => {
 	gteAllList(userInfo.id);
 
-	// ws.value = useWebsocket(handleMessage, userInfo.userId);
 	// 设置userId
 	// 在钩子函数中调用createWebSocket action
 	wsStore.dispatch('createWebSocket', userInfo.id);
-	// 调用vuex中的action来创建WebSocket连接
-	// store.dispatch('createWebSocket', userInfo.userId);
 
 	// 通过vuex store的state属性获取socket
 	socket.value = wsStore.state.socket;
@@ -79,6 +76,7 @@ async function gteAllList(userId) {
 
 		// 响应成功的处理
 		if (res.data.code === 19000200) {
+			console.log('联系人列表 ============================>');
 			contracts.value = res.data.data;
 			console.log(contracts.value);
 		} else {
-- 
Gitee


From a59ea8aee623820ede487f1013cf3933d8bacbb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Mon, 28 Aug 2023 16:45:37 +0800
Subject: [PATCH 13/13] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E8=81=94=E7=B3=BB=E4=BA=BAtab=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E8=81=8A=E5=A4=A9=EF=BC=8C=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E5=90=8E=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  55 +++--
 src/apis/conversation.js                      |   4 +-
 src/apis/user.js                              |  27 ++-
 src/apis/websockeet.js                        |   4 +-
 src/assets/img/R-C.jpg                        | Bin 0 -> 16647 bytes
 src/assets/img/online.png                     | Bin 0 -> 309 bytes
 src/assets/img/unonline.png                   | Bin 0 -> 304 bytes
 src/layout/components/Header.vue              |   4 +-
 src/layout/index.vue                          | 135 +++++++++--
 src/merchant/components/Header.vue            |   1 +
 src/merchant/index.vue                        | 128 ++++++++++-
 src/router/index.js                           |   7 +-
 src/stores/ws.js                              |  32 ++-
 src/views/customer/abuout.vue                 |  74 ++++--
 src/views/customer/components/Chat.vue        |  42 ++--
 src/views/customer/components/JimiLeft.vue    |  16 +-
 .../customer/components/JimiLeftHeader.vue    |   8 +-
 src/views/customer/components/LinkMan.vue     | 216 +++++++++++++++---
 src/views/customer/components/Operation.vue   |  16 +-
 src/views/customer/components/bg.vue          | 178 +++++++++++++++
 20 files changed, 798 insertions(+), 149 deletions(-)
 create mode 100644 src/assets/img/R-C.jpg
 create mode 100644 src/assets/img/online.png
 create mode 100644 src/assets/img/unonline.png
 create mode 100644 src/views/customer/components/bg.vue

diff --git a/src/App.vue b/src/App.vue
index 1d2566f..15ac07c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,21 @@
 <script setup>
 import { RouterView } from 'vue-router';
+import bg from './views/customer/components/bg.vue';
 </script>
 
 <template>
 	<div class="bg">
-		<router-view v-slot="{ Component }">
-			<transition name="fade">
-				<component :is="Component" />
-			</transition>
-		</router-view>
+		<div class="bg-1">
+			<bg> </bg>
+		</div>
+
+		<div class="bg-2">
+			<router-view v-slot="{ Component }">
+				<transition name="fade">
+					<component :is="Component" />
+				</transition>
+			</router-view>
+		</div>
 	</div>
 </template>
 
@@ -18,30 +25,30 @@ import { RouterView } from 'vue-router';
 	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: radial-gradient(#ff5400 50%, #c6c1c1); */
-	background-image: linear-gradient(45deg, rgb(46, 49, 241), rgb(48, 232, 69));
+	/* 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); */
-	/* background-image: linear-gradient(45deg, #ff9704, #ff5400, #ff9704); */
-	/* background-color: rgb(38, 34, 34); */
-	/* background:
-		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0,
-		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0,
-		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px,
-		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px,
-		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px,
-		radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0,
-		linear-gradient(to right, #ff9704, #ff5400, #ff9704);
-	background-size:
-		470px 470px,
-		970px 970px,
-		410px 410px,
-		610px 610px,
-		530px 530px,
-		730px 730px,
-		100% 100%; */
 	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;
+}
 </style>
diff --git a/src/apis/conversation.js b/src/apis/conversation.js
index ce7abb0..6fcf9d1 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-service/conversation/create',
+		'/chat-service/conversation/insert',
 
 		joiners,
 
@@ -14,7 +14,7 @@ export function create(joiners) {
 	);
 }
 export function getAll(userId) {
-	return axios.get('/chat-service/conversation/' + userId, {
+	return axios.get('/chat-service/conversation/id/' + userId, {
 		headers: {
 			'Content-Type': 'application/json',
 		},
diff --git a/src/apis/user.js b/src/apis/user.js
index a189f26..fb40c41 100644
--- a/src/apis/user.js
+++ b/src/apis/user.js
@@ -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 f956d49..d729f50 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-service/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
GIT binary patch
literal 16647
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/online.png b/src/assets/img/online.png
new file mode 100644
index 0000000000000000000000000000000000000000..34e7dd1141e9d248ee7feefc27aa0093b86bb8ff
GIT binary patch
literal 309
zcmV-50m}Y~P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#?@2^KR5(wild(?2Fc60SLviREAmWHFw2cvn2jM}OGIXa~k(e2I4!ZXdP&=3m
z2niJP1|S)lLzbEdM?rEMZ}$2B?(X-Q&~s5wJvsr>swp$BL6~e4yn^__i08X@LJyGg
zSXSQ$3xF=WDr3eA#nqLeqNw8@AhFrgf8tu;ARn<Ffxzyp0VFod0lE+Iga|jK(6=7o
z*s2u)7a;&J-prvMwkl9x00uz-07mEtgw3B8b_E;>(DJ7NNUPQioCj9$Zeo4XYT+yg
zIMl>hDfHX}xJ|ETbO8BznsO99?mb9#|9g*epn=}C-oNn|n-5qKcOzza00000NkvXX
Hu0mjf^~`+g

literal 0
HcmV?d00001

diff --git a/src/assets/img/unonline.png b/src/assets/img/unonline.png
new file mode 100644
index 0000000000000000000000000000000000000000..a39ecc4235e45446d47a61d339745e863998fa23
GIT binary patch
literal 304
zcmV-00nh%4P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#>PbXFR5(wilQB-iKoCX$mu!hU1ceIG5Lue>1zhJKR4M35N2Ju0oCEIQ!ed!b
zrHGK=25xAuCUW5@8wIq)+wIQ&H}hv_iIIyV^*9MIvwL^HBYD#&aQ6=Y&v~A&j}r!f
zrfDW!*S!MBeyMDmB*{F>vds_=0A|+wAs#ea5xFMm{lOkkRn>yzQ)EvbRCN^q%<K)o
zEE4dks#nK=ZvYpO0EkFJvfEoQvws2FwoQwo_&Ef;1GtT>;7e7ffrYxR7w#U_M3PGp
zc?<ykX4EtGfU+zv(=>fKdyoeIXOD7Z1A}X$f8!49hF1~Ok9`aP0000<MNUMnLSTXb
Clzh|x

literal 0
HcmV?d00001

diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 14d13a7..ff7b19b 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -2,8 +2,8 @@
 <!-- eslint-disable vue/attributes-order -->
 <template>
 	<div class="header-container">
-		<el-avatar :src="userInfo.item.user.avatar" shape="square" class="user-avatar" v-if="userInfo.item != ''" />
-		<el-text class="user-account" v-if="userInfo.item != ''">{{ userInfo.item.user.username }}</el-text>
+		<el-avatar :src="userInfo.item.avatar" shape="square" class="user-avatar" v-if="userInfo.item != ''" />
+		<el-text class="user-account" v-if="userInfo.item != ''">{{ userInfo.item.name }}</el-text>
 	</div>
 </template>
 <script setup>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7084bd4..208f2cf 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,28 +2,56 @@
 <!-- eslint-disable vue/attributes-order -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-	<div class="common-layout">
-		<el-container>
-			<el-aside width="300px">
-				<JimiLeft @SwitchContact="transmit" />
-			</el-aside>
+	<div class="layout">
+		<div class="header">
+			<div class="left">
+				<div class="welcome">欢迎进入商城!</div>
+				<div class="user">
+					<div class="img"><img class="img" :src="avatar" /></div>
+					<el-text class="user-account">{{ username }}</el-text>
+				</div>
+			</div>
+			<div class="center"></div>
+			<div class="right">
+				<div class="bar">
+					<el-icon><House /></el-icon>首页
+				</div>
+				<div class="bar">
+					<el-icon><ShoppingCart /></el-icon>购物车
+				</div>
+				<div class="bar">
+					<el-icon><Star /></el-icon>收藏夹
+				</div>
+				<div class="bar">欢迎入驻</div>
+				<div class="bar">联系客服</div>
+			</div>
+		</div>
+		<div class="common-layout">
 			<el-container>
-				<el-header class="el-header">
-					<Header :userInfo="userInfo" :key="userInfo" />
-				</el-header>
-				<el-main class="el-main">
-					<AppMain :userInfo="userInfo" :key="userInfo" />
-				</el-main>
+				<el-aside width="300px">
+					<JimiLeft @SwitchContact="transmit" />
+				</el-aside>
+				<el-container>
+					<el-header class="el-header">
+						<Header :userInfo="userInfo" :key="userInfo" />
+					</el-header>
+					<el-main class="el-main">
+						<AppMain :userInfo="userInfo" :key="userInfo" />
+					</el-main>
+				</el-container>
 			</el-container>
-		</el-container>
+		</div>
 	</div>
 </template>
 <script setup>
 import JimiLeft from '@/views/customer/components/JimiLeft.vue';
 import Header from '@/layout/components/Header.vue';
 import AppMain from '@/layout/components/AppMain.vue';
-import { reactive, onMounted } from 'vue';
+import { reactive, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import DefaultUserAvatar from '@/assets/img/default-user-avatar.png';
+import { Star, House, ShoppingCart } from '@element-plus/icons-vue';
+import wsStore from '../stores/ws';
 
 const route = useRoute();
 const router = useRouter();
@@ -31,16 +59,31 @@ const userInfo = reactive({
 	item: '',
 });
 
+const username = computed(() => wsStore.state.username);
+const avatar = computed(() => wsStore.state.avatar);
+
 const transmit = (item) => {
+	console.log('index中的联系人信息 ==================>');
 	console.log(item);
 	userInfo.item = item;
 	console.log(userInfo.item);
 };
 </script>
 <style scoped>
+.layout {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
 .common-layout {
 	height: 84%;
 	width: 1200px;
+	margin-top: 20px;
 }
 .common-layout :deep(.el-aside),
 .common-layout :deep(.el-container) {
@@ -53,4 +96,70 @@ const transmit = (item) => {
 :deep(.el-main) {
 	padding: 0;
 }
+
+.header {
+	width: 100%;
+	height: 50px;
+	background: #fff;
+	position: absolute;
+	top: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+}
+.left {
+	width: 300px;
+	height: 100%;
+	background: #fff;
+	display: flex;
+	flex-direction: row;
+}
+
+.welcome {
+	width: 120px;
+	height: 100%;
+	text-align: center;
+	line-height: 60px;
+	align-items: center;
+}
+.user {
+	width: 180px;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.user-account {
+	margin-left: 10px;
+}
+.center {
+	width: 40%;
+	height: 100%;
+}
+.right {
+	width: 500px;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.img {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	border: solid 1px lightgray;
+}
+
+.bar {
+	width: 80px;
+	height: 50px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
 </style>
diff --git a/src/merchant/components/Header.vue b/src/merchant/components/Header.vue
index 14d13a7..1ede8b7 100644
--- a/src/merchant/components/Header.vue
+++ b/src/merchant/components/Header.vue
@@ -7,6 +7,7 @@
 	</div>
 </template>
 <script setup>
+import wsStore from '../../stores/ws';
 // eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['userInfo']);
 // eslint-disable-next-line vue/no-setup-props-destructure
diff --git a/src/merchant/index.vue b/src/merchant/index.vue
index db92dfd..0dc6ac8 100644
--- a/src/merchant/index.vue
+++ b/src/merchant/index.vue
@@ -2,20 +2,45 @@
 <!-- eslint-disable vue/attributes-order -->
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
-	<div class="common-layout">
-		<el-container>
-			<el-aside width="300px">
-				<JimiLeft @SwitchContact="transmit" />
-			</el-aside>
+	<div class="layout">
+		<div class="header">
+			<div class="left">
+				<div class="welcome">欢迎进入商城!</div>
+				<div class="user">
+					<div class="img"><img class="img" :src="DefaultUserAvatar" /></div>
+					<el-text class="user-account">{{ username }}</el-text>
+				</div>
+			</div>
+			<div class="center"></div>
+			<div class="right">
+				<div class="bar">
+					<el-icon><House /></el-icon>首页
+				</div>
+				<div class="bar">
+					<el-icon><ShoppingCart /></el-icon>购物车
+				</div>
+				<div class="bar">
+					<el-icon><Star /></el-icon>收藏夹
+				</div>
+				<div class="bar">欢迎入驻</div>
+				<div class="bar">联系客服</div>
+			</div>
+		</div>
+		<div class="common-layout">
 			<el-container>
-				<el-header class="el-header">
-					<Header :userInfo="userInfo" :key="userInfo" />
-				</el-header>
-				<el-main class="el-main">
-					<AppMain :userInfo="userInfo" :key="userInfo" />
-				</el-main>
+				<el-aside width="300px">
+					<JimiLeft @SwitchContact="transmit" />
+				</el-aside>
+				<el-container>
+					<el-header class="el-header">
+						<Header :userInfo="userInfo" :key="userInfo" />
+					</el-header>
+					<el-main class="el-main">
+						<AppMain :userInfo="userInfo" :key="userInfo" />
+					</el-main>
+				</el-container>
 			</el-container>
-		</el-container>
+		</div>
 	</div>
 </template>
 <script setup>
@@ -24,6 +49,8 @@ import Header from '@/merchant/components/Header.vue';
 import AppMain from '@/merchant/components/AppMain.vue';
 import { reactive, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import DefaultUserAvatar from '@/assets/img/default-user-avatar.png';
+import { Star, House, ShoppingCart } from '@element-plus/icons-vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -38,9 +65,20 @@ const transmit = (item) => {
 };
 </script>
 <style scoped>
+.layout {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
 .common-layout {
 	height: 84%;
 	width: 1200px;
+	margin-top: 20px;
 }
 .common-layout :deep(.el-aside),
 .common-layout :deep(.el-container) {
@@ -53,4 +91,70 @@ const transmit = (item) => {
 :deep(.el-main) {
 	padding: 0;
 }
+
+.header {
+	width: 100%;
+	height: 50px;
+	background: #fff;
+	position: absolute;
+	top: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+}
+.left {
+	width: 300px;
+	height: 100%;
+	background: #fff;
+	display: flex;
+	flex-direction: row;
+}
+
+.welcome {
+	width: 120px;
+	height: 100%;
+	text-align: center;
+	line-height: 60px;
+	align-items: center;
+}
+.user {
+	width: 180px;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.user-account {
+	margin-left: 10px;
+}
+.center {
+	width: 40%;
+	height: 100%;
+}
+.right {
+	width: 500px;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.img {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	border: solid 1px lightgray;
+}
+
+.bar {
+	width: 80px;
+	height: 50px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index bf5975b..5becc1c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,12 +2,13 @@ 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,
 		},
@@ -31,12 +32,12 @@ 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',
diff --git a/src/stores/ws.js b/src/stores/ws.js
index cb5a768..e14041a 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);
@@ -105,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/views/customer/abuout.vue b/src/views/customer/abuout.vue
index 3503072..af45010 100644
--- a/src/views/customer/abuout.vue
+++ b/src/views/customer/abuout.vue
@@ -7,34 +7,82 @@
 import { ref } from 'vue';
 import { create } from '../../apis/conversation';
 import { useRouter, useRoute } from 'vue-router';
-import { id } from 'element-plus/es/locale';
+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);
 		}
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 7629c7e..05e583f 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -21,11 +21,7 @@
 										" -->
 									<div
 										class="message-left"
-										v-if="
-											item.content.typeEnum == 'MESSAGE' &&
-											item.conversationId == userInfo.item.conversation.id &&
-											item.userId == userInfo.item.user.id
-										"
+										v-if="item.content.typeEnum == 'MESSAGE' && userInfo.item.convID === item.conversationId && item.userId === userInfo.item.id"
 									>
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
@@ -39,9 +35,7 @@
 									</div>
 									<div
 										class="message-left"
-										v-else-if="
-											item.content.typeEnum == 'LINK' && item.conversationId == userInfo.item.conversation.id && item.userId == userInfo.item.user.id
-										"
+										v-else-if="item.content.typeEnum == 'LINK' && userInfo.item.convID === item.conversationId && item.userId === userInfo.item.id"
 									>
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
@@ -57,9 +51,7 @@
 
 									<div
 										class="message-left"
-										v-else-if="
-											item.content.typeEnum == 'ORDER' && item.conversationId == userInfo.item.conversation.id && item.userId == userInfo.item.user.id
-										"
+										v-else-if="item.content.typeEnum == 'ORDER' && userInfo.item.convID === item.conversationId && item.userId === userInfo.item.id"
 									>
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
@@ -80,9 +72,7 @@
 									<div
 										class="message-right"
 										v-else-if="
-											item.content.typeEnum == 'MESSAGE' &&
-											item.conversationId == userInfo.item.conversation.id &&
-											item.userId != userInfo.item.user.id
+											item.content.typeEnum === 'MESSAGE' && userInfo.item.convID === item.conversationId && item.userId !== userInfo.item.id
 										"
 									>
 										<div class="message-r" v-if="item.content.typeEnum === 'MESSAGE'">
@@ -93,11 +83,10 @@
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
 										</div>
 									</div>
+
 									<div
 										class="message-right"
-										v-else-if="
-											item.content.typeEnum == 'LINK' && item.conversationId == userInfo.item.conversation.id && item.userId != userInfo.item.user.id
-										"
+										v-else-if="item.content.typeEnum == 'LINK' && userInfo.item.convID === item.conversationId && item.userId !== userInfo.item.id"
 									>
 										<div class="message-r" v-if="item.content.typeEnum === 'LINK'">
 											<!-- 单个商品组件 -->
@@ -110,9 +99,7 @@
 
 									<div
 										class="message-right"
-										v-else-if="
-											item.content.typeEnum == 'ORDER' && item.conversationId == userInfo.item.conversation.id && item.userId != userInfo.item.user.id
-										"
+										v-else-if="item.content.typeEnum == 'ORDER' && userInfo.item.convID === item.conversationId && item.userId !== userInfo.item.id"
 									>
 										<div class="message-r" v-if="item.content.typeEnum === 'ORDER'">
 											<!-- 单个订单组件 -->
@@ -189,7 +176,10 @@ const messageList = ref([]);
 
 onMounted(() => {
 	if (props.userInfo.item !== '') {
-		gteAllList(props.userInfo.item.conversation.id, page.value);
+		console.log('聊天记录中的id ================================>');
+		console.log(props.userInfo.item);
+		console.log(props.userInfo.item.convID);
+		gteAllList(props.userInfo.item.convID, page.value);
 	}
 
 	if (scrollbar.value) {
@@ -219,7 +209,7 @@ async function gteAllList(convId, page) {
 
 		// 响应成功的处理
 		if (res.data.code === 19000200) {
-			const message = res.data.data;
+			const message = res.data.data.records;
 			if (message.length === 0) {
 				msg.value = '没有更多了';
 			}
@@ -236,7 +226,7 @@ async function gteAllList(convId, page) {
 					console.log(message[i].content);
 				}
 			}
-			message.reverse();
+			// message.reverse();
 			wsStore.state.messageList.unshift(...message);
 
 			// messageList.value = [...message, ...messageList.value];
@@ -250,8 +240,10 @@ async function gteAllList(convId, page) {
 }
 
 const getMore = () => {
+	console.log('getmore中的userinfo ==================>');
+	console.log(props.userInfo.item);
 	page.value++;
-	gteAllList(props.userInfo.item.conversation.id, page.value);
+	gteAllList(props.userInfo.item.id, page.value);
 };
 
 const message = ref();
@@ -260,6 +252,8 @@ const message = ref();
 // 这将自动更新messageL数组的值
 const messageL = computed(() => wsStore.state.messageList);
 
+const newUserId = computed(() => wsStore.state.userId);
+
 // 监听 messageL 的更新
 watch(messageL, (newVal, oldVal) => {
 	// 使用 nextTick 来确保 DOM 更新已经完成
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index 762d097..e8ad9c2 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -14,25 +14,28 @@
 
 		<div v-if="tabRef == 1" class="side">
 			<div v-if="tabRef == 1" class="list" :key="tabRef">
-				<LinkMan @SwitchContactL="SwitchContact"></LinkMan>
+				<LinkMan @SwitchContactL="SwitchContact" :flag="tabRef"></LinkMan>
 			</div>
 		</div>
 
 		<div v-if="tabRef == 2" class="side">
 			<div v-if="tabRef == 2" class="list" :key="tabRef">
 				<div>这是商家好友列表</div>
+				<LinkMan @SwitchContactL="SwitchContact" :flag="tabRef"></LinkMan>
 			</div>
 		</div>
 
 		<div v-if="tabRef == 3" class="side">
 			<div v-if="tabRef == 3" class="list" :key="tabRef">
 				<div>这是供应商好友列表</div>
+				<LinkMan @SwitchContactL="SwitchContact" :flag="tabRef"></LinkMan>
 			</div>
 		</div>
 
 		<div v-if="tabRef == 4" class="side">
 			<div v-if="tabRef == 4" class="list" :key="tabRef">
 				<div>这是实体店好友列表</div>
+				<LinkMan @SwitchContactL="SwitchContact" :flag="tabRef"></LinkMan>
 			</div>
 		</div>
 	</div>
@@ -56,8 +59,7 @@ const route = useRoute();
  * isPlus:是否会员
  */
 const userInfo = reactive({
-	username: route.query.username,
-	id: route.query.id,
+	id: route.query.userId,
 });
 
 console.log('jimileft');
@@ -86,13 +88,11 @@ onMounted(() => {
  */
 const emits = defineEmits(['SwitchContact']); // 定义可以触发的事件
 
-const SwitchContact = (item, change, index) => {
-	console.log(index);
-	// change(index);
+const SwitchContact = (item) => {
 	console.log('item =========================>');
 	console.log(item);
-	console.log(item.conversationId);
-	wsStore.dispatch('updateConvId', item.conversationId);
+	console.log(item.id);
+	wsStore.dispatch('updateConvId', item.id);
 	emits('SwitchContact', item);
 };
 
diff --git a/src/views/customer/components/JimiLeftHeader.vue b/src/views/customer/components/JimiLeftHeader.vue
index ea64ccb..6b6f259 100644
--- a/src/views/customer/components/JimiLeftHeader.vue
+++ b/src/views/customer/components/JimiLeftHeader.vue
@@ -3,7 +3,7 @@
 		<div class="user-info">
 			<el-avatar class="user-avatar" shape="square" :src="userInfo.avatar" />
 			<div style="display: flex; flex-direction: column; justify-content: center">
-				<span class="user-account-text">{{ userInfo.username }}</span>
+				<span class="user-account-text">{{ username }}</span>
 				<div>
 					<span class="plus-logo">PLUS</span>
 				</div>
@@ -20,9 +20,10 @@
 
 <script setup>
 import DefaultUserAvatar from '@/assets/img/default-user-avatar.png';
-import { reactive, ref, onMounted } from 'vue';
+import { reactive, ref, onMounted, computed } from 'vue';
 import { Search } from '@element-plus/icons-vue';
 import { useRoute, useRouter } from 'vue-router';
+import wsStore from '../../../stores/ws';
 
 const route = useRoute();
 const router = useRouter();
@@ -37,6 +38,9 @@ const userInfo = reactive({
 	avatar: route.query.avatar || DefaultUserAvatar,
 	isPlus: false,
 });
+
+const username = computed(() => wsStore.state.username);
+
 onMounted(() => {
 	// detection();
 });
diff --git a/src/views/customer/components/LinkMan.vue b/src/views/customer/components/LinkMan.vue
index c9e97b8..be90c2c 100644
--- a/src/views/customer/components/LinkMan.vue
+++ b/src/views/customer/components/LinkMan.vue
@@ -7,11 +7,17 @@
 						<ul>
 							<li v-for="(item, index) in group" :key="index">
 								<div class="user-info-item" @click="SwitchContactL(item, change, index)">
-									<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
-									<div class="username">{{ item.user.username }}</div>
+									<el-avatar class="user-info-item-avatar" shape="square" :src="item.avatar" />
+									<div class="username">{{ item.name }}</div>
 									<div v-for="(onl, i) in online" :key="i">
-										<div v-if="item.user.id === Number(i) && online[i] === false" class="online">离线</div>
-										<div v-else-if="item.user.id === Number(i) && online[i] === true" class="online">在线</div>
+										<div v-if="item.id === Number(i) && online[i] === false" class="online">
+											<img src="../../../assets/img/unonline.png" class="img" />
+											<!-- <p class="word1">离线</p> -->
+										</div>
+										<div v-else-if="item.id === Number(i) && online[i] === true" class="online">
+											<img src="../../../assets/img/online.png" class="img" />
+											<!-- <p class="word2">在线</p> -->
+										</div>
 									</div>
 								</div>
 							</li>
@@ -26,11 +32,11 @@
 	</div>
 </template>
 <script setup>
-import { reactive, ref, computed, onMounted, onUnmounted } from 'vue';
+import { reactive, ref, computed, onMounted, onUnmounted, defineProps } from 'vue';
 import { getAll } from '../../../apis/conversation';
 import { useRoute } from 'vue-router';
 import wsStore from '../../../stores/ws';
-
+import { getUser } from '../../../apis/user';
 import { pinyin } from 'pinyin';
 
 const route = useRoute();
@@ -40,8 +46,7 @@ const route = useRoute();
  * isPlus:是否会员
  */
 const userInfo = reactive({
-	username: route.query.username,
-	id: route.query.id,
+	id: route.query.userId,
 });
 
 console.log('jimileft');
@@ -50,11 +55,24 @@ console.log('userInfo', userInfo);
 const socket = ref(null);
 
 const contracts = reactive([]);
+
+const props = defineProps({
+	flag: {
+		type: Number,
+		default: 1,
+	},
+});
+
 /**
  * 获取联系人列表
  */
 onMounted(() => {
-	gteAllList(userInfo.id);
+	console.log('LinkMain中的flag ============================>');
+
+	console.log(props.flag);
+	getuser(userInfo.id);
+	// gteAllList(userInfo.id);
+	gteAllList(userInfo.id, props.flag);
 
 	// 设置userId
 	// 在钩子函数中调用createWebSocket action
@@ -66,7 +84,33 @@ onMounted(() => {
 	console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb');
 });
 
-async function gteAllList(userId) {
+async function getuser(userId) {
+	console.log('获取用户信息 ==================>');
+	console.log(userId);
+	try {
+		const res = await getUser(userId);
+		// console.log('联系人res');
+		console.log(res);
+
+		// 响应成功的处理
+		if (res.data.code === 19000200) {
+			console.log('用户信息 ============================>');
+			console.log(res.data.data);
+			wsStore.dispatch('updateUserName', res.data.data.name);
+			wsStore.dispatch('updateUserAvatar', res.data.data.avatar);
+			wsStore.dispatch('updateUserType', res.data.data.userTypeEnum);
+		} else {
+			alert(res.data.message);
+		}
+	} catch (err) {
+		console.log(err);
+		// 响应失败的处理
+	}
+}
+
+async function gteAllList(userId, flag) {
+	console.log('getlist中的flag=======================>');
+	console.log(flag);
 	console.log('获取联系人列表 ==================>');
 	console.log(userId);
 	try {
@@ -79,6 +123,116 @@ async function gteAllList(userId) {
 			console.log('联系人列表 ============================>');
 			contracts.value = res.data.data;
 			console.log(contracts.value);
+
+			if (flag === 1) {
+				// 提取满足条件 contract.user2.id !== userId 的 contract.user2 对象到新数组
+				const filteredUser2Array = contracts.value
+					.filter(
+						(contract) =>
+							contract.user2.id !== parseInt(userId) && (contract.user2.userTypeEnum === 'USER' || contract.user2.userTypeEnum === 'ROBOT')
+					)
+					.map((contract) => {
+						const modifiedUser2 = { ...contract.user2 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser2.convID = contract.id; // 添加新属性 convID
+						return modifiedUser2; // 返回修改后的对象
+					});
+
+				const filteredUser1Array = contracts.value
+					.filter(
+						(contract) =>
+							contract.user1.id !== parseInt(userId) && (contract.user1.userTypeEnum === 'USER' || contract.user1.userTypeEnum === 'ROBOT')
+					)
+					.map((contract) => {
+						const modifiedUser1 = { ...contract.user1 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser1.convID = contract.id; // 添加新属性 convID
+						return modifiedUser1; // 返回修改后的对象
+					});
+				console.log('满足条件的 contract.user2 对象：', filteredUser2Array);
+				console.log('满足条件的 contract.user1 对象：', filteredUser1Array);
+				// 合并数组
+				const userArray = [...filteredUser1Array, ...filteredUser2Array]; // 合并数组
+
+				console.log('合并后的 userArray', userArray);
+
+				contracts.value = userArray; // 赋值给 contracts
+			} else if (flag === 2) {
+				// 提取满足条件 contract.user2.id !== userId 的 contract.user2 对象到新数组
+				const filteredUser2Array = contracts.value
+					.filter((contract) => contract.user2.id !== parseInt(userId) && contract.user2.userTypeEnum === 'SHOP')
+					.map((contract) => {
+						const modifiedUser2 = { ...contract.user2 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser2.convID = contract.id; // 添加新属性 convID
+						return modifiedUser2; // 返回修改后的对象
+					});
+
+				const filteredUser1Array = contracts.value
+					.filter((contract) => contract.user1.id !== parseInt(userId) && contract.user1.userTypeEnum === 'SHOP')
+					.map((contract) => {
+						const modifiedUser1 = { ...contract.user1 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser1.convID = contract.id; // 添加新属性 convID
+						return modifiedUser1; // 返回修改后的对象
+					});
+				console.log('满足条件的 contract.user2 对象：', filteredUser2Array);
+				console.log('满足条件的 contract.user1 对象：', filteredUser1Array);
+				// 合并数组
+				const userArray = [...filteredUser1Array, ...filteredUser2Array]; // 合并数组
+
+				console.log('合并后的 userArray', userArray);
+
+				contracts.value = userArray; // 赋值给 contracts
+			} else if (flag === 4) {
+				// 提取满足条件 contract.user2.id !== userId 的 contract.user2 对象到新数组
+				const filteredUser2Array = contracts.value
+					.filter((contract) => contract.user2.id !== parseInt(userId) && contract.user2.userTypeEnum === 'ESHOP')
+					.map((contract) => {
+						const modifiedUser2 = { ...contract.user2 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser2.convID = contract.id; // 添加新属性 convID
+						return modifiedUser2; // 返回修改后的对象
+					});
+
+				const filteredUser1Array = contracts.value
+					.filter((contract) => contract.user1.id !== parseInt(userId) && contract.user1.userTypeEnum === 'ESHOP')
+					.map((contract) => {
+						const modifiedUser1 = { ...contract.user1 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser1.convID = contract.id; // 添加新属性 convID
+						return modifiedUser1; // 返回修改后的对象
+					});
+				console.log('满足条件的 contract.user2 对象：', filteredUser2Array);
+				console.log('满足条件的 contract.user1 对象：', filteredUser1Array);
+				// 合并数组
+				const userArray = [...filteredUser1Array, ...filteredUser2Array]; // 合并数组
+
+				console.log('合并后的 userArray', userArray);
+
+				contracts.value = userArray; // 赋值给 contracts
+			} else if (flag === 5) {
+				// 提取满足条件 contract.user2.id !== userId 的 contract.user2 对象到新数组
+				const filteredUser2Array = contracts.value
+					.filter((contract) => contract.user2.id !== parseInt(userId) && contract.user2.userTypeEnum === 'SUPPLIER')
+					.map((contract) => {
+						const modifiedUser2 = { ...contract.user2 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser2.convID = contract.id; // 添加新属性 convID
+						return modifiedUser2; // 返回修改后的对象
+					});
+
+				const filteredUser1Array = contracts.value
+					.filter((contract) => contract.user1.id !== parseInt(userId) && contract.user1.userTypeEnum === 'SUPPLIER')
+					.map((contract) => {
+						const modifiedUser1 = { ...contract.user1 }; // 创建一个包含 contract.user2 所有属性的新对象
+						modifiedUser1.convID = contract.id; // 添加新属性 convID
+						return modifiedUser1; // 返回修改后的对象
+					});
+				console.log('满足条件的 contract.user2 对象：', filteredUser2Array);
+				console.log('满足条件的 contract.user1 对象：', filteredUser1Array);
+				// 合并数组
+				const userArray = [...filteredUser1Array, ...filteredUser2Array]; // 合并数组
+
+				console.log('合并后的 userArray', userArray);
+
+				contracts.value = userArray; // 赋值给 contracts
+			}
+
+			console.log('赋值后的 contracts', contracts.value);
 		} else {
 			alert(res.data.message);
 		}
@@ -96,10 +250,10 @@ const emits = defineEmits(['SwitchContactL']); // 定义可以触发的事件
 const SwitchContactL = (item, change, index) => {
 	console.log(index);
 	// change(index);
-	console.log('item =========================>');
+	console.log('切换联系人item =========================>');
 	console.log(item);
-	console.log(item.conversationId);
-	wsStore.dispatch('updateConvId', item.conversationId);
+	console.log(item.convID);
+	wsStore.dispatch('updateConvId', item.convID);
 	emits('SwitchContactL', item);
 };
 
@@ -127,8 +281,8 @@ const filteredContracts = computed(() => {
 });
 const searchContracts = (keyword) => {
 	if (contracts.value) {
-		console.log(contracts.value.filter((contract) => contract.user.username.includes(keyword)));
-		return contracts.value.filter((contract) => contract.user.username.includes(keyword));
+		console.log(contracts.value.filter((contract) => contract.name.includes(keyword)));
+		return contracts.value.filter((contract) => contract.name.includes(keyword));
 	} else {
 		console.log('contracts.value is undefined');
 		return [];
@@ -154,7 +308,7 @@ function checkOnline() {
 	// 遍历 contracts 数组
 	contracts.value.forEach((contract) => {
 		// 获取 contract 中的 user 对象，并添加到 onlineUser 数组中
-		onlineUser.value.push(contract.user.id);
+		onlineUser.value.push(contract.id);
 	});
 
 	console.log(contracts.value);
@@ -165,7 +319,7 @@ function checkOnline() {
 
 	socket.value.send(
 		JSON.stringify({
-			conversationId: filteredContracts.value[0].conversationId,
+			conversationId: filteredContracts.value[0].convID,
 			content: {
 				typeEnum: 'ONLINE', // ONLINE
 				content: onlineUser.value, // []
@@ -174,7 +328,7 @@ function checkOnline() {
 		console.log('send online ===========================>'),
 		console.log(
 			JSON.stringify({
-				conversationId: filteredContracts.value[0].conversationId,
+				conversationId: filteredContracts.value[0].id,
 				content: {
 					typeEnum: 'ONLINE', // ONLINE
 					content: onlineUser.value, // []
@@ -190,10 +344,10 @@ onMounted(() => {
 	}, 500); // 500毫秒
 	// checkOnline(); // 初始化时调用一次
 	// 在组件挂载后开始定时执行 checkOnline 函数
-	timer.value = setInterval(() => {
-		onlineUser.value = []; // 先将 online 置为 null
-		checkOnline();
-	}, 10000); // 每10秒执行一次
+	// timer.value = setInterval(() => {
+	// 	onlineUser.value = []; // 先将 online 置为 null
+	// 	checkOnline();
+	// }, 10000); // 每10秒执行一次
 });
 
 onUnmounted(() => {
@@ -244,8 +398,8 @@ const sortedContracts = computed(() => {
 		console.log('constractaaaaa ==================== >');
 		console.log(contracts.value);
 		return contracts.value.slice().sort((a, b) => {
-			const pinyinA = pinyin(a.user.username, { style: pinyin.STYLE_FIRST_LETTER });
-			const pinyinB = pinyin(b.user.username, { style: pinyin.STYLE_FIRST_LETTER });
+			const pinyinA = pinyin(a.name, { style: pinyin.STYLE_FIRST_LETTER });
+			const pinyinB = pinyin(b.name, { style: pinyin.STYLE_FIRST_LETTER });
 			return pinyinA.join('').localeCompare(pinyinB.join(''));
 		});
 	} else {
@@ -258,7 +412,7 @@ const groupedContracts = computed(() => {
 	const grouped = {};
 
 	sortedContracts.value.forEach((contract) => {
-		const firstChar = contract.user.username[0];
+		const firstChar = contract.name[0];
 		let letter = '';
 
 		// 判断用户名的第一个字符是否是字母或中文
@@ -344,10 +498,20 @@ li:hover {
 }
 
 .online {
+	width: 100px;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
 	position: relative;
-	left: 100px;
+	left: 60px;
+	justify-content: center;
+	align-items: center;
 }
 
+/* .word2 {
+	color: #1afa29;
+} */
+
 .alphabet-list {
 	height: calc(100% + 100px);
 }
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index be17bfb..f6f1711 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -96,7 +96,9 @@ onMounted(() => {
 	// 	ws.value.close();
 	// }
 	if (props.user.item !== '') {
-		convId.value = props.user.item.conversation.id;
+		console.log('operation中的User =================>');
+		console.log(props.user.item);
+		convId.value = props.user.item.convID;
 		// 	console.log('convId.value == ' + convId.value);
 		// 	// ws.value = useWebsocket(handleMessage, userInfo.userId);
 		// 	// 设置userId
@@ -238,6 +240,7 @@ const send = () => {
 	// );
 	console.log('socket=======>');
 	console.log(socket.value);
+	console.log(convId.value);
 	socket.value.send(
 		JSON.stringify({
 			conversationId: convId.value,
@@ -248,6 +251,17 @@ const send = () => {
 		})
 	);
 
+	console.log('发送的消息 ================>');
+	console.log(
+		JSON.stringify({
+			conversationId: convId.value,
+			content: {
+				typeEnum: 'MESSAGE', // ONLINE
+				content: replacedMsg, // []
+			},
+		})
+	);
+
 	editorResult.value = '';
 };
 
diff --git a/src/views/customer/components/bg.vue b/src/views/customer/components/bg.vue
new file mode 100644
index 0000000..860a290
--- /dev/null
+++ b/src/views/customer/components/bg.vue
@@ -0,0 +1,178 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+	<div class="bg">
+		<div class="rhomb"></div>
+		<div class="triangle-down1"></div>
+		<div class="triangle-down2"></div>
+		<div class="triangle-down3"></div>
+		<div class="parallelogram1"></div>
+		<div class="parallelogram2"></div>
+		<div class="parallelogram3"></div>
+		<div class="parallelogram4"></div>
+		<div class="parallelogram5"></div>
+		<div class="parallelogram6"></div>
+		<div class="parallelogram7"></div>
+		<div class="parallelogram8"></div>
+		<div class="parallelogram9"></div>
+		<div class="parallelogram10"></div>
+	</div>
+</template>
+<style scoped>
+.bg {
+	display: flex;
+	position: relative;
+	margin: auto;
+	height: 100%;
+	width: 100%;
+	background-image: linear-gradient(#ff8a00, #fa3910);
+}
+
+.triangle-down1 {
+	/* 倒三角 */
+	width: 0;
+	height: 0;
+	position: absolute;
+	left: 28%;
+	top: 32%;
+	border-left: 5vh solid transparent;
+	border-right: 5vh solid transparent;
+	border-top: 10vh solid rgba(255, 255, 255, 0.1);
+}
+.triangle-down2 {
+	/* 倒三角 */
+	width: 0;
+	height: 0;
+	position: absolute;
+	left: 20%;
+	bottom: 5%;
+	border-left: 5vh solid transparent;
+	border-right: 5vh solid transparent;
+	border-top: 10vh solid rgba(255, 255, 255, 0.1);
+}
+.triangle-down3 {
+	/* 倒三角 */
+	width: 0;
+	height: 0;
+	position: absolute;
+	right: 8%;
+	bottom: 33%;
+	border-left: 5vh solid transparent;
+	border-right: 5vh solid transparent;
+	border-top: 10vh solid rgba(255, 255, 255, 0.1);
+}
+
+.rhomb {
+	/* 菱形 */
+	width: 5vw;
+	height: 5vh;
+	position: absolute;
+	left: 6%;
+	top: 60%;
+	background: rgba(255, 255, 255, 0.1);
+	transform: rotateZ(90deg) skew(60deg, 20deg);
+}
+
+.parallelogram1 {
+	/* 平行四边形 */
+	width: 5vw;
+	height: 55vh;
+	position: absolute;
+	left: 10%;
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram2 {
+	/* 平行四边形 */
+	width: 7vw;
+	height: 70vh;
+	position: absolute;
+	right: 18%;
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram3 {
+	/* 平行四边形 */
+	width: 6vw;
+	height: 110vh;
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram4 {
+	/* 平行四边形 */
+	width: 0.4vw;
+	height: 60vh;
+	position: absolute;
+	left: 15%;
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram5 {
+	/* 平行四边形 */
+	width: 0.4vw;
+	height: 38vh;
+	position: absolute;
+	left: 38%;
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram6 {
+	/* 平行四边形 */
+	width: 0.5vw;
+	height: 60vh;
+	position: absolute;
+	left: 30%;
+	bottom: 0;
+	background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram7 {
+	/* 平行四边形 */
+	width: 0.5vw;
+	height: 30vh;
+	position: absolute;
+	left: 50%;
+	bottom: 0;
+	background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram8 {
+	/* 平行四边形 */
+	width: 8vw;
+	height: 20vh;
+	position: absolute;
+	right: 10%;
+	bottom: 0;
+	background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+
+.parallelogram9 {
+	/* 平行四边形 */
+	width: 0.4vw;
+	height: 20vh;
+	position: absolute;
+	right: 25%;
+	bottom: 0;
+	background: linear-gradient(to top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+.parallelogram10 {
+	/* 平行四边形 */
+	width: 0.5vw;
+	height: 70vh;
+	position: absolute;
+	right: 20%;
+	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
+	transform: skew(-20deg);
+}
+</style>
-- 
Gitee