滚动加载样式

im/src/components/chat/panel/OtherLink.vue

@@ -1,12 +1,10 @@
 <template>
-  <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
+  <el-tabs v-model="activeName" @tab-click="handleClick" type="card" :stretch=true>
     <el-tab-pane :label="toUser.storeFlag ? '正在咨询' : '他的足迹'" name="history">
       <div style="margin-left: 12px;" v-if="toUser.storeFlag">
-        <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId" />
-        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" />
-      </div>
-      <div v-else>
-
+        <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId"
+          @sendMessage="submitSendMessage" />
+        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" @sendMessage="submitSendMessage" />
       </div>
     </el-tab-pane>
     <el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
@@ -24,6 +22,8 @@ import { ServeGetGoodsDetail } from '@/api/goods'
 import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
 import FootPrint from "@/components/chat/panel/template/footPrint.vue";
 import GoodsLink from "@/components/chat/panel/template/goodsLink.vue";
+import SocketInstance from "@/im-server/socket-instance";
+import { mapState, mapGetters } from "vuex";
 export default {
   components: {
     "el-tabs": Tabs,
@@ -46,6 +46,12 @@ export default {
       default: null,
     },
   },
+  computed: {
+    ...mapGetters(["talkItems"]),
+    ...mapState({
+      index_name: (state) => state.dialogue.index_name,
+    }),
+  },
   data () {
     return {
       activeName: 'history',
@@ -112,6 +118,11 @@ export default {
       }
       ServeGetFootPrint(this.footPrintParams).then(res => {
         res.result.records.forEach((item, index) => {
+          if (localStorage.getItem(item.goodsId)) {
+            item.btnHide = 0
+          } else {
+            item.btnHide = 1
+          }
           if (item.goodsId === this.goodsParams.goodsId) {
             res.result.records.splice(index, 1)
           }
@@ -121,12 +132,85 @@ export default {
       })
       //删除掉刚加入的商品
     },
+
+    // 发送消息回调事件
+    submitSendMessage (record, context) {
+      console.log("发送");
+      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,
+        });
+      }
+
+    },
+
+    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;
+    },
   }
 }
 
 </script>
 
 <style scoped lang="less">
+// /deep/ .el-tabs__nav.is-top {
+// }
+
 /deep/ .el-tabs__nav {
   height: 60px;
   line-height: 60px;