订单列表发送

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

@@ -4,7 +4,8 @@
       <div style="margin-left: 12px;" v-if="toUser.storeFlag">
         <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId"
           @sendMessage="submitSendMessage" />
-        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" @sendMessage="submitSendMessage" />
+        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" :orderList="orderPrintList"
+          @sendMessage="submitSendMessage" />
       </div>
     </el-tab-pane>
     <el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
@@ -17,7 +18,7 @@
 
 <script>
 import { Tabs, TabPane } from 'element-ui'
-import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint } from '@/api/user'
+import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint, ServeGetOrderPrint } from '@/api/user'
 import { ServeGetGoodsDetail } from '@/api/goods'
 import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
 import FootPrint from "@/components/chat/panel/template/footPrint.vue";
@@ -64,12 +65,11 @@ export default {
         storeId: '',
       },
       goodsDetail: {},
-      footPrintList: [],
+      footPrintList: [], // 商品
+      orderPrintList: []// 订单
     }
   },
   mounted () {
-    console.log(this.id)
-    console.log(this.toUser)
     if (this.toUser.storeFlag) {
       this.getStoreDetail()
     } else {
@@ -127,23 +127,29 @@ export default {
             res.result.records.splice(index, 1)
           }
         });
-        console.log(this.footPrintParams, 'this.footPrintParamsthis.footPrintParamsthis.footPrintParams');
         this.footPrintList.push(...res.result.records)
       })
-      //删除掉刚加入的商品
+      // 订单列表
+      ServeGetOrderPrint(this.footPrintParams).then((res) => {
+        if (res.code == 200) {
+          res.result.records.forEach((item) => {
+            this.orderPrintList.push({
+              ...item,
+              btnHide: 1
+            })
+          })
+          // this.orderPrintList.push(...res.result.records)
+        }
+      })
     },
 
     // 发送消息回调事件
-    submitSendMessage (record, context) {
-      console.log("发送");
+    submitSendMessage (record, context, messageType) {
       SocketInstance.emit("event_talk", record);
-
       this.$store.commit("UPDATE_TALK_ITEM", {
         index_name: this.index_name,
         draft_text: "",
       });
-
-
       /**
        * 插入数据
        */
@@ -152,13 +158,11 @@ export default {
         fromUser: this.id,
         toUser: record.to,
         isRead: false,
-        messageType: "GOODS",
+        messageType: messageType,
         text: context,
         float: "right",
       };
 
-      console.log("insterChat", insterChat);
-      // console.log("插入对话记录",'')
       // 插入对话记录
       this.$store.commit("PUSH_DIALOGUE", insterChat);
       // 获取聊天面板元素节点

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

@@ -84,9 +84,17 @@
                       </div>
                     </div>
                   </div>
-
-                  <!-- {{ item.text }} -->
-
+                  <div v-else-if="item.messageType == 'ORDER' && item.text != null" class="text-message" :class="{
+  left: item.float == 'left',
+  right: item.float == 'right',
+}">
+                    <a> 订单号:{{ item.text.sn }} </a>
+                    <div class="baseTwo">
+                      <img :src="item.text.groupImages" style="height: 100px;width: 100px;margin-top: 10px;" />
+                      <span class="orderGoodsName" @click="linkToOrders(item.text.sn)">{{ item.text.groupName }}</span>
+                      <span class="orderGoodsTime">{{ item.text.paymentTime }}</span>
+                    </div>
+                  </div>
                   <!-- 图片消息 -->
                   <!-- <image-message
                     v-else-if="item.messageType == 2 && item.file.file_type == 1"
@@ -478,6 +486,9 @@ export default {
           if (item.messageType === 'GOODS') {
             item.text = JSON.parse(item.text)
           }
+          if (item.messageType === 'ORDER') {
+            item.text = JSON.parse(item.text)
+          }
           return { ...item, [key]: key };
         });
         this.$store.commit("UNSHIFT_DIALOGUE", records);
@@ -809,6 +820,29 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.orderSn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.orderGoodsName {
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.orderGoodsTime {
+  margin-left: 10px;
+  color: red;
+  position: absolute;
+  margin-top: 35px;
+}
+
 .main-box {
   position: relative;
 }
@@ -869,6 +903,7 @@ export default {
   }
 }
 
+
 .base {
   margin-top: 5px;
   height: 120px;

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

@@ -8,9 +8,7 @@
               <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: 8px;">
@@ -27,22 +25,19 @@
         </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>
+            <dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
+              <div style="margin-bottom: 20px;">
+                <span class="orderSn">订单号：{{ item.sn }}</span>
+                <img :src="item.groupImages" alt="暂无图片"
+                  style="height: 100px; width: 100px;margin-top: 10px; vertical-align: middle; ">
+                <span class="orderGoodsName" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
+                <span style="margin-left: 10px; color: red;">{{ item.paymentTime }}</span>
+                <div class="orderBtn">
+                  <el-button type="danger" class="store-button" v-if="item.btnHide == 1" size="mini"
+                    @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
                 </div>
               </div>
+
             </dd>
           </dl>
         </el-tab-pane>
@@ -80,6 +75,7 @@ export default {
     "el-tab-pane": TabPane,
   },
   methods: {
+    //跳转订单列表
 
     scrollBottom (e) {
       const { scrollTop, scrollHeight, clientHeight } = e.srcElement
@@ -92,7 +88,6 @@ export default {
     },
     // 发送消息回调事件
     submitSendGoodsMessage (item) {
-      console.log("发送");
       const context = {
         id: item.id,
         goodsId: item.goodsId,
@@ -108,7 +103,27 @@ export default {
         context: context,
         talk_id: this.toUser.id,
       };
-      this.$emit('sendMessage', record, context);
+      this.$emit('sendMessage', record, context, 'GOODS');
+      localStorage.setItem(item.goodsId, 0)
+      item.btnHide = 0
+    },
+    // 发送订单列表
+    submitSendOrderMessage (item, index) {
+      const context = {
+        sn: item.sn,
+        groupImages: item.groupImages,
+        paymentTime: item.paymentTime,
+        groupName: item.groupName,
+      }
+      const record = {
+        operation_type: "MESSAGE",
+        to: this.toUser.userId,
+        from: this.id,
+        message_type: "ORDER",
+        context: context,
+        talk_id: this.toUser.id,
+      };
+      this.$emit('sendMessage', record, context, 'ORDER');
       localStorage.setItem(item.goodsId, 0)
       item.btnHide = 0
     },
@@ -121,9 +136,13 @@ export default {
       type: Array,
       default: [],
     },
+    orderList: {
+      type: Array,
+      default: []
+    }
   },
   mounted () {
-    console.log(this.list, 'list');
+    console.log(this.orderList, 'orderList');
     this.btnHide = localStorage.getItem('btnHide')
   }
 }
@@ -131,6 +150,30 @@ export default {
 </script>
 
 <style scoped lang="less">
+.orderGoodsName {
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.orderSn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.orderBtn {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 15px;
+  position: relative;
+  bottom: 30px;
+}
+
 .goods_name {
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
@@ -169,7 +212,7 @@ export default {
 .store-button {
   background-color: white;
   border-color: #F56C6C;
-
+  margin-top: 10px;
 }
 
 .base {
@@ -177,15 +220,6 @@ export default {
   height: 120px;
   display: flex;
 
-  div {
-    // overflow: hidden;
-    // text-overflow: ellipsis;
-    // white-space: nowrap;
-    // margin-top: 8px;
-    // 
-    // margin-top: 4px;
-  }
-
   .price {
     color: red;
     margin-top: 15px;

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

@@ -1,5 +1,6 @@
 <template>
   <div style="width: 350px;">
+    当前浏览
     <div class="base">
       <div>
         <img :src="goodsDetail.thumbnail" class="image" />
@@ -10,21 +11,23 @@
           <span style="color: red;">￥{{ goodsDetail.price }}</span>
         </div>
         <div v-if="hide">
-          <el-button class="store-button" type="danger" v-if="btnHide == 1" size="mini" @click="submitSendMessage()"
-            plain>发送</el-button>
+          <el-button class="store-button" type="danger" v-if="!sendFlag && btnHide == 1" size="mini"
+            @click="submitSendMessage()" 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
     }
@@ -33,12 +36,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(this.goodsDetail.goodsId)
+    this.btnHide = localStorage.getItem('btnHide')
   },
   components: {
     "el-tag": Tag,
@@ -56,14 +59,7 @@ export default {
     // 回车键发送消息回调事件
     submitSendMessage () {
       console.log("发送");
-      const context = {
-        id: this.goodsDetail.id,
-        goodsId: this.goodsDetail.goodsId,
-        thumbnail: this.goodsDetail.thumbnail,
-        price: this.goodsDetail.price,
-        goodsName: this.goodsDetail.goodsName
-      }
-
+      const context = this.goodsDetail
       const record = {
         operation_type: "MESSAGE",
         to: this.toUser.userId,
@@ -72,12 +68,74 @@ export default {
         context: context,
         talk_id: this.toUser.id,
       };
-      this.$emit('sendMessage', record, context);
+      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(this.goodsDetail.goodsId, 0)
+      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: {