hlm_pl_mall_h5/pages/member/chat/ChatInfo.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="scroll-view-wrapper scroll-view div container" :style="'height:'+contentHeight+'px'">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar :title="t_name" class="common-header" left-icon="back" @clickLeft="goBack()">
                <view class="div common-btn btn" slot="right" @click="showPopup('historyVisible')">聊天记录</view>
            </uni-nav-bar>
        </view>
        </view>
        <scroll-view :scroll-y="true" class="scroll-view div" :scroll-into-view="'msg_'+(msg_list.length-1)">
          <view class="dstouch-chat-con">
            <view class="div" v-for="(item,index) in msg_list" :key="index" :id="'msg_'+index">
                <chat-message :item="getMessage(item,index,0)" :t_id="t_id"></chat-message>
            </view>
          </view>
        </scroll-view>
        <view class="div dstouch-chat-bottom">
            <view class="div chat-input-layout"> <view class="span open-smile"><text class="a iconfont" @click="open_smile">&#xe6cd;</text></view>
                <view class="div input-box">
                    <input type="text" v-model="msg" @blur.prevent="inputLoseFocus">
                    <view class="div common-btn ds-button-small submit" @click="submit()">发送</view>
                </view>
            </view>
            <view class="div chat-smile-layout" v-if="smile_show">
                <view class="ul">
                    <view  class="li" v-for="(smile,index) in smilies_array" :key="index" @click="addSmile(index)"><image mode="aspectFit" class="img" :title="smile.text" :alt="smile.text" :src="getSmile(smile.image)"></view>
                </view>
            </view>
        </view>

        <!--聊天记录-->
        <uni-popup background-color="#fff" ref="historyVisible" type="right" >
            <view :style="'width:'+screenWidth+'px'" class="scroll-view-wrapper common-popup-wrapper">
            <view class="div common-header-wrap">
                <view :style="'height:'+navHeight+'px'"></view>
                <view class="common-header-holder"></view>
                <view class="common-header-fixed">
                <title-header />
                <uni-nav-bar title="聊天记录" class="common-header" left-icon="back" @clickLeft="hidePopup('historyVisible')">
                </uni-nav-bar>
            </view>
            </view>
            <view class="scroll-view div common-popup-content">
                <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" :scroll-top="scrollTop" @scrolltolower="loadMore" scroll-y="true">
                    <view class="div" v-if="historyList && historyList.length">
                        <chat-message v-for="(item,index) in historyList" :key="item.instant_message_id" :item="getMessage(item,index,1)" :t_id="t_id"></chat-message>
                    </view>
                    <empty-record v-else-if="historyList && !historyList.length"></empty-record>
                </scroll-view>
            </view>
        </view>
        </uni-popup>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import ChatMessage from './ChatMessage'
import EmptyRecord from '../../EmptyRecord'
import { mapState, mapActions } from 'vuex'
import { addInstantMessage, getChatHistory, joinChat, setMessage } from '../../../api/memberInstantMessage'
import { env } from '../../../static/config'
export default {
  data(){
    return {
      canReconnect:true,
      navHeight: 0,
      scrollTop: 0,
      screenWidth:0,
      contentHeight:0,
      params: { 'page': 0, 'per_page': 20 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      historyList: false,
      t_id: 0,
      t_name: '',
      goods_id: 0,
      smile_show: false,
      socket_connect: 0,
      msg_list: [],
      msg: '',
      lockReconnect: false,
      timeOut: false,
      smilies_array: {
        ':smile:': { image: 'smile.gif', text: '微笑' },
        ':sad:': { image: 'sad.gif', text: '难过' },
        ':biggrin:': { image: 'biggrin.gif', text: '呲牙' },
        ':cry:': { image: 'cry.gif', text: '大哭' },
        ':huffy:': { image: 'huffy.gif', text: '发怒' },
        ':shocked:': { image: 'shocked.gif', text: '惊讶' },
        ':tongue:': { image: 'tongue.gif', text: '调皮' },
        ':shy:': { image: 'shy.gif', text: '害羞' },
        ':titter:': { image: 'titter.gif', text: '偷笑' },
        ':sweat:': { image: 'sweat.gif', text: '流汗' },
        ':mad:': { image: 'mad.gif', text: '抓狂' },
        ':lol:': { image: 'lol.gif', text: '阴险' },
        ':loveliness:': { image: 'loveliness.gif', text: '可爱' },
        ':funk:': { image: 'funk.gif', text: '惊恐' },
        ':curse:': { image: 'curse.gif', text: '咒骂' },
        ':dizzy:': { image: 'dizzy.gif', text: '晕' },
        ':shutup:': { image: 'shutup.gif', text: '闭嘴' },
        ':sleepy:': { image: 'sleepy.gif', text: '睡' },
        ':hug:': { image: 'hug.gif', text: '拥抱' },
        ':victory:': { image: 'victory.gif', text: '胜利' },
        ':sun:': { image: 'sun.gif', text: '太阳' },
        ':moon:': { image: 'moon.gif', text: '月亮' },
        ':kiss:': { image: 'kiss.gif', text: '示爱' },
        ':handshake:': { image: 'handshake.gif', text: '握手' }
      }
    }
  },
  beforeDestroy: function () {
    this.canReconnect=false
    heartCheck.stop()
    this.socket_connect = 0
  },
  components:{
    TitleHeader,
    MemberBase,
    ChatMessage: ChatMessage,
    EmptyRecord: EmptyRecord
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      config: state => state.config.config,
      user: state => state.member.info
    })
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
    this.contentHeight=uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight
  },
  onLoad: function (option) {
    this.t_id=option.t_id
      this.t_name=option.t_name
      this.goods_id=option.goods_id
    if (!this.t_id) {
      uni.showToast({icon:'none',title: '参数错误'})
      uni.navigateBack({delta:1})
    }
    if (this.config.instant_message_open != '1' || !this.config.instant_message_gateway_url) {
      uni.showToast({icon:'none',title: '未开启即时聊天'})
      uni.navigateBack({delta:1})
    }
    this.fetchConfig({}).then(
      response => {
        this.createWebSocket()
        if (this.goods_id) {
          this.submit(1)
        }
      },
      error => {
        uni.showToast({icon:'none',title: error.message})
      }
    )
    this.loadMore()
  },
  watch: {

  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    createWebSocket () {
      uni.connectSocket({
          url: this.config.instant_message_gateway_url,
      }).then(res=>{
        this.init()
      }).catch(error=>{
        this.reconnect()
      })
    },
    init () {
      uni.onSocketOpen(res=>{
        this.wsOpen()
      })
      uni.onSocketMessage(res=>{
        this.wsMessage(res)
      })
      uni.onSocketClose(res=>{
        this.wsClose(res)
      })
      uni.onSocketError(res=>{
        this.wsError(res)
      })
    },
    reconnect () {
      if (this.lockReconnect) {
        return
      };
      this.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      this.timeOut && clearTimeout(this.timeOut)
      var _this = this
      this.timeOut = setTimeout(function () {
        _this.createWebSocket()
        _this.lockReconnect = false
      }, 4000)
    },
    wsOpen () {
      this.socket_connect = 1
      // 心跳检测重置
      heartCheck.start()
    },
    wsMessage (res) {
      var message = JSON.parse(res.data)
      if (!message) {
        uni.showToast({icon:'none',title: '消息转换失败：' + res.data})
        return
      }
      var type = message.type || ''
      switch (type) {
        // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
        case 'init':
          this.clientId = message.client_id

          joinChat(this.clientId).then(res => {

          }).catch(error => {
            uni.showToast({icon:'none',title: error.message})
          })
          break
        case 'leave':
          break
        case 'get_msg':// 未读消息
          this.filterMsg(message.msg_list)
          break
        default:
          this.filterMsg([message])
      }
      heartCheck.start()
    },
    wsClose (res) {
      this.socket_connect = 0
      if (res.reason) {
        console.log('聊天系统连接断开：' + res.reason)
      }
      if(this.canReconnect){
        this.reconnect()
      }
    },
    wsError (res) {
      uni.showToast({icon:'none',title: res.errMsg})
      this.reconnect()
    },
    // 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
    inputLoseFocus () {
      setTimeout(() => {
        this.scrollTop=0
      }, 100)
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getHistoryList(true)
      }
    },

    getHistoryList () {
      uni.showLoading({ title: '加载中' })

      getChatHistory(this.params, this.t_id).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        let temp = res.result.list
        if (temp) {
          if (!this.historyList) {
            this.historyList = temp
          } else {
            this.historyList = this.historyList.concat(temp)
          }
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    getMessage (item, index, type) {
      this.getTime(item, index, type)
      if (type) {
        return this.historyList[index]
      } else {
        return this.msg_list[index]
      }
    },
    getTime (item, index, type) {
      let time = item.instant_message_add_time
      if (type) {
        this.historyList[index]['if_show_time'] = false
        if (index) {
          if (Math.abs(this.historyList[index - 1]['show_time'] - time) > 10) {
            this.historyList[index]['show_time'] = time
            this.historyList[index]['if_show_time'] = true
          } else {
            this.historyList[index]['show_time'] = this.historyList[index - 1]['show_time']
          }
        } else {
          this.historyList[index]['show_time'] = time
          this.historyList[index]['if_show_time'] = true
        }
      } else {
        this.msg_list[index]['if_show_time'] = false
        if (index) {
          if (Math.abs(this.msg_list[index - 1]['show_time'] - time) > 10) {
            this.msg_list[index]['show_time'] = time
            this.msg_list[index]['if_show_time'] = true
          } else {
            this.msg_list[index]['show_time'] = this.msg_list[index - 1]['show_time']
          }
        } else {
          this.msg_list[index]['show_time'] = time
          this.msg_list[index]['if_show_time'] = true
        }
      }
    },
    open_smile () {
      this.smile_show = !this.smile_show
    },
    addSmile (code) {
      this.msg += code
      this.smile_show = false
    },
    submit (type = 0) {
      let msg
      if (type == 0) {
        if (this.msg == '') {
          uni.showToast({icon:'none',title: '请填写内容'})
          return
        }
        msg = this.msg
      } else {
        msg = this.goods_id
      }

      addInstantMessage({ to_id: this.t_id, message: msg, message_type: type }).then(res => {
        this.msg = ''
        let msg = res.result.instant_message_data
        this.msg_list.push(msg)
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    getSmile (smile) {
      return env.SITE_URL + '/static/plugins/js/smilies/images/' + smile
    },
    filterMsg (msg_list) {
      let msg_id = false
      for (var k in msg_list) {
        let msg = msg_list[k]
        if (msg.instant_message_to_id != this.user.member_id || msg.instant_message_from_id != this.t_id) {
          continue
        }
        msg_id = msg.instant_message_id
        this.msg_list.push(msg)
      }
      if (msg_id) {
        if (this.socket_connect) {
          setMessage({ max_id: msg_id, f_id: this.t_id })
        }
      }
    }

  }

}
// 心跳检测
var heartCheck = {
  timeout: 3000,
  timeoutObj: null,
  start: function () {
    var self = this
    this.timeoutObj && clearInterval(this.timeoutObj)
    this.timeoutObj = setInterval(function () {
      // 这里发送一个心跳，后端收到后，返回一个心跳消息，
      uni.sendSocketMessage({
        data: '123456789'
      })
    }, this.timeout)
  },
        stop:function(){
            this.timeoutObj && clearInterval(this.timeoutObj)
        }
}
</script>

<style scoped lang="scss">
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1;padding-bottom: 2rem;}
    .common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .dstouch-chat-con {height: 100%;display: flex;flex-direction: column;justify-content: flex-end;}

    .dstouch-chat-bottom {height: 2rem;position: fixed;bottom: 0;width: 100%;}
    .chat-input-layout { position: relative; z-index: 1; display: block; height: 2rem; background-color: rgba(255,255,255,0.90)}
    .chat-input-layout .open-smile { display: block; width: 1.5rem; height: 1.5rem; padding: 0.25rem;}
    .chat-input-layout .open-smile .a { display: block; width: 1.5rem; height: 1.5rem; font-size:1.5rem;color:#6eb6eb}
    .chat-input-layout .input-box { position: absolute; z-index: 1; top: 0.24rem; right: 0.4rem; bottom: 0.24rem; left: 2rem; background: #F5F5F5; border: solid 0.05rem #EEE; border-radius: 0.2rem;}
    .chat-input-layout .input-box input[type="text"] { background-color: transparent; border: none; width: 100%; height: 100%; padding:.1rem 3rem .1rem .1rem; font-size:$fontSize;box-sizing:border-box;display: block;}
    .chat-input-layout .input-box .submit { position: absolute; z-index: 1; top: 0; right:0; display: block; height: 1.4rem; }
    .chat-smile-layout { display: block; width: 100%; height: 4.2rem; background-color: #FAFAFA; border-top: solid 0.05rem #DDD;}
    .chat-smile-layout .ul { font-size: 0;}
    .chat-smile-layout .ul .li { display: inline-block; width: 12.5%; height: 1rem; padding: 0.3rem 0 0 0; text-align: center;  vertical-align: middle;}
    .chat-smile-layout .ul .li .img { display: inline-block; height: 100%; vertical-align: middle;}
    .common-popup-content{background:#f7f7f7;overflow-x:hidden}

</style>