1173 lines
28 KiB
Vue
1173 lines
28 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';
|
||
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');
|
||
// let scoket = uni.getStorageSync('wbescokt')
|
||
this.byUserId = d.byUserId
|
||
this.chatConversationId = d.chatConversationId;
|
||
this.connect();
|
||
this.$queue.setData('kfHaveNewMsg', false)
|
||
},
|
||
computed: {
|
||
showMsg() {
|
||
if (this.connected) {
|
||
if (this.msg) {
|
||
return '收到消息：' + this.msg
|
||
} else {
|
||
return '等待接收消息'
|
||
}
|
||
} else {
|
||
return '尚未连接'
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
// 接收websocket消息及处理
|
||
this.webSocketTask.onMessage((res) => {
|
||
let data = JSON.parse(res.data);
|
||
console.log("消息及处理", data)
|
||
});
|
||
},
|
||
mounted() {
|
||
// this.timer = setInterval(() => {
|
||
// this.getTimeOrListItem1();
|
||
// }, 3000);
|
||
},
|
||
onUnload() {
|
||
this.selectMsg()
|
||
// uni.closeSocket({
|
||
// success: () => {
|
||
// console.info("退出成功")
|
||
// },
|
||
// })
|
||
this.reconnectCn = 101;
|
||
uni.closeSocket({
|
||
code: 500,
|
||
complete: (res) => {
|
||
console.log("主动断开", res);
|
||
}
|
||
})
|
||
uni.hideLoading();
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
},
|
||
methods: {
|
||
selectMsg() {
|
||
let that = this
|
||
let data = {
|
||
userId: uni.getStorageSync('userId'),
|
||
focusedUserId: '0',
|
||
// userName:this.order.userName
|
||
}
|
||
// app/chat/insertChatConversation
|
||
this.$Request.postJson('/app/chat/insertChatConversation', data).then(res => {
|
||
if (res.data) {
|
||
that.$Request.get('/app/chat/selectChatContent?page=1&limit=1000&chatConversationId=' + res
|
||
.data.chatConversationId).then(
|
||
res => {
|
||
if (res.data) {
|
||
//将新的查询结果进行保存 isRefresh意义：首次进入页面时才查询
|
||
that.$queue.setData('keFuLastMsgCount', res.data.totalCount);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
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: '连接中...'
|
||
})
|
||
// websocketUtils.getWsBaseUrl()
|
||
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))
|
||
}
|
||
});
|
||
// 监听WebSocket连接打开事件
|
||
uni.onSocketOpen((res) => {
|
||
uni.hideLoading()
|
||
console.info("监听WebSocket连接打开事件", res)
|
||
});
|
||
// 监听WebSocket错误
|
||
uni.onSocketError((res) => {
|
||
that.connecting = false
|
||
that.connected = false
|
||
uni.hideLoading()
|
||
console.info("监听WebSocket错误" + res)
|
||
});
|
||
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("接受数据测试");
|
||
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);
|
||
});
|
||
console.log('jjj')
|
||
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');
|
||
}
|
||
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
|
||
}
|
||
// that.ListItem.push(data);
|
||
// setTimeout(() => {
|
||
// that.hideDrawer();
|
||
// that.getTimeOrListItem1();
|
||
// }, 500);
|
||
},
|
||
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) => {
|
||
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";
|
||
|
||
/deep/.popup-layer {
|
||
width: 100%;
|
||
}
|
||
|
||
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> |