|
|
@@ -1,42 +1,1076 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <image class="logo" src="/static/logo.png"></image>
|
|
|
- <view>
|
|
|
- <text class="title">{{title}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+
|
|
|
+ <div class="chatTable" @click="chatTable">
|
|
|
+
|
|
|
+ <div class="mine chatTableDiv" v-for="(item, index) in chatRecord" :key="index" :class="item.sendId == 1 ? 'rights' : 'lefts'">
|
|
|
+
|
|
|
+ <!--头像(other)-->
|
|
|
+ <img v-if="item.sendId == 2" class="meAvatUrl" src="/static/images/avart2.jpg">
|
|
|
+
|
|
|
+ <!--文本/表情聊天内容-->
|
|
|
+ <p class="chatTextContent" v-if="item.type == 0" :class="item.sendId == 1 ? 'me' : 'others'" v-html="item.content"></p>
|
|
|
+
|
|
|
+ <!--图片聊天内容-->
|
|
|
+ <image class="content" v-if="item.type == 1 && !chatRecord[chatRecord.length - 1].isUploadPercFlag" :src="item.content" @click="showBigPic(item.content)" mdoe="aspectFill"></image>
|
|
|
+
|
|
|
+ <!--上传图片/视频时的百分比模态框-->
|
|
|
+ <div class="breathDiv" v-if="picTempArr.length && picTempArr[0].isUploadPercFlag">
|
|
|
+ <div class="circularDiv"></div>
|
|
|
+ <div class="text" v-text="picTempArr[0].percentage">%</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--视频聊天内容-->
|
|
|
+ <img v-if="item.type == 2 && !item.isUploadPercFlag" class="videoPic" src="/static/images/user.png" @click="playVideo(item.content)">
|
|
|
+ <!-- <video :id="index" :src="item.content" @click="playVideo(index)"></video> -->
|
|
|
+
|
|
|
+ <!--表情聊天内容-->
|
|
|
+ <!-- <img class="emojiContent" v-else-if="item.type == 4" :src="item.content"> -->
|
|
|
+
|
|
|
+ <!--语音聊天内容-->
|
|
|
+ <div v-if="item.type == 3" class="audioPlay chatTableDiv" @click="playAudio(index)">
|
|
|
+ <img :src="item.isPlay === false ? '/static/images/voiceLeft.svg' : '/static/images/vioce.gif'">
|
|
|
+ <a class="audioTime">{{item.time}}"</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--头像(self)-->
|
|
|
+ <img v-if="item.sendId == 1" class="meAvatUrl" src="/static/images/avart.jpg">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <web-view v-if="ffff" src="https://mp.weixin.qq.com"></web-view> -->
|
|
|
+
|
|
|
+ <!--发送语音时拖动取消-->
|
|
|
+ <div class="cancelAudioBox chatTableDiv" v-if="cancelAudioBoxFlag">
|
|
|
+ <div class="cancelAudio chatTableDiv">
|
|
|
+ <p class="ppp" :class="clientMoveBottomFlag == false ? 'defaultBg' : 'cancelBg'"
|
|
|
+ v-text="clientMoveBottomFlag == false ? '正在录音' : '拖动到此处取消'"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="clear"></p>
|
|
|
+
|
|
|
+ <!-- <div class="other" v-for="(item, index) in chatRecord" :key="index" v-if="item.sendId == 2">
|
|
|
+ <img class="otherAvatUrl" src="/static/images/avart.jpg" alt="">
|
|
|
+ <p v-if="item.type == 0">{{item.content}}</p>
|
|
|
+ <img class="content" v-else-if="item.type == 1" :src="item.content" alt="">
|
|
|
+ <video v-else :src="item.content"></video>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--底部功能栏-->
|
|
|
+ <view class="bottomOperation">
|
|
|
+ <!--语音/文字 切换-->
|
|
|
+ <div class="audio" @click="changeVT">
|
|
|
+ <img :src="flag?'/static/images/vioces.svg':'/static/images/keyboard.svg'">
|
|
|
+ </div>
|
|
|
+ <!--聊天输入框-->
|
|
|
+ <div class="chatInput" v-if="flag">
|
|
|
+ <!-- <input type="text" v-model="inputContent"> -->
|
|
|
+ <textarea class="textContent" v-model.lazy="inputContent" auto-height = true maxlength = 500 adjust-position = true @input="handleInput" @blur="handleBlur" @focus="handleFocus"></textarea>
|
|
|
+ </div>
|
|
|
+ <!-- 按住说话 -->
|
|
|
+ <div class="text" v-else catchtouchmove = "true">
|
|
|
+ <button :class="changeBg ? 'speakBtn' : 'btnSpeak'" v-text="changeBg ? '按住说话' : '松开结束'" @touchstart = "handleTouchStart" @touchend = "handleTouchEnd" @tap = "handleTap" @touchmove = "handleTouchMove" @longpress = "handleLongPress"
|
|
|
+ ></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--表情小图标-->
|
|
|
+ <div class="expSvg">
|
|
|
+ <img @click="showEmoji" src="/static/images/expression.svg">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--发送按钮-->
|
|
|
+ <div class="sendBtn" v-if="sendBtnFlag">
|
|
|
+ <button type="button" @click="conn">发送</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--功能展示按钮 + -->
|
|
|
+ <div class="showOper" v-if="sendBtnFlag == false">
|
|
|
+ <img src="/static/images/add.svg" @click="showPopup">
|
|
|
+ </div>
|
|
|
+ <p class="clear"></p>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!--功能栏(发送图片、视频)-->
|
|
|
+ <van-popup class="options" :show="show"
|
|
|
+ position="bottom"
|
|
|
+ custom-style="height: 20%;"
|
|
|
+ @click="showPopup"
|
|
|
+ close-icon-position="top-right">
|
|
|
+ <van-row class="optionChoose">
|
|
|
+ <van-col span="10">
|
|
|
+ <img @click="chooseImg" src="/static/images/album.svg">
|
|
|
+ <!-- <span>图片</span> -->
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-row class="optionChoose">
|
|
|
+ <van-col span="10">
|
|
|
+ <img @click="chooseVideo()" src="/static/images/video.svg">
|
|
|
+ <!-- <span>视频</span> -->
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!--表情模态框-->
|
|
|
+ <van-popup :show="shows" position="bottom" class="emojiBox" @close="onClose">
|
|
|
+ <img class="emoji" v-for="(item, index) in emojiData" :key="item.id" :src="item.url" :alt="item.key" @click="emoji(item.key)">
|
|
|
+ <p class="clear"></p>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- <div class="emojiBox" v-if="emojiFlag" :class="emojiFlag ? 'showBox' : ''">
|
|
|
+ <img class="emoji" v-for="(item, index) in emojiData" :key="item.id" :src="item.url" :alt="item.key">
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!--显示大图/视频div遮罩-->
|
|
|
+ <div class="shwoBigPicBox" v-if="showBigPicVideoFlag">
|
|
|
+ <p @click="closeBigPicBox">×</p>
|
|
|
+ <img :src="bigPicUrl" v-if="!picOrVideoFlag">
|
|
|
+ <video :src="bigVideoUrl" v-if="picOrVideoFlag" autoplay = true></video>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- title: 'Hello'
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+let socketOpen = false
|
|
|
+let socketMsgQueue = []
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ inputContent: '', //聊天输入框内容
|
|
|
+ storageEmojiAndText: '', //存储聊天框内的表情和文字
|
|
|
+ changeBg: true, //控制按住说话按钮的背景颜色
|
|
|
+ audioTime: '', //录音时间
|
|
|
+ percentage: 0, //上传视频/图片的圆形百分比进度数据
|
|
|
+ percentageData: true, //控制上传图片/视频的百分比数据状态
|
|
|
+ uploadPercFlag: false, //控制上传图片/视频时的百分比div状态 false: 隐藏
|
|
|
+ sendBtnFlag: false, //监听输入框输入事件，有值则将 + 换成发送
|
|
|
+ flag: true, //控制聊天框与语音按钮的切换 true: 聊天框
|
|
|
+ active: false, //vant-weapp组件的模态框状态
|
|
|
+ show: false, //控制功能栏弹出层的状态 true: 显示
|
|
|
+ shows: false, //控制表情栏弹出层的状态 true: 显示
|
|
|
+ tapOrLongTouchFlag: true, //控制触摸后立即离开或者长按事件的状态 true: tap
|
|
|
+ upLoadVideoFlag: false, //控制发送视频的封面图片显示 false: 未上传成功，不显示图片
|
|
|
+ clientMoveBottomFlag: false, //控制按住说话时拖动取消div的背景颜色 true: 小于365,红色
|
|
|
+ cancelAudioBoxFlag: false, //控制按住说话时拖动取消div的状态 true: 显示
|
|
|
+ htmlContent: '', //富文本 将内容以富文本形式转出来
|
|
|
+ cursorPosition: 0, //失去焦点时获取当前光标位置
|
|
|
+ clientBottom: 0, //距底部距离 用于做新消息页面滚动
|
|
|
+ contentObj: {}, //遍历聊天内容后接收到的
|
|
|
+ recorderManager: '', //实例化录音API
|
|
|
+ audioContext: {}, //实例化音频播放
|
|
|
+ videoContent: {}, //实例化视频播放
|
|
|
+ audioIndex: '', //播放音频的下标
|
|
|
+ videoIndex: '', //播放视频的下标
|
|
|
+ showBigPicVideoFlag: false, //控制查看大图的div遮罩状态 false: 不显示
|
|
|
+ bigPicUrl: '', //查看大图的div里的img的src
|
|
|
+ bigVideoUrl: '', //放大播放视频div里的video的src
|
|
|
+ picOrVideoFlag: false, //控制放大显示的是图片还是视频 false: 图片
|
|
|
+ picTempArr: [], //上传图片时的临时数组
|
|
|
+ videoTempArr: [], //上传视频时的临时数组
|
|
|
+ picTempArrIndex: 0, //上传图片时临时数组里当前上传完成图片的下标
|
|
|
+ videoTempArrIndex: 0, //上传视频时临时数组里当前上传完成图片的下标
|
|
|
+ timeId: {}, //计时器空对象
|
|
|
+ ffff: false,
|
|
|
+ chatRecord: [
|
|
|
+ {sendId: 1, recId: 2, time: new Date().getTime() - 259200000, type: 0, content: 'aaa'},
|
|
|
+ {sendId: 2, recId: 1, time: new Date().getTime() - 259200000, type: 0, content: 'aaa'},
|
|
|
+ {sendId: 1, recId: 2, time: new Date().getTime() - 172800000, type: 1, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.PfYM9IOpTRnEf016ae07c32bc81968ac020bbc0cbc40.jpg', isPlay: false},
|
|
|
+ {sendId: 2, recId: 1, time: new Date().getTime() - 172800000, type: 1, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.PfYM9IOpTRnEf016ae07c32bc81968ac020bbc0cbc40.jpg', isPlay: false},
|
|
|
+ {sendId: 1, recId: 2, time: new Date().getTime() - 86400000, type: 2, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.czvrjoLNm7Lb582e093f070750769dd04145e8c020bd.mp4', isPlay: false},
|
|
|
+ {sendId: 2, recId: 1, time: new Date().getTime() - 86400000, type: 2, content: 'http://tmp/wxb2618bf5f12d1373.o6zAJs3syaLOOgzmR2SYaZuZzmZQ.czvrjoLNm7Lb582e093f070750769dd04145e8c020bd.mp4', isPlay: false}
|
|
|
+ ], //暂存聊天内容 sendId: 发送人ID，recId: 接收人ID，type: 0=>文本, 1=>图片, 2=>视频 , 3=>音频, 4=>表情
|
|
|
+ emojiData: [
|
|
|
+ {id: 0, key: '[发呆]', url: '/static/images/emoji/bl_1.png'},
|
|
|
+ {id: 1, key: '[微笑]', url: '/static/images/emoji/bl_2.png'},
|
|
|
+ {id: 2, key: '[呲牙]', url: '/static/images/emoji/bl_3.png'},
|
|
|
+ {id: 3, key: '[亮眼]', url: '/static/images/emoji/bl_4.png'},
|
|
|
+ {id: 4, key: '[惊愕]', url: '/static/images/emoji/bl_5.png'},
|
|
|
+ {id: 5, key: '[鄙视]', url: '/static/images/emoji/bl_6.png'},
|
|
|
+ {id: 6, key: '[色色]', url: '/static/images/emoji/bl_7.png'},
|
|
|
+ {id: 7, key: '[委屈]', url: '/static/images/emoji/bl_8.png'},
|
|
|
+ {id: 8, key: '[大哭]', url: '/static/images/emoji/bl_9.png'},
|
|
|
+ {id: 9, key: '[害羞]', url: '/static/images/emoji/bl_10.png'},
|
|
|
+ {id: 10, key: '[黑线]', url: '/static/images/emoji/bl_11.png'},
|
|
|
+ {id: 11, key: '[疑问]', url: '/static/images/emoji/bl_12.png'},
|
|
|
+ {id: 12, key: '[鬼脸]', url: '/static/images/emoji/bl_13.png'},
|
|
|
+ {id: 13, key: '[哭笑]', url: '/static/images/emoji/bl_14.png'},
|
|
|
+ {id: 14, key: '[单眼]', url: '/static/images/emoji/bl_15.png'}, //备注待确认
|
|
|
+ {id: 15, key: '[偷笑]', url: '/static/images/emoji/bl_16.png'},
|
|
|
+ {id: 16, key: '[大笑]', url: '/static/images/emoji/bl_17.png'},
|
|
|
+ {id: 17, key: '[黑头]', url: '/static/images/emoji/bl_18.png'}, //备注待确认
|
|
|
+ {id: 18, key: '[服了]', url: '/static/images/emoji/bl_19.png'}, //备注待确认
|
|
|
+ {id: 19, key: '[丑脸]', url: '/static/images/emoji/bl_20.png'}, //备注待确认
|
|
|
+ {id: 20, key: '[冷漠]', url: '/static/images/emoji/bl_21.png'}, //备注待确认
|
|
|
+ {id: 21, key: '[抠鼻]', url: '/static/images/emoji/bl_22.png'},
|
|
|
+ {id: 22, key: '[哈哈]', url: '/static/images/emoji/bl_23.png'}, //备注待确认
|
|
|
+ {id: 23, key: '[骂]', url: '/static/images/emoji/bl_24.png'},
|
|
|
+ {id: 24, key: '[捂脸]', url: '/static/images/emoji/bl_25.png'},
|
|
|
+ {id: 25, key: '[呆滞]', url: '/static/images/emoji/bl_26.png'}, //备注待确认
|
|
|
+ {id: 26, key: '[平静]', url: '/static/images/emoji/bl_27.png'}, //备注待确认
|
|
|
+ {id: 27, key: '[猥琐]', url: '/static/images/emoji/bl_28.png'},
|
|
|
+ {id: 28, key: '[吃瓜]', url: '/static/images/emoji/bl_29.png'},
|
|
|
+ {id: 29, key: '[加油]', url: '/static/images/emoji/bl_30.png'},
|
|
|
+ {id: 30, key: '[牛逼]', url: '/static/images/emoji/bl_31.png'}, //备注待确认
|
|
|
+ {id: 31, key: '[汗]', url: '/static/images/emoji/bl_32.png'},
|
|
|
+ {id: 32, key: '[流涕]', url: '/static/images/emoji/bl_33.png'},
|
|
|
+ {id: 33, key: '[出魂]', url: '/static/images/emoji/bl_34.png'},
|
|
|
+ {id: 34, key: '[哭]', url: '/static/images/emoji/bl_35.png'},
|
|
|
+ {id: 35, key: '[傲慢]', url: '/static/images/emoji/bl_36.png'},
|
|
|
+ {id: 36, key: '[苦脸]', url: '/static/images/emoji/bl_37.png'},
|
|
|
+ {id: 37, key: '[心慌]', url: '/static/images/emoji/bl_38.png'}, //备注待确认
|
|
|
+ {id: 38, key: '[口罩]', url: '/static/images/emoji/bl_39.png'},
|
|
|
+ {id: 39, key: '[呕吐]', url: '/static/images/emoji/bl_40.png'},
|
|
|
+ {id: 40, key: '[嘘]', url: '/static/images/emoji/bl_41.png'},
|
|
|
+ {id: 41, key: '[思考]', url: '/static/images/emoji/bl_42.png'}, //备注待确认
|
|
|
+ {id: 42, key: '[拜拜]', url: '/static/images/emoji/bl_43.png'},
|
|
|
+ {id: 43, key: '[白眼]', url: '/static/images/emoji/bl_44.png'},
|
|
|
+ {id: 44, key: '[哈欠]', url: '/static/images/emoji/bl_45.png'},
|
|
|
+ {id: 45, key: '[阴险]', url: '/static/images/emoji/bl_46.png'}, //备注待确认
|
|
|
+ {id: 46, key: '[奋斗]', url: '/static/images/emoji/bl_47.png'},
|
|
|
+ {id: 47, key: '[酷]', url: '/static/images/emoji/bl_48.png'},
|
|
|
+ {id: 48, key: '[撇嘴]', url: '/static/images/emoji/bl_49.png'},
|
|
|
+ {id: 49, key: '[难过]', url: '/static/images/emoji/bl_50.png'},
|
|
|
+ {id: 50, key: '[生气]', url: '/static/images/emoji/bl_51.png'}, //备注待确认
|
|
|
+ {id: 51, key: '[发怒]', url: '/static/images/emoji/bl_52.png'},
|
|
|
+ {id: 52, key: '[赞]', url: '/static/images/emoji/bl_53.png'},
|
|
|
+ {id: 53, key: '[强壮]', url: '/static/images/emoji/bl_54.png'},
|
|
|
+ {id: 54, key: '[合掌]', url: '/static/images/emoji/bl_55.png'},
|
|
|
+ {id: 55, key: '[抱拳]', url: '/static/images/emoji/bl_56.png'},
|
|
|
+ {id: 56, key: '[手指]', url: '/static/images/emoji/bl_57.png'},
|
|
|
+ {id: 57, key: '[拥抱]', url: '/static/images/emoji/bl_58.png'},
|
|
|
+ {id: 58, key: '[摊掌]', url: '/static/images/emoji/bl_59.png'},
|
|
|
+ {id: 59, key: '[下跪]', url: '/static/images/emoji/bl_60.png'},
|
|
|
+ {id: 60, key: '[爱心]', url: '/static/images/emoji/bl_61.png'}
|
|
|
+ ] //自定义表情内容
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad() {
|
|
|
+ //注册音频播放实例
|
|
|
+ this.audioContext = wx.createInnerAudioContext()
|
|
|
+
|
|
|
+ //webSocket初始设置
|
|
|
+ let socketOpen = false
|
|
|
+ let socketMsgQueue = []
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ //连接webSocket
|
|
|
+ wx.connectSocket({
|
|
|
+ url: 'ws://127.0.0.1:3002',
|
|
|
+ success(res){
|
|
|
+ console.log('res');
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ //打开webSocket服务
|
|
|
+ wx.onSocketOpen(function(res) {
|
|
|
+ console.log('open')
|
|
|
+ socketOpen = true
|
|
|
+ for (let i = 0; i < socketMsgQueue.length; i++){
|
|
|
+ sendSocketMessage(socketMsgQueue[i])
|
|
|
+ }
|
|
|
+ socketMsgQueue = []
|
|
|
+ })
|
|
|
+
|
|
|
+ //向服务端发送消息
|
|
|
+ function sendSocketMessage(msg) {
|
|
|
+ if (socketOpen) {
|
|
|
+ wx.sendSocketMessage({
|
|
|
+ data:msg
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ socketMsgQueue.push(msg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //接收服务端返回的消息
|
|
|
+ wx.onSocketMessage(function(res){
|
|
|
+ // console.log(res);
|
|
|
+ that.otherMsg = res.data;
|
|
|
+ let _time = new Date().getTime(),
|
|
|
+ _content = res.data,
|
|
|
+ _type = 0;
|
|
|
+ that.chatRecord.push({sendId: 2, recId: 1, time: _time, type: _type, content: _content});
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //发送按钮
|
|
|
+ conn() {
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ wx.sendSocketMessage({
|
|
|
+ data: that.inputContent
|
|
|
+ })
|
|
|
+
|
|
|
+ let reg = /\[([\u4e00-\u9fa5])*]/;
|
|
|
+ if(reg.test(that.inputContent)) {
|
|
|
+
|
|
|
+ let regText = that.inputContent.match(/\[([\u4e00-\u9fa5])*]/g);
|
|
|
+ regText.forEach(function(item, index) {
|
|
|
+ that.emojiData.forEach(function(val, keys) {
|
|
|
+ if(item === val.key) {
|
|
|
+ that.inputContent = that.inputContent.replace(item, `<img class="emojiImg" src="${val.url}">`);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ let _time = new Date().getTime(),
|
|
|
+ _content = that.inputContent,
|
|
|
+ _type = 0;
|
|
|
+ that.chatRecord.push({sendId: 1, recId: 2, time: _time, type: _type, content: _content});
|
|
|
+
|
|
|
+ that.inputContent = '';
|
|
|
+ that.sendBtnFlag = false;
|
|
|
+
|
|
|
+ let query = wx.createSelectorQuery()
|
|
|
+ query.select('.chatTable').boundingClientRect()
|
|
|
+ query.exec(function (res) {
|
|
|
+ wx.pageScrollTo({
|
|
|
+ scrollTop: res[0].bottom,
|
|
|
+ duration: 500
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }, 200)
|
|
|
+
|
|
|
+ this.cursorPosition = 0;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //语音/文字切换
|
|
|
+ changeVT() {
|
|
|
+ this.flag = !this.flag;
|
|
|
+ },
|
|
|
+
|
|
|
+ //语音功能触摸开始事件
|
|
|
+ handleTouchStart(e) {
|
|
|
+ this.recorderManager = wx.getRecorderManager()
|
|
|
+ this.changeBg = !this.changeBg;
|
|
|
+ this.cancelAudioBoxFlag = true;
|
|
|
+ this.clientMoveBottomFlag = false;
|
|
|
+ console.log('开始');
|
|
|
+ // console.log(e.touches[0].clientX, e.touches[0].clientY);
|
|
|
+ let options = {
|
|
|
+ duration: 10000,
|
|
|
+ format: 'aac'
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!this.tapOrLongTouchFlag) {
|
|
|
+ this.recorderManager.start(options)
|
|
|
+ this.recorderManager.onStart((res) => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('点击点击')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //语音功能触摸移动事件
|
|
|
+ handleTouchMove(e) {
|
|
|
+ if(e.clientY < 355) {
|
|
|
+ this.clientMoveBottomFlag = true
|
|
|
+ } else {
|
|
|
+ this.clientMoveBottomFlag = false
|
|
|
+ }
|
|
|
+ this.clientBottom = e.clientY
|
|
|
+ },
|
|
|
+
|
|
|
+ //语音功能触摸结束事件
|
|
|
+ handleTouchEnd(e) {
|
|
|
+ let that = this;
|
|
|
+ this.changeBg = !this.changeBg;
|
|
|
+ this.cancelAudioBoxFlag = false;
|
|
|
+ // this.endTime = e.timeStamp;
|
|
|
+ console.log('结束');
|
|
|
+ this.recorderManager.stop()
|
|
|
+ this.recorderManager.onStop((res) => {
|
|
|
+ //路径
|
|
|
+ console.log(this.clientBottom)
|
|
|
+
|
|
|
+ let _time = new Date().getTime(),
|
|
|
+ _content = res.tempFilePath,
|
|
|
+ _type = 3;
|
|
|
+
|
|
|
+ that.audioTime = parseInt((res.duration) / 1000);
|
|
|
+
|
|
|
+ if (res.duration < 1200) {
|
|
|
+ console.log('您的时间短');
|
|
|
+ } else if(this.clientBottom !== 0 && this.clientBottom < 355) {
|
|
|
+ console.log('已取消');
|
|
|
+ this.clientMoveBottomFlag = false;
|
|
|
+ } else {
|
|
|
+ that.chatRecord.push({sendId: 1, recId: 1, time: _time, type: _type, content: _content, time: that.audioTime, isPlay: false});
|
|
|
+ }
|
|
|
+ that.audioTime = ''
|
|
|
+ this.clientBottom = 0;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //语音功能快速点击判断事件（true: 用户快速点击了）
|
|
|
+ handleTap() {
|
|
|
+ this.tapOrLongTouchFlag = true;
|
|
|
+ console.log('触摸后立即离开');
|
|
|
+ },
|
|
|
+
|
|
|
+ //触摸后超过350ms后离开
|
|
|
+ handleLongPress() {
|
|
|
+ console.log('超过350ms了~');
|
|
|
+ this.tapOrLongTouchFlag = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //vant-weapp组件弹出层状态控制（底部功能栏 => + ）
|
|
|
+ showPopup() {
|
|
|
+ this.active = !this.active;
|
|
|
+ this.show = !this.show;
|
|
|
+ },
|
|
|
+
|
|
|
+ //发送图片
|
|
|
+ chooseImg() {
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ console.log('img');
|
|
|
+ wx.chooseImage({
|
|
|
+ count: 9,
|
|
|
+ sizeType: ['original', 'compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success (res) {
|
|
|
+
|
|
|
+ clearInterval(that.timeId);
|
|
|
+
|
|
|
+ let time = new Date().getTime(),
|
|
|
+ type = 1,
|
|
|
+ isUploadPercFlags = true;
|
|
|
+
|
|
|
+ res.tempFilePaths.forEach(item => {
|
|
|
+ that.picTempArr.push({sendId: 1, recId: 2, time: time, type: type, content: item, percentage: 0, isOverUpload: false, isUploadPercFlag: isUploadPercFlags});
|
|
|
+ console.log('临时数组: ', that.picTempArr);
|
|
|
+ });
|
|
|
+
|
|
|
+ let timer = 20;
|
|
|
+
|
|
|
+ that.asyncObj();
|
|
|
+ that.loopImplement(timer);
|
|
|
+
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log('上传图片失败!');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ asyncObj () {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.picTempArr[0].isOverUpload = true;
|
|
|
+ }, 5000);
|
|
|
+ },
|
|
|
+
|
|
|
+ loopImplement(time) {
|
|
|
+ this.timeId = setInterval(() => {
|
|
|
+ if (this.picTempArr[0].percentage < 99) {
|
|
|
+ this.picTempArr[0].percentage = this.picTempArr[0].percentage + 1;
|
|
|
+ }
|
|
|
+ if (!this.picTempArr[0].isOverUpload) {
|
|
|
+ this.picTempArr[0].isUploadPercFlag = true;
|
|
|
+ }
|
|
|
+ if (this.picTempArr.length && this.picTempArr[0].percentage === 100) {
|
|
|
+ this.chatRecord.push(this.picTempArr[0]);
|
|
|
+ console.log('22', this.chatRecord);
|
|
|
+ this.picTempArr.splice(0, 1);
|
|
|
+ clearInterval(this.timeId);
|
|
|
+ if (!this.picTempArr.length) return;
|
|
|
+ this.loopImplement(time);
|
|
|
+ this.asyncObj();
|
|
|
+ } else {
|
|
|
+ if (this.picTempArr[0].isOverUpload) {
|
|
|
+ this.picTempArr[0].percentage = 100;
|
|
|
+ this.picTempArr[0].isUploadPercFlag = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, time);
|
|
|
+ },
|
|
|
+
|
|
|
+ //发送视频
|
|
|
+ chooseVideo() {
|
|
|
+ let that = this
|
|
|
+ console.log('video')
|
|
|
+ wx.chooseVideo({
|
|
|
+ sourceType: ['album','camera'],
|
|
|
+ maxDuration: 60,
|
|
|
+ camera: 'back',
|
|
|
+ success(res) {
|
|
|
+ console.log(res)
|
|
|
+
|
|
|
+ var time = new Date().getTime(),
|
|
|
+ content = res.tempFilePath,
|
|
|
+ type = 2,
|
|
|
+ isUploadPercFlags = true;
|
|
|
+
|
|
|
+ wx.showLoading({
|
|
|
+ title: '上传中'
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(function () {
|
|
|
+ wx.hideLoading();
|
|
|
+ that.upLoadVideoFlag = true;
|
|
|
+ that.chatRecord.push({sendId: 1, recId: 2, time: time, type: type, content: content, isPlay: false, isUploadPercFlag: isUploadPercFlags});
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ let timer = 20;
|
|
|
+ let a = 0
|
|
|
+ setTimeout(() => {
|
|
|
+ a = 1
|
|
|
+ }, 5000);
|
|
|
+ let timeId = setInterval(function() {
|
|
|
+
|
|
|
+ if (that.percentage < 99) {
|
|
|
+ that.percentage = that.percentage + 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ let flag = true;
|
|
|
+
|
|
|
+ if (a === 1) {
|
|
|
+ that.percentage = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ if (that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag) {
|
|
|
+ flag = false;
|
|
|
+ that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag = false;
|
|
|
+ flag = true;
|
|
|
+ } else if(!that.chatRecord[that.chatRecord.length - 2].isUploadPercFlag && flag){
|
|
|
+ that.chatRecord[that.chatRecord.length - 1].isUploadPercFlag = false;
|
|
|
+ }
|
|
|
+ that.percentage = 0;
|
|
|
+ clearInterval(timeId);
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+ }, timer);
|
|
|
+
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log('上传视频失败!')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleFocus(e) {
|
|
|
+ // console.log(e)
|
|
|
+ },
|
|
|
+
|
|
|
+ //监听聊天输入框输入事件
|
|
|
+ handleInput(e) {
|
|
|
+ // console.log(e);
|
|
|
+ this.inputContent = e.mp.detail.value;
|
|
|
+ },
|
|
|
+
|
|
|
+ //监听失去焦点时的状态
|
|
|
+ handleBlur(e) {
|
|
|
+ this.inputContent = e.mp.detail.value;
|
|
|
+ // console.log('失去焦点啦~', e)
|
|
|
+ this.cursorPosition = e.mp.detail.cursor;
|
|
|
+ // console.log(e.mp.detail.cursor)
|
|
|
+ },
|
|
|
+
|
|
|
+ //音频播放
|
|
|
+ playAudio(index) {
|
|
|
+ let that = this
|
|
|
+ if ((this.audioIndex || this.audioIndex === 0) && this.audioIndex !== index) {
|
|
|
+ this.audioContext.stop()
|
|
|
+ this.chatRecord[this.audioIndex].isPlay = false
|
|
|
+ }
|
|
|
+ if(!this.chatRecord[index].isPlay) {
|
|
|
+ console.log(this.chatRecord[index].content)
|
|
|
+ this.audioIndex = index
|
|
|
+ this.audioContext.src = this.chatRecord[index].content
|
|
|
+ this.audioContext.play()
|
|
|
+ this.audioContext.onPlay((res) => {
|
|
|
+ console.log('播放开始')
|
|
|
+ })
|
|
|
+
|
|
|
+ this.audioContext.onEnded((res) => {
|
|
|
+ console.log('播放结束')
|
|
|
+ that.chatRecord[index].isPlay = false
|
|
|
+ })
|
|
|
+ this.chatRecord[index].isPlay = true
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.audioContext.stop()
|
|
|
+ this.audioContext.onStop((res) => {
|
|
|
+ console.log('播放停止')
|
|
|
+ that.chatRecord[index].isPlay = false
|
|
|
+ })
|
|
|
+ this.chatRecord[index].isPlay = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //视频播放
|
|
|
+ playVideo(url) {
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ this.bigVideoUrl = url;
|
|
|
+ console.log(url);
|
|
|
+ this.showBigPicVideoFlag = true;
|
|
|
+ if (url.substr((url.length-3), url.length) != 'mp4') {
|
|
|
+ this.picOrVideoFlag = false
|
|
|
+ }
|
|
|
+ this.picOrVideoFlag = true
|
|
|
+
|
|
|
+ //注册视频播放实例
|
|
|
+ this.videoContent = wx.createVideoContext('index');
|
|
|
+
|
|
|
+ // this.videoContent._videoId = index;
|
|
|
+
|
|
|
+ // if ((this.videoIndex || this.videoIndex === 0) && this.videoIndex !== index) {
|
|
|
+ // this.videoContent.stop()
|
|
|
+ // this.chatRecord[this.videoIndex].isPlay = false
|
|
|
+ // }
|
|
|
+
|
|
|
+ if(this.upLoadVideoFlag) {
|
|
|
+ //全屏
|
|
|
+ this.videoContent.requestFullScreen({direction: 0})
|
|
|
+
|
|
|
+ // if(!this.chatRecord[index].isPlay) {
|
|
|
+
|
|
|
+ // this.videoIndex = index;
|
|
|
+ // this.videoContent.src = this.chatRecord[index].content
|
|
|
+ this.videoContent.src = url
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ that.videoContent.play();
|
|
|
+ }, 1500)
|
|
|
+
|
|
|
+ // this.chatRecord[index].isPlay = true;
|
|
|
+ // } else {
|
|
|
+ this.videoContent.stop();
|
|
|
+ // this.chatRecord[index].isPlay = false;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //停止语音播放
|
|
|
+ stopAudio() {
|
|
|
+ this.audioContext.stop()
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击空白处关闭表情模态框
|
|
|
+ chatTable() {
|
|
|
+ this.emojiFlag = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //展示表情模态框
|
|
|
+ showEmoji() {
|
|
|
+ // console.log('emoji')
|
|
|
+ // this.emojiFlag = true;
|
|
|
+ this.active = !this.active;
|
|
|
+ this.shows = !this.shows;
|
|
|
+ },
|
|
|
+
|
|
|
+ //关闭底部功能栏模态框 => +
|
|
|
+ onClose() {
|
|
|
+ this.shows = !this.shows;
|
|
|
+ },
|
|
|
+
|
|
|
+ //发送表情
|
|
|
+ emoji(key) {
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ // if(this.inputContent === '') {
|
|
|
+ // this.inputContent = key + '&&&'
|
|
|
+ // } else if(this.inputContent !== '' && (this.inputContent.lastIndexOf('&&&') !== this.inputContent.length - 3 || this.inputContent.lastIndexOf('&&&') == -1)) {
|
|
|
+ // console.log(111)
|
|
|
+ // this.inputContent = this.inputContent + '&&&' + key + '&&&';
|
|
|
+ // } else if(this.inputContent !== '' && this.inputContent.lastIndexOf('&&&') === this.inputContent.length - 3){
|
|
|
+ // console.log(222)
|
|
|
+ // this.inputContent = this.inputContent + key + '&&&';
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.inputContent == '') {
|
|
|
+ this.inputContent = key;
|
|
|
+ } else if(this.cursorPosition !== this.inputContent.length){
|
|
|
+ let beforeText = this.inputContent.substr(0, this.cursorPosition),
|
|
|
+ afterText = this.inputContent.substr(this.cursorPosition);
|
|
|
+ this.inputContent = beforeText + key + afterText;
|
|
|
+ } else {
|
|
|
+ this.inputContent = this.inputContent + key;
|
|
|
+ }
|
|
|
+
|
|
|
+ // return this.inputContent
|
|
|
+
|
|
|
+ this.shows = false;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //展示放大图片/视频的div
|
|
|
+ showBigPic(url) {
|
|
|
+ // console.log(this.chatRecord[index].content)
|
|
|
+ this.showBigPicVideoFlag = true;
|
|
|
+ // this.bigPicUrl = this.chatRecord[index].content
|
|
|
+ this.bigPicUrl = url;
|
|
|
+ },
|
|
|
+
|
|
|
+ //关闭放大图片/视频的div
|
|
|
+ closeBigPicBox() {
|
|
|
+ this.showBigPicVideoFlag = false;
|
|
|
+ this.picOrVideoFlag = false;
|
|
|
+ this.bigPicUrl = '';
|
|
|
+ this.bigVideoUrl = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ inputContent: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ this.inputContent = newVal;
|
|
|
+ if(this.inputContent == '') {
|
|
|
+ this.sendBtnFlag = false
|
|
|
+ } else {
|
|
|
+ this.sendBtnFlag = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .content {
|
|
|
- text-align: center;
|
|
|
- height: 400upx;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- height: 200upx;
|
|
|
- width: 200upx;
|
|
|
- margin-top: 200upx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 36upx;
|
|
|
- color: #8f8f94;
|
|
|
- }
|
|
|
+<style lang="less">
|
|
|
+ @width: 56rpx;
|
|
|
+ @height: 56rpx;
|
|
|
+ @margin: 10rpx;
|
|
|
+ body {
|
|
|
+ background-color: #f8f8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*聊天面板（不含底部输入框及功能栏）*/
|
|
|
+ .chatTable {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 1010rpx;
|
|
|
+ padding: 15rpx;
|
|
|
+ margin-bottom: 70rpx;
|
|
|
+ /* border: 1px solid #ff0; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* overflow-x: hidden;
|
|
|
+ overflow-y: scroll; */
|
|
|
+ /* position: relative; */
|
|
|
+ .chatTableDiv {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ word-break: normal;
|
|
|
+ }
|
|
|
+ .chatTextContent {
|
|
|
+ margin: 0 15rpx 0 15rpx;
|
|
|
+ padding: 15rpx 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ max-width: 500rpx;
|
|
|
+ height: auto;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .emojiImg {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .meAvatUrl {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 72rpx;
|
|
|
+ }
|
|
|
+ .otherAvatUrl {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 72rpx;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ video {
|
|
|
+ max-width: 350rpx;
|
|
|
+ max-height: 150rpx;
|
|
|
+ }
|
|
|
+ .me {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ word-break: break-word;
|
|
|
+ background-color: #00cd66;
|
|
|
+ }
|
|
|
+ .others {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ word-break: break-word;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .lefts {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .rights {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .mine {
|
|
|
+ /* justify-content: flex-end; */
|
|
|
+ /* display: flex; */
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ video {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ .emojiContent {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ .videoPic {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ .breathDiv {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: rgba(0, 0, 0, .8);
|
|
|
+ position: relative;
|
|
|
+ .circularDiv {
|
|
|
+ display: absolute;
|
|
|
+ margin: 25rpx auto;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ border-radius: 75rpx;
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: 0 0 20rpx 20rpx #fff;
|
|
|
+
|
|
|
+ animation-name: breath; /*动画名称*/
|
|
|
+ animation-duration: 2s; /*执行时间*/
|
|
|
+ animation-timing-function: linear; /*匀速执行*/
|
|
|
+ animation-iteration-count: infinite; /*循环执行*/
|
|
|
+
|
|
|
+ @keyframes breath {
|
|
|
+ from { opacity: 0.1; } /* 动画开始时的不透明度 */
|
|
|
+ 50% { opacity: 0.5; } /* 动画50% 时的不透明度 */
|
|
|
+ to { opacity: 0.1; } /* 动画结束时的不透明度 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ line-height: 200rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .audioPlay {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: #00cd66;
|
|
|
+ img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .audioTime {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .audioLeft {
|
|
|
+ margin: 8rpx 5rpx 0 10rpx;
|
|
|
+ }
|
|
|
+ .audioRight {
|
|
|
+ margin: 8rpx 5rpx 0 109rpx;
|
|
|
+ }
|
|
|
+ .cancelAudioBox {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 93vh;
|
|
|
+ /* border: 1px solid #f00; */
|
|
|
+ background-color: rgba(220, 220, 220, .7);
|
|
|
+ .cancelAudio {
|
|
|
+ height: 300rpx;
|
|
|
+ margin: auto 0;
|
|
|
+ p {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ line-height: 200rpx;
|
|
|
+ margin: 73rpx auto;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .defaultBg {
|
|
|
+ background-color: rgba(105, 105, 105, .7);
|
|
|
+ }
|
|
|
+ .cancelBg {
|
|
|
+ background-color: rgba(243, 32, 32, 0.7);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shwoBigPicBox {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #000;
|
|
|
+ p {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 64rpx;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 450rpx;
|
|
|
+ margin: 400rpx auto;
|
|
|
+ }
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*清除浮动*/
|
|
|
+ .clear {
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*底部功能选项（所有）*/
|
|
|
+ .bottomOperation {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 70rpx;
|
|
|
+ max-height: 250rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ z-index: 99;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ .chatInput {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ .textContent {
|
|
|
+ width: 500rpx;
|
|
|
+ min-height: 60rpx;
|
|
|
+ max-height: 250rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 6rpx 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* border: 1px solid #f00; */
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .audio {
|
|
|
+ margin-left: 5rpx;
|
|
|
+ img {
|
|
|
+ margin-top: @margin;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ button {
|
|
|
+ margin: 10rpx 0 0 10rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .speakBtn {
|
|
|
+ /* background: linear-gradient(to bottom,#fff, #00cd66); */
|
|
|
+ background: #00cd66;
|
|
|
+ }
|
|
|
+ .btnSpeak {
|
|
|
+ background: #f8f8ff;
|
|
|
+ }
|
|
|
+ .expSvg {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ img {
|
|
|
+ margin-top: @margin;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .showOper {
|
|
|
+ margin-left: 15rpx;
|
|
|
+ img {
|
|
|
+ margin-top: @margin;
|
|
|
+ width: @width;
|
|
|
+ height: @height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sendBtn {
|
|
|
+ margin-left: 15rpx;
|
|
|
+ button {
|
|
|
+ padding: 0;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 90rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ background-color: #00cd66;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*底部 + 功能栏*/
|
|
|
+ .options {
|
|
|
+ /* display: flex;
|
|
|
+ justify-content: center; */
|
|
|
+ padding-left: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 5rpx 10rpx 10rpx 0;
|
|
|
+ }
|
|
|
+ .optionChoose {
|
|
|
+ /* flex: 1; */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*表情模态框*/
|
|
|
+ .emojiBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 210rpx;
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: -50vh;
|
|
|
+ /* white-space: normal; */
|
|
|
+ .emoji {
|
|
|
+ float: left;
|
|
|
+ margin: 10rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ /* .hiddenBox {
|
|
|
+ bottom: -50vh;
|
|
|
+ } */
|
|
|
+ /* .showBox {
|
|
|
+ bottom: 50vh;
|
|
|
+ transition-duration: 1s;
|
|
|
+ } */
|
|
|
+ }
|
|
|
</style>
|
