<template> <div style="height: 100%; width: 100%; background-color: #fff"> <div class="wrap"> <!-- 头部 --> <div class="titleBox"> <img src="@/assets/image/avatar.png" style="argin: 10px 20px 10px 20px;width: 40px;height: 40px;" class="head_portrait" /> <span style="color: #fff;font-size: 15px;">官方客服</span> </div> <!-- 底部 --> <div class="infoBox"> <!-- 左边用户列表 --> <div class="userList"> <div class="searchBox"> <el-input placeholder="请输入内容" v-model="search" class="input-with-select" size="mini" @input="inquire"> <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick" /> </el-input> <!-- <el-button--> <!-- icon="el-icon-plus"--> <!-- size="mini"--> <!-- type="primary"--> <!-- @click="dialogVisible = true"--> <!-- ></el-button>--> </div> <div class="userListBox" ref="scrollUserBox" id="userBox"> <div v-if="list!=null && list.length > 0" v-for="(item, index) in list" :key="index" @click="getAct(item, index)" :class="item.opposUserId == act ? 'userFlexAct' : 'userFlex'" > <el-badge :hidden="item.unreadCount ==0" :value="item.unreadCount" :max="99" class="item"> <div> <img :src="item.avatar" class="head_portrait2" style="margin-left: 20px ; " /> </div> </el-badge> <div style="margin-right: 10px;"></div> <div style="margin-right: 40px"> <div style="color: #565656" class="nickName"> { { item.nickName }} </div> <div class="userInfo" v-if="item.messageType==1" >{ {item.message}}</div> <div class="userInfo" v-if="item.messageType==2" >[商品]</div> <div class="userInfo" v-if="item.messageType==3" >[图片]</div> <div class="userInfo" v-if="item.messageType==4" >[订单]</div> </div> <div style="margin-right: 10px; font-size: 14px; color: #ccc"> { { formatDate(item.createTime) }} </div> </div> </div> </div> <!-- 右边输入框和信息展示 --> <div class="infoList"> <!-- 信息 --> <div class="infoTop" ref="scrollBox" id="box"> <div v-for="(item, index) in info" :key="index"> <!-- 显示时间信息 --> <div class="chatInfoRight1 " v-if="shouldShowTime(index)"> { { formatDate1(item.createTime) }} </div> <div :class="(item.fromUserId == item.userId && item.fromUserType != 1) ? 'chatInfoRight' :'chatInfoLeft' "> <!-- <img :src="item.avatar" alt="头像" class="head_portrait2" />--> <img :src="(item.fromUserId == item.userId && item.fromUserType != 1) ? require('@/assets/image/avatar.png') : item.avatar" class="head_portrait2" style="margin-left: 20px;" /> <div :class="(item.fromUserId == item.userId && item.fromUserType != 1) ? 'chatRight' : 'chatLeft'"> <!-- 文字 --> <div class="text" v-if="item.messageType==1" >{ {item.message}}</div> <!-- 商品 --> <div v-if="item.messageType==2" class="text"> <!-- @click="openUrl(`/pages/goodsDetail?id=${parseMessage(item.message).productId}`)"--> <div class="goods1" style="width: 200px;height: 70px;margin: 0 auto;background-color: #FFF;display: flex; "> <image-preview :src="item.message" :width="60" :height="60"/> <div class="right1" style="flex: 1;margin: auto 0;height: 60px;margin-left: 10px;"> <div style="color: #333;height: 30px;line-height: 30px; font-size: 14px; " class="right_title"> { {parseMessage(item.message).productName}} </div> <div style="height: 30px;color: #ff0000;line-height: 30px; font-size: 12px;"> ¥{ {parseMessage(item.message).merchantPrice}}</div> </div> </div> </div> <!-- 图片 --> <div v-if="item.messageType==3" class="text"> <image-preview :src="item.message" :width="70" :height="70"/> </div> </div> </div> </div> </div> <!-- 输入框 --> <div class="infoBottom"> <div class="infoIcon"> <mesImg v-if='isshow==1?true:false' v-model="imgUrl"/> <!-- <i @click="extend('发送商品')" class="el-icon-sell"></i>--> <!-- <i @click="extend('设置')" class="el-icon-setting"></i>--> <!-- <i @click="extend('聊天记录')" class="el-icon-chat-dot-round"></i>--> <!-- <i @click="extend('更多选项')" class="el-icon-more-outline"></i>--> </div> <textarea maxlength="255" show-word-limit type="textarea" class="infoInput" v-model="textarea" @keydown.enter.exact="handlePushKeyword($event)" @keyup.ctrl.enter="lineFeed" :disabled='isshow==1?false:true' /> <div class="fasong" @click="setUp(1)" v-show="isshow==1?true:false">发送</div> </div> </div> </div> </div> <!-- 搜索框边 + 号弹框 --> <el-dialog title="选择需要添加的联系人" :visible.sync="dialogVisible" width="30%" :modal="false" > <span>自定义页面,还没想好写什么功能</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false" >确 定</el-button > </span> </el-dialog> </div> </template> <script> import {getMesList,getMesInfo} from "@/api/ums/umsUser"; import axios from 'axios' export default { watch: { imgUrl(newVal, oldVal) { if (newVal) { this.textarea =this.$constants.baseURL + this.imgUrl; this.setUp(3); } }, }, data() { return { socket: null, imgUrl: "", queryParams:{ pageNum: 1, pageSize: 10, userId:this.$store.getters.userId, userType:2, }, queryParamsUser:{ pageNum: 1, pageSize: 10, userId:this.$store.getters.userId, userType:2, }, // 在线状态 state: 1, //搜索用户 search: "", user: "", info: [], list:[], total:0, userIdserTotal:0, //用户点击选中变色 act: Number, // 加号弹框 dialogVisible: false, //历史信息 userInfoList: [], //输入框 textarea: "", //滚动条距离顶部距离 scrollTop: 0, //滚动条距离顶部距离 scrollUserTop: 0, //发送和输入显隐 isshow:0 }; }, created() { this.socket = new WebSocket('ws://192.168.1.140:9092/front/websocket/2:'+this.$store.getters.userId); // 替换成你的WebSocket服务器地址 this.socket.onmessage = this.handleMessage; this.handleMesList() // this.setUserPageScrollTo() }, methods: { // 计算是否显示时间信息的函数 shouldShowTime(index) { if (index === 0) { return true; // 第一条消息肯定要显示时间信息 } const currentItem = this.info[index]; const prevItem = this.info[index - 1]; const currentTime = new Date(currentItem.createTime); const prevTime = new Date(prevItem.createTime); const timeDiff = currentTime - prevTime; // 计算时间差,单位为毫秒 const minutesDiff = Math.floor(timeDiff / 1000 / 60); // 转换为分钟 return minutesDiff >= 3; // 如果时间差大于等于3分钟,则显示时间信息 }, // 解析消息字符串为对象 parseMessage(message) { try { return JSON.parse(message); } catch (error) { console.error("Error parsing message:", error); return {}; // 返回空对象以避免渲染错误 } }, handleMessage(event) { try { const message = JSON.parse(event.data); // 判断发的信息是不是当前会话 if (this.user.opposUserId == message.userId){ this.getAct(this.user); }else { this.queryParams.pageNum = 1 this.handleMesList(); } // 处理收到的消息 // 例如,将消息添加到相应的聊天记录中 } catch (error) { // console.error('Received message is not in JSON format:', event.data); } }, // 左侧列表 handleMesList(){ getMesList(this.queryParams).then(response => { this.list = response.rows this.total = response.total }); // 直接调用不生效:因为你历史数据刚给,渲染的时候盒子高度还没有成型,所以直接调用拿不到,用个定时器让他在下一轮循环中调用,盒子就已经生成了 this.$nextTick(() => { // 一定要用nextTick this.setUserPageScrollTo(); //页面滚动条距离顶部高度等于这个盒子的高度 this.$refs.scrollUserBox.scrollUserTop = this.$refs.scrollUserBox.scrollHeight; }) }, //切换客服状态 uploadState(state) { if (state !== 4) { this.state = state; } else { this.$confirm("是否退出登录?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$message({ type: "success", message: "退出成功!", }); }) .catch(() => { this.$message({ type: "info", message: "已取消退出", }); }); } }, //搜索icon handleIconClick() { alert("搜索"); console.log(1); }, //点击用户 getAct(val) { console.log(val,11) this.isshow=1 // 点击用户切换数据时先清除监听滚动事件,防止出现没有历史数据的用户,滚动条为0,会触发滚动事件 this.$refs.scrollBox.removeEventListener("scroll", this.srTop); //点击变色 this.act = val.opposUserId; //清空消息数组 // this.info = []; this.queryParamsUser.toUserId = val.opposUserId this.queryParamsUser.pageNum = 1 getMesInfo(this.queryParamsUser).then(response => { this.info = response.rows this.userTotal = response.total this.queryParams.pageNum = 1 this.handleMesList() // 直接调用不生效:因为你历史数据刚给,渲染的时候盒子高度还没有成型,所以直接调用拿不到,用个定时器让他在下一轮循环中调用,盒子就已经生成了 this.$nextTick(() => { // 一定要用nextTick this.setPageScrollTo(); //页面滚动条距离顶部高度等于这个盒子的高度 this.$refs.scrollBox.scrollTop = this.$refs.scroll
vue 加 websocket 聊天
于 2024-04-02 17:17:22 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)