|
|
@@ -0,0 +1,376 @@
|
|
|
+<template>
|
|
|
+ <div class="cl-chat__wrap">
|
|
|
+ <el-dialog :visible.sync="visible" :close-on-click-modal="false" width="1000px">
|
|
|
+ <div class="cl-chat">
|
|
|
+ <div class="cl-chat__left">
|
|
|
+ <div class="header">
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索联系人"
|
|
|
+ size="small"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="container">
|
|
|
+ <ul class="users">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in userList"
|
|
|
+ :key="index"
|
|
|
+ @click="toChat(item)"
|
|
|
+ >
|
|
|
+ <img class="avatar" :src="item.smallAvatarUrl" alt="" />
|
|
|
+
|
|
|
+ <div class="det">
|
|
|
+ <p>{{ item.userName }}</p>
|
|
|
+ <div>{{ item.source }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="date">
|
|
|
+ {{ item.chatTime }}
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cl-chat__right">
|
|
|
+ <div class="header">
|
|
|
+ <span>闪亮亮</span>
|
|
|
+ <div class="icon" @click="hide()">
|
|
|
+ <i class="el-icon-minus"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <ul class="message">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in messageList"
|
|
|
+ :key="index"
|
|
|
+ :class="[item.my ? 'right' : 'left']"
|
|
|
+ >
|
|
|
+ <img class="avatar" src="" alt="" />
|
|
|
+ <div class="det">
|
|
|
+ <div class="label">
|
|
|
+ <span class="name">刘先生</span>
|
|
|
+ <span class="date">2020-12-22</span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <p class="block text" v-if="item.type == 'text'">
|
|
|
+ {{ item.text }}
|
|
|
+ </p>
|
|
|
+ <el-image
|
|
|
+ class="block pic"
|
|
|
+ v-else-if="item.type == 'pic'"
|
|
|
+ :src="item.src"
|
|
|
+ :preview-src-list="[item.src]"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer">
|
|
|
+ <ul class="tools">
|
|
|
+ <li>
|
|
|
+ <el-button size="mini">商品图</el-button>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <el-upload action="">
|
|
|
+ <el-button size="mini" icon="el-icon-picture"></el-button>
|
|
|
+ </el-upload>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <el-button class="send-btn" size="small" type="primary">发送</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ class="cl-chat__notice"
|
|
|
+ v-show="!visible"
|
|
|
+ icon="el-icon-message-solid"
|
|
|
+ round
|
|
|
+ size="small"
|
|
|
+ @click="show()"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ userList: [],
|
|
|
+ messageList: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: '我是厦门第一'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pic',
|
|
|
+ src:
|
|
|
+ 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2164724814,1401845036&fm=26&gp=0.jpg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: '我是厦门第二',
|
|
|
+ my: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pic',
|
|
|
+ src:
|
|
|
+ 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3973065280,787801978&fm=26&gp=0.jpg',
|
|
|
+ my: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getUserList() {
|
|
|
+ this.$service.chat.recentlyUser().then(res => {
|
|
|
+ this.userList = res;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ toChat(e) {
|
|
|
+ this.$service.chat.begin({ id: e.id }).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ show() {
|
|
|
+ this.visible = true;
|
|
|
+ this.getUserList();
|
|
|
+ },
|
|
|
+
|
|
|
+ hide() {
|
|
|
+ this.visible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+.cl-chat__wrap {
|
|
|
+ >>>.el-dialog {
|
|
|
+ &__header {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cl-chat {
|
|
|
+ display flex;
|
|
|
+ height 600px;
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ width: 300px;
|
|
|
+ background-color #F7F6F9;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display flex;
|
|
|
+ align-items center;
|
|
|
+ height: 60px;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ >>>input {
|
|
|
+ border-radius: 30px;
|
|
|
+ background-color #E7E6E9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ overflow auto;
|
|
|
+
|
|
|
+ .users {
|
|
|
+ display flex;
|
|
|
+ flex-direction column;
|
|
|
+ li {
|
|
|
+ list-style none;
|
|
|
+ display flex;
|
|
|
+ align-items center;
|
|
|
+ height: 40px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ cursor pointer;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &.active {
|
|
|
+ background-color #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ height 40px;
|
|
|
+ width 40px;
|
|
|
+ border-radius: 40px;
|
|
|
+ background-color #ddd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .det {
|
|
|
+ flex: 1;
|
|
|
+ margin 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ font-size 12px;
|
|
|
+ color: #999;
|
|
|
+ height 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ width calc(100% - 300px);
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display flex;
|
|
|
+ align-items center;
|
|
|
+ height: 60px;
|
|
|
+ padding: 0 20px;
|
|
|
+ position relative;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ position absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ background-color #DAD9DC;
|
|
|
+ height 30px;
|
|
|
+ width: 30px;
|
|
|
+ color: #fff;
|
|
|
+ line-height 30px;
|
|
|
+ text-align center;
|
|
|
+ cursor pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity 0.7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ box-sizing border-box;
|
|
|
+ height calc(100% - 260px);
|
|
|
+ overflow auto;
|
|
|
+
|
|
|
+ .message {
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display flex;
|
|
|
+ list-style none;
|
|
|
+ margin-bottom 30px;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ height 40px;
|
|
|
+ width 40px;
|
|
|
+ border-radius: 40px;
|
|
|
+ background-color #ddd;
|
|
|
+ margin 0 10px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .det {
|
|
|
+ .label {
|
|
|
+ display flex;
|
|
|
+ align-items center;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin 0 10px 0 0;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display flex;
|
|
|
+ color: #666;
|
|
|
+ margin-top 10px;
|
|
|
+
|
|
|
+ .block {
|
|
|
+ background-color #eee;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ line-height 20px;
|
|
|
+ font-size 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ width: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ flex-direction row-reverse;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ margin 0 0 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ flex-direction row-reverse;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin 0 0 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ justify-content flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ height 200px;
|
|
|
+ position relative;
|
|
|
+
|
|
|
+ .tools {
|
|
|
+ display flex;
|
|
|
+ align-items center;
|
|
|
+ height 40px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style none;
|
|
|
+ margin-left 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .send-btn {
|
|
|
+ position absolute;
|
|
|
+ right 10px;
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cl-chat__notice {
|
|
|
+ position fixed;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
icssoa