滚动加载样式

im/src/App.vue

@@ -28,6 +28,8 @@ export default {
       this.Handler = new Date().getTime() - this.beforeUnload;
       if (this.Handler <= 5) {
         localStorage.setItem('btnHide', 1)
+        var storage = window.localStorage;
+        storage.clear()
       }
     },
   },

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" />
+        <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId"
-        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" />
+          @sendMessage="submitSendMessage" />
-      </div>
+        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" @sendMessage="submitSendMessage" />
-      <div v-else>
-
       </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;

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

@@ -68,7 +68,7 @@
                     <pre v-html="item.text" />
                   </div>
 
-                  <div v-else-if="item.messageType == 'GOODS'" class="text-message" :class="{
+                  <div v-else-if="item.messageType == 'GOODS' && item.text != null" class="text-message" :class="{
   left: item.float == 'left',
   right: item.float == 'right',
 }">
@@ -869,6 +869,7 @@ export default {
     color: black;
   }
 }
+
 .base {
   margin-top: 5px;
   height: 120px;
@@ -889,6 +890,7 @@ export default {
   }
 
 }
+
 .talk-bubble {
   position: absolute;
   left: 0px;

im/src/components/chat/panel/template/footPrint.vue

@@ -1,39 +1,79 @@
 <template>
   <div class="box" @scroll="scrollBottom">
     <div class="tab">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
-        <el-tab-pane label="最近浏览" name="first"></el-tab-pane>
+        <el-tab-pane label="最近浏览" name="goods">
-      </el-tabs>
-    </div>
           <dl>
             <dd v-for="item in list" v-infinite-scroll="loadMore">
-        <div class="base" @click="linkToGoods(item.goodsId, item.id)">
+              <div class="base">
                 <div>
                   <img :src="item.thumbnail" class="image" />
+
                 </div>
+
                 <div style="margin-left: 13px">
-            <a>{{ item.goodsName }}</a>
+                  <a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
-            <div>
+                  <div style="margin-top: 8px;">
                     <span style="color: red;">￥{{ item.price }}</span>
                   </div>
+                  <div>
+                    <el-button class="store-button" type="danger" v-if="item.btnHide == 1" size="mini"
+                      @click="submitSendGoodsMessage(item)" plain>发送</el-button>
+                  </div>
                 </div>
               </div>
             </dd>
           </dl>
+        </el-tab-pane>
+        <el-tab-pane label="订单列表" name="orders">
+          <dl>
+            <dd v-for="item in list" v-infinite-scroll="loadMore">
+              <div class="base">
+                <div>
+                  <img :src="item.thumbnail" class="image" />
+                </div>
+                <div style="margin-left: 13px">
+                  <a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
+                  <div style="margin-top: 10px;">
+                    <span style="color: red;">￥{{ item.price }}</span>
+                  </div>
+                  <div>
+                    <el-button class="store-button" type="danger" v-if="item.btnHide == 1" size="mini"
+                      @click="submitSendGoodsMessage(item)" plain>发送</el-button>
+                  </div>
+                </div>
+              </div>
+            </dd>
+          </dl>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
   </div>
 </template>
 
 <script>
 import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
+import { mapState, mapGetters } from "vuex";
 export default {
   directives: {
     "infinite-scroll": InfiniteScroll,
   },
   data () {
     return {
-      activeName: 'first'
+      activeName: 'goods',
+      btnHide: undefined,
+      hide: true
     }
   },
+  computed: {
+    ...mapGetters(["talkItems"]),
+    ...mapState({
+      id: (state) => state.user.id,
+
+      toUser: (state) => state.user.toUser,
+    }),
+  },
   components: {
     "el-tag": Tag,
     "el-button": button,
@@ -41,15 +81,37 @@ export default {
     "el-tab-pane": TabPane,
   },
   methods: {
+
     scrollBottom (e) {
       const { scrollTop, scrollHeight, clientHeight } = e.srcElement
       if (scrollTop + clientHeight >= scrollHeight) {
-        if (this.noMore) return
         this.$emit('loadMore')
       }
     },
     loadMore () {
 
+    },
+    // 发送消息回调事件
+    submitSendGoodsMessage (item) {
+      console.log("发送");
+      const context = {
+        id: item.id,
+        goodsId: item.goodsId,
+        thumbnail: item.thumbnail,
+        price: item.price,
+        goodsName: item.goodsName
+      }
+      const record = {
+        operation_type: "MESSAGE",
+        to: this.toUser.userId,
+        from: this.id,
+        message_type: "GOODS",
+        context: context,
+        talk_id: this.toUser.id,
+      };
+      this.$emit('sendMessage', record, context);
+      localStorage.setItem(item.goodsId, 0)
+      item.btnHide = 0
     },
     handleClick (tab, event) {
       console.log(tab, event);
@@ -63,12 +125,24 @@ export default {
   },
   mounted () {
     console.log(this.list, 'list');
+    this.btnHide = localStorage.getItem('btnHide')
   }
 }
 
 </script>
 
 <style scoped lang="less">
+.goods_name {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+}
+
 /deep/ .el-tabs__item.is-top:last-child {
   color: black;
 }
@@ -96,6 +170,7 @@ export default {
 .store-button {
   background-color: white;
   border-color: #F56C6C;
+
 }
 
 .base {
@@ -104,17 +179,18 @@ export default {
   display: flex;
 
   div {
-    overflow: hidden;
+    // overflow: hidden;
-    text-overflow: ellipsis;
+    // text-overflow: ellipsis;
-    margin-top: 8px;
+    // white-space: nowrap;
-    white-space: nowrap;
+    // margin-top: 8px;
-    margin-top: 4px;
+    // 
+    // margin-top: 4px;
   }
 
   .image {
     height: 100px;
     margin-top: 3px;
-    width: 100px
+    width: 100px;
   }
 
 }

im/src/components/chat/panel/template/goodsLink.vue

@@ -1,6 +1,5 @@
 <template>
   <div style="width: 350px;">
-    当前浏览
     <div class="base">
       <div>
         <img :src="goodsDetail.thumbnail" class="image" />
@@ -11,23 +10,21 @@
           <span style="color: red;">￥{{ goodsDetail.price }}</span>
         </div>
         <div v-if="hide">
-          <el-button class="store-button" type="danger" v-if="!sendFlag && btnHide == 1" size="mini"
+          <el-button class="store-button" type="danger" v-if="btnHide == 1" size="mini" @click="submitSendMessage()"
-            @click="submitSendMessage()" plain>发送</el-button>
+            plain>发送</el-button>
         </div>
       </div>
     </div>
-    <hr class="separate" />
   </div>
 </template>
 
 <script>
 import { Tag, button } from 'element-ui'
 import { mapState, mapGetters } from "vuex";
-import SocketInstance from "@/im-server/socket-instance";
+
 export default {
   data () {
     return {
-      sendFlag: false,
       btnHide: undefined,
       hide: true
     }
@@ -36,12 +33,12 @@ export default {
     ...mapGetters(["talkItems"]),
     ...mapState({
       id: (state) => state.user.id,
-      index_name: (state) => state.dialogue.index_name,
+
       toUser: (state) => state.user.toUser,
     }),
   },
   mounted () {
-    this.btnHide = localStorage.getItem('btnHide')
+    this.btnHide = localStorage.getItem(this.goodsDetail.goodsId)
   },
   components: {
     "el-tag": Tag,
@@ -59,7 +56,14 @@ export default {
     // 回车键发送消息回调事件
     submitSendMessage () {
       console.log("发送");
-      const context = this.goodsDetail
+      const context = {
+        id: this.goodsDetail.id,
+        goodsId: this.goodsDetail.goodsId,
+        thumbnail: this.goodsDetail.thumbnail,
+        price: this.goodsDetail.price,
+        goodsName: this.goodsDetail.goodsName
+      }
+
       const record = {
         operation_type: "MESSAGE",
         to: this.toUser.userId,
@@ -68,74 +72,12 @@ export default {
         context: context,
         talk_id: this.toUser.id,
       };
-      SocketInstance.emit("event_talk", record);
+      this.$emit('sendMessage', record, context);
-
-      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)
+      localStorage.setItem(this.goodsDetail.goodsId, 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: {