cansnow
1216 lines
33 KiB
Vue
1216 lines
33 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 自定义导航栏 -->
|
||
<view>
|
||
<u-navbar :is-back="false" title="" :background="{backgroundColor:'#f0f0f0'}" :border-bottom="!checkBoxFlag">
|
||
<view class="custom-navbar" v-if="checkBoxFlag==false">
|
||
<view class="nav-left" @click="customBack">
|
||
<u-icon name="arrow-left" color="#000000" size="34"></u-icon>
|
||
</view>
|
||
<view class="nav-center u-flex u-row-center u-col-center">
|
||
<view>{{yyyGroup.nickName}}</view>
|
||
</view>
|
||
<view class="nav-right" @click="toGroupDetail()">
|
||
<u-icon name="more-dot-fill" color="#000000" :size="35"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="custom-navbar" v-else>
|
||
<view class="nav-left"
|
||
style="font-size: 32rpx;color: #000000;"
|
||
@click="checkBoxFlag=false">
|
||
<text>取消</text>
|
||
</view>
|
||
<view class="nav-center u-flex u-row-center u-col-center">
|
||
<view>{{yyyGroup.nickName}}</view>
|
||
</view>
|
||
<view class="nav-right">
|
||
<text> </text>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
<view style="background-color: #f0f0f0;border-bottom: 1rpx solid #c0c0c0;"
|
||
class="u-p-20" v-if="checkBoxFlag">
|
||
<view class="u-flex u-row-center u-col-center"
|
||
style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
|
||
<view class="u-m-r-20">
|
||
<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
|
||
</view>
|
||
<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 信息记录列表 test-border-->
|
||
<view class="msg-container">
|
||
<scroll-view :scroll-y="true" class="msg-box-scroller hidden-scroll-bar"
|
||
:style="checkBoxFlag?'height:'+(scrollViewHeight-80)+'px':'height:'+(scrollViewHeight-30)+'px'" :scroll-with-animation="scrollAnimation"
|
||
:scroll-into-view="scrollIntoView"
|
||
:upper-threshold="10" @touchstart="hideDrawer">
|
||
<view style="width: 100%;" v-for="(msg,index) in messageList" :key="index">
|
||
<yyy-message-item @handleMessage="handleMessageMenu"
|
||
@checkChange="checkChange"
|
||
@toYYYPerson="toYYYPerson"
|
||
:checkBoxFlag="checkBoxFlag" :item="msg" :id="'msg_'+msg.id"></yyy-message-item>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 底部模块盒子 -->
|
||
<view class="footer-container">
|
||
<view v-if="checkBoxFlag==true"
|
||
style="background-color: #F7F7F7;"
|
||
class="u-flex u-row-around u-col-center u-p-30 u-border-top">
|
||
<view @click="showZhuanFaPop()">
|
||
<u-image src="/static/image/wx/handle-msg/check-zhuanfa.jpg" :width="40" :height="40">
|
||
</u-image>
|
||
</view>
|
||
<view>
|
||
<u-image src="/static/image/wx/handle-msg/check-shoucang.jpg" :width="40" :height="40">
|
||
</u-image>
|
||
</view>
|
||
<view>
|
||
<u-image src="/static/image/wx/handle-msg/check-shanchu.jpg" :width="40" :height="40">
|
||
</u-image>
|
||
</view>
|
||
<view>
|
||
<u-icon name="more-dot-fill" :size="40"></u-icon>
|
||
</view>
|
||
<u-action-sheet :list="zhuanFaActionList" v-model="zhuanFaPopFlag"
|
||
@click="confirmToZhuanFa"
|
||
safe-area-inset-bottom></u-action-sheet>
|
||
</view>
|
||
<view v-else class="input-box u-border-top">
|
||
<view class="input-box-flex">
|
||
<!-- 语音/键盘切换,H5不支持 -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view>
|
||
<image class="icon_img"
|
||
:src="require('@/static/images/chating_footer_audio.png')">
|
||
</image>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- 中间的输入框或者语音录入显示框 -->
|
||
<view class="input-box-flex-grow">
|
||
<view class="textArea-box">
|
||
<scroll-view :scroll-y="true" :scroll-x="false" class="inputScroll" :show-scrollbar="true">
|
||
<textarea style="text-indent:5upx;" auto-height="true"
|
||
placeholder-style="color:#DDDDDD;" :cursor-spacing="10" :confirm-hold="true"
|
||
confirm-type="send" :show-confirm-bar="false" :focus="inputFocusFlag"
|
||
:auto-focus="false" :hold-keyboard="true" @blur="onBlur" @focus="onInputFocus"
|
||
@confirm="$noClicks(confirmSendText)" v-model="sendStr" :cursor="sendStr.length"
|
||
:maxlength="-1">
|
||
</textarea>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- 功能性按钮 表情-->
|
||
<view>
|
||
<image class="u-m-l-20" :src="require('@/static/images/chating_footer_emoji.png')" @click="changeEmojiBox">
|
||
</image>
|
||
</view>
|
||
<!-- 宫格 -->
|
||
<view>
|
||
<image class="u-m-l-20" :src="require('@/static/images/chating_footer_add.png')" @click="changeDrawer">
|
||
</image>
|
||
</view>
|
||
<!-- 发送按钮 @touchend.prevent="$noClicks(sendText)" -->
|
||
<!-- <view class="u-m-l-16" @touchend.prevent="$noClicks(sendText)">
|
||
<u-button type="success" :custom-style="customSendBtnStyle">
|
||
<text>发送</text>
|
||
</u-button>
|
||
</view> -->
|
||
</view>
|
||
<view class="fun-box u-border-top" :class="{'show-fun-box':showFunBtn}">
|
||
<u-grid :col="4" :border="false" @click="funGirdItemClick">
|
||
<u-grid-item v-for="(item, index) in funList" :index="index" :key="index"
|
||
:custom-style="{padding:'20rpx 0'}" bg-color="#F8F8F8">
|
||
<view class="u-flex u-row-center u-col-center"
|
||
style="background-color: #FFFFFF;width: 110rpx;height: 110rpx;border-radius: 30rpx;">
|
||
<u-icon :name="item.icon" :size="60"></u-icon>
|
||
</view>
|
||
<view class="grid-text" style="font-size: 24rpx;">{{ item.title }}</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
<view class="fun-box u-border-top" :class="{'show-fun-box':showEmojiBox}">
|
||
<swiper class="emoji-swiper" :indicator-dots="false" :duration="50" :vertical="true">
|
||
<swiper-item v-for="(item,index) in faceList" :key="index">
|
||
<view v-for="(childrenItem, childrenIndex) in item" :key="childrenIndex">
|
||
<image v-if="index<6" class="emo-image" :src="emojiUrl + emojiMap[childrenItem]">
|
||
</image>
|
||
<image v-else class="face-img" :src="faceUrl + childrenItem + '@2x.png'">
|
||
</image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view v-if="showEmojiBox" style="padding:0rpx 20rpx;position: absolute;bottom: 1rpx;right: 10rpx;
|
||
width: 250rpx;height: 150rpx;z-index: 1000;opacity: 0.9;" class="u-flex u-row-right u-col-center">
|
||
<view class="u-flex u-row-center u-col-center"
|
||
style="border: 1px solid #f1f1f1;border-radius: 10rpx; background-color: #82848a;width: 100rpx;padding: 15rpx 20rpx;margin-right: 8rpx;">
|
||
<view @click="delSendStr()" @longpress="clearSendStr()">
|
||
<u-icon name="backspace" size="46" color="#ffffff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- <view>
|
||
<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
|
||
</u-button>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import faceUtil from "@/util/emojiMap.js"; //表情
|
||
import permission from '@/util/permission.js'; //手机权限
|
||
import yyyMessageItem from "./components/message-item.vue"; //聊天信息
|
||
export default {
|
||
components: {
|
||
yyyMessageItem
|
||
},
|
||
data() {
|
||
return {
|
||
checkBoxFlag:false,
|
||
checkedMessages:[],
|
||
zhuanFaPopFlag:false,
|
||
zhuanFaActionList:[
|
||
{
|
||
text: '逐条转发',
|
||
color:'#000000',
|
||
fontSize: 34,
|
||
},
|
||
{
|
||
text: '合并转发',
|
||
color:'#000000',
|
||
fontSize: 34,
|
||
}
|
||
],
|
||
noClick: true, //防止重复点击
|
||
yyyGroup:{
|
||
id:'000000',
|
||
avatar:'/static/image/default/default-user/1.jpg',
|
||
chatNumber:'000000',
|
||
nickName:'文件传输助手',
|
||
signature:'每个人的活法都不一样，只要你开心，一切都值得',
|
||
userRemark:'来吧,摇一摇',
|
||
address:'湖北 武汉',
|
||
sex:0,
|
||
friendPower:0,
|
||
forbidSelf:false,
|
||
forbidHis:false,
|
||
createTime:'21:20',
|
||
sendTimeStr:"21:22",
|
||
lastMsgContent:'',
|
||
delFlag:false,
|
||
},
|
||
messageList:[],
|
||
scrollViewHeight:0,
|
||
scrollAnimation:false,
|
||
scrollIntoView:'',
|
||
chatType: 'voice', // 图标类型 'voice'语音 'keyboard'键盘
|
||
sendStr:'',
|
||
showFunBtn:false,
|
||
showEmojiBox:false,
|
||
inputFocusFlag:false,
|
||
emojiUrl: faceUtil.emojiUrl, //表情请求前缀（腾讯）
|
||
emojiMap: faceUtil.emojiMap, //表情包集合（腾讯）
|
||
emojiName: faceUtil.emojiName, //表情名称（腾讯）
|
||
faceUrl: faceUtil.faceUrl, //特殊表情请求前缀（腾讯）
|
||
bigEmojiList: faceUtil.bigEmojiList, //特殊表情对象集合（腾讯）
|
||
faceList: [], //自定义表情对象集合，有腾讯数据提供转换而来
|
||
//功能菜单
|
||
funList: [{
|
||
id: 1,
|
||
icon: "photo-fill",
|
||
title: "照片",
|
||
uploadType: ["album"]
|
||
},
|
||
{
|
||
id: 2,
|
||
icon: "camera-fill",
|
||
title: "视频",
|
||
uploadType: ["camera"]
|
||
},
|
||
{
|
||
id: 3,
|
||
icon: "red-packet-fill",
|
||
title: "红包",
|
||
},
|
||
{
|
||
id: 4,
|
||
icon: "rmb-circle-fill",
|
||
title: "转账",
|
||
},
|
||
],
|
||
toolTipFlag: false,
|
||
toolTipData: [{
|
||
id: 1,
|
||
icon: '/static/image/chat/longTipIcon/copy.png',
|
||
title: '复制',
|
||
disabled: false
|
||
},
|
||
{
|
||
id: 2,
|
||
icon: '/static/image/chat/longTipIcon/zhuanfa.png',
|
||
title: '调换', //转发
|
||
disabled: false
|
||
},
|
||
{
|
||
id: 4,
|
||
icon: '/static/image/chat/longTipIcon/revert.png',
|
||
title: '多选',
|
||
disabled: false
|
||
},
|
||
{
|
||
id: 5,
|
||
icon: '/static/image/chat/longTipIcon/tag.png',
|
||
title: '编辑',
|
||
disabled: false
|
||
},
|
||
],
|
||
toolTipX: 0,
|
||
toolTipY: 0,
|
||
currentHandleMsg: {},
|
||
customSendBtnStyle: { //发送按钮的自定义样式
|
||
padding: '10rpx 20rpx',
|
||
},
|
||
};
|
||
},
|
||
created: function() {
|
||
//计算页面高度布局
|
||
this.windowHeight = this.$u.sys().windowHeight; //H5原始高度，H5键盘收起时会用到
|
||
let scrollViewHeight = this.$u.sys().windowHeight * 0.831;
|
||
this.scrollViewHeight = scrollViewHeight;
|
||
this.scrollTop = scrollViewHeight - 5;
|
||
//表情初始化
|
||
let emjiList = faceUtil.splitEmojiList();
|
||
//这里注释掉不需要的表情，如果放开出来前缀不一样会带来界面适配的问题，后续在处理
|
||
/* for (let i = 0; i < this.bigEmojiList.length; i++) {
|
||
emjiList.push(this.bigEmojiList[i].list);
|
||
} */
|
||
this.faceList = emjiList;
|
||
//console.log("faceList",this.faceList);
|
||
},
|
||
watch: {
|
||
//监听H5键盘是否拉起的高度
|
||
inputFocusFlag: function(inputFocus) {
|
||
let that = this;
|
||
// #ifdef H5
|
||
console.log("输入框焦点变化", inputFocus);
|
||
if (inputFocus == true) {
|
||
that.showFunBtn = false;
|
||
that.showEmojiBox = false;
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.48;
|
||
console.log("H5键盘打开", that.scrollViewHeight);
|
||
} else {
|
||
uni.hideKeyboard();
|
||
if (!(that.showEmojiBox || that.showFunBtn)) {
|
||
let scrollViewHeight = this.windowHeight * 0.831;
|
||
that.scrollViewHeight = scrollViewHeight;
|
||
console.log("H5键盘收起", that.scrollViewHeight);
|
||
}
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
scrollViewHeight(newVal, oldVal) {
|
||
let that = this;
|
||
//console.log("监听到列表高度变化，保证最后一条信息不被键盘或者抽屉弹窗挡住");
|
||
if (that.messageList.length > 2) {
|
||
that.scrollIntoView = "msg_" + that.messageList[that.messageList.length - 2].id;
|
||
that.scrollAnimation = false;
|
||
setTimeout(function() {
|
||
that.scrollAnimation = true;
|
||
that.scrollIntoView = "msg_" + that.messageList[that.messageList.length - 1].id;
|
||
}, 500);
|
||
}
|
||
},
|
||
},
|
||
|
||
//监听信息滚动
|
||
onReady() {
|
||
let that = this;
|
||
// 官方api【onKeyboardHeightChange】仅支持APP平台，H5不支持此监听
|
||
// #ifdef APP-PLUS
|
||
uni.onKeyboardHeightChange(res => {
|
||
//console.log("监听到键盘高度变化",res);
|
||
//如果键盘弹起
|
||
if (res.height != 0) {
|
||
that.showFunBtn = false;
|
||
that.showEmojiBox = false;
|
||
that.scrollViewHeight = (that.$u.sys().windowHeight - res.height) * 0.735;
|
||
//console.log("键盘打开",that.scrollViewHeight);
|
||
}
|
||
//键盘收起
|
||
else {
|
||
if (!(that.showEmojiBox || that.showFunBtn)) {
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
|
||
//console.log("键盘收起",that.scrollViewHeight);
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
onLoad:function(option){
|
||
let that=this;
|
||
let param=option.yyyGroup;
|
||
if(param!=null&¶m!=undefined){
|
||
that.yyyGroup=JSON.parse(decodeURIComponent(param));
|
||
console.log("that.yyyGroup",that.yyyGroup);
|
||
}
|
||
that.createMessageList();
|
||
},
|
||
//监听返回
|
||
onBackPress(options) {
|
||
this.customBack();
|
||
return true;
|
||
},
|
||
methods:{
|
||
createMessageList:function(){
|
||
let that=this;
|
||
let chatGroupId=that.yyyGroup.chatNumber;
|
||
if(this.yyyGroup.chatNumber=="000000"){
|
||
if(this.vuex_fileAssist.messageList.length>0){
|
||
that.messageList=that.vuex_fileAssist.messageList;
|
||
};
|
||
}else{
|
||
that.messageList=[
|
||
{
|
||
"id":"01",
|
||
"chatGroupId":chatGroupId,
|
||
"userId": that.yyyGroup.id,
|
||
"meFlag": false,
|
||
"userName":that.yyyGroup.nickName,
|
||
"userAvatar": that.yyyGroup.avatar,
|
||
'messageType': that.messageApi.MSG_TYPE.USER_MSG,
|
||
"contentType": that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
|
||
"content": {
|
||
text:that.yyyGroup.userRemark
|
||
},
|
||
"formatTimeStr": that.yyyGroup.createTime,
|
||
"showTimeFlag": true,
|
||
"checked":false,
|
||
},
|
||
{
|
||
"id":"02",
|
||
"chatGroupId":chatGroupId,
|
||
"userId": that.yyyGroup.chatNumber,
|
||
"meFlag": false,
|
||
"userName":that.yyyGroup.nickName,
|
||
"userAvatar": that.yyyGroup.avatar,
|
||
'messageType': this.messageApi.MSG_TYPE.SYSTEM_MSG,
|
||
"contentType": that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
|
||
"content": {
|
||
text:'以上是打招呼的内容'
|
||
},
|
||
"formatTimeStr": that.yyyGroup.createTime,
|
||
"showTimeFlag":false,
|
||
"checked":false,
|
||
},
|
||
{
|
||
"id":"03",
|
||
"chatGroupId":chatGroupId,
|
||
"userId": that.vuex_userInfo.id,
|
||
"meFlag": true,
|
||
"userName":"",
|
||
"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
|
||
"/static/image/default/default-user/default-user.png",
|
||
'messageType': that.messageApi.MSG_TYPE.SYSTEM_MSG,
|
||
"contentType": that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
|
||
"content": {
|
||
text:"你已添加了"+that.yyyGroup.nickName+"，现在可以开始聊天了"
|
||
},
|
||
"formatTimeStr": that.yyyGroup.sendTimeStr,
|
||
"platFrom": this.messageApi.msgPlat,
|
||
"showTimeFlag": true,
|
||
"checked":false,
|
||
},
|
||
];
|
||
if(that.yyyGroup.messageList&&that.yyyGroup.messageList.length>0){
|
||
that.messageList=that.messageList.concat(that.yyyGroup.messageList);
|
||
};
|
||
}
|
||
if(that.messageList.length>0){
|
||
that.messageList.map(function(item){
|
||
item.checked=false;
|
||
});
|
||
setTimeout(function(){
|
||
that.scrollIntoView = "msg_" + that.messageList[that.messageList.length - 1].id;
|
||
},500)
|
||
}
|
||
},
|
||
|
||
customBack: function() {
|
||
uni.hideKeyboard();
|
||
this.hideDrawer();
|
||
setTimeout(function(){
|
||
uni.switchTab({
|
||
url: "/pages/tabbar/group/group"
|
||
})
|
||
},200)
|
||
},
|
||
toGroupDetail:function(){
|
||
let that=this;
|
||
if(that.yyyGroup.chatNumber=="000000"){
|
||
let obj={
|
||
"lastMsgContent":"",
|
||
"messageList":[],
|
||
"lastMsgTime":"",
|
||
};
|
||
this.messageList=[];
|
||
this.$u.vuex("vuex_fileAssist",obj);
|
||
}
|
||
},
|
||
//输入框获取到焦点事件
|
||
onInputFocus: function(event) {
|
||
//console.log("输入框获取到焦点",event);
|
||
this.inputFocusFlag = true;
|
||
},
|
||
//输入框失去焦点事件
|
||
onBlur: function(event) {
|
||
let that = this;
|
||
let text = event.target.value;
|
||
console.log("输入框失去焦点", text);
|
||
that.inputFocusFlag = false;
|
||
},
|
||
//键盘确认发送
|
||
confirmSendText: function(e) {
|
||
let that = this;
|
||
this.sendText();
|
||
},
|
||
//发送文字
|
||
sendText: function() {
|
||
let that = this;
|
||
if (that.sendStr.length < 1) {
|
||
uni.hideKeyboard();
|
||
that.globalUtil.utilAlert("不能发送空字符串");
|
||
return;
|
||
} else {
|
||
//如果文字中有表情,需要转换处理
|
||
let formatStr = this.replaceEmoji(this.sendStr);
|
||
let content = {
|
||
"text": formatStr, //文本内容
|
||
};
|
||
that.sendMsg(this.messageApi.MSG_TYPE.USER_MSG,
|
||
this.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
|
||
content);
|
||
}
|
||
},
|
||
|
||
|
||
//控制表情弹窗
|
||
changeEmojiBox: function() {
|
||
let that = this;
|
||
that.showFunBtn = false; //关闭功能盒子
|
||
that.showEmojiBox = !that.showEmojiBox; //控制表情弹窗
|
||
uni.hideKeyboard(); //隐藏键盘
|
||
//这里要根据是否打开表情弹窗控制聊天列表盒子的高度
|
||
if (that.showEmojiBox) {
|
||
that.chatType = "voice";
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831 - 200;
|
||
} else {
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
|
||
}
|
||
},
|
||
//切换功能性按钮
|
||
changeDrawer() {
|
||
let that = this;
|
||
that.showEmojiBox = false;
|
||
that.showFunBtn = !that.showFunBtn;
|
||
uni.hideKeyboard();
|
||
if (that.showFunBtn) {
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831 - 200;
|
||
} else {
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
|
||
}
|
||
},
|
||
//功能弹窗点击事件
|
||
funGirdItemClick: function(index) {
|
||
let that = this;
|
||
if (!that.vuex_WSObj) {
|
||
that.globalUtil.utilAlert("网路故障，服务不可达");
|
||
return;
|
||
}
|
||
let id = that.funList[index].id;
|
||
that.inputFocusFlag = false;
|
||
switch (id) {
|
||
case 1:
|
||
that.chooseImage(that.messageApi.CONTENT_TYPE.IMG_CONTENT_TYPE); //选择照片
|
||
break;
|
||
case 2:
|
||
//that.chooseVideo(that.messageApi.CONTENT_TYPE.VIDEO_CONTENT_TYPE); //选择视频
|
||
break;
|
||
case 3:
|
||
//that.toSendRedBag(); //发送红包
|
||
break;
|
||
case 4:
|
||
//that.toTransfer(); //转账
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
chooseImage(contentType) {
|
||
let that = this;
|
||
uni.chooseImage({
|
||
count: 9,
|
||
sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
|
||
success: (res) => {
|
||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||
uni.getImageInfo({
|
||
src: res.tempFilePaths[i],
|
||
success: (image) => {
|
||
image.tempFilePath = image.path;
|
||
let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
|
||
let maxH = uni.upx2px(350); //350是定义消息图片最大高度
|
||
if (image.width > maxW || image.height > maxH) {
|
||
let scale = image.width / image.height;
|
||
image.width = scale > 1 ? maxW : maxH * scale;
|
||
image.height = scale > 1 ? maxW / scale : maxH;
|
||
}
|
||
delete image.errMsg;
|
||
delete image.path;
|
||
setTimeout(function() {
|
||
that.uploadFile(image, contentType);
|
||
}, 1500);
|
||
return;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
fail() {
|
||
console.log("选择图片上传发送异常");
|
||
}
|
||
});
|
||
},
|
||
|
||
toYYYPerson:function(item){
|
||
let that=this;
|
||
that.$u.route({
|
||
url:'/pages/tabbar/find/yaoyiyao/yaoyiyao-friend-home',
|
||
params:{
|
||
personInfo:encodeURIComponent(JSON.stringify(that.yyyGroup))
|
||
},
|
||
//animationType:'slide-in-left'
|
||
})
|
||
},
|
||
|
||
//上传文件 contentType 2图片 3视频 4语音 5文件
|
||
uploadFile: function(tempFileInfo, contentType) {
|
||
let that = this;
|
||
//console.log("上传文件本地信息",tempFileInfo);
|
||
if (tempFileInfo.errMsg) {
|
||
delete tempFileInfo.errMsg;
|
||
};
|
||
let target = that.$u.api.multipartAddress.target;
|
||
const uploadTask = uni.uploadFile({
|
||
url: that.$u.api.multipartAddress.updload,
|
||
filePath: tempFileInfo.tempFilePath,
|
||
name: 'fileName',
|
||
header: {
|
||
'Access-Control-Allow-Origin': '*',
|
||
'TOKEN_IM': that.vuex_token,
|
||
},
|
||
success: (uploadFileRes) => {
|
||
if (uploadFileRes.statusCode == 200 && uploadFileRes.data.length > 0) {
|
||
let resObj = JSON.parse(uploadFileRes.data);
|
||
if (resObj.code == 200) {
|
||
let fileInfo = resObj.data;
|
||
let fileMsgObj = Object.assign(tempFileInfo, fileInfo);
|
||
fileMsgObj.fileSaveTarget = target;
|
||
console.log("发送文件信息参数", fileMsgObj);
|
||
that.sendMsg(this.messageApi.MSG_TYPE.USER_MSG, contentType, fileMsgObj);
|
||
} else {
|
||
console.log("文件上传失败");
|
||
}
|
||
} else {
|
||
console.log("文件上传失败");
|
||
}
|
||
},
|
||
fail: function() {
|
||
console.log("文件上传失败");
|
||
},
|
||
complete: function() {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
},
|
||
//发送信息
|
||
//msgType ：2用户信息 1系统信息
|
||
//contentObj：信息内容 json对象
|
||
//contentType：内容类型 1文本
|
||
sendMsg: function(msgType, contentType, contentObj) {
|
||
let that = this;
|
||
let timestamp = new Date().getTime();
|
||
let message = {
|
||
"id": new Date().getTime() + "",
|
||
"chatGroupId": timestamp,
|
||
"userId": that.vuex_userInfo.id,
|
||
"meFlag": true,
|
||
"userName": that.vuex_userInfo.userName,
|
||
"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
|
||
"/static/image/default/default-user/default-user.png",
|
||
'messageType': msgType,
|
||
"contentType": contentType,
|
||
"content": contentObj,
|
||
"createTime": that.globalUtil.getTimeStr(timestamp),
|
||
"formatTimeStr":that.globalUtil.getTimeStr(timestamp,'M'),
|
||
"timestamp": timestamp,
|
||
"platFrom": this.messageApi.msgPlat,
|
||
"showTimeFlag":false,
|
||
"linkName":"",
|
||
"checked":false,
|
||
};
|
||
console.log("发送信息", message);
|
||
this.messageList.push(message);
|
||
that.sendStr="";
|
||
//这里要设置一下最后发送的信息内容
|
||
this.setLastMsgContent(message);
|
||
setTimeout(function(){
|
||
that.scrollIntoView = "msg_" + message.id;
|
||
},500);
|
||
},
|
||
//设置最后一条信息发送内容
|
||
setLastMsgContent:function(message){
|
||
let that=this;
|
||
let formatContent="";
|
||
let contentType=message.contentType;
|
||
let contentObj=message.content;
|
||
switch (contentType+""){
|
||
case "1":
|
||
formatContent=contentObj.text;
|
||
formatContent=formatContent.replace(/\n/g,",");
|
||
formatContent=formatContent.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
|
||
return face.replace(/^face/g, '')
|
||
});
|
||
break;
|
||
case "2":
|
||
formatContent="[图片]";
|
||
break;
|
||
case "3":
|
||
formatContent="[视频]";
|
||
break;
|
||
case "4":
|
||
formatContent="[语音]";
|
||
break;
|
||
case "7":
|
||
formatContent="[红包]";
|
||
break;
|
||
case "10":
|
||
formatContent="[聊天记录]";
|
||
break;
|
||
case "11":
|
||
formatContent="[图文]";
|
||
break;
|
||
case "12":
|
||
formatContent="[视频文字]";
|
||
break;
|
||
default:
|
||
formatContent="[其他]";
|
||
break;
|
||
};
|
||
console.log("最后一条信息",formatContent);
|
||
console.log("群号",this.yyyGroup.chatNumber);
|
||
if(this.yyyGroup.chatNumber=="000000"){
|
||
let obj={
|
||
"lastMsgContent":formatContent,
|
||
"messageList":that.messageList,
|
||
"lastMsgTime":message.formatTimeStr,
|
||
};
|
||
this.$u.vuex("vuex_fileAssist",obj);
|
||
return;
|
||
}else{
|
||
let yyy_groupList=JSON.parse(JSON.stringify(this.vuex_yyyFriendList));
|
||
yyy_groupList.map(function(item){
|
||
if(item.chatNumber==that.yyyGroup.chatNumber){
|
||
item.lastMsgContent=formatContent;
|
||
item.sendTimeStr=message.createTime;
|
||
item.messageList.push(message);
|
||
console.log("动态加载最后一条信息",item.chatNumber);
|
||
}
|
||
});
|
||
this.$u.vuex("vuex_yyyFriendList",yyy_groupList);
|
||
return;
|
||
}
|
||
},
|
||
|
||
//删除表情和文字
|
||
delSendStr: function() {
|
||
//console.log("删除表情",this.sendStr);
|
||
let emojiStr = this.sendStr;
|
||
let emojiArr = [];
|
||
emojiStr = emojiStr.replace(/\[([^(\]|\[)]*)\]/g, function(item, index) {
|
||
emojiArr.unshift(item);
|
||
});
|
||
if (emojiArr.length > 0) {
|
||
if (this.sendStr.endsWith(emojiArr[0])) {
|
||
this.sendStr = this.sendStr.replace(emojiArr[0], "");
|
||
} else {
|
||
this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
|
||
}
|
||
} else {
|
||
this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
|
||
}
|
||
},
|
||
//清除文本
|
||
clearSendStr: function() {
|
||
console.log("长按删除")
|
||
this.sendStr = "";
|
||
},
|
||
|
||
|
||
hideDrawer: function() {
|
||
let that = this;
|
||
if (this.showFunBtn == true) {
|
||
uni.hideKeyboard();
|
||
this.showFunBtn = false;
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
|
||
}
|
||
if (this.showEmojiBox == true) {
|
||
uni.hideKeyboard();
|
||
this.showEmojiBox = false;
|
||
that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
|
||
}
|
||
},
|
||
//操作项
|
||
showToolTip: function(e, index) {
|
||
let that = this;
|
||
that.toolTipX = e.touches[0].clientX;
|
||
that.toolTipY = e.touches[0].clientY;
|
||
that.toolTipFlag = !that.toolTipFlag;
|
||
that.currentHandleMsg = that.messageList[index];
|
||
that.currentHandleMsg.msgIndex = index;
|
||
},
|
||
tapPopup(e) {
|
||
let that = this;
|
||
console.log("点击菜单",e);
|
||
if (e.title == "撤回") {
|
||
//that.revertMsg();
|
||
}
|
||
if (e.title == "复制") {
|
||
let content = that.currentHandleMsg.content;
|
||
if (content) {
|
||
let copyContent =content.text;
|
||
console.log("复制的内容", copyContent);
|
||
let formatStr = this.replaceReseverEmoji(copyContent);
|
||
console.log("复制转义后的内容", formatStr);
|
||
that.globalUtil.uniCopy({
|
||
content: formatStr,
|
||
success: (res) => {
|
||
uni.showToast({
|
||
title: res,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
error: (e) => {
|
||
uni.showToast({
|
||
title: e,
|
||
icon: 'none',
|
||
duration: 3000,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
that.toolTipFlag = false;
|
||
return;
|
||
}
|
||
if (e.title == "转发") {
|
||
that.toolTipFlag = false;
|
||
that.$u.route({
|
||
url: '/pages/chat/chatGroup/msgForward',
|
||
params: {
|
||
msgList:encodeURIComponent(JSON.stringify([that.currentHandleMsg])),
|
||
sendType: 1, //1 单条转发 2多条转发
|
||
}
|
||
})
|
||
return
|
||
}
|
||
if(e.title=="调换"){
|
||
that.toolTipFlag = false;
|
||
}
|
||
if (e.title == "多选") {
|
||
that.toolTipFlag = false;
|
||
that.$u.route({
|
||
url: '/pages/chat/chatting/chatting-checkbox',
|
||
})
|
||
return
|
||
}
|
||
if(e.title=="编辑"){
|
||
that.toolTipFlag = false;
|
||
return
|
||
}
|
||
},
|
||
|
||
checkChange:function(msg){
|
||
let isExist = this.checkedMessages.some(item=>item.id===msg.id);
|
||
if(!isExist){
|
||
this.checkedMessages.push(msg);
|
||
}else{
|
||
this.checkedMessages = this.checkedMessages.filter(function(item) {
|
||
return item.id!=msg.id;
|
||
});
|
||
}
|
||
console.log("this.checkedMessages",this.checkedMessages);
|
||
},
|
||
|
||
handleMessageMenu:function(menuItem,messageItem){
|
||
let that=this;
|
||
console.log("messageItem",messageItem);
|
||
let title= menuItem.title;
|
||
switch (title){
|
||
case '复制':
|
||
let copyContent =messageItem.content.text;
|
||
console.log("复制的内容", copyContent);
|
||
let formatStr = this.replaceReseverEmoji(copyContent);
|
||
console.log("复制转义后的内容", formatStr);
|
||
that.globalUtil.uniCopy({
|
||
content: formatStr,
|
||
success: (res) => {
|
||
console.log("复制成功");
|
||
},
|
||
error: (e) => {
|
||
uni.showToast({
|
||
title: e,
|
||
icon: 'none',
|
||
duration: 3000,
|
||
})
|
||
}
|
||
})
|
||
break;
|
||
case '转发':
|
||
|
||
break;
|
||
case '多选':
|
||
that.checkBoxFlag=true;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
showZhuanFaPop:function(){
|
||
let that=this;
|
||
that.zhuanFaPopFlag=true;
|
||
},
|
||
confirmToZhuanFa:function(index){
|
||
this.zhuanFaPopFlag=false;
|
||
this.checkBoxFlag=false;
|
||
let num=this.checkedMessages.length;
|
||
//这里就提前处理一下信息记录到转发的
|
||
console.log("选择要转发的信息记录",num);
|
||
let param=null;
|
||
if(num>0){
|
||
param=encodeURIComponent(JSON.stringify(this.checkedMessages));
|
||
};
|
||
this.checkedMessages=[];
|
||
this.messageList.map(function(item){
|
||
item.checked=false;
|
||
});
|
||
this.$u.route({
|
||
url:'/pages/tabbar/find/yaoyiyao/yaoyiyao-chatting/yaoyiyao-zhuanfa-pop',
|
||
params:{
|
||
checkedMessages:param
|
||
}
|
||
})
|
||
},
|
||
replaceReseverEmoji: function(str) {
|
||
let replacedStr = str.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
|
||
let alt = face.replace(/^face/g, '');
|
||
return alt;
|
||
})
|
||
console.log("replacedStr", replacedStr);
|
||
return replacedStr;
|
||
},
|
||
//表情替换
|
||
replaceEmoji(str) {
|
||
let that = this;
|
||
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
|
||
for (let i = 0; i < this.faceList.length; i++) {
|
||
let row = this.faceList[i];
|
||
for (let j = 0; j < row.length; j++) {
|
||
let EM = row[j];
|
||
if (EM == item) {
|
||
//console.log("EM: " + EM);
|
||
let imgstr = "face" + EM;
|
||
return imgstr;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
//console.log("replacedStr", replacedStr);
|
||
return replacedStr;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-navbar {
|
||
width: 100%;
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-content: center;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
|
||
.nav-left {}
|
||
|
||
.nav-center {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.nav-right {}
|
||
}
|
||
|
||
.msg-container {
|
||
|
||
//width: 100%;
|
||
.msg-box-scroller {
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
background-color: #f0f0f0;
|
||
}
|
||
}
|
||
|
||
.footer-container {
|
||
&-showfn {
|
||
padding-bottom: 0rpx;
|
||
padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(420rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
&-box {
|
||
height: auto;
|
||
min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
|
||
box-sizing: content-box;
|
||
position: relative;
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.input-box {
|
||
position: fixed;
|
||
bottom: 20;
|
||
left: 0;
|
||
width: 100%;
|
||
box-sizing: content-box;
|
||
z-index: 999;
|
||
background-color: #f9f9f9 !important;
|
||
|
||
&-flex {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
flex-direction: row;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.icon_img {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.icon_btn_add {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
&-grow {
|
||
flex-grow: 1;
|
||
|
||
.content {
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
caret-color: $uni-color-success;
|
||
}
|
||
|
||
.textArea-box {
|
||
width: 100%;
|
||
background-color: #FFFFFF;
|
||
border-radius: 10upx;
|
||
//padding-left: 30upx;
|
||
min-height: 70upx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.inputScroll {
|
||
max-height: 180upx;
|
||
}
|
||
|
||
/* 语音标题 */
|
||
.voice_title {
|
||
text-align: center;
|
||
background-color: #ffffff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 12rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.btn {
|
||
margin-left: 20rpx;
|
||
background-color: $u-success;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.fun-box {
|
||
opacity: 0;
|
||
transition: all 0.1s ease-in-out;
|
||
height: 0;
|
||
|
||
.grid-text {
|
||
padding-top: 10rpx;
|
||
color: $uni-text-color-grey;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.show-fun-box {
|
||
opacity: 1;
|
||
height: 400rpx;
|
||
|
||
.emoji-swiper {
|
||
height: 400rpx;
|
||
|
||
swiper-item {
|
||
display: flex;
|
||
align-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
view {
|
||
width: 12%;
|
||
height: 16vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 8.4vw;
|
||
height: 8.4vw;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 语音动画 */
|
||
.voice_an {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -55%);
|
||
background-color: rgba(41, 41, 41, 0.7);
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
|
||
.text {
|
||
padding-top: 30rpx;
|
||
}
|
||
|
||
@keyframes runVoice {
|
||
0% {
|
||
height: 10%;
|
||
}
|
||
|
||
20% {
|
||
height: 50%;
|
||
}
|
||
|
||
50% {
|
||
height: 100%;
|
||
}
|
||
|
||
80% {
|
||
height: 50%;
|
||
}
|
||
|
||
100% {
|
||
height: 0%;
|
||
}
|
||
}
|
||
|
||
.wave {
|
||
width: 6rpx;
|
||
height: 100%;
|
||
margin-left: 10rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #999;
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
}
|
||
|
||
.voice_an_icon {
|
||
width: 200rpx;
|
||
height: 100rpx;
|
||
line-height: 50rpx;
|
||
margin: 50rpx 0;
|
||
}
|
||
|
||
.voice_an_icon #one {
|
||
animation: runVoice 0.6s infinite 0.1s;
|
||
}
|
||
|
||
.voice_an_icon #two {
|
||
animation: runVoice 0.6s infinite 0.3s;
|
||
}
|
||
|
||
.voice_an_icon #three {
|
||
animation: runVoice 0.6s infinite 0.6s;
|
||
}
|
||
|
||
.voice_an_icon #four {
|
||
animation: runVoice 0.6s infinite 0.1s;
|
||
}
|
||
|
||
.voice_an_icon #five {
|
||
animation: runVoice 0.6s infinite 0.3s;
|
||
}
|
||
|
||
.voice_an_icon #six {
|
||
animation: runVoice 0.6s infinite 0.6s;
|
||
}
|
||
|
||
.voice_an_icon #seven {
|
||
animation: runVoice 0.6s infinite 0.1s;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
page {
|
||
background-color: #F8F8F8;
|
||
}
|
||
</style>
|