优化代码

src/components/Appaside.vue

@@ -10,10 +10,12 @@
         :style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' ,
         boxShadow: item.id === activeId|| item.id === 5? '5px 5px 5px rgba(0, 0, 0, 0.2)' : '',
         backgroundImage: item.id === activeId? `url(${require('@/assets/selectSidebar.png')})` : ''}">
-  
 
                 <img class="Navigation-card-icon-img" :src="item.id === activeId&& item.id !== 5? item.Selectedicon : item.icon" alt=""/>
             <div class="Navigation-card-name" :style="{color: item.id === activeId? '#03ABA8' : '' ,}">{{ item.name }}</div>
+            <div class="redDot" v-if="item.id === 3 && chatList.unreadTotal != 0">
+              {{ chatList.unreadTotal }}
+            </div>
         </div>
         
     </div>
@@ -281,7 +283,8 @@ import {
   editUserInfo,
   resendEmail,
   editEmail,
-  getUserInfo
+  getUserInfo,
+  logout
 } from "@/api/account";
 import {
   ref, // 响应式基础
@@ -293,6 +296,13 @@ import {
   reactive 
 } from "vue";
 import { getCountryNamesArray } from "../utils/countryUtil";
+import {
+  goEasyGetConversations,
+  goEasyDisConnect,
+} from "@/utils/goeasy.js";
+import { goeasy } from "../main";
+import GoEasy from "goeasy";
+var im = goeasy.im;
 const info = ref({}); // 用户信息
 const avatar = ref(null); //头像
 const country = ref([]);
@@ -364,7 +374,7 @@ const NavigationModule = [
 
 ]
 const drawer = ref(false)// 添加新PK弹窗
-const activeId = ref(null);//选中的导航id
+const activeId = ref(1);//选中的导航id
 const router = useRouter();
 const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗
 const selectAnchor = ref(null); // 选择的主播
@@ -380,6 +390,21 @@ const isSendEmail = ref(0); // 是否发送邮箱验证码
 const isResendEmail = ref(0); // 是否重发邮箱验证
 const timeLeft = ref(60); // 倒计时
 const newEmail = ref(''); // 新邮箱
+const chatList = ref({
+  unreadTotal: 0,
+}); // 会话列表
+
+//监听会话消息
+function onConversationsUpdated(conversations) {
+  chatList.value = conversations;
+  console.log(chatList.value);
+}
+//获取会话列表
+function getChatList() {
+  goEasyGetConversations().then((res) => {
+    chatList.value = res.content;
+  });
+}
 
 //重发邮箱验证
 function ResendEmail() {
@@ -590,11 +615,6 @@ function Confirm() {
     ElMessage.error("请输入场次");
     return;
   }
-  const loading = ElLoading.service({
-    lock: true,
-    text: "发布中....",
-    background: "rgba(0, 0, 0, 0.7)",
-  });
   releasePkInfo({
       anchorId: anchorName.value,
       pkTime: timevalue.value / 1000,
@@ -608,13 +628,11 @@ function Confirm() {
       pkNumber: sessionnum.value,
     })
       .then((res) => {
-        loading.close();
         ElMessage.success("发布成功");
         Reset();
         drawer.value = false;
       })
       .catch((err) => {
-        loading.close();
         console.log(err);
       });
   }
@@ -632,6 +650,10 @@ function Reset() {
 
 // 选择我的主播弹窗确认
 function myAnchorDialogConfirm() {
+  if (selectAnchor.value == null) {
+    ElMessage.error("请选择主播");
+    return;
+  }
   AnchorProfilePicture.value = selectAnchor.value.headerIcon.split("/").pop();
   anchorName.value = selectAnchor.value.anchorId;
   gendervalue.value = selectAnchor.value.gender;
@@ -687,9 +709,17 @@ function popoverClick(id) {
     copyToClipboard('PK@TikTok0.xyz')
   }else if (id === 4) {
     // 退出登录
-    clearStorage("user")
-    clearStorage("token")
     router.push('/')
+    logout({
+      id: info.value.id,
+    }).then(res => {
+      goEasyDisConnect().then(() => {
+        ElMessage.success("退出登录成功");
+        clearStorage("user")
+        clearStorage("token")
+        clearStorage("activeId")
+      })
+    });
   }
   
 }
@@ -725,7 +755,7 @@ watch(refname, async (newQuestion, oldQuestion) => {
 });
 onMounted(() => {
     getPromiseStorage('activeId').then(res => {
-      activeId.value = res
+      activeId.value = res || 1;
     });
     getPromiseStorage('user').then(res => {
       info.value = res;
@@ -734,6 +764,11 @@ onMounted(() => {
       getAnchorLibrary()
       UserInfo();
     });
+  
+    setTimeout(() => {
+      getChatList();
+    im.on(GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, onConversationsUpdated);
+  }, 1000);
 });
 onBeforeMount(()=>{
     // 组件挂载前执行
@@ -836,6 +871,7 @@ onUnmounted(() => {
     align-items: center;
 }
 .Navigation-card{
+    position: relative;
     width: 60px;
     height: 60px;
     border-radius: 10px;
@@ -860,6 +896,20 @@ onUnmounted(() => {
     color:@Prompt-text-color;
     margin-top: 5px;
 }
+
+.redDot{
+    padding: 3px 6px 3px 6px;
+    border-radius: 50px;
+    background-color: #ff0000;
+    color: #ffffff;
+    font-size: 10px;
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    text-align: center;
+    line-height: 10px;
+}
+
 .Navigation-card:hover{
     transform: scale(1.1);
     opacity: 0.8;
@@ -1014,7 +1064,7 @@ onUnmounted(() => {
   transform: scale(0.95) !important;
 }
 .myAnchorDialogConfirm{
-   width: 400px;
+   width: 300px;
   height: 50px;
   margin-top: 30px;
   text-align: center;
@@ -1031,6 +1081,10 @@ onUnmounted(() => {
   transform: scale(1.1);
   opacity: 0.8;
 }
+.myAnchorDialogConfirm:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .Reset {
   width: 85%;
   height: 50px;
@@ -1054,7 +1108,7 @@ onUnmounted(() => {
   transform: scale(0.95) !important;
 }
 .myAnchorDialogReset{
-  width: 400px;
+  width: 300px;
   height: 50px;
   margin-top: 30px;
   text-align: center;
@@ -1071,6 +1125,10 @@ onUnmounted(() => {
   transform: scale(1.1);
   opacity: 0.8;
 }
+.myAnchorDialogReset:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .myanchor-content {
   width: 100%;
   height: 600px;
@@ -1366,13 +1424,13 @@ onUnmounted(() => {
   background-color: #ffffff00;
   border-bottom: 1px solid #4fcacd;
 }
-:deep(.el-input__wrapper) {
-  box-shadow: none !important;
-  background-color: transparent !important;
-}
-:deep(.el-input__wrapper.is-focus) {
-  box-shadow: none !important;
-}
+// :deep(.el-input__wrapper) {
+//   box-shadow: none !important;
+//   background-color: transparent !important;
+// }
+// :deep(.el-input__wrapper.is-focus) {
+//   box-shadow: none !important;
+// }
 .email-Verification-btn-text{
   font-size: 14px;
   color: #999;