修改完善

shuishen

2021-10-11 b48a5f64fe196bee6f1c7eb0be1b78c9ebec0860

 pages/groupChat/chating.vue

@@ -1,19 +1,20 @@
<template>
   <view class="container">
		

      <!-- 头部 -->
      <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true"
         :title="recName" back-icon-color="#fff" :background="{ background: '#0BB9C8' }" title-color="#fff">
      <u-navbar style="position: relative;" :is-fixed="false" :border-bottom="true" :is-back="true" :title="recName"
         back-icon-color="#fff" :background="{ background: '#0BB9C8' }" title-color="#fff">

         <view slot='right'>
            <u-icon @click="chatMessageDetail" class="set-icon" name="more-dot-fill" color="#fff" size="28"></u-icon>
            <u-icon @click="chatMessageDetail" class="set-icon" name="more-dot-fill" color="#fff" size="28">
            </u-icon>
         </view>
      </u-navbar>



      <scroll-view id="chatingBox" :style="{ height: swiperHeight + 'px' }" scroll-y="true" class="chat" scroll-with-animation="isanimation" :scroll-into-view="scrollToView"
         @scrolltoupper="nextPage">
      <scroll-view id="chatingBox" :style="{ height: swiperHeight + 'px' }" scroll-y="true" class="chat"
         scroll-with-animation="isanimation" :scroll-into-view="scrollToView" @scrolltoupper="nextPage">
         <view class="chat-main" :style="{paddingBottom:inputh + 'px'}">
            <view class="loading" :class="{displaynone:isload}">
               <image src="@/static/images/chatroom/load.png" mode="" class="loading-img"
@@ -35,10 +36,12 @@
                  </view>
                  <!-- voice -->
                  <view class="message" v-if="item.messageType == 2">
                     <view class="msg-text voice" :style="{width:item.postMessage.time * 4 + 'px'}"
                        @tap="playVoice(item.postMessage.voice)">
                     <view class="msg-text voice" :style="{width:item.postMessage.time * 4 + 50 + 'px'}"
                        @tap="playVoice(item.postMessage)">

                        <image src="../../static/images/chatroom/sound.png" mode="" class="voice-img" />
                        {{ item.postMessage.time }} "
                        {{ item.postMessage.time }}"

                     </view>
                  </view>
                  <!-- location -->
@@ -63,9 +66,9 @@
                  </view>
                  <!-- voice -->
                  <view class="message" v-if="item.messageType == 2">
                     <view class="msg-text voice" :style="{width:item.postMessage.time * 4 + 'px'}"
                        @tap="playVoice(item.postMessage.voice)">
                        {{ item.postMessage.time }} "
                     <view class="msg-text voice" :style="{width:item.postMessage.time * 4 + 50 + 'px'}"
                        @tap="playVoice(item.postMessage)">
                        {{ item.postMessage.time }}"
                        <image src="@/static/images/chatroom/sound.png" mode="" class="voice-img" />
                     </view>
                  </view>
@@ -98,7 +101,7 @@
   import filter from '@/config/filter.js'
   import submit from '@/components/submit/submit.vue'
   import WxStorage from "../../static/lib/wxStorage.js"
   const innerAudioContext = uni.createInnerAudioContext()


   export default {
      data() {
@@ -122,7 +125,8 @@
            isanimation: true,
            begainloading: true,

            name: [] //视频 双方id
            name: [], //视频 双方id
            innerAudioContext: uni.createInnerAudioContext()
         };
      },
      components: {
@@ -132,7 +136,13 @@
         this.recipientId = option.chatID;
         this._getMsg(this.nowpage)
         // this.nextPage()
         var data = JSON.parse(option.data)
         var data = option.data

         if (this.isJSON(option.data) == true) {
            data = JSON.parse(option.data)
         }


         console.log(data, 55555555555555555555555)
         this.name = ['wo', option.chatID];
         // console.log(data)
@@ -141,13 +151,14 @@
         } else {
            this.callName = data.recipientName;
         }

      },
		

      onReady() {
         let that = this;
         uni.getSystemInfo({
            success(e) {
               console.log(e);
               // console.log(e);
               let {
                  windowWidth,
                  windowHeight,
@@ -157,22 +168,27 @@
               query
                  .select('#chatingBox')
                  .boundingClientRect(data => {
		

                     that.swiperHeight = (safeArea.bottom - data.top);
		

                  })
                  .exec();
            }
         });
      },
		

      methods: {
         chatMessageDetail() {

         },

         // 返回键
         backOne() {
            uni.navigateBack({
               delta: 1
            })
         },

         // 滚动顶部加载上一页
         nextPage() {
            // if(this.nowpage > 0 && this.begainloading) {
@@ -221,7 +237,8 @@
                  var resdata = res.data.data.user;
                  for (var i = 0; i < resdata.length; i++) {
                     if (resdata[i].avatar == null || resdata[i].avatar == "") {
                        resdata[i].avatar = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                        resdata[i].avatar =
                           "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191109%2F1d3d4d82715444c4b8284f65e3feed10.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632484198&t=1f4086a5894cbf83b311fa37c276405c";
                     }

                     if (resdata[i].id == that.senId) {
@@ -259,6 +276,11 @@
                        msg[i].message = '../../static/images/index/friend-list/' + msg[i].message
                        that.imgMsg.unshift(msg[i].message)
                     }

                     if (that.isJSON(msg[i].postMessage) == true) {
                        msg[i].postMessage = JSON.parse(msg[i].postMessage)
                     }

                     that.msgs.unshift(msg[i])
                  }

@@ -280,6 +302,25 @@
            })

         },

         isJSON(str) {

            if (typeof str == 'string') {
               try {
                  var obj = JSON.parse(str);
                  if (typeof obj == 'object' && obj) {
                     return true;
                  } else {
                     return false;
                  }

               } catch (e) {
                  return false;
               }
            }

         },

         // 预览图片
         previewImage(e) {

@@ -295,22 +336,33 @@
               longPressActions: {
                  itemList: ['发送给朋友', '保存图片', '收藏'],
                  success: function(data) {
                     console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                     // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                  },
                  fail: function(err) {
                     console.log(err.errMsg);
                     // console.log(err.errMsg);
                  }
               }
            });
         },
         // 音频播放
         playVoice(e) {
            console.log('ok')
            innerAudioContext.src = e
            console.log(e, 'ok')

            var innerAudioContext = this.innerAudioContext = uni.createInnerAudioContext()
            // innerAudioContext.autoplay = false
            innerAudioContext.src = e.voice
            innerAudioContext.play()

            setTimeout(() => {
               innerAudioContext.destroy()
            }, e.time * 1000)

         },
         // 接收输入内容
         inputs(e) {

            console.log(e, 999)

            var that = this;
            this.isanimation = true
            let len = this.msgs.length - 1
@@ -325,10 +377,19 @@
               senderId: that.senId,
               recipientId: that.recipientId,
               postMessage: e.message,
               messageType: 0,
               messageType: e.types,
               status: 0,
               postTime: nowTime,
            }

            var mesagess = null;

            if (e.message instanceof Object) {
               mesagess = JSON.stringify(e.message)
            } else {
               mesagess = e.message
            }


            uni.request({
               url: this.$store.state.piAPI + "/chat-records/insertSingleChat",
@@ -336,12 +397,14 @@
               data: {
                  senderId: that.senId,
                  recipientId: that.recipientId,
                  postMessage: e.message,
                  messageType: 0,
                  postMessage: mesagess,
                  messageType: e.types,
                  status: 0,
                  postTime: sentTime,
               },
               success: (res) => {

                  console.log(res, 89898)

               }
            });
@@ -389,7 +452,7 @@
               name: e.name,
               address: e.address,
               success: () => {
                  console.log('success')
                  // console.log('success')
               }
            })
         },
@@ -437,7 +500,7 @@
      height: auto;
      margin-right: 35rpx;
   }
	

   .chat {
      height: 100%;

@@ -492,7 +555,7 @@
               font-size: $uni-font-size-lg;
               color: $uni-text-color;
               line-height: 44rpx;
               padding: 18rpx 34rpx;
               padding: 18rpx 20rpx;
            }

            .msg-img {