feat: 客服群发 - 客服许可过期提醒样式

project/src/components/assembly/screen/customerService.vue

@@ -61,10 +61,13 @@
                     <div class="flex" style="flex:1">
                       <img class="memberImg" :src="item1.avatar" alt="">
                       <div class="memberInfo">
-                        <div class="name">{{ item1.name }}</div>
+                        <div class="name">
+                          {{ item1.name }}
+                          <span :class="['status-tag', item1.is_active == 0 ? 'disabled' : '']">{{ item1.is_active == 1 ? '已激活' : '未激活' }}</span>
+                        </div>
                         <div class="other">部门：{{ item1.department_list && item1.department_list.join(',') }}</div>
-                        <div v-if="item1.active_desc" class="other">
-                          <span>状态：{{ item1.active_desc }}</span>
+                        <div v-if="item1.active_desc === '即将过期'" class="other">
+                          <span>{{ item1.active_desc }}</span>
                           <span v-if="item1.expire_time">({{ item1.expire_time.slice(0, 10) }})</span>
                         </div>
                       </div>
@@ -88,10 +91,13 @@
               <div class="flex" style="flex:1">
                 <img class="memberImg" :src="item.avatar" alt="">
                 <div class="memberInfo">
-                  <div class="name">{{ item.name }}</div>
+                  <div class="name">
+                    {{ item.name }}
+                    <span :class="['status-tag', item.is_active == 0 ? 'disabled' : '']">{{ item.is_active == 1 ? '已激活' : '未激活' }}</span>
+                  </div>
                   <div class="other">部门：{{ item.department_list && item.department_list.join(',') }}</div>
-                  <div v-if="item.active_desc" class="other">
-                    <span>状态：{{ item.active_desc }}</span>
+                  <div v-if="item.active_desc === '即将过期'" class="other">
+                    <span>{{ item.active_desc }}</span>
                     <span v-if="item.expire_time">({{ item.expire_time.slice(0, 10) }})</span>
                   </div>
                 </div>
@@ -399,7 +405,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .propoverItem {
-  width: 310px;
+  width: 330px;
   flex: 1;
   height: 100%;
 
@@ -549,6 +555,16 @@ export default {
       color: #333333;
       font-size: 13px;
       line-height: 18px;
+      .status-tag {
+        background-color: #00B38A;
+        color: #fff;
+        border-radius: 4px;
+        font-size: 12px;
+        padding: 0 1px;
+        &.disabled {
+          background-color: #B3B2B2;
+        }
+      }
     }
 
     .other {

project/src/components/assembly/screen/customerServiceCorpV2.vue

@@ -40,10 +40,13 @@
                     <div class="flex" style="flex:1">
                       <img class="memberImg" :src="item1.avatar" alt="">
                       <div class="memberInfo">
-                        <div class="name">{{item1.name}}</div>
+                        <div class="name">
+                          {{item1.name}}
+                          <span :class="['status-tag', item1.is_active == 0 ? 'disabled' : '']">{{ item1.is_active == 1 ? '已激活' : '未激活' }}</span>
+                        </div>
                         <div class="other">部门：{{ item1.corp_name }}</div>
-                        <div v-if="item1.active_desc" class="other">
-                          <span>状态：{{ item1.active_desc }}</span>
+                        <div v-if="item1.active_desc === '即将过期'" class="other">
+                          <span>{{ item1.active_desc }}</span>
                           <span v-if="item1.expire_time">({{ item1.expire_time.slice(0, 10) }})</span>
                         </div>
                       </div>
@@ -77,10 +80,13 @@
                 <div class="flex" style="flex:1">
                   <img class="memberImg" :src="item.avatar" alt="">
                   <div class="memberInfo">
-                    <div class="name">{{item.user_name}}</div>
+                    <div class="name">
+                      {{item.user_name}}
+                      <span :class="['status-tag', item.is_active == 0 ? 'disabled' : '']">{{ item.is_active == 1 ? '已激活' : '未激活' }}</span>
+                    </div>
                     <div class="other">部门：{{item.corp_name}}</div>
-                    <div v-if="item.active_desc" class="other">
-                      <span>状态：{{ item.active_desc }}</span>
+                    <div v-if="item.active_desc === '即将过期'" class="other">
+                      <span>{{ item.active_desc }}</span>
                       <span v-if="item.expire_time">({{ item.expire_time.slice(0, 10) }})</span>
                     </div>
                   </div>
@@ -167,7 +173,6 @@ export default {
       let res = []
       if (this.selectUser && this.selectUser.length) {
         this.selectUser.forEach(currentUser => {
-          console.log('currentUser => ', currentUser)
           const userInfo = {
             user_id: currentUser.user_id,
             user_name: currentUser.name,
@@ -176,6 +181,7 @@ export default {
             corpid: currentUser.corpid,
             active_desc: currentUser.active_desc,
             expire_time: currentUser.expire_time,
+            is_active: currentUser.is_active,
           }
           if (res && !res.length) { // 构造第一条数据 => 插入res中
             res.push({
@@ -448,7 +454,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .propoverItem {
-  width: 310px;
+  width: 330px;
   flex: 1;
   height: 100%;
   .allMember {
@@ -576,6 +582,16 @@ export default {
       color: #333333;
       font-size: 13px;
       line-height: 18px;
+      .status-tag {
+        background-color: #00B38A;
+        color: #fff;
+        border-radius: 4px;
+        font-size: 12px;
+        padding: 0 1px;
+        &.disabled {
+          background-color: #B3B2B2;
+        }
+      }
     }
     .other {
       color: #898d92;