From 779f6e4fa1fc2a07a3b199f4cd29195b8c3d131b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B?= <994041296@163.com>
Date: Wed, 28 Dec 2022 18:31:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=8A=A0=E8=BD=BD=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im/src/App.vue                                |   2 +
 im/src/components/chat/panel/OtherLink.vue    |  96 +++++++++++-
 im/src/components/chat/panel/TalkPanel.vue    | 144 +++++++++---------
 .../chat/panel/template/footPrint.vue         | 126 ++++++++++++---
 .../chat/panel/template/goodsLink.vue         |  88 ++---------
 5 files changed, 281 insertions(+), 175 deletions(-)

diff --git a/im/src/App.vue b/im/src/App.vue
index 396a749d..aef9b510 100644
--- a/im/src/App.vue
+++ b/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()
       }
     },
   },
diff --git a/im/src/components/chat/panel/OtherLink.vue b/im/src/components/chat/panel/OtherLink.vue
index e9a2070c..3d1f433f 100644
--- a/im/src/components/chat/panel/OtherLink.vue
+++ b/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;
diff --git a/im/src/components/chat/panel/TalkPanel.vue b/im/src/components/chat/panel/TalkPanel.vue
index a6fce70a..4ac64b4c 100644
--- a/im/src/components/chat/panel/TalkPanel.vue
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <el-container  class="ov-hidden flex-10 full-height ">
+    <el-container class="ov-hidden flex-10 full-height ">
       <PanelHeader ref="panelHeader" :data="params" :online="isOnline" :keyboard="inputEvent"
         @event="handleHeaderEvent" />
       <!-- 主体信息 -->
@@ -35,9 +35,9 @@
 
             <!-- 其它对话消息 -->
             <div v-else class="message-box record-box" :class="{
-              'direction-rt': item.float == 'right',
-              'checkbox-border': multiSelect.isOpen === true,
-            }">
+  'direction-rt': item.float == 'right',
+  'checkbox-border': multiSelect.isOpen === true,
+}">
               <aside v-show="multiSelect.isOpen" class="checkbox-column">
                 <i class="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }"
                   @click="triggerMultiSelect(item.id)" />
@@ -60,28 +60,28 @@
                   </span>
                   <!-- 文本消息 -->
                   <div v-if="item.messageType == 'MESSAGE'" class="text-message" :class="{
-                    left: item.float == 'left',
-                    right: item.float == 'right',
-                  }">
+  left: item.float == 'left',
+  right: item.float == 'right',
+}">
                     <div class="arrow"></div>
 
                     <pre v-html="item.text" />
                   </div>
 
-                  <div v-else-if="item.messageType == 'GOODS'" class="text-message" :class="{
-                    left: item.float == 'left',
-                    right: item.float == 'right',
-                  }">
-                    <div class="base" @click="linkToGoods(item.text.goodsId,item.text.id)">
+                  <div v-else-if="item.messageType == 'GOODS' && item.text != null" class="text-message" :class="{
+  left: item.float == 'left',
+  right: item.float == 'right',
+}">
+                    <div class="base" @click="linkToGoods(item.text.goodsId, item.text.id)">
+                      <div>
+                        <img :src="item.text.thumbnail" class="image" />
+                      </div>
+                      <div style="margin-left: 13px">
+                        <a> {{ item.text.goodsName }} </a>
                         <div>
-                            <img :src="item.text.thumbnail" class="image" />
-                        </div>
-                        <div style="margin-left: 13px">
-                            <a> {{ item.text.goodsName }} </a>
-                            <div>
-                                <span style="color: red;">￥{{ item.text.price }}</span>
-                            </div>
+                          <span style="color: red;">￥{{ item.text.price }}</span>
                         </div>
+                      </div>
                     </div>
                   </div>
 
@@ -133,18 +133,18 @@
         </template>
       </el-footer>
       <el-aside width="200px">
-        
+
       </el-aside>
-     
+
     </el-container>
 
     <!-- 消息管理器 -->
     <transition name="el-fade-in-linear">
       <TalkSearchRecord v-if="findChatRecord" :params="{
-        talk_type: params.talk_type,
-        receiver_id: params.receiver_id,
-        title: params.nickname,
-      }" @close="findChatRecord = false" />
+  talk_type: params.talk_type,
+  receiver_id: params.receiver_id,
+  title: params.nickname,
+}" @close="findChatRecord = false" />
     </transition>
 
     <!-- 链接信息 -->
@@ -206,7 +206,7 @@ export default {
       default: false,
     },
   },
-  data() {
+  data () {
     return {
       // 记录加载相关参数
       textReplaceEmoji,
@@ -260,7 +260,7 @@ export default {
   },
   watch: {
     // 监听面板传递参数
-    params() {
+    params () {
       this.loadRecord.minRecord = 0;
       this.tipsBoard = false;
       this.multiSelect = {
@@ -271,7 +271,7 @@ export default {
       this.loadChatRecords();
     },
   },
-  mounted() {
+  mounted () {
     this.loadChatRecords();
   },
   methods: {
@@ -279,7 +279,7 @@ export default {
     sendTime: formatTime,
 
     // 处理 Header 组件事件
-    handleHeaderEvent(event_name) {
+    handleHeaderEvent (event_name) {
       switch (event_name) {
         case "history":
           this.findChatRecord = true;
@@ -303,7 +303,7 @@ export default {
     // },
     // #TODO 冗余代码
 
-    formatDateToString(date) {
+    formatDateToString (date) {
       var year = date.getFullYear();
       var month = date.getMonth() + 1;
       var day = date.getDate();
@@ -318,7 +318,7 @@ export default {
      * @param format 转换格式
      * @returns {*|string}
      */
-    unixToDate(unix, format) {
+    unixToDate (unix, format) {
       if (!unix) return unix;
       let _format = format || "yyyy-MM-dd hh:mm:ss";
       const d = new Date(unix);
@@ -347,7 +347,7 @@ export default {
       return _format;
     },
 
-    formateDateAndTimeToString(date) {
+    formateDateAndTimeToString (date) {
       var hours = date.getHours();
       var mins = date.getMinutes();
       var secs = date.getSeconds();
@@ -363,7 +363,7 @@ export default {
     // #冗余代码结束
 
     // 回车键发送消息回调事件
-    submitSendMessage(content) {
+    submitSendMessage (content) {
       console.log("发送", content);
       const record = {
         operation_type: "MESSAGE",
@@ -417,7 +417,7 @@ export default {
     },
 
     // 推送编辑事件消息
-    onKeyboardEvent(text) {
+    onKeyboardEvent (text) {
       this.$store.commit("UPDATE_TALK_ITEM", {
         index_name: this.index_name,
         draft_text: text,
@@ -448,7 +448,7 @@ export default {
 
 
     // 加载用户聊天详情信息
-    loadChatRecords() {
+    loadChatRecords () {
       console.log(this.records.length, 'this.records.length ')
       if (this.loadRecord.pageNumber === 0 || this.params.clickFlag) {
         this.loadRecord.pageNumber = 1
@@ -458,7 +458,7 @@ export default {
       }
       const user_id = this.id;
       const data = {
-        pageNumber: this.loadRecord.pageNumber ,
+        pageNumber: this.loadRecord.pageNumber,
         pageSize: this.loadChatRecords.pageSize,
         talkId: this.params.talkId,
       };
@@ -475,7 +475,7 @@ export default {
           if (item.toUser > 0) {
             item.float = item.fromUser == user_id ? "right" : "left";
           }
-          if(item.messageType === 'GOODS'){
+          if (item.messageType === 'GOODS') {
             item.text = JSON.parse(item.text)
           }
           return { ...item, [key]: key };
@@ -496,7 +496,7 @@ export default {
     },
 
     // 多选处理方式
-    handleMultiMode(value) {
+    handleMultiMode (value) {
       if (value == "close") {
         this.closeMultiSelect();
         return false;
@@ -537,7 +537,7 @@ export default {
     },
 
     // 确认消息转发联系人事件
-    confirmSelectContacts(data) {
+    confirmSelectContacts (data) {
       let user_ids = [];
       let group_ids = [];
       data.forEach((item) => {
@@ -568,7 +568,7 @@ export default {
     },
 
     // 处理消息时间是否显示
-    compareTime(index, datetime) {
+    compareTime (index, datetime) {
       if (datetime == undefined) {
         return false;
       }
@@ -601,12 +601,12 @@ export default {
     },
 
     // 查看好友用户信息
-    catFriendDetail(value) {
+    catFriendDetail (value) {
       this.$user(value);
     },
 
     // 撤回消息
-    revokeRecords(index, item) {
+    revokeRecords (index, item) {
       ServeRevokeRecords({
         record_id: item.id,
       }).then((res) => {
@@ -617,7 +617,7 @@ export default {
     },
 
     // 删除消息
-    removeRecords(index, item) {
+    removeRecords (index, item) {
       let receiver_id = item.receiver_id;
       if (item.talk_type == 1 && item.user_id != this.id) {
         receiver_id = item.user_id;
@@ -635,29 +635,29 @@ export default {
     },
 
     // 从列表中删除记录
-    delRecords(arr) {
+    delRecords (arr) {
       this.$store.commit("BATCH_DELETE_DIALOGUE", arr);
       return this;
     },
 
     // 开启多选模式
-    openMultiSelect() {
+    openMultiSelect () {
       this.multiSelect.isOpen = true;
     },
 
     // 关闭多选模式
-    closeMultiSelect() {
+    closeMultiSelect () {
       this.multiSelect.isOpen = false;
       this.multiSelect.items = [];
     },
 
     // 判断记录是否选中
-    verifyMultiSelect(records_id) {
+    verifyMultiSelect (records_id) {
       return this.multiSelect.items.indexOf(records_id) >= 0;
     },
 
     // 触发多选事件
-    triggerMultiSelect(records_id) {
+    triggerMultiSelect (records_id) {
       let i = this.multiSelect.items.indexOf(records_id);
       if (i >= 0) {
         this.multiSelect.items.splice(i, 1);
@@ -674,14 +674,14 @@ export default {
     },
 
     // 验证是否存在选择的指定类型的消息
-    verifyMultiSelectType(type) {
+    verifyMultiSelectType (type) {
       return this.records.some((item) => {
         return this.verifyMultiSelect(item.id) && item.messageType == type;
       });
     },
 
     // 消息点击右键触发自定义菜单
-    onCopy(idx, item, event) {
+    onCopy (idx, item, event) {
       let menus = [];
       let content = "";
       if (document.getElementById("copy_class_" + item.id)) {
@@ -765,12 +765,12 @@ export default {
       event.preventDefault();
     },
 
-    hideChatGroup() {
+    hideChatGroup () {
       this.group.panel = false;
     },
 
     // 修改群聊免打扰状态
-    disturbChange(detail) {
+    disturbChange (detail) {
       this.$store.commit("UPDATE_TALK_ITEM", {
         index_name: `2_${this.params.receiver_id}`,
         is_disturb: parseInt(detail.status),
@@ -778,17 +778,17 @@ export default {
     },
 
     // 退出群聊回调事件
-    quitGroupSuccess() {
+    quitGroupSuccess () {
       this.$emit("close-talk");
     },
 
     // 同步群信息
-    syncGroupInfo(groupInfo) {
+    syncGroupInfo (groupInfo) {
       this.$refs.panelHeader.setGroupNum(groupInfo.members_num);
     },
 
     // 对话面板滚动事件
-    talkPanelScroll(e) {
+    talkPanelScroll (e) {
       if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
         this.loadChatRecords();
         return;
@@ -802,7 +802,7 @@ export default {
     },
 
     // 聊天版本滚动到底部
-    talkPanelScrollBottom() {
+    talkPanelScrollBottom () {
       let el = document.getElementById("lumenChatPanel");
       el.scrollTop = el.scrollHeight;
     },
@@ -869,26 +869,28 @@ export default {
     color: black;
   }
 }
+
 .base {
-    margin-top: 5px;
-    height: 120px;
-    display: flex;
+  margin-top: 5px;
+  height: 120px;
+  display: flex;
 
-    div {
-      width: 100px;
-      overflow: hidden;
-      text-overflow:ellipsis;
-      margin-top: 8px;
-      white-space: nowrap;
-    }
+  div {
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 8px;
+    white-space: nowrap;
+  }
 
-    .image {
-        height: 100px;
-        margin-top: 3px;
-        width: 100px
-    }
+  .image {
+    height: 100px;
+    margin-top: 3px;
+    width: 100px
+  }
 
 }
+
 .talk-bubble {
   position: absolute;
   left: 0px;
diff --git a/im/src/components/chat/panel/template/footPrint.vue b/im/src/components/chat/panel/template/footPrint.vue
index 800b48d1..8630ce99 100644
--- a/im/src/components/chat/panel/template/footPrint.vue
+++ b/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-tab-pane label="最近浏览" name="first"></el-tab-pane>
+      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
+        <el-tab-pane label="最近浏览" name="goods">
+          <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: 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>
-    <dl>
-      <dd v-for="item in list" v-infinite-scroll="loadMore">
-        <div class="base" @click="linkToGoods(item.goodsId, item.id)">
-          <div>
-            <img :src="item.thumbnail" class="image" />
-          </div>
-          <div style="margin-left: 13px">
-            <a>{{ item.goodsName }}</a>
-            <div>
-              <span style="color: red;">￥{{ item.price }}</span>
-            </div>
-          </div>
-        </div>
-      </dd>
-    </dl>
+
   </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;
-    text-overflow: ellipsis;
-    margin-top: 8px;
-    white-space: nowrap;
-    margin-top: 4px;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // white-space: nowrap;
+    // margin-top: 8px;
+    // 
+    // margin-top: 4px;
   }
 
   .image {
     height: 100px;
     margin-top: 3px;
-    width: 100px
+    width: 100px;
   }
 
 }
diff --git a/im/src/components/chat/panel/template/goodsLink.vue b/im/src/components/chat/panel/template/goodsLink.vue
index 570f0c3f..77969dfc 100644
--- a/im/src/components/chat/panel/template/goodsLink.vue
+++ b/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"
-            @click="submitSendMessage()" plain>发送</el-button>
+          <el-button class="store-button" type="danger" v-if="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
     }
@@ -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.$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,
-        });
-      }
+      this.$emit('sendMessage', record, context);
       // 发送后隐藏按钮  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: {