guhongwei %!s(int64=3) %!d(string=hai) anos
pai
achega
89a502263c

+ 1 - 1
src/assets/css/main.css

@@ -46,7 +46,7 @@ a {
 }
 
 .container {
-    padding: 30px;
+    padding: 20px;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 5px;

BIN=BIN
src/assets/leftIcon.png


BIN=BIN
src/assets/rightIcon.png


+ 1 - 1
src/components/common/Sidebar.vue

@@ -101,7 +101,7 @@ export default {
       deep: true,
       immediate: true,
       handler(val) {
-        this.getMenu();
+        // this.getMenu();
       },
     },
   },

+ 222 - 5
src/views/customer/index.vue

@@ -1,7 +1,78 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main"> 客服 </el-col>
+      <el-col :span="24" class="main">
+        <el-col :span="4" class="left">
+          <el-col :span="24" class="left_1">
+            <el-input placeholder="请输入查询内容" v-model="searchName" class="input-with-select">
+              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
+            </el-input>
+          </el-col>
+          <el-col :span="24" class="left_2">
+            <el-col :span="24" class="list" v-for="(item, index) in userList" :key="index" @click.native="chatBtn(item)">
+              <el-col :span="4" class="icon">
+                <el-image :src="rightIcon"></el-image>
+              </el-col>
+              <el-col :span="20" class="info">
+                <el-col :span="24" class="name textOver">
+                  {{ item.name }}
+                </el-col>
+                <el-col :span="24" class="date textOver">
+                  {{ item.renew_time }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="20" class="right">
+          <el-col :span="24" class="right_1">
+            <el-col :span="1" class="icon">
+              <el-image :src="rightIcon"></el-image>
+            </el-col>
+            <el-col :span="23" class="info">
+              <el-col :span="24" class="name">
+                姓名
+              </el-col>
+              <el-col :span="24" class="date textOver">
+                2021-01-01
+              </el-col>
+            </el-col>
+          </el-col>
+          <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-image :src="leftIcon"></el-image>
+                  </el-col>
+                  <el-col :span="22" 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>
+              </template>
+              <template v-else>
+                <el-col :span="24" class="left right">
+                  <el-col :span="22" 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-image :src="rightIcon"></el-image>
+                  </el-col>
+                </el-col>
+              </template>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="right_3">
+            發言
+          </el-col>
+        </el-col>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -13,10 +84,59 @@ export default {
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      // 查询好友
+      searchName: '',
+      // 客服头像
+      leftIcon: require('@a/leftIcon.png'),
+      // 用户头像
+      rightIcon: require('@a/rightIcon.png'),
+      userList: [
+        { name: '你好', renew_time: '2021-01-01' },
+        { name: '我不好', renew_time: '2021-01-01' },
+        { name: '你就好', renew_time: '2021-01-01' },
+      ],
+      // 聊天列表
+      chatList: [
+        {
+          id: '客服',
+          sender_name: '客服',
+          content: '信息内容1',
+        },
+        {
+          id: '用户',
+          sender_name: '用户',
+          content: '信息内容2',
+        },
+        {
+          id: '客服',
+          sender_name: '客服',
+          content: '信息内容3',
+        },
+        {
+          id: '用户',
+          sender_name: '用户',
+          content: '信息内容4',
+        },
+      ],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    search({ skip = 0, limit = 10, ...info } = {}) {
+      if (this.searchName) info.name = this.searchName;
+      console.log(info);
+    },
+    chatBtn(data) {
+      console.log(data);
+    },
+    // 区分发言人
+    isSender(data) {
+      return data.id == '客服';
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -33,4 +153,101 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  border: 1px solid #cccccc;
+  .left {
+    border-right: 1px solid #cccccc;
+    .left_1 {
+      height: 40px;
+      overflow: hidden;
+      /deep/.el-input--small .el-input__inner {
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+    .left_2 {
+      height: 700px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      .list {
+        border-bottom: 1px dashed #cccccc;
+        padding: 8px 5px;
+        .icon {
+          text-align: center;
+          .el-image {
+            /deep/.el-image__inner {
+              width: 40px;
+              height: 40px;
+              border-radius: 90px;
+            }
+          }
+        }
+        .info {
+          .name {
+            font-size: 14px;
+            font-weight: bold;
+            color: #000;
+            margin: 0 0 5px 0;
+          }
+          .date {
+            font-size: 12px;
+            color: #666;
+          }
+        }
+      }
+      .list:hover {
+        cursor: pointer;
+        background-color: #f9f9f9;
+        .info {
+          .name {
+            color: #409eff;
+          }
+        }
+      }
+    }
+  }
+  .right {
+    height: 740px;
+    overflow: hidden;
+    .right_1 {
+      height: 40px;
+      overflow: hidden;
+      background-color: #000;
+      .icon {
+        text-align: center;
+        height: 40px;
+        padding: 5px 0;
+        .el-image {
+          /deep/.el-image__inner {
+            width: 30px;
+            height: 30px;
+            border-radius: 90px;
+          }
+        }
+      }
+      .info {
+        color: #ffffff;
+        .name {
+          margin: 2px 0;
+          font-size: 14px;
+          font-weight: bold;
+        }
+        .date {
+          font-size: 12px;
+          color: #ccc;
+        }
+      }
+    }
+    .right_2 {
+      height: 600px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .right_3 {
+      height: 100px;
+      border-top: 1px solid #cccccc;
+    }
+  }
+}
+</style>

+ 4 - 0
vue.config.js

@@ -27,6 +27,10 @@ module.exports = {
         changeOrigin: true,
         ws: false,
       },
+      '/ws': {
+        target: 'http://192.168.1.19:15674',
+        ws: true,
+      },
     },
   },
 };