当前会话

src/components/IM/user-info.vue

+<template>
+  <section class="user-info-wrapper">
+    <div class="user-avt">
+      <img src="../../assets/image/img.jpg" alt />
+    </div>
+    <p class="user-name">{{userInfo.name}}</p>
+    <p class="user-mb">{{userInfo.mobilePhone}}</p>
+    <p>
+      <el-button
+        style="width: 100px;"
+        v-if="userInfo.isShowCopyBtn"
+        type="primary"
+        size="small"
+        @click="copy()"
+      >复制手机号</el-button>
+    </p>
+    <section class="other-info-wrapper">
+      <article class="other-info">
+        <div class="icon">
+          <img src="../../assets/image/img.jpg" alt />
+        </div>
+        <span class="desc">医生</span>
+      </article>
+      <article class="other-info">
+        <div class="icon">
+          <img src="../../assets/image/img.jpg" alt />
+        </div>
+        <span class="desc">无机构</span>
+      </article>
+      <article class="other-info">
+        <div class="icon">
+          <img src="../../assets/image/img.jpg" alt />
+        </div>
+        <span class="desc">无小店</span>
+      </article>
+    </section>
+    <section class="qt-wrapper">
+      <p class="title">问题归类</p>
+      <el-select style="width:100%;" multiple v-model="questionType" size="mini" placeholder="请选择问题分类">
+        <el-option
+          v-for="(item, index) in questionTypeOptions"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+    </section>
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => {
+        return {
+          name: " ",
+          mobilePhone: " ",
+          isShowCopyBtn: true
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      questionType: '',
+      questionTypeOptions: [
+        {
+          label: '未选中1',
+          value: 1
+        },
+        {
+          label: '未选中2',
+          value: 2
+        },
+        {
+          label: '未选中3',
+          value: 3
+        },
+        {
+          label: '未选中4',
+          value: 4
+        },
+      ]
+    };
+  },
+  methods: {
+    // 执行粘贴操作
+    copy() {}
+  }
+};
+</script>
+<style lang="scss" scoped>
+.user-info-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  .user-avt {
+    margin: 24px 0 10px;
+    & > img {
+      display: inline-block;
+      width: 64px;
+      height: 64px;
+      border-radius: 32px;
+    }
+  }
+  .user-name {
+    height: 28px;
+    line-height: 1;
+    font-size: 20px;
+    font-weight: 700;
+  }
+  .user-mb {
+    height: 20px;
+    line-height: 1;
+    margin: 4px 0;
+    font-size: 14px;
+    color: #666666;
+  }
+  .other-info-wrapper {
+    margin: 20px 24px 50px;
+    .other-info {
+      display: flex;
+      flex-direction: row;
+      margin: 10px 0;
+      // align-items: center;
+      .icon {
+        margin-right: 6px;
+        & > img {
+          width: 12px;
+          height: 12px;
+        }
+      }
+      .desc {
+        height: 14px;
+        line-height: 1;
+        color: #000000;
+        opacity: 0.65;
+      }
+    }
+  }
+  .qt-wrapper {
+    margin: 0 25px;
+    .title {
+      text-align: left;
+      font-weight: 700;
+      margin-bottom: 10px;
+      color: #333333;
+    }
+  }
+}
+</style>
+
+

src/components/breadcrumb.vue

@@ -25,7 +25,7 @@ export default {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .bread-crumb {
     position: fixed;
     left: 255px;

src/views/IM/current-session/index.vue

@@ -3,37 +3,65 @@
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <section class="component-content screenSet" id="screenSet">
       <article class="left">
-        <div class="header">
+        <div class="l-header">
           <span>我的任务(3)</span>
           <span>再来一个</span>
         </div>
         <p class="c-num">当前等待会话：4个</p>
         <ul class="session-list">
-          <li class="item">
-            <div class="left">
+          <li class="item current">
+            <div class="img-wrapper">
               <img src="../../../assets/image/img.jpg" alt="">
+              <div class="num-wrapper"><span class="num">222</span></div>
             </div>
-            <div class="right">
+            <div class="desc">
               <p class="top">
                 <span class="name">公华</span>
-                <span class="time">19:20</span>
+                <span class="time small">19:20</span>
               </p>
               <p class="bottom">少即是多</p>
             </div>
           </li>
           <li class="item">
-
-          </li>
+            <div class="img-wrapper">
+              <img src="../../../assets/image/img.jpg" alt="">
+              <div class="num-wrapper"><span class="num">222</span></div>
+            </div>
+            <div class="desc">
+              <p class="top">
+                <span class="name">公华</span>
+                <span class="time small">19:20</span>
+              </p>
+              <p class="bottom">少即是多</p>
+            </div>
+          </li>          
           <li class="item">
-
+            <div class="img-wrapper">
+              <img src="../../../assets/image/img.jpg" alt="">
+              <div class="num-wrapper"><span class="num">222</span></div>
+            </div>
+            <div class="desc">
+              <p class="top">
+                <span class="name">公华</span>
+                <span class="time small">19:20</span>
+              </p>
+              <p class="bottom">少即是多</p>
+            </div>
           </li>
         </ul>
       </article>
       <article class="center">
-
+        <div class="c-header">
+          <div class="c-header-l">
+            <img src="../../../assets/image/img.jpg" alt="">
+            <span class="name">这是一个用户名</span>
+            <span class="time-tip">当前会话时长：3分08秒</span>
+          </div>
+          <span class="close-btn">结束会话</span>
+        </div>
       </article>
       <article class="right">
-
+        <UserInfo :userInfo="userInfo"></UserInfo>
       </article>
     </section>
   </div>
@@ -44,18 +72,35 @@ import { doUpload, getFilePath } from "@/utils/qiniu-util";
 import { validateWord } from "@/utils/validate.js";
 import { openLoading, closeLoading } from "@/utils/utils";
 import * as commonUtil from "@/utils/utils";
+import UserInfo from "@/components/IM/user-info.vue";
+
 let vm = null;
 export default {
   components: {
-    BreadCrumb
+    BreadCrumb,
+    UserInfo
   },
   data() {
     return {
       curmbFirst: "云鹊客服",
       curmbSecond: "当前会话",
+      userInfo: {
+        name: "杨Song",
+        mobilePhone: '138****7261',
+        isShowCopyBtn: true,
+      },
+      // 消息列表
+      messageList: [
+        {
+          type: 1,
+          from: ''
+        }
+      ]
     };
   },
-  computed: {},
+  computed: {
+
+  },
   created() {
 
   },
@@ -81,7 +126,7 @@ export default {
       width: 270px;
       // padding: 0 25px 15px;
       border-right: 2px solid #F5F5F5;
-      .header {
+      .l-header {
         display: flex;
         flex-direction: row;
         height: 52px;
@@ -105,33 +150,114 @@ export default {
       .session-list {
         width: 100%;
         & > .item {
+          width: 100%;
           display: flex;
+          height: 72px;
           flex-direction: row;
           align-items: center;
-          .left {
+          padding: 0 25px;
+          cursor: pointer;
+          .img-wrapper {
+            position: relative;
+            top: 0;
+            left: 0;
             width: 40px;
             height: 40px;
-            border-radius: 50%;
+            margin-right: 10px;
             img {
               width: 100%;
               height: 100%;
+              border-radius: 20px;
+            }
+            .num-wrapper {
+              position: absolute;
+              top: 0;
+              right: -5px;
+              // padding: 2px 3px;
+              min-width: 14px;
+              height: 14px;
+              line-height: 14px;
+              .num {
+                display: inline-block;
+                min-width: 16px;
+                padding: 2px 3px;
+                border-radius: 8px;
+                text-align: center;
+                color: #FFFFFF;
+                background: #FF4D4F;
+              }
             }
-          }
-          .right {
 
           }
+          & > .desc {
+            flex: 1;
+            .top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              .name {
+                
+              }
+            }
+            .bottom {
+              font-size: 12px;
+              color: #999999;
+            }
+          }
+          &.current {
+            background: #F8F9FA;
+          }
         }
       }
     }
     .center {
       flex: 1;
+      .c-header {
+        padding: 0 25px;
+        height: 56px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 2px solid #F5F5F5;
+        & > .c-header-l {
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+          & > img {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            margin-right: 8px;
+          }
+          & > .name {
+            margin-right: 25px;
+            color: #333333;
+          }
+          & > .time-tip {
+            font-size: 12px;
+            color: #999999;
+          }
+        }
+        .close-btn {
+          width: 100px;
+          color: #C7C8C9;
+          cursor: pointer;
+        }
+      }
     }
     .right {
       width: 240px;
       border-left: 2px solid #F5F5F5;
     }
     background: #fff;
-
+    .time {
+      color: #999999;
+    }
+    .small {
+      font-size: 12px;
+    }
   }
 }
 </style>
\ No newline at end of file

src/views/IM/search-message/detail.vue

@@ -402,7 +402,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 	.discuss-opt{
 		padding:20px;
 		.btn-box{

src/views/IM/waiting-session/edit.vue

@@ -402,7 +402,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 	.discuss-opt{
 		padding:20px;
 		.btn-box{

src/views/IM/waiting-session/list.vue

@@ -12,7 +12,7 @@
         <el-table-column prop="category" label="用户类型" min-width="50" align="center"></el-table-column>
         <el-table-column prop="remark" label="认证状况" min-width="100" align="center"></el-table-column>
         <el-table-column prop="createdusername" label="所属机构" min-width="50" align="center"></el-table-column>
-        <el-table-column prop="modifiedUsername" label="备注信息" min-width="100" align="center"></el-table-column>
+        <!-- <el-table-column prop="modifiedUsername" label="备注信息" min-width="100" align="center"></el-table-column> -->
         <div slot="empty">
           <div class="table-empty">
             <img src="@/assets/image/no-content1.png" />

src/views/blank.vue

@@ -20,7 +20,7 @@ export default {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .blank-wrap {
     background: #fff;
     margin: 20px !important;

src/views/discuss/add-edit.vue

@@ -401,7 +401,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 	.discuss-opt{
 		padding:20px;
 		.btn-box{

src/views/discuss/index.vue

@@ -310,7 +310,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .item-component-wrap {
   .component-content {
     padding: 10px;

src/views/home.vue

@@ -93,7 +93,7 @@ export default {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
     .home-wrap {
         .message-content {
             .visitor {

src/views/layout/footer.vue

@@ -10,7 +10,7 @@
 <script>
 export default {};
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .footer-wrap {
   text-align: center;
   height: 75px;

src/views/layout/header.vue

@@ -120,7 +120,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .header-container {
   position: relative;
   left: 0;

src/views/layout/slidebar.vue

@@ -66,27 +66,27 @@ export default {
 
           // TODO 开发调试时写死, 发布时去掉
           vueMenuDtos = [{
-            icon: null,
+            icon: 'el-icon-setting',
             index: "waiting-session-list",
             subs: [],
             title: "等待会话"
           },{
-            icon: null,
+            icon: 'el-icon-setting',
             index: "current-session-index",
             subs: [],
             title: "当前会话"
           },{
-            icon: null,
+            icon: 'el-icon-setting',
             index: "search-message-list",
             subs: [],
             title: "消息查询"
           },{
-            icon: null,
+            icon: 'el-icon-setting',
             index: "waiting-session-list-3",
             subs: [],
             title: "我要群发"
           },{
-            icon: null,
+            icon: 'el-icon-setting',
             index: "waiting-session-list-4",
             subs: [],
             title: "历史群发"
@@ -125,7 +125,7 @@ export default {
   }
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .slidebar-container {
   display: block;
   position: absolute;

src/views/report/index.vue

@@ -283,7 +283,7 @@ export default {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .item-component-wrap {
     .component-content {
         padding: 10px;

src/views/report/reportSet.vue

@@ -240,7 +240,7 @@ export default {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .item-component-wrap {
     .component-content {
         padding: 10px;

src/views/topicManage/add-edit.vue

@@ -284,7 +284,7 @@ export default {
 	}
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 	.topicOpt{
 		.el-form-item__content{
 				width:80%;

src/views/topicManage/index.vue

@@ -351,7 +351,7 @@ export default {
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .item-component-wrap {
     .component-content {
         padding: 10px;