<template> <view class="page" :style="{overflow: 'hidden','--custom-font-size': custom_font_size+'px'}"> <!-- #ifdef APP-PLUS --> <serving-view :list_id="list_id" @setState="setSeringState" :show="showServing" :state="servingState" @closeServing="showServing = false" ref="serving"></serving-view> <!-- #endif --> <view class="page-content"> <view class="gong-gao-content" v-if="msgList.type == 1"> <view class="member-image-logo"> <view class="member-content" v-for="(item,i) in memberPhotos" :key="i"> <image class="img-logo" :src="staticPhoto+ item.photo" @tap="toUserDetail(item)"></image> </view> <view class="jiazai" v-if="memberPhotos.length >=5" @tap="group_info"> <image src="/static/theme/default/jiazai.png"></image> </view> </view> <view class="gong-gao-content-info" v-if="0"> <view class="iconfont-im icon-gonggao gong-gao-content-info-icon"></view> <text-scroll :text="notice" ref="scrollNotice"></text-scroll> </view> <!--<view class="member-image-logo">--> <!--<image src="https://im.smiaoshen.com/static/photo/default_man/300.jpg"></image>--> <!--</view>--> </view> <view class="content"> <scroll-view class="msg-list" :style="{height:scrollHeight}" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" :upper-threshold="30" id="scrollview" :scroll-top="scrollTop" @scroll="scrollEven" @touchstart="hideDrawer(3)"> <!--<view class="loading"--> <!--v-if="isHistoryLoading">--> <!--<view class="spinner">--> <!--<view class="rect1"></view>--> <!--<view class="rect2"></view>--> <!--<view class="rect3"></view>--> <!--<view class="rect4"></view>--> <!--<view class="rect5"></view>--> <!--</view>--> <!--</view>--> <uni-load-more status="noMore" v-if="noMore && !(isHistoryLoading)" /> <view class="row" v-for="(row,index) in msgList.list" :key="index" :id="'msg' + row.msg.id"> <!-- 系统消息 --> <block v-if="row.type==1"> <view :class="['system',msgList.type == 1 && index == 0 ? 'sys':'']" :style="{padding:'10upx 0',marginBottom:'10upx'}"> <!-- 文字消息--> <view v-if="row.msg.type==0 && row.msg.content && row.msg.content.text" class="text"> {{row.msg.content.text}} </view> <!-- 领取红包消息 --> <view v-if="row.msg.type==5" class="red-envelope" style="letter-spacing:4upx;"> <image src="/static/img/red-envelope-chat.png" :lazy-load="true" /> <!-- {{row.msg}} --> <block v-if="row.msg.content.rid_user_id == my_data.id && row.msg.content.user_id == my_data.id"> 我领取了自己发出的 </block> <block v-else-if="row.msg.content.rid_user_id != my_data.id && row.msg.content.user_id == my_data.id"> 我领取了{{row.msg.content.rid_nickname}}发出的 </block> <block v-else-if="row.msg.content.rid_user_id == my_data.id && row.msg.content.user_id != my_data.id"> {{row.msg.content.nickname}}领取了我发出的 </block> <block v-else> {{row.msg.content.nickname}}领取了{{row.msg.content.rid_nickname}}发出的 </block> <text style="color: red;" @tap="toDetails(row.msg.content.rid)">红包</text> </view> </view> </block> <block v-if="row.type == 0 && (index == 0 || (row.msg.time - msgList.list[index - 1].msg.time > 300))"> <view class="system" style="margin-bottom: 10upx"> <!-- 文字消息 --> <view class="text" style="color: #ffffff;border-radius:12px;font-weight:600"> {{ timestampFormat(row.msg.time + '') }} </view> </view> </block> <!-- 用户消息 --> <block v-if="row.type==0"> <!-- 自己发出的消息 --> <view class="my" v-if="row.msg.user_info.uid == my_data.id "> <!-- 左-消息 --> <view class="left" :id="row.msg.id"> <image v-if="row.msg.time<=nowReadTime" src="/static/img/read.png" mode="widthFix" style="width: 30upx;margin-right: 10upx;"></image> <image v-else src="/static/img/unread.png" mode="widthFix" style="width: 30upx;margin-right: 10upx;"> </image> <!-- 文字消息 非图片--> <view v-if="row.msg.type==0 && !isImage(row.msg.content.text)" class="bubble" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <rich-text :nodes="row.msg.content.text ? getHtml(row.msg.content.text) : ' '" space="true" selectable="true" /> </view> <!-- 文字消息 图片链接 --> <view v-if="row.msg.type==0 && isImage(row.msg.content.text)" class="bubble" @tap="showPic2(row.msg.content.text)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image :src="row.msg.content.text" :style="{'width':'200px','height':'200px'}" mode="widthFix" :lazy-load="true" /> </view> <!-- 语言消息 --> <view v-if="row.msg.type==1" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="length">{{row.msg.content.length}}</view> <view class="icon my-voice"></view> </view> <!-- 图片消息 --> <view v-if="row.msg.type==2" class="bubble img" @tap="showPic1(row.msg)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image :src="(staticPath + list_id + '/' + row.msg.content.url)" :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}" mode="widthFix" :lazy-load="true" /> </view> <!-- 视频消息 --> <view v-if="row.msg.type==3" class="bubble img" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image :src=" staticPath + row.msg.content.full_movie" style="width: 320px;height: 240px"> </image> <image class="bubble-bofang" src="/static/theme/default/my/bofang.png" style="width: 50px;height: 50px;" @tap="autoVideo(row.msg)"></image> </view> <!-- 红包 --> <view v-if="row.msg.type==5" class="bubble red-envelope" @tap="openRedEnvelope(row.msg,index)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image src="/static/img/red-envelope.png" :lazy-load="true" :style="{'opacity':(receive_list.indexOf(row.msg.content.rid))< 0 ? 1 : 0.6}"> </image> <view class="tis"> {{(receive_list.indexOf(row.msg.content.rid)) <0?'恭喜发财,大吉大利':'已领取'}} </view> <view class="blessing"> <view class="info"> {{row.msg.content.blessing}} </view> <view class="has-get-red"> 点击打开红包 </view> <!--{{row.msg.content.blessing}}--> </view> </view> <!-- 在线视频 --> <view v-if="row.msg.type==6" class="bubble" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view> {{row.msg.content.text}} </view> <text style="margin-left:2px" class="iconfont-im"> </text> </view> <!-- 在线音频--> <view v-if="row.msg.type==7" class="bubble" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view> {{row.msg.content.text}} </view> <text style="margin-left:2px" class="iconfonts"> </text> </view> <!--卡片--> <view v-if="row.msg.type==8" class="send-card" @tap="getCard(row.msg)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="send-card-content"> <image :src="staticPhoto+row.msg.content.face" :lazy-load="true" style="width: 85upx;height: 85upx;"></image> <text>{{row.msg.content.nickname}}</text> </view> <view class="send-card-content-text"> <text>名片</text> </view> </view> <!--戳一戳--> <view v-if="row.msg.type==9" class="bubble img" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image src="/static/theme/default/chuoyichuo.gif" :lazy-load="true" style="height: 70px;width: 130px;" mode="heightFix" /> </view> <!-- 位置--> <view v-if="row.msg.type==10" class="bubble" @tap="openMap(row.msg.content)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="address-flex"> <view class="address-name"> <text>{{row.msg.content && row.msg.content.name}}</text> <text class="text-gray">{{row.msg.content && row.msg.content.address}}</text> </view> <image class="fun-icon" src="../../static/theme/default/position.png" mode="widthFix"></image> </view> </view> <!-- 文件 --> <view v-if="row.msg.type==11" class="bubble" @tap="downFile(staticPath+ list_id+'/' + row.msg.content.url)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="address-flex"> <view class="address-name"> <text>{{row.msg.content && row.msg.content.name}}</text> <text class="text-gray">{{row.msg.content && row.msg.content.length}}kb</text> </view> <image class="fun-icon" src="../../static/theme/default/file.png" mode="widthFix"></image> </view> </view> </view> <!-- 右-头像 --> <view class="right" @tap="goDetails(row.msg.user_info.uid,row)"> <image :src="(row.msg.is_niming == 1) ? '/static/theme/default/my/niming.png' : myPhoto" :lazy-load="true" style="border-radius: 10px;" @error="imageError2" /> </view> </view> <!-- 别人发出的消息 --> <view class="other" v-if="row.msg.user_info.uid != my_data.id"> <!-- 左-头像 --> <view class="left"> <image @longtap="showAction(row)" @tap="goDetails(row.msg.user_info.uid,row)" :src="(row.msg.is_niming == 1)? '/static/theme/default/my/niming.png' : (staticPhoto + row.msg.user_info.face)" :lazy-load="true" style="border-radius: 10px;" :data-id="index" @error="imageError" class="u-logo" /> <view class="action" v-if="row.showAction"> <view class="action-item" @click="addFriendChat(row)"> @TA </view> <view class="action-line"> </view> <view class="action-item" @click="selectMember(row)"> 禁言 </view> <view class="action-line"> </view> <view class="action-item" @click="selectRemoveMember(row)"> 踢出 </view> </view> </view> <!-- 右-用户名称-时间-消息 --> <view class="right"> <view class="username"> <view class="name">{{row.msg.user_info.name}}</view> <!-- <view class="time">{{row.msg.time}}</view> --> </view> <!-- 文字消息 --> <view v-if="row.msg.type==0 && !isImage(row.msg.content.text)" class="bubble" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <rich-text :nodes="row.msg.content.text ? getHtml(row.msg.content.text) : ' '" space="true" /> </view> <!-- 文字消息 图片链接 --> <view v-if="row.msg.type==0 && isImage(row.msg.content.text)" class="bubble" @tap="showPic2(row.msg.content.text)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image :src="row.msg.content.text" :style="{'width':'200px','height':'auto'}" mode="widthFix" :lazy-load="true" /> </view> <!-- 语音消息 --> <view v-if="row.msg.type==1" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="icon other-voice"></view> <view class="length">{{row.msg.content.length}}</view> </view> <!-- 图片消息 --> <view v-if="row.msg.type==2" class="bubble img" @tap="showPic1(row.msg)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image :src="(staticPath + list_id + '/' + row.msg.content.url)" :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}" mode="widthFix" :lazy-load="true" /> </view> <!-- 视频消息 --> <view v-if="row.msg.type==3" class="bubble img" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image :src="staticPath + row.msg.content.full_movie" style="width: 320px;height: 240px"></image> <image class="bubble-bofang-left" src="/static/theme/default/my/bofang.png" style="width: 50px;height: 50px;" @tap="autoVideo(row.msg)"></image> </view> <!-- 红包 --> <view v-if="row.msg.type==5" class="bubble red-envelope" @tap="openRedEnvelope(row.msg,index)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image src="/static/img/red-envelope-o.png" :lazy-load="true" :style="{'opacity':(receive_list.indexOf(row.msg.content.rid))< 0 ? 1 : 0.6}"> </image> <view class="tis"> {{(receive_list.indexOf(row.msg.content.rid)) <0?'恭喜发财,大吉大利':'已领取'}} </view> <view class="blessing"> <view class="info"> {{row.msg.content.blessing}} </view> <view class="has-get-red"> 点击打开红包 </view> <!--{{row.msg.content.blessing}}--> </view> </view> <view v-if="row.msg.type==6" class="bubble" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <text style="margin-right:2px" class="iconfont-im"> </text> {{row.msg.content.text}} </view> <view v-if="row.msg.type==7" class="bubble" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <text style="margin-right:2px" class="iconfonts"> </text> {{row.msg.content.text}} </view> <view v-if="row.msg.type==8" class="send-card" @tap="getCard(row.msg)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="send-card-content"> <image :src="staticPhoto+row.msg.content.face" :lazy-load="true" style="width: 85upx;height: 85upx;"></image> <text>{{row.msg.content.nickname}}</text> </view> <view class="send-card-content-text"> <text>名片</text> </view> </view> <!-- 戳一戳 --> <view v-if="row.msg.type==9" class="bubble img" @tap="showPic(row.msg)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <image src="/static/theme/default/youchuo.gif" :lazy-load="true" style="width: 70px;height: 70px;" /> </view> <!-- 位置--> <view v-if="row.msg.type==10" class="bubble" @tap="openMap(row.msg.content)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="address-flex"> <view class="address-name"> <text>{{row.msg.content && row.msg.content.name}}</text> <text class="text-gray">{{row.msg.content && row.msg.content.address}}</text> </view> <image class="fun-icon" src="../../static/theme/default/position.png" mode="widthFix"></image> </view> </view> <!-- 文件 --> <view v-if="row.msg.type==11" class="bubble" @tap="downFile(staticPath+ list_id+'/' + row.msg.content.url)" @longtap="msgAction(row.msg.id +'',row.msg.user_info.uid + '',row.msg.content,row.msg.type)"> <view class="address-flex"> <view class="address-name"> <text>{{row.msg.content && row.msg.content.name}}</text> <text class="text-gray">{{row.msg.content && row.msg.content.length}}kb</text> </view> <image class="fun-icon" src="../../static/theme/default/file.png" mode="widthFix"></image> </view> </view> </view> </view> </block> </view> </scroll-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 :src="'/static/img/emoji/' + em.url" :lazy-load="true" /> </view> </swiper-item> </swiper> <!-- 更多功能 相册-拍照-红包 --> <swiper class="more-layer" style="height:50vw" :indicator-dots="true" indicator-active-color="#51c9c3" :class="{hidden:hideMore || !hideEmoji}" duration="150"> <swiper-item> <view class="list"> <!-- <view class="list-box" @tap="videoCall(1)" v-if="msgList.type == 0"> <image class="fun-icon" src="../../static/theme/default/message/concat.png" mode="heightFix"> <view class="tool_text">视频通话</view> </view> --> <!-- <view class="list-box" @tap="videoCall(2)" v-if="msgList.type == 0"> <image class="fun-icon" src="../../static/theme/default/message/voice.png" mode="heightFix"> <view class="tool_text">语音通话</view> </view> --> <view class="list-box" @tap="chooseImage"> <image class="fun-icon" src="../../static/theme/default/Image.png" mode="heightFix"> </image> <view class="tool_text">相册</view> </view> <view class="list-box" @tap="camera"> <image class="fun-icon" src="../../static/theme/default/shooting_icon.png" mode="heightFix"> </image> <view class="tool_text">拍摄</view> </view> <!-- <view class="list-box" @tap="video"> <image class="fun-icon" src="../../static/theme/default/message/video.png" mode="heightFix"> </image> <view class="tool_text">视频</view> </view> <view class="list-box" @tap="handRedEnvelopes"> <image class="fun-icon" src="../../static/theme/default/envelope_icon.png" mode="heightFix"> </image> <view class="tool_text">红包</view> </view> --> <view class="list-box" @tap="video"> <image class="fun-icon" src="../../static/theme/default/message/video.png" mode="heightFix"> </image> <view class="tool_text">视频</view> </view> <view class="list-box" @tap="handRedEnvelopes"> <image class="fun-icon" src="../../static/theme/default/envelope_icon.png" mode="heightFix"> </image> <view class="tool_text">红包</view> </view> </view> <view class="list" style="margin-top: 8upx;"> <view class="list-box" @tap="chooseChuo"> <image class="fun-icon" src="../../static/theme/default/tool_icon.png" mode="heightFix"> </image> <view class="tool_text">戳一戳</view> </view> <view class="list-box" @tap="sendPos"> <image class="fun-icon" src="../../static/theme/default/location_icon.png" mode="heightFix"> </image> <view class="tool_text2">位置</view> </view> <!-- <view class="list-box" @tap="videoCall(1)" v-if="msgList.type == 0"> <image class="fun-icon" src="../../static/theme/default/message/concat.png" mode="heightFix"> <view class="tool_text">视频通话</view> </view> <view class="list-box" @tap="videoCall(2)" v-if="msgList.type == 0"> <image class="fun-icon" src="../../static/theme/default/message/voice.png" mode="heightFix"> <view class="tool_text">语音通话</view> </view> --> <view class="list-box" @tap="sayCall()" v-if="msgList.type == 1 && 0"> <text class="iconfont-im icon-niming" style="font-size:50upx;"> </text> <view class="tool_text">{{niming_msg}}</view> </view> <view class="list-box" @tap="zhendong" v-if="msgList.type == 1 && is_main"> <view class="iconfont-im icon-zhendong"></view> <view class="tool_text2">振动</view> </view> <view class="list-box" @tap="showQiang()" v-if="msgList.type == 1 && vendor_status && is_main"> <text class="iconfont-im icon-qiang" style="font-size:50upx;"> </text> <view class="tool_text">发包</view> </view> <view class="list-box" @tap="chooseCard"> <image class="fun-icon" src="../../static/theme/default/contact_icon.png" mode="heightFix"> </image> <view class="tool_text2">名片</view> </view> <view class="list-box" @tap="chooseLike"> <image class="fun-icon" src="../../static/theme/default/collection_icon.png" mode="heightFix"> </image> <view class="tool_text">收藏</view> </view> </view> </swiper-item> <swiper-item> <view class="list"> <view class="list-box" @tap="chooseFile"> <image class="fun-icon" src="../../static/theme/default/file_icon.png" mode="heightFix"> </image> <view class="tool_text">文件</view> </view> </view> </swiper-item> </swiper> </view> <view class="input-box" v-if="msgList.is_msg"> <view style="text-align: center !important;width:750upx;line-height: 100upx;border-top: #c9c9c9 solid 2upx;"> 全员禁言中... </view> </view> <!-- @touchmove.stop.prevent="discard" --> <!-- 底部输入栏 --> <view class="input-box" :class="popupLayerClass" v-else> <!-- H5下不能录音,输入栏布局改动一下 --> <!-- #ifndef H5 --> <!-- <view class="voice"> <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view> </view> --> <!-- #endif --> <view class="voice"> <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view> </view> <!-- #ifdef H5 --> <!-- <view class="more" @tap="showMore"> <view class="icon add"></view> </view> --> <!-- #endif --> <view class="textbox"> <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel"> {{voiceTis}} </view> <view class="text-mode" :class="isVoice?'hidden':''"> <view class="box"> <textarea auto-height="true" confirm-type="search" @confirm="sendText" @input="inputText" :value="textMsg" @focus="textareaFocus" :maxlength="-1" :show-confirm-bar="false" style="max-height: 190upx;overflow:auto;border: 1px solid black; border-radius: 17px;padding-top: 4px;padding-bottom: 4px; " /> </view> <view class="em" @tap="chooseEmoji"> <view class="icon biaoqing"></view> </view> </view> </view> <!-- #ifndef H5 --> <!-- #endif --> <view :class="iconShow" @tap="showMore"> <view class="icon add"></view> </view> <view class="send" :class="sendMsgClass" @tap="sendText"> <view class="btn">发送</view> </view> </view> </view> <view v-show="showVedio" class="showVedio"> <!-- <video :src="videoPath" style="height: 100%;width: 100%" id="myVideo" object-fit="fill" airplay="allow" /> --> <video autoplay="true" object-fit="fill" page-gesture="true" controls="false" style="height: 100%;width: 100%" id="myVideo" :src="videoPath" @error="videoErrorCallback"> <!-- <cover-view @tap="showVedio = false"> --> <cover-image @tap="showVedio = false" src="/static/theme/default/my/close.png" class="cloneBut"> </cover-image> <!-- </cover-view> --> </video> </view> <!-- #ifndef H5 --> <!-- 录音UI效果 --> <!-- <view class="record" :class="recording?'':'hidden'"> <view class="ing" :class="willStop?'hidden':''"> <view class="icon luyin2"></view> </view> <view class="cancel" :class="willStop?'':'hidden'"> <view class="icon chehui"></view> </view> <view class="tis" :class="willStop?'change':''">{{recordTis}}</view> </view> --> <!-- #endif --> <view class="record" :class="recording?'':'hidden'"> <view class="ing" :class="willStop?'hidden':''"> <view class="icon luyin2"></view> </view> <view class="cancel" :class="willStop?'':'hidden'"> <view class="icon chehui"></view> </view> <view class="tis" :class="willStop?'change':''">{{recordTis}}</view> </view> <!-- 红包弹窗 --> <view class="windows" :class="windowsState"> <!-- 遮罩层 --> <view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view> <view class="layer" @touchmove.stop.prevent="discard"> <view class="open-redenvelope"> <view class="top"> <view class="close-btn"> <view class="icon close" @tap="closeRedEnvelope"></view> </view> <image :src="staticPhoto+redenvelopeData.face" :lazy-load="true"></image> </view> <view class="from">来自{{redenvelopeData.from}}的红包</view> <view class="blessing">{{redenvelopeData.blessing}}</view> <view class="money" @tap="openRed(redenvelopeData)"> <image :class="luckbtn" src="/static/theme/default/my/red_2.png" style="width: 180upx; height: 180upx;"> </image> </view> <view class="showDetails" @tap="toDetails(redenvelopeData.rid)"> 查看领取详情 <view class="icon to"></view> </view> </view> </view> </view> <uni-popup ref="popup2" :show="videPoup" position="bottom" mode="666"> <view class="video-but-view"> <button class="video-but" type="primary" @tap="videoBut('video')" :loading="videoLoading">视频聊天</button> <button class="video-but" type="primary" @tap="videoBut('voice')" :loading="voiceLoading">语音聊天</button> <button type="default" @click="videPoup=false">取消</button> </view> </uni-popup> <uni-popup ref="popup" type="confirm"> <uni-popup-confirm title="温馨提示" :content="popuMsg" @confirm="confirm"> </uni-popup-confirm> </uni-popup> <uni-popup ref="qiang" type="qiang"> <uni-popup-qiang title="开启发包" :status="miaoqiang + ''" :content="popuMsg" @confirm="goQiang"> </uni-popup-qiang> </uni-popup> <!-- 上传文件 --> <nk-select-file v-model="showUploadFile" @confirm="uploadAFile"></nk-select-file> <uni-popup ref="popup_friends" type="bottom"> <view class="popup_friends" :style="{height:popHeight+'px'}"> <view class="popup_friends-top"> </view> <select-friend :list_id="list_id" @close="closeFriends"> </select-friend> </view> </uni-popup> </view> </template> <script> import uniLoadMore from "../../components/uni-ui/uni-load-more/uni-load-more.vue"; import emoj_data from "../../static/js/message/emoji_data.js"; import _get from "../../common/_get"; import _hook from "../../common/_hook"; import _action from "../../common/_action"; import _data from "../../common/_data"; import htmlParser from "../../common/html-parser"; import uniPopup from "../../components/uni-popup/uni-popup.vue"; import uniPopupConfirm from "../../components/uni-popup/uni-popup-confirm.vue"; import uniPopupQiang from "../../components/uni-popup/uni-popup-qiang.vue"; import textScroll from "../../components/textScroll/textScroll.vue"; import nkSelectFile from "@/components/nk-select-file/nk-select-file.vue"; import { mapState, mapMutations } from "vuex"; import selectFriend from "./select_friend.vue"; import { genTestUserSig } from "@/debug/GenerateTestUserSig.js"; export default { components: { uniLoadMore, uniPopup, uniPopupConfirm, uniPopupQiang, textScroll, nkSelectFile, selectFriend, }, data() { return { servingState: 3, onLine: false, showServing: false, memberPhotos: [], is_main: 0, nowReadTime: 1635013026, redTimer: null, notice: "", scrollInfo: { input_box_height1: 0, input_box_height2: 0, totall_height: 0, }, scrollHeight: "0px", niming_msg: "匿名", videoContext: null, videoPath: "", showVedio: false, receive_list: [], luckbtn: "", scrollTop: 0, chat_id: "", //文字消息 videPoup: false, videPlay: false, voiceLoading: false, videoLoading: false, textMsg: "", //消息列表 isHistoryLoading: false, scrollAnimation: false, scrollToView: "", msgList: { show_name: "", list: [], type: 0, is_msg: 0, is_action: 0, }, msgImgList: [], noMore: 0, isVoice: false, voiceTis: "按住 说话", recordTis: "手指上滑 取消发送", recording: false, willStop: false, initPoint: { identifier: 0, Y: 0, }, recordTimer: null, recordLength: 0, // #ifdef APP-PLUS // call: uni.requireNativePlugin("TUICallingUniPlugin-TUICallingModule"), // call: uni.requireNativePlugin('TencentCloud-TUICallKit'), // #endif playMsgid: null, VoiceTimer: null, // 抽屉参数 popupLayerClass: "", // more参数 hideMore: true, //表情定义 hideEmoji: true, emojiList: emoj_data.emoji_list, //表情图片图床名称 ,由于我上传的第三方图床名称会有改变,所以有此数据来做对应,您实际应用中应该不需要 //onlineEmoji: emoj_data.online_emoji, //红包相关参数 windowsState: "", redenvelopeData: { rid: null, //红包ID from: null, face: null, blessing: null, money: null, index: null, }, list_id: 0, my_data: {}, style: { pageHeight: 0, contentViewHeight: 0, footViewHeight: 90, mitemHeight: 0, }, call_ret: false, my_photo: "", callType: 1, //默认视频, popuMsg: "", payTimer: false, type: "", Keyboard: 0, miaoqiang: 0, vendor_status: 0, doubleClick: false, doubleTime: { firstTime: "", towTime: "", flag: true, timer: null, }, group_state: null, isOnline: 2, // (0表示离线,1表示在线) showUploadFile: false, //上传文件 send_user_id: "", //@好友的信息 popHeight: "", //todo弹出选择好友高度 members: [], //群成员 }; }, onBackPress(options) { console.log(options); uni.navigateTo({ url: "/pages/chat/index", }); return false; }, onLoad(option) { // 监听语音视频通话事件 // #ifdef APP-PLUS // uni.$TUICallingEvent.addEventListener("onCallStart", (data) => { // console.log("onCallStart" + JSON.stringify(data)); // console.log("onCallStart" + data.roomID); // }); // uni.$TUICallingEvent.addEventListener("onCallEnd", (data) => { // console.log("onCallEnd" + JSON.stringify(data)); // data.time = data.totalTime; // // _get.cancelCall(data, function(res) {}); // }); // uni.$TUICallingEvent.addEventListener("onCallSucceed", (data) => { // console.log("onCallSucceed" + JSON.stringify(data)); // }); // uni.$TUICallingEvent.addEventListener("onCallFailed", (data) => { // console.log("onCallFailed" + JSON.stringify(data)); // data.time = data.totalTime; // // _get.cancelCall(data, function(res) {}); // }); // #endif this.list_id = option.list_id; if ("chat_id" in option) { this.chat_id = option.chat_id; } if ("trans" in option) { uni.showToast({ title: "转发成功", icon: "none", ducation: 2000, }); } //注册事件 // 注册发送音频事件 this.regOnStartEvent((e) => { this.recordBegin(e); }); // 注册发送音频事件 this.regSendVoiceEvent((e) => { this.recordEnd(e); }); // 注册发送音频事件 this.regVudioEndEvent((e) => { this.playMsgid = null; }); // //语音自然播放结束 // this.AUDIO.onEnded((res) => { // this.playMsgid = null; // }); // // // #ifndef H5 // //录音开始事件 // this.RECORDER.onStart((e) => { // this.recordBegin(e); // }) // //录音结束事件 // this.RECORDER.onStop((e) => { // this.recordEnd(e); // }) // //#endif }, onUnload() { /** 这里只保留最新的15条会话记录,以保证初次加载性能 */ let _this = this; let chat_data = this.msgList; chat_data.list = chat_data.list.slice(-15); _data.localData(this.list_id, chat_data); /** 去除当前会话的list_id */ _data.localData("message_list_id", ""); /** 暂停语音播放 */ // this.AUDIO.pause(); /** 移除监听事件 */ uni.$off("data_chat_data_unshift"); uni.$off("data_chat_data_push"); uni.$off("data_chat_data"); uni.$off("data_user_info"); uni.$off("data_chat_data_delete"); uni.$off("update_text_msg"); uni.$off("memberJoinRoom"); uni.$off("closeVoiceRoom"); clearInterval(_this.timer); clearInterval(_this.redTimer); if (_data.data("voice_room_type")) { _this.$refs.serving.xiaMai(_this.list_id); } else { _this.$refs.serving && _this.$refs.serving.closeVoiceRoom(); } }, mounted() { let _this = this; if (this.chat_id) { this.$nextTick(() => { this.scrollToView = "msg" + this.chat_id; }); } setTimeout(function() { _this.getScrollContentHeight("hide", 0); }, 400); }, created() {}, onShow() { this.initData(); }, computed: { ...mapState({ RECORD: (state) => state.audio.RECORD, AUDIO: (state) => state.audio.AUDIO, RecordTime: (state) => state.audio.RecordTime, KeyboardH: (state) => state.common.KeyboardHeight, custom_font_size: (state) => state.common.custom_font_size, }), getServingText() { return _data.data("dragInfo").state == 1 ? "下麦" : "上麦"; }, myPhoto() { return this.my_photo; }, imgRan() { return Math.random(); }, staticPath() { return _data.staticChat(); }, staticVideoImg() { return _data.staticVideoImg(); }, staticPhoto() { return _data.staticPhoto(); }, sendMsgClass() { // #ifdef H5 return this.isVoice ? "hidden" : ""; // #endif return (this.isVoice ? "hidden" : "") || this.textMsg.length ? "" : "hidden"; }, iconShow() { return this.textMsg.length ? "hidden" : "more"; }, systemClass() { return this.msgList.type == 1 ? "sys" : ""; }, }, onReady: function(res) { let _this = this; if (_this.msgList.type == 1) { // setTimeout(function () { // _this.$refs.scrollNotice.textScroll() // },300); } }, methods: { ...mapMutations([ "regSendVoiceEvent", "regOnStartEvent", "regVudioEndEvent", ]), // 消息是否是图片 isImage(con) { // console.log("con",con); // 如果是图片,则转换成图片 let reg = /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i; let reg2 = RegExp(/data:image\/.*;base64,/); if (reg.test(con) || reg2.test(con)) { return true; } else { return false; } }, // 选择要禁言的人 selectMember(row) { console.log("row", row); let user_id = row.msg.user_info.uid + ""; if (user_id) { let i = this.members.indexOf(user_id); if (i > -1) { this.members.splice(i, 1); } else { this.members.push(user_id); } } let _this = this; _this.$httpSend({ path: "/im/message/setGroupAdmin", data: { users: JSON.stringify(_this.members), list_id: _this.list_id, type: 2, }, success_action: true, success(res) { row.showAction = false; _this.$forceUpdate(); // 禁言 uni.showToast({ title: res.msg, duration: 2000, }); }, }); }, // 选择要剔出的人 selectRemoveMember(row) { console.log("row", row); let user_id = row.msg.user_info.uid; if (user_id) { let i = this.members.indexOf(user_id); if (i > -1) { this.members.splice(i, 1); } else { this.members.push(user_id); } } let _this = this; _this.$httpSend({ path: "/im/message/removeChat", data: { users: JSON.stringify(_this.members), list_id: _this.list_id, }, success_action: true, success(res) { row.showAction = false; _this.$forceUpdate(); uni.showToast({ title: res.msg, duration: 2000, icon: "none", }); }, }); }, // 所有群成员 getGroupMembers(row) { let _this = this; _this.$httpSend({ path: "/im/message/getGroupAdmin", data: { list_id: this.list_id, type: 2, }, success(data) { _this.members = data.user_ids; console.log("_this.members", _this.members); row.showAction = true; _this.$forceUpdate(); }, }); }, // todo 长按显示面板 showAction(row) { this.msgList.list.map((item) => { item.showAction = false; }); this.getGroupMembers(row); }, // todo 长按头像@好友 addFriendChat(msg) { msg.showAction = false; this.textMsg = this.textMsg + "@" + msg.msg.user_info.name + " "; if (!this.send_user_id) { this.send_user_id = msg.msg.user_info.uid; } else { this.send_user_id = this.send_user_id + "," + msg.msg.user_info.uid; } }, closeFriends() { this.$refs.popup_friends.close(); }, // 初始化数据 initData() { _hook.routeSonHook(); _get.getUserInfo({}); // todo 选择@好友高度 this.popHeight = uni.getSystemInfoSync().windowHeight; let _this = this; /** 先移除监听事件(避免重复触发消息) */ uni.$off("remove_member"); uni.$off("group_delete_chat"); uni.$off("chat_del"); uni.$off("data_chat_data_unshift"); uni.$off("data_chat_data_push"); uni.$off("data_chat_data"); uni.$off("data_user_info"); uni.$off("data_chat_data_delete"); uni.$off("update_text_msg"); uni.$off("memberJoinRoom"); uni.$off("closeVoiceRoom"); uni.$off("newReadTime"); clearInterval(_this.timer); clearInterval(_this.redTimer); _this.getReadTime(); uni.$on("newReadTime", function(time) { console.log('newReadTime:成功'); _this.nowReadTime = time; }); _this.my_photo = _data.data("cache").local_photo; let chat_data = _data.localData(_this.list_id); _this.my_data = _data.data("user_info"); /* 重新获取对话内容 */ _get.getChatData({ send_data: { list_id: _this.list_id, time: 0, is_up: 1, }, is_action_data: 1, }); console.log(chat_data, 'chat_data+++++++'); if (chat_data && chat_data.list.length) { _this.scrollAnimation = false; // TODO 图片列表 console.log(chat_data); let msg = ""; if (chat_data.online == 1) { msg = "(在线)"; } else { msg = "(离线)"; } uni.setNavigationBarTitle({ title: chat_data.show_name + (chat_data.type == 1 ? "" : msg), }); _this.addMsgImgList(chat_data.list); chat_data.list = _this.msgDataHandle(chat_data.list); _this.msgList = chat_data; _this.receive_list = _this.msgList.receive_list; /** 滚动到指定位置 */ setTimeout(function() { _this.$nextTick(function() { _this.scrollTop = new Date().getTime(); // console.log("11111111111111111111111111111") // _this.scrollToView = 'msg' + data[data.length - 1].msg.id; }); }, 400); /** 如果是群聊要实时检测群有无禁言 */ _this.type = chat_data.type; if (chat_data.type == 1) { _this.getGroupSteate(); } } console.log('添加当前的会话', this.list_id); /** 添加当前的会话list_id */ _data.localData("message_list_id", this.list_id); console.log('_data', _data); console.log('监听会话数据变化的会话'); /** 监听会话数据变化 */ uni.$on("data_chat_data_unshift", function(data) { console.log('会话数据有变化'); data = _this.msgDataHandle(data); _this.scrollAnimation = false; let position_id = _this.msgList.list[0].msg.id; _this.msgList.list.unshift(...data); /** 滚动到指定位置 */ _this.$nextTick(function() { _this.scrollToView = "msg" + position_id; }); // TODO 图片列表 console.log("图片列表++++++", _this.msgList); }); /** 监听会话数据变化 */ uni.$on("data_chat_data_push", function(data) { _this.setReadTime(); /** 保持页面15条数据,提升性能 */ _this.noMore = 0; data = _this.msgDataHandle(data); _this.scrollAnimation = true; _this.msgList.list = data; // TODO 图片列表 console.log("图片列表-----", _this.msgList); _this.receive_list = _this.msgList.receive_list; /** 滚动到指定位置 */ setTimeout(function() { _this.$nextTick(function() { // _this.scrollTop =(new Date()).getTime(); _this.scrollTop = new Date().getTime(); // _this.scrollToView = 'msg' + data[data.length - 1].msg.id; }); }, 400); }); /** 监听撤回消息 */ uni.$on("data_chat_data_delete", function(list) { _this.msgList.list = list; // TODO 图片列表 console.log("图片列表", _this.msgList); }); /** 监听会话数据变化 */ uni.$on("data_chat_data", function(data) { let msg = ""; if (data.online == 1) { msg = "(在线)"; } else { msg = "(离线)"; } uni.setNavigationBarTitle({ title: data.show_name + (_this.msgList.type == 1 ? "" : msg), }); data.list = _this.msgDataHandle(data.list); _this.scrollAnimation = false; _this.msgList = data; // TODO 图片列表 console.log("图片列表+++++", _this.msgList); _this.receive_list = _this.msgList.receive_list; if (_this.msgList.type == 1) { _this.getGroupSteate(); } /** 滚动到指定位置 */ _this.$nextTick(function() { // _this.scrollTop =(new Date()).getTime(); // _this.scrollToView = 'msg' + data.list[data.list.length - 1].msg.id; _this.scrollTop = new Date().getTime(); }); }); /** 监听新的个人数据 */ uni.$on("data_user_info", function(data) { _this.my_data = data; _this.my_photo = _data.staticPhoto() + _this.my_data.photo; }); //监听键盘高度变化 uni.onKeyboardHeightChange((res) => { console.log("软键盘高度变化", res); _this.Keyboard = res.height; if (res.height) { //todo @好友软键盘高度变化 this.popHeight = uni.getSystemInfoSync().windowHeight - res.height; _this.getScrollContentHeight("show", 0); } else { this.popHeight = uni.getSystemInfoSync().windowHeight; _this.getScrollContentHeight("hide", 0); } }); uni.$on("update_text_msg", function(res) { _this.textMsg += res.msg; //todo @好友 如果消息不为空, _this.$refs.popup_friends.close(); if (!_this.send_user_id) { _this.send_user_id = res.user_id; } else { _this.send_user_id = _this.send_user_id + "," + res.user_id; } }); uni.$on("memberJoinRoom", function(res) { _this.$refs.serving.memberJoin(_this.list_id, function() { _this.onLine = true; _this.showServing = true; }); }); uni.$on("closeVoiceRoom", function(res) { _this.$refs.serving.closeVoiceRoom(); }); _get.getMemberPhotos({ list_id: _this.list_id, }, function(ret) { _this.memberPhotos = ret; console.log("群成员通话", _this.memberPhotos); } ); // 监听清空消息 uni.$on("chat_del", function(res) { uni.showModal({ title: "提示", showCancel: false, content: "消息被清空", success: function(res) {}, }); _this.msgList = []; }); // 监听消息清空 uni.$on("group_delete_chat", function(list_id) { _this.msgList = []; _get.getChatData({ send_data: { list_id: _this.list_id, time: 0, is_up: 1, }, is_action_data: 1, }); }); // 监听踢出会员重新获取消息 uni.$on("remove_member", function(list_id) { _this.msgList = []; _data.localData(list_id, null); _this.initData(); }); //收到信息 回传 this.setReadTime(); }, // 选择收藏 chooseLike() { this.hideDrawer(1); //隐藏抽屉 uni.navigateTo({ url: "/pages/my/store?choose_collect=1", }); }, // 下载文件 downFile(file) { uni.downloadFile({ url: file, success: (data) => { if (data.statusCode === 200) { console.log("下载成功"); uni.saveFile({ tempFilePath: data.tempFilePath, success(res) { uni.showModal({ title: "下载成功", content: "文件已保存:" + res.savedFilePath, success: (res_) => {}, }); }, }); } }, }); }, // 打开地图 openMap(pos) { uni.openLocation({ latitude: pos.latitude, longitude: pos.longitude, name: pos.name, address: pos.address, }); }, uploadAFile(data) { console.log("data", data); let _this = this; for (let i = 0; i < data.length; i++) { let msg = { url: data[i].url, name: data[i].name, length: parseInt(data[i].sizeMB * 1024), }; _this.sendMsg(msg, 11); } }, // 上传文件 chooseFile() { const _this = this; _this.hideDrawer(1); //隐藏抽屉 // #ifdef H5 uni.chooseFile({ success: function(res) { console.log("res", res); console.log("size", parseInt(res.tempFiles[0].size / 1024)); console.log(JSON.stringify(res.tempFilePaths)); for (let i = 0; i < res.tempFilePaths.length; i++) { let msg = { url: res.tempFilePaths[i], name: res.tempFiles[i].name, length: parseInt(res.tempFiles[i].size / 1024), }; _this.sendMsg(msg, 11); } }, }); // #endif // #ifdef APP-PLUS this.showUploadFile = true; // #endif }, // 戳一戳 chooseChuo() { this.sendChuoYiChuoMsg(); }, // 发送位置 sendPos() { let _this = this; uni.chooseLocation({ success: function(res) { console.log("位置名称:" + res.name); console.log("详细地址:" + res.address); console.log("纬度:" + res.latitude); console.log("经度:" + res.longitude); let msg = { latitude: res.latitude, longitude: res.longitude, name: res.name, address: res.address, }; _this.sendMsg(msg, 10); }, }); }, getHtml(content) { return htmlParser(content); }, inputText(e) { //截取最后一位 let str = e.detail.value; // todo @好友 if (str === "") { this.send_user_id = ""; } let length1 = str.length; let key = str.substr(length1 - 1, 1); if ( key && key == "@" && this.msgList.type == 1 && length1 > this.textMsg.length ) { this.textMsg = str; console.log("跳转到群成员列表"); // TODO群成员弹窗 // 关闭输入框 uni.hideKeyboard(); this.$refs.popup_friends.open(); // uni.navigateTo({ // url: '/pages/chat/group_list?list_id=' + this.list_id, // animationType: "slide-in-bottom" // }); return true; } this.textMsg = str; }, getScrollContentHeight(type = "show", not_return = 1) { let _this = this; let query = uni.createSelectorQuery(); query.select(".more-layer").boundingClientRect(); query.select(".input-box").boundingClientRect(); uni.getSystemInfo({ success: function(res) { _this.scrollInfo.totall_height = res.windowHeight; query.exec((data) => { _this.scrollInfo.input_box_height1 = data[0].height || 0; _this.scrollInfo.input_box_height2 = data[1].height || 0; _this.autoHeight(type, not_return); }); }, }); }, autoHeight(type, not_return) { let _this = this; if (type == "show") { if (this.Keyboard) { this.scrollHeight = _this.scrollInfo.totall_height - _this.Keyboard - _this.scrollInfo.input_box_height2 + "px"; } else { this.scrollHeight = _this.scrollInfo.totall_height - _this.scrollInfo.input_box_height1 - _this.scrollInfo.input_box_height2 + "px"; } } else { //content高度 = 屏幕高度-tool高度 uni.getSystemInfo({ success: function(res) { res.windowHeight = res.windowHeight; if (_this.Keyboard) { _this.scrollHeight = res.windowHeight - _this.scrollInfo.Keyboard - _this.scrollInfo.input_box_height2 + "px"; } else { _this.scrollHeight = res.windowHeight - _this.scrollInfo.input_box_height2 + "px"; } }, }); // this.scrollHeight = '100%' } if (not_return == 0) { this.$nextTick(() => { _this.scrollTop = new Date().getTime(); }); } }, getGroupSteate() { let _this = this; this.$httpSend({ path: "/im/action/groupState", data: { list_id: _this.list_id, }, success(res) { _this.msgList.is_msg = res.is_msg; _this.msgList.is_action = res.is_action; _this.msgList.is_niming = res.is_niming; _this.niming_msg = res.is_niming == 0 ? "匿名" : "退出匿名"; _this.miaoqiang = res.miaoqiang; _this.vendor_status = res.vendor_status; _this.notice = res.notice; _this.is_main = res.is_main; _this.group_state = res; if (_this.miaoqiang && _this.is_main && res.qiang_time > 0) { _this.autoFaRed(res.qiang_time); } if (res.voice_room_state) { //有人发起语音则自动加入 //加入视频 _this.$refs.serving.memberJoin(_this.list_id, function() { _this.onLine = true; }); } }, }); }, videoErrorCallback() {}, autoVideo(msg) { this.showVedio = true; this.videoPath = _data.staticChat() + this.list_id + "/" + msg.content.url; }, getCard(msg) { if (msg.content.user_id != undefined) { uni.navigateTo({ url: "/pages/details/index?in=1&user_id=" + msg.content.user_id, }); } }, chooseCard() { uni.navigateTo({ url: "./message/card_list?list_id=" + this.list_id, }); }, imageError(e) { // this.my_photo = _data.staticPhoto() + '/default_photo_path.png'; let index = e.currentTarget.dataset.id; //替换index对应的图片 this.msgList.list[index].msg.user_info.face = "/default_photo_path.png"; }, imageError2(e) { this.my_photo = _data.staticPhoto() + "/default_photo_path.png"; }, scrollToDom() { let that = this; let query = uni.createSelectorQuery(); query.select("#msg" + that.chat_id).boundingClientRect(); query.select("#scrollview").boundingClientRect(); query.exec((res) => { that.style.mitemHeight = 0; let rect = res[0]; that.style.mitemHeight = that.style.mitemHeight + rect.height + 40; if (that.style.mitemHeight > that.style.contentViewHeight - 100) { //判断子元素高度是否大于显示高度 that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight; //用子元素的高度减去显示的高度就获益获得序言滚动的高度 } }); }, // //发起视频聊天 videoBut(type) { console.log("发起通话->", type); let data = {}; if (type == "voice") { data.callType = 1 } else { data.callType = 2 } let arr = []; this.memberPhotos.forEach(item => { arr.push(item.user_id.toString()); }) data.user_ids = arr; console.log("发起通话数据", data); this.sendCall(data); return; let content_type = 6; this.call_ret = false; if (type === "voice") { this.voiceLoading = true; content_type = 7; } else { this.videoLoading = true; } let _this = this; this.$httpSend({ path: "/im/message/sendVideo", data: { list_id: this.list_id, content_type: content_type, _token: uni.getStorageSync("token"), }, success_action: true, success(res) { if (res.err === 0) { console.log("通话数据", res); //图片转化 res.data.myavatar = _this.staticPhoto + res.data.myavatar; res.data.avatar = _this.staticPhoto + res.data.avatar; _this.getVideo(res.data); } else {} }, }); }, // 发起腾讯通话 sendCall(data) { console.log('开始发起腾讯通话'); let my_id = this.my_data.id; let user_id = ''; data.user_ids.forEach(item => { if (item != my_id) { user_id = item; } }) console.log("开始打电话", data); console.log(uni.$TUICalling, 'uni.$TUICalling'); uni.$TUICalling.call({ type: data.callType, userID: user_id, }, (res) => { console.log(JSON.stringify(res)); } ); // uni.$TUICalling.groupCall({ // type: data.callType, // groupID: "", // userIDList: data.user_ids, // }, // (res) => { // console.log(JSON.stringify(res)); // } // ); }, //调用视频/音频 getVideo(data) { this.sendCall(data); return; data.usersig = genTestUserSig(data.userid).userSig; console.log("调用传参", data); console.log("_this.call", _this.call); console.log("调用腾讯云data", data); let _this = this; _this.call.groupCall({ type: data.callType == "voice" ? 1 : 2, groupID: "", userIDList: data.user_ids, }, (ret) => { this.doubleClick = false; console.log(data); console.log(ret); console.log("9909090909090"); if (ret) { _this.videPoup = false; _this.voiceLoading = false; if (ret.code == 5 && !_this.payTimer) { console.log("发起付费"); //先扣一次 _get.payVideoAamount({ list_id: _this.list_id, }, function(res) { console.log(res); }, function(res) { console.log(res); } ); _this.payTimer = setInterval(function() { _get.payVideoAamount({ list_id: _this.list_id, }, function(res) { console.log(res); }, function(res) { console.log(res); clearInterval(_this.payTimer); //取消收费 _this.payTimer = false; } ); }, 60000); } if (ret.code == 1 && ret.time != undefined) { //对方或者自己取消 data.time = ret.time; data.ret_code = ret.code; console.log(JSON.stringify(data)); _get.cancelCall(data, function(res) {}); } } } ); }, // 发起视频通话 videoCall(type) { let _this = this; _this.callType = type; console.log('kaishi'); // console.log("确认开始->") _this.confirm(); // this.videPoup = true // this.hideDrawer(); }, confirm() { // if (this.doubleClick) return false; // this.doubleClick = true; if (this.callType == 1) { this.videoBut("video"); } else { this.videoBut("voice"); } this.$refs.popup.close(); }, msgDataHandle(data, type) { for (let i = 0, j = data.length, msg_img; i < j; i++) { if (data[i].type == 0 && data[i].msg.type == 2) { msg_img = this.staticPath + this.list_id + "/" + data[i].msg.content.url.replace("_thumb", ""); if (type) { this.msgImgList.unshift(msg_img); } else { this.msgImgList.push(msg_img); } data[i].msg.content = this.setPicSize(data[i].msg.content); } else if (data[i].type == 0 && data[i].msg.type == 0) { data[i].msg.content.text = this.replaceEmoji( data[i].msg.content.text ); } } // console.log("this.msgImgList",this.msgImgList); return data; }, // 所有图片列表 addMsgImgList(data) { this.msgImgList = []; for (let i = 0, j = data.length, msg_img; i < j; i++) { if (data[i].type == 0 && data[i].msg.type == 2) { this.msgImgList.push( this.staticPath + this.list_id + "/" + data[i].msg.content.url.replace("_thumb", "") ); } } }, timestampFormat(time) { return _action.timestampFormat(time); }, msgAction(id, user_id, content, type) { let _this = this; // switch (_this.msgList.type) { // case 0: // if (user_id != _this.my_data.id) { // return; // } // break; // case 1: // if (_this.msgList.is_action == 0 && user_id != _this.my_data.id) { // return; // } // break; // default: // return; // break; // } uni.showActionSheet({ itemList: ["撤回", "收藏", "转发", "复制"], success: function(res) { switch (res.tapIndex) { case 0: _this.$httpSend({ path: "/im/message/withdraw", data: { list_id: _this.list_id, type: _this.msgList.type, msg_id: id, }, success_action: true, success(res) { uni.showToast({ title: res.msg, icon: "none", duration: 1500, }); }, }); break; case 1: console.log("收藏"); console.log("收藏文件", { list_id: _this.list_id, type: _this.msgList.type, msg_id: id, }); _this.$httpSend({ path: "/im/vendor/saveStore", data: { list_id: _this.list_id, type: _this.msgList.type, msg_id: id, }, success_action: true, success(res) { uni.showToast({ title: res.msg, icon: "none", duration: 1500, }); }, }); break; case 2: console.log("转发"); let datas = { list_id: _this.list_id, type: _this.msgList.type, msg_id: id, }; uni.setStorageSync("data_msg", JSON.stringify(datas)); uni.navigateTo({ url: "../push/sendallsome?type=" + type + "&content=" + JSON.stringify(content), }); break; //收藏 case 3: console.log("复制", content); if (type == 0) { let reg = /<\/?.+?\/?>/g; let str = content.text; str = str.replace(reg, ""); uni.setClipboardData({ data: str, success: function() { uni.showToast({ icon: "none", title: "复制成功", }); }, fail: function() { uni.showToast({ icon: "none", title: "复制失败", }); }, }); } else { uni.showToast({ icon: "none", title: "不支持该类消息复制", }); } break; default: break; } }, fail: function(res) { //console.log(res.errMsg); }, }); }, copyToClipboard(str) { const el = document.createElement("textarea"); el.value = str; el.setAttribute("readonly", ""); el.style.position = "absolute"; el.style.left = "-9999px"; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand("copy"); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }, goDetails(user_id, row) { /** 如果是群聊,没有权限的话,查看不了其他会员信息 */ if ( this.msgList.type == 1 && (this.msgList.is_action == 0 || row.msg.is_niming == 1) ) { uni.showToast({ title: "没有权限查看", icon: "none", duration: 1000, }); return; } uni.navigateTo({ url: "../details/index?user_id=" + user_id, }); }, // 接受消息(筛选处理) screenMsg(msg) { //从长连接处转发给这个方法,进行筛选处理 if (msg.type == 2) { //已读信息 this.nowReadTime = msg.msg.time; } else if (msg.type == 1) { // 系统消息 switch (msg.msg.type) { case 0: this.addSystemTextMsg(msg); break; case 5: this.addSystemRedEnvelopeMsg(msg); break; } } else if (msg.type == 0) { // 用户消息 switch (msg.msg.type) { case 0: this.addTextMsg(msg); break; case 1: this.addVoiceMsg(msg); break; case 2: this.addImgMsg(msg); break; case 5: this.addRedEnvelopeMsg(msg); break; } //console.log('用户消息'); //非自己的消息震动 if (msg.msg.user_info.uid != this.my_data.id) { //console.log('振动'); uni.vibrateLong(); } //收到信息 回传 this.setReadTime(); } let _this = this; this.$nextTick(function() { // 滚动到底 _this.scrollTop = new Date().getTime(); }); }, getReadTime() { var _this = this; this.$httpSend({ path: "/im/message/getListTime", data: { list_id: this.list_id, }, success_action: true, success(res) { console.log('getReadTime:成功'); _this.nowReadTime = res.read_time; }, }); }, setReadTime() { this.$httpSend({ path: "/im/message/setListTime", data: { list_id: this.list_id, }, success_action: true, success(res) { // console.log(res) }, }); }, //触发滑动到顶部(加载历史信息记录) loadHistory() { if (this.isHistoryLoading || this.noMore) { return; } let _this = this; this.isHistoryLoading = true; //参数作为进入请求标识,防止重复请求 _get.getChatData({ send_data: { list_id: _this.list_id, time: _this.msgList.list[0].msg.time, is_up: 0, }, callback(data) { if (data.list.length < 15) { _this.noMore = 1; } _this.isHistoryLoading = false; }, is_action_data: 0, }); }, //处理图片尺寸,如果不处理宽高,新进入页面加载图片时候会闪 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; let url_array = content.url.split("."); if (content.url.indexOf("_thumb.") == -1) { content.url = url_array[0] + "_thumb." + url_array[1]; } } return content; }, //更多功能(点击+弹出) showMore() { this.isVoice = false; this.hideEmoji = true; if (this.hideMore) { this.hideMore = false; this.openDrawer(); } else { this.hideDrawer(); } }, // 打开抽屉 openDrawer() { let _this = this; this.popupLayerClass = "showLayer"; this.hideMore = false; setTimeout(function() { console.log("scorll..."); _this.getScrollContentHeight("show", 0); }, 150); }, // 隐藏抽屉 hideDrawer(not_return = 0, type = "hide") { //判断时间 if (not_return == 3) { let time = new Date().getTime(); if (this.doubleTime.flag) { this.doubleTime.firstTime = time; this.doubleTime.flag = false; } else { this.doubleTime.towTime = time; this.doubleTime.flag = true; } let timeBucket = this.doubleTime.towTime - this.doubleTime.firstTime; console.log("timeBucket:", timeBucket); if (timeBucket < 200 && this.doubleTime.flag) { //第二次进来 clearTimeout(this.timer); this.doubleTime.towTime = ""; this.doubleTime.firstTime = ""; // this.sendChuoYiChuoMsg(); // this.textMsg = '[戳一戳]' // this.sendMsg(this.textMsg, 0); // this.textMsg = '' // //发送戳一戳 return false; } let _this = this; this.timer = setTimeout(function() { _this.toHideDrawer(not_return, type); }, 280); } else { this.toHideDrawer(not_return, type); } }, sendChuoYiChuoMsg() { _get.sendChuoYiChuoMsg({ list_id: this.list_id, }, function() {} ); }, toHideDrawer(not_return = 0, type = "hide") { this.popupLayerClass = ""; setTimeout(() => { this.hideMore = true; this.hideEmoji = true; this.getScrollContentHeight(type, not_return); }, 150); }, // 选择图片发送 chooseImage() { this.getImage("album"); }, //拍照发送 camera() { this.getImage("camera"); }, //拍摄视频发送 video() { uni.chooseVideo({ success: (res) => { let min = parseInt(res.size / 60), sec = res.size % 60; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; let msg = { url: res.tempFilePath, length: min + ":" + sec, }; this.sendMsg(msg, 3); }, }); }, //发红包 handRedEnvelopes() { // this.hideDrawer(1); console.log(111); let url = "message/hand?list_id=" + this.list_id + "&msg_type=" + this.msgList.type; if (this.vendor_status) url = "message/hand_pin?list_id=" + this.list_id + "&msg_type=" + this.msgList.type; uni.navigateTo({ url: url, }); }, //转账 transfers() { //TODO跳转到转账页面 }, //选照片 or 拍照 getImage(type) { this.hideDrawer(1); uni.chooseImage({ sourceType: [type], sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 success: (res) => { for (let i = 0; i < res.tempFilePaths.length; i++) { uni.getImageInfo({ src: res.tempFilePaths[i], success: (image) => { //console.log(image.width); //console.log(image.height); let msg = { url: res.tempFilePaths[i], w: image.width, h: image.height, }; this.sendMsg(msg, 2); }, }); } }, }); }, // 选择表情 chooseEmoji() { this.hideMore = true; if (this.hideEmoji) { this.hideEmoji = false; this.openDrawer(); } else { this.hideDrawer(); } }, //添加表情 addEmoji(em) { this.textMsg += em.alt; }, //获取焦点,如果不是选表情ing,则关闭抽屉 textareaFocus() { let _this = this; _this.hideDrawer(0, "show"); return; if (_this.popupLayerClass == "showLayer" && this.hideMore == false) { _this.hideDrawer(); } }, // 发送文字消息 sendText() { this.hideDrawer(1); //隐藏抽屉 if (!this.textMsg) { return; } this.sendMsg("", 0); //清空输入框 this.textMsg = ""; }, //替换表情符号为图片 replaceEmoji(str) { str = str ? str : ""; let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => { // console.log("item: " + item); for (let i = 0; i < this.emojiList.length; i++) { let row = this.emojiList[i]; for (let j = 0; j < row.length; j++) { let EM = row[j]; if (EM.alt == item) { //在线表情路径,图文混排必须使用网络路径,请上传一份表情到你的服务器后再替换此路径 //比如你上传服务器后,你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/ let imgstr = '<img style="width:22px;height:22px;" src="' + _data.data("static_url") + "/static/emoji/" + EM.url + '">'; // console.log("imgstr: " + imgstr); return imgstr; } } } }); // display: flex; // return '<div style="align-items: center;word-break:break-all;">' + replacedStr + '</div>'; return replacedStr; }, showQiang() { this.$refs.qiang.open(); }, autoFaRed(num) { let _this = this; let time = num * 1000; if (time <= 0) return false; if (_this.timer) clearInterval(_this.redTimer); _this.redTimer = setInterval(function() { _get.autoBigRed({ list_id: _this.list_id, }, function() {} ); }, num * 1000); }, goQiang(e) { let _this = this; e.list_id = _this.list_id; _get.updateMiaoqiang(e, function(res) { _this.miaoqiang = e.status; console.log(e); if (e.status == 1) { console.log("发包......."); _this.autoFaRed(e.num); } else { clearInterval(_this.redTimer); } setTimeout(function() { uni.showToast({ title: "操作成功", duration: 2000, }); _this.$refs.qiang.close(); }, 500); }); }, // 发送消息 sendMsg(content, type) { console.log('发送内容content:', content); // uni.showLoading(); let _this = this, sendMsg = content; ((callback) => { switch (type) { /** 文字/表情消息 */ case 0: let msg = this.textMsg.replace(/</g, "<"); sendMsg = { text: msg, }; // todo @好友 if (_this.send_user_id) { sendMsg.user_id = _this.send_user_id; } callback(); break; /** 语音/图片/视频/文件 */ case 1: case 2: case 3: case 4: uni.showLoading({ title: "发送中", }); _this.$httpSendFile({ type: 0, local_url: sendMsg.url, data: { list_id: _this.list_id, }, success(data) { console.log("数据", data); uni.hideLoading(); sendMsg.url = data.save_name; sendMsg.full_url = data.full_url; sendMsg.full_movie = data.full_movie; if ("save_gif_path" in data) sendMsg.save_pic_path = data.save_gif_path; console.log("success"); callback(); }, }); break; /** 红包消息 */ case 5: break; case 10: // 地图 sendMsg = content; callback(); break; case 11: // 文件 uni.showLoading({ title: "发送中", }); _this.$httpSendFile({ type: 0, local_url: sendMsg.url, data: { list_id: _this.list_id, }, success(data) { console.log("数据"); uni.hideLoading(); sendMsg.url = data.save_name; sendMsg.full_url = data.full_url; sendMsg.full_movie = data.full_movie; if ("save_gif_path" in data) sendMsg.save_pic_path = data.save_gif_path; console.log("success"); callback(); }, }); break; default: break; } })(() => { //todo @好友 发送后清空user_id _this.send_user_id = ""; _this.$httpSend({ path: "/im/message/textMsg", data: { list_id: _this.list_id, content_type: type, content: JSON.stringify(sendMsg), }, success_action: true, success(res) { // uni.hideLoading(); switch (res.err) { case 0: if (type == 1) { _action.playVoice("/static/voice/voice.mp3"); } break; case 1: uni.showModal({ title: "好友提示", confirmText: "发送好友申请", content: res.msg, success: function(res) { if (res.confirm) { uni.navigateTo({ url: "../friend/apply?user_id=" + _data.localData(_this.list_id) .obj_id + "&is_type=0", }); } }, }); break; case 2: uni.showModal({ content: res.msg, }); let data = _data.localData(data.list_id); data.is_msg = 1; _this.msgList.is_msg = 1; _data.localData(data.list_id, data); break; default: break; } console.log("重新获取聊天内容。。。。。。。。。"); _get.getChatData({ send_data: { list_id: _this.list_id, time: 0, is_up: 1, }, is_action_data: 1, }); }, }); }); }, // 添加文字消息到列表 addTextMsg(msg) { this.msgList.list.push(msg); }, // 添加语音消息到列表 addVoiceMsg(msg) { this.msgList.list.push(msg); }, // 添加图片消息到列表 addImgMsg(msg) { this.msgImgList.push( this.staticPath + this.list_id + "/" + msg.content.url.replace("_thumb", "") ); msg.msg.content = this.setPicSize(msg.msg.content); this.msgList.list.push(msg); console.log("this.msgImgList", this.msgImgList); console.log("this.msgList", this.msgList); }, addRedEnvelopeMsg(msg) { this.msgList.push(msg); }, // 添加系统文字消息到列表 addSystemTextMsg(msg) { this.msgList.list.push(msg); }, // 添加系统红包消息到列表 addSystemRedEnvelopeMsg(msg) { this.msgList.list.push(msg); }, openRed(params) { let _this = this; _this.luckbtn = "luckbtn"; uni.showLoading({ title: "加载中...", }); //TODO 判断是哪种红包 if (this.vendor_status == 1) { _get.getLeiHongBao( params, function(ret) { _this.receive_list.push(params.rid); _this.msgList.receive_list = _this.receive_list; _data.localData(_this.list_id, _this.msgList); console.log(ret); uni.$emit("data_user_info", ret); _data.data("user_info", ret); setTimeout(function() { _this.luckbtn = ""; _this.closeRedEnvelope(); _this.toDetails(params.rid); }, 1000); }, function(ret) { setTimeout(function() { _this.luckbtn = ""; _this.closeRedEnvelope(); _this.toDetails(params.rid); }, 1000); } ); } else { _get.getHongBao( params, function(ret) { _this.receive_list.push(params.rid); _this.msgList.receive_list = _this.receive_list; _data.localData(_this.list_id, _this.msgList); console.log(ret); uni.$emit("data_user_info", ret); _data.data("user_info", ret); setTimeout(function() { _this.luckbtn = ""; _this.closeRedEnvelope(); _this.toDetails(params.rid); }, 1000); }, function(ret) { setTimeout(function() { _this.luckbtn = ""; _this.closeRedEnvelope(); _this.toDetails(params.rid); }, 1000); } ); } uni.hideLoading(); }, // 打开红包 openRedEnvelope(msg, index) { if (this.receive_list.indexOf(msg.content.rid) >= 0) { this.toDetails(msg.content.rid); return true; } this.windowsState = "show"; this.redenvelopeData = msg.content; this.redenvelopeData.index = index; return true; }, // 关闭红包弹窗 closeRedEnvelope() { this.windowsState = "hide"; setTimeout(() => { this.windowsState = ""; }, 200); }, sendSystemMsg(content, type) { let lastid = this.msgList.list[this.msgList.list.length - 1].msg.id; lastid++; let row = { type: "system", msg: { id: lastid, type: type, content: content, }, }; this.screenMsg(row); }, //领取详情 toDetails(rid) { uni.navigateTo({ url: "message/details?rid=" + rid + "&list_id=" + this.list_id, }); }, // 预览图片 showPic(msg) { console.log("msg预览1", msg); let url = this.staticPath + this.list_id + "/" + msg.content.url.replace("_thumb", ""); uni.previewImage({ indicator: "none", urls: [url], }); }, // 预览图片 showPic1(msg) { console.log("msg预览2类型图片", msg); let url = this.staticPath + this.list_id + "/" + msg.content.url.replace("_thumb", ""); uni.previewImage({ current: url, indicator: "none", urls: this.msgImgList, }); }, // 预览文字图片链接 showPic2(url) { console.log("msg预览3", url); uni.previewImage({ indicator: "none", urls: [url], }); }, // 播放语音 playVoice(msg) { console.log("播放语音", msg); this.AUDIO.stop(); let _this = this; if (this.playMsgid == msg.id) { this.playMsgid = null; } else { this.playMsgid = msg.id; // this.AUDIO.obeyMuteSwitch = false; // todo修复语音 let url = this.staticPath + msg.content.full_url; _this.AUDIO.src = url; _this.$nextTick(function() { _this.AUDIO.play(); }); // this.AUDIO.src = (this.staticPath + msg.content.url + '?_=' + Math.random()); } }, // 录音开始 voiceBegin(e) { if (e.touches.length > 1) { return; } this.initPoint.Y = e.touches[0].clientY; this.initPoint.identifier = e.touches[0].identifier; // this.RECORDER.start({ format: "mp3" });//录音开始, // 开始录音 this.RECORD.start({ format: "mp3", }); }, //录音开始UI效果 recordBegin(e) { /** 暂停语音播放 */ this.AUDIO.pause(); this.recording = true; this.voiceTis = "松开 结束"; }, // 录音被打断 voiceCancel() { this.recording = false; this.voiceTis = "按住 说话"; this.recordTis = "手指上滑 取消发送"; this.willStop = true; //不发送录音 this.RECORD.stop(); //录音结束 }, // 录音中(判断是否触发上滑取消发送) voiceIng(e) { if (!this.recording) { return; } let touche = e.touches[0]; //上滑一个导航栏的高度触发上滑取消发送 if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) { this.willStop = true; this.recordTis = "松开手指 取消发送"; } else { this.willStop = false; this.recordTis = "手指上滑 取消发送"; } }, // 结束录音 voiceEnd(e) { if (!this.recording) { return; } this.recording = false; this.voiceTis = "按住 说话"; this.recordTis = "手指上滑 取消发送"; this.RECORD.stop(); //录音结束 }, //录音结束(回调文件) recordEnd(e) { if (!this.willStop) { //console.log("e: " + JSON.stringify(e)); let msg = { length: 0, url: e.tempFilePath, }; console.log(JSON.stringify(msg)); let min = parseInt(this.RecordTime / 60); let sec = this.RecordTime % 60; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; if (min > 0 || sec > 0) { msg.length = min + ":" + sec; this.sendMsg(msg, 1); } } else { console.log("取消发送录音"); } this.willStop = false; }, // 切换语音/文字输入 switchVoice() { this.hideDrawer(1); this.isVoice = this.isVoice ? false : true; }, discard() { return; }, sayCall() { let status = 0; //默认关闭匿名 console.log("this.msgList.is_niming:", this.msgList.is_niming); if (this.msgList.is_niming == 0) { uni.showLoading({ title: "匿名开启中...", }); status = 1; } let _this = this; _get.updateUserSayType({ list_id: this.list_id, status: status, }, function() { if (_this.msgList.is_niming == 0) { uni.showToast({ title: "开启成功", image: "/static/theme/default/my/niming.png", duration: 2000, }); _this.msgList.is_niming = 1; _this.niming_msg = "退出匿名"; } else { _this.msgList.is_niming = 0; _this.niming_msg = "匿名"; } _this.textareaFocus(); //隐藏抽屉 }, function(ret) { uni.showToast({ title: ret.msg, icon: "none", duration: 2000, }); } ); }, scrollEven(e) {}, zhendong() { _get.zhendong({ list_id: this.list_id, }, function(res) {}, function(res) { uni.showToast({ title: res.msg, duration: 2000, icon: "none", }); } ); }, group_info() { uni.navigateTo({ url: "./message/more?list_id=" + this.list_id + "&type=" + this.msgList.type, }); }, toUserDetail(item) { if (this.msgList.type == 1 && this.msgList.is_action == 0) { uni.showToast({ title: "没有权限查看", icon: "none", duration: 1000, }); return; } uni.navigateTo({ url: "../details/index?user_id=" + item.user_id + "&type=1&list_id=" + this.list_id + "&is_action=" + this.is_action, }); }, getServing() { //判断权限 if ( this.msgList.type == 1 && this.msgList.is_action == 0 && this.group_state && this.group_state.can_shangmai == 0 ) { uni.showToast({ title: "此群被设置为只有群主和管理员才能上麦", icon: "none", duration: 1000, }); return; } let _this = this; if (this.onLine) { //在房间里直开启 _this.showServing = true; console.log("onLine....."); this.$refs.serving.joinOnline(this.list_id); return true; } console.log("_this.servingState:", _this.servingState); if (_this.servingState == 1) { //下麦 _this.showServing = false; _this.$refs.serving.xiaMai(this.list_id); } else { //上麦 console.log("joinRoom...."); _this.showServing = true; this.$refs.serving.joinRoom(this.list_id); } }, setSeringState(detail) { console.log("this.servingState:", JSON.stringify(detail)); this.servingState = detail.state; }, }, watch: {}, onNavigationBarButtonTap(e) { uni.navigateTo({ url: "./message/more?list_id=" + this.list_id + "&type=" + this.msgList.type, }); }, }; </script> <style lang="scss"> @import "@/static/css/chat/style.scss"; .other { .left { position: relative; .u-logo { width: 90rpx !important; height: 90rpx !important; flex-shrink: 0; } .action { width: 160rpx; background: #fff; border-radius: 10rpx; box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.2); position: absolute; z-index: 10; top: 100rpx; left: 0; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 0 30rpx; .action-line { height: 2rpx; width: 100rpx; margin: 6rpx auto; background-color: #ddd; } .action-item { font-size: 24rpx; display: flex; align-items: center; height: 54rpx; } } } } .popup_friends { background-color: rgba(0, 0, 0, 0.3); height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; } .popup_friends-top { height: 200rpx; flex-shrink: 0; /* #ifdef H5 */ height: 500rpx; /* #endif */ } .text-gray { color: gray; } .address-name { display: flex; flex-direction: column; } .address-flex { display: flex; align-items: center; } .fun-icon { width: 100rpx; height: 100rpx; margin: 10rpx; } .more-layer { // height: 800rpx; } .send-card { width: 700rpx; height: 200rpx; display: flex; max-width: 70%; min-height: 25px; border-radius: 5px; font-size: 14px; background-color: #fff; flex-direction: column; color: #333; } .send-card-content { display: flex; justify-content: flex-start; align-items: center; padding: 20upx; height: 100%; border-bottom: 2px solid #e1e1e1; } .send-card-content text { margin-left: 20upx; } .send-card-content-text { display: flex; justify-content: center; flex-direction: column; height: 100%; margin-left: 20upx; } .video-but-view { padding: 20upx; border-radius: 10upx 10upx 0 0; .video-but { margin-bottom: 18upx; background: #817e7e; color: #fff; } } .box textarea { padding-left: 5px; } .list .list-box { width: 25%; display: flex; align-items: center; flex-direction: column; } .luckbtn { -webkit-transform: rotateY(360deg); animation: rotation 0.4s linear infinite; -moz-animation: rotation 0.4s linear infinite; -webkit-animation: rotation 0.4s linear infinite; -o-animation: rotation 0.4s linear infinite; } @-webkit-keyframes rotation { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); } } .bubble-bofang { position: absolute; right: 215upx; } .bubble-bofang-left { position: absolute; left: 215upx; } .showVedio { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 300; } .cloneBut { position: relative; text-align: right; font-size: 24px; color: red; margin-left: 10px; margin-top: 10px; height: 30px; width: 30px; } .cloneBut-img { position: absolute; width: 30px; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .gong-gao-content { position: fixed; /*height: 30px;*/ width: 100%; z-index: 2; /*padding: 10rpx 10rpx;*/ } .gong-gao-content-info { display: flex; align-items: center; background-color: #e0e0e0; height: 100%; } .gong-gao-content-info-icon { font-size: 20px; margin-right: 20rpx; margin-left: 20rpx; } .sys:nth-child(1) { margin-top: 50px; } .member-image-logo { display: flex; justify-content: flex-start; align-items: center; padding-top: 10px; box-shadow: inset 0px 15px 15px -23px #000; background-color: #ffffff; overflow-x: auto; } .member-content { white-space: nowrap; text-align: center; } .img-logo { width: 40px !important; height: 40px !important; border-radius: 10px; display: inline-block; padding: 0 5px; } .jiazai { margin-right: 20px; } .jiazai image { width: 40rpx; height: 40rpx; } </style>