1

src/components/chat.vue

@@ -0,0 +1,161 @@
+<template>
+  <div id="chat">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :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="two">
+          <el-col :span="20" class="two_1">
+            <el-input v-model="content"></el-input>
+          </el-col>
+          <el-col :span="4" class="two_2">
+            <el-button type="primary">发送</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'chat',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      content: '',
+      list: [
+        {
+          id: '客服',
+          sender_name: '客服',
+          content: '信息内容1',
+        },
+        {
+          id: '用户',
+          sender_name: '用户',
+          content: '信息内容2',
+        },
+        {
+          id: '客服',
+          sender_name: '客服',
+          content: '信息内容3',
+        },
+        {
+          id: '用户',
+          sender_name: '用户',
+          content: '信息内容4',
+        },
+      ],
+      // 客服头像
+      leftIcon: require('@a/leftIcon.png'),
+      // 用户头像
+      rightIcon: require('@a/rightIcon.png'),
+    };
+  },
+  created() {},
+  methods: {
+    // 区分发言人
+    isSender(data) {
+      return data.id == '客服';
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    height: 460px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #f7f7f7;
+    .list {
+      padding: 5px;
+      margin: 0 0 10px 0;
+      .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;
+          }
+        }
+      }
+      .right {
+        text-align: right;
+        .info {
+          .content {
+            background-color: #409eff;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+  .two {
+    height: 40px;
+    overflow: hidden;
+    border: 1px solid #cccccc;
+  }
+}
+</style>

src/views/index.vue

@@ -1,22 +1,43 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main"> test </el-col>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="btn">
+          <el-button type="primary" size="mini" @click="openBtn">在线客服</el-button>
+        </el-col>
+      </el-col>
     </el-row>
+    <el-dialog title="在线聊天" :visible.sync="show" width="40%" :before-close="close" :close-on-click-modal="false" :close-on-press-escape="false">
+      <chat-frame></chat-frame>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import chatFrame from '@c/chat.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    chatFrame,
+  },
   data: function () {
-    return {};
+    return {
+      show: true,
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    // 打开在线聊天
+    openBtn() {
+      this.show = true;
+    },
+    // 关闭在线聊天
+    close() {
+      this.show = false;
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -33,4 +54,10 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/deep/.el-dialog__body {
+  padding: 10px;
+  height: 500px;
+  overflow: hidden;
+}
+</style>