zengh
2022-09-14 8ea19a6bb34daab1410f6186992a4c1e90299c92
pages/groupChat/chating.vue
@@ -9,11 +9,11 @@
         </view>
      </view>
      <view class="top-bar-center title">
         <text>水原希子kiko</text>
         <text>{{ recName }}</text>
      </view>
      <view class="top-bar-right search pice">
         <view class="group-img">
            <image src="@/static/images/index/friend-list/kiko.jpg"
            <image :src=recAvatar
                      mode=""/>
         </view>
      </view>
@@ -35,41 +35,41 @@
         </view>
         <view class="chat-ls" v-for="(item, index) in msgs"
                                         :key="index"
                                          :id="'msg' + item.tip">
            <view class="chat-time" v-if="item.time != ''">{{ item.time | Msgdate }}</view>
                                          :id="'msg' + item.id">
            <view class="chat-time" v-if="item.postTime != ''">{{ item.postTime | Msgdate }}</view>
            
            <view class="msg-m msg-left" v-if="item.id != 1">
               <image :src="item.imgUrl"
            <view class="msg-m msg-left" v-if="item.senderId != senId">
               <image :src= recAvatar
                         mode=""
                         class="user-img" />
               <!-- text -->
               <view class="message" v-if="item.types == 0">
                  <view class="msg-text">{{ item.message }}</view>
               <view class="message" v-if="item.messageType == 0">
                  <view class="msg-text">{{ item.postMessage }}</view>
               </view>
               <!-- image -->
               <view class="message" v-if="item.types == 1">
                  <image :src="item.message"
               <view class="message" v-if="item.messageType == 1">
                  <image :src="item.postMessage"
                            class="msg-img"
                            mode="widthFix"
                            @tap="previewImage(item.message)"/>
                            @tap="previewImage(item.postMessage)"/>
               </view>
               <!-- voice -->
               <view class="message" v-if="item.types == 2">
               <view class="message" v-if="item.messageType == 2">
                  <view class="msg-text voice"
                           :style="{width:item.message.time * 4 + 'px'}"
                           @tap="playVoice(item.message.voice)">
                           :style="{width:item.postMessage.time * 4 + 'px'}"
                           @tap="playVoice(item.postMessage.voice)">
                     <image src="../../static/images/chatroom/sound.png" 
                               mode=""
                               class="voice-img"/>
                     {{ item.message.time }} "
                     {{ item.postMessage.time }} "
                  </view>
               </view>
               <!-- location -->
               <view class="message" v-if="item.types == 3">
               <view class="message" v-if="item.messageType == 3">
                  <view class="msg-map"
                           @tap="openLocation(item.message)">
                     <view class="map-name">{{ item.message.name }}</view>
                     <view class="map-address">{{ item.message.address }}</view>
                           @tap="openLocation(item.postMessage)">
                     <view class="map-name">{{ item.postMessage.name }}</view>
                     <view class="map-address">{{ item.postMessage.address }}</view>
                     <image src="../../static/images/chatroom/map.jpg" 
                               mode="aspectFit" 
                               class="map-img"/>
@@ -78,40 +78,40 @@
               
            </view>
            
            <view class="msg-m msg-right" v-if="item.id == 1">
               <image :src="item.imgUrl"
            <view class="msg-m msg-right" v-if="item.senderId == senId">
               <image :src= senAvatar
                         mode=""
                         class="user-img" />
               <view class="message" v-if="item.types == 0">
                  <view class="msg-text">{{ item.message }}</view>
               <view class="message" v-if="item.messageType == 0">
                  <view class="msg-text">{{ item.postMessage }}</view>
               </view>
               <view class="message" v-if="item.types == 1">
                  <image :src="item.message"
               <view class="message" v-if="item.messageType == 1">
                  <image :src="item.postMessage"
                            class="msg-img"
                            mode="widthFix"
                            @tap="previewImage(item.message)"/>
                            @tap="previewImage(item.postMessage)"/>
               </view>
               <!-- voice -->
               <view class="message" v-if="item.types == 2">
               <view class="message" v-if="item.messageType == 2">
                  <view class="msg-text voice"
                           :style="{width:item.message.time * 4 + 'px'}"
                           @tap="playVoice(item.message.voice)">
                     {{ item.message.time }} "
                           :style="{width:item.postMessage.time * 4 + 'px'}"
                           @tap="playVoice(item.postMessage.voice)">
                     {{ item.postMessage.time }} "
                     <image src="@/static/images/chatroom/sound.png"
                               mode=""
                               class="voice-img"/>
                  </view>
               </view>
               <!-- location -->
               <view class="message" v-if="item.types == 3">
               <view class="message" v-if="item.messageType == 3">
                  <view class="msg-map"
                           @tap="openLocation(item.message)">
                     <view class="map-name">{{ item.message.name }}</view>
                     <view class="map-address">{{ item.message.address }}</view>
                           @tap="openLocation(item.postMessage)">
                     <view class="map-name">{{ item.postMessage.name }}</view>
                     <view class="map-address">{{ item.postMessage.address }}</view>
                     <!-- <map class="map"
                            :latitude="item.message.latitude"
                            :longitude="item.message.longitude"
                            :markers="covers(item.message)"/> -->
                            :latitude="item.postMessage.latitude"
                            :longitude="item.postMessage.longitude"
                            :markers="covers(item.postMessage)"/> -->
                     <image src="../../static/images/chatroom/map.jpg"
                               mode="aspectFit" 
                               class="map-img"/>
@@ -134,7 +134,7 @@
   import datas from  '@/debugdate/debugdate.js'
   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 {
@@ -144,7 +144,13 @@
            imgMsg: [],
            oldTime: new Date(),
            scrollToView: '',
            inputh: '72',
            inputh: '72',
            recipientId: null,//接收者id
            recAvatar: null,//接收者头像
            recName: null,//接收者姓名
            senAvatar:null,//发送者头像
            senId: null,//接收者id
            getData: null,
            animationData: {},            // 动画
            nowpage: 0,                   // 页码
            loading: '',                  // 滚动事件
@@ -156,7 +162,8 @@
      components:{
         submit,
      },
      onLoad() {
      onLoad(option) {
         this.recipientId = option.chatID;
         this._getMsg(this.nowpage)
         // this.nextPage()
      },
@@ -169,78 +176,110 @@
         },
         // 滚动顶部加载上一页
         nextPage() {
            if(this.nowpage > 0 && this.begainloading) {
               // 出现loading icon
               this.isload = false
               this.begainloading = false
            // if(this.nowpage > 0 && this.begainloading) {
            //    // 出现loading icon
            //    this.isload = false
            //    this.begainloading = false
               
               var animation = uni.createAnimation({
                  duration: 1000,
                  timingFunction: 'step-start'
               })
            //    var animation = uni.createAnimation({
            //       duration: 1000,
            //       timingFunction: 'step-start'
            //    })
               
               this.animation = animation
            //    this.animation = animation
               
               
               let i = 1
               this.loading = setInterval(function() {
                  animation.rotate(i * 30).step()
                  this.animationData = animation.export()
                  i++
                  // 滑动加载数据
                  if(i > 40) {
                     this._getMsg(this.nowpage)
                  }
            //    let i = 1
            //    this.loading = setInterval(function() {
            //       animation.rotate(i * 30).step()
            //       this.animationData = animation.export()
            //       i++
            //       // 滑动加载数据
            //       if(i > 40) {
            //          this._getMsg(this.nowpage)
            //       }
                  
               }.bind(this), 100)
            }
            //    }.bind(this), 100)
            // }
            
            
         },
         // 获取聊天数据
         _getMsg(page) {
            // 页数加1
            let msg = datas.message()
            let maxpages = msg.length
            if(msg.length > (page + 1) * 10) {
               maxpages = (page + 1) * 10
               this.nowpage++
            }else {
               // 数据获取完毕
               this.nowpage = -1
            }
            // 数据分页加载 每十条为一页
            for(var i = page * 10; i < maxpages; i++){
               msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
               // 时间间隔
               if(i < msg.length-1){
                  let t = filter.spaceTime(this.oldTime, msg[i].time)
                  if(t){
                     this.oldTime = t
            var that = this;
            that.senId = WxStorage.get("ids");
            uni.request({
               url:that.$store.state.piAPI + "/chat-records/getSingleMessagePage",
               method:"get",
               data:{
                  senderId: that.senId,
                  recipientId: that.recipientId
                  // recipientId: "1370571848600920066"
               },
               success:(res)=> {
                  // recAvatar: null,//接收者头像
                  // senAvatar:null,//发送者头像
                  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 = "http://106.225.193.35:83/img/bg/img-logo.png";
                     }
                     if(resdata[i].id == that.senId){
                        that.senAvatar = resdata[i].avatar;
                     }else{
                        that.recAvatar = resdata[i].avatar;
                        that.recName = resdata[i].realName;
                     }
                  }
                  msg[i].time = t
                  let msg = res.data.data.chatRecordsIPage
                  that.getData = msg;
                  // 页数加1
                  //let msg = datas.message()
                  let maxpages = msg.length
                  if(msg.length > (page + 1) * 10) {
                     maxpages = (page + 1) * 10
                     that.nowpage++
                  }else {
                     // 数据获取完毕
                     that.nowpage = -1
                  }
                  // 数据分页加载 每十条为一页
                  for(var i = 0; i < msg.length; i++){
                     msg[i].imgUrl = '../../static/images/index/friend-list/'+msg[i].imgUrl
                     // 时间间隔
                     if(i < msg.length-1){
                        let t = filter.spaceTime(that.oldTime, msg[i].postTime)
                        if(t){
                           that.oldTime = t
                        }
                        msg[i].postTime = t
                     }
                     // 补充图片地址
                     if(msg[i].types == 1){
                        msg[i].message = '../../static/images/index/friend-list/'+msg[i].message
                        that.imgMsg.unshift(msg[i].message)
                     }
                     that.msgs.unshift(msg[i])
                  }
                  that.$nextTick(() => {
                     that.isanimation = false
                     if(that.getData.length != 0){
                        that.scrollToView = 'msg' + that.getData[0].id
                     }
                  })
                  // 数据加载完毕关闭动画,停止数据加载
                  clearInterval(this.loading)
                  // 关闭loading icon
                  this.isload = true
                  // 开启加载
                  this.begainloading = true
               }
               // 补充图片地址
               if(msg[i].types == 1){
                  msg[i].message = '../../static/images/index/friend-list/'+msg[i].message
                  this.imgMsg.unshift(msg[i].message)
               }
               this.msgs.unshift(msg[i])
            }
            this.$nextTick(() => {
               this.isanimation = false
               this.scrollToView = 'msg' + this.msgs[maxpages - page * 10 - 1].tip
            })
            // 数据加载完毕关闭动画,停止数据加载
            clearInterval(this.loading)
            // 关闭loading icon
            this.isload = true
            // 开启加载
            this.begainloading = true
         },
         // 预览图片
         previewImage(e) {
@@ -273,22 +312,41 @@
         },
         // 接收输入内容
         inputs(e) {
            var that = this;
            this.isanimation = true
            let len = this.msgs.length -1            
            let nowTime = new Date()
            let nowTime = new Date();
            var sentTime = that.dateFormat("YYYY-mm-dd HH:MM:SS", nowTime);
            let t = filter.spaceTime(this.oldTime, nowTime)
            if(t){
               this.oldTime = t
            }
            nowTime = t
            let sendMsg = {
               id: 1,
               imgUrl: '../../static/images/index/friend-list/me.jpg',
               message: e.message,
               types: e.types,
               time: nowTime,
               tip: len
               senderId: that.senId,
               recipientId: that.recipientId,
               postMessage: e.message,
               messageType: 0,
               status: 0,
               postTime: nowTime,
            }
            uni.request({
               url:that.$store.state.piAPI + "/chat-records/insertSingleChat",
               method:"post",
               data:{
                  senderId: that.senId,
                  recipientId: that.recipientId,
                  postMessage: e.message,
                  messageType: 0,
                  status: 0,
                  postTime: sentTime,
               },
               success:(res)=> {
               }
            });
            this.msgs.push(sendMsg)
            this.$nextTick(() => {
               this.scrollToView = 'msg' + len
@@ -308,8 +366,11 @@
            this.isanimation = true
            this.scrollToView = ''
            this.$nextTick(() => {
               let len = this.msgs.length -1
               this.scrollToView = 'msg' + this.msgs[len].tip
               let len = this.getData.length -1
               if(this.getData.length != 0){
                  this.scrollToView = 'msg' + this.getData[0].id
               }
            })
         },
         // 地图定位
@@ -335,6 +396,26 @@
               }
            })
         },
         //时间格式化
         dateFormat(fmt, date) {
             let ret;
             const opt = {
                 "Y+": date.getFullYear().toString(),        // 年
                 "m+": (date.getMonth() + 1).toString(),     // 月
                 "d+": date.getDate().toString(),            // 日
                 "H+": date.getHours().toString(),           // 时
                 "M+": date.getMinutes().toString(),         // 分
                 "S+": date.getSeconds().toString()          // 秒
                 // 有其他格式化字符需求可以继续添加,必须转化成字符串
             };
             for (let k in opt) {
                 ret = new RegExp("(" + k + ")").exec(fmt);
                 if (ret) {
                     fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                 };
             };
             return fmt;
         }
      },
      filters:{
         Msgdate(time) {