聊天

src/store/module/message/chatRecord.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 const _ = require('lodash');
 Vue.use(Vuex);
 const api = {
-  url: "/point/chat/v1/api/chatRecord",
+  url: '/point/chat/v1/api/chatRecord',
 };
 
 const state = () => ({});
@@ -22,6 +22,10 @@ const actions = {
     const res = await this.$axios.$post(`${api.url}`, payload);
     return res;
   },
+  async read({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.url}/read`, payload);
+    return res;
+  },
   async fetch({ commit }, payload) {
     const res = await this.$axios.$get(`${api.url}/${payload}`);
     return res;

src/views/selfShop/message/parts/left-1.vue

@@ -3,8 +3,8 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="left_one">
-          <el-input placeholder="请输入名称" v-model="searchName" size="medium">
-            <el-button slot="append" icon="el-icon-search" @click="toSearch()"></el-button>
+          <el-input placeholder="请输入名称" :disabled="true" size="medium">
+            <el-button slot="append" icon="el-icon-search"></el-button>
           </el-input>
         </el-col>
         <el-col :span="24" class="left_two">
@@ -15,13 +15,16 @@
               </el-col>
               <el-col :span="20">
                 <el-col :span="24" class="left_time">
-                  <el-col :span="12" style="text-align: left">{{ item.customer.name }}</el-col>
-                  <el-col :span="12" style="text-align: right">{{ item.last_time }}</el-col>
+                  <el-col :span="10" style="text-align: left">{{ item.customer.name }}</el-col>
+                  <el-col :span="14" style="text-align: right">{{ item.last_chat.time }}</el-col>
                 </el-col>
                 <el-col :span="20" class="left_content">
-                  <p class="left_content_test">{{ item.last_chat }}</p>
+                  <p class="left_content_test" v-if="item.last_chat.msg_type == '0'">{{ item.last_chat.content }}</p>
+                  <p class="left_content_test" v-else>[图片]</p>
                 </el-col>
-                <el-col :span="4" class="left_badge"> <el-badge :value="3" :max="99" class="left_item"> </el-badge></el-col>
+                <el-col :span="4" class="left_badge" v-if="item.not_read != 0">
+                  <el-badge :value="item.not_read" :max="99" class="left_item"> </el-badge
+                ></el-col>
               </el-col>
             </el-col>
           </el-col>
@@ -37,7 +40,6 @@ export default {
   name: 'left-1',
   props: {
     roomList: { type: Array },
-    searchName: { type: String },
   },
   components: {},
   data: function () {
@@ -45,9 +47,6 @@ export default {
   },
   created() {},
   methods: {
-    toSearch() {
-      this.$emit('toSearch');
-    },
     toView(data) {
       this.$emit('toView', data);
     },

src/views/selfShop/message/parts/right-1.vue

@@ -4,17 +4,18 @@
       <el-col :span="24" class="main">
         <el-col :span="24" class="right_one">
           <p class="right_one_name">{{ customer.name }}</p>
-          <p class="right_one_address">
+          <!-- <p class="right_one_address" v-if="add == '1'">
             {{ address.name }},{{ address.phone }},{{ address.province }},{{ address.city }},{{ address.area }},{{ address.address }}
-          </p>
+          </p> -->
         </el-col>
-        <el-col :span="24" class="right_two">
+        <div id="scrolldIV" class="scroll-div" ref="scrollContent">
+          <!-- <el-col :span="24" class="right_two"> -->
           <el-col :span="24" v-for="item in chatRecordList" :key="item._id">
             <el-col :span="24" class="right_time">{{ item.time }}</el-col>
-            <el-col :span="24" class="right_left" v-if="item.speaker._id != user._id">
+            <el-col :span="24" class="right_left" v-if="item.speaker != user.shop._id">
               <el-col :span="24">
                 <el-col :span="2" class="right_image">
-                  <el-image :src="item.speaker.icon[0].url" class="right_icon"> </el-image>
+                  <el-avatar :src="customer.icon[0].url" class="right_icon"></el-avatar>
                 </el-col>
                 <el-col :span="20" class="right_left_cont">
                   <span class="test" v-if="item.msg_type == '0' && item.content.length < 50">{{ item.content }}</span>
@@ -23,20 +24,21 @@
                 </el-col>
               </el-col>
             </el-col>
-            <el-col :span="24" class="right_right" v-else-if="item.speaker._id == user._id">
+            <el-col :span="24" class="right_right" v-else-if="item.speaker == user.shop._id">
               <el-col :span="24">
                 <el-col :span="20" class="right_right_cont">
-                  <span class="test" v-if="item.msg_type == '0' && item.content.length < 50">111{{ item.content }}</span>
+                  <span class="test" v-if="item.msg_type == '0' && item.content.length < 50">{{ item.content }}</span>
                   <div class="test" v-if="item.msg_type == '0' && item.content.length > 50">{{ item.content }}</div>
                   <el-image v-if="item.msg_type == '1'" :src="item.content" :preview-src-list="srcList" style="width: 300px" mode="widthFix"> </el-image>
                 </el-col>
                 <el-col :span="2" class="right_image">
-                  <el-image :src="item.speaker.icon[0].url" class="right_icon"> </el-image>
+                  <el-avatar :src="shop.file[0].url" class="right_icon"></el-avatar>
                 </el-col>
               </el-col>
             </el-col>
           </el-col>
-        </el-col>
+          <!-- </el-col> -->
+        </div>
         <el-col :span="24" class="right_thr">
           <el-col :span="20" class="right_thr_1">
             <el-form ref="form" :model="form" label-width="80px">
@@ -63,25 +65,44 @@ export default {
     chatRecordList: { type: Array },
     address: { type: Object },
     customer: { type: Object },
+    shop: { type: Object },
     form: { type: Object },
     srcList: { type: Array },
+    add: { type: String },
   },
   components: {},
   data: function () {
     return {};
   },
-  created() {},
+  created() {
+    this.setBottom();
+  },
+
   methods: {
+    search() {},
     toUp() {
       this.$emit('toUp');
     },
     onSubmit(data) {
       this.$emit('onSubmit', data);
     },
-    toaaa(val) {
-      console.log(val.length);
+    // 滚送到底部
+    setBottom() {
+      const me = this;
+      setTimeout(() => {
+        this.$nextTick(() => {
+          //一定要在this.$nextTick进行设置
+          me.$refs.scrollContent.scrollTop = 100000;
+          var container = this.$el.querySelector('scrolldIV');
+          // container.scrollTop = container.scrollHeight;
+          // console.log(container.scrollHeight);
+        });
+      }, 100);
     },
   },
+  updated: function () {
+    this.setBottom();
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -115,74 +136,80 @@ export default {
     color: #666;
   }
 }
-
-.right_two {
+.scroll-div {
   background: rgb(246, 246, 246);
-  height: 62vh;
-  overflow-y: auto;
-  .right_icon {
-    border-radius: 10px;
-    width: 50px;
-    height: 50px;
-  }
-  .right_time {
-    text-align: center;
-    padding: 10px 0;
-    color: #666;
+  height: 65vh;
+  width: 56vw;
+  overflow: auto;
+  margin: 0 15px;
+}
+// .right_two {
+//   background: rgb(246, 246, 246);
+//   height: 62vh;
+//   overflow-y: auto;
+.right_icon {
+  border-radius: 10px;
+  width: 50px;
+  height: 50px;
+}
+.right_time {
+  text-align: center;
+  padding: 10px 0;
+  color: #666;
+}
+.right_left {
+  text-align: left;
+  padding: 0 30px;
+
+  .right_image {
+    padding: 10px 15px;
   }
-  .right_left {
-    text-align: left;
-    padding: 0 30px;
 
-    .right_image {
-      padding: 10px 15px;
+  .right_left_cont {
+    padding: 20px 10px 10px 10px;
+    span {
+      margin: 20px 0 0 0;
     }
-
-    .right_left_cont {
-      padding: 20px 10px 10px 10px;
-      span {
-        margin: 20px 0 0 0;
-      }
-      .test {
-        border-radius: 8px;
-        border: 1px #ccc solid;
-        background: rgb(235, 249, 162);
-        padding: 10px;
-        word-wrap: break-word;
-      }
+    .test {
+      border-radius: 8px;
+      border: 1px #ccc solid;
+      background: rgb(235, 249, 162);
+      padding: 10px;
+      word-wrap: break-word;
     }
   }
-  .right_right {
-    padding: 0 30px;
-    .right_image {
-      padding: 10px 15px;
-    }
-    .right_time {
-      padding: 10px 0;
-    }
-    .right_right_cont {
-      margin: 0 0 0 8.3%;
-      padding: 20px 10px 10px 10px;
-      display: flex;
-      flex-direction: row-reverse;
-      .test {
-        border-radius: 8px;
-        border: 1px #ccc solid;
-        background: rgb(174, 254, 149);
-        padding: 10px;
-        word-break: break-all; // 强制内容换行
-      }
+}
+.right_right {
+  padding: 0 30px;
+  .right_image {
+    padding: 10px 15px;
+  }
+  .right_time {
+    padding: 10px 0;
+  }
+  .right_right_cont {
+    margin: 0 0 0 8.3%;
+    padding: 20px 10px 10px 10px;
+    display: flex;
+    flex-direction: row-reverse;
+    .test {
+      border-radius: 8px;
+      border: 1px #ccc solid;
+      background: rgb(174, 254, 149);
+      padding: 10px;
+      word-break: break-all; // 强制内容换行
     }
   }
 }
+// }
 .right_thr {
   position: relative;
   bottom: 0;
-  padding: 3px 5px;
+  padding: 3px 10px 3px 13px;
   .right_thr_2 {
     padding: 20px;
     .btn {
-      margin: 20px 0 0 0;
+      margin: 15px 0 0 0;
     }
   }
 }

src/views/selfShop/sales/index.vue

@@ -112,11 +112,11 @@ export default {
       this.loadings = false;
     },
     toExam({ data }) {
-      this.$set(this, `id`, data.id);
+      this.$set(this, `id`, data._id);
       this.$set(this, `view`, 'order');
     },
     toMessage({ data }) {
-      this.$router.push({ path: `/selfShop/message`, query: { customer_id: data.customer._id, address_id: data.address._id } });
+      this.$router.push({ path: `/selfShop/message`, query: { customer_id: data.customer._id } });
     },
     toBack() {
       this.view = 'list';