<template>
<view class="content">
<view class="cul-wrapper">
<block v-for="(item,index) in msgs" :key="index">
<view class="cul-date">{{item.showtime}}</view>
<view :id="'msg-'+index" :class="index == msgs.length -1 ? 'active' : ''">
<view :class="item.userId == uId ?'msg-me':'msg-service'">
<view v-if='item.userId != uId' class=""
style="width: 72rpx;height: 72rpx; margin-right: 34rpx;border-radius: 50%;">
<image style="width: 100%;height: 100%;border-radius: 50%;" :src="zjimg" mode=""></image>
</view>
<view class="msg-text" v-if="item.type == 1">
<view class="msg-text-content" @click="linkToSubscribe(item.line)">
<!-- 三角形 -->
<view :class="item.userId == uId ? 'triangler' : 'trianglel'">
</view>
<!-- <text selectable="true" :class="item.line != 1 ? 'colors' : ''">{{item.chatContent}}</text> -->
<template v-if="item.line">
<!-- 预约约课 -->
<text selectable="true" class="colors" v-if="zxhsetline(item.line.toString(),'subscribe')">{{item.chatContent}}</text>
<!-- 月报信息 -->
<text selectable="true" class="colors" v-else-if="zxhsetline(item.line.toString(),'report')">{{item.chatContent}}</text>
<!-- 积分充值 -->
<text selectable="true" class="colors" v-else-if="zxhsetline(item.line.toString(),'exchange')">{{item.chatContent}}</text>
<!-- 缴费信息 -->
<text selectable="true" class="colors" v-else-if="zxhsetline(item.line.toString(),'payment')">{{item.chatContent}}</text>
<!-- 其他连接加文字 -->
<template v-else>
<text selectable="true">{{item.chatContent}}</text>
<br>
<text selectable="true" v-if="item.line !== 1" class="colors">{{item.line}}</text>
</template>
</template>
<template v-else>
<text selectable="true">{{item.chatContent}}</text>
</template>
</view>
</view>
<view class="msg-img" v-if="item.type == 2">
<image class="img" :src="imgurl+item.chatContent"
style="width:100%;height:100%;display: inherit;" :mode="'aspectFill'"
@click="clickImg(index,imgurl+item.chatContent)"></image>
</view>
<view v-if='item.userId == uId' class=""
style="width: 72rpx;height: 72rpx; margin-left: 34rpx;border-radius: 50%;">
<image style="width: 100%;height: 100%;border-radius: 50%;" :src="myimg" mode=""></image>
</view>
</view>
</view>
</block>
</view>
<!-- 占位符 ，防止键盘弹出遮挡消息-->
<view class="divver" id="msg-00">
</view>
<view class="operation">
<input type="text" cursor-spacing="0" @focus="onFocus" @blur="onBlur" v-model="msgInfor" />
<image src="@/static/images/Upload_pictures.png" style="width: 48rpx;height: 48rpx;" @click="upload()"
:style="{'margin':msgInfor ? '0 30rpx' : '0 40rpx'}"></image>
<image v-show="!msgInfor" src="@/static/images/send.png" style="width: 48rpx;height: 48rpx;"></image>
<button v-show="msgInfor" class="btn" type="default" @click="sendMsg">发送</button>
</view>
<proup :subParams='subParams' ref="subRef"></proup>
</view>
</template>
<script>
import {
HTTP_IMG_URL,
WSS_SERVER_URL
} from '@/config.js';
import getTimes from '@/utils/getTime.js';
import util from '@/utils/util.js'
import proup from '@/component/proup.vue';
import {
getChatRecord,
getChatUser,
getRemindList,
getRemindRead,
queryOrder,
read,
unreadMsgCount
} from '@/api/class.js'
export default {
components: {
proup
},
data() {
return {
msgInfor: '',
msgs: [], //消息列表
socket: "",
// websocket 连接地址
path: WSS_SERVER_URL +
`chat/chat?${uni.getStorageSync('token')}`, // "ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
token: uni.getStorageSync('token'),
// 传过来的参数
option2: [], //内部变量
// 助教id
aId: '',
// 用户id
uId: '',
// 该条消息创建的时间，用于查询消息记录
cTime: null,
// 获取每次最后一条记录的时间，用于查询下一页记录
lastTime: '',
chatList: [],
imgurl: HTTP_IMG_URL,
isShow: false,
// 自己头像
myimg: '',
// 助教头像
zjimg: '',
subParams: {},
subRef: null,
timer:''
}
},
computed: {
},
onShow(options) {
// 设置未读消息数量
this.getMessage()
this.jumpScroll('#msg-00')
//进入这个页面的时候创建websocket连接
this.connectSocket();
},
onHide() {
console.log('隐藏')
uni.closeSocket();
clearInterval(this.timer);
},
onUnload() {
console.log('卸载了')
uni.closeSocket();
clearInterval(this.timer);
},
onLoad(options) {
this.option2 = options; //用来关闭 可显示用
if (this.option2) {
this.chatList = [];
this.uId = this.option2.uid ? this.option2.uid : uni.getStorageSync('userInfo').userId
this.initData(this.option2)
// 设置未读消息数量
this.getMessage()
}
},
// 下拉刷新记录
onPullDownRefresh() {
this.getChatList(this.lastTime)
},
methods: {
zxhsetline(url,name){
if(url.indexOf(name) !== -1){
return true
}else{
return false
}
},
//连接websocket
connectSocket() {
let that = this;
this.socketTask = uni.connectSocket({
url: that.path,
success(res) {
console.log("websocket连接成功");
that.isSuccess = true;
clearInterval(this.timer);
that.timer = setInterval(() => {
that.sendSocketMessage("ping")
}, 1500)
},
fail(err) {
console.log("报错", err);
}
},
);
this.socketTask.onMessage(function(res) {
if (res.data != '发送消息给前端' && res.data != 'ping') {
let serverData = res.data ? JSON.parse(res.data) : res.data; //这是字符串，如果要对象记得转换一下
uni.setStorageSync('serverData', serverData)
// 接收最新消息
that.msgs = []
that.getChatList(serverData.data)
}
});
this.socketTask.onError(function(res) {
console.log('WebSocket连接打开失败，请检查！');
console.log(res);
this.isSuccess = false
that.connectSocket()
//进入重新连接
that.reconnect();
})
// // 监听连接关闭 -
this.socketTask.onClose((e) => {
console.log('WebSocket连接关闭！');
})
},
//进入重新连接
reconnect() {
console.log('进入断线重连');
this.socketTask.close();
this.socketTask = null;
this.connectSocket();
},
//发送消息
sendSocketMessage(msg) {
return new Promise((reslove, reject) => {
this.socketTask.send({
data: msg,
success(res) {
reslove(res);
},
fail(res) {
reject(res);
}
});
})
},
// ios获取未读总数
getMessage() {
unreadMsgCount().then(
res => {
console.log('========》', res);
if (res.code == 200) {
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(res.data) //角标设置
// #endif
}
})
},
//滚动到指定位置
jumpScroll(val) {
// console.log(val);
setTimeout(function() {
uni.pageScrollTo({
duration: 1,
selector: val
});
}, 100);
},
//向后端发送消息
sendMsg() {
let that = this
if (this.msgInfor == '') {
uni.showToast({
title: "不能发送空消息",
duration: 2000,
icon: 'none',
})
return
}
// 发送消息
var newItem = {
chatContent: that.msgInfor,
userId: that.uId,
createDate: this.formatDate(new Date()),
line: 1,
type: 1
}
let msg = '{"uid":"' + this.aId + '","isKF":"1","msg":"' + that.msgInfor + '","type":"1"}';
uni.sendSocketMessage({
data: msg,
success(data) {
// console.log('发送成功' + data);
that.msgInfor = ''
that.chatList.push(newItem);
that.msgs = getTimes.checkShowRule(that.chatList, 'createDate');
that.jumpScroll('#msg-' + (that.msgs.length - 1).toString())
},
fail(err) {
this.connectSocket();
console.log(err)
}
});
},
// 获取聊天对象
getUserData() {
getChatUser(this.aId).then(res => {
if (res.code == 200) {
if (res.data.avatar) {
this.zjimg = this.imgurl + res.data.avatar;
} else {
this.zjimg = require('@/static/images/logo.png')
}
uni.setNavigationBarTitle({
title: res.data ? res.data.name : ''
})
}
})
},
//获取聊天记录
getChatList(time) {
let data = {
userId: this.uId,
postUserId: Number(this.aId),
createDate: time,
}
getChatRecord(data).then(res => {
const that = this
if (res.code == 200) {
// console.log("获取数据", res.data)
// 取最后一条记录的时间
if (res.data.length > 0) {
that.lastTime = res.data[res.data.length - 1].createDate
}
// 判断是否有聊天记录
if (that.msgs.length == 0) {
for (let i = res.data.length - 1; i >= 0; i--) {
let content = that.httpString(res.data[i].chatContent)
if (content) {
res.data[i].line = content
res.data[i].chatContent = res.data[i].chatContent.replace(content, "")
} else {
res.data[i].line = 1
}
that.chatList.push(res.data[i])
}
that.msgs = getTimes.checkShowRule(that.chatList, 'createDate');
that.jumpScroll('#msg-' + (that.msgs.length - 1).toString())
// console.log(that.msgs);
} else {
this.msgs = []
for (let i = res.data.length - 1; i >= 0; i--) {
let content = this.httpString(res.data[i].chatContent)
if (content) {
res.data[i].line = content
res.data[i].chatContent = res.data[i].chatContent.replace(content, "")
} else {
res.data[i].line = 1
}
// 去除重复记录
const index = this.chatList.findIndex(v => v.chatId == res.data[i].chatId)
if (index != -1) {
res.data.splice(index, 1)
}
}
// 添加到旧记录
res.data.forEach(m => {
this.chatList.unshift(m)
})
this.msgs = getTimes.checkShowRule(this.chatList, 'createDate');
that.jumpScroll('#msg-' + (res.data.length - 1).toString())
uni.stopPullDownRefresh()
}
} else {
uni.showToast({
title: res.msg,
duration: 2000,
icon: 'none',
});
}
})
},
// 数据初始化
initData(options) {
// console.log('options',options)
this.chatType = options.type;
this.activeTitle = options.headline ? options.headline : null;
this.cTime = options.cTime ? options.cTime : ''
this.aId = options.aid
let sex = uni.getStorageSync('userInfo').sex;
let avatar = uni.getStorageSync('userInfo').avatar;
this.myimg = avatar != '' ? HTTP_IMG_URL + avatar : (sex == 0 ? require(
'@/static/images/default_boy.png') : require('@/static/images/default_girl.png'));
setTimeout(() => {
this.getUserData()
// 自动发送消息
// if (this.activeTitle) {
// this.autoSendMsg(this.activeTitle)
// }
}, 100)
// 获取聊天记录
this.getChatList(this.cTime);
},
// 键盘获取焦点
onFocus(e) {
// console.log(e);
this.isShow = true
if (this.isShow) {
// 更新消息位置
this.jumpScroll('#msg-00')
}
},
onClick(e) {
// console.log(e);
this.onFocus(e)
},
// 键盘失去焦点
onBlur() {
this.isShow = false
// console.log(this.msgs);
// 更新消息位置
this.jumpScroll('#msg-' + (this.msgs.length - 1).toString())
},
// 图片发送
upload() {
let that = this;
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function(res) {
let tempFilePaths = res.tempFilePaths;
let token = uni.getStorageSync('token');
uni.uploadFile({
url: HTTP_IMG_URL + '/upload',
header: {
'Authorization': token
},
filePath: tempFilePaths[0],
name: 'file',
success: (uploadFileRes) => {
// console.log(uploadFileRes)
that.chatImg = HTTP_IMG_URL + JSON.parse(uploadFileRes.data).data
.url;
let imgurl = JSON.parse(uploadFileRes.data).data.url
// console.log(that.chatImg)
var newItem = {
chatContent: imgurl,
userId: that.uId,
createDate: that.formatDate(new Date()),
type: 2,
line: imgurl
}
that.chatList.push(newItem);
// console.log('发送后的', that.chatList)
that.msgs = getTimes.checkShowRule(that.chatList, 'createDate');
let msg = '{"uid":"' + that.aId + '","isKF":"1","msg":"' + imgurl +
'","type":"2"}';
uni.sendSocketMessage({
data: msg,
success(data) {
console.log('发送成功' + data);
that.jumpScroll('#msg-' + (that.msgs.length - 1)
.toString())
}
});
that.chatImg = null;
}
})
}
})
},
// 图片预览
clickImg(index, url) {
const that = this
// console.log(that.msgs);
uni.previewImage({
urls: [url],
// success: function (res) {
// that.isPreview = true
// }
})
},
//页面跳转
linkToSubscribe(url) {
// console.log('url',url);
if (url == 1) {
console.log("没有链接")
} else {
if (url.indexOf("subscribe") !== -1) {
// console.log("预约约课")
let courseId = util.getParam(url, 'courseId')
let teacharId = util.getParam(url, 'teacharId')
// this.subParams = {
// courseId: util.getParam(url, 'courseId'),
// teacharId: util.getParam(url, 'teacharId'),
// aid: this.aId
// }
// this.$refs.subRef.opens()
// 预约约课
uni.navigateTo({
url: `/pages/class/subscribe/index?courseId=${courseId}&teacharId=${teacharId}&aid=${this.aId}`
})
} else if (url.indexOf("exchange") !== -1) {
// 积分充值
uni.navigateTo({
url: `/pages/my/integral/exchange`
})
} else if (url.indexOf("report") !== -1) {
const arr = url.split('syt-h5')
// 月报信息
uni.navigateTo({
url: arr[1]
})
} else if (url.indexOf("payment") !== -1) {
// 缴费信息
let orderId = util.getParam(url, 'orderId')
let appointmentIds = util.getParam(url, 'appointmentIds')
let payWay = util.getParam(url, 'payWay')
//判断订单是否有效
queryOrder(appointmentIds).then((res) => {
if (res.data > 0) {
uni.navigateTo({
url: `/pages/my/myOrder/index`
})
} else {
uni.navigateTo({
url: `/pages/class/chat/order/classOrder?orderId=${orderId}&appointmentIds=${appointmentIds}&payWay=${payWay}`
})
}
})
}
}
},
//截取链接字符串
httpString(str) {
var reg = /(https?|http):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
if (str.match(reg)) {
return str.match(reg)[0];
}
return false;
},
// 时间格式化函数
formatDate(now) {
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) :
date) + " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" +
minute) : minute) + ":" + (second = second < 10 ? ("0" + second) : second);
},
},
}
</script>
<style lang="scss" scoped>
</style>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
margin-bottom: 120rpx;
}
.cul-wrapper {
padding: 0 35rpx;
box-sizing: border-box;
}
.divver {
/* height: 100rpx; */
padding: 50rpx 0;
width: 100%;
/* background-color: aqua; */
}
.cul-date {
padding-top: 20rpx;
color: #999999;
font-size: 24rpx;
text-align: center;
}
.msg-me,
.msg-service {
display: flex;
align-items: flex-start;
width: 680rpx;
margin: 30rpx 0;
box-sizing: border-box;
overflow: hidden;
}
.msg-me {
justify-content: flex-end;
}
.msg-service {
justify-content: flex-start;
}
.msg-text {
width: 560rpx;
word-break: break-all;
white-space: normal;
}
.msg-img {
width: 260rpx;
height: 260rpx;
}
.msg-me>.msg-text {
display: flex;
justify-content: flex-end;
}
.msg-text-content {
line-height: 44rpx;
display: inline-block;
box-sizing: border-box;
padding: 14rpx 25rpx;
font-size: 28rpx;
position: relative;
}
.trianglel {
position: absolute;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-bottom-color: #f8f8f8;
transform: rotate(270deg);
left: -40rpx;
}
.triangler {
position: absolute;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-bottom-color: #f0f8ff;
right: -40rpx;
transform: rotate(90deg);
}
.colors {
color: blue !important;
text-decoration: underline;
}
.active {
padding-bottom: 120rpx;
}
.msg-me>.msg-text>.msg-text-content {
background-color: aliceblue;
font-size: 30rpx;
/* border-top-right-radius: 44rpx;
border-bottom-left-radius: 44rpx;
border-top-left-radius: 44rpx; */
border-radius: 15rpx;
color: #333333;
}
.msg-service>.msg-text>.msg-text-content {
background-color: #F8F8F8;
font-size: 30rpx;
/* border-bottom-left-radius: 44rpx;
border-bottom-right-radius: 44rpx;
border-top-right-radius: 44rpx; */
border-radius: 15rpx;
color: #333333;
}
.operation {
display: flex;
position: fixed;
left: 0;
bottom: 0;
align-items: center;
background: #F8F8F8;
padding: 10px 35rpx;
/* padd0ing-bottom: 20px !important; */
border-top: 1rpx solid rgba(184, 184, 184, 0.1);
width: 100vw;
}
.operation input {
width: 480rpx;
height: 70rpx;
background: #FFFFFF;
border-radius: 8rpx;
}
.btn {
width: 116rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 8rpx;
background-color: #FE564B !important;
font-size: 28rpx;
color: #fff !important;
margin: 0;
}
</style>标签：console,log,url,res,app,socketTask,msg,data From： https://www.cnblogs.com/zxh-bug/p/17721742.html