lilishop-ui/im/src/components/chat/panel/template/goodsLink.vue

<template>
  <div class="current-preview">
    当前浏览
    <div class="base">
      <div>
        <img :src="goodsDetail.thumbnail" class="image" />
      </div>
      <div style="margin-left: 13px">
        <a @click="linkToGoods(goodsDetail.goodsId, goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
        <div>
          <span style="color: red;">{{ $filters.unitPrice(goodsDetail.price, '￥') }}</span>
        </div>
        <div v-if="hide">
          <el-button class="store-button" type="danger" v-if="btnHide == 1 && toUser.storeFlag" size="small"
            @click="submitSendMessage()" plain>发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import SocketInstance from "@/im-server/socket-instance";
export default {
  data () {
    return {
      btnHide: undefined,
      hide: true
    }
  },
  computed: {
    ...mapGetters(["talkItems"]),
    ...mapState({
      id: (state) => state.user.id,
      index_name: (state) => state.dialogue.index_name,
      toUser: (state) => state.user.toUser,
    }),
  },
  mounted () {
    console.log(this.goodsDetail)
    this.btnHide = localStorage.getItem('btnHide')
  },
  methods: {
    toGoods () {
      alert("toGoods")
    },
    toMessage () {
      alert(JSON.stringify(this.toUser))
      alert("toMessage")
    },
    // 回车键发送消息回调事件
    submitSendMessage () {
      console.log("发送");
      const context = this.goodsDetail
      const record = {
        operation_type: "MESSAGE",
        to: this.toUser.userId,
        from: this.id,
        message_type: "GOODS",
        context: context,
        talk_id: this.toUser.id,
      };
      SocketInstance.emit("event_talk", record);

      this.$store.commit("UPDATE_TALK_ITEM", {
        index_name: this.index_name,
        draft_text: "",
      });


      /**
       * 插入数据
       */
      const insterChat = {
        createTime: this.formateDateAndTimeToString(new Date()),
        fromUser: this.id,
        toUser: record.to,
        isRead: false,
        messageType: "GOODS",
        text: context,
        float: "right",
      };

      console.log("insterChat", insterChat);
      // console.log("插入对话记录",'')
      // 插入对话记录
      this.$store.commit("PUSH_DIALOGUE", insterChat);
      // 获取聊天面板元素节点
      let el = document.getElementById("lumenChatPanel");
      // 判断的滚动条是否在底部
      let isBottom =
        Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;

      if (isBottom || record.to == this.id) {
        this.$nextTick(() => {
          el.scrollTop = el.scrollHeight;
        });
      } else {
        this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
          content: content,
          nickname: record.name,
        });
      }
      // 发送后隐藏按钮  0：隐藏 1：显示
      localStorage.setItem('btnHide', 0)
      this.hide = false
    },

    formateDateAndTimeToString (date) {
      var hours = date.getHours();
      var mins = date.getMinutes();
      var secs = date.getSeconds();
      var msecs = date.getMilliseconds();
      if (hours < 10) hours = "0" + hours;
      if (mins < 10) mins = "0" + mins;
      if (secs < 10) secs = "0" + secs;
      if (msecs < 10) secs = "0" + msecs;
      return (
        this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
      );
    },

    formatDateToString (date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return year + "-" + month + "-" + day;
    },
  },
  props: {
    goodsDetail: {
      type: Object,
      default: null,
    },
  },
}

</script>

<style scoped lang="less">
.store-button {
  background-color: white;
  border-color: #F56C6C;
}
.current-preview{
  padding: 16px;
}

.base {
  margin-top: 5px;
  height: 120px;
  display: flex;

  div {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
    white-space: nowrap;
    margin-top: 8px;
  }

  .image {
    height: 100px;
    margin-top: 3px;
    width: 100px;
  }

}

.click-button {
  margin-top: 8px;
  background-color: white;
  border-color: #F56C6C;
}

.separate {
  margin-top: 8px;
}
</style>