From 4ff482bbbff4e45bd8f3dcf78c32ebb383a30f62 Mon Sep 17 00:00:00 2001
From: hejin <jmy13864291147@163.com>
Date: Sun, 24 Aug 2025 01:46:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E5=AE=8C=E6=88=90=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                    |   3 +-
 .env.production                     |   3 +-
 src/api/index.js                    |  18 ++++
 src/application/online.vue          | 136 +++++++++++++++++++++++++++-
 src/application/product-details.vue |   8 +-
 src/assets/images/icon/send.png     | Bin 0 -> 764 bytes
 src/layouts/default.vue             |  19 +++-
 src/locale/en.json                  |   4 +
 src/locale/zh.json                  |   4 +
 src/pages.json                      |   2 +-
 src/stores/index.js                 |  95 ++++++++++++++++++-
 11 files changed, 280 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/images/icon/send.png

diff --git a/.env.development b/.env.development
index 89203d2..3ab5f6c 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
 NODE_ENV='development'
 VITE_APP_TITLE='开发环境'
-VITE_APP_BASE_API='http://114.132.197.85:8099'
\ No newline at end of file
+VITE_APP_BASE_API='http://114.132.197.85:8099'
+VITE_APP_SCOKET='ws://114.132.197.85:8099/ws/asset/'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 27aae4a..4b8ace8 100644
--- a/.env.production
+++ b/.env.production
@@ -1,3 +1,4 @@
 NODE_ENV='production'
 VITE_APP_TITLE='生产环境'
-VITE_APP_BASE_API=''
\ No newline at end of file
+VITE_APP_BASE_API='http://114.132.197.85:8099'
+VITE_APP_SCOKET='ws://114.132.197.85:8099/ws/asset/'
\ No newline at end of file
diff --git a/src/api/index.js b/src/api/index.js
index b1ededf..9fff114 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -93,4 +93,22 @@ export const appMaxCatgIdApi = (catgName) => {
 **/
 export const articlePageApi = (params) => {
 	return request.get('/web/newsPageList', {params})
+}
+
+/**
+ * @function 获取聊天窗口信息
+ * @param {string} cusCode 设备唯一值
+ * @param {string} prodId 产品ID
+**/
+export const msgListApi = (data) => {
+	return request.post('/web/chatMain',data)
+}
+
+/**
+ * @function 保存消息
+ * @param {string} id
+ * @param {array} jsonArray 最新的消息列表
+**/
+export const saveMsg = (data) => {
+	return request.post('/web/saveMessage', data)
 }
\ No newline at end of file
diff --git a/src/application/online.vue b/src/application/online.vue
index 6de0d05..3e26403 100644
--- a/src/application/online.vue
+++ b/src/application/online.vue
@@ -1,15 +1,143 @@
 <template>
     <view class="pages">
-    	在线聊天
+    	<scroll-view 
+		    class="scroll-box" 
+			:scroll-y="true" 
+			:scroll-top="msgScroll"
+		>
+    		<view 
+			    class="msg" 
+				:class="item.dataFrom === 'customer' ? 'oneself' : 'opposite'"
+				v-for="(item,index) in useScoketMsg().msgList" 
+				:key="index"
+			>
+			    {{item.content}}
+			</view>
+    	</scroll-view
+		>
+		<view class="footer">
+			<view class="send-box">
+				<uni-easyinput 
+					:inputBorder="false"
+					:clearable="false"
+					:focus="inputFocus"
+					v-model="sendVal" 
+					trim="both"
+					:placeholder="$t('online.placeholder')" 
+					type="search"
+					@confirm="send"
+				>
+				    <template #right>
+						<image 
+						    class="search-icon" 
+							src="@/assets/images/icon/send.png"
+							@click="send"
+						>
+						</image>
+					</template>
+				</uni-easyinput>
+			</view>
+		</view>
     </view>
 </template>
 
 <script setup>
-	import { onLoad } from '@dcloudio/uni-app';
-	import { ref } from 'vue';
+	import { onLoad, onUnload } from '@dcloudio/uni-app';
+	import { ref, nextTick } from 'vue';
+	import { useScoketMsg } from '@/stores/index.js';
 	
+	const inputFocus = ref(true)
+	const sendVal = ref('')
+	const send = () => {
+		if (!sendVal.value) {
+			return
+		}
+		useScoketMsg().send(`customer,${sendVal.value}`).then(() => {
+			sendVal.value = ''
+			inputFocus.value = false
+			nextTick(() => {
+				inputFocus.value = true
+			})
+		})
+	}
+	
+	const msgScroll = ref(9999)
+	const scrollJump = () => {
+		nextTick(() => {
+			msgScroll.value += 99
+		})
+	}
+	useScoketMsg().msgCallback = scrollJump
+	
+	const prodId = ref('')
+	
+	onUnload(() => {
+		useScoketMsg().closeScoket()
+	})
+	
+	onLoad(async(options) => {
+		prodId.value = options.prodId
+		await useScoketMsg().getMsgList(prodId.value)
+		useScoketMsg().scoketInit()
+		scrollJump()
+	})
 </script>
 
 <style lang="scss" scoped>
-	
+.pages {
+	/* #ifdef H5 */
+	min-height: calc(100vh - 44px);
+	/* #endif */
+	background: #f8f9fa;
+	.scroll-box {
+		width: 100%;
+		height: calc(100vh - 160rpx);
+		/* #ifdef H5 */
+		height: calc(100vh - 160rpx - 44px);
+		/* #endif */
+		padding: 38rpx 28rpx;
+		box-sizing: border-box;
+		.msg {
+			width: max-content;
+			max-width: 80%;
+			height: min-content;
+			margin-bottom: 46rpx;
+			padding: 23rpx 34rpx;
+			word-break: break-word;
+			border-radius: 8rpx;
+			border: 2rpx solid #eeeeef;
+			font-size: 28rpx;
+		}
+		.opposite {
+			color: #0d0e0e;
+			background-color: #fff;
+		}
+		.oneself {
+			margin-left: auto;
+			color: #ffffff;
+			background-color: #6b98fe;
+		}
+	}
+	.footer {
+		width: 100%;
+		height: 160rpx;
+		padding: 16rpx;
+		background-color: #eaecf1;
+		.send-box {
+			::v-deep .uni-easyinput {
+				border-radius: 12rpx;
+				border: 2rpx solid #015fe8;
+				overflow: hidden;
+				.uni-easyinput__content {
+					padding: 0 15rpx;
+				}
+			}
+			.search-icon {
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 16rpx;
+			}
+		}
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/application/product-details.vue b/src/application/product-details.vue
index 2ecc567..9de8b8e 100644
--- a/src/application/product-details.vue
+++ b/src/application/product-details.vue
@@ -173,7 +173,7 @@
 				<view @click="tabsChange(2)">
 					{{$t('common.sendInquiry')}}
 				</view>
-				<view>
+				<view @click="goOnline">
 					{{$t('common.chatNow')}}
 				</view>
 			</view>
@@ -312,6 +312,12 @@
 		{id:121113123,title: 'SINOTRUK HOWO Tractor Truck Head',mainPic:'https://dianliang123.oss-cn-qingdao.aliyuncs.com/user/2025/07/09/55979a0deee24031a38e934c6b06ca20.jpg'}
 	])
 	
+	const goOnline = () => {
+		uni.navigateTo({
+			url: `/application/online?prodId=${info.value.id}`
+		})
+	}
+	
 	onLoad((options) => {
 		id.value = options.id
 		getInfo()
diff --git a/src/assets/images/icon/send.png b/src/assets/images/icon/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2732ef24afc71b0a14ac693bccf44789c93ac1c
GIT binary patch
literal 764
zcmV<Y0t5YtP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px%wn;=mR5(wqluc|@RTRg6|2OmA5ET+rGlSI@Z6zdN;?l^bV}cUHf|$sLSW4f7
z4KXYTY%oMtCM0UyK|(u&C8HZcj085ubXqpB>q0Ow7>ysaZ;Bu32Hu^Sdt{~`Hf;$s
za+l|x^Sl3h&i`KVgqNN$kN*!GO8UdB24q$QYpxrZ8%p|p#)?uKq9U@M#akNOek3qg
zs=wlm0m+JjBJkooK;F!5J&4x~^$7NQad;Ilcd)+IXME@MwhFKgz`$eN6sj3E;ml7`
zd487ScsA<a{-fZjbk4mj2JiHSVX#}qJV3m#1c2|&Y(ic&m$oMPs{8KBAx5Q{{X$hU
zedx;hj}^tqU5T!af_Xqq-cLCH%mibb{#*jYNnZpfF<o(${Kdt16em-NK6mf_7QWo_
zx5DA+VJY}run{<yrgO)sZk<~K4bD6rg`7Y-DkBFROUs4N+WVP!`kkzTtKRsuQ7#<o
zbhcAC_*ZWjHAVt>3+&gH=}@zr|2B&2`vs@lZ7`VfEgfl|&tF?SELW<JoB5rtneAij
zxj+5`E@Xu9%psvq7Stw)&A_aOlZ~GIIZmnFmd*-?XI>8iT{p9eD{qb$<Ew2mc&9hY
z1|K1I0ON?N8!g-f+46xzadHW<*SXfKT<HGc;lSlp2d7_(GMU>lKbcxMM5XJu&UQSz
zEt0<leB(w7?=CM{)7Vj*d|~iiBc1y?+OX*t!Lw%k1AO4hg=#LYk02{~W#4FwbX|WW
zFjq?2ui&!K2E^NDj7jVQx(zM?djvPq(Zaw=U#_VzS4ynyOF@9=Oj;=%=D_b=Q8qj)
z@m?F!Y-vyHeE#ZV13Rz9sJil*18{0-y3ug*J^`<}(ZcbSuvNBM=Kh}%Q|_nyK5A;N
uRrs*j+P_V4JWK7(b%7qwHtUhLkozy;w-P&g!o+d_0000<MNUMnLSTY1k8WQ8

literal 0
HcmV?d00001

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index fcdf621..5e9668d 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,15 +2,28 @@
     <view>
 		<view class="anchor"></view>
 		<slot></slot>
-		<SuspensionBtn @ClickTop="ClickTop" @clickMsg="onlineModalShow=true"/>
-		<OnlineModal v-if="onlineModalShow" @close="onlineModalShow=false" />
+		<template v-if="noModal">
+			<SuspensionBtn @ClickTop="ClickTop" @clickMsg="onlineModalShow=true"/>
+			<OnlineModal v-if="onlineModalShow" @close="onlineModalShow=false" />
+		</template>
     </view>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
+	import { ref, watch, computed } from 'vue';
 	import { useScroll } from '@/stores/index.js';
 	
+    const currentPage = computed(() => {
+		let arr = getCurrentPages()
+		return arr[arr.length - 1]
+	})
+	const noModalPage = [
+		'application/online'
+	]
+	const noModal = computed(() => {
+		return noModalPage.indexOf(currentPage.value.route) === -1
+	})
+	
 	const pageRef = ref()
 	const onlineModalShow = ref(false)
 	const onlineModalRef = ref()
diff --git a/src/locale/en.json b/src/locale/en.json
index 618ca8a..a323d25 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -124,6 +124,10 @@
   "footer": {
     "contactUs": "Contact us"
   },
+  "online": {
+	"placeholder": "Send your requiremen",
+	"Retry": "Please try again later"
+  },
   "seo": {
     "news": {
       "title": "China National Heavy Duty Truck Group Co., Ltd. - News List",
diff --git a/src/locale/zh.json b/src/locale/zh.json
index 749dd9a..c638df6 100644
--- a/src/locale/zh.json
+++ b/src/locale/zh.json
@@ -124,6 +124,10 @@
   "footer": {
     "contactUs": "联系我们"
   },
+  "online": {
+  	"placeholder": "Send your requiremen",
+	"Retry": "请稍后重试"
+  },
   "seo": {
     "news": {
       "title": "中国重汽豪沃销售有限公司 - 新闻列表",
diff --git a/src/pages.json b/src/pages.json
index 8d750d6..07a442c 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -112,7 +112,7 @@
 		"navigationStyle": "custom",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "China Trailer, Truck, Trailer Parts, Truck Parts Manufacturers and Factory - Price - SINOTRUCK",
-		"navigationBarBackgroundColor": "#F8F8F8",
+		"navigationBarBackgroundColor": "#ffffff",
 		"backgroundColor": "#F8F8F8"
 	}
 }
diff --git a/src/stores/index.js b/src/stores/index.js
index 5634805..467a109 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { menuCategoryApi } from '@/api/index.js';
+import { useI18n } from 'vue-i18n';
+import { menuCategoryApi, msgListApi, saveMsg } from '@/api/index.js';
+import { getUuid } from '@/utils/tool.js';
 
 export const useIndex = defineStore('index',()=>{
 	const routeMap = {
@@ -59,4 +61,95 @@ export const useScroll = defineStore('scroll', () => {
 		callback,
 		sendCallback
 	}
+})
+
+export const useScoketMsg = defineStore('scoketMsg', () => {
+	const { t } = useI18n()
+	
+	const msgCallback = ref(null)
+	
+	const onlyId = ref(uni.getStorageSync('onlyId'))
+	if (!onlyId.value) {
+		onlyId.value = getUuid()
+		uni.setStorageSync('onlyId', onlyId.value)
+	}
+	const scoket = ref(null)
+	const count = ref(0)
+	const msgList = ref([])
+	const notices = ref([])
+	
+	
+	const chatMain = ref({})
+	const getMsgList = (prodId) => {
+		const data = {
+			cusCode: onlyId.value,
+			prodId
+		}
+		return msgListApi(data).then(({data:res}) => {
+			chatMain.value = res.data
+			if (res.data.jsonArray) {
+				msgList.value = res.data.jsonArray
+			}
+		})
+	}
+	
+	const scoketInit = () => {
+		scoket.value = uni.connectSocket({
+			url: `${import.meta.env.VITE_APP_SCOKET}${onlyId.value}`,
+			success: () => {
+				console.log('创建链接成功')
+			},
+			fail: (err) => {
+				console.log('创建失败',err)
+			}
+		})
+		scoket.value.onMessage((e) => {
+			if (e.data.startsWith("C")) {
+				count.value = e.data;
+			}
+			else if (e.data.startsWith("系统通知")){
+				notices.value.push(e.data);
+			}else if (e.data.startsWith("close")){
+				console.log(e.data)
+			} else {
+				msgList.value.push(JSON.parse(e.data))
+				msgCallback.value && msgCallback.value()
+				saveMsg({id:chatMain.value.id,jsonArray:msgList.value})
+			}
+		})
+		scoket.value.onError((err) => {
+			console.log('链接错误',err)
+		})
+	}
+	const send = (text) => {
+		return new Promise((reslove,reject) => {
+			scoket.value.send({
+				data: text,
+				success: () => {
+					reslove()
+					console.log('发送成功')
+				},
+				fail: (err) => {
+					uni.$showTost(t('online.Retry'))
+					reject(err)
+				}
+			})
+		})
+	}
+	const closeScoket = () => {
+		if (scoket.value) {
+			scoket.value.close()
+			scoket.value = null
+		}
+	}
+	return {
+		scoket,
+		scoketInit,
+		closeScoket,
+		msgList,
+		getMsgList,
+		chatMain,
+		send,
+		msgCallback
+	}
 })
\ No newline at end of file