···
<template>
<view>
<view class="content" >
<header-nav type="message" bgColor="#ffffff" :title="msgBody.toname"></header-nav>
<view class="message_header">
<view>
<!-- <view class="message_header__item" @click="handleEvent('moblie')">
<view class="message_header__item__phone"></view>
<text class="message_header__item__text">换电话</text>
</view> -->
<view class="message_header__item" @click="makeCallUser()">
<view class="message_header__item__phone"></view>
<text class="message_header__item__text">拨打电话</text>
</view>
<!-- <view class="message_header__item" @click="handleEvent('card')">
<view class="message_header__item__card"></view>
<text class="message_header__item__text">发名片</text>
</view> -->
<view class="message_header__item" @click="handleEvent('invitation')">
<view class="message_header__item__interview"></view>
<text class="message_header__item__text">洽谈邀请</text>
</view>
<view class="message_header__item" @click="handleEvent('uninterested')">
<view class="message_header__item__nofeel"></view>
<text class="message_header__item__text">不感兴趣</text>
</view>
</view>
</view>
<!-- <image class="warn" v-if="isShowWarn" :src="`${imgUrl}/b_warn.png`" mode="" @click="closeWarn"></image> -->
<view class="scrollTop"></view>
<!-- <view class="msg-list"> -->
<scroll-view class="msg-list" :style="{height:scrollHeight+'px',top:scrollBottom+'px'}" :scroll-y="true" @scroll="hideDrawer" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50">
<!-- 加载历史数据waitingUI -->
<view class="msg-list-box">
<view class="loading" v-if="isLoading">
<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>
<!-- <dcp-goods-card class="sj-card-info"></dcp-goods-card> -->
<!-- <dcp-interview class="sj-card-info"></dcp-interview> -->
<view class="row" v-for="(row,index) in msgList" :key="row.msg.id" :id="'msg'+row.msg.id">
<!-- 系统消息 -->
<view v-if="row.msg.type=='line' ">
<view @click="gotoResume(row.msg.content.resume.uid,'message')">
<dcp-resume-card class="sj-card-info" :info="row.msg.content.resume"></dcp-resume-card>
</view>
</view>
<view v-if="row.msg.type=='card' && row.msg.userinfo.uid!=msgBody.uid">
<dcp-resume-card class="sj-card-info" :info="row.msg.content"></dcp-resume-card>
</view>
<!-- 电话卡片 -->
<view v-if="row.msg.type=='mobile' && row.msg.content.type == 'card' && row.msg.content.driver_mobile && row.msg.userinfo.uid==msgBody.uid">
<view class="card_area" style="margin: 0 auto;">
<view>
<view class="card_area__top">
<view class="card_area__top__icon"></view>
<text class="card_area__top__text">{{row.msg.content.driver_mobile}}</text>
</view>
<view class="card_area__bottom">
<!-- <view>发短信</view> -->
<view style="width: 100%;" @click="makePhoneCall(row.msg.content.driver_mobile)">打电话</view>
</view>
</view>
</view>
</view>
<block v-if="row.type=='system'" >
<view class="system">
<!-- 文字消息 -->
<view v-if="row.msg.type=='mobile' && row.msg.content.text && row.msg.userinfo.uid==msgBody.uid" class="text">
{{row.msg.content.text}}
</view>
<view v-if="row.msg.type=='mobile' && row.msg.content.status > 0 && row.msg.userinfo.uid==msgBody.uid" class="text">
{{row.msg.content.status == 1 ? '您已同意和对方交换电话号码' : '您已拒绝和对方交换电话号码'}}
</view>
<view v-if="row.msg.type=='mobile' && row.msg.content.status > 0 && row.msg.userinfo.uid!=msgBody.uid" class="text">
{{row.msg.content.status == 1 ? '对方已同意和您交换电话' : '对方已拒绝和您交换电话'}}
</view>
<!-- 洽谈邀请 -->
<view v-if="row.msg.type=='invitation' && row.msg.userinfo.uid==msgBody.uid" class="text">
您的洽谈邀请已经发送给对方，请耐心等待
</view>
<!-- 发送请求 -->
<!-- <view v-if="row.msg.type=='mobile' && row.msg.userinfo.uid!=msgBody.uid" class=" card_area">
<view>
<view class="card_area__top">
<view class="card_area__top__icon"></view>
<text class="card_area__top__text">我想和您交换电话号码，您是否同意</text>
</view>
<view class="card_area__bottom">
<view>拒绝</view>
<view>同意</view>
</view>
</view>
</view> -->
<!-- 电话卡片
<view v-if="row.msg.type=='mobileCard' && row.msg.userinfo.uid==msgBody.uid">
<view class="card_area">
<view>
<view class="card_area__top">
<view class="card_area__top__icon"></view>
<text class="card_area__top__text">{{row.msg.content.text}}</text>
</view>
<view class="card_area__bottom">
<view>发短信</view>
<view>打电话</view>
</view>
</view>
</view>
</view> -->
<view v-if="row.msg.type=='card' && row.msg.userinfo.uid!=msgBody.uid">
<dcp-resume-card class="sj-card-info" :info="row.msg.content"></dcp-resume-card>
</view>
<view v-if="row.msg.type=='card' && row.msg.userinfo.uid==msgBody.uid" class="text">
{{row.msg.content.text}}
</view>
<view v-if="row.msg.type=='invitation' && row.msg.userinfo.uid != msgBody.uid" class="text">
{{row.msg.content.status == 1 ? '对方已接受您的洽谈邀请' : '对方已拒绝您的洽谈邀请'}}
</view>
<!-- 领取红包消息 -->
<view v-if="row.msg.type=='redEnvelope'" class="red-envelope">
<image src="/static/img/red-envelope-chat.png"></image>
{{row.msg.content.text}}
</view>
</view>
</block>
<!-- 用户消息 -->
<block v-if="row.type=='user'">
<!-- 自己发出的消息 -->
<view class="my" v-if="row.msg.userinfo.uid==msgBody.uid">
<!-- 左-消息 -->
<view class="left">
<!-- 文字消息 -->
<view v-if="row.msg.type=='text'" class="bubble">
<rich-text :nodes="row.msg.content.text"></rich-text>
</view>
<!-- 定位 -->
<view v-if="row.msg.type=='location'" class=" card_area">
<view class="card_area__pos">
<view class="card_area__pos__model" @click="gotoMap(row.msg.content)"></view>
<view class="card_area__pos__title">
<view>{{row.msg.content.name}}</view>
<view>{{row.msg.content.address}}</view>
</view>
<view class="card_area__pos__map">
<image style="width: 410rpx;height: 300rpx;" :src="`https://restapi.amap.com/v3/staticmap?markers=mid,0xFF0000,A:${row.msg.content.longitude},${row.msg.content.latitude}&zoom=14&scale=2&size=205*150&key=661503be0d42eed6673de1bf0da14476`" mode="aspectFill"></image>
<!-- <map :latitude="row.msg.content.latitude" :longitude="row.msg.content.longitude" :markers="[{longitude:row.msg.content.longitude,latitude:row.msg.content.latitude}]"></map> -->
</view>
</view>
</view>
<!-- 语言消息 -->
<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''">
<view class="length">{{row.msg.content.length}}</view>
<view class="icon my-voice"></view>
</view>
<!-- 图片消息 -->
<view v-if="row.msg.type=='image'" class="bubble img" @tap="showPic(row.msg)">
<image :src="row.msg.content.url" :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image>
</view>
<!-- 红包 -->
<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row.msg,index)">
<image src="/static/img/red-envelope.png"></image>
<view class="tis">
<!-- 点击开红包 -->
</view>
<view class="blessing">
{{row.msg.content.blessing}}
</view>
</view>
</view>
<!-- 右-头像 -->
<view class="right">
<image :src="row.msg.userinfo.face"></image>
</view>
</view>
<!-- 别人发出的消息 -->
<view class="other" v-if="row.msg.userinfo.uid ==msgBody.touid">
<!-- 左-头像 -->
<view class="left">
<image @click="gotoResume(msgBody.touid.replace('driver_',''),'message')" :src="row.msg.userinfo.face"></image>
</view>
<!-- 右-用户名称-时间-消息 -->
<view class="right">
<!-- <view class="username">
<view class="name">{{row.msg.userinfo.username}}</view> <view class="time">{{row.msg.time}}</view>
</view> -->
<!-- 发送请求 -->
<view v-if="row.msg.type=='mobile' && row.msg.userinfo.uid!=msgBody.uid" class=" card_area">
<view>
<view class="card_area__top">
<view class="card_area__top__icon"></view>
<text class="card_area__top__text">我想和您交换电话号码，您是否同意</text>
</view>
<view class="card_area__bottom">
<view @click="handlePhone(2,row.msg.content.id)">拒绝</view>
<view @click="handlePhone(1,row.msg.content.id)">同意</view>
</view>
</view>
</view>
<!-- 文字消息 -->
<view v-if="row.msg.type=='text'" class="bubble">
<rich-text :nodes="row.msg.content.text"></rich-text>
</view>
<!-- 名片 -->
<!-- <view v-if="row.msg.type=='card'">
<dcp-resume-card class="sj-card-info" :info="row.msg.content"></dcp-resume-card>
</view> -->
<view v-if="row.msg.type=='location'" class=" card_area">
<view class="card_area__pos">
<view class="card_area__pos__model" @click="gotoMap(row.msg.content)"></view>
<view class="card_area__pos__title">
<view>{{row.msg.content.name}}</view>
<view>{{row.msg.content.address}}</view>
</view>
<view class="card_area__pos__map">
<image style="width: 410rpx;height: 300rpx;" :src="`https://restapi.amap.com/v3/staticmap?markers=mid,0xFF0000,A:${row.msg.content.longitude},${row.msg.content.latitude}&zoom=14&scale=2&size=205*150&key=661503be0d42eed6673de1bf0da14476`" mode="aspectFill"></image>
<!-- <map :latitude="row.msg.content.latitude" :longitude="row.msg.content.longitude" :markers="[{longitude:row.msg.content.longitude,latitude:row.msg.content.latitude}]"></map> -->
</view>
</view>
</view>
<!-- 语音消息 -->
<view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''">
<view class="icon other-voice"></view>
<view class="length">{{row.msg.content.length}}</view>
</view>
<!-- 图片消息 -->
<view v-if="row.msg.type=='image'" class="bubble img" @tap="showPic(row.msg)">
<image :src="row.msg.content.url" :style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image>
</view>
<!-- 红包 -->
<view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row.msg,index)">
<image src="/static/img/red-envelope.png"></image>
<view class="tis">
<!-- 点击开红包 -->
</view>
<view class="blessing">
{{row.msg.content.blessing}}
</view>
</view>
</view>
</view>
</block>
</view>
</view>
</scroll-view>
<!-- </view> -->
</view>
<!-- 抽屉栏 -->
<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
<!-- 表情 -->
<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
<swiper-item v-for="(page,pid) in emojiList" :key="pid">
<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
<!-- <image mode="widthFix" :src="`${imgUrl}/img/emoji/${em.url}`"></image> -->
<image mode="widthFix" :src="`${imgUrl}/emjoy/${em.url}`"></image>
</view>
</swiper-item>
</swiper>
<!-- 常用语 -->
<view class="cyy_box" :class="{hidden:hidecyy}">
<view >
<scroll-view class="cyy_box__list" :refresher-enabled="false" :scroll-y="true" >
<view class="scroll-view-item uni-bg-red" v-for="(item,index) of phrase" :key="index" @click="sendCyy(item.content)">
<view class="cyy_box__list__item">
<view>{{item.content}}</view>
<view v-if="item.is_default == 1">默认招呼语</view>
</view>
</view>
</scroll-view>
</view>
<view class="cyy_box__bottom">
<view class="cyy_box__bottom__item" @click="gotoCommonWords('add')">
<view class="cyy_box__bottom__item__add"></view>
<text class="cyy_box__bottom__item__text">添加</text>
</view>
<view class="cyy_box__bottom__item" @click="gotoCommonWords('guanli')">
<view class="cyy_box__bottom__item__guanli"></view>
<text class="cyy_box__bottom__item__text">管理</text>
</view>
</view>
</view>
<!-- 更多功能 相册-拍照-红包 -->
<view class="more-layer" :class="{hidden:hideMore}">
<view class="list">
<view class="box" @tap="camera">
<!-- <view class="icon paizhao"></view> -->
<view class="more_box">
<view class="more_box__xj"></view>
<text class="more_box__text">打开相机</text>
</view>
</view>
<view class="box" @tap="chooseImage">
<!-- <view class="icon tupian2"></view> -->
<view class="more_box">
<view class="more_box__tk"></view>
<text class="more_box__text">打开图库</text>
</view>
</view>
<!-- <view class="box" @tap="handRedEnvelopes">
<view class="icon yuyin"></view>
红包
</view> -->
<view class="box" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">
<!-- <view class="icon hongbao"></view> -->
<view class="more_box">
<view class="more_box__yuyin"></view>
<text class="more_box__text">语音</text>
</view>
</view>
<view class="box" @tap="handleSendPos">
<!-- <view class="icon hongbao"></view> -->
<view class="more_box">
<view class="more_box__pos"></view>
<text class="more_box__text">发送定位</text>
</view>
</view>
<view class="box" @tap="handleReport">
<!-- <view class="icon hongbao"></view> -->
<view class="more_box">
<view class="more_box__tous"></view>
<text class="more_box__text">举报投诉</text>
</view>
</view>
</view>
</view>
</view>
<!-- 底部输入栏 -->
<view class="input-box" :class="[popupLayerClass,fiexdKeyboard]" :style="{bottom:inputBottom+'px'}" @touchmove.stop.prevent="discard">
<!-- H5下不能录音，输入栏布局改动一下 -->
<!-- #ifndef H5 -->
<view class="voice">
<!-- <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view> -->
<view @tap="openCyyDrawer" class="cyy">常用语</view>
</view>
<!-- #endif -->
<!-- #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" class="uni-input" :cursor-spacing="20" :show-confirm-bar="false" :adjust-position="false" v-model="textMsg" @focus="textareaFocus" @blur="textareaBlur"/>
</view>
<view class="em" @tap="chooseEmoji">
<view class="icon biaoqingicon"></view>
</view>
</view>
</view>
<!-- #ifndef H5 -->
<view class="more" @tap="showMore">
<view class="icon addIcon"></view>
</view>
<!-- #endif -->
<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
<view class="btn">发送</view>
</view>
</view>
<!-- 录音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>
<!-- 红包弹窗 -->
<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="/static/img/im/face/face_1.jpg"></image>
</view>
<view class="from">来自{{redenvelopeData.from}}</view>
<view class="blessing">{{redenvelopeData.blessing}}</view>
<view class="money">{{redenvelopeData.money}}</view>
<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
查看领取详情 <view class="icon to"></view>
</view>
</view>
</view>
</view>
</view> </template>
<script>
import { mapActions } from 'vuex'
import socket from '@/socket/index.js'
import {emjoyList} from '@/utils/emjoyData.js'
export default {
data() {
return {
covers: [{
latitude: 22.945249899,
longitude: 113.88829245,
// iconPath: '/static/images/icons/dingwei.png'
}],
//文字消息
textMsg:'',
//消息列表
isHistoryLoading:false,
scrollAnimation:false,
scrollTop:0,
scrollToView:'',
msgList:[],
msgImgList:[],
myuid:0,
//录音相关参数
// #ifndef H5
//H5不能录音
RECORDER:uni.getRecorderManager(),
// #endif
isVoice:false,
voiceTis:'按住 说话',
recordTis:"手指上滑 取消发送",
recording:false,
willStop:false,
initPoint:{identifier:0,Y:0},
recordTimer:null,
recordLength:0,
//播放语音相关参数
AUDIO:uni.createInnerAudioContext(),
playMsgid:null,
VoiceTimer:null,
// 抽屉参数
popupLayerClass:'',
fiexdKeyboard:'',
// more参数
hideMore:true,
//表情定义
hideEmoji:true,
hidecyy:true,
// emojiList:[
// [{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
// [{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
// [{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
// [{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
// [{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
// ],
emojiList:emjoyList.emojiList,
//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
//红包相关参数
windowsState:'',
redenvelopeData:{
rid:null, //红包ID
from:null,
face:null,
blessing:null,
money:null
},
msgBody:{
uid:'',
uname:'',
touid:'',
toname:'',
},
params:{
uid:'',
touid:'',
page:1,
limit:20
},
touid:'',
isLoading:true,
phrase:[],
imgUrl:getApp().globalData.imgUrl,
role:uni.getStorageSync('userRole'),
scrollHeight:0,
scrollBottom:0,
lineId:'',
lineInfo:{},
interviewInfo:{},
isShowWarn:false,
inputBottom:''
};
},
onLoad(option) {
//语音自然播放结束
this.AUDIO.onEnded((res)=>{
this.playMsgid=null;
});
// #ifndef H5
//录音开始事件
this.RECORDER.onStart((e)=>{
this.recordBegin(e);
})
//录音结束事件
this.RECORDER.onStop((e)=>{
this.recordEnd(e);
})
// #endif
console.log(option)
const socketUserInfo = this.$getStorageSync('socketUserInfo')
let row = {
uid:socketUserInfo.uid,
uname:socketUserInfo.realname,
thumb:socketUserInfo.avatar == "" ? `${this.imgUrl}/bavator.png` :socketUserInfo.avatar,
touid: option.touid,
toname:option.toname,
toavatar:decodeURIComponent(option.avatar)
}
uni.setStorageSync('toatatar',decodeURIComponent(option.avatar))
this.touid = option.touid
if (option.lineId){
this.lineId = option.lineId
}
Object.assign(this.msgBody,row)
this.getMessage()
// this.checkUserStatus(option.touid)
this.onMessage()
},
onShow(){
this.userReadMsg()
this.scrollTop = 9999999;
//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
//
// uni.getStorage({
// key: 'redEnvelopeData',
// success: (res)=>{
// console.log(res.data);
// let nowDate = new Date();
// let lastid = this.msgList[this.msgList.length-1].msg.id;
// lastid++;
// let row = {type:"user",msg:{id:lastid,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
// this.screenMsg(row);
// uni.removeStorage({key: 'redEnvelopeData'});
// }
// });
uni.onKeyboardHeightChange(res => {
if (res.height>0){
this.inputBottom = res.height
}else{
this.inputBottom = 0
}
})
},
async mounted() {
this.scrollHeight = await this.initViewHeight({self:this,dom:['.scrollTop']})
const data = await this.getDomStyle({self:this,dom:['.scrollTop']})
const inputHeight = await this.getDomStyle({self:this,dom:['.input-box']})
this.scrollBottom = data.bottom
this.scrollHeight = this.scrollHeight - inputHeight.height
uni.$once('watchInterview',async data=>{
if (data.data.line_id && data.data.line_id != ''){
this.interviewInfo = data.data
await this.sendMsg({data:data.data},'invitation')
}
})
uni.$once('updateCYY',()=>{
this.getphrase()
})
},
onUnload() {
uni.$off(['onMessage'])
},
methods:{
...mapActions(['dcpChooseImage','dcpvoice','initViewHeight','getDomStyle']),
//判断对方 资料完善度
checkUserStatus(touid){
let userInfo = touid.split('_')
let uid = userInfo[1]
let role = userInfo[0]
let type = 0
if (role == 'company') type = 2
if (role == 'driver') type = 1
this.$http._get('/api/user/info-percents',{uid,type},false).then(res=>{
const { code,data } = res
if (code == 200){
if (type == 1){
if (data.driving_licence == 0 || data.xinshi_licence == 0 || data.percents<70 || data.status == 0 || data.status == 2){
this.isShowWarn = true
}
}
this.isShowWarn = true
}
})
},
gotoResume(uid,type){
uni.navigateTo({
url:`/Bpages/pages/index/resume?id=${uid}&type=${type}`
})
},
async closeWarn(){
// let warnHei = await this.getDomStyle({self:this,dom:['.warn']})
// this.scrollHeight = this.scrollHeight+Number(warnHei.height)
// this.scrollBottom = this.scrollBottom - Number(warnHei.height)
this.isShowWarn = false
},
userReadMsg(){
this.$http._post('/api/chat/message-clear-unread',{uid:this.msgBody.uid,touid:this.msgBody.touid},false).then(()=>{
const socketUserInfo = this.$getStorageSync('socketUserInfo')
if (socketUserInfo){
socket.send('pullUnreads',socketUserInfo)
}
})
},
// 头部点击事件
handleEvent(type){
let content = ''
type == 'moblie' && (content = '您确定要交换电话吗？')
type == 'invitation' && (content = '您确定要发邀请洽谈给对方吗？')
type == 'uninterested' && (content = '您确定要对该司机设置为不感兴趣吗？')
uni.showModal({
title: '提示',
content,
success: (res) => {
if (res.confirm) {
switch (type){
case 'moblie':
this.sendmoblie()
break;
case 'invitation':
this.invitation()
break;
case 'uninterested':
this.setUninterested()
break;
default:
break;
}
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
makePhoneCall(phone){
uni.makePhoneCall({
phoneNumber: phone
});
},
// 发送电话号码
async sendmoblie(){
let params = {
role:this.role,
type:1,
uid:this.touid.replace("driver_",'')
}
const result = await this.$http._post('/api/chat/request-create',params)
const { code,data } = result
if (code == 200){
if (data.status == 2){
const msg = {driver_mobile:data.mobile,type:'card'}
this.sendSelfMsg(msg,'mobile')
return false
}
const row = {text:'交换电话号码请求已发送',id:data.id,type:'system'}
this.sendMsg(row,'mobile')
}
},
sendSelfMsg(msg,type){
let msgs = {
type:'system',
msg:{
id:new Date().getTime(),
type:type,
userinfo:{
uid:this.msgBody.uid,
username:this.msgBody.uname,
face: this.msgBody.thumb,
},
content:msg,
},
}
this.screenMsg(msgs)
},
async handlePhone(status,id){
const result = await this.$http._post('/api/chat/request-edit',{role:this.role,id,status})
const {code,data} = result
if (code == 200){
if(status == 1){
await this.sendMsg({status},'mobile')
await this.sendMsg({company_mobile:data.company_mobile,driver_mobile:data.driver_mobile,type:'card'},'mobile')
}else{
await this.sendMsg({status},'mobile')
}
}
},
invitation(){
this.$http._get('/api/company/line-invite-list').then(res=>{
const { code,data } = res
if (code == 200){
if (data.length>0){
uni.navigateTo({
url:`/Bpages/pages/message/edInterview?touid=${this.msgBody.touid}&toname=${this.msgBody.toname}`
})
}else{
uni.showModal({
title: '提示',
content: '您还没发布过货源，是否立即前往发布？',
success: (res)=> {
if (res.confirm) {
uni.navigateTo({
url:'/Bpages/pages/index/release'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
})
},
// 设置不感兴趣
async setUninterested(){
let uid = this.touid.replace('driver_','')
const {code} = await this.$http._post('/api/chat/uninterested-create',{type:this.role,uid})
if (code == 200){
this.$showToast('设置成功','',()=>{
uni.navigateBack()
})
}
},
// 获取常用语
async getphrase(){
const {code,data} = await this.$http._get('/api/chat/phrase-list',{type:this.role},false)
if (code == 200){
this.phrase = data
if (this.msgList.length == 0){
await this.sendLineInfo()
let textMsg = data.filter(item=>item.is_default == 1)
if (textMsg.length == 0){
this.textMsg = data[0].content
}else{
this.textMsg = textMsg[0].content
}
this.sendText()
}
}
},
// 获取历史消息
getMessage(){
Object.assign(this.params,{uid:this.msgBody.uid,touid:this.msgBody.touid})
this.$http._get('/api/chat/message-list',this.params).then(res=>{
this.isLoading = false
const { code , data } = res
if (code == 200){
if (data.data.length>0){
this.getMsgList(data.data);
}
this.getphrase()
}
}).catch(err=>{
this.isLoading = false
})
},
sendLineInfo(){
return new Promise(async(resolve,reject) => {
const {code, data} = await this.$http._get('/api/company/line-detail',{id:this.lineId})
if (code == 200){
this.lineInfo = data
data.company_pic = data.pic
const resume = await this.getResume()
const row = {
line:data,
resume
}
await this.sendMsg(row,'line')
resolve()
}
})
},
getResume(){
return new Promise((resolve,reject)=>{
let uid = this.msgBody.touid.replace('driver_','')
this.$http._get('/api/user/look-driver-detail',{uid}).then( async res=>{
const {code,data} = res
resolve(data)
})
})
},
gotoCommonWords(type){
let url = '/pages/setup/common-words/common-words-add'
if (type == 'guanli') {
url = '/pages/setup/common-words/common-words-guanli'
}
uni.navigateTo({
url
})
},
handleReport(){
this.hideDrawer();
uni.navigateTo({
url:`/pages/setup/report/report?complain_uid=${this.touid}`
})
},
gotoMap({latitude,longitude}){
uni.openLocation({
latitude,
longitude
})
},
// 发送定位
handleSendPos(){
this.hideDrawer();
uni.chooseLocation({
success: (res) => {
this.sendMsg(res,'location')
}
});
},
// 接受消息(筛选处理)
screenMsg(msg){
//从长连接处转发给这个方法，进行筛选处理
if(msg.type=='system'){
// 系统消息
switch (msg.msg.type){
case 'text':
this.addSystemTextMsg(msg);
break;
case 'redEnvelope':
this.addSystemRedEnvelopeMsg(msg);
break;
case 'mobile':
this.addSystemTextMsg(msg);
break;
case 'card':
this.addSystemTextMsg(msg);
break;
case 'line':
this.addSystemTextMsg(msg);
break;
case 'invitation':
this.addSystemTextMsg(msg);
break;
}
}else if(msg.type=='user'){
// 用户消息
switch (msg.msg.type){
case 'text':
this.addTextMsg(msg);
break;
case 'voice':
this.addVoiceMsg(msg);
break;
case 'image':
this.addImgMsg(msg);
break;
case 'redEnvelope':
this.addRedEnvelopeMsg(msg);
break;
case 'location':
this.addLocation(msg);
break;
case 'mobile':
this.addSystemTextMsg(msg);
break;
}
console.log('用户消息');
//非自己的消息震动
if(msg.msg.userinfo.uid!=this.msgBody.uid){
console.log('振动');
uni.vibrateLong();
}
}
this.$nextTick(() => {
// 滚动到底
this.scrollToView = 'msg'+msg.msg.id
});
},
makeCallUser(){
let touid = this.msgBody.touid.replace('driver_','')
this.$http._post('/api/company/call-create',{uid:touid}).then(res=>{
const { code, data } = res
if (code == 200){
uni.showModal({
title: '提示',
content: `确定拨打虚拟电话:${data.mobile}?`,
success: (res) => {
if (res.confirm) {
uni.makePhoneCall({
phoneNumber: data.mobile
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}).catch(err=>{
const {code,message} = err
if ( code == 502 || code == 503 || code == 504 || code == 505){
this.errShowModel(code,message)
}
})
},
errShowModel(code,content){
let confirmText = '去完善'
// if(code == 505) confirmText = '去充值'
uni.showModal({
title: '提示',
content,
confirmText,
confirmColor:'#FE1212',
success: function (res) {
if (res.confirm) {
let url = '/Bpages/pages/home/autoUserInfo'
// if (code == 505) url = '/Cpages/pages/home/openMember'
uni.navigateTo({
url
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//触发滑动到顶部(加载历史信息记录)
loadHistory(e){
if(this.isHistoryLoading){
return ;
}
if (this.msgList.length<=0){
return ;
}
this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
this.scrollAnimation = false;//关闭滑动动画
this.isLoading = true
let Viewid = this.msgList[0].msg.id;//记住第一个信息ID
let page = this.params.page + 1
Object.assign(this.params,{page})
this.$http._get('/api/chat/message-list',this.params).then(res=>{
this.isLoading = false
const { code, data } = res
if (code == 200){
if (data.data.length > 0) {
let list = []
data.data.map(item => {
let cjson = item.cjson
if (item.type == 'text'){
cjson.text = this.replaceEmoji(cjson.text)
}
let type = 'user'
if (!cjson.id){
if (item.type == 'line' || item.type == 'mobile' || item.type == 'invitation' || item.type == 'card'){
type = 'system'
}
}
if (cjson.id && cjson.type){
if (item.type == 'mobile'){
type = 'system'
}
}
if (item.type == 'line'){
type = 'system'
}
let msg = {
type,
msg:{
id:item.id,
time:item.atime,
type:item.type,
userinfo:{
uid:item.uid,
username:item.uname,
face: this.msgBody.uid == item.uid ? this.msgBody.thumb : this.msgBody.toavatar,
},
content:cjson,
},
}
list.push(msg)
})
// 获取消息中的图片,并处理显示尺寸
for(let i=0;i<list.length;i++){
if(list[i].type=='user'&&list[i].msg.type=='image'){
list[i].msg.content = this.setPicSize(list[i].msg.content);
this.msgImgList.unshift(list[i].msg.content.url);
}
// list[i].msg.id = Math.floor(Math.random()*1000+1);
this.msgList.unshift(list[i]);
}
//这段代码很重要，不然每次加载历史数据都会跳到顶部
this.$nextTick(function() {
this.scrollToView = 'msg'+Viewid;//跳转上次的第一行信息位置
this.$nextTick(function() {
this.scrollAnimation = true;//恢复滚动动画
});
});
this.isHistoryLoading = false;
}else{
// this.$showToast('没有更多了')
}
}
}).catch(err=>{
this.isLoading = false
this.scrollAnimation = true;//恢复滚动动画
this.isHistoryLoading = false;
})
},
// 加载初始页面消息
getMsgList(Hlist){
let list = []
Hlist.map(item => {
let cjson = item.cjson
if (item.type == 'text'){
cjson.text = this.replaceEmoji(cjson.text)
}
let type = 'user'
if (!cjson.id){
if (item.type == 'line' || item.type == 'mobile' || item.type == 'invitation' || item.type == 'card'){
type = 'system'
}
}
if (cjson.id && cjson.type){
if (item.type == 'mobile'){
type = 'system'
}
}
if (item.type == 'line'){
type = 'system'
}
let msg = {
type,
msg:{
id:item.id,
time:item.atime,
type:item.type,
userinfo:{
uid:item.uid,
username:item.uname,
face: this.msgBody.uid == item.uid ? this.msgBody.thumb : this.msgBody.toavatar,
},
content:cjson,
},
}
list.push(msg)
})
// 消息列表
// let list = [
// {type:"system",msg:{id:0,type:"text",content:{text:"欢迎进入HM-chat聊天室"}}},
// {type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
// {type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
// {type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{url:"/static/voice/1.mp3",length:"00:06"}}},
// {type:"user",msg:{id:4,type:"voice",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
// {type:"user",msg:{id:5,type:'image',time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{url:"/static/img/p10.jpg",w:200,h:200}}},
// {type:"user",msg:{id:6,type:'image',time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3251877128,2349018740&fm=26&gp=0.jpg",w:1920,h:1080}}},
// {type:"system",msg:{id:7,type:"text",content:{text:"欢迎进入HM-chat聊天室"}}},
// {type:"system",msg:{id:9,type:"redEnvelope",content:{text:"售后客服008领取了你的红包"}}},
// {type:"user",msg:{id:10,type:"redEnvelope",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{blessing:"恭喜发财，大吉大利，万事如意",rid:0,isReceived:false}}},
// {type:"user",msg:{id:11,type:"redEnvelope",time:"12:56",userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:{blessing:"恭喜发财",rid:1,isReceived:false}}},
// {type:"user",msg:{id:1,type:"req",time:"12:56",userinfo:{uid:1,username:"售后客服",face:"/static/img/im/face/face_2.jpg"},content:{text:"ssss？"}}},
// {type:"user",msg:{id:1,type:"pos",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:{text:"ssss？"}}},
// ]
// 获取消息中的图片,并处理显示尺寸
for(let i=0;i<list.length;i++){
if(list[i].type=='user'&&list[i].msg.type=='image'){
list[i].msg.content = this.setPicSize(list[i].msg.content);
this.msgImgList.push(list[i].msg.content.url);
}
}
this.msgList = list;
this.msgList.reverse()
// 滚动到底部
this.$nextTick(() => {
//进入页面滚动到底部
// this.scrollTop = 99999999999;
this.scrollToView = 'msg'+this.msgList[this.msgList.length-1].msg.id
this.$nextTick(() => {
this.scrollAnimation = true;
});
});
},
//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
setPicSize(content){
// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
let maxH = uni.upx2px(350);//350是定义消息图片最大高度
if(content.w>maxW||content.h>maxH){
let scale = content.w/content.h;
content.w = scale>1?maxW:maxH*scale;
content.h = scale>1?maxW/scale:maxH;
}
return content;
},
//更多功能(点击+弹出)
showMore(){
this.isVoice = false;
this.hideEmoji = true;
this.hidecyy = true
if(this.hideMore){
this.hideMore = false;
this.openDrawer();
}else{
this.hideDrawer();
}
},
// 点击常用语
openCyyDrawer(){
this.hideEmoji = true;
this.hideMore = true
if(this.hidecyy){
this.hidecyy = false
// this.hideMore = true;
// this.hideEmoji = true;
this.openDrawer();
}else{
this.hideDrawer();
}
},
// 选择表情
chooseEmoji(){
this.hidecyy = true
this.hideMore = true;
if(this.hideEmoji){
this.hideEmoji = false;
this.openDrawer();
}else{
this.hideDrawer();
}
},
// 打开抽屉
openDrawer(){
this.popupLayerClass = 'showLayer';
},
// 隐藏抽屉
hideDrawer(){
this.popupLayerClass = '';
setTimeout(()=>{
this.hideMore = true;
this.hideEmoji = true;
this.hidecyy = true
},150);
},
// 选择图片发送
chooseImage(){
this.getImage('album');
},
//拍照发送
camera(){
this.getImage('camera');
},
//发红包
handRedEnvelopes(){
uni.navigateTo({
url:'HM-hand/HM-hand'
});
this.hideDrawer();
},
getImageInfo(res){
return new Promise((resolve,reject) =>{
uni.getImageInfo({
src: res.tempFilePaths,
success: (image)=>{
let msg = {url:res.data.url,w:image.width,h:image.height};
resolve(msg)
},
fail(err) {
console.log('err',err)
}
});
})
},
//选照片 or 拍照
async getImage(type){
this.hideDrawer();
const result = await this.dcpChooseImage({type:3,count:9,sourceType:type})
for(let i=0;i<result.length;i++){
let msg = {url:result[i].data.url};
let row = await this.getImageInfo(result[i])
await this.sendMsg(row,'image');
}
},
//添加表情
addEmoji(em){
this.textMsg+=em.alt;
},
//获取焦点，如果不是选表情ing,则关闭抽屉
textareaFocus(){
if(this.popupLayerClass=='showLayer' ){
this.hideDrawer();
this.fiexdKeyboard = 'fiexdKeyboard'
}
// this.hideMore = false;
// this.hideEmoji = false;
},
textareaBlur(){
this.fiexdKeyboard = ''
},
sendCyy(content){
this.textMsg = content
this.sendText()
},
// 发送文字消息
sendText(){
console.log('sendtext')
this.hideDrawer();//隐藏抽屉
if(!this.textMsg){
return;
}
// let content = this.replaceEmoji(this.textMsg);
let reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig
if (reg.test(this.textMsg)){
this.$showToast('内容包含非法字符，请重新输入')
return false
}
let content = this.textMsg;
let msg = {text:content}
this.sendMsg(msg,'text');
this.textMsg = '';//清空输入框
},
//替换表情符号为图片
replaceEmoji(str){
let isreplace = true
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){
isreplace = true
//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
// let onlinePath = `${this.imgUrl}/img/emoji/`
let onlinePath = `${emjoyList.emojiPath}`
// let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
let imgstr = '<img style="width:23px;height:23px;margin:0 2px;flex-shrink: 0;" src="'+onlinePath+EM.url+'">';
if (imgstr.length>0){
console.log("imgstr: " + imgstr);
return imgstr;
}
}else{
isreplace = false
}
}
}
if (!isreplace){
return item
}
});
return '<div >'+replacedStr+'</div>';
// return '<div style="display: flex;align-items: center;flex-wrap: wrap;justify-content: flex-start;">'+replacedStr+'</div>';
},
//
onMessage(){
return new Promise((resolve,reject) =>{
uni.$on("onMessage",data => {
if (data.uid == this.msgBody.uid) return false
this.userReadMsg()
let sendType = 'user'
if (data.type == 'mobile' && !data.cjson.id) sendType = 'system'
if (data.type == 'card' ) sendType = 'system'
if (data.type == 'line' ) sendType = 'system'
if (data.type == 'invitation' ) sendType = 'system'
if (data.cjson.line_id){
this.msgBody.line_id = data.cjson.line_id
}
if (data.cjson.driver_mobile){
const msg = {driver_mobile:data.cjson.driver_mobile,type:'card'}
this.sendSelfMsg(msg,'mobile')
}
let msg = {
type:sendType,
msg:{
id:data.id,
time:'',
type:data.type,
userinfo:{
uid:data.uid,
username:data.uname,
face:data.thumb,
},
content:data.cjson,
},
}
console.log('监听到一条消息',msg)
this.screenMsg(msg);
// this.onMessage()
resolve()
})
})
},
// 发送消息
sendMsg(cjson,type){
return new Promise(async (resolve,reject) => {
//实际应用中，此处应该提交长连接，模板仅做本地处理。
cjson.toname = this.msgBody.toname
cjson.toavatar = this.msgBody.toavatar
cjson.uname = this.msgBody.uname
cjson.thumb = this.msgBody.thumb
cjson.role = 2
cjson.line_id = this.lineId
Object.assign(this.msgBody,{cjson,type})
socket.send('sendMsg',this.msgBody)
// socket.send('setNowConversation', this.msgBody)
uni.$once("onMessage",data => {
let sendType = 'user'
if (type == 'mobile' && this.msgBody.uid == data.uid) sendType = 'system'
if (type == 'card' && this.msgBody.uid == data.uid) sendType = 'system'
if (type == 'line' && this.msgBody.uid == data.uid) sendType = 'system'
if (type == 'invitation' && this.msgBody.uid == data.uid) sendType = 'system'
let msg = {
type:sendType,
msg:{
id:data.id,
time:'',
type:type,
userinfo:{
uid:data.uid,
username:data.uname,
face:data.thumb,
},
content:data.cjson,
},
}
console.log('自己发送一条消息',msg)
this.screenMsg(msg);
resolve()
})
})
// var nowDate = new Date();
// let lastid = this.msgList[this.msgList.length-1].msg.id;
// lastid++;
// let msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:0,username:"大黑哥",face:"/static/img/face.jpg"},content:content}}
// // 发送消息
// this.screenMsg(msg);
// 定时器模拟对方回复,三秒
// setTimeout(()=>{
// lastid = this.msgList[this.msgList.length-1].msg.id;
// lastid++;
// msg = {type:'user',msg:{id:lastid,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userinfo:{uid:1,username:"售后客服008",face:"/static/img/im/face/face_2.jpg"},content:content}}
// // 本地模拟发送消息
// this.screenMsg(msg);
// },3000)
},
// 添加文字消息到列表
addTextMsg(msg){
msg.msg.content.text = this.replaceEmoji(msg.msg.content.text)
this.msgList.push(msg)
},
// 添加语音消息到列表
addVoiceMsg(msg){
this.msgList.push(msg);
},
// 添加图片消息到列表
addImgMsg(msg){
console.log('addImgMsg',msg)
msg.msg.content = this.setPicSize(msg.msg.content);
this.msgImgList.push(msg.msg.content.url);
this.msgList.push(msg);
},
addRedEnvelopeMsg(msg){
this.msgList.push(msg);
},
// 添加定位
addLocation(msg){
this.msgList.push(msg);
},
// 添加系统文字消息到列表
addSystemTextMsg(msg){
this.msgList.push(msg);
},
// 添加系统红包消息到列表
addSystemRedEnvelopeMsg(msg){
this.msgList.push(msg);
},
// 打开红包
openRedEnvelope(msg,index){
let rid = msg.content.rid;
uni.showLoading({
title:'加载中...'
});
console.log("index: " + index);
//模拟请求服务器效果
setTimeout(()=>{
//加载数据
if(rid==0){
this.redenvelopeData={
rid:0, //红包ID
from:"大黑哥",
face:"/static/img/im/face/face.jpg",
blessing:"恭喜发财，大吉大利",
money:"已领完"
}
}else{
this.redenvelopeData={
rid:1, //红包ID
from:"售后客服008",
face:"/static/img/im/face/face_2.jpg",
blessing:"恭喜发财",
money:"0.01"
}
if(!msg.content.isReceived){
// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
this.sendSystemMsg({text:"你领取了"+(msg.userinfo.uid==this.myuid?"自己":msg.userinfo.username)+"的红包"},'redEnvelope');
console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
this.msgList[index].msg.content.isReceived = true;
}
}
uni.hideLoading();
this.windowsState = 'show';
},200)
},
// 关闭红包弹窗
closeRedEnvelope(){
this.windowsState = 'hide';
setTimeout(()=>{
this.windowsState = '';
},200)
},
sendSystemMsg(content,type){
let lastid = this.msgList[this.msgList.length-1].msg.id;
lastid++;
let row = {type:"system",msg:{id:lastid,type:type,content:content}};
this.screenMsg(row)
},
//领取详情
toDetails(rid){
uni.navigateTo({
url:'HM-details/HM-details?rid='+rid
})
},
// 预览图片
showPic(msg){
console.log(msg)
uni.previewImage({
indicator:"none",
current:msg.content.url,
urls: this.msgImgList
});
},
// 播放语音
playVoice(msg){
this.playMsgid=msg.id;
this.AUDIO.src = msg.content.url;
this.$nextTick(function() {
this.AUDIO.play();
});
},
// 录音开始
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"});//录音开始,
},
//录音开始UI效果
recordBegin(e){
this.recording = true;
this.voiceTis='松开 结束';
this.recordLength = 0;
this.recordTimer = setInterval(()=>{
this.recordLength++;
},1000)
},
// 录音被打断
voiceCancel(){
this.recording = false;
this.voiceTis='按住 说话';
this.recordTis = '手指上滑 取消发送'
this.willStop = true;//不发送录音
this.RECORDER.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.RECORDER.stop();//录音结束
},
//录音结束(回调文件)
async recordEnd(e){
clearInterval(this.recordTimer);
if(!this.willStop){
console.log("e: ",e);
const file = await this.dcpvoice(e)
let msg = {
length:0,
url:file
}
let min = parseInt(this.recordLength/60);
let sec = this.recordLength%60;
min = min<10?'0'+min:min;
sec = sec<10?'0'+sec:sec;
msg.length = min+':'+sec;
this.sendMsg(msg,'voice');
}else{
console.log('取消发送录音');
}
this.willStop = false;
},
// 切换语音/文字输入
switchVoice(){
this.hideDrawer();
this.isVoice = this.isVoice?false:true;
},
discard(){
return;
}
}
} </script>
<style lang="scss">
@import "@/static/HM-chat/css/style.scss";
.warn{
z-index: 99;
width: 100%;
height: 120rpx;
position: absolute;
// top: 275rpx;
}
.msg-list-box{
margin: 20rpx 30rpx;
}
.sj-card-info{
width: 70%;
box-shadow: 0px 0px 10px 0px #f2f2f2;
// margin: 40rpx auto;
/deep/ .card_item{
width: 90% !important;
margin: 40rpx auto !important;
border-radius: 10rpx;
overflow: hidden;
}
}
.cyy_box{
background-color: #FFFFFF;
width: 100%;
height: 58vw;
// height: auto;
// overflow: hidden;
&__list{
background-color: #FFFFFF;
width: 100%;
height: 320rpx;
// overflow: auto;
&__item{
width: 100%;
padding: 20rpx 0;
text-indent: 40rpx;
margin: 0rpx auto;
border-bottom: 1px solid #f2f2f2;
color: #333333;
font-size: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
&__bottom{
display: flex;
justify-content: space-between;
align-items: center;
// height: 100%;
border-top: 1px solid #f2f2f2f2;
&__item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
margin-top: 20rpx;
// height: 200rpx;
// line-height: 200rpx;
&__add{
background-image: url(#{$dcp-imgUrl}/icons/tianjia.png);
background-repeat: no-repeat;
background-size: contain;
width:44rpx ;
height:44rpx ;
}
&__guanli{
background-image: url(#{$dcp-imgUrl}/icons/guanli.png);
background-repeat: no-repeat;
background-size: contain;
width:44rpx ;
height:44rpx ;
}
&__text{
color: #333333;
font-size: 28rpx;
margin-left: 20rpx;
}
}
}
}
.biaoqingicon{
background-image: url(#{$dcp-imgUrl}/icons/biaoqing.png);
background-repeat: no-repeat;
background-size: contain;
width: 54rpx;
height: 54rpx;
}
.addIcon{
background-image: url(#{$dcp-imgUrl}/icons/jia.png);
background-repeat: no-repeat;
background-size: contain;
width: 54rpx;
height: 54rpx;
}
.message_header{
background-color: #FFFFFF;
padding: 20rpx 0;
position: relative;
z-index: 99;
>view{
width: 80%;
margin: 10rpx auto;
display: flex;
justify-content: space-between;
align-items: center;
}
&__item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&__phone{
background-image: url(#{$dcp-imgUrl}/icons/dianhua.png);
background-size: cover;
height: 48rpx;
width: 46rpx;
}
&__card{
background-image: url(#{$dcp-imgUrl}/icons/mingpian.png);
background-size: cover;
height: 48rpx;
width: 45rpx;
}
&__interview{
background-image: url(#{$dcp-imgUrl}/icons/mianshi.png);
background-size: cover;
height: 50rpx;
width: 50rpx;
}
&__nofeel{
background-image: url(#{$dcp-imgUrl}/icons/buganxingqu.png);
background-size: cover;
height: 48rpx;
width: 44rpx;
}
&__text{
margin-top: 10rpx;
color: #555555;
font-size: 24rpx;
}
}
}
.card_area{
background-color: #FFFFFF !important;
width: 410rpx;
height: auto;
overflow: hidden;
border-radius: 10rpx;
box-shadow: 0px 0px 10px 0px #f2f2f2;
&__pos{
position: relative;
&__model{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9;
}
&__map{
width: 100% !important;
height: 300rpx !important;
/deep/ map{
width: 100% !important;
height: 100% !important;
position: absolute !important;
}
}
&__title{
padding: 20rpx 0;
padding-left: 10rpx;
>view:first-child{
font-size: 28rpx;
color: #000000;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-bottom: 10rpx;
}
>view:last-child{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 24rpx;
color: #c2c2c2;
}
}
}
&__top{
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: auto;
overflow: hidden;
width: 90%;
margin: 20rpx auto;
&__icon{
background-image: url(#{$dcp-imgUrl}/icons/dianhua.png);
background-repeat: no-repeat;
background-size: contain;
height: 68rpx;
width: 56rpx;
margin-right: 20rpx;
}
&__text{
color: #333333;
font-size: 28rpx;
}
}
&__bottom{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
overflow: hidden;
border-top: 1px solid #f2f2f2f2;
view{
font-size: 28rpx;
color: #333333;
width: 50%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
}
view:first-child{
border-right: 1px solid #f2f2f2;
}
}
}
.more_box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&__xj{
background-image: url(#{$dcp-imgUrl}/icons/xiangji.png);
background-repeat: no-repeat;
background-size: contain;
height: 54rpx;
width: 62rpx;
}
&__tk{
background-image: url(#{$dcp-imgUrl}/icons/tuku.png);
background-repeat: no-repeat;
background-size: contain;
height: 54rpx;
width: 62rpx;
}
&__yuyin{
background-image: url(#{$dcp-imgUrl}/icons/yuyin.png);
background-repeat: no-repeat;
background-size: contain;
height: 56rpx;
width: 44rpx;
}
&__pos{
background-image: url(#{$dcp-imgUrl}/icons/fasongdingwei.png);
background-repeat: no-repeat;
background-size: contain;
height: 54rpx;
width: 40rpx;
}
&__tous{
background-image:
0 个回复