671 lines
24 KiB
Vue
671 lines
24 KiB
Vue
<template>
|
||
<view>
|
||
<view style="width: 100%;padding-bottom: 140rpx;padding-top: 40rpx;" @click="guanbi">
|
||
<view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem" :key='index' >
|
||
<view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
|
||
{{item.createTime}}</view>
|
||
|
||
<view v-if="item.userId === userId" style="width: 83%;margin-left: 15%;">
|
||
<view class="chat-listitem" style="float: right;">
|
||
<rich-text @longpress="copy(item.content)" v-if="item.content && item.messageType === 3" :nodes="item.content"></rich-text>
|
||
<view @longpress="copy(item.content)" v-if="item.content && item.messageType === 1" class="chat-listitem-text" style="margin-right: 20rpx;">{{item.content}}</view>
|
||
<image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2" :src="item.content"
|
||
style="height: 200rpx;width: 200rpx;margin-right: 20rpx;"></image>
|
||
<view>
|
||
<image v-if="item.avatar" :src="item.avatar" class="chat-listitem-image"></image>
|
||
<image v-else src="../../static/logo.png" class="chat-listitem-image"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.userId != userId" style="width: 83%;margin-right: 15%;">
|
||
<view class="chat-listitem" style="float: left;margin-left: 10rpx;">
|
||
<view>
|
||
<image :src="item.avatar?item.avatar:'../../static/logo.png'" class="chat-listitem-image"></image>
|
||
</view>
|
||
<view v-if="item.content && item.messageType === 1" class="chat-listitem-text1"
|
||
style="margin-left: 20rpx;">{{item.content}}</view>
|
||
<image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2" :src="item.content"
|
||
style="height: 200rpx;width: 200rpx;margin-left: 20rpx;"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 抽屉栏 -->
|
||
<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
|
||
<!-- 表情 -->
|
||
<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
|
||
<swiper-item v-for="(page,pid) in emojiList" :key="pid">
|
||
<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
|
||
<image mode="widthFix" :src="'/static/imgLt/emoji/'+em.url"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 更多功能 相册-拍照-红包 -->
|
||
<view class="more-layer" :class="{hidden:hideMore}">
|
||
<view class="list">
|
||
<view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view>
|
||
<!-- <view class="box" @tap="camera"><view class="icon paizhao"></view></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部输入栏 -->
|
||
<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
|
||
|
||
<!-- #ifdef H5 -->
|
||
<view class="more" @tap="showMore">
|
||
<view class="icon add"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="textbox">
|
||
<view class="text-mode" :class="isVoice?'hidden':''">
|
||
<view class="box">
|
||
<textarea auto-height="true" @confirm='setChatSave(1)' v-model="content"/>
|
||
</view>
|
||
<view class="em" @tap="chooseEmoji">
|
||
<view class="icon biaoqing"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef H5 -->
|
||
<view class="more" @tap="showMore">
|
||
<view class="icon add"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="send" :class="isVoice?'hidden':''" @tap='setChatSave(1)'>
|
||
<view class="btn">发送</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import * as websocketUtils from 'utils/websocketUtils.js';
|
||
import { compile } from "vue";
|
||
const maxReconnectMaxCn = 30;
|
||
export default {
|
||
data() {
|
||
return {
|
||
videos: [],
|
||
charShow:0,
|
||
connected: false,
|
||
connecting: false,
|
||
msg: false,
|
||
type4: [],
|
||
listRight: {
|
||
chat: {
|
||
userHead: ""
|
||
},
|
||
content: "",
|
||
sendType: 1,
|
||
type: 1
|
||
},
|
||
content: '',
|
||
chatId: '',
|
||
type: 1,
|
||
ListItem: [],
|
||
ShopState: false,
|
||
ShopordersId: '',
|
||
Shopimage: '',
|
||
Shopmoney: '',
|
||
ShopTitle: '',
|
||
orderState: false,
|
||
ordersId: '',
|
||
userId: '',
|
||
orderimage: '',
|
||
orderNum: '',
|
||
teamId: '',
|
||
hand: 1,
|
||
index: 0,
|
||
page: 0,
|
||
size: 1000,
|
||
countDown: '',
|
||
chatConversationId: '',
|
||
byUserId: '',
|
||
//文字消息
|
||
textMsg:'',
|
||
//消息列表
|
||
msgList:[],
|
||
msgImgList:[],
|
||
myuid:0,
|
||
isVoice:false,
|
||
// 抽屉参数
|
||
popupLayerClass:'',
|
||
// more参数
|
||
hideMore:true,
|
||
//表情定义
|
||
hideEmoji:true,
|
||
emojiList:[
|
||
[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
|
||
[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
|
||
[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
|
||
[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
|
||
[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
|
||
],
|
||
//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
|
||
onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
|
||
webSocketTask:null,
|
||
timer:null,
|
||
reconnectCn: 1
|
||
};
|
||
},
|
||
onLoad(d) {
|
||
this.userId = this.$queue.getData('userId');
|
||
this.byUserId = d.byUserId
|
||
this.chatConversationId = d.chatConversationId;
|
||
this.connect();
|
||
},
|
||
computed: {
|
||
showMsg() {
|
||
if (this.connected) {
|
||
if (this.msg) {
|
||
return '收到消息：' + this.msg
|
||
} else {
|
||
return '等待接收消息'
|
||
}
|
||
} else {
|
||
return '尚未连接'
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.timer = setInterval(() => {
|
||
// this.getTimeOrListItem1();
|
||
// }, 3000);
|
||
},
|
||
onUnload() {
|
||
// uni.closeSocket({
|
||
// success: () => {
|
||
// console.info("退出成功")
|
||
// },
|
||
// })
|
||
// this.webSocketTask.close({
|
||
// code:500,
|
||
// complete:(res)=>{
|
||
// console.log("主动断开",res);
|
||
// }
|
||
// });
|
||
this.reconnectCn = 101;
|
||
uni.closeSocket({
|
||
code:500,
|
||
complete:(res)=>{
|
||
console.log("主动断开",res);
|
||
}
|
||
})
|
||
uni.hideLoading();
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
},
|
||
methods:{
|
||
guanbi(){
|
||
this.hideDrawer();
|
||
},
|
||
showChar(index){
|
||
this.charShow!=this.charShow
|
||
},
|
||
copy(content) {
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '确认要复制此文字吗？',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.setClipboardData({
|
||
data: content,
|
||
success: r => {
|
||
this.$queue.showToast('复制成功');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getDateDiff(data) {
|
||
// 传进来的data必须是日期格式，不能是时间戳
|
||
//var str = data;
|
||
//将字符串转换成时间格式
|
||
var timePublish = new Date(data);
|
||
var timeNow = new Date();
|
||
var minute = 1000 * 60;
|
||
var hour = minute * 60;
|
||
var day = hour * 24;
|
||
var month = day * 30;
|
||
var result = "2";
|
||
|
||
var diffValue = timeNow - timePublish;
|
||
var diffMonth = diffValue / month;
|
||
var diffWeek = diffValue / (7 * day);
|
||
var diffDay = diffValue / day;
|
||
var diffHour = diffValue / hour;
|
||
var diffMinute = diffValue / minute;
|
||
|
||
|
||
if (diffMonth > 3) {
|
||
result = timePublish.getFullYear() + "-";
|
||
result += timePublish.getMonth() + "-";
|
||
result += timePublish.getDate();
|
||
} else if (diffMonth > 1) { //月
|
||
result = data.substring(0, 10);
|
||
} else if (diffWeek > 1) { //周
|
||
result = data.substring(0, 10);
|
||
} else if (diffDay > 1) { //天
|
||
result = data.substring(0, 10);
|
||
} else if (diffHour > 1) { //小时
|
||
result = parseInt(diffHour) + "小时前";
|
||
} else if (diffMinute > 1) { //分钟
|
||
result = parseInt(diffMinute) + "分钟前";
|
||
} else {
|
||
result = "刚刚";
|
||
}
|
||
return result;
|
||
},
|
||
connect() {
|
||
let that = this;
|
||
let userId = that.$queue.getData('userId');
|
||
if (that.connected && that.connecting) {
|
||
// uni.showModal({
|
||
// content: '正在连接或者已经连接，请勿重复连接',
|
||
// showCancel: false
|
||
// })
|
||
return false
|
||
}
|
||
that.connecting = true
|
||
uni.showLoading({
|
||
title: '连接中...'
|
||
})
|
||
uni.connectSocket({
|
||
url: websocketUtils.getWsBaseUrl() + userId,
|
||
data() {
|
||
return {
|
||
msg: 'Hello'
|
||
}
|
||
},
|
||
header: {
|
||
'content-type': 'application/json'
|
||
},
|
||
method: 'GET',
|
||
success(res) {
|
||
uni.hideLoading();
|
||
that.getTimeOrListItem1();
|
||
// 这里是接口调用成功的回调，不是连接成功的回调，请注意
|
||
},
|
||
fail(err) {
|
||
// 这里是接口调用失败的回调，不是连接失败的回调，请注意
|
||
console.log("--------------"+JSON.stringify(err))
|
||
}
|
||
});
|
||
uni.onSocketOpen((res) => {
|
||
// that.connecting = false
|
||
// that.connected = true
|
||
uni.hideLoading()
|
||
// uni.showToast({
|
||
// icon: 'none',
|
||
// title: '连接成功'
|
||
// })
|
||
console.log('onOpen', res);
|
||
});
|
||
uni.onSocketError((err) => {
|
||
that.connecting = false
|
||
that.connected = false
|
||
uni.hideLoading()
|
||
// uni.showModal({
|
||
// content: '网络较差，请稍后再试',
|
||
// showCancel: false
|
||
// })
|
||
console.log('onError', err);
|
||
});
|
||
uni.onSocketMessage(function (res) {
|
||
console.log('收到服务器内容：' + JSON.stringify(res));
|
||
setTimeout(() => {
|
||
that.hideDrawer();
|
||
that.getTimeOrListItem1();
|
||
}, 50);
|
||
});
|
||
uni.onSocketClose((res) => {
|
||
that.connected = false
|
||
that.startRecive = false
|
||
that.msg = false
|
||
console.log('onClose', res)
|
||
if(this.reconnectCn<maxReconnectMaxCn){
|
||
this.reconnectCn = this.reconnectCn + 1;
|
||
this.connect();
|
||
}
|
||
});
|
||
},
|
||
close() {
|
||
uni.closeSocket()
|
||
},
|
||
|
||
// 加载初始页面消息
|
||
getTimeOrListItem1() {
|
||
console.log("im:getTimeOrListItem1");
|
||
this.$Request.get('/app/chat/selectChatContent?page=1&limit=1000&chatConversationId=' + this.chatConversationId).then(
|
||
res => {
|
||
this.ListItem = [];
|
||
if (res.data) {
|
||
var time = '';
|
||
res.data.list.forEach(d => {
|
||
var sf=this.checkBrackets(d.content)
|
||
if(sf==true){
|
||
var sss=this.replaceEmoji(d.content);
|
||
d.content=sss;
|
||
d.messageType=3;
|
||
}
|
||
this.ListItem.push(d);
|
||
});
|
||
this.ListItem = this.ListItem.reverse();
|
||
setTimeout(() => {
|
||
uni.pageScrollTo({
|
||
scrollTop: 99999,
|
||
duration: 0
|
||
});
|
||
}, 50);
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
checkBrackets(data) {
|
||
// 正则表达式，用于匹配包含中括号的字符串
|
||
const regex = /\[|\]/;
|
||
|
||
// 使用正则表达式的test方法检查数据
|
||
return regex.test(data);
|
||
},
|
||
setChatSave(type) {
|
||
//type:1文字 2图片
|
||
if (type === 1 && this.content == '') {
|
||
this.$queue.showToast('请输入聊天内容');
|
||
return;
|
||
}
|
||
// if (this.chatId == '' || this.chatId == undefined) {
|
||
// this.$queue.showToast('网络较差，请稍后再试');
|
||
// return;
|
||
// }
|
||
let userId = this.$queue.getData('userId');
|
||
let avatar = this.$queue.getData('avatar');
|
||
let phone = this.$queue.getData('phone');
|
||
let userName = this.$queue.getData('userName');
|
||
if (!phone) {
|
||
phone = this.$queue.getData('userName');
|
||
}
|
||
// if(this.textMsg!=''){
|
||
// const isRich = this.isRichText(this.textMsg); // 返回 true
|
||
// if(isRich==true){
|
||
// this.textMsg = this.replaceEmoji(this.textMsg);
|
||
// }else{
|
||
// this.content=this.textMsg
|
||
// }
|
||
// }
|
||
// console.log('this.content=============>',isRich)
|
||
let data = {
|
||
content: this.content,
|
||
messageType: type,
|
||
userId: this.byUserId,
|
||
chatConversationId: this.chatConversationId,
|
||
}
|
||
if(data.messageType==2){
|
||
data.width="100"
|
||
}
|
||
data = JSON.stringify(data);
|
||
|
||
let that = this;
|
||
uni.sendSocketMessage({
|
||
data: data,
|
||
success(res) {
|
||
|
||
let avatar = that.$queue.getData('avatar');
|
||
if (!avatar) {
|
||
avatar = '../../static/logo.png';
|
||
}
|
||
let data = {
|
||
chat: {
|
||
userHead: avatar
|
||
},
|
||
content: that.content,
|
||
type: type,
|
||
userId: userId
|
||
}
|
||
// console.log(data,'data99999999999999999')
|
||
// that.ListItem.push(data);
|
||
// setTimeout(() => {
|
||
// that.hideDrawer();
|
||
// that.getTimeOrListItem1();
|
||
// }, 500);
|
||
// console.log(that.content);
|
||
},
|
||
fail(err) {
|
||
that.connect();
|
||
console.log(err);
|
||
}
|
||
})
|
||
this.content = '';
|
||
this.textMsg = '';
|
||
},
|
||
|
||
//查看大图
|
||
viewImg(item) {
|
||
let imgsArray = [];
|
||
imgsArray[0] = item;
|
||
uni.previewImage({
|
||
current: 0,
|
||
urls: imgsArray
|
||
});
|
||
},
|
||
//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
|
||
setPicSize(content){
|
||
// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
|
||
let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
|
||
let maxH = uni.upx2px(350);//350是定义消息图片最大高度
|
||
if(content.w>maxW||content.h>maxH){
|
||
let scale = content.w/content.h;
|
||
content.w = scale>1?maxW:maxH*scale;
|
||
content.h = scale>1?maxW/scale:maxH;
|
||
}
|
||
return content;
|
||
},
|
||
|
||
//更多功能(点击+弹出)
|
||
showMore(){
|
||
this.isVoice = false;
|
||
this.hideEmoji = true;
|
||
if(this.hideMore){
|
||
this.hideMore = false;
|
||
this.openDrawer();
|
||
}else{
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
// 打开抽屉
|
||
openDrawer(){
|
||
this.popupLayerClass = 'showLayer';
|
||
},
|
||
// 隐藏抽屉
|
||
hideDrawer(){
|
||
this.popupLayerClass = '';
|
||
setTimeout(()=>{
|
||
this.hideMore = true;
|
||
this.hideEmoji = true;
|
||
},150);
|
||
},
|
||
// 选择图片发送
|
||
chooseImage(){
|
||
this.getImage('album');
|
||
},
|
||
//拍照发送
|
||
camera(){
|
||
let that = this
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
sourceType: ['album', 'camera'],
|
||
success: res => {
|
||
that.videos.push(res.tempFilePath);
|
||
for (let i = 0; i < that.videos.length; i++) {
|
||
that.$queue.showLoading("上传中...");
|
||
uni.uploadFile({ // 上传接口
|
||
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||
filePath: that.videos[i],
|
||
name: 'file',
|
||
success: (uploadFileRes) => {
|
||
this.content = JSON.parse(uploadFileRes.data).data;
|
||
this.setChatSave(2);
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//选照片 or 拍照
|
||
getImage(type){
|
||
this.hideDrawer();
|
||
uni.chooseImage({
|
||
sourceType:[type],
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
success: (res)=>{
|
||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||
this.$queue.showLoading("上传中...");
|
||
uni.uploadFile({ // 上传接口
|
||
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||
filePath: res.tempFilePaths[i],
|
||
name: 'file',
|
||
success: (uploadFileRes) => {
|
||
console.log(uploadFileRes)
|
||
this.content = JSON.parse(uploadFileRes.data).data;
|
||
this.setChatSave(2);
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 选择表情
|
||
chooseEmoji(){
|
||
this.hideMore = true;
|
||
if(this.hideEmoji){
|
||
this.hideEmoji = false;
|
||
this.openDrawer();
|
||
}else{
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
//添加表情
|
||
addEmoji(em){
|
||
this.content+=em.alt;
|
||
},
|
||
//获取焦点，如果不是选表情ing,则关闭抽屉
|
||
textareaFocus(){
|
||
if(this.popupLayerClass=='showLayer' && this.hideMore == false){
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
|
||
//替换表情符号为图片
|
||
replaceEmoji(str){
|
||
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
|
||
console.log("item: " + item);
|
||
for(let i=0;i<this.emojiList.length;i++){
|
||
let row = this.emojiList[i];
|
||
for(let j=0;j<row.length;j++){
|
||
let EM = row[j];
|
||
if(EM.alt==item){
|
||
//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
|
||
//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
|
||
let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
|
||
let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
|
||
return imgstr;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
return '<div style="display: flex;align-items: center;word-wrap:break-word;">'+replacedStr+'</div>';
|
||
},
|
||
discard(){
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/static/HM-chat/css/style.scss";
|
||
page {
|
||
background-color: #F7F7F7;
|
||
}
|
||
|
||
.bg {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.input-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 120rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: content-box;
|
||
z-index: 999;
|
||
/* background-color: #ececec; */
|
||
/* padding: 0 5rpx; */
|
||
}
|
||
|
||
.chat-listitem {
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.chat-listitem-text {
|
||
color: #FFFFFF;
|
||
background: #005DFF;
|
||
margin-top: 10rpx;
|
||
width: fit-content;
|
||
padding: 15rpx;
|
||
font-size: 30rpx;
|
||
height: max-content;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
border-radius: 10rpx;
|
||
}
|
||
.chat-listitem-text1 {
|
||
/* color: #FFFFFF; */
|
||
background: #FFFFFF;
|
||
margin-top: 10rpx;
|
||
width: fit-content;
|
||
padding: 15rpx;
|
||
font-size: 30rpx;
|
||
height: max-content;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
border-radius: 10rpx;
|
||
}
|
||
.chat-listitem-image-type4 {
|
||
/* color: #FFFFFF; */
|
||
background: #FFFFFF;
|
||
width: fit-content;
|
||
font-size: 30rpx;
|
||
height: max-content;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
}
|
||
|
||
.chat-listitem-image {
|
||
margin-top: 5rpx;
|
||
width: 75rpx;
|
||
height: 75rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.save {
|
||
width: 130rpx;
|
||
text-align: center;
|
||
border-radius: 70rpx;
|
||
height: 70rpx;
|
||
color: #FFF;
|
||
background:#005DFF;
|
||
margin: 5rpx 10rpx 0;
|
||
line-height: 70rpx;
|
||
}
|
||
</style> |