mall4pc-bbc/pages/chat.vue

<template>
  <div class="body">
    <div class="chat-box">
      <!-- 消息盒子左侧栏 -->
      <div class="chat-box-left">
        <!-- 左侧顶部 -->
        <div class="user-name">
          <img src="../assets/images/chat/userImg.jpg" v-if="!userImg" />
          <img :src="userImg" v-if="userImg" />
          <span v-if="!userName" class="user-name1">{{
            $t('chat.userName')
          }}</span>
          <span v-else class="user-name1">{{ userName }}</span>
        </div>
        <!-- 左侧商家栏 -->
          <!-- v-infinite-scroll="scrollShopList"
          infinite-scroll-disabled="shopDisabled" -->
        <ul class="shop-list"
        >
          <li
            :class="['shop-item',(item.shopId == selectedF && item.chatType == chatType)?'changeUser':'',item.message? 'newMessage':'']"
            v-for="(item, index) in shopList"
            :key="index"
            @click="changeImContent(item.shopId, item.chatType , index, item)"
          >
            <img
              :src="item.pic ? item.pic : chatImg "
              class="shop-icon"
            />
            <div class="shop-info">
              <span class="shop-info-name">{{ item.friendName }}</span>
              <span
                class="shop-info-icon"
                :style="{ width: $t('language') === 'en' ? '50px' : '' }"
                v-if="item.chatType === 1"
                >{{ $t('chat.official') }}</span
              >
              <span
                class="shop-info-icon"
                :style="{
                  width: $t('language') === 'en' ? '50px' : '',
                  backgroundColor: '#FFC267',
                }"
                 v-if="item.chatType !== 1 && item.shopId !== 1"
                >{{ $t('index.shop') }}</span
              >
              <span
                class="shop-info-icon"
                :style="{
                  width: $t('language') === 'en' ? '50px' : '',
                  backgroundColor: '#FFC267',
                }"
                v-if="item.chatType !== 1 && item.shopId === 1"
                >{{ $t('prodDetail.selfEmployed') }}</span
              >
            </div>
          </li>
        </ul>
      </div>

      <!-- 消息盒子右侧信息回复栏 -->
      <div class="chat-box-right">
        <div class="shop-name-tittle" v-if="shopList[totalUserUnreadsIndex]">{{ chatType==1?$t('chat.mallCustomerService'):shopName}}
          <span :class="['shopStatus', shopList[totalUserUnreadsIndex].isOnline?'in':'out']">{{shopList[totalUserUnreadsIndex].isOnline?$t('chat.onLine'):$t('chat.offLine')}}</span></div>
        <div class="im-box">
          <div class="im-main">
            <div class="chat-main-form">
              <div class="display-infor">
                <div
                  class="more"
                  @click="moreInfo()"
                  v-if="moreMess && chatMessagePages > 1"
                >
                  {{ $t('chat.clickToLoadMore') }}
                </div>
                <div class="more" v-if="!moreMess && chatMessagePages > 1">
                  {{ $t('chat.noMore') }}
                </div>
                <div class="row" v-for="(row, index) in msgList" :key="index">
                  <!-- 用户消息 -->
                  <div class="topTime" >{{ row.timeStr }}</div>
                  <!-- 自己发出的消息 -->
                  <div class="my" v-if="row.source == 2">
                    <!-- 左-消息 -->
                    <div class="left">
                      <div class="username">
                        <div class="name">{{ row.userName }}</div>
                      </div>
                      <div class="message-box">
                        <div class="unread" v-if="row.employeeUnread">{{ $t('chat.read') }}</div>
                        <div class="unread" v-if="!row.employeeUnread">
                          {{ $t('chat.unRead') }}
                        </div>
                      </div>
                      <!-- 文字消息 -->
                      <div v-if="row.type == 0 && !row.prodInfo" class="bubble">
                        <span>{{ row.content }}</span>
                      </div>
                      <!-- 图片消息 -->
                      <div
                        v-if="row.type == 1 && !row.prodInfo"
                        class="bubble"
                        @tap="showPic(row.content)"
                      >
                        <!-- <img :src="row.content" class="longimage" @click="onBigImg(row.content)"/> -->
                        <el-image :src="row.content" class="longimage" :preview-src-list="[row.content]"></el-image>
                      </div>
                      <!-- 商品链接 -->
                      <div
                        class="prod-link"
                        v-if="row.prodInfo"
                      >
                       <div class="prod-number" v-if="row.prodInfo.orderFlag" @click="toProdDetail(row.prodInfo,1)">{{ $t('orderNumberT') }}:{{row.prodInfo.orderNumber}}</div>
                        <div class="link-prod prod-no" @click="toProdDetail(row.prodInfo,0,row.prodInfo.orderType)">
                          <img :src="row.prodInfo.imgs" alt="" />
                          <div class="link-detail">
                            <div class="prod-name">
                              {{ row.prodInfo.prodName }}
                            </div>
                            <div class="prod-price">
                              <!-- <span class= 'payment-amount' v-if="row.prodInfo.orderFlag">{{$t('chat.paymentAmount')+'：'}}{{ row.prodInfo.actualTotal?'￥'+row.prodInfo.actualTotal:'' }}<span v-if="row.prodInfo.useScore">+{{row.prodInfo.useScore}} {{$t('prodDetail.points')}}</span></span> -->
                              <span>{{row.prodInfo.actualTotal?'￥':''}}{{row.prodInfo.actualTotal?row.prodInfo.actualTotal:''}}{{(row.prodInfo.actualTotal && row.prodInfo.useScore)?'+':''}}<span v-if="row.prodInfo.useScore">{{row.prodInfo.useScore}} {{$t('prodDetail.points')}}</span></span>
                              <!-- <span class= 'prod-status' v-if="row.prodInfo.orderFlag">
                                {{
                                  [
                                    '',
                                    $t('obligation'),
                                    $t('pendingDelivery'),
                                    $t('pendingReceipt'),
                                    $t('pendinEvaluation'),
                                    $t('completed'),
                                    $t('canceled'),
                                    $t('grouping')
                                  ][row.prodInfo.status]
                                }}
                              </span> -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 右-头像 -->
                    <div class="right">
                      <img
                        src="../assets/images/chat/userImg.jpg"
                        class="avatar"
                        v-if="!row.userHeadUrl"
                      />
                      <img :src="row.userHeadUrl" class="avatar" v-else />
                    </div>
                  </div>

                  <!-- 别人发出的消息 -->
                  <div
                    class="other"
                    v-if="
                      (row.source == 0 || row.source == 1) &&
                      row.forwardCode != 1
                    "
                  >
                    <!-- 左-头像 -->
                    <div class="left">
                      <img :src="row.shopLogo?row.shopLogo:chatImg" class="avatar" />
                    </div>
                    <!-- 右-用户名称-时间-消息 -->
                    <div class="right">
                      <div class="username">
                        <div class="name">{{ row.shopName }}</div>
                      </div>
                      <!-- 文字消息 -->
                      <div v-if="row.type == 0" class="bubble">
                        <span>{{ row.content }}</span>
                      </div>
                      <!-- 图片消息 -->
                      <div
                        v-if="row.type == 1"
                        class="bubble"
                        @tap="showPic(row.content)"
                      >
                        <!-- <img
                          :src="row.content"
                          class="longimage"
                          @click="onBigImg(row.content)"
                        /> -->
                        <el-image :src="row.content" class="longimage" :preview-src-list="[row.content]"></el-image>
                      </div>
                    </div>
                  </div>

                  <!-- 发送链接 -->
                  <div class="link-box" v-if="row.source == 3">

                    <div class="prod-number" v-if="row.prodInfo.orderFlag" @click="toProdDetail(row.prodInfo,1)">{{ $t('chat.orderNumber') }}：{{row.prodInfo.orderNumber}}</div>
                    <div
                      class="link-prod"
                      @click="toProdDetail(row.prodInfo,0,row.prodInfo.orderType)"
                    >
                      <img :src="row.prodInfo.imgs" alt="" />
                      <div class="link-detail">
                        <div class="prod-name">{{ row.prodInfo.prodName }}</div>
                        <span>{{row.prodInfo.actualTotal?'￥':''}}{{row.prodInfo.actualTotal?row.prodInfo.actualTotal:''}}{{(row.prodInfo.actualTotal && row.prodInfo.useScore)?'+':''}}<span v-if="row.prodInfo.useScore">{{row.prodInfo.useScore}} {{$t('prodDetail.points')}}</span></span>
                      </div>
                    </div>
                    <div class="link-send" @click="sendText(2)">
                      {{ $t('chat.sendLink') }} <i class="link-send-right"></i>
                    </div>
                  </div>

                  <!-- 系统提示: 客服接入/转接、客户离线、用户状态异常-->
                  <div
                    class="sys-tips"
                    v-if="(row.source == -1 && row.tipsType) || row.type == 2"
                  >
                    <span class="tips-content" v-if="row.type == 2">{{
                      row.content
                    }}</span>
                    <span class="tips-content" v-else>{{
                      row.tipsType == 1
                        ? $t('chat.customerOffline')
                        : row.tipsType == 2
                        ? $t('chat.loginOtherSide')
                        : ''
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="reply">
                <div class="upload"></div>
                <label for="iii" class="imgUp"
                  ><a class="upload" style="cursor: pointer"></a
                ></label>
                <input
                  accept="image/png, image/jpeg"
                  type="file"
                  ref="file"
                  @change="toolEvent"
                  class="search-btnn"
                  id="iii"
                />
                <div class="reply-area">
                  <textarea
                    name=""
                    id=""
                    cols="20"
                    rows="4"
                    @keydown="messageSendlisten($event)"
                    v-model="textMsg"
                  >
                  </textarea>
                </div>

                <div class="send" @click="sendText(1)">
                  {{ $t('chat.send') }}
                </div>
              </div>

                <!-- 未读消息提醒-->
              <!-- <div v-if="">
                <div class="un-read-tips" v-if="shopList[totalUserUnreadsIndex].unread>0">
                  <img src="../assets/images/chat/unread-up.png" class="un-read-icon"/>
                  {{`${shopList[totalUserUnreadsIndex].unread}条新消息`}}
                </div>
              </div> -->
            </div>
          </div>

          <!-- 右侧我的浏览和我的订单栏 -->
          <div class="order-column">
            <div class="tab-switch">
              <span
                :class="['inquiry', tabIndex ? '' : 'active']"
                @click="tabSwitch(0)"
                >{{ $t('chat.recentlyViewed') }}</span
              >
              <span
                :class="['my-order', !tabIndex ? '' : 'active']"
                @click="tabSwitch(1)"
                >{{ $t('chat.myOrders') }}</span
              >
            </div>
            <!-- 最近浏览 -->
            <!-- <div class="browse" v-show="!tabIndex">
              <div
                class="text"
                :style="{ width: $t('language') === 'en' ? '115px' : '' }"
              >
                {{ $t('chat.recentlyViewed') }}
              </div>
            </div> -->

            <ul class="recent-list" v-show="!tabIndex">
              <li class="prod-item" v-for="(recent,index) in reBrowseList" :key="index">
                <img
                  :src="recent.pic"
                  class="prod-img"
                />
                <div class="prod-detail">
                  <div class="prod-name" @click="toProdDetail(recent)">
                    {{recent.prodName}}
                  </div>
                  <div class="prod-b">
                    <div class="prod-price">￥{{recent.price}}</div>
                    <div class="prod-send" @click="sendText(3, recent)">{{ $t('chat.send') }}{{ $t('products') }}</div>
                  </div>
                </div>
              </li>
              <div v-if="!noMoreRe" class="bottom-tips">{{ $t('chat.noRecord') }}</div>
            </ul>

            <!-- 我的订单 -->
            <ul
              class="order-list"
              v-infinite-scroll="scrollOrderList"
              infinite-scroll-disabled="disabled"
              v-show="tabIndex"
            >
              <li
                class="prod-item botl"
                v-for="(item, index) in orderList"
                :key="index"
                :style="{
                  paddingBottom: item.orderItemDtos.length <= 1 ? '18px' : '0',
                }"
              >
                <div class="order-number">
                  <span class="number"
                  @click="toProdDetail(item,1)"
                    >{{ $t('chat.orderNumber') }}: {{ item.orderNumber }}</span
                  >
                  <!-- <div class="send-number" @click="sendText(4,item.orderItemDtos[0],item.status,item.actualTotal)">
                    {{ $t('chat.sendOrder') }}
                  </div> -->
                  <!-- <span class="time">时 间: {{ 1342585896 }}</span> -->
                </div>
                <div
                  class="order-box"
                  v-for="(prod, index) in item.orderItemDtos"
                  :key="index"
                  :style="{
                    paddingBottom: item.orderItemDtos.length > 1 ? '20px' : '0',
                  }"
                >
                    <img v-if="prod.pic" :src="prod.pic" class="prod-img" />
                    <img v-else src="~/assets/img/def.png" alt />
                    <div class="prod-detail">
                      <div class="prod-name"  >{{ prod.prodName }}</div>
                      <div class="prod-b">
                        <div class="prod-price">￥{{ prod.price }}</div>
                        <div class="prod-send" @click="sendText(4, prod, item.orderType,item.actualTotal)">
                          {{ $t('chat.send') }}{{ $t('products') }}
                        </div>
                      </div>
                    </div>
                </div>
              </li>
              <p v-if="loading" class="bottom-tips">
                {{ $t('chat.loading') }}...
              </p>
              <p v-if="noMore" class="bottom-tips">{{ $t('chat.noMore') }}</p>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 重新登录提示弹窗 -->
    <div class="login-baBox" v-if="isPopup">
      <div class="popup-box">
        <div class="tit">
          <div class="text">{{ $t('tips') }}</div>
          <div class="close" @click="closePopup()"></div>
        </div>
        <div class="con">
          <div class="tip">
            <div class="tip-info">
              <div class="result">{{ $t('chat.pleaseLoginAgain') }}</div>
              <div class="btns" style="justify-content: center">
                <a href="JavaScript:;" class="btn-r" @click="goToLogin()">{{
                  $t('register.goToLogin')
                }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 放大图片栏 -->
<!-- 　　<div class="img-layer" v-if="bigImg" @click="bigImg=null">
　　<div class="img" v-if="bigImg">
　　　 <img :src="bigImg" mode="widthFix" />
　　</div>
    </div> -->

  </div>
</template>

<script>
import util from '../plugins/util'
import config from '../plugins/config'
import Cookie from 'js-cookie'
import { Base64 } from 'js-base64'


export default {
  data() {
    return {
      tabIndex: 0, // 0 正在浏览 1我的订单
      centerDialogVisible: true,
      userName: null,
      shopName: null,
      userImg: null,
      userId: this.$store.state.user.userId,
      bigImg: null, //选择要放大的图片
      selectedF: null, //选中的店家
      isPopup: false, // 显示登录弹窗
      picDomain: config.picDomain,
      img: require('../assets/images/chat/upload.png'),
      chatImg: require('../assets/images/chat/imAvatar.png'), //官方头像
      chatType: null, // 1是平台 2 是商家 发送消息的对象
      shopList: [],
      orderList: [],
      reBrowseList: [], //最近浏览列表
      selectFileobj:null, // 上传图片对象
      merchants: null, //左侧商家栏
      shopCurrent: 1, //左侧商家联系栏页吗数
      shopPages: 1, //左侧商家联系栏
      orderCurrent: 1, //我的订单当前页
      orderPages: 1, //我的订单
      chatMessageCurrent: 1, //主体聊天信息页码
      totalUserUnreads: [],// 有多少条未读新消息
      totalUserUnreadsIndex: 0, //选中的店家下标
      chatMessagePages: null,
      moreMess: null, //主体聊天信息判断有无更多
      currentShopId: null, //商家id
      isOnline: false,//
      prodInfo: null, //商品详情
      size: 10, //我的订单 每页显示多少条
      loading: false,
      shopLoading: false, //左侧商家联系栏是否禁止滚动判断
      imSocketTask: null,
      textMsg: null, //用户输入内容
      conversations: [],
      msgList: [], //聊天记录
      messageInfo: {}, // 商家发送的文本消息
      lockReconnect: false, //websock 是否是链接状态
      userSend: false,
      userRead: true,  // 用户的已读未读判断
      plooTime: 0
    }
  },
  created() {},
  mounted() {
    if(!Cookie.get('token') || !this.$store.state.user.nickName){
       this.isPopup = true
       return
    }
    this.userName = this.$store.state.user.nickName
    //json格式转换，应对图片为null时出现的判断失效
    this.userImg = this.$store.state.user.userAvatar
    if (this.$route.query.shopId == 'null') {
      this.currentShopId = 1
    } else {
      this.currentShopId = Number(this.$route.query.shopId)
    }
    if (this.$route.query.chatType) {
      this.chatType = this.$route.query.chatType
    } else {
      this.chatType = 2
    }

    this.getConversations() //左侧商家栏信息
    document.title = this.$t('chat.onlineCustomerService')
  },
  computed: {
    noMore() {
      return this.orderCurrent >= this.orderPages
    },
    noMoreRe() {
      return this.reBrowseList.length>0
    },
    shopDisabled () {
      return this.shopLoading
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    /**
     * 最近浏览我的订单tab切换
     */
    tabSwitch(status) {
      this.tabIndex = status
      if (status == 1) {
        this.getOrderList() //我的订单
      }
    },

    /**
     * 隐藏登录弹窗
     */
    hideLoginPop() {
      this.showLogin = false
    },



    //开启webscokt

    openWs() {
      var ths = this
      this.imSocketTask = new WebSocket(
        config.imWsPath + '/im/websocket/user/' + Base64.encode(Cookie.get('token')) + '/' + this.userId
      )

      ths.imSocketTask.onopen = function (openRes) {
        heartCheck.reset().start() // 成功建立连接后，重置心跳检测
        ths.lockReconnect = true
        ths.getMsgItems()
        ths.getOnlineStatus()
      }

      this.imSocketTask.onmessage = function (res) {
        heartCheck.reset().start() // 收到信息重置心跳检测
        let result = JSON.parse(res.data)
        if (result.code !== '00000') {
          result.code = Number(result.code)
        }

        // 聊天记录
        if (result.code === 2) {
          let msgIds = []
          let index = null
          if (result && result.data.pages) {
            result.data.records = result.data.records.reverse()

            if (ths.shopList.length) {
              ths.shopList.some((item,indexx)=>{
                if ( item.userId == result.data.records[0].userId ) {
                  index = indexx
                  return
                }
              })
            }

            // 进行是否是商品链接的判断
            result.data.records.forEach((item) => {
              let a = ths.isJSON(item.content)

              if (a && JSON.parse(item.content) instanceof Object) {
                item.prodInfo = JSON.parse(item.content)
              }

              item.timeStr = util.tsToDate(item.timestamp, 'M月D日 h:m')

              if (item.type === 1 && !a) {
                item.content =
                  item.content.indexOf(config.picDomain) === 0
                    ? item.content
                    : config.picDomain + item.content
              }

              if (!item.userUnread) {
                ths.shopList[index].unread = ths.shopList[index].unread - 1
                msgIds.push(item.itemId)
              }

            })

            let readed = {
              read: 1,
              msgIds,
              toId: ths.currentShopId,
              sendType: ths.chatType
            }
            ths.imSocketTask.send(JSON.stringify(readed))

            result.data.records.reduce((prev, cur) => {
              // 将时间更换为某某月某某日 要是是当天即去掉月日
              let now = util.tsToDate(prev.timestamp, 'M月D日 h:m')
              let next = util.tsToDate(cur.timestamp, 'M月D日 h:m')
              if (
                now.slice(0, now.indexOf(' ')) ===
                next.slice(0, next.indexOf(' '))
              ) {
                cur.timeStr = util.tsToDate(cur.timestamp, 'h:m')
              }

              // 历史记录进行时间段显示判断
              if (result.data.records.length > 2) {
                let timeFlag = ths.timeBeApart(prev.timestamp, cur.timestamp)
                if (timeFlag) {
                  delete cur.timeStr
                }
              }
              return cur
            })

            // 新的商家新的聊天记录
            if (ths.chatMessageCurrent === 1) {
              ths.msgList = result.data.records
              ths.chatMessagePages = result.data.pages
              ths.scrollToBottom()
            }

            // 查看更多的消息的逻辑判断
            if (ths.chatMessageCurrent !== 1) {
              result.data.records = result.data.records.reverse()
              // 数组反转拼接
              result.data.records.forEach((item) => {
                ths.msgList.unshift(item)
              })
            }
            // 有无查看更多
            if (result.data.pages > 1) {
              ths.moreMess = true
            } else {
              ths.moreMess = false
            }
            ths.chatMessagePages = result.data.pages
          } else {
            //新的商家联系人
            ths.msgList = []
            ths.chatMessagePages = 0
          }

          // 进行商品订单链接的判断
          if (ths.$route.query.prodId && ths.currentShopId == ths.$route.query.shopId ) {
            ths.sendProd(ths.$route.query.prodId,1)
          }
          if (ths.$route.query.orderNumber && ths.currentShopId == ths.$route.query.shopId ) {
            ths.sendProd(ths.$route.query.orderNumber,2)
          }

          ths.selectedF = ths.currentShopId
        }

        /**
         * 未读信息转成已读
         */
        if (result.code === 5) {

          // if (ths.userSend) {
          //   ths.userRead = false
          //   ths.userSend = false
          //   let msgItem = ths.messageInfo
          //   ths.msgList.push(msgItem)
          //   ths.lastTime = msgItem.timeStr
          // }

          ths.msgList.forEach((item) => {
            ths.$set(item, 'employeeUnread', 1)
          })

          ths.scrollToBottom()

        }

        if (result.code == 10 || result.code == 11 || result.code == 12) {
          ths.$confirm(ths.$i18n.t('chat.reConsultation'), {
            confirmButtonText: ths.$i18n.t('chat.reconsultationBtn'),
            cancelButtonText: ths.$i18n.t('chat.close')
          }).then(() => {
            location.reload()
          }).catch(() => {
            window.close()
          })
          return
        }

        if (result.code === 16) {
          ths.shopList.forEach(item=>{
            if (item.chatType === result.data.chatType && item.shopId === result.data.shopId ) {
              item.isOnline = result.data.onlineOrOffline
            }
          })
        }

        if (!result.data) {
          return
        }

        // 新的聊天信息
        if (result.code === '00000' || result.code === 4) {
          let index = null
          // 进行未读消息的加减
          if (ths.shopList.length && result.code !== 4) {
            ths.shopList.some((item, indexx) => {
              console.log(item.userId, result.data.userId, 'result.data.userId', item.userId === result.data.userId)
              if (item.userId === result.data.userId) {
                index = indexx
              }
            })
            if (index != null && ths.selectedF !== result.data.userId && result.data.userUnread) {
              ths.shopList[index].unread = Number(ths.shopList[index].unread) + 1
            }
          }
          if (ths.msgList.length) {
              // 时间转换
              let prevTime = util.tsToDate(
                ths.msgList[ths.msgList.length - 1].timestamp,
                'M月D日 h:m'
              )
              let nowTime = util.tsToDate(result.data.timestamp, 'M月D日 h:m')
              if (
                prevTime.slice(0, prevTime.indexOf(' ')) ===
                nowTime.slice(0, nowTime.indexOf(' '))
              ) {
                result.data.timeStr = util.tsToDate(new Date().getTime(), 'h:m')
              } else {
                result.data.timeStr = util.tsToDate(
                  new Date().getTime(),
                  'M月D日 h:m'
                )
              }
          }

          if (result.data.shopId === Number(ths.currentShopId)){

              let readed = {
                read: 1,
                msgIds: [result.data.itemId],
                toId: ths.currentShopId,
                sendType: ths.chatType,
                readNoticeEmployeeId:result.data.employeeId
              }
              ths.imSocketTask.send(JSON.stringify(readed))

          }

          ths.changeFriendsWhenMsg(result.data)
          if (result.data.shopId === Number(ths.currentShopId) && result.data.chatType === Number(ths.chatType)) {
            ths.pushMsgItem(1, result.data)
          }

        }

      }
      // 心跳检测, 每隔一段时间检测连接状态，如果处于连接中，就向server端主动发送消息，来重置server端与客户端的最大连接时间，如果已经断开了，发起重连。
      var heartCheck = {
        timeout: 19000, // 19s发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。 尽量一个小时发送三次
        serverTimeoutObj: null,
        reset: function () {
          clearTimeout(this.serverTimeoutObj)
          return this
        },
        start: function () {
          this.serverTimeoutObj = setTimeout(function () {
            if (!ths.imSocketTask) {
              return
            }
            if (ths.imSocketTask.readyState == 1) {
              console.log('连接状态，发送消息保持连接')
              ths.getOnlineStatus()
              ths.imSocketTask.send(
                JSON.stringify({
                  sendType: ths.chatType,
                  content: 'HEART_BEAT',
                  msgType: 0,
                  toId: ths.currentShopId,
                })
              )
              heartCheck.reset().start() // 如果获取到消息，说明连接是正常的，重置心跳检测
            } else {
              ths.imSocketTask.close()
              ths.imSocketTask = null
              ths.lockReconnect = false
              // ths.$message.error(ths.$i18n.t('chat.sorryYouHaveBeenDisconnected'))
              console.log('断开状态，尝试重连')
              ths.openWs()
            }
          }, this.timeout)
        },
      }
      this.imSocketTask.onclose = (res) => {
        if (this.plooTime < 3) {
          this.plooTime++
          if(this.lockReconnect) return;
          this.lockReconnect = true;
          setTimeout(()=>{     //没连接上会一直重连，设置延迟避免请求过多
            this.openWs()
            this.lockReconnect = false;
          }, 2000);
        } else {
          this.$confirm(ths.$i18n.t('chat.connetBroken'), ths.$i18n.t('chat.tips'), {
            confirmButtonText: ths.$i18n.t('chat.confirm'),
            cancelButtonText: ths.$i18n.t('chat.cancel'),
            type: 'warning'
          }).then(() => {
            location.reload()
          }).catch(() => {

          })
        }
      }
    },

    // websock断线重连
    reconnect() {
      if(this.lockReconnect) return;
      this.lockReconnect = true;
      setTimeout(()=>{     //没连接上会一直重连，设置延迟避免请求过多
        this.openWs()
        this.lockReconnect = false;
      }, 2000);

    },

    /**
     * 获取左侧商家栏信息
     */
    getConversations() {
      this.$axios
        .post('/p/user/conversations?current=' + this.shopCurrent + '&size=20')
        .then(({ data }) => {

          if (data.records && data.records.length) {

            data.records.forEach((item, index) => {
              // this.totalUserUnreads.push({
              //   shopId:item.shopId,
              //   unread:item.unread
              // })
              let a = this.isJSON(item.latestMsg)
              if (item.type === 1) {
                item.latestMsg = '[' + this.$i18n.t('publics.image') + ']'
              } else if (a && JSON.parse(item.latestMsg) instanceof Object) {
                item.latestMsg = '[' + this.$i18n.t('publics.image') + ']'
              }

              //判读商家有无在记录栏里
              if (item.shopId == this.currentShopId && item.chatType == this.chatType) {
                this.shopName = item.friendName
                this.isOnline = item.isOnline
                data.records.splice(index, 1)
              }
            })

            //sort按时间正序排序 最新的消息在前面
            data.records.sort(function(a,b){
                return b.timestamp - a.timestamp
            });

          }
          if (this.shopList.length >= 1) {
            this.shopList.forEach(item => {
              data.records = data.records.filter(itemInde => {
                return item.shopId !== itemInde.shopId && item.chatType === itemInde.chatType
              })
            }) // 过滤左侧已存在的店家
            this.shopList = this.shopList.concat(data.records)
          } else {
            this.shopList = data.records
            this.selectedF = this.currentShopId
            console.log(data.records,'sho');
            this.openWs()
          }
            this.shopPages = data.pages
            if(data.pages==1 || data.pages==0){
              this.getNewShop()
            }
            // this.getOnlineStatus()
        })
    },

    // 添加新的商家栏到左侧

    getNewShop(){

      if(this.$route.query.chatType==1){
        let data={
          shopId:1,
          chatType:1,
          unread:0,
          isOnline: this.isOnline,
          friendName:this.shopName?this.shopName:'admin'
        }
        this.shopList.unshift(data)
      }else{
        this.$axios
        .get('/shop/headInfo', {
          params: {
            shopId: this.currentShopId,
          },
        })
        .then(({ data }) => {
          data.pic = data.shopLogo
          data.chatType = 2
          data.unread = 0
          data.friendName = data.shopName
          data.isOnline = this.isOnline
          this.shopName = data.shopName
          this.shopList.unshift(data)
        })
      }
      this.getRecentBrowse()
    },

    /**
     * 有消息过来的时候，改变左边历史联系人列表（先删除消息对应联系人的信息，再将联系人放到第一个）
     */
    changeFriendsWhenMsg(msgItem) {
      // 消息内容
      let msgContent = ''
      // 图片消息
      if (msgItem.type === 1) {
        msgContent = '[' + this.$i18n.t('publics.image') + ']'
      } else {
        msgContent = msgItem.content
      }
      for (var i = 0; i < this.shopList.length; i++) {
        var item = this.shopList[i]
        // 更新最新消息
        if (msgItem.shopId == item.shopId && msgItem.chatType == item.chatType) {
          item.latestMsg = msgContent
          item.timeStr = msgItem.timeStr
          this.shopName = item.friendName
          msgItem.unread = item.unread
          this.shopList.splice(i, 1)
          break
        }
      }
        // 新消息
        this.shopList.unshift({
          chatType: msgItem.chatType,
          pic: msgItem.shopLogo,
          friendName: msgItem.shopName,
          latestMsg: msgContent,
          isOnline: true,
          shopId: msgItem.shopId,
          userId: msgItem.userId,
          unread: msgItem.unread,
          message: (msgItem.shopId === this.currentShopId && msgItem.chatType === this.chatType) ? 0 : 1
        })
    },

    /**
     * 换个商家聊条
     */
    changeImContent(itemUserId, chatType, index , item) {
      console.log(item,'这是切换联系商家');
      if (this.currentShopId === itemUserId && this.chatType === chatType) {
        return
      }
      this.shopList[index].message = 0
      this.shopName = this.shopList[index].friendName
      this.currentShopId = itemUserId
      this.selectedF = itemUserId
      this.totalUserUnreadsIndex = index
      this.chatType = chatType
      this.shopCurrent = 1
      //切换商家 我的订单变更
      this.orderList = []
      this.orderCurrent = 1
      this.chatMessageCurrent = 1
      this.loading = false
      // 有多少条未读消息
      // this.totalUserUnreadsIndex = index
      this.tabSwitch(0)
      this.getOnlineStatus()
      let time = setTimeout(() => {
        this.getMsgItems()
        this.getRecentBrowse() //获取最近浏览商品
        clearTimeout(time)
      }, 100)
    },

    //判断是否为JSON格式
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          JSON.parse(str)
          return true
        } catch (e) {
          return false
        }
      }
    },

    /**
     * 获取聊天记录
     */
    getMsgItems() {
      let messageInfo = {
        history: true,
        current: this.chatMessageCurrent,
        size: 10,
        sendType: this.chatType, // 1是平台  2 是商家
        toId: this.currentShopId,
      }
      try {
        this.imSocketTask.send(JSON.stringify(messageInfo))
      } catch (error) {
        this.$message({
          message: '连接已断开请刷新一下页面',
          type: 'error',
          duration: 1000
        })
      }
    },

    // 获取当前商家在线离线状态
    getOnlineStatus() {
      let status = {
        onlineOrOffline: true,
        sendType: this.chatType,
        toId: this.currentShopId
      }
      try {
        this.imSocketTask.send(JSON.stringify(status))
      } catch (error) {
        this.$message({
          message: '连接已断开请刷新一下页面',
          type: 'error',
          duration: 1000
        })
      }
    },
    /**
     * 获取我的订单列表
     */
    getOrderList() {
      let params = {
        current: this.orderCurrent,
        size: this.size,
        status: 0,
        shopId: this.chatType==1?'':this.currentShopId,
        orderName: '',
        orderTimeStatus: this.orderTimeStatus || '',
        orderType: '',
        orderNumber: '',
        orderMold: -1
      }
      this.$axios
        .get('/p/myOrder/myOrderSearch', {
          params,
        })
        .then(({ data }) => {
          data.records.forEach((order) => {
            order.useScoreTotal = 0
            order.orderItemDtos.forEach((orderItem) => {
              if (orderItem.useScore) {
                order.useScoreTotal += orderItem.useScore
              }
              orderItem.status = order.status
            })
          })

          if (this.orderList.length >= 1) {
            this.orderList = this.orderList.concat(data.records)
            let obj = {}
            this.orderList = this.orderList.reduce((cur,next) => {
                obj[next.orderNumber] ? "" : obj[next.orderNumber] = true && cur.push(next);
                return cur;
            },[]) //设置cur默认类型为数组，并且初始值为空的数组
          } else {
            this.orderList = data.records
          }

          this.orderPages = data.pages

        })
    },


    // 获取最近浏览信息
     getRecentBrowse(){
       //最近浏览功能
       const params = new URLSearchParams();
       params.append('shopId', this.currentShopId);
        this.$axios({
          method: 'post',
          url:'/p/user/recentBrowse',
          data:params
        })
        .then(({ data }) => {
          this.reBrowseList = data
          this.reBrowseList.forEach(item=>{
            item.pic = this.picDomain + item.pic
          })
        })
     },
    /**
     * textarea回车事件
     */
    messageSendlisten(event) {
      if (event.keyCode === 13) {
        this.sendText(1) // 发送文本
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    },

    /**
     * 发送消息
     */
    sendText(type, prod, orderType, actualTotal) {
      // type 1 = 发送消息  type 2 = 发送商品链接  type 3 = 右侧我的订单发送  type 4 = 发送订单号
       let orderProd = null
       let product = prod?JSON.parse(JSON.stringify(prod)):null //避免接下来的操作改变原数组
      if (type === 1 ) {
        if (this.textMsg === '' || this.textMsg.match(/^\s+$/)) {
          return
        }
      }

      if (type === 3) {
        product.imgs = product.pic
        product.actualTotal = product.price
        // product.orderFlag = true
        orderProd = JSON.stringify(product)
      }

      if (type === 4) {
        product.imgs = product.pic
        product.orderFlag = true
        product.orderType = orderType
        product.actualTotal = actualTotal
        // product.status = status
        // product.actualTotal = actualTotal
        orderProd = JSON.stringify(product)
      }

      let messageInfo = {
        toId: this.currentShopId,
        content: type == 1 ? this.textMsg : JSON.stringify(this.prodInfo),
        msgType: 0,
        sendType: this.chatType, // 1发给平台   2发给商家
      }

      // 避免发送订单发送内容覆盖商品发送链接
      if ( type!==2&&type!==1 ){
        messageInfo.content=orderProd
      }

      this.userRead = true
      this.userSend = true
      this.addMessage(messageInfo)
      this.textMsg = ''

    },
    /**
     * @param {Object} messageInfo
     * 将新发送的消息添加至页面
     */
    addMessage(messageInfo) {
      this.userRead = true
      this.userSend = true
      this.imSocketTask.send(JSON.stringify(messageInfo))
      if (messageInfo.msgType === 1) {
        messageInfo.content = config.picDomain + messageInfo.content
      }

      // 发送商品链接需要由JSON格式转换为对象
      let a = this.isJSON(messageInfo.content)

      if (a && JSON.parse(messageInfo.content) instanceof Object) {
        messageInfo.prodInfo = JSON.parse(messageInfo.content)
      }

      let msgItem = {
        userName: this.userName,
        userHeadUrl: this.userImg,
        type: messageInfo.msgType,
        source: 2,
        timestamp: new Date().getTime(),
        content: messageInfo.content,
        prodInfo: messageInfo.prodInfo,
      }

      if (this.msgList.length) {
        let prevTime = util.tsToDate(
          this.msgList[this.msgList.length - 1].timestamp,
          'M月D日 h:m'
        )
        let nowTime = util.tsToDate(new Date().getTime(), 'M月D日 h:m')
        if (
          prevTime.slice(0, prevTime.indexOf(' ')) ==
          nowTime.slice(0, nowTime.indexOf(' '))
        ) {
          msgItem.timeStr = util.tsToDate(new Date().getTime(), 'h:m')
        } else {
          msgItem.timeStr = util.tsToDate(new Date().getTime(), 'M月D日 h:m')
        }
        let timeFlag = this.timeBeApart(this.msgList[this.msgList.length - 1].timestamp, new Date().getTime())
        if (timeFlag) {
          delete msgItem.timeStr
        }
      }

      	this.messageInfo = msgItem // 发送的信息存储起来，用于已读未读
        msgItem.timestamp = new Date().getTime()
        this.msgList.push(msgItem)
        // this.lastTime = msgItem.timeStr
        this.scrollToBottom()

				// let time = setTimeout(() => {


        // if (this.msgList.length) {
        //   let prevTime = util.tsToDate(
        //     this.msgList[this.msgList.length - 1].timestamp,
        //     'M月D日 h:m'
        //   )
        //   let nowTime = util.tsToDate(new Date().getTime(), 'M月D日 h:m')
        //   if (
        //     prevTime.slice(0, prevTime.indexOf(' ')) ==
        //     nowTime.slice(0, nowTime.indexOf(' '))
        //   ) {
        //     msgItem.timeStr = util.tsToDate(new Date().getTime(), 'h:m')
        //   } else {
        //     msgItem.timeStr = util.tsToDate(new Date().getTime(), 'M月D日 h:m')
        //   }
        // }

				// if ( this.userRead ) {

        //   this.userSend = false
				// }; clearTimeout(time) }, 100)

    },

    /**
     * 添加联系人发送过来的消息内容
     */
    pushMsgItem(msgList, msgItem) {
      if (msgItem.type === 1) {
        msgItem.content = config.picDomain + msgItem.content
      }

      let a = this.isJSON(msgItem.content)
      if (a && JSON.parse(msgItem.content) instanceof Object) {
        msgItem.prodInfo = JSON.parse(msgItem.content)
      }

      if (this.msgList.length) {
        let prevTime = util.tsToDate(this.msgList[this.msgList.length - 1].timestamp, 'M月D日 h:m')
        let nowTime = util.tsToDate(msgItem.timestamp, 'M月D日 h:m')
        if (prevTime.slice(0, prevTime.indexOf(' ')) === nowTime.slice(0, nowTime.indexOf(' '))) {
          msgItem.timeStr = util.tsToDate(new Date().getTime(), 'h:m')
        } else {
          msgItem.timeStr = util.tsToDate(new Date().getTime(), 'M月D日 h:m')
        }
        let timeFlag = this.timeBeApart(this.msgList[this.msgList.length - 1].timestamp, new Date().getTime())
        if (timeFlag) {
          delete msgItem.timeStr
        }
      } else {
        msgItem.timeStr = this.tsToDate(new Date().getTime(), 'M月D日 h:m')
      }

      msgItem.timestamp = new Date().getTime()
      this.msgList.push(msgItem)

      this.scrollToBottom()
    },

    // 发送商品或订单链接
     sendProd(id,type) {
				// type 1 = 商品链接  type 2 = 订单链接
				let prodInfo = null
        this.$axios
        .get(type==1?"/prod/prodInfo?prodId="+id:"/p/myOrder/orderDetail?orderNumber="+id).then(res=>{
          var res = res.data
          console.log(res,'这是请求来的数据');
          if ( type == 1 ){
							prodInfo = {
								imgs: res.pic,
								prodId: res.prodId,
								prodName: res.prodName,
								skuName: res.skuName,
								price: res.price,
								prodId: res.prodId,
                shopId: res.shopId?res.shopId:1,
								orderType: res.prodType,
								actualTotal: res.price
							}
						} else {
							let orderItem = res.orderItemDtos[0]
							console.log(res.orderItemDtos.length);
							prodInfo = {
								imgs: orderItem.pic,
								prodId: orderItem.prodId,
								orderNumber: this.$route.query.orderNumber,
								skuName: orderItem.skuName,
								prodName: orderItem.prodName,
								price: res.actualTotal,
								prodId: orderItem.prodId,
                shopId: orderItem.shopId?Number(orderItem.shopId):1,
                orderType: res.orderType,
								actualTotal:res.actualTotal,
								useScore:res.orderScore,
								status:res.status,
								orderType: res.orderType,
								orderFlag:true // 订单判断
							}
						}

            this.prodInfo = prodInfo

						let msgItem = {
							source: 3, //表示产品链接
							timestamp: new Date().getTime(),
							toId: this.shopId,
							prodInfo,  //产品链接详情
							msgType: 0,
							sendType: this.sendType // 1发给平台   2发给商家
						}

						msgItem.timeStr = util.tsToDate(new Date().getTime(), 'M月D日 h:m')

            this.msgList.push(msgItem)
            if (this.chatMessageCurrent === 1) {
              this.scrollToBottom()
            }

        })
			},

    // 发送图片
    toolEvent() {
      if (this.$refs['file'].files[0]) {
        this.selectFileobj = this.$refs['file'].files[0]
      }
      if (this.selectFileobj) {
        const formData = new FormData();
        formData.append("file",this.selectFileobj)

        this.$axios({
          url: '/p/file/uploadImFile',
          method: 'post',
          data: formData
        }).then(({ data }) => {
          let messageInfo = {
            toId: this.currentShopId,
            content: data.filePath,
            sendType: this.chatType,
            msgType: 1,
          }
          this.$refs['file'].value = null //解决上传同一图片不显示bug
          this.addMessage(messageInfo)
        })

      }
    },

    /**
     * 链接点击去往商品详情
     */
    toProdDetail(prodInfo,type,orderType) {
      // type 1 点击订单跳转 type
      let routeUrl = null
      if (Cookie.get('token')) {

         if (type) {
           console.log(1111);
            routeUrl = this.$router.resolve({
              path: '/order-detail?orderNumber=' + prodInfo.orderNumber
            })
         }
         // 秒杀商品
         else if (this.$route.query.seckill) {
          routeUrl = this.$router.resolve({
            path: '/secdetail/' + this.$route.query.seckill
          })
        }
        // 积分商品
        else if(orderType===3){
          routeUrl = this.$router.resolve({
            path: '/member-center/integral-det/' + prodInfo.prodId
          })
        }
        // 普通商品
        else {
          routeUrl = this.$router.resolve({
            path: '/detail/' + prodInfo.prodId
          })
        }
        window.open(routeUrl.href, '_blank')
      } else {
        this.showLogin = true
      }
    },

    /**
     * 进行相隔时间判断
     *
     * true 删除显示时间
     * false 保留显示时间
     */
    timeBeApart (uppTime, preTime) {
      if (!uppTime) {
        return false
      }
      var dateDiff = preTime - uppTime// 时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000))// 计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000)    // 计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000))// 计算出小时数
      // 计算相差分钟数
      var leave2 = leave1 % (3600 * 1000)    // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000))// 计算相差分钟数

      // console.log('相差' + dayDiff + '天')
      // console.log('相差' + hours + '小时')
      // console.log('相差' + minutes + '分钟')

      if (dayDiff >= 1 || hours >= 1 || minutes > 4) {
        return false
      } else {
        return true
      }
    },

    /**
     * 滚动条自动到底部
     */
    scrollToBottom() {
      this.$nextTick(() => {
        let msg = document.getElementsByClassName('display-infor')[0] // 获取对象
        msg.scrollTop = msg.scrollHeight // 滚动高度
      })
    },

    /**
     * 主体消息点击加载更多
     */
    moreInfo() {
      this.chatMessageCurrent += 1
      if (this.chatMessageCurrent > this.chatMessagePages) {
        this.moreMess = false
      } else {
        this.getMsgItems()
      }
    },

    /**
     * 滚动加载订单
     */
    scrollOrderList() {
      this.orderCurrent += 1
      if (this.orderCurrent > this.orderPages) {
        this.loading = true
      } else {
        this.getOrderList()
        this.loading = false
      }
    },

    /**
     * 滚动加载左侧商家联系
     */
    scrollShopList() {
      this.shopCurrent +=1
      if (this.shopCurrent > this.shopPages) {
        this.shopLoading = true
      } else {
        this.getConversations()
        this.shopLoading = false
      }
    },

    // 点击放大图片
    // onBigImg (img) {
    //   this.bigImg = img
    // },

    /**
     * 账号下线前往登录
     */
    goToLogin() {
      Cookie.remove('token')
      this.$router.push('/login')
      this.isPopup = false
    }
  },
  beforeDestroy () {
    if (this.imSocketTask != null) {
      this.imSocketTask.close()
    }
  },
}
</script>

<style scoped>

  .body {
  width: 100%;
  height: 100vh;
  background-color: #2e2f3d;
  position: fixed;
}

.base {
  min-height: 535px;
  padding-bottom: 0rem !important;
  flex-direction: column;
}
.body .chat-box {
  width: 1200px;
  height: 797px;
  display: flex;
  background: #ffffff;
  opacity: 1;
  margin: 61px auto 0 auto;
}

/* 左侧用户名和商家栏样式 */
.body .chat-box .chat-box-left {
  width: 287px;
  height: 100%;
  background: #ffffff;
  opacity: 1;
  border-right: 1px solid #eceef0;
  overflow: auto;
}

.chat-box-left .user-name {
  display: flex;
  width: 100%;
  height: 61px;
  background: #e1251b;
  opacity: 1;
}

.chat-box-left .user-name1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 3; */
  -webkit-box-orient: vertical;
  position: relative;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-all;
}

.chat-box-left .user-name img {
  width: 43px;
  height: 43px;
  background: #f3f6fa;
  margin: 8px 11px 8px 15px;
  opacity: 1;
  border-radius: 3px;
}

.chat-box-left .user-name span {
  display: inline-block;
  width: 187px;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 4;
  font-size: 16px;
  color: #fff;
  font-family: Microsoft YaHei;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-box-left .shop-list {
  height: 736px;
  overflow-y: auto;
}

.chat-box-left .shop-list .shop-item {
  display: flex;
  align-items: center;
  background-color: #f2f5f9;
  cursor: pointer;
}

.chat-box-left .shop-list .shop-item:hover {
  background-color: #d2e6f9;
}

.chat-box-left .shop-item img {
  width: 36px;
  height: 36px;
  margin: 12px 12px 12px 15px;
}

.chat-box-left .shop-item .shop-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.chat-box-left .shop-item .shop-info .shop-info-name {
  width: 70%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  word-break: break-all;
}

.chat-box-left .shop-item .shop-info .shop-info-icon {
  /* width: 32px;
  height: 16px; */
  width: 24%;
  height: 50%;
  padding: 1px 2px;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #ffffff;
  opacity: 1;
  background: #e1251b;
  margin-right: 15px;
  opacity: 1;
  border-radius: 2px;
}

.chat-box-left .shop-item .shop-info .ye {
  background-color: #ffc267;
}

/* 右侧主要信息聊天栏 */
.body .chat-box .chat-box-right {
  width: 100%;
  height: 100%;
}

.chat-box-right .shop-name-tittle {
  line-height: 20px;
  padding: 20px 0px 21px 21px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  border-bottom: 1px solid #ebedf0;
}
.shop-name-tittle .shopStatus {
  margin: 5px;
}
.shop-name-tittle .in {
  color: red
}
.shop-name-tittle .out {
  color: #999
}
.chat-box-right .im-box {
  display: flex;
}

.chat-box-right .im-main {
  width: 602px;
  height: 735px;
  border-right: 1px solid #ebedf0;
}

.im-main .chat-main-form {
  position: relative;
  display: flex;
  flex-direction: column;
}

.im-main .chat-main-form .display-infor {
  height: 588px;
  padding-top: 15px;
  overflow-y: auto;
  box-sizing: border-box;
}

.im-main .chat-main-form .reply {
  width: 100%;
  height: 147px;
  border-top: 1px solid #ebedf0;
  position: relative;
}

.im-main .chat-main-form .reply .upload {
  width: 22px;
  height: 18px;
  background-image: url('../assets/images/chat/upload.png');
  margin: 17px 0 8px 22px;
  cursor: pointer;
}

.im-main .chat-main-form .reply .upload:hover {
  background-image: url('../assets/images/chat/upload-on.png');
}

.im-main .chat-main-form .reply .reply-area textarea {
  margin-left: 12px;
  border: none;
  resize: none;
  width: 98%;
}

.im-main .chat-main-form .reply .send {
  width: 62px;
  height: 26px;
  line-height: 26px;
  position: absolute;
  right: 20px;
  bottom: 16px;
  text-align: center;
  background: #e1251b;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  border-radius: 13px;
}

/* 主要聊天信息栏 */

.row {
  padding: 30rpx;
}
.row:first-child {
  margin-top: 20upx;
}

.row .my .left,
.row .other .right {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}

.row .my .left .bubble,
.row .other .right .bubble {
  max-width: 70%;
  font-size: 14px;
  min-height: 42px;
  padding: 12px 14px 11px 16px;
  word-break: break-word;
  box-sizing: border-box;
}

.row .my .left .bubble .longimage,
.row .other .right .bubble .longimage {
  width: 100px;
  height: 100px;
}

.row .my .left .bubble .squareimage,
.row .other .right .bubble .squareimage {
  width: 300rpx;
  height: 300rpx;
}

.row .my .left .bubble.red-envelope .blessing,
.row .other .right .bubble.red-envelope .blessing {
  position: absolute;
  bottom: 14%;
  color: #e9b874;
  width: 80%;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.row .my .right,
.row .other .left {
  flex-shrink: 0;
  width: 80upx;
  height: 80upx;
  margin-top: 20px;
  margin-left: 12px;
}

.row .my .right .avatar,
.row .other .left .avatar {
  width: 34px;
  height: 34px;
  margin-right: 20px;
}

.row .my .right image,
.row .other .left image {
  width: 80upx;
  height: 80upx;
  border-radius: 10upx;
}

.row .my {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.row .my .left {
  min-height: 80upx;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.row .my .left .bubble {
  background-color: #d0e9ff;
  color: #000;
  opacity: 1;
  border-radius: 8px 0rem 8px 8px;
}

.row .other .right .bubble {
  opacity: 1;
  border-radius: 0rem 8px 8px 8px;
}

.row .my .left .no-bg {
  background-color: none;
}

@keyframes my-play {
  0% {
    transform: translateX(80%);
  }

  100% {
    transform: translateX(0%);
  }
}

.row .my .left .bubble.play .icon:after {
  border-left: solid 10upx rgba(240, 108, 122, 0.5);
  animation: my-play 1s linear infinite;
}

.phone-icon {
  width: 60rpx;
  height: 60rpx;
}

.row .my .right {
  margin-left: 15upx;
}

.row .other {
  width: 100%;
  display: flex;
}

.row .other .left {
  margin-right: 15upx;
}

.row .other .right {
  flex-wrap: wrap;
  margin-left: -8px;
}

.row .other .right .username,
.row .my .left .username {
  width: 100%;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  margin-bottom: 5px;
  color: #a1a6af;
  color: #999;
  display: flex;
  align-items: center;
}

.row .my .left .username {
  justify-content: flex-end;
}

.row .my .left .username .name {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row .my .left .username .time {
  text-align: center;
  margin-left: 40rpx;
}

.row .other .right .username .name {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row .other .right .bubble {
  background-color: #f3f3f3;
  color: #333;
}

@keyframes other-play {
  0% {
    transform: translateX(-80%);
  }

  100% {
    transform: translateX(0%);
  }
}

.row .other .right .bubble.play .icon:after {
  border-right: solid 10upx rgba(255, 255, 255, 0.8);
  animation: other-play 1s linear infinite;
}

.windows .mask {
  position: fixed;
  top: 100%;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.windows .layer {
  position: fixed;
  width: 80%;
  height: 70%;
  left: 10%;
  z-index: 1001;
  border-radius: 20upx;
  overflow: hidden;
  top: 100%;
  transform: scale3d(0.5, 0.5, 1);
  transition: all 0.2s ease-out;
}

.windows.show {
  display: block;
}

.windows.show .mask {
  top: 0;
  opacity: 1;
}

.windows.show .layer {
  transform: translate3d(0, -85vh, 0) scale3d(1, 1, 1);
}

.windows.hide {
  display: block;
}

.windows.hide .mask {
  top: 0;
  opacity: 0;
}

.open-redenvelope {
  width: 100%;
  height: 70vh;
  background-color: #cf3c35;
  position: relative;
}

.open-redenvelope .top {
  width: 100%;
  background-color: #fe5454;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 0 0 100% 100%;
  box-shadow: inset 0 -20upx 0 #9c1712;
  margin-bottom: 65upx;
}

.open-redenvelope .top .close-btn {
  width: 100%;
  height: 80upx;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30upx;
}

.open-redenvelope .top .close-btn .icon {
  color: #9c1712;
  margin-top: 10upx;
  margin-right: 10upx;
}

.open-redenvelope .top image {
  width: 130upx;
  height: 130upx;
  border: solid 12upx #cf3c35;
  border-radius: 100%;
  margin-bottom: -65upx;
}

.open-redenvelope .from,
.open-redenvelope .blessing,
.open-redenvelope .money,
.open-redenvelope .showDetails {
  width: 90%;
  padding: 5upx 5%;
  display: flex;
  justify-content: center;
  font-size: 32upx;
  color: #fff;
}

.open-redenvelope .money {
  font-size: 100upx;
  color: #f8d757;
  display: flex;
  padding-top: 20upx;
}

.open-redenvelope .showDetails {
  position: absolute;
  bottom: 20upx;
  align-items: center;
  font-size: 28upx;
  color: #f8d757;
}

.open-redenvelope .showDetails .icon {
  font-size: 26upx;
  color: #f8d757;
}

.flex-wrap {
  flex: auto;
}

/* 返回图标 */
.back-icon {
  position: absolute;
  left: 0;
  top: 36rpx;
  width: 50rpx;
  height: 30rpx;
  transform: rotate(90deg);
}

.shop-tit {
  text-align: center;
  max-width: 80%;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 系统提示 */
.sys-tips {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tips-content {
  color: #999999;
  font-size: 28rpx;
}

/* 中间时间样式 */
.topTime {
  text-align: center;
  margin-bottom: 15px;
  height: 28rpx;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28rpx;
  color: #aaaaaa;
  opacity: 1;
}

/* 右侧正在查询和我的订单 */
.order-column {
  flex: 1;
}

.order-column .tab-switch {
  display: flex;
  height: 37px;
}

.order-column .inquiry,
.order-column .my-order {
  flex: 1;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid #eceef0;
  background: #f8f8f8;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  opacity: 1;
}

.order-column .active {
  color: #e1251b;
  background-color: #fff;
  border: none;
}

.order-column .browse {
  width: 100%;
  border-bottom: 1px solid #eceef0;
  text-align: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  color: #666666;
  opacity: 1;
}

.order-column .text {
  width: 100px;
  padding: 11px 0 5px 0rem;
  margin: auto;
  border-bottom: 2px solid #e1251b;
}

/* 订单商品详情 */
.recent-list,
.order-list {
  padding-left: 12px;
  height: 660px;
  overflow-y: auto;
}

.prod-item {
  display: flex;
  padding: 18px 0;
  border-bottom: 1px solid #eceef0;
  border-top: 1px solid #eceef0;
  margin-top: -1px;
}

.order-column .order-list .botl {
  border-bottom: 9px solid #faf9f9;
  flex-direction: column;
  padding-bottom: 0;
}

.prod-item .prod-detail {
  padding-right: 12px;
  flex: 1;
}
/* .prod-detail .prod-name {
  cursor: pointer;
} */
.prod-item img {
  width: 60px;
  height: 60px;
  margin-right: 12px;
}

.prod-item .prod-name {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #333333;
  opacity: 1;
  word-break: break-word;
}

.prod-item .interval {
  width: 100%;
  height: 10px;
  background: #faf9f9;
  opacity: 1;
}

.prod-b {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.prod-b .prod-price {
  margin-top: 5px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #e1251b;
  opacity: 1;
}

.prod-b .prod-send {
  padding: 0 5px;
  /* width: 46px; */
  height: 24px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #e9eaec;
  opacity: 1;
  border-radius: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 24px;
  color: #333333;
  opacity: 1;
}

.prod-b .prod-send:hover {
  border: 1px solid #e1251b;
  color: #e1251b;
}

/* 我的订单样式 */
.order-box {
  display: flex;
}

.order-number {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebedf0;
  margin-bottom: 12px;
}
.order-box .number,
.order-box .time {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  color: #666666;
  opacity: 1;
}

.order-number .number {
  cursor: pointer;
  display: inline-block;
  margin-right: 16px;
}
.order-number .send-number {
  display: inline-block;
  margin-right: 22px;
  cursor: pointer;
}
.order-number .send-number:hover {
  color:#e1251b
}

.order-list .bottom-tips, .recent-list .bottom-tips {
  text-align: center;
  padding-top: 20px;
}

/* 发送链接样式 */
.link-box {
  padding: 10px 10px 0 10px;
  margin: 0 90px 20px 90px;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  opacity: 1;
}
.link-box .prod-number {
  margin-bottom: 2px;
  cursor: pointer;
}
.link-prod {
  display: flex;
  padding-bottom: 9px;
  border-bottom: 1px solid #eeeeee;
  cursor: pointer;
}
.link-prod img {
  width: 88px;
  height: 88px;
}
.link-prod .link-detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 1px;
  margin-left: 13px;
}
.link-detail .prod-name {
  font-size: 10px;
  font-family: PingFang SC;
  padding-top: 5px;
  font-weight: 400;
  color: #333333;
  opacity: 1;
  word-break: break-word;
  cursor: pointer;
}
.link-prod .prod-price {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: PingFang SC;
  padding-bottom: 5px;
  font-weight: 400;
  color: #999999;
  opacity: 1;
  word-break: break-all;
}
.link-prod .payment-amount {
  flex: 1;
}
.link-prod .prod-status {
  width: 35%;
  text-align: end;
}
.link-send {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 49px;
  text-align: center;
  color: #e43130;
  cursor: pointer;
}
.link-send-right {
  width: 5px;
  height: 9px;
  margin-left: 7px;
  display: inline-block;
  background: url('../assets/images/chat/link-send.png');
}

/* 商品链接样式 */
.prod-link {
  width: 75%;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px 13px 0px 12px;
  cursor: pointer;
}
.prod-number{
  cursor: pointer;
}
.prod-link .prod-number{
  margin-top: -7px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eceef0;
  padding-bottom: 5px;
}
.prod-link .prod-number:hover{
  color: #9c1712;
}

.prod-no {
  padding: none;
  border-bottom: none;
}

.left .message-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 已读未读 */
.unread {
  font-size: 12px;
  color: #aaaaaa;
  margin-right: 9px;
}

/* 图片上传 */
.search-btnn {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.imgUp {
  display: inline-block;
  position: absolute;
  height: 18px;
  left: 22px;
  top: 17px;
}
.imgUp:hover {
  background-image: url('../assets/images/chat/upload-on.png');
  cursor: pointer;
}
/* 图片放大 */
/*遮罩层样式*/
.img-layer {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*不限制图片大小，实现居中*/
/* .img-layer .img {
  max-width: 70%;
  max-height: 70%;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
  cursor: pointer;
}
.img-layer img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: contain
} */
/* 点击加载更多 */
.display-infor .more {
  font-size: 12px;
  color: #5a606b;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
/* 重新登录提示弹窗 */
.login-baBox {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #2e2f3d;
}

.un-read-tips {
  background-color: #fff;
  padding: 15px;
  padding: 5px 10px 5px 10px;
  font-size: 12px;
  border-radius: 20px 20px 20px 20px;
  position: absolute;
  color: #E43130;
  top: 10px;
  right: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-shadow: 1px 1px 5px 0 #aaa;
  box-shadow: 1px 1px 5px 0 #aaa;
}
.un-read-icon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  margin-bottom: 1px;
}


@media screen and ( max-width: 1680px ){

.body .chat-box {
    opacity: 1;
    /* width: 960px; */
    margin: 20px auto 20px auto;
}
.body{
   position: absolute;
   height: calc(100vh + 200px)
   /* height: auto; */
}

}

/* 新消息过来 背景颜色 以及 选中的背景颜色 */
.chat-box-left .shop-list .newMessage{
 background-color: #FFF9cd;
}
.chat-box-left .shop-list .changeUser{
  background-color: #D2E6F9;
}

/* 放大图片的右侧关闭图标 */
.bubble /deep/ .el-image-viewer__close{
  color:red !important
}

</style>