用户与平台客服聊天

.env

@@ -11,8 +11,13 @@ SHOPRO_BASE_URL = https://zysc.fjptzykj.com
 
 # 后端接口 - 测试环境（通过 process.env.NODE_ENV = development）
 SHOPRO_DEV_BASE_URL = https://zysc.fjptzykj.com
+<<<<<<< Updated upstream
 #SHOPRO_DEV_BASE_URL = http://192.168.10.36:6127
 #SHOPRO_DEV_BASE_URL = http://192.168.10.29:6127
+=======
+#SHOPRO_DEV_BASE_URL = http://127.0.0.1:48080
+#SHOPRO_DEV_BASE_URL = http://192.168.10.5:6127
+>>>>>>> Stashed changes
 #SHOPRO_DEV_BASE_URL = http://192.168.1.12:6127
 #SHOPRO_DEV_BASE_URL = http://192.168.10.75:6127
 #SHOPRO_DEV_BASE_URL = http://192.168.1.9:6127

pages.json

@@ -801,6 +801,20 @@
 					"title": "客服",
 					"group": "客服"
 				}
+			},
+			{
+				"path" : "chatList",
+				"style" : 
+				{
+					"navigationBarTitleText" : ""
+				}
+			},
+			{
+				"path" : "chatKefu",
+				"style" : 
+				{
+					"navigationBarTitleText" : ""
+				}
 			}]
 		},
 		{

pages/chat/chatKefu.vue

@@ -0,0 +1,224 @@
+<template>
+  <s-layout
+    class="chat-wrap"
+    :title="toUserName"
+    navbar="inner"
+  >
+    <!--  覆盖头部导航栏背景颜色  -->
+    <view class="page-bg" :style="{ height: sys_navBar + 'px' }"></view>
+    <!--  聊天区域  -->
+    <MessageList ref="messageListRef" :conversationId="conversationId" :useravatar="useravatar" :touserid="currId">
+      <template #bottom>
+        <message-input
+          v-model="chat.msg"
+          @on-tools="onTools"
+          @send-message="onSendMessage"
+        ></message-input>
+      </template>
+    </MessageList>
+    <!--  聊天工具  -->
+    <tools-popup
+      :show-tools="chat.showTools"
+      :tools-mode="chat.toolsMode"
+      @close="handleToolsClose"
+      @on-emoji="onEmoji"
+      @image-select="onSelect"
+      @on-show-select="onShowSelect"
+    >
+      <message-input
+        v-model="chat.msg"
+        @on-tools="onTools"
+        @send-message="onSendMessage"
+      ></message-input>
+    </tools-popup>
+    <!--  商品订单选择  -->
+    <SelectPopup
+      :mode="chat.selectMode"
+      :show="chat.showSelect"
+      @select="onSelect"
+      @close="chat.showSelect = false"
+    />
+  </s-layout>
+</template>
+
+<script setup>
+  import MessageList from '@/pages/chat/components/messageList.vue';
+  import { reactive, ref, toRefs,getCurrentInstance,onMounted } from 'vue';
+  import sheep from '@/sheep';
+  import ToolsPopup from '@/pages/chat/components/toolsPopup.vue';
+  import MessageInput from '@/pages/chat/components/messageInput.vue';
+  import SelectPopup from '@/pages/chat/components/select-popup.vue';
+  import {
+    KeFuMessageContentTypeEnum,
+    WebSocketMessageTypeConstants,
+  } from '@/pages/chat/util/constants';
+  import FileApi from '@/sheep/api/infra/file';
+  import KeFuApi from '@/sheep/api/promotion/kefu';
+  import { useWebSocket } from '@/sheep/hooks/useWebSocket';
+  import { jsonParse } from '@/sheep/util';
+  import {
+  	onLoad
+  } from '@dcloudio/uni-app';
+
+  const sys_navBar = sheep.$platform.navbar;
+	let conversationId = ref('')
+	let touserId = ref('')
+	let currId = ref('')
+	let useravatar = ref('')
+	let toUserName = ref('')
+	onLoad((options)=>{
+		console.log("路由参数",options)
+		conversationId.value = options.userinfo
+		touserId.value = options.userid
+		useravatar.value = options.useravatar
+		currId.value = options.id
+		toUserName.value = options.touserName
+	})
+  const chat = reactive({
+    msg: '',
+    scrollInto: '',
+    showTools: false,
+    toolsMode: '',
+    showSelect: false,
+    selectMode: '',
+  });
+
+  // 发送消息
+  async function onSendMessage() {
+    if (!chat.msg) return;
+    try {
+      const data = {
+        contentType: KeFuMessageContentTypeEnum.TEXT,
+        content: JSON.stringify({ text: chat.msg }),
+		receiverId:touserId.value,
+      };
+      console.log("send message",data)
+      await KeFuApi.sendKefuMessage(data);
+      await messageListRef.value.refreshMessageList();
+      chat.msg = '';
+    } finally {
+      chat.showTools = false;
+    }
+  }
+
+  const messageListRef = ref();
+
+  //======================= 聊天工具相关 start =======================
+
+  function handleToolsClose() {
+    chat.showTools = false;
+    chat.toolsMode = '';
+  }
+
+  function onEmoji(item) {
+    chat.msg += item.name;
+  }
+
+  // 点击工具栏开关
+  function onTools(mode) {
+    if (isReconnecting.value) {
+      sheep.$helper.toast('您已掉线！请返回重试');
+      return;
+    }
+
+    if (!chat.toolsMode || chat.toolsMode === mode) {
+      chat.showTools = !chat.showTools;
+    }
+    chat.toolsMode = mode;
+    if (!chat.showTools) {
+      chat.toolsMode = '';
+    }
+  }
+
+  function onShowSelect(mode) {
+    chat.showTools = false;
+    chat.showSelect = true;
+    chat.selectMode = mode;
+  }
+
+  async function onSelect({ type, data }) {
+    let msg;
+    switch (type) {
+      case 'image':
+        const res = await FileApi.uploadFile(data.tempFiles[0].path);
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.IMAGE,
+          content: JSON.stringify({ picUrl: res.data }),
+        };
+        break;
+      case 'goods':
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.PRODUCT,
+          content: JSON.stringify(data),
+        };
+        break;
+      case 'order':
+        msg = {
+          contentType: KeFuMessageContentTypeEnum.ORDER,
+          content: JSON.stringify(data),
+        };
+        break;
+    }
+    if (msg) {
+      // 发送消息
+      // scrollBottom();
+      await KeFuApi.sendKefuMessage(msg);
+      await messageListRef.value.refreshMessageList();
+      chat.showTools = false;
+      chat.showSelect = false;
+      chat.selectMode = '';
+    }
+  }
+
+  //======================= 聊天工具相关 end =======================
+  const { options } = useWebSocket({
+    // 连接成功
+    onConnected: async () => {},
+    // 收到消息
+    onMessage: async (data) => {
+      const type = data.type;
+      if (!type) {
+        console.error('未知的消息类型：' + data);
+        return;
+      }
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        // 刷新消息列表
+        await messageListRef.value.refreshMessageList(jsonParse(data.content));
+        return;
+      }
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        console.log('管理员已读消息');
+      }
+    },
+  });
+  const isReconnecting = toRefs(options).isReconnecting; // 重连状态
+</script>
+
+<style scoped lang="scss">
+  .chat-wrap {
+    .page-bg {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: var(--ui-BG-Main);
+      z-index: 1;
+    }
+
+    .status {
+      position: relative;
+      box-sizing: border-box;
+      z-index: 3;
+      height: 70rpx;
+      padding: 0 30rpx;
+      background: var(--ui-BG-Main-opacity-1);
+      display: flex;
+      align-items: center;
+      font-size: 30rpx;
+      font-weight: 400;
+      color: var(--ui-BG-Main);
+    }
+  }
+</style>

pages/chat/chatList.vue

@@ -0,0 +1,240 @@
+<template>
+	<s-layout title="消息列表" class="chatMerchant">
+		<!-- <view class="invoiceTitle">
+			<uni-search-bar placeholder="搜索好友" radius="30" bgColor="#E3E3E3" cancelButton="none" clearButton="none"
+				@confirm="search" v-model="state.searchVal" />
+		</view> -->
+
+		<view class="invoList" v-if="state.userList.length>0">
+			<view class="invoice_item" v-for="(item,index) in state.userList" @tap.stop="gotoChat(item.id,item.userId,item.userAvatar,item.userNickname)"
+				:key="index">
+				<uni-badge class="uni-badge-left-margin" :text="item.adminUnreadMessageCount|| 0" absolute="rightTop" size="small">
+					<image :src="item.userAvatar"></image>
+				</uni-badge>
+				<view class="userName_item">
+					<view class="userName">{{item.userNickname}}</view>
+					<view class="userMessage">
+						{{item.messageText || item.lastMessageContent}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="noInvoices" v-else>
+			<image src="/static/data-empty.png"></image>
+			没有信息呦~
+		</view>
+		<!-- <view class="addInvoiceBtn" @tap.stop="addInvoice">添加抬头发票</view> -->
+	</s-layout>
+</template>
+
+<script setup>
+	import DeliveryApi from '@/sheep/api/trade/delivery';
+	import KeFuApi from '@/sheep/api/promotion/kefu';
+	import {
+		onMounted,
+		onUnmounted,
+		reactive,
+		ref
+	} from 'vue';
+	import {
+		onLoad,
+		onShow,
+		onPageScroll,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app';
+	import sheep from '@/sheep';
+
+	// const numData = computed(() => sheep.$store('user').numData);
+	let pollingInterval = null;
+	const state = reactive({
+		searchVal: '',
+		userList: [
+		],
+	})
+	
+	// 启动轮询
+	function startPolling() {
+	  getChatUserList();
+	  pollingInterval = setInterval(() => {
+	    getChatUserList();
+	  }, 5000);
+	}
+	
+	// 停止轮询
+	function stopPolling() {
+	  if (pollingInterval) {
+	    clearInterval(pollingInterval);
+	    pollingInterval = null;
+	  }
+	}
+
+	onMounted(() => {
+		startPolling();
+		// getChatUserList()
+	})
+	onUnmounted(()=>{
+		stopPolling();
+	})
+
+	const getChatUserList = async () => {
+		const {
+			data
+		} = await KeFuApi.getKefuChatuserList();
+		console.log("chatList",data)
+		// console.log("用户列表",data[0].adminUnreadMessageCount);
+		const cleanContent = (content) => {
+		  if (typeof content !== "string") return null; // 确保是字符串
+		  return content.trim().replace(/^\uFEFF/, ""); // 去除 BOM 标记和多余空格
+		};
+		
+		// 处理数据
+		try {
+		  const newData = data.map((item) => {
+		    let parsedContent = null;
+		
+		    // 清理 lastMessageContent
+		    const cleanedContent = cleanContent(item.lastMessageContent);
+		
+		    // 尝试解析 JSON
+		    try {
+		      parsedContent = JSON.parse(cleanedContent);
+		    } catch (parseError) {
+		      // 如果无法解析，直接返回原对象
+		      return item;
+		    }
+		
+		    // 检查是否包含 text 字段
+		    if (parsedContent && parsedContent.text) {
+		      // 返回新对象，包含原字段和新字段
+		      return {
+		        ...item, // 保留原字段
+		        messageText: parsedContent.text, // 新字段
+		      };
+		    }
+		
+		    // 如果没有 text 字段，直接返回原对象
+		    return item;
+		  });
+		
+		  console.log("处理后的数据:", newData);
+		  state.userList = newData
+		} catch (error) {
+		  console.error("处理数据时出错:", error);
+		}
+		// state.userList = data
+	}
+	const gotoChat = (conId,userId,userAvatar,toUserName) => {
+		console.log("用户id", userId)
+		uni.navigateTo({
+			url:"/pages/chat/chatKefu?userinfo="+conId+"&userid="+userId+"&useravatar="+userAvatar+"&touserName="+toUserName
+		})
+	}
+	const searchValue = ref("")
+	const searchHandle = () => {
+		console.log("点击了搜索")
+	}
+	//页面自带的刷新
+	onPullDownRefresh(() => {
+		// sheep.$store('user').updateUserData();
+		getChatUserList()
+		setTimeout(function() {
+			uni.stopPullDownRefresh();
+		}, 500);
+	});
+</script>
+
+<style lang="scss" scoped>
+	// .addInvoiceBtn{
+	// 	width: 90%;
+	// 	height: 95rpx;
+	// 	line-height: 95rpx;
+	// 	text-align: center;
+	// 	border-radius: 100rpx;
+	// 	position: fixed;
+	// 	color: white;
+	// 	font-size: 36rpx;
+	// 	background-color: #7D9337;
+	// 	bottom: 50rpx;
+	// 	left: 50%;
+	// 	transform: translateX(-50%);
+	// }
+	.noInvoices{
+		    width: 100%;
+		    display: flex;
+		    padding-top: 135rpx;
+		    text-align: center;
+		    flex-direction: column;
+		    align-items: center;
+		    font-size: 31rpx;
+			color: #B0B0B0;
+			>image{
+				margin-bottom: 20rpx;
+			}
+	}
+	::v-deep .uni-searchbar {
+		padding: 5px 0 !important;
+	}
+
+	.invoiceTitle {
+		width: 95%;
+		margin: 0 auto;
+		padding: 2rpx 0 16rpx 0;
+		height: 80rpx;
+	}
+
+	.invoList {
+		width: 100%;
+		background-color: #F5F5F5;
+
+		.invoice_item {
+			width: 100%;
+			margin: 0 auto;
+			padding: 21rpx 20rpx;
+			box-sizing: border-box;
+			border-radius: 10rpx;
+			background-color: white;
+			display: flex;
+			position: relative;
+			
+			::v-deep .uni-badge-left-margin {
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 100%;
+
+				}
+			}
+
+
+			.invoice_no {
+				margin-bottom: 10rpx;
+			}
+
+			.userName_item {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-evenly;
+				margin-left: 20rpx;
+
+				.userName {
+					font-size: 32rpx;
+				}
+
+				.userMessage {
+					color: gray;
+					max-height: 80rpx;
+					overflow-y: hidden;
+				}
+			}
+		}
+		.invoice_item::after{
+			content:'';
+			position: absolute;
+			left: 5%;
+			bottom: 0;
+			width: 90%;
+			height: 1rpx; /* 调整为你需要的边框厚度 */
+			background-color: #dadada;
+		}
+	}
+</style>

pages/chat/components/messageList.vue

@@ -2,6 +2,7 @@
   <!--  聊天虚拟列表  -->
   <z-paging
     ref="pagingRef"
+    v-model="messageList"
     use-chat-record-mode
     use-virtual-list
     cell-height-mode="dynamic"
@@ -17,7 +18,7 @@
   >
     <template #top>
       <!-- 撑一下顶部导航 -->
-      <view :style="{height:hei+'px'}"></view>
+      <view :style="{ height: sys_navBar + 'px' }"></view>
     </template>
     <!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置！！！ -->
     <!-- 注意不要直接在chat-item组件标签上设置style，因为在微信小程序中是无效的，请包一层view -->
@@ -27,6 +28,8 @@
         <MessageListItem
           :message="item"
           :message-index="index"
+          :message-list="messageList"
+		  :userAva="props.useravatar"
         ></MessageListItem>
       </view>
     </template>
@@ -43,16 +46,16 @@
 
 <script setup>
   import MessageListItem from '@/pages/chat/components/messageListItem.vue';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref,onMounted,computed } from 'vue';
   import KeFuApi from '@/sheep/api/promotion/kefu';
   import { isEmpty } from '@/sheep/helper/utils';
-const props = defineProps({
+  import sheep from '@/sheep';
-    hei: {
+  import { formatDate } from '@/sheep/util';
-      type: [Object, String, Number],
+
-      default() {},
+  const sys_navBar = sheep.$platform.navbar;
-    },
+  const messageList = ref([]); // 消息列表
-  });
   const showNewMessageTip = ref(false); // 显示有新消息提示
+  const refreshMessage = ref(false); // 更新消息列表
   const backToTopStyle = reactive({
     width: '100px',
     'background-color': '#fff',
@@ -62,41 +65,90 @@ const props = defineProps({
     justifyContent: 'center',
     alignItems: 'center',
   }); // 返回顶部样式
+  const userInfo = computed(() => sheep.$store('user').userInfo);
   const queryParams = reactive({
-    pageNo: 1,
+    no: 1, // 查询次数，只用于触底计算
-    pageSize: 10,
+    limit: 20,
+	conversationId:'',
+    createTime: undefined,
   });
+  
+  const props = defineProps({
+	conversationId:Number,
+	useravatar:String,
+	touserid:String
+  });
+  onMounted(()=>{
+	  console.log("参数值",props)
+  })
   const pagingRef = ref(null); // 虚拟列表
-  const queryList = async (pageNo, pageSize) => {
+  const queryList = async (no, limit,conversationId) => {
     // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-    // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
+    queryParams.no = no;
-    queryParams.pageNo = pageNo;
+    queryParams.limit = limit;
-    queryParams.pageSize = pageSize;
+	queryParams.conversationId = conversationId;
+	// if(userInfo.value.idKefu){
 		await getMessageList();
+	// }
+    
   };
-  const msss = ref([]);
   // 获得消息分页列表
   const getMessageList = async () => {
+	  queryParams.conversationId = props.conversationId
+	  if(props.conversationId){
+		  let ursData = {conversationId:props.conversationId,userId:userInfo.value.id,userType:2}
+		  //const { data2 } = await KeFuApi.updateReadStatus(ursData);
+	  }
+	  console.log("queryParams",queryParams)
     const { data } = await KeFuApi.getKefuMessagePage(queryParams);
-    if (isEmpty(data.list)) {
+	
+    if (isEmpty(data)) {
+      pagingRef.value.completeByNoMore([], true);
       return;
     }
-	msss.value = data.list
+	  console.log("消息列表",data);
-    pagingRef.value.completeByTotal(data.list, data.total);
+	// if( data.list[0].receiverId === userInfo.value.id){
+	// 	return
+	// }
+    if (queryParams.no > 1 && refreshMessage.value) {
+      const newMessageList = [];
+      for (const message of data.list) {
+        if (messageList.value.some((val) => val.id === message.id)) {
+          continue;
+        }
+        newMessageList.push(message);
+      }
+      // 新消息追加到开头
+      messageList.value = [...newMessageList, ...messageList.value];
+      pagingRef.value.updateCache(); // 更新缓存
+      refreshMessage.value = false; // 更新好后重置状态
+      return;
+    }
+    if (data.list.slice(-1).length > 0) {
+      // 设置最后一次历史查询的最后一条消息的 createTime
+      queryParams.createTime = formatDate(data.list.slice(-1)[0].createTime);
+    }
+    pagingRef.value.completeByNoMore(data.list, false);
   };
-  const emits = defineEmits(['cc']);
   /** 刷新消息列表 */
-  const refreshMessageList = (message = undefined) => {
+  const refreshMessageList = async (message = undefined) => {
-    if (queryParams.pageNo != 1 && message !== undefined) {
+    if (typeof message !== 'undefined') {
-      showNewMessageTip.value = true;
       // 追加数据
       pagingRef.value.addChatRecordData([message], false);
-      return;
+    } else {
+      queryParams.createTime = undefined;
+      refreshMessage.value = true;
+      await getMessageList();
+    }
+
+    // 若已是第一页则不做处理
+    if (queryParams.no > 1) {
+      showNewMessageTip.value = true;
+    } else {
+      onScrollToUpper();
     }
-    pagingRef.value.reload();
-	console.log("--data1---")
-	emits("cc", msss.value[msss.value.length-1].kefuName)
   };
+
   /** 滚动到最新消息 */
   const onBackToTopClick = (event) => {
     event(false); // 禁用默认操作
@@ -105,12 +157,10 @@ const props = defineProps({
   /** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
   const onScrollToUpper = () => {
     // 若已是第一页则不做处理
-    if (queryParams.pageNo === 1) {
+    if (queryParams.no === 1) {
       return;
     }
     showNewMessageTip.value = false;
-    // 到底重置消息列表
-    refreshMessageList();
   };
   defineExpose({ getMessageList, refreshMessageList });
 </script>

pages/chat/components/messageListItem.vue

@@ -46,7 +46,7 @@
         <!-- 内容 -->
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
           <view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
-            <mp-html :content="replaceEmoji(message.content)" />
+            <mp-html :content="replaceEmoji(getMessageContent(message).text || message.content)" />
           </view>
         </template>
         <template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
@@ -108,6 +108,7 @@
   import dayjs from 'dayjs';
   import { KeFuMessageContentTypeEnum, UserTypeEnum } from '@/pages/chat/util/constants';
   import { emojiList } from '@/pages/chat/util/emoji';
+  import { jsonParse } from '@/sheep/util';
   import sheep from '@/sheep';
   import { formatDate } from '@/sheep/util';
   import GoodsItem from '@/pages/chat/components/goods.vue';
@@ -130,7 +131,7 @@
       default: () => [],
     },
   });
-  const getMessageContent = computed(() => (item) => JSON.parse(item.content)); // 解析消息内容
+  const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容
 
   //======================= 工具 =======================
 

pages/chat/index.vue

@@ -1,15 +1,18 @@
 <template>
-	<!--     :title="!isReconnecting ? '连接客服成功' : '会话重连中'" -->
+  <!-- <s-layout
-	<!-- :title="kefuName" -->
+    class="chat-wrap"
+    :title="!isReconnecting ? '连接客服成功' : '会话重连中'"
+    navbar="inner"
+  > -->
   <s-layout
     class="chat-wrap"
-    title="众悦商城客服"
+    title="对话中"
     navbar="inner"
   >
     <!--  覆盖头部导航栏背景颜色  -->
-    <div class="page-bg" :style="{ height: sys_navBar + 'px' }"></div>
+    <view class="page-bg" :style="{ height: sys_navBar + 'px' }"></view>
     <!--  聊天区域  -->
-    <MessageList ref="messageListRef" :hei="sys_navBar" @cc="ss">
+    <MessageList ref="messageListRef">
       <template #bottom>
         <message-input
           v-model="chat.msg"
@@ -57,12 +60,10 @@
   import FileApi from '@/sheep/api/infra/file';
   import KeFuApi from '@/sheep/api/promotion/kefu';
   import { useWebSocket } from '@/sheep/hooks/useWebSocket';
-const kefuName = ref('众悦商城客服');
+  import { jsonParse } from '@/sheep/util';
+
   const sys_navBar = sheep.$platform.navbar;
-	function ss(val){
+
-		console.log('ss进来了',val)
-		kefuName.value = val;
-	}
   const chat = reactive({
     msg: '',
     scrollInto: '',
@@ -79,8 +80,13 @@ const kefuName = ref('众悦商城客服');
       const data = {
         contentType: KeFuMessageContentTypeEnum.TEXT,
         content: chat.msg,
+        //content: JSON.stringify({ text: chat.msg }),
       };
-      await KeFuApi.sendKefuMessage(data);
+      const res = await KeFuApi.sendKefuMessage(data);
+	  if(res.data === 5){
+		  sheep.$helper.toast('您是客服，不能跟自己对话');
+		  return 
+	  }
       await messageListRef.value.refreshMessageList();
       chat.msg = '';
     } finally {
@@ -130,7 +136,7 @@ const kefuName = ref('众悦商城客服');
         const res = await FileApi.uploadFile(data.tempFiles[0].path);
         msg = {
           contentType: KeFuMessageContentTypeEnum.IMAGE,
-          content: res.data,
+          content: JSON.stringify({ picUrl: res.data }),
         };
         break;
       case 'goods':
@@ -149,7 +155,11 @@ const kefuName = ref('众悦商城客服');
     if (msg) {
       // 发送消息
       // scrollBottom();
-      await KeFuApi.sendKefuMessage(msg);
+    const res = await KeFuApi.sendKefuMessage(msg);
+	  if(res.data === 5){
+	  		  sheep.$helper.toast('您是客服，不能跟自己对话');
+	  		  return 
+	  }
       await messageListRef.value.refreshMessageList();
       chat.showTools = false;
       chat.showSelect = false;
@@ -165,13 +175,13 @@ const kefuName = ref('众悦商城客服');
     onMessage: async (data) => {
       const type = data.type;
       if (!type) {
-        console.error('未知的消息类型：' + data.value);
+        console.error('未知的消息类型：' + data);
         return;
       }
       // 2.2 消息类型：KEFU_MESSAGE_TYPE
       if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
         // 刷新消息列表
-        await messageListRef.value.refreshMessageList(JSON.parse(data.content));
+        await messageListRef.value.refreshMessageList(jsonParse(data.content));
         return;
       }
       // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
@@ -184,16 +194,10 @@ const kefuName = ref('众悦商城客服');
 </script>
 
 <style scoped lang="scss">
-	
+  .chat-wrap {
-  ::v-deep(.chat-wrap){
-	.ui-bar{
-		position: fixed !important;
-		width: 100%;
-		padding-right: 0 !important;
-	}
     .page-bg {
       width: 100%;
-      position: fixed;
+      position: absolute;
       top: 0;
       left: 0;
       background-color: var(--ui-BG-Main);

sheep/api/promotion/kefu.js

@@ -26,6 +26,50 @@ const KeFuApi = {
       },
     });
   },
+  getKefuMessageList: (params) => {
+    return request({
+      url: '/promotion/kefu-message/list',
+      method: 'GET',
+      params,
+      custom: {
+        auth: true,
+        showLoading: false,
+      },
+    });
+  },
+  //获取聊天列表用户
+  getKefuChatuserList: (params) => {
+    return request({
+      url: '/promotion/kefu-message/listCoversation',
+      method: 'GET',
+      params,
+      custom: {
+        auth: true,
+        showLoading: false,
+      },
+    });
+  },
+	getConversationList: (params) => {
+    return request({
+      url: '/promotion/kefu-conversation/list',
+      method: 'GET',
+      params,
+      custom: {
+        auth: true,
+        showLoading: false,
+      },
+    });
+  },
+  // 更新用户聊天状态
+  updateReadStatus: (data) => {
+    return request({
+      url: '/promotion/kefu-message/update-read-status?conversationId='+data.conversationId+"&userId="+data.userId+"&userType="+data.userType,
+      method: 'PUT',
+      data,
+      custom: {
+      },
+    });
+  },
 };
 
 export default KeFuApi;

sheep/components/s-menu-button/s-menu-button.vue

@@ -53,12 +53,23 @@
 		</view> -->
 		<view class="newList">
 			<view class="new_menu" v-for="(arr, index) in menuList" :key="index">
+<<<<<<< Updated upstream
 				<view v-for="(item, index) in arr" :key="index" class="new_items"
 					:style="[{ width: `${100 * (1 / data.column)}%`}]" @tap="sheep.$router.go(item.url)">
 					<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
+=======
+				<view v-for="(item, index) in arr" :key="index"
+					class="new_items"
+					:style="[{ width: `${100 * (1 / data.column)}%`}]">
+					<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center"
+					@tap="sheep.$router.go(item.url)" v-if="item.title !== '平台客服' || (item.title === '平台客服' && userInfo.idKefu)">
+>>>>>>> Stashed changes
 						<view v-if="item.badge.show" class="tag-box">
 							{{ item.badge.text }}
 						</view>
+						<view v-if="!item.badge.show && item.title === '平台客服' && userInfo.unreadCount>0" class="tag-box" :style="[{ background: '#ff5500', color: 'white', }]">
+							{{userInfo.unreadCount}}
+						</view>
 						<image v-if="item.iconUrl" class="menu-icon" :src="sheep.$url.cdn(item.iconUrl)"
 							mode="aspectFill"></image>
 						<view v-if="data.layout === 'iconText'" class="menu-title"
@@ -115,7 +126,8 @@
 	const state = reactive({
 		cur: 0,
 	});
-
+	const userInfo = computed(() => sheep.$store('user').userInfo);
+	const kefuUnread = userInfo.value.unreadCount
 	// 接收参数
 
 	const props = defineProps({
@@ -205,7 +217,11 @@
 
 	// 生成数据
 	const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
+<<<<<<< Updated upstream
 	console.log('这是菜单', menuList)
+=======
+	console.log("menulist",props.data.list);
+>>>>>>> Stashed changes
 	const swiperHeight = computed(
 		() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180),
 	);
@@ -285,11 +301,11 @@
 		.tag-box {
 			position: absolute;
 			z-index: 2;
-			top: 0;
+			top: 10rpx;
-			right: -6rpx;
+			right: 50rpx;
 			font-size: 2em;
 			line-height: 1;
-			padding: 0.4em 0.6em 0.3em;
+			padding: 8rpx 16rpx; //0.4em 0.6em 0.3em;
 			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
 			transform-origin: 100% 0;
 			border-radius: 200rpx;

sheep/util/index.js

@@ -137,3 +137,17 @@ export const copyValueToTarget = (target, source) => {
   // 更新目标对象值
   Object.assign(target, newObj);
 };
+
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str) {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    console.warn(`str[${str}] 不是一个 JSON 字符串`);
+    return str;
+  }
+}