1

src/views/customer/index.vue

@@ -41,11 +41,11 @@
           <el-col :span="24" class="right_2">
             <el-col :span="24" class="list" v-for="(item, index) in chatList" :key="index">
               <template v-if="isSender(item, index)">
-                <el-col :span="24" class="left">
-                  <el-col :span="2" class="icon">
+                <el-col :span="24" class="list_left">
+                  <el-col :span="1" class="icon">
                     <el-image :src="leftIcon"></el-image>
                   </el-col>
-                  <el-col :span="22" class="info">
+                  <el-col :span="23" class="info">
                     <el-col :span="24" class="name">{{ item.sender_name }}</el-col>
                     <el-col :span="24" class="content">
                       {{ item.content }}
@@ -54,14 +54,14 @@
                 </el-col>
               </template>
               <template v-else>
-                <el-col :span="24" class="left right">
-                  <el-col :span="22" class="info">
+                <el-col :span="24" class="list_left list_right">
+                  <el-col :span="23" class="info">
                     <el-col :span="24" class="name">{{ item.sender_name }}</el-col>
                     <el-col :span="24" class="content">
                       {{ item.content }}
                     </el-col>
                   </el-col>
-                  <el-col :span="2" class="icon">
+                  <el-col :span="1" class="icon">
                     <el-image :src="rightIcon"></el-image>
                   </el-col>
                 </el-col>
@@ -69,7 +69,12 @@
             </el-col>
           </el-col>
           <el-col :span="24" class="right_3">
-            發言
+            <el-col :span="24" class="right_3cont">
+              <el-input type="textarea" placeholder="请输入内容" :autosize="{ minRows: 3, maxRows: 5 }" v-model="content"> </el-input>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="primary" @click="send">发送</el-button>
+            </el-col>
           </el-col>
         </el-col>
       </el-col>
@@ -91,9 +96,9 @@ export default {
       // 查询好友
       searchName: '',
       // 客服头像
-      leftIcon: require('@a/leftIcon.png'),
+      leftIcon: require('@a/rightIcon.png'),
       // 用户头像
-      rightIcon: require('@a/rightIcon.png'),
+      rightIcon: require('@a/leftIcon.png'),
       userList: [
         { name: '你好', renew_time: '2021-01-01' },
         { name: '我不好', renew_time: '2021-01-01' },
@@ -122,6 +127,7 @@ export default {
           content: '信息内容4',
         },
       ],
+      content: '',
     };
   },
   created() {
@@ -143,7 +149,7 @@ export default {
     },
     // 区分发言人
     isSender(data) {
-      return data.id == '客服';
+      return data.id != '客服';
     },
     //获取客户列表
     async getClientList() {
@@ -168,7 +174,7 @@ export default {
       console.log('in function:');
       const time = 5000; //1min 600000
       setInterval(() => {
-        this.online({ _tenant: this._tenant, customer_id: this.user.id });
+        this.online({ _tenant: this._tenant, customer_id: this.user.id1 });
       }, time);
     },
     getTime(item) {
@@ -176,6 +182,17 @@ export default {
       if (!ct) return;
       return moment(ct).format('YYYY-MM-DD HH:mm:ss');
     },
+    // 发言
+    send() {
+      if (!this.content) {
+        this.$message({
+          message: '发言内容不能为空',
+          type: 'warning',
+        });
+      } else {
+        console.log(this.content);
+      }
+    },
   },
   computed: {
     ...mapState(['user', '_tenant']),
@@ -283,10 +300,54 @@ export default {
       height: 600px;
       overflow-x: hidden;
       overflow-y: auto;
+      background-color: #f7f7f7;
+      .list {
+        padding: 5px;
+        margin: 0 0 10px 0;
+        .list_left {
+          .icon {
+            text-align: center;
+            .el-image {
+              /deep/.el-image__inner {
+                width: 40px;
+                height: 40px;
+                border-radius: 90px;
+              }
+            }
+          }
+          .info {
+            .name {
+              font-size: 12px;
+              margin: 0 0 5px 0;
+            }
+            .content {
+              background-color: #ffffff;
+              border-radius: 5px;
+              padding: 5px;
+              font-size: 15px;
+              color: #000000;
+              line-height: 25px;
+              overflow-y: unset;
+            }
+          }
+        }
+        .list_right {
+          text-align: right;
+          .info {
+            .content {
+              background-color: #409eff;
+              color: #ffffff;
+            }
+          }
+        }
+      }
     }
     .right_3 {
       height: 100px;
       border-top: 1px solid #cccccc;
+      .btn {
+        text-align: right;
+      }
     }
   }
 }