优化代码

src/App.vue

@@ -25,7 +25,6 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
   }
 }
 </script>
-
 <style lang="less">
 @import "@/static/css/app.less";
 </style> 

src/api/account.js

@@ -121,4 +121,32 @@ export function editEmail(data) {
 //获取OTP
 export function getOtp() {
     return getAxios({ url: 'otp/getotp' })
+}
+//根据用户id查询该用户已发布的未被邀请的主播列表
+export function getAnchorListById(data) {
+    return postAxios({ url: 'pk/listUninvitedPublishedAnchorsByUserId', data })
+}
+//创建pk记录
+export function createPkRecord(data) {
+    return postAxios({ url: 'pk/createPkRecord', data })
+}
+//查询pk记录信息
+export function queryPkRecord(data) {
+    return postAxios({ url: 'pk/singleRecord', data })
+}
+//pk文章详情
+export function pkArticleDetail(data) {
+    return postAxios({ url: 'pk/pkInfoDetail', data })
+}
+//更新pk记录状态(同意/拒绝)
+export function updatePkRecordStatus(data) {
+    return postAxios({ url: 'pk/updatePkStatus', data })
+}
+//查询pk中每个场次的详细数据
+export function queryPkDetail(data) {
+    return postAxios({ url: 'pk/fetchDetailPkDataWithId', data })
+}
+//退出登录
+export function logout(data) {
+    return postAxios({ url: 'user/logout',data})
 }

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) {
+// :deep(.el-input__wrapper) {
-  box-shadow: none !important;
+//   box-shadow: none !important;
-  background-color: transparent !important;
+//   background-color: transparent !important;
-}
+// }
-:deep(.el-input__wrapper.is-focus) {
+// :deep(.el-input__wrapper.is-focus) {
-  box-shadow: none !important;
+//   box-shadow: none !important;
-}
+// }
 .email-Verification-btn-text{
   font-size: 14px;
   color: #999;

src/components/chatMessage/PKMessage.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="pk-message">
+    <div class="pk-message-left">
+      <div class="left-content">
+        <div class="AvatarandName">
+          <div class="Avatar">
+            <img class="AvatarImg" :src="ArticleDetailsA.anchorIcon" alt="" />
+          </div>
+          <div class="information">
+            <div class="name">{{ ArticleDetailsA.anchorId }}</div>
+
+            <div class="genderAndCountry">
+              <div
+                class="gender"
+                :style="{
+                  background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F',
+                }"
+              >
+                {{ ArticleDetailsA.sex == 1 ? "男" : "女" }}
+              </div>
+              <div class="Country">{{ ArticleDetailsA.country }}</div>
+            </div>
+            <div class="time">
+              PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="PKinformation">
+          <div class="gold">
+            <img
+              class="gold-img"
+              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
+              alt=""
+            />
+            <div class="sessions-content">
+              金币：
+              <div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
+            </div>
+          </div>
+          <div class="sessions">
+            <img
+              class="sessions-img"
+              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
+              alt=""
+            />
+            <div class="sessions-content">
+              场次：
+              <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="Remarks">备注：{{ ArticleDetailsA.remark }}</div>
+      </div>
+    </div>
+    <div class="pk-message-center">
+      <img class="messageVS" src="../../assets/messageVS.png" alt="" />
+      <div
+        class="messagebtn"
+        v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id"
+      >
+        <div class="messagebtn-left" @click="agree()">同意</div>
+        <div class="messagebtn-right" @click="refuse()">拒绝</div>
+      </div>
+
+      <div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">已同意邀请</div>
+
+      <div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">已拒绝邀请</div>
+
+      <div
+        v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id"
+        class="messageHint"
+      >
+        等待对方回应（如果已经回应请刷新页面）
+      </div>
+    </div>
+    <div class="pk-message-right">
+      <div class="right-content">
+        <div class="AvatarandName">
+          <div class="informationright">
+            <div class="nameright">{{ ArticleDetailsB.anchorId }}</div>
+            <div class="genderAndCountry">
+              <div class="Country">{{ ArticleDetailsB.country }}</div>
+              <div
+                class="gender"
+                :style="{
+                  background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F',
+                }"
+              >
+                {{ ArticleDetailsB.sex == 1 ? "男" : "女" }}
+              </div>
+            </div>
+            <div class="time">
+              PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+            </div>
+          </div>
+          <div class="Avatar">
+            <img class="AvatarImg" :src="ArticleDetailsB.anchorIcon" alt="" />
+          </div>
+        </div>
+        <!--  -->
+        <div class="PKinformation">
+          <div class="gold">
+            <img
+              class="gold-img"
+              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
+              alt=""
+            />
+            <div class="sessions-content">
+              金币：
+              <div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
+            </div>
+          </div>
+          <div class="sessions">
+            <img
+              class="sessions-img"
+              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
+              alt=""
+            />
+            <div class="sessions-content">
+              场次：
+              <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="Remarks">备注：{{ ArticleDetailsB.remark }}</div>
+      </div>
+    </div>
+  </div>
+  <!-- 同意邀请提示 -->
+  <el-dialog v-model="agreedialog" center title="提示" width="400" align-center>
+    <div class="dialog-content">
+      <div class="dialog-content-text">
+         <div>
+          邀请成功后的pk不可修改，不可删除，请谨慎操作！
+         </div>
+      </div>
+    <!--  -->
+    <div class="myanchor-dialog-btn">
+        <div class="remindermyAnchorDialogReset" @click="agreedialog = false">取消</div>
+        <div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">
+          确认
+        </div>
+      </div>
+
+    </div>
+  </el-dialog>
+  <!-- 拒绝邀请提示 -->
+  <el-dialog v-model="refusedialog" center title="提示" width="400" align-center>
+    <div class="dialog-content">
+      <!--  -->
+      <div class="dialog-content-text">
+        <div>
+            您确定要拒绝该邀请吗？
+        </div>
+      </div>
+
+      <div class="myanchor-dialog-btn">
+        <div class="remindermyAnchorDialogReset" @click="refusedialog = false">取消</div>
+        <div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm">
+          确认
+        </div>
+      </div>
+
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+import { queryPkRecord, pkArticleDetail,updatePkRecordStatus} from "@/api/account";
+import {
+  setStorage,
+  getStorage,
+  getPromiseStorage,
+  clearStorage,
+} from "@/utils/storage.js";
+import { TimestamptolocalTime } from "@/utils/timeConversion.js";
+import { ElMessage } from "element-plus";
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+const info = ref({}); // 用户信息
+const PkIDInfodata = ref({}); //pk信息
+const ArticleDetailsA = ref({}); //pK文章详情A
+const ArticleDetailsB = ref({}); //pk文章详情B
+const agreedialog = ref(false); //同意邀请提示
+const refusedialog = ref(false); //拒绝邀请提示
+const newValitem = ref({});
+
+
+//确认同意
+function agreedialogConfirm(){
+  updatePkRecordStatus({
+    id: newValitem.value.payload.customData.id,
+    pkStatus: 1,
+  }).then(() => {
+    ElMessage.success("同意成功");
+    PkIDInfodata.value.pkStatus = 1;
+    agreedialog.value = false
+  });
+}
+
+//确认拒绝
+function refusedialogConfirm(){
+  updatePkRecordStatus({
+    id: newValitem.value.payload.customData.id,
+    pkStatus: 2,
+  }).then(() => {
+    ElMessage.success("拒绝成功");
+    PkIDInfodata.value.pkStatus = 2;
+    refusedialog.value = false
+  });
+}
+
+//同意邀请
+const agree = () => {
+  agreedialog.value = true;
+};
+//拒绝邀请
+const refuse = () => {
+  refusedialog.value = true;
+};
+
+//监听props传值
+watch(
+  () => props.item,
+  (newVal) => {
+    console.log(newVal);// 用户可以替换为自己的方法
+    newValitem.value = newVal
+    queryPkRecord({
+      id: newVal.payload.customData.id,
+    }).then((res) => {
+      PkIDInfodata.value = res;
+      console.log("PkIDInfodata", res);
+    });
+    pkArticleDetail({
+      id: newVal.payload.customData.pkIdA,
+      userId: info.value.id,
+      from: 2,
+    }).then((res) => {
+      ArticleDetailsA.value = res;
+      console.log("ArticleDetailsA", res);
+    });
+    pkArticleDetail({
+      id: newVal.payload.customData.pkIdB,
+      userId: info.value.id,
+      from: 2,
+    }).then((res) => {
+      ArticleDetailsB.value = res;
+      console.log("ArticleDetailsB", res);
+    });
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  getPromiseStorage("user").then((res) => {
+    info.value = res;
+  });
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+const refname = ref("");
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+</script>
+
+<style scoped>
+.pk-message {
+  width: 1100px;
+  height: 273px;
+  border-radius: 16px;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  border-radius: 10px;
+  display: flex;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.pk-message-left {
+  width: 50%;
+  height: 100%;
+  background-image: url("../../assets/pkMessageleft.png");
+  background-size: 100% 100%;
+}
+.pk-message-center {
+  width: 300px;
+  height: 100%;
+  margin-left: -150px;
+  margin-right: -150px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.messageVS {
+  width: 67px;
+  height: 67px;
+}
+.messagebtn {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.messageHint {
+  width: 100%;
+  height: 50px;
+  color: #999;
+  font-size: 20px;
+  text-align: center;
+  line-height: 50px;
+  font-weight: bold;
+}
+.messagebtn-left {
+  width: 100px;
+  height: 50px;
+  background-color: #f0836c;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 50px;
+  transition: all 0.4s ease;
+}
+.messagebtn-left:hover {
+  transform: scale(1.05);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+.messagebtn-left:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+.messagebtn-right {
+  width: 100px;
+  height: 50px;
+  background-color: #4fcacd;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 50px;
+  transition: all 0.4s ease;
+}
+.messagebtn-right:hover {
+  transform: scale(1.05);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+.messagebtn-right:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+.pk-message-right {
+  width: 50%;
+  height: 100%;
+  background-image: url("../../assets/pkMessageright.png");
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: end;
+}
+/*  */
+.left-content {
+  width: 470px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+.right-content {
+  width: 470px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+.AvatarandName {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+.Avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-left: 10px;
+  margin-right: 10px;
+  background-color: #dadada;
+}
+.AvatarImg {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.information {
+  width: 350px;
+  height: 100px;
+}
+.informationright {
+  width: 350px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+.name {
+  width: 100%;
+  height: 25px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  white-space: nowrap; /* 防止换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis;
+}
+.nameright {
+  width: 100%;
+  height: 25px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  text-align: end;
+  white-space: nowrap; /* 防止换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis;
+}
+.genderAndCountry {
+  margin-top: 10px;
+  display: flex;
+}
+.gender {
+  font-size: 14px;
+  padding: 5px 20px 5px 20px;
+  background-color: #999;
+  border-radius: 20px;
+  color: #fff;
+}
+.Country {
+  font-size: 14px;
+  padding: 5px 20px 5px 20px;
+  background-color: #e4f9f9;
+  border-radius: 20px;
+  color: #03aba8;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.time {
+  margin-top: 10px;
+  font-size: 18px;
+  color: #999;
+}
+.PKinformation {
+  width: 70%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.gold {
+  display: flex;
+}
+.gold-img {
+  width: 20px;
+  height: 20px;
+}
+.sessions {
+  margin-left: 10px;
+  display: flex;
+}
+.sessions-img {
+  width: 20px;
+  height: 20px;
+}
+.sessions-content {
+  font-size: 20px;
+  color: #999;
+  display: flex;
+}
+.gold-num {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  margin-left: 5px;
+}
+.Remarks {
+  width: 70%;
+  font-size: 18px;
+  color: #999;
+  margin-bottom: 10px;
+}
+
+.dialog-content {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dialog-content-text{
+  width: 90%;
+  height: 200px;
+  background-color: #C0E8E8;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #03aba8;
+  border: 1px solid #03aba8;
+}
+.myanchor-dialog-btn {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+.remindermyAnchorDialogReset {
+  width: 150px;
+  height: 40px;
+  margin-top: 30px;
+  text-align: center;
+  line-height: 40px;
+  background: linear-gradient(0deg, #e4ffff, #ffffff);
+  color: #03aba8;
+  font-size: 18px;
+  transition: all 0.4s ease;
+  border-radius: 100px;
+  border: 1px solid #4fcacd;
+}
+.remindermyAnchorDialogReset:hover {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+.remindermyAnchorDialogReset:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+
+.remindermyAnchorDialogConfirm {
+  width: 150px;
+  height: 40px;
+  margin-top: 30px;
+  text-align: center;
+  line-height: 40px;
+  background: linear-gradient(0deg, #4fcacd, #5fdbde);
+  color: #ffffff;
+  font-size: 18px;
+  transition: all 0.4s ease;
+  border-radius: 100px;
+}
+.remindermyAnchorDialogConfirm:hover {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+.remindermyAnchorDialogConfirm:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+</style>

src/components/chatMessage/miniPKMessage.vue

@@ -0,0 +1,533 @@
+<template>
+  <div class="chat-message-mini-pk">
+    <!-- 用户A -->
+    <div class="userA">
+      <!--  -->
+      <div class="Avatar">
+        <img class="AvatarImg" :src="ArticleDetailsA.anchorIcon" alt="" />
+        <div class="name">{{ ArticleDetailsA.anchorId }}</div>
+      </div>
+      <!--  -->
+      <div class="genderAndCountry">
+        <div
+          class="gender"
+          :style="{
+            background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F',
+          }"
+        >
+          {{ ArticleDetailsA.sex == 1 ? "男" : "女" }}
+        </div>
+        <div class="Country">{{ ArticleDetailsA.country }}</div>
+      </div>
+      <!--  -->
+      <div class="time">
+        PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+      </div>
+      <!--  -->
+      <div class="PKinformation">
+        <div class="gold">
+          <img
+            class="gold-img"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
+            alt=""
+          />
+          <div class="sessions-content">
+            金币：
+            <div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
+          </div>
+        </div>
+        <div class="sessions">
+          <img
+            class="sessions-img"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
+            alt=""
+          />
+          <div class="sessions-content">
+            场次：
+            <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
+          </div>
+        </div>
+      </div>
+      <!--  -->
+      <div class="Remarks">备注：{{ ArticleDetailsA.remark }}</div>
+    </div>
+    <!-- vs -->
+    <div class="messageVS">
+      <img class="messageVS-img" src="../../assets/messageVS.png" alt="" />
+    </div>
+    <!-- 用户B -->
+    <div class="userB">
+      <!--  -->
+      <div class="Avatar">
+        <img class="AvatarImg" :src="ArticleDetailsB.anchorIcon" alt="" />
+        <div class="name">{{ ArticleDetailsB.anchorId }}</div>
+      </div>
+      <!--  -->
+      <div class="genderAndCountry">
+        <div
+          class="gender"
+          :style="{
+            background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F',
+          }"
+        >
+          {{ ArticleDetailsB.sex == 1 ? "男" : "女" }}
+        </div>
+        <div class="Country">{{ ArticleDetailsB.country }}</div>
+      </div>
+      <!--  -->
+      <div class="time">
+        PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+      </div>
+      <!--  -->
+      <div class="PKinformation">
+        <div class="gold">
+          <img
+            class="gold-img"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
+            alt=""
+          />
+          <div class="sessions-content">
+            金币：
+            <div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
+          </div>
+        </div>
+        <div class="sessions">
+          <img
+            class="sessions-img"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
+            alt=""
+          />
+          <div class="sessions-content">
+            场次：
+            <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
+          </div>
+        </div>
+      </div>
+      <div class="Remarks">备注：{{ ArticleDetailsB.remark }}</div>
+    </div>
+    <!-- btn -->
+    <div class="btn"  v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id">
+      <div class="messagebtn-left" @click="agree()">同意</div>
+      <div class="messagebtn-right" @click="refuse()">拒绝</div>
+    </div>
+    <div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">已同意邀请</div>
+
+    <div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">已拒绝邀请</div>
+
+    <div
+      v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id"
+      class="messageHint"
+    >
+      等待对方回应（如果已经回应请刷新页面）
+    </div>
+  </div>
+
+  <!-- 弹窗 -->
+  <!-- 同意邀请提示 -->
+  <el-dialog v-model="agreedialog" center title="提示" width="400" align-center>
+    <div class="dialog-content">
+      <div class="dialog-content-text">
+        <div>邀请成功后的pk不可修改，不可删除，请谨慎操作！</div>
+      </div>
+      <!--  -->
+      <div class="myanchor-dialog-btn">
+        <div class="remindermyAnchorDialogReset" @click="agreedialog = false">取消</div>
+        <div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">确认</div>
+      </div>
+    </div>
+  </el-dialog>
+  <!-- 拒绝邀请提示 -->
+  <el-dialog v-model="refusedialog" center title="提示" width="400" align-center>
+    <div class="dialog-content">
+      <!--  -->
+      <div class="dialog-content-text">
+        <div>您确定要拒绝该邀请吗？</div>
+      </div>
+
+      <div class="myanchor-dialog-btn">
+        <div class="remindermyAnchorDialogReset" @click="refusedialog = false">取消</div>
+        <div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm">确认</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+import { queryPkRecord, pkArticleDetail, updatePkRecordStatus } from "@/api/account";
+import {
+  setStorage,
+  getStorage,
+  getPromiseStorage,
+  clearStorage,
+} from "@/utils/storage.js";
+import { TimestamptolocalTime } from "@/utils/timeConversion.js";
+import { ElMessage } from "element-plus";
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+const info = ref({}); // 用户信息
+const PkIDInfodata = ref({}); //pk信息
+const ArticleDetailsA = ref({}); //pK文章详情A
+const ArticleDetailsB = ref({}); //pk文章详情B
+const agreedialog = ref(false); //同意邀请提示
+const refusedialog = ref(false); //拒绝邀请提示
+const newValitem = ref({});
+
+//确认同意
+function agreedialogConfirm() {
+  updatePkRecordStatus({
+    id: newValitem.value.payload.customData.id,
+    pkStatus: 1,
+  }).then(() => {
+    ElMessage.success("同意成功");
+    PkIDInfodata.value.pkStatus = 1;
+    agreedialog.value = false;
+  });
+}
+
+//确认拒绝
+function refusedialogConfirm() {
+  updatePkRecordStatus({
+    id: newValitem.value.payload.customData.id,
+    pkStatus: 2,
+  }).then(() => {
+    ElMessage.success("拒绝成功");
+    PkIDInfodata.value.pkStatus = 2;
+    refusedialog.value = false;
+  });
+}
+
+//同意邀请
+const agree = () => {
+  agreedialog.value = true;
+};
+//拒绝邀请
+const refuse = () => {
+  refusedialog.value = true;
+};
+
+//监听props传值
+watch(
+  () => props.item,
+  (newVal) => {
+    console.log(newVal); // 用户可以替换为自己的方法
+    newValitem.value = newVal;
+    queryPkRecord({
+      id: newVal.payload.customData.id,
+    }).then((res) => {
+      PkIDInfodata.value = res;
+      console.log("PkIDInfodata", res);
+    });
+    pkArticleDetail({
+      id: newVal.payload.customData.pkIdA,
+      userId: info.value.id,
+      from: 2,
+    }).then((res) => {
+      ArticleDetailsA.value = res;
+      console.log("ArticleDetailsA", res);
+    });
+    pkArticleDetail({
+      id: newVal.payload.customData.pkIdB,
+      userId: info.value.id,
+      from: 2,
+    }).then((res) => {
+      ArticleDetailsB.value = res;
+      console.log("ArticleDetailsB", res);
+    });
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  getPromiseStorage("user").then((res) => {
+    info.value = res;
+  });
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+const refname = ref("");
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+</script>
+
+<style scoped>
+.chat-message-mini-pk {
+  width: 325px;
+  height: 820px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+.messageVS {
+  width: 67px;
+  height: 67px;
+  margin-top: -33.5px;
+  margin-bottom: -33.5px;
+  z-index: 2;
+}
+.messageVS-img {
+  width: 67px;
+  height: 67px;
+}
+.userA {
+  width: 90%;
+  height: 335px;
+  background-color: #c0e8e8;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.Avatar {
+  width: 90%;
+  height: 50px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+}
+.AvatarImg {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+.name {
+  width: calc(100% - 60px);
+  margin-left: 10px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #000000;
+  white-space: nowrap; /* 防止换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis;
+}
+.genderAndCountry {
+  width: 90%;
+  height: 30px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+}
+.gender {
+  font-size: 14px;
+  padding: 5px 20px 5px 20px;
+  background-color: #999;
+  border-radius: 20px;
+  color: #fff;
+}
+.Country {
+  font-size: 14px;
+  padding: 5px 20px 5px 20px;
+  background-color: #e4f9f9;
+  border-radius: 20px;
+  color: #03aba8;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.time {
+  width: 90%;
+  height: 20px;
+  margin-top: 10px;
+  font-size: 14px;
+  color: #999999;
+}
+.PKinformation {
+  width: 90%;
+  height: 50px;
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.gold {
+  display: flex;
+  align-items: center;
+}
+.gold-img {
+  width: 20px;
+  height: 20px;
+}
+.sessions-content {
+  display: flex;
+  align-items: center;
+  color: #999;
+  font-size: 16px;
+}
+.gold-num {
+  font-size: 16px;
+  font-weight: bold;
+  color: #000000;
+  margin-left: 5px;
+}
+.Remarks {
+  width: 90%;
+  height: 90px;
+  font-size: 12px;
+  color: #999;
+  margin-top: 10px;
+}
+.sessions {
+  display: flex;
+  align-items: center;
+}
+.sessions-img {
+  width: 20px;
+  height: 20px;
+}
+.userB {
+  width: 90%;
+  height: 315px;
+  background-color: #f8e4e0;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.btn {
+  margin-top: 20px;
+  width: 90%;
+  height: 50px;
+  display: flex;
+  justify-content: space-around;
+}
+.messageHint {
+  margin-top: 20px;
+  width: 90%;
+  height: 50px;
+  font-size: 20px;
+  color: #999;
+  text-align: center;
+  line-height: 50px;
+  font-weight: bold;
+}
+.messagebtn-left {
+  width: 100px;
+  height: 50px;
+  background-color: #f0836c;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 50px;
+  transition: all 0.4s ease;
+}
+.messagebtn-left:hover {
+  transform: scale(1.05);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+.messagebtn-left:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+.messagebtn-right {
+  width: 100px;
+  height: 50px;
+  background-color: #4fcacd;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+  line-height: 50px;
+  transition: all 0.4s ease;
+}
+.messagebtn-right:hover {
+  transform: scale(1.05);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+.messagebtn-right:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+/* 弹窗 */
+.dialog-content {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dialog-content-text {
+  width: 90%;
+  height: 200px;
+  background-color: #c0e8e8;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #03aba8;
+  border: 1px solid #03aba8;
+}
+.myanchor-dialog-btn {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+.remindermyAnchorDialogReset {
+  width: 150px;
+  height: 40px;
+  margin-top: 30px;
+  text-align: center;
+  line-height: 40px;
+  background: linear-gradient(0deg, #e4ffff, #ffffff);
+  color: #03aba8;
+  font-size: 18px;
+  transition: all 0.4s ease;
+  border-radius: 100px;
+  border: 1px solid #4fcacd;
+}
+.remindermyAnchorDialogReset:hover {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+.remindermyAnchorDialogReset:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+
+.remindermyAnchorDialogConfirm {
+  width: 150px;
+  height: 40px;
+  margin-top: 30px;
+  text-align: center;
+  line-height: 40px;
+  background: linear-gradient(0deg, #4fcacd, #5fdbde);
+  color: #ffffff;
+  font-size: 18px;
+  transition: all 0.4s ease;
+  border-radius: 100px;
+}
+.remindermyAnchorDialogConfirm:hover {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+.remindermyAnchorDialogConfirm:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+</style>

src/components/mineSubComponent/AnchorLibrary.vue

@@ -311,6 +311,10 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .anchor-library-list {
   width: 100%;

src/components/mineSubComponent/PKRecord.vue

@@ -9,7 +9,7 @@
             <div
               class="Options"
               v-for="time in options"
-              @click="segmentedvalue = time.value"
+              @click="optionsclick(time.value)"
               :style="{
                 borderBottom: segmentedvalue === time.value ? '5px solid #03ABA8' : '',
               }"
@@ -30,22 +30,22 @@
           <!-- list -->
           <div class="list" style="overflow: auto" v-infinite-scroll="load">
             <div v-for="(item, index) in list" :key="index" class="list-item">
-              <div class="list-content">
+              <div class="list-content" @click="detail(item)" :style="{ backgroundImage: item == selectedData ? '' : '',background: item == selectedData ? '#FFFBFA' : '',border: item == selectedData ? '1px solid #F4D0C9' : ''}">
                 <div class="information">
                   <div class="avatar">
-                    <!-- 头像 -->
+                    <img class="avatar-img" :src="item.anchorIconA" alt="">
                   </div>
                   <div class="content-left">
-                    <div class="name">来自世界上最长名的国家的某个人</div>
+                    <div class="name">{{ item.anchorIdA }}</div>
-                    <div class="time">PK时间：2025-07-31 19:07</div>
+                    <div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
-                    <div class="gold">
+                    <div class="gold" v-if="item.userACoins != null">
                       <img
                         class="goldimg"
                         src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                         alt=""
                       />
                       实际金币数：
-                      <div class="gold-num">10000W</div>
+                      <div class="gold-num">{{ goldCoinCalculation(item.userACoins) }}</div>
                     </div>
                   </div>
                 </div>
@@ -58,20 +58,20 @@
                 </div>
                 <div class="information">
                   <div class="content-right">
-                    <div class="name">来自世界上最长名的国家的某个人</div>
+                    <div class="name">{{ item.anchorIdB }}</div>
-                    <div class="time">PK时间：2025-07-31 19:07</div>
+                    <div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
-                    <div class="gold">
+                    <div class="gold" v-if="item.userBCoins!= null">
                       <img
                         class="goldimg"
                         src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                         alt=""
                       />
                       实际金币数：
-                      <div class="gold-num">10000W</div>
+                      <div class="gold-num" >{{ goldCoinCalculation(item.userBCoins) }}</div>
                     </div>
                   </div>
                   <div class="avatar">
-                    <!-- 头像 -->
+                    <img class="avatar-img" :src="item.anchorIconA" alt="">
                   </div>
                 </div>
               </div>
@@ -79,38 +79,41 @@
           </div>
         </div>
       </el-splitter-panel>
+
       <el-splitter-panel size="30%" :resizable="false" collapsible>
-        <div class="demo-panel">
+        <div class="demo-panel" v-if="selectedData != null">
           <div class="particularsAvatar">
-            <img class="particularsAvatar-avatar" src="" alt="" />
+            <img class="particularsAvatar-avatar" :src="selectedData.anchorIconA" alt="" />
-            <img class="particularsAvatar-avatar" src="" alt="" />
+            <img class="particularsAvatar-avatar" :src="selectedData.anchorIconB" alt="" />
           </div>
           <!--  -->
           <div class="altogether">
             <div class="altogethercard">
-              <div class="altogether-num">总共：9999999K</div>
+              <div class="altogether-num">总共：{{ goldCoinCalculation(selectedData.userACoins) }}</div>
               <img
                 class="altogether-icon"
                 src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                 alt=""
               />
-              <div class="altogether-num">总共：9999999K</div>
+              <div class="altogether-num">总共：{{ goldCoinCalculation(selectedData.userBCoins) }}</div>
             </div>
           </div>
           <!--  -->
           <div class="goldlist">
             <div class="goldlist-card goldlist-card-left">
-              <div class="goldlist-list">
+              <div class="goldlist-list" v-for="(item, index) in fetchDetailPkDataWithId" :style="{background:item.anchorCoinA > item.anchorCoinB? '#D1F6F7' : '#F9DFD9'}">
-                1000w
+                第{{index+1}}局:
+                {{ goldCoinCalculation(item.anchorCoinA) }}
               </div>
             </div>
             <div class="goldlist-card goldlist-card-right">
-              <div class="goldlist-list">
+              <div class="goldlist-list" v-for="(item, index) in fetchDetailPkDataWithId" :key="index" :style="{background: item.anchorCoinB > item.anchorCoinA? '#D1F6F7' : '#F9DFD9'}">
-              <!-- <div class="goldlist-list" v-for="(item, index) in list" :key="index" :style="{background:?????? '#D1F6F7' : '#F9DFD9' }"> -->
+                第{{index+1}}局:
-                10000000000000000w
+                {{ goldCoinCalculation(item.anchorCoinB) }}
               </div>
             </div>
           </div>
+
         </div>
       </el-splitter-panel>
     </el-splitter>
@@ -125,9 +128,11 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
-import {getPkRecord} from "@/api/account";
+import {getPkRecord,queryPkDetail} from "@/api/account";
 import { ElMessage } from "element-plus";
 import {getPromiseStorage } from "@/utils/storage.js";
+import { TimestamptolocalTime } from "@/utils/timeConversion.js";
+import { goldCoinCalculation } from "@/utils/goldCoinCalculation.js";
 
 const user = ref(null); // 用户信息
 const refname = ref("");
@@ -146,26 +151,54 @@ const options = [
     SelectedIcon: require("@/assets/InvitationSelected.png"),
   },
 ];
-const list = ref([]);
+const list = ref([]);// PK记录列表
-const page = ref(0);
+const page = ref(0);// 页数
-const IPKPostedData = ref([]);
+const IPKPostedData = ref([]);//我发布的PK
-const  InvitationData = ref([]);
+const  InvitationData = ref([]);//我邀请的PK
+const selectedData = ref(null); //被选中的PK数据
+const fetchDetailPkDataWithId = ref([]); // PK详情数据
+
+
+//选中PK数据
+function detail(item) {
+  selectedData.value = item;
+  queryPkDetail({
+    id: item.id,
+  }).then((res) => {
+    fetchDetailPkDataWithId.value = res;
+  });
+}
+//切换选项卡
+function optionsclick(value) {
+  segmentedvalue.value = value;
+  if (value === 1) {
+    list.value = IPKPostedData.value;
+    console.log("我发布的PK",list.value);
+  } else {
+    list.value = InvitationData.value;
+    console.log("我邀请的PK",list.value);
+  }
+}
 
 //获取PK记录列表
-function PkRecord() {
+function PkRecord(type) {
   getPkRecord({
-    type: segmentedvalue.value,
+    type: type,
     userId: user.value.id,
     page: page.value,
     size: 10,
   }).then((res) => {
     console.log(res);
-    if (segmentedvalue.value === 1) {
+    if (type === 1) {
       IPKPostedData.value.push(...res);
-      list.value = IPKPostedData.value;
+      if(segmentedvalue.value === type){
+        list.value = IPKPostedData.value;
+      }
     }else{
       InvitationData.value.push(...res);
-      list.value = InvitationData.value;
+      if(segmentedvalue.value === type){
+        list.value = InvitationData.value;
+      }
     }
   })
 }
@@ -178,7 +211,8 @@ onMounted(() => {
   getPromiseStorage("user")
     .then((res) => {
       user.value = res;
-      PkRecord();
+      PkRecord(1);
+      PkRecord(2);
     })
     .catch((err) => {
       console.log(err);
@@ -196,6 +230,10 @@ onUnmounted(() => {
 .pk-record {
   width: 100%;
   height: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .demo-panel {
   width: 100%;
@@ -336,6 +374,11 @@ onUnmounted(() => {
   transform: scale(1.08);
   opacity: 0.8;
 }
+.list-content:active {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  transform: scale(1.05);
+  opacity: 0.9;
+}
 .vs {
   width: 50px;
   height: 50px;
@@ -353,6 +396,11 @@ onUnmounted(() => {
   border-radius: 50%;
   background-color: #fff;
 }
+.avatar-img{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
 .content-left {
   width: calc(100% - 150px);
   height: 80%;
@@ -556,6 +604,8 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  overflow: auto;
+  scrollbar-width: none; /* Firefox */
 }
 .goldlist-card-left {
   background-color: #dffefc;
@@ -575,10 +625,10 @@ onUnmounted(() => {
   line-height: 57px;
   font-size: 20px;
   font-weight: bold;
-  color: #333333;
+  color: #03aba8;
   border-radius: 10px;
   white-space: nowrap;
-  overflow-x: hidden;
+  // overflow-y: hidden;
   text-overflow: ellipsis;
 }
 

src/components/mineSubComponent/PKmessage.vue

@@ -616,6 +616,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
 .pk-message {
   width: 100%;
   height: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .demo-panel {
   width: 100%;

src/components/mineSubComponent/PointsList.vue

@@ -89,6 +89,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
 .points-list-container{
   width: 100%;
   height: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .points-list{
   width: 100%;

src/utils/goeasy.js

@@ -24,6 +24,19 @@ export function goEasyLink(data) {
     });
     })
 }
+//断开IM
+export function goEasyDisConnect() {
+    return new Promise((resolve, reject) => {
+         goeasy.disconnect({
+            onSuccess: function(){
+                resolve(true)
+            },
+            onFailed: function(error){
+                console.log("断开失败, code:"+error.code+ ",error:"+error.content);
+            }
+        });
+    });
+}
 
 //获取会话列表
 export function goEasyGetConversations() {
@@ -57,4 +70,106 @@ export function goEasyGetMessages(data) {
             }  
         });
     })
+}
+
+//发送文本消息
+export function goEasySendMessage(data) {
+    var im = goeasy.im;
+    let textMessage = im.createTextMessage({
+        text: data.text, //消息内容
+        to: {
+            type: GoEasy.IM_SCENE.PRIVATE,   //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
+            id: data.id, //接收方用户id
+            data: {"avatar": data.avatar, "nickname": data.nickname} //接收方用户扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
+        }
+    });
+    return new Promise((resolve, reject) => {
+        im.sendMessage({
+            message: textMessage,
+            onSuccess: function () { //发送成功
+                resolve(textMessage);
+            },
+            onFailed: function (error) { //发送失败
+                console.log('Failed to send private message，code:' + error.code + ' ,error ' + error.content);
+            }
+        });
+    })
+}
+
+//发送图片消息
+export function goEasySendImageMessage(data) {
+    var im = goeasy.im;
+    var message = im.createImageMessage({
+        file: data.imagefile, //H5获得的图片file对象，Uniapp和小程序调用chooseImage，success时得到的res.tempFiles数组中的元素，比如res.tempFiles[0]即为选择的第一张图片
+        to: {
+            type: GoEasy.IM_SCENE.PRIVATE,   //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
+            id: data.id, //接收方用户id
+            data: {"avatar": data.avatar, "nickname": data.nickname} //好友扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
+        },
+    });
+    return new Promise((resolve, reject) => {
+        im.sendMessage({
+            message: message,
+            onSuccess: function () {  //发送成功
+                resolve(message);
+            },
+            onFailed: function (error) { //发送失败
+                console.log('Failed to send message，code:' + error.code + ',error' + error.content);
+            }
+        })
+    })
+}
+//发送PK消息
+export function goEasySendPKMessage(data) {
+    var im = goeasy.im;
+    const customData = {
+        id: data.msgid,
+        pkIdA: data.pkIdA,
+        pkIdB: data.pkIdB,
+      };
+
+      let order = {
+        customData: customData,
+        link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png",
+        text: "PK邀请消息",
+      };
+
+      var customMessage = im.createCustomMessage({
+        type: 'pk',  //字符串，可以任意自定义类型，比如红包'hongbao', 订单'order，处方'chufang'
+        payload: order,
+        to: {
+            type: GoEasy.IM_SCENE.PRIVATE,   //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
+            id: data.id, //接收方用户id
+            data: {"avatar": data.avatar, "nickname": data.nickname} //好友扩展数据, 任意格式的字符串或者对象，用于更新会话列表conversation.data
+        }
+    });
+
+    return new Promise((resolve, reject) => {
+        im.sendMessage({
+            message: customMessage,
+            onSuccess: function () {  //发送成功
+                resolve(customMessage);
+            },
+            onFailed: function (error) { //发送失败
+                console.log('Failed to send message，code:' + error.code + ',error' + error.content);
+            }
+        });
+    }) 
+
+}
+//消息已读
+export function goEasyMessageRead(data) {
+    var im = goeasy.im;
+    return new Promise((resolve, reject) => {
+        im.markMessageAsRead({
+            id: data.id,
+            type: GoEasy.IM_SCENE.PRIVATE,
+            onSuccess: function () {
+                resolve(true);
+            },
+            onFailed: function (error) {
+                console.log('标记私聊已读失败', error);
+            },
+        });
+    })
 }

src/utils/goldCoinCalculation.js

@@ -0,0 +1,19 @@
+export function goldCoinCalculation(goldCoins) {
+        if (goldCoins === null || goldCoins === undefined) {
+          return "";
+        }
+        if (goldCoins < 1000) {
+          return String(goldCoins);
+        }
+        if (goldCoins >= 1000000) {
+          return "1M+";
+        }
+        const kValue = goldCoins / 1000;
+        const formattedString = kValue.toFixed(2); // 确保至少保留两位小数
+        const matchResult = formattedString.match(/^\d+\.\d{0,2}/);
+        if (matchResult === null) {
+          return kValue.toFixed(2) + "k"; // 确保至少保留两位小数
+        }
+        const formatted = matchResult[0];
+        return `${formatted}k`;
+}

src/utils/timeDisplay.js

@@ -0,0 +1,22 @@
+// 记录上次调用时间
+let lastTimestamp = null;
+
+/**
+ * 比较时间戳是否超过5分钟
+ * @param {number} timestamp - 要比较的时间戳（毫秒）
+ * @returns {boolean} - 是否超过5分钟或第一次调用
+ */
+export function timeDisplay(timestamp) {
+  // 第一次调用直接返回true
+  if (lastTimestamp === null) {
+    lastTimestamp = timestamp;
+    return true;
+  }
+  
+  // 计算时间差（毫秒）
+  const timeDiff = Math.abs(timestamp - lastTimestamp);
+  lastTimestamp = timestamp;
+  
+  // 5分钟 = 300,000毫秒
+  return timeDiff > 300000;
+}

src/views/ActivateEmail.vue

@@ -68,6 +68,10 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .activate-email-content{
     font-size: 30px;

src/views/HomeView.vue

@@ -26,6 +26,7 @@
             class="input-text"
             v-model="refEmail"
             placeholder="请输入邮箱或用户名"
+            @keydown.enter.native="EmailLogin"
           />
         </div>
         <div class="input-Password">
@@ -38,6 +39,7 @@
             v-model="refpassword"
             show-password
             placeholder="请输入密码"
+            @keydown.enter.native="EmailLogin"
           />
         </div>
         <div class="login-btn" @click="EmailLogin">登录</div>
@@ -200,6 +202,10 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .login {
   width: 627px;

src/views/emailRegistration.vue

@@ -178,6 +178,10 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .stepBar {
   width: 900px;

src/views/hosts/Forum.vue

@@ -61,6 +61,10 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .infinite-list {
   width: 90%;

src/views/hosts/Mine.vue

@@ -99,6 +99,10 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content:space-between;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .Selector{
   width: 420px;