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>
|