web/im/src/views/message/index.vue

<template>
  <div class="wrapper">
    <MainLayout :idx="0" ref="mainLayout">
      <el-container slot="container" class="full-height">
        <!-- 左侧侧边栏 -->
        <el-aside width="320px" class="aside-box">
          <el-container class="full-height" direction="vertical">
            <!-- 搜索栏 -->
            <el-header height="60px" class="header">
              <div class="user-login" v-popover:usercard>
                <div class="user-box">
                  <face :text="face" class="user-face"></face>
                </div>
              </div>
              <p class="user-status">
                <span v-if="name">{{ name }}</span>
                <span v-else>用户名称</span>
              </p>
            </el-header>
            <el-header height="60px" class="header">
              <div class="from-search">
                <el-input v-model="input" prefix-icon="el-icon-search" placeholder="搜索好友" size="small" />
              </div>
            </el-header>
            <!-- <el-header height="118px" class="logo-header">

          </el-header> -->
            <!-- 置顶栏 -->
            <el-header v-show="loadStatus == 1 && topItems.length > 0" class="subheader"
              :class="{ shadow: subHeaderShadow }" :height="subHeaderPx">
              <div v-for="item in topItems" :key="item.index_name" class="top-item" @click="clickTab(item.index_name)"
                @contextmenu.prevent="topItemsMenu(item, $event)">
                <el-tooltip effect="dark" placement="top-start" :content="item.name ? item.name : item.name">
                  <div class="avatar">
                    <span v-show="!item.face">
                      {{ (item.name ? item.name : item.name).substr(0, 1) }}
                    </span>
                    <img v-show="item.face" :src="item.face" :onerror="$store.state.defaultAvatar" v-if="item.face" />
                    <face-null :text="item.name" v-else></face-null>
                  </div>
                </el-tooltip>

                <div class="name" :class="{ active: index_name === item.id }">
                  {{ item.name ? item.name : item.name }}
                </div>
              </div>
            </el-header>

            <!-- 对话列表栏 -->
            <el-scrollbar tag="section" ref="menusScrollbar" class="full-height" :native="false">
              <el-main class="main">
                <p v-show="loadStatus === 0" class="empty-data">
                  <i class="el-icon-loading" /> 数据加载中...
                </p>

                <p v-show="loadStatus === 1 && talkNum === 0" class="empty-data">
                  暂无聊天消息
                </p>

                <p v-show="loadStatus === 1 && talkNum > 0" class="main-menu">
                  <span class="title">对话记录({{ talkNum }})</span>

                  <!-- <el-tag size="mini" type="danger" v-if="myUnreadNum"
                    >未读：{{ myUnreadNum }}</el-tag
                  > -->
                </p>
                <!-- 对话列表 -->
                <template v-if="loadStatus === 1">
                  <div v-for="(item, index) in userTalkItem" :key="item.id" class="talk-item pointer"
                    :class="{ active: activeIndex == index }" @click="clickTab(item.userId, item, index)">
                    <div class="avatar-box">
                      <face :text="item.face" v-if="item.face"></face>
                      <face-null :text="item.name" v-else></face-null>
                      <div v-show="item.is_top == 0" class="top-mask" @click.stop="topChatItem(item)">
                        <i class="el-icon-top" />
                      </div>
                    </div>
                    <div class="card-box">
                      <div class="title">
                        <div class="card-name">
                          <p class="nickname">
                            {{
                              item.remark_name ? item.remark_name : item.name
                            }}
                          </p>
                          <div v-show="item.unread" class="larkc-tag">
                            {{ item.unread }}条未读
                          </div>
                          <div v-show="item.is_top" class="larkc-tag top">
                            TOP
                          </div>

                          <div v-show="item.is_robot" class="larkc-tag top">
                            BOT
                          </div>

                          <div v-show="item.talk_type == 2" class="larkc-tag group">
                            群组
                          </div>
                          <div v-show="item.is_disturb" class="larkc-tag disturb">
                            <i class="iconfont icon-xiaoximiandarao" />
                          </div>
                        </div>
                        <div class="card-time">
                          {{ beautifyTime(item.lastTalkTime) }}
                        </div>
                      </div>
                      <div class="talk-message">
                        <span v-if="item.lastMessageType === 'MESSAGE'">{{ item.lastTalkMessage }}</span>
                        <span v-if="item.lastMessageType === 'GOODS'">[商品链接]</span>
                        <span v-if="item.lastMessageType === 'ORDER'">[订单链接]</span>
                      </div>
                      <div class="content">
                        <template v-if="
                          index_name != item.index_name && item.draft_text
                        ">
                          <span class="draft-color">[草稿]</span>
                          <span>{{ item.draft_text }}</span>
                        </template>
                        <template v-else>
                          <template v-if="item.is_robot == 0">
                            <span v-if="item.talk_type == 1" :class="{ 'online-color': item.is_online == 1 }">
                              [{{ item.is_online == 1 ? "在线" : "离线" }}]
                            </span>
                            <span v-else>[群消息]</span>
                          </template>

                          <span>{{ item.msg_text }}</span>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
              </el-main>
            </el-scrollbar>
          </el-container>
        </el-aside>

        <!-- 聊天面板容器 -->
        <el-main class="main-box ov-hidden full-height no-padding flex">
          <WelcomeModule class="flex-8" v-if="index_name == null" />
          <TalkPanel v-else class="full-height flex-8" :params="params" :goodsParams="goodsParams"
            :is-online="isFriendOnline" @change-talk="changeTalk" @close-talk="closeTalk" />
          <!-- <OtherLink :toUser="toUser" :goodsParams="goodsParams" :id="id" class="flex-4"/> -->
        </el-main>
      </el-container>
    </MainLayout>

    <!-- 用户查询组件 -->
    <UserSearch ref="searchUsers" />
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import MainLayout from "@/views/layout/MainLayout";
import WelcomeModule from "@/components/layout/WelcomeModule";
import TalkPanel from "@/components/chat/panel/TalkPanel";
import UserSearch from "@/components/user/UserSearch";
import OtherLink from "@/components/chat/panel/OtherLink.vue";
import {
  ServeGetTalkList,
  ServeDeleteTalkList,
  ServeTopTalkList,
  ServeSetNotDisturb,
  ServeCreateTalkList,
} from "@/api/chat";
import { ServeDeleteContact, ServeEditContactRemark } from "@/api/contacts";
import { beautifyTime } from "@/utils/functions";
import { formatTalkItem, findTalkIndex, getCacheIndexName } from "@/utils/talk";
import { setToken } from "@/utils/auth";

const title = document.title;

export default {
  name: "MessagePage",
  components: {
    MainLayout,
    TalkPanel,
    UserSearch,
    OtherLink,
    WelcomeModule,
  },
  data () {
    return {
      activeIndex: 9999999, //默认样式索引
      subHeaderShadow: false,
      launchGroupShow: false,

      // 对话面板的传递参数
      params: {
        talk_type: 0,
        receiver_id: 0,
        nickname: "",
        clickFlag: true,
      },

      goodsParams: {
        goodsId: '',
        skuId: '',
      },

      // 查询关键词
      input: "",

      // header 工具菜单
      subMenu: false,

      // 对话消息列表加载状态[0:加载中;1:加载完成;2:加载失败;]
      loadStatus: 0,

      // 消息未读数计时器
      interval: null,
      userTalkItem: [],
    };
  },
  computed: {
    ...mapGetters(["topItems", "talkItems", "unreadNum", "talkNum"]),
    ...mapState({
      face: (state) => state.user.face,
      name: (state) => state.user.name,
      talks: (state) => state.talks.items,
      id: (state) => state.user.id,
      index_name: (state) => state.dialogue.index_name,
      monitorFriendsStatus: (state) => state.notify.friendStatus,
      myUnreadNum: (state) => state.notify.unreadNum,
      toUser: (state) => state.user.toUser,
    }),
    // 计算置顶栏目的高度
    subHeaderPx () {
      const n = 7; // 一排能显示的用户数
      const num = this.topItems.length;
      let len = 60;

      if (num > n) {
        len = (Math.floor(num / n) + (num % n > 0 ? 1 : 0)) * len;
      }

      return `${len}px`;
    },

    // 当前对话好友在线状态
    isFriendOnline () {
      let index = findTalkIndex(this.index_name);
      return index >= 0 && this.talks[index].is_online == 1;
    },
  },
  watch: {
    talkItems (val) {
      val ? this.$set(this, "userTalkItem", val) : "";
    },
    // 搜索用户的时候 根据当前用户表进行模糊搜索
    input (val, oldVal) {
      console.log(val, oldVal);
      if (val) {
        let str = ["", ...val, ""].join(".*");
        let reg = new RegExp(str);
        this.userTalkItem = this.talkItems.filter((item) =>
          reg.test(item.name)
        );
      } else {
        this.userTalkItem = this.talkItems;
      }
    },
    unreadNum (value) {
      clearInterval(this.interval);
      console.log("%c 更新未读消息", "color:#32ccbc");
      this.$store.commit("SET_UNREAD_NUM", value);

      if (value > 0) {
        this.interval = setInterval(() => {
          document.title =
            document.title == title ? `【新消息】${title}` : title;
        }, 2000);
      } else {
        document.title = title;
      }
    },

    // 监听好友在线状态
    monitorFriendsStatus (value) {
      this.$store.commit("UPDATE_TALK_ITEM", {
        index_name: `1_${value.friend_id}`,
        is_online: value.status,
      });
    },
  },

  beforeRouteUpdate (to, from, next) {
    let index_name = getCacheIndexName();
    if (index_name) this.clickTab(index_name);
    next();
  },
  beforeCreate () {
    setToken(this.$route.query.token);
  },
  async created () {
    await this.initialize();
    await this.loadUserSetting();
    /**
     * 如果说有id 说明是用户点击 “联系客服” 进入的该页面
     * 所以创建会话 并请求用户列表
     * 如果没有id说明当前商家登录 直接请求用户列表
     */

  },

  mounted () {
    this.scrollEvent();
  },
  destroyed () {
    document.title = title;
    clearInterval(this.interval);
    this.clearTalk();
  },
  methods: {
    // 美化时间格式
    beautifyTime,

    //创建会话
    async createTalk (id) {
      await ServeCreateTalkList(id);

      await this.loadChatList();
    },
    // header 功能栏隐藏事件
    closeSubMenu () {
      this.subMenu = false;
    },

    // 清除当前对话
    clearTalk () {
      this.params = {
        talk_type: 0,
        receiver_id: 0,
        nickname: "",
        clickFlag: true
      };

      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
        talk_type: 0,
        receiver_id: 0,
        is_robot: 0,
      });
    },

    // 工具栏事件
    triggerSubMenu (type) {
      this.closeSubMenu();

      if (type == 1) {
        this.launchGroupShow = true;
      } else {
        this.$refs.searchUsers.open();
      }
    },

    // 监听自定义滚动条事件
    scrollEvent () {
      let scrollbarEl = this.$refs.menusScrollbar.wrap;
      scrollbarEl.onscroll = () => {
        this.subHeaderShadow = scrollbarEl.scrollTop > 0;
      };
    },
    // 获取用户对话列表
    loadChatList () {
      this.loadStatus = this.talkNum == 0 ? 0 : 1;

      ServeGetTalkList()
        .then(({ code, result }) => {
          if (code !== 200) return false;
          this.$store.commit("SET_UNREAD_NUM", 0);
          this.$store.commit("SET_TALK_ITEMS", {
            items: result.map((item) => formatTalkItem(item)),
          });

          // 判断
          if (this.$route.query.id) {
            let takeData, takeIndex;
            console.log("用户result", result)
            this.talkItems.forEach((take, index) => {
              if (take.userId == this.$route.query.id) {
                takeData = take;
                takeIndex = index;
              }
            });
            this.$nextTick(() =>
              this.clickTab(this.$route.query.id, takeData, takeIndex)
            );
          }
        })
        .finally(() => {
          this.loadStatus = 1;
        });
    },

    // 切换聊天栏目
    clickTab (id, val, index) {
      if (!id) return;
      this.activeIndex = index;
      let item =
        this.talks.find((item) => {
          return item.userId == id;
        }) || {};
      // 点击当前栏目存储当前用户的信息
      this.$store.state.user.toUser = val;

      let nickname = item.name;

      this.params = {
        talk_type: 1,
        receiver_id: item.userId,
        nickname,
        is_robot: item.is_robot,
        talkId: item.id, //聊天对话的id
        clickFlag: true
      };

      // 更新信息
      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
        talk_type: 1,
        receiver_id: item.userId,
        is_robot: item.is_robot,
      });

      this.$nextTick(() => {
        if (id == this.index_name.split("_")[1]) {
          this.$store.commit("UPDATE_TALK_ITEM", {
            userId: id,
            index_name: "MESSAGE_" + this.index_name.split("_")[1],
            unread: 0,
          });
        }
      });
    },
    // 修改当前对话
    changeTalk (index_name) {
      console.log("修改当前对话", index_name);
      sessionStorage.setItem("send_message_index_name", index_name);
      this.loadChatList();
    },
    // 关闭当前对话及刷新对话列表
    closeTalk () {
      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
        talk_type: 0,
        receiver_id: 0,
        is_robot: 0,
      });

      this.loadChatList();
    },
    // 对话列表的右键自定义菜单
    talkItemsMenu (item, event) {
      let items = {
        items: [
          {
            label: "好友信息",
            icon: "el-icon-user",
            disabled: item.talk_type == 2 || item.is_robot == 1,
            onClick: () => {
              this.$user(item.receiver_id);
            },
          },
          {
            label: "修改备注",
            icon: "el-icon-edit-outline",
            disabled: item.talk_type == 2 || item.is_robot == 1,
            onClick: () => {
              this.editFriendRemarks(item);
            },
          },
          {
            label: item.is_top == 0 ? "会话置顶" : "取消置顶",
            icon: "el-icon-top",
            onClick: () => {
              this.topChatItem(item);
            },
          },
          {
            label: item.is_disturb == 0 ? "消息免打扰" : "开启消息提示",
            icon:
              item.is_disturb == 0
                ? "el-icon-close-notification"
                : "el-icon-bell",
            disabled: item.is_robot == 1,
            onClick: () => {
              this.setNotDisturb(item);
            },
          },
          {
            label: "移除会话",
            icon: "el-icon-remove-outline",
            divided: true,
            onClick: () => {
              this.delChatItem(item);
            },
          },
          {
            label: item.talk_type == 1 ? "删除好友" : "退出群聊",
            icon: "el-icon-delete",
            disabled: item.is_robot == 1,
            onClick: () => {
              let title = item.talk_type == 1 ? "删除好友" : "退出群聊";
              this.$confirm(
                `此操作将 <span style="color:red;font-size:16px;">${title}</span>, 是否继续?`,
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                  center: true,
                  dangerouslyUseHTMLString: true,
                }
              ).then(() => {
                if (item.talk_type == 1) {
                  this.removeFriend(item);
                }
              });
            },
          },
        ],
        event: event,
        zIndex: 3,
      };

      this.$contextmenu(items);
      return false;
    },
    // 置顶栏右键菜单栏
    topItemsMenu (item, event) {
      this.$contextmenu({
        items: [
          {
            label: item.is_top == 0 ? "会话置顶" : "取消置顶",
            icon: "el-icon-top",
            onClick: () => {
              this.topChatItem(item);
            },
          },
        ],
        event: event,
        zIndex: 3,
      });

      return false;
    },
    // 会话列表置顶
    topChatItem (item) {
      ServeTopTalkList({
        list_id: item.id,
        type: item.is_top == 0 ? 1 : 2,
      }).then(({ code }) => {
        if (code == 200) {
          this.$store.commit("UPDATE_TALK_ITEM", {
            index_name: item.index_name,
            is_top: item.is_top == 0 ? 1 : 0,
          });
        }
      });
    },
    // 设置消息免打扰
    setNotDisturb (item) {
      ServeSetNotDisturb({
        talk_type: item.talk_type,
        receiver_id: item.receiver_id,
        is_disturb: item.is_disturb == 0 ? 1 : 0,
      }).then(({ code }) => {
        if (code == 200) {
          this.$store.commit("UPDATE_TALK_ITEM", {
            index_name: item.index_name,
            is_disturb: item.is_disturb == 0 ? 1 : 0,
          });
        }
      });
    },
    // 移除会话列表
    delChatItem (item) {
      ServeDeleteTalkList({
        list_id: item.id,
      }).then(({ code }) => {
        if (code == 200) {
          this.clearTalk();
          this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
        }
      });
    },
    // 解除好友关系
    removeFriend (item) {
      ServeDeleteContact({
        friend_id: item.receiver_id,
      }).then(({ code }) => {
        if (code == 200) {
          if (this.index_name == item.index_name) {
            this.clearTalk();
          }

          this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
        }
      });
    },
    // 修改好友备注信息
    editFriendRemarks (item) {
      let title = `您正在设置【${item.name}】好友的备注信息`;

      if (item.remark_name) {
        title += `，当前备注为【${item.remark_name}】`;
      }

      this.$prompt(title, "修改备注", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "border-radius0",
        inputPlaceholder: "请设置好友备注信息",
        inputValue: item.remark_name ? item.remark_name : item.name,
        inputValidator (val) {
          return val == null || val == "" ? "好友备注不能为空" : true;
        },
      })
        .then(({ value }) => {
          if (value == item.remark_name) {
            return false;
          }

          ServeEditContactRemark({
            friend_id: item.receiver_id,
            remarks: value,
          }).then((res) => {
            if (res.code == 200) {
              this.$store.commit("UPDATE_TALK_ITEM", {
                index_name: item.index_name,
                remark_name: value,
              });

              this.$notify({
                title: "成功",
                message: "好友备注修改成功...",
                type: "success",
              });
            } else {
              this.$notify({
                title: "消息",
                message: "好友备注修改失败，请稍后再试...",
                type: "warning",
              });
            }
          });
        })
        .catch(() => { });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.user-status{
  margin-left: 10px;
}
.aside-box {
  position: relative;
  border-right: 1px solid rgb(245, 245, 245);
  overflow: hidden;
  padding: 0;
  transition: width 0.3s;

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 15px;

    .from-search {
      flex: 1 1;
      flex-shrink: 0;
      height: 40px;

      /deep/ .el-input .el-input__inner {
        border-radius: 20px;
      }
    }

    .tools {
      flex-basis: 32px;
      flex-shrink: 0;
      height: 32px;
      margin-bottom: 8px;
      margin-left: 15px;
      cursor: pointer;
      line-height: 32px;
      text-align: center;
      position: relative;
      user-select: none;

      .tools-menu {
        position: absolute;
        right: 0;
        top: 38px;
        width: 100px;
        min-height: 80px;
        box-sizing: border-box;
        background-color: rgba(31, 35, 41, 0.9);
        border-radius: 5px;
        z-index: 1;
        padding: 3px 0;

        .menu-item {
          height: 40px;
          line-height: 40px;
          color: white;
          font-size: 14px;

          &:hover {
            background-color: rgba(70, 72, 73, 0.9);
          }
        }
      }
    }
  }

  .subheader {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 3px 8px 10px;
    overflow: hidden;
    flex-shrink: 0;

    .top-item {
      flex-basis: 41px;
      flex-shrink: 0;
      height: 50px;
      margin: 0 1px 6px 1px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;

      .avatar {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        background-color: #508afe;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        color: white;
        flex-shrink: 0;
        overflow: hidden;
        user-select: none;

        img {
          width: 100%;
          height: 100%;
          background-color: white;
        }
      }

      .name {
        font-size: 12px;
        text-align: center;
        color: #8f959e;
        transform: scale(0.84);
        text-align: center;
        line-height: 20px;
        word-break: break-all;
        overflow: hidden;

        &.active {
          color: #508afe;
        }
      }
    }

    &.shadow {
      box-shadow: 0 2px 6px 0 rgba(31, 35, 41, 0.05);
    }
  }
}

.aside-box .main {
  overflow: hidden;
  padding: 0;

  .empty-data {
    text-align: center;
    padding-top: 40px;
    color: #ccc;
  }

  .main-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 10px 3px 10px;
    align-items: center;
    user-select: none;

    .title {
      font-size: 12px;
      font-weight: 600;
      color: #1f2329;
    }

    .icon {
      cursor: pointer;
    }
  }

  .talk-item {
    padding: 8px 10px;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: 3px solid transparent;
    transition: 0.2s ease-in;

    .avatar-box {
      height: 35px;
      width: 35px;
      flex-shrink: 0;
      background-color: #508afe;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: white;
      user-select: none;
      transition: ease 1s;
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 3px;
      }

      .top-mask {
        width: 100%;
        height: 100%;
        background-color: rgba(22, 25, 29, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        display: none;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }

      &:hover .top-mask {
        display: flex;
      }
    }

    .card-box {
      height: 40px;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex: 1 1;
      margin-left: 10px;
      overflow: hidden;

      .title {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;

        .card-name {
          color: #1f2329;
          font-size: 14px;
          line-height: 20px;
          flex: 1 1;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          overflow: hidden;

          .nickname {
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 3px;
          }

          .top {
            color: #dc9b04 !important;
            background-color: #faf1d1 !important;
          }

          .group {
            color: #3370ff !important;
            background-color: #e1eaff !important;
            font-size: 13px;
          }

          .disturb {
            color: #98999c !important;
            background-color: #ecedf1 !important;

            i {
              font-size: 12px;
            }
          }
        }
      }

      .card-time {
        color: #8f959e;
        font-size: 12px;
        margin-left: 10px;
        user-select: none;
      }

      .content {
        font-size: 13px;
        line-height: 18px;
        color: #8f959e;
        margin-top: 3px;
        font-weight: 300;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        span:first-child {
          margin-right: 5px;
        }

        .online-color {
          color: #4aa71c;
          font-weight: 300;
        }

        .draft-color {
          color: red;
          font-weight: 300;
        }
      }
    }

    &:hover {
      background-color: #eff0f1;
    }

    &.active {
      border-color: #3370ff;
      background-color: #eff0f1;
    }
  }
}

// iphone
@media screen and (max-width: 767px) {

  .side-edge,
  .from-search,
  .card-box {
    display: none !important;
  }

  .aside-box {
    width: 66px !important;

    .subheader {
      display: none;
    }

    .card-box .larkc-tag {
      display: none;
    }
  }
}

.talk-message {
  font-size: 12px;
  color: #8f959e;
}

.user-face {
  height: 100%;
  width: 100%;
}
</style>