内部外部

project/pidu/app/AppSessionArchive/components/Detail.vue

@@ -22,12 +22,14 @@
         </div>
         <div class="addressBook-left__list--wrapper">
           <div class="addressBook-left__list--item" v-for="(item, index) in list" :key="index" :class="leftActiveIndex == index ? 'active' : ''" @click="leftClick(index)">
-            <div v-if="tabIndex == 1">
+            <div v-if="tabIndex == 1" class="flex-left">
               <img src="./img/group-img.png" alt="">{{item.roomName}}
             </div>
             <div v-else>
               <img :src="item.toUserAvatar" alt="">{{item.toUserName}}
             </div>
+            <div class="flex-right" :class="`type`+item.roomType" v-if="tabIndex == 1 && item.roomType > 0">{{item.roomType == 1 ? '内部' : '外部'}}</div>
+            <div class="flex-right" :class="`type`+item.toUserType" v-if="tabIndex != 1 && item.toUserType > 0">{{item.toUserType == 1 ? '内部' : '外部'}}</div>
           </div>
           <AiEmpty v-if="!list.length"></AiEmpty>
         </div>
@@ -221,7 +223,6 @@
             this.getMsgList()
           }
         }
-        
       },
       getListInit() {
         this.isLoading = true
@@ -388,13 +389,18 @@
       .addressBook-left__list--wrapper {
         height: calc(100% - 110px);
         padding: 8px;
+        width: 100%;
+        box-sizing: border-box;
         overflow-y: scroll;
         .addressBook-left__list--item {
+          width: 100%;
           line-height: 44px;
           font-size: 16px;
           color: #333;
           margin-bottom: 8px;
           padding: 8px;
+          display: flex;
+          justify-content: space-between;
           cursor: pointer;
           img {
             width: 44px;
@@ -403,6 +409,26 @@
             margin-right: 8px;
             vertical-align: middle;
           }
+          .flex-left {
+            padding-right: 8px;
+            box-sizing: border-box;
+          }
+          .flex-right {
+            width: 50px;
+            text-align: center;
+            line-height: 24px;
+            height: 24px;
+            font-size: 12px;
+            margin-top: 8px;
+          }
+          .type1 {
+            background-color: #EAF4FF;
+            color: #267EF0;
+          }
+          .type2 {
+            background-color: #FDEEE1;
+            color: #FB7D29;
+          }
         }
         .addressBook-left__list--item:hover {
           background-color: #E8EFFF;