1994 lines
70 KiB
Vue
1994 lines
70 KiB
Vue
<template>
|
||
<view>
|
||
<view class="content" @touchstart="hideDrawer">
|
||
<scroll-view
|
||
class="msg-list"
|
||
scroll-y="true"
|
||
:scroll-with-animation="scrollAnimation"
|
||
:scroll-top="scrollTop"
|
||
:scroll-into-view="scrollToView"
|
||
@scrolltoupper="loadHistory"
|
||
upper-threshold="50"
|
||
>
|
||
<!-- 加载历史数据waitingUI -->
|
||
<view class="loading" v-if="ispage">
|
||
<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>
|
||
|
||
<view
|
||
class="row"
|
||
v-for="(row, index) in msgList"
|
||
:key="index"
|
||
:id="'msg' + row.msg.id"
|
||
>
|
||
<!-- 系统消息 -->
|
||
<block v-if="row.type == 'system'">
|
||
<view class="system">
|
||
<!-- 文字消息 -->
|
||
<view v-if="row.msg.type == 'text'" class="text">
|
||
{{ row.msg.content.text }}
|
||
</view>
|
||
<!-- 领取红包消息 -->
|
||
<view v-if="row.msg.type == 'redEnvelope'" class="red-envelope">
|
||
<image
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/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 == myuid">
|
||
<!-- 左-消息 -->
|
||
<view class="left">
|
||
<!-- 文字消息 -->
|
||
<view v-if="row.msg.type == 'text'" class="bubble">
|
||
<u-parse
|
||
:content="row.msg.content.text + ''"
|
||
@navigate="navigate"
|
||
:imageProp="{ lazyLoad: true }"
|
||
class="white"
|
||
></u-parse>
|
||
</view>
|
||
<!-- 语言消息 -->
|
||
<view
|
||
v-if="row.msg.type == 'voice'"
|
||
class="bubble voice"
|
||
@tap="playVoice(row)"
|
||
:class="playMsgid == row.msg.id ? 'play' : ''"
|
||
>
|
||
<view class="length">{{
|
||
row.message_length
|
||
? row.message_length
|
||
: row.msg.content.length
|
||
}}</view>
|
||
<view class="icon my-voice"></view>
|
||
</view>
|
||
<!-- 图片消息 -->
|
||
<view
|
||
v-if="row.msg.type == 'img'"
|
||
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 == 'video'"
|
||
class="bubble video"
|
||
@tap="playVideo(row)"
|
||
:class="playMsgid == row.msg.id ? 'play' : ''"
|
||
>
|
||
<image
|
||
lazy-load
|
||
src="/static/images/play.png"
|
||
style="width: 100rpx; height: 100rpx"
|
||
></image>
|
||
</view>
|
||
<!-- 红包 -->
|
||
<view
|
||
v-if="row.msg.type == 'redEnvelope'"
|
||
class="bubble red-envelope"
|
||
@tap="openRedEnvelope(row.msg, index)"
|
||
>
|
||
<image
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/red-envelope.png"
|
||
></image>
|
||
<view class="tis">
|
||
<!-- 点击开红包 -->
|
||
</view>
|
||
<view class="blessing">
|
||
{{ row.msg.content.blessing }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品 -->
|
||
<view
|
||
v-if="row.msg.type == 'item'"
|
||
class="bubble red-envelope"
|
||
style="width: 100%; max-width: 100%"
|
||
>
|
||
<navigator
|
||
:url="
|
||
'/pages/product/detail' +
|
||
'?pid=' +
|
||
row.msg.content.item_id
|
||
"
|
||
class="m-product-item"
|
||
>
|
||
<view class="m-product-img product-list">
|
||
<image lazy-load :src="row.msg.content.product_image" />
|
||
</view>
|
||
<view
|
||
class="m-product-info1"
|
||
style="
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
<view class="m-product-name2">
|
||
<label style="color: #606060">{{
|
||
row.msg.content.product_item_name
|
||
}}</label>
|
||
</view>
|
||
<view class="m-product-price1">
|
||
<view class="money">
|
||
<block>
|
||
<label>{{ __("￥") }}</label
|
||
><label style="">{{
|
||
number_format(row.msg.content.item_unit_price, 2)
|
||
}}</label>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
<!-- 右-头像 -->
|
||
<view class="right">
|
||
<image :src="row.msg.userinfo.face"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 别人发出的消息 -->
|
||
<view class="other" v-if="row.msg.userinfo.uid != myuid">
|
||
<!-- 左-头像 -->
|
||
<view class="left">
|
||
<image :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 == 'text'" class="bubble">
|
||
<u-parse
|
||
:content="row.msg.content.text + ''"
|
||
@navigate="navigate"
|
||
:imageProp="{ lazyLoad: true }"
|
||
></u-parse> </view
|
||
><br />
|
||
<view
|
||
v-if="false && row.msg.type == 'text'"
|
||
@click="translate(row.msg.content.text, index)"
|
||
style="font-size: 24rpx; line-height: 60rpx; width: 100%"
|
||
>
|
||
{{ row.translate_txt ? row.translate_txt : __("翻译") }}
|
||
</view>
|
||
<!-- 语音消息 -->
|
||
<view
|
||
v-if="row.msg.type == 'voice'"
|
||
class="bubble voice"
|
||
@tap="playVoice(row)"
|
||
:class="playMsgid == row.msg.id ? 'play' : ''"
|
||
>
|
||
<view class="icon other-voice"></view>
|
||
<view class="length">{{
|
||
row.message_length
|
||
? row.message_length
|
||
: row.msg.content.length
|
||
}}</view>
|
||
</view>
|
||
<!-- 图片消息 -->
|
||
<view
|
||
v-if="row.msg.type == 'img'"
|
||
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 == 'video'"
|
||
class="bubble video"
|
||
@tap="playVideo(row)"
|
||
:class="playMsgid == row.msg.id ? 'play' : ''"
|
||
>
|
||
<image
|
||
lazy-load
|
||
src="/static/images/play.png"
|
||
style="width: 100rpx; height: 100rpx"
|
||
></image>
|
||
</view>
|
||
<!-- 红包 -->
|
||
<view
|
||
v-if="row.msg.type == 'redEnvelope'"
|
||
class="bubble red-envelope"
|
||
@tap="openRedEnvelope(row.msg, index)"
|
||
>
|
||
<image
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/red-envelope.png"
|
||
></image>
|
||
<view class="tis">
|
||
<!-- 点击开红包 -->
|
||
</view>
|
||
<view class="blessing">
|
||
{{ row.msg.content.blessing }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 抽屉栏 -->
|
||
<view
|
||
class="popup-layer"
|
||
:class="popupLayerClass"
|
||
@touchmove.stop.prevent="discard"
|
||
>
|
||
<!-- 表情 -->
|
||
<!-- <swiper class="emoji-swiper"
|
||
@animationfinish="moveend($event)"
|
||
:class="{hidden:hideEmoji}"
|
||
indicator-dots="true"
|
||
duration="150"
|
||
:current="dotsCurrent"
|
||
>
|
||
<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="'https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/emoji/'+em.url"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper> -->
|
||
<emotion @addEmoji="addEmoji" :class="{ hidden: hideEmoji }"></emotion>
|
||
<!-- 更多功能 相册-拍照-红包 -->
|
||
<view class="more-layer" :class="{ hidden: hideMore }">
|
||
<view class="list">
|
||
<view class="box" @tap="chooseImage">
|
||
<view class="icon tupian2"></view>
|
||
</view>
|
||
<view class="box" @tap="camera">
|
||
<view class="icon paizhao"></view>
|
||
</view>
|
||
|
||
<view class="box" @tap="handRedEnvelopes" v-if="false">
|
||
<view class="icon hongbao"></view>
|
||
</view>
|
||
|
||
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
||
<view class="box" @tap="chooseVideo">
|
||
<image
|
||
style="
|
||
border-radius: 10px;
|
||
width: 32px;
|
||
height: 32px;
|
||
background-color: #333;
|
||
"
|
||
src="/static/images/play.png"
|
||
></image>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<view class="box" @tap="weizhi" v-if="false">
|
||
<image
|
||
style="font-size: 16px; width: 32px; height: 32px"
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/weizhi.png"
|
||
></image>
|
||
</view>
|
||
<!-- <view class="box" @tap="handRedEnvelopes">
|
||
<image style="font-size:16px;width: 32px; height: 32px;"
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/红包.png"></image>
|
||
</view> -->
|
||
|
||
<view class="box" @tap="yuyinshuru" v-if="false">
|
||
<image
|
||
style="font-size: 16px; width: 32px; height: 32px"
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/yuyinshuru.png"
|
||
></image>
|
||
</view>
|
||
|
||
<view class="box" @tap="meShouchang" v-if="false">
|
||
<image
|
||
style="font-size: 16px; width: 32px; height: 32px"
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/me-shouchang.png"
|
||
></image>
|
||
</view>
|
||
|
||
<view class="box" @tap="userinfo" v-if="false">
|
||
<image
|
||
style="font-size: 16px; width: 32px; height: 32px"
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/userinfo.png"
|
||
></image>
|
||
</view>
|
||
|
||
<!-- <view class="box" @tap="handRedEnvelopes">
|
||
<image style="font-size:16px;width: 32px; height: 28px;" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/more/文件.png"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部输入栏 -->
|
||
<view
|
||
class="input-box"
|
||
:class="popupLayerClass"
|
||
@touchmove.stop.prevent="discard"
|
||
>
|
||
<!-- H5下不能录音，输入栏布局改动一下 -->
|
||
<!-- #ifndef H5 -->
|
||
<view class="voice">
|
||
<view
|
||
class="icon"
|
||
:class="isVoice ? 'jianpan' : 'yuyin'"
|
||
@tap="switchVoice"
|
||
></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"
|
||
v-model="textMsg"
|
||
@focus="textareaFocus"
|
||
cursor-spacing="20"
|
||
/>
|
||
</view>
|
||
<view class="em" @tap="chooseEmoji">
|
||
<view class="icon biaoqing"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef H5 -->
|
||
<view class="more" @tap="showMore">
|
||
<view class="icon add"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="send" :class="isVoice ? 'hidden' : ''" @tap="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="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/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 class="videoShow" v-if="isPlay">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<uni-nav-bar
|
||
title=""
|
||
backgroundColor="#f8f8f8"
|
||
@clickLeft="isPlay = false"
|
||
:default="false"
|
||
leftText="退出"
|
||
leftIcon=""
|
||
/>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="header"
|
||
><text @click="isPlay = false">{{ __("退出") }}</text></view
|
||
>
|
||
<!-- #endif -->
|
||
<video
|
||
:src="video"
|
||
ref="video"
|
||
object-fit="contain"
|
||
@ended="isPlay = false"
|
||
@pause="isPlay = false"
|
||
:autoplay="true"
|
||
></video>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import emojiData from "@/im/static/emoji/emojiData.js";
|
||
import emotion from "./emotion/index.vue";
|
||
import uParse from "@/components/u-parse/u-parse.vue";
|
||
|
||
import { mapState, mapMutations } from "vuex";
|
||
import $ from "../../helpers/util";
|
||
import Config from "../../config/config";
|
||
import apirequest from "../../helpers/apiconfig";
|
||
|
||
export default {
|
||
components: {
|
||
emotion,
|
||
uParse,
|
||
},
|
||
data() {
|
||
return {
|
||
options: {},
|
||
//文字消息
|
||
// dotsCurrent:1,
|
||
textMsg: "",
|
||
//消息列表
|
||
isHistoryLoading: false,
|
||
scrollAnimation: false,
|
||
scrollTop: 0,
|
||
scrollToView: "",
|
||
screenMsgId: [], //信息Id列表
|
||
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: "",
|
||
// more参数
|
||
hideMore: true,
|
||
//表情定义
|
||
hideEmoji: true,
|
||
emojiList: [{}],
|
||
emojiPath: "",
|
||
//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
|
||
// 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,
|
||
},
|
||
chattype: "user",
|
||
chat_to_puid: 0, ///当前对聊的人
|
||
user_other_row: {},
|
||
chattitle: "",
|
||
|
||
chatlog: [], ////我们从缓存读取
|
||
|
||
page: 1,
|
||
ispage: false,
|
||
flag: false,
|
||
video: "",
|
||
isPlay: false,
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["Config", "hasLogin", "userInfo", "plantformInfo", "getMsg"]),
|
||
},
|
||
watch: {
|
||
getMsg: function (val) {
|
||
let that = this;
|
||
let cacheid = 0;
|
||
console.log("获取到数据");
|
||
console.log(val);
|
||
|
||
var nowDate = new Date();
|
||
let lastid = val.message_id;
|
||
let tempmy = this.userInfo.im;
|
||
|
||
let msg_type = val.msg_type;
|
||
|
||
console.log("asdasd", this.user_other_row.user_avatar);
|
||
|
||
let msg = {
|
||
type: "user",
|
||
sendmethod: this.chattype,
|
||
avatar: val.avatar,
|
||
needload: false,
|
||
fromid: this.chat_to_puid,
|
||
toid: tempmy.puid,
|
||
msg: {
|
||
id: lastid,
|
||
type: msg_type,
|
||
userinfo: {
|
||
uid: this.chat_to_puid,
|
||
username: this.user_other_row.user_nickname,
|
||
face: this.user_other_row.user_avatar || val.avatar,
|
||
},
|
||
content: {
|
||
text: val.content,
|
||
},
|
||
},
|
||
};
|
||
|
||
// 用户消息
|
||
switch (msg_type) {
|
||
case "text":
|
||
msg.msg.content.text = val.content;
|
||
break;
|
||
case "voice":
|
||
msg.msg.content.url = val.content;
|
||
break;
|
||
case "img":
|
||
msg.msg.content.url = val.content;
|
||
break;
|
||
case "video":
|
||
msg.msg.content.url = val.content;
|
||
break;
|
||
case "redEnvelope":
|
||
msg.msg.content.blessing = val.content;
|
||
break;
|
||
case "rtc":
|
||
msg.msg.content.text = val.content;
|
||
break;
|
||
}
|
||
|
||
if (that.chattype == "user" && val.type == "friend") {
|
||
if (that.chat_to_puid == val.id) {
|
||
console.log("screenMsg");
|
||
console.log(msg);
|
||
that.screenMsg(msg);
|
||
|
||
//发起视频聊天
|
||
if (msg_type == "rtc") {
|
||
// #ifdef MP-WEIXIN
|
||
this.$.gotopage("/rtc/room/1v1wx?to_user_id=" + that.options.uid);
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
this.$.gotopage("/rtc/room/1v1?to_user_id=" + that.options.uid);
|
||
// #endif
|
||
}
|
||
}
|
||
cacheid = msg.fromid;
|
||
} else if (that.chattype == "group" && val.type == "group") {
|
||
if (that.chat_to_puid == val.toid) {
|
||
that.screenMsg(msg);
|
||
}
|
||
cacheid = msg.toid;
|
||
///群聊
|
||
} else {
|
||
///不让在当前页面显示内容
|
||
}
|
||
|
||
if (that.chat_to_puid == val.id) {
|
||
apirequest.setMsgRead(lastid, () => {});
|
||
//设为已读
|
||
}
|
||
|
||
this.$apiconfig.cacheMessage(val, val.sendmethod, cacheid, tempmy);
|
||
|
||
//新消息数归零
|
||
this.$store.commit("resetWeidu", {
|
||
type: this.chattype,
|
||
val: this.chat_to_puid,
|
||
});
|
||
},
|
||
},
|
||
onUnload() {
|
||
let that = this;
|
||
this.$store.commit("resetWeidu", {
|
||
type: this.chattype,
|
||
val: this.chat_to_puid,
|
||
});
|
||
this.$store.commit("setCurrentPuid", "");
|
||
|
||
if (!that.plantformInfo.config.chat_global) {
|
||
that.$Socket.nclose();
|
||
}
|
||
},
|
||
onHide() {
|
||
console.log("onHide");
|
||
},
|
||
async onLoad(options) {
|
||
let that = this;
|
||
|
||
await this.$onLaunched;
|
||
|
||
that.voiceTis = this.__("按住 说话");
|
||
that.recordTis = this.__("手指上滑 取消发送");
|
||
|
||
if (typeof options.uid == "undefined") {
|
||
that.$.navigateBack(1);
|
||
}
|
||
|
||
this.forceUserInfo(function (user) {
|
||
if (that.userInfo.im) {
|
||
that.getPlantformInfo(function (plantformInfo) {
|
||
if (!that.plantformInfo.config.chat_global) {
|
||
that.$Socket.connectserver(that.userInfo.im);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
this.setData({
|
||
options: options,
|
||
});
|
||
|
||
if (options.name) {
|
||
this.chattitle = options.name;
|
||
uni.setNavigationBarTitle({
|
||
title: options.name,
|
||
});
|
||
}
|
||
|
||
let params = {
|
||
user_other_id: options.uid,
|
||
is_group: options.type == 1 ? 1 : 0,
|
||
};
|
||
this.$.request({
|
||
url: this.Config.URL.user.msg_config,
|
||
data: params,
|
||
success: (data, status, msg, code) => {
|
||
console.info(data);
|
||
if (status == 200) {
|
||
if (!options.name) {
|
||
this.chattitle = data.user_other_info.user_nickname;
|
||
uni.setNavigationBarTitle({
|
||
title: data.user_other_info.user_nickname,
|
||
});
|
||
}
|
||
|
||
this.chat_to_puid = data.user_other_info.puid;
|
||
this.user_other_row = data.user_other_info;
|
||
|
||
this.chattype = options.type == 1 ? "group" : "user";
|
||
this.chattitle = options.title;
|
||
this.getMsgList();
|
||
///将未读条数归零
|
||
this.$store.commit("updateChaterAttr", {
|
||
type: this.chattype,
|
||
val: this.chat_to_puid,
|
||
attr: "weidu",
|
||
data: 0,
|
||
addinfo: {
|
||
weidu: 0,
|
||
lastmsg: "",
|
||
id: this.chat_to_puid,
|
||
avatar: this.user_other_row.user_avatar,
|
||
user_id: this.user_other_row.user_id,
|
||
username: this.user_other_row.user_nickname,
|
||
logtype: this.chattype,
|
||
},
|
||
});
|
||
|
||
this.$store.commit("resetWeidu", {
|
||
type: this.chattype,
|
||
val: this.chat_to_puid,
|
||
});
|
||
this.$store.commit("setCurrentPuid", this.chat_to_puid);
|
||
|
||
//设置用户消息全部为已读
|
||
//领取操作
|
||
let tmp_params = {
|
||
user_other_id: this.user_other_row.user_id,
|
||
};
|
||
this.$.request({
|
||
url: this.Config.URL.user.msg_set_read,
|
||
data: tmp_params,
|
||
loading: false,
|
||
success: function (tmp_data, tmp_status, tmp_msg, tmp_code) {
|
||
if (tmp_status == 200) {
|
||
}
|
||
},
|
||
});
|
||
|
||
//语音自然播放结束
|
||
this.AUDIO.onEnded((res) => {
|
||
this.playMsgid = null;
|
||
});
|
||
// #ifndef H5
|
||
//录音开始事件
|
||
this.RECORDER.onStart((e) => {
|
||
this.recordBegin(e);
|
||
});
|
||
//录音结束事件
|
||
this.RECORDER.onStop((e) => {
|
||
this.recordEnd(e);
|
||
});
|
||
|
||
// #endif
|
||
|
||
// this.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:"[礼物]"},]
|
||
// ]
|
||
let that = this;
|
||
|
||
this.emojiList = emojiData.imgArr[1].emojiList;
|
||
|
||
/*that.$Socket.listenlist[this.chattype+this.chat_to_puid]=true;
|
||
if(that.$Socket.listenlist[this.chattype+this.chat_to_puid]){
|
||
///如果已被监听
|
||
}else{
|
||
that.$Socket.sockettast.onMessage(function(res){
|
||
console.log("页面捕获了socket数据"+res.data)
|
||
let temdata= eval("("+res.data+")");
|
||
|
||
switch(temdata.type){
|
||
case 'getmessage':
|
||
let msg =temdata.message;
|
||
//{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}};
|
||
that.screenMsg(msg);
|
||
//that.cacheMessage(msg);
|
||
break;
|
||
}
|
||
})
|
||
}*/
|
||
|
||
//读取商品信息，直接发送出去
|
||
if (options.item_id) {
|
||
var params = {
|
||
item_id: options.item_id,
|
||
};
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.product.item,
|
||
data: params,
|
||
loading: false,
|
||
ajaxCache: {
|
||
timeout: this.Config.CACHE_EXPIRE,
|
||
},
|
||
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
data.item_row.item_unit_price;
|
||
data.item_row.product_item_name;
|
||
data.item_row.product_image;
|
||
data.item_row.item_id;
|
||
|
||
let imgstr =
|
||
'<img class="chatimg" src="' +
|
||
data.item_row.product_image +
|
||
'">';
|
||
let content =
|
||
'<div class="chat-bubble-box">' +
|
||
imgstr +
|
||
' <a href="/pages/product/detail?pid=' +
|
||
data.item_row.item_id +
|
||
'">' +
|
||
data.item_row.product_item_name +
|
||
that.__("￥") +
|
||
data.item_row.item_unit_price +
|
||
"</a></div>";
|
||
|
||
//content = content.replace(new RegExp( '<img ', "gm"), '<img style="max-width:100%;height:auto;display: flex;" ');
|
||
|
||
let msg = {
|
||
text: content,
|
||
item_id: data.item_row.item_id,
|
||
};
|
||
//that.sendMsg(msg, 'item');
|
||
that.sendMsg(msg, "text");
|
||
}
|
||
},
|
||
complete: function (res, status) {},
|
||
});
|
||
}
|
||
|
||
//读取订单信息，直接发送出去
|
||
if (options.text) {
|
||
let msg = {
|
||
text: options.text,
|
||
};
|
||
that.sendMsg(msg, "text");
|
||
}
|
||
} else {
|
||
uni.navigateBack({});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
onShow() {
|
||
this.scrollTop = 9999999;
|
||
let that = this;
|
||
this.myuid = this.userInfo.im.puid;
|
||
|
||
//this.getLeavemsg()
|
||
|
||
//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
|
||
//
|
||
/*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:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
|
||
this.screenMsg(row);
|
||
uni.removeStorage({key: 'redEnvelopeData'});
|
||
}
|
||
});*/
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations([
|
||
"login",
|
||
"logout",
|
||
"getPlantformInfo",
|
||
"forceUserInfo",
|
||
"getUserInfo",
|
||
]),
|
||
// moveend(e){
|
||
// console.log(e.detail)
|
||
// if(e.detail.current===4){
|
||
// this.dotsCurrent=Object.assign(this.dotsCurrent,1)
|
||
// }
|
||
// },
|
||
translate(txt, id) {
|
||
var that = this;
|
||
that.$.request({
|
||
url: this.Config.URL.translate,
|
||
data: {
|
||
txt: txt,
|
||
},
|
||
success: function (data, status, msg, code) {
|
||
if (200 == status) {
|
||
console.log(id);
|
||
that.msgList[id].translate_txt = data.text;
|
||
console.log(that.msgList);
|
||
} else {
|
||
that.Msg(msg);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
// 接受消息(筛选处理)
|
||
|
||
screenMsg(msg) {
|
||
console.info("screenMsg");
|
||
console.info(msg);
|
||
//从长连接处转发给这个方法，进行筛选处理
|
||
|
||
if (this.$.inArray(this.screenMsgId, msg.msg.id)) {
|
||
return;
|
||
} else {
|
||
this.screenMsgId.push(msg.msg.id);
|
||
}
|
||
|
||
if (msg.type == "system") {
|
||
// 系统消息
|
||
switch (msg.msg.type) {
|
||
case "text":
|
||
this.addSystemTextMsg(msg);
|
||
break;
|
||
case "redEnvelope":
|
||
this.addSystemRedEnvelopeMsg(msg);
|
||
break;
|
||
}
|
||
} else if (msg.type == "user" || msg.type == "friend") {
|
||
// 用户消息
|
||
switch (msg.msg.type) {
|
||
case "text":
|
||
this.addTextMsg(msg);
|
||
break;
|
||
case "voice":
|
||
this.addVoiceMsg(msg);
|
||
break;
|
||
case "img":
|
||
this.addImgMsg(msg);
|
||
break;
|
||
case "video":
|
||
this.addTextMsg(msg);
|
||
break;
|
||
case "redEnvelope":
|
||
this.addRedEnvelopeMsg(msg);
|
||
break;
|
||
}
|
||
// console.log('用户消息');
|
||
//非自己的消息震动
|
||
if (msg.msg.userinfo.uid != this.myuid) {
|
||
// console.log('振动');
|
||
uni.vibrateLong();
|
||
}
|
||
}
|
||
this.$nextTick(function () {
|
||
// 滚动到底
|
||
this.scrollToView = "msg" + msg.msg.id;
|
||
});
|
||
},
|
||
|
||
//触发滑动到顶部(加载历史信息记录)
|
||
loadHistory(e) {
|
||
if (this.isHistoryLoading) {
|
||
return;
|
||
}
|
||
|
||
this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
|
||
this.scrollAnimation = false; //关闭滑动动画
|
||
let Viewid = this.msgList[0].msg.id; //记住第一个信息ID
|
||
|
||
var that = this;
|
||
if (this.flag && this.ispage) {
|
||
that.setData({
|
||
flag: false,
|
||
}),
|
||
clearTimeout(t);
|
||
that.setData({
|
||
page: parseInt(that.page) + 1,
|
||
});
|
||
var t = setTimeout(() => {
|
||
that.getMsgList(() => {
|
||
//这段代码很重要，不然每次加载历史数据都会跳到顶部
|
||
this.$nextTick(function () {
|
||
this.scrollToView = "msg" + Viewid; //跳转上次的第一行信息位置
|
||
console.info("this.scrollToView ");
|
||
console.info(this.scrollToView);
|
||
this.$nextTick(function () {
|
||
this.scrollAnimation = true; //恢复滚动动画
|
||
});
|
||
});
|
||
|
||
this.isHistoryLoading = false;
|
||
});
|
||
}, 500);
|
||
} else {
|
||
this.isHistoryLoading = false;
|
||
}
|
||
|
||
return;
|
||
|
||
//本地模拟请求历史记录效果
|
||
this.$apiconfig
|
||
.getMessagelog_f({
|
||
data: {
|
||
mid: this.myuid,
|
||
toid: this.chat_to_puid,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log(res);
|
||
});
|
||
setTimeout(() => {
|
||
// 消息列表
|
||
/*this.$apiconfig.getMessagelog_f({data:[]}).then(res=>{
|
||
|
||
});*/
|
||
/*let list = [
|
||
{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
|
||
{type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
|
||
{type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/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:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
|
||
]*/
|
||
let list = [];
|
||
if (list.length > 0) {
|
||
// 获取消息中的图片,并处理显示尺寸
|
||
for (let i = 0; i < list.length; i++) {
|
||
if (list[i].type == "user" && list[i].msg.type == "img") {
|
||
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;
|
||
}, 1000);
|
||
},
|
||
///获取留言(如果是好友就从退出时间往前十条十条的加载，群得话只加载最近十条)
|
||
getLeavemsg() {
|
||
let tempmy = this.userInfo.im;
|
||
this.$apiconfig
|
||
.getrecentmsg_f({
|
||
data: {
|
||
mid: tempmy.user_id,
|
||
tid: this.chat_to_puid,
|
||
type: this.chattype,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log(res.data);
|
||
});
|
||
},
|
||
|
||
// 加载初始页面消息
|
||
getMsgList(callback) {
|
||
let that = this;
|
||
// 消息列表
|
||
//最好读取和某个人的聊天缓存，所以信息我们都存缓存
|
||
let list = [];
|
||
/* uni.getStorage({
|
||
key:'chatim',
|
||
complete(res) {
|
||
let tempmy=that.userInfo.data.mine;
|
||
if(res.data==''||typeof(res.data)=='undefined'){
|
||
}else{
|
||
if(typeof(res.data[tempmy.puid])=='undefined'||typeof(res.data[tempmy.puid]['chatlog'])=='undefined'){
|
||
console.log(1)
|
||
}else{
|
||
|
||
if(that.chattype=='group'){
|
||
if(typeof(res.data[tempmy.puid]['chatlog']['group'+that.chat_to_puid])=='undefined'){
|
||
|
||
}else{
|
||
list= res.data[tempmy.puid]['chatlog']['group'+that.chat_to_puid]
|
||
}
|
||
}else{
|
||
console.log(2)
|
||
if(typeof(res.data[tempmy.puid]['chatlog']['friend'+that.chat_to_puid])=='undefined'){
|
||
|
||
}else{
|
||
list= res.data[tempmy.puid]['chatlog']['friend'+that.chat_to_puid]
|
||
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
})*/
|
||
|
||
/* let list = [
|
||
{type:"system",msg:{id:0,type:"text",content:{text:"欢迎进入聊天室"}}},
|
||
{type:"user",msg:{id:1,type:"text",time:"12:56",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{text:"为什么温度会相差那么大？"}}},
|
||
{type:"user",msg:{id:2,type:"text",time:"12:57",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
|
||
{type:"user",msg:{id:3,type:"voice",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/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:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{url:"/static/voice/2.mp3",length:"00:06"}}},
|
||
{type:"user",msg:{id:5,type:"img",time:"13:05",userinfo:{uid:0,username:"大黑哥",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/face.jpg"},content:{url:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/p10.jpg",w:200,h:200}}},
|
||
{type:"user",msg:{id:6,type:"img",time:"12:59",userinfo:{uid:1,username:"售后客服008",face:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{url:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/q.jpg",w:1920,h:1080}}},
|
||
{type:"system",msg:{id:7,type:"text",content:{text:"欢迎进入聊天室"}}},
|
||
|
||
{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:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/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:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:{blessing:"恭喜发财",rid:1,isReceived:false}}},
|
||
]*/
|
||
let tempmy = this.userInfo.im;
|
||
console.info("tempmy");
|
||
console.info(tempmy);
|
||
|
||
var params = {
|
||
user_other_id: this.user_other_row.user_id,
|
||
data: {
|
||
mid: tempmy.puid,
|
||
tid: this.chat_to_puid,
|
||
type: this.chattype,
|
||
},
|
||
page: this.page,
|
||
};
|
||
this.$apiconfig.getrecentmsg_f(params, (data, status, msg, code) => {
|
||
console.info("getrecentmsg_f");
|
||
console.info(JSON.stringify(data));
|
||
console.info(status);
|
||
console.info(msg);
|
||
if (data.items.length > 0) {
|
||
let array = [];
|
||
list = data.items.forEach((item) => {
|
||
array.push(item);
|
||
});
|
||
|
||
list = array;
|
||
|
||
// 获取消息中的图片,并处理显示尺寸
|
||
if (list.length > 0) {
|
||
for (let i = 0; i < list.length; i++) {
|
||
if (list[i].type == "user" && list[i].msg.type == "img") {
|
||
list[i].msg.content = this.setPicSize(list[i].msg.content);
|
||
this.msgImgList.push(list[i].msg.content.url);
|
||
}
|
||
if (list[i].msg.type != "img") {
|
||
list[i].msg = this.$apiconfig.im_decode_msg(list[i].msg);
|
||
}
|
||
|
||
list[i].translate_txt = this.__("翻译");
|
||
list[i].msg.translate_txt = this.__("翻译");
|
||
}
|
||
}
|
||
this.msgList = list.concat(this.msgList);
|
||
|
||
if (data.page >= data.total) {
|
||
that.setData({
|
||
flag: false,
|
||
ispage: false,
|
||
});
|
||
} else {
|
||
that.setData({
|
||
flag: true,
|
||
ispage: true,
|
||
});
|
||
}
|
||
} else {
|
||
that.setData({
|
||
flag: false,
|
||
ispage: false,
|
||
});
|
||
}
|
||
|
||
console.info(data);
|
||
console.info("msgList", this.msgList);
|
||
|
||
if (callback) {
|
||
callback();
|
||
} else {
|
||
// 滚动到底部
|
||
this.$nextTick(function () {
|
||
//进入页面滚动到底部
|
||
this.scrollTop = 9999;
|
||
this.$nextTick(function () {
|
||
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;
|
||
if (this.hideMore) {
|
||
this.hideMore = false;
|
||
this.openDrawer();
|
||
} else {
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
// 打开抽屉
|
||
openDrawer() {
|
||
this.popupLayerClass = "showLayer";
|
||
},
|
||
// 隐藏抽屉
|
||
hideDrawer() {
|
||
this.popupLayerClass = "";
|
||
setTimeout(() => {
|
||
this.hideMore = true;
|
||
this.hideEmoji = true;
|
||
}, 150);
|
||
},
|
||
// 选择图片发送
|
||
chooseImage() {
|
||
this.getImage("album");
|
||
},
|
||
// 选择视频发送
|
||
chooseVideo() {
|
||
this.upLoadVideo("album");
|
||
},
|
||
upLoadVideo() {
|
||
var that = this;
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
sourceType: ["camera", "album"],
|
||
success: function (res) {
|
||
uni.showLoading({
|
||
title: "视频上传中..",
|
||
mask: true,
|
||
});
|
||
uni.uploadFile({
|
||
url: that.Config.URL.upload_file,
|
||
filePath: res.tempFilePath,
|
||
name: "upfile",
|
||
success: (uploadFileRes) => {
|
||
let msg = {
|
||
url: res.tempFilePath,
|
||
w: uploadFileRes.width,
|
||
h: uploadFileRes.height,
|
||
};
|
||
uni.hideLoading();
|
||
let tmpres = JSON.parse(uploadFileRes.data);
|
||
///图片上传到服务器，上传完成后发送信息
|
||
if (tmpres.status == 200) {
|
||
msg.url = tmpres.data.url;
|
||
that.sendMsg(msg, "video");
|
||
} else {
|
||
that.$.confirm(tmpres.msg || that.__("发生错误"));
|
||
}
|
||
},
|
||
/* success: (res) => {
|
||
|
||
that.send_content=JSON.parse(res.data).data.url+','+JSON.parse(res.data).data.cover
|
||
that.send(3)
|
||
} */
|
||
});
|
||
},
|
||
});
|
||
},
|
||
//拍照发送
|
||
camera() {
|
||
this.getImage("camera");
|
||
},
|
||
//发红包
|
||
handRedEnvelopes() {
|
||
uni.navigateTo({
|
||
url: "HM-hand/HM-hand",
|
||
});
|
||
this.hideDrawer();
|
||
},
|
||
|
||
//语音通话
|
||
yuyintonghua() {
|
||
//发送语音通知消息
|
||
let msg = {
|
||
text: this.__("发起语音通话"),
|
||
};
|
||
this.sendMsg(msg, "rtc");
|
||
|
||
// #ifdef MP-WEIXIN
|
||
this.$.gotopage("/rtc/room/1v1wx?to_user_id=" + this.options.uid);
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
this.$.gotopage("/rtc/room/1v1?to_user_id=" + this.options.uid);
|
||
// #endif
|
||
},
|
||
|
||
//选照片 or 拍照
|
||
getImage(type) {
|
||
let that = this;
|
||
this.hideDrawer();
|
||
that.$.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) => {
|
||
let msg = {
|
||
url: res.tempFilePaths[i],
|
||
w: image.width,
|
||
h: image.height,
|
||
};
|
||
|
||
that.$.uploadFile({
|
||
url: that.Config.URL.upload, //仅为示例，非真实的接口地址
|
||
filePath: res.tempFilePaths[i],
|
||
name: "upfile",
|
||
formData: {
|
||
user: "test",
|
||
},
|
||
success: (uploadFileRes) => {
|
||
let tmpres = JSON.parse(uploadFileRes.data);
|
||
///图片上传到服务器，上传完成后发送信息
|
||
|
||
if (tmpres.status == 200) {
|
||
msg.url = tmpres.data.url;
|
||
|
||
this.sendMsg(msg, "img");
|
||
} else {
|
||
that.$.confirm(tmpres.msg || that.__("发生错误"));
|
||
}
|
||
},
|
||
});
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
// 选择表情
|
||
chooseEmoji() {
|
||
this.hideMore = true;
|
||
if (this.hideEmoji) {
|
||
this.hideEmoji = false;
|
||
this.openDrawer();
|
||
} else {
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
//添加表情
|
||
addEmoji(em) {
|
||
//判断删除按钮
|
||
if (em.emojiItem.alt === "[删除]") {
|
||
// uni.showToast({
|
||
// title:"触发删除操作",
|
||
// icon:"none"
|
||
// })
|
||
var str;
|
||
var msglen = this.textMsg.length - 1;
|
||
let start = this.textMsg.lastIndexOf("[");
|
||
let end = this.textMsg.lastIndexOf("]");
|
||
let len = end - start;
|
||
if (end != -1 && end === msglen && len >= 2 && len <= 4) {
|
||
// 表情字符
|
||
str = this.textMsg.slice(0, start);
|
||
} else {
|
||
// 普通键盘输入汉字 或者字符
|
||
str = this.textMsg.slice(0, msglen);
|
||
}
|
||
|
||
this.textMsg = str;
|
||
|
||
return;
|
||
}
|
||
// console.log(em)
|
||
this.emojiList = emojiData.imgArr[em.groupIndex].emojiList;
|
||
this.emojiPath = emojiData.imgArr[em.groupIndex].emojiPath;
|
||
if (em.minEmoji === false) {
|
||
this.sendBigEmoji(em.emojiItem.url);
|
||
} else {
|
||
// this.textMsg+=em.alt;
|
||
this.textMsg += em.emojiItem.alt;
|
||
}
|
||
},
|
||
// 发送大表情
|
||
sendBigEmoji(url) {
|
||
this.hideDrawer(); //隐藏抽屉
|
||
if (!url) {
|
||
return;
|
||
}
|
||
let imgstr =
|
||
'<img style="width:48px;height:48px;" src="' +
|
||
this.emojiPath +
|
||
url +
|
||
'">';
|
||
let content =
|
||
'<div style="align-items: center;word-wrap:break-word;">' +
|
||
imgstr +
|
||
"</div>";
|
||
let msg = {
|
||
text: content,
|
||
};
|
||
this.sendMsg(msg, "text");
|
||
this.textMsg = ""; //清空输入框
|
||
},
|
||
//获取焦点，如果不是选表情ing,则关闭抽屉
|
||
textareaFocus() {
|
||
if (this.popupLayerClass == "showLayer" && this.hideMore == false) {
|
||
this.hideDrawer();
|
||
}
|
||
},
|
||
// 发送文字消息
|
||
sendText() {
|
||
/*uni.showToast({
|
||
title:'发送文本消息',
|
||
icon:"none"
|
||
})*/
|
||
this.hideDrawer(); //隐藏抽屉
|
||
if (!this.textMsg) {
|
||
return;
|
||
}
|
||
let content = this.replaceEmoji(this.textMsg);
|
||
let msg = {
|
||
text: content,
|
||
};
|
||
this.sendMsg(msg, "text");
|
||
this.textMsg = ""; //清空输入框
|
||
},
|
||
//替换表情符号为图片
|
||
replaceEmoji(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 onlinePath = 'https://s2.ax1x.com/2019/04/12/'
|
||
// let imgstr = '<image src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
|
||
|
||
let onlinePath = this.emojiPath;
|
||
let imgstr =
|
||
'<img style="width:24px;height:24px;" src="' +
|
||
onlinePath +
|
||
EM.url +
|
||
'">';
|
||
// console.log("imgstr: " + imgstr);
|
||
return imgstr;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
return replacedStr;
|
||
},
|
||
// 发送消息
|
||
sendMsg(content, type, needload = false) {
|
||
console.info("--------------");
|
||
console.info(content);
|
||
console.info(content.text);
|
||
console.info(type);
|
||
console.info(needload);
|
||
|
||
let message_id = 1001;
|
||
var mine = {
|
||
username: this.userInfo.user_nickname,
|
||
avatar: this.userInfo.user_avatar,
|
||
id: this.userInfo.im.puid,
|
||
user_id: this.userInfo.user_id,
|
||
content: content.text || content.url,
|
||
length: type == "voice" ? content.length : 0,
|
||
w: type == "img" ? content.w : 0,
|
||
h: type == "img" ? content.h : 0,
|
||
item_id: typeof content.item_id != "undefined" ? content.item_id : 0,
|
||
type: type,
|
||
mine: true,
|
||
};
|
||
|
||
var to = {
|
||
id: this.chat_to_puid,
|
||
friend_id: this.user_other_row.user_id,
|
||
user_id: this.user_other_row.user_id,
|
||
name: this.user_other_row.user_nickname,
|
||
avatar: this.user_other_row.user_avatar,
|
||
type: this.chattype,
|
||
};
|
||
|
||
let maxLength = 50;
|
||
if (mine.content.replace(/\s/g, "") !== "") {
|
||
if (mine.content.length > maxLength) {
|
||
//return layer.msg('内容最长不能超过' + maxLength + '个字符')
|
||
}
|
||
}
|
||
|
||
var chat_data = {
|
||
mine: mine,
|
||
to: to,
|
||
};
|
||
|
||
let params = {
|
||
user_other_id: this.user_other_row.user_id,
|
||
message_content: mine.content,
|
||
item_id: typeof content.item_id != "undefined" ? content.item_id : 0,
|
||
length: mine.length,
|
||
w: mine.w,
|
||
h: mine.h,
|
||
type: type,
|
||
};
|
||
|
||
this.$apiconfig.sendMessage_f(params, (data, status, res_msg, code) => {
|
||
chat_data.mine.message_id = data.message_other_id;
|
||
//chat_data.to.message_id = data.message_id;
|
||
|
||
this.$Socket.nsend(chat_data);
|
||
|
||
//实际应用中，此处应该提交长连接，模板仅做本地处理。
|
||
var nowDate = new Date();
|
||
let lastid = data.message_other_id;
|
||
let tempmy = this.userInfo.im;
|
||
///TOID现在是模拟的
|
||
let msg = {
|
||
type: "user",
|
||
sendmethod: this.chattype,
|
||
needload: needload,
|
||
fromid: tempmy.puid,
|
||
toid: this.chat_to_puid,
|
||
msg: {
|
||
id: lastid,
|
||
type: type,
|
||
userinfo: {
|
||
uid: tempmy.puid,
|
||
username: this.userInfo.user_nickname,
|
||
face: this.userInfo.user_avatar,
|
||
},
|
||
content: content,
|
||
},
|
||
};
|
||
// 发送消息
|
||
if (this.chattype == "group") {
|
||
} else {
|
||
this.screenMsg(msg); ///消息显示在自己聊天面板
|
||
msg.display = true;
|
||
this.$store.commit("updateChaterAttr", {
|
||
type: this.chattype,
|
||
val: this.chat_to_puid,
|
||
attr: "lastmsg",
|
||
data: content,
|
||
addinfo: {
|
||
weidu: 0,
|
||
lastmsg: content,
|
||
id: this.chat_to_puid,
|
||
avatar: this.user_other_row.user_avatar,
|
||
user_id: this.user_other_row.user_id,
|
||
username: this.user_other_row.user_nickname,
|
||
logtype: this.chattype,
|
||
},
|
||
});
|
||
|
||
this.$store.commit("resetWeidu", {
|
||
type: this.chattype,
|
||
val: this.chat_to_puid,
|
||
});
|
||
|
||
this.$apiconfig.cacheMessage(
|
||
msg,
|
||
this.chattype,
|
||
this.chat_to_puid,
|
||
tempmy
|
||
);
|
||
}
|
||
});
|
||
|
||
return;
|
||
|
||
////聊天记录存入缓存
|
||
//
|
||
this.$apiconfig
|
||
.sendMessage_f({
|
||
data: msg,
|
||
})
|
||
.then((res) => {
|
||
console.log(res);
|
||
});
|
||
|
||
// 定时器模拟对方回复,三秒
|
||
/*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:"https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face_2.jpg"},content:content}}
|
||
|
||
// 本地模拟发送消息
|
||
this.screenMsg(msg);
|
||
},3000)*/
|
||
},
|
||
|
||
// 添加文字消息到列表
|
||
addTextMsg(msg) {
|
||
console.info("addTextMsg");
|
||
console.info(msg);
|
||
this.msgList.push(msg);
|
||
},
|
||
// 添加语音消息到列表
|
||
addVoiceMsg(msg) {
|
||
this.msgList.push(msg);
|
||
},
|
||
// 添加图片消息到列表
|
||
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);
|
||
},
|
||
// 添加系统文字消息到列表
|
||
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: "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/img/im/face/face.jpg",
|
||
blessing: "恭喜发财，大吉大利",
|
||
money: "已领完",
|
||
};
|
||
} else {
|
||
this.redenvelopeData = {
|
||
rid: 1, //红包ID
|
||
from: "售后客服008",
|
||
face: "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/im/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) {
|
||
uni.previewImage({
|
||
indicator: "none",
|
||
current: msg.content.url,
|
||
urls: this.msgImgList,
|
||
});
|
||
},
|
||
getSplit(item, index) {
|
||
if (index == 1) {
|
||
return item.split(",")[index] + "?200*200.png";
|
||
} else {
|
||
return item.split(",")[index];
|
||
}
|
||
},
|
||
playVideo(row) {
|
||
console.log(row);
|
||
let item = "";
|
||
if (row.message_cat) {
|
||
item = row.message_content;
|
||
} else {
|
||
item = row.msg.content.url;
|
||
}
|
||
console.log(item);
|
||
|
||
this.video = item;
|
||
this.isPlay = true;
|
||
|
||
setTimeout(() => {
|
||
this.$refs.video.play();
|
||
}, 100);
|
||
},
|
||
// 播放语音
|
||
playVoice(row) {
|
||
this.playMsgid = row.msg.id;
|
||
if (row.message_length) {
|
||
this.AUDIO.src = row.message_content;
|
||
} else {
|
||
this.AUDIO.src = row.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;
|
||
console.log("voiceBegin", e);
|
||
let recorderManager = uni.getRecorderManager();
|
||
|
||
recorderManager.start({
|
||
format: "mp3",
|
||
}); //录音开始,
|
||
console.log("录音开始了");
|
||
},
|
||
//录音开始UI效果
|
||
recordBegin(e) {
|
||
this.recording = true;
|
||
this.voiceTis = this.__("松开 结束");
|
||
this.recordLength = 0;
|
||
this.recordTimer = setInterval(() => {
|
||
this.recordLength++;
|
||
}, 1000);
|
||
},
|
||
// 录音被打断
|
||
voiceCancel() {
|
||
this.recording = false;
|
||
this.voiceTis = this.__("按住 说话");
|
||
this.recordTis = this.__("手指上滑 取消发送");
|
||
this.willStop = true; //不发送录音
|
||
this.RECORDER.stop(); //录音结束
|
||
console.log("录音中断了");
|
||
},
|
||
// 录音中(判断是否触发上滑取消发送)
|
||
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 = this.__("松开手指 取消发送");
|
||
} else {
|
||
this.willStop = false;
|
||
this.recordTis = this.__("手指上滑 取消发送");
|
||
}
|
||
},
|
||
// 结束录音
|
||
voiceEnd(e) {
|
||
if (!this.recording) {
|
||
return;
|
||
}
|
||
this.recording = false;
|
||
this.voiceTis = this.__("按住 说话");
|
||
this.recordTis = this.__("手指上滑 取消发送");
|
||
this.RECORDER.stop(); //录音结束
|
||
console.log("录音结束了了");
|
||
},
|
||
//录音结束(回调文件)
|
||
recordEnd(e) {
|
||
clearInterval(this.recordTimer);
|
||
if (!this.willStop) {
|
||
console.log("e: " + JSON.stringify(e));
|
||
let tempFilePaths = e.tempFilePath;
|
||
let that = this;
|
||
let urlpaht = that.Config.URL.upload_file;
|
||
|
||
console.log("urlpaht", urlpaht);
|
||
|
||
this.$.uploadFile({
|
||
url: urlpaht, //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths,
|
||
header: {
|
||
merchcode: that.$apiconfig.merchcode,
|
||
},
|
||
name: "upfile",
|
||
formData: {
|
||
user: "test",
|
||
},
|
||
success: (uploadFileRes) => {
|
||
console.log("uploadFileRes", uploadFileRes);
|
||
let tmpres = JSON.parse(uploadFileRes.data);
|
||
|
||
let msg = {
|
||
length: 0,
|
||
url: tmpres.data.url,
|
||
};
|
||
|
||
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");
|
||
console.log("录音接口成功");
|
||
},
|
||
});
|
||
} else {
|
||
console.log("取消发送录音");
|
||
console.log("接口发送录音失败");
|
||
}
|
||
this.willStop = false;
|
||
},
|
||
// 切换语音/文字输入
|
||
switchVoice() {
|
||
this.hideDrawer();
|
||
this.isVoice = this.isVoice ? false : true;
|
||
},
|
||
discard() {
|
||
return;
|
||
},
|
||
preview(src, e) {
|
||
// do something
|
||
},
|
||
navigate(href, e) {
|
||
// do something
|
||
console.info(href);
|
||
console.info(e);
|
||
|
||
this.$.gopage(href);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
@import "@/static/HM-chat/css/style.scss";
|
||
@import url("@/components/u-parse/u-parse.css");
|
||
|
||
.m-product-info1 {
|
||
width: 400rpx;
|
||
}
|
||
|
||
.chat-bubble-box {
|
||
min-width: 300rpx !important;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.videoCont {
|
||
background-color: #f8f8f8 !important;
|
||
border-radius: 0 !important;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
position: relative;
|
||
|
||
.cover {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
|
||
.button {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.videoShow {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 500;
|
||
background-color: #fff;
|
||
|
||
.header {
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
video {
|
||
position: absolute;
|
||
/* #ifdef MP-WEIXIN */
|
||
top: 80rpx;
|
||
/* #endif */
|
||
/* #ifndef MP-WEIXIN */
|
||
top: calc(var(--status-bar-height) + 80rpx);
|
||
/* #endif */
|
||
bottom: 0;
|
||
width: 750rpx;
|
||
height: 90%;
|
||
}
|
||
}
|
||
</style> |