pxl/tk-mini-program-PC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
pengxiaolong
2025-08-20 22:11:41 +08:00
parent ce21a633ec
commit 9c82553013
22 changed files with 3627 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

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

28
src/api/account.js
View File

@@ -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})
}

BIN
src/assets/messageVS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
src/assets/pkMessageleft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/assets/pkMessageright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

102
src/components/Appaside.vue
View File

@@ -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;

588
src/components/chatMessage/PKMessage.vue Normal file
View File

@@ -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>

533
src/components/chatMessage/miniPKMessage.vue Normal file
View File

@@ -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>

4
src/components/mineSubComponent/AnchorLibrary.vue
View File

@@ -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%;

120
src/components/mineSubComponent/PKRecord.vue
View File

@@ -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="time">PK时间：2025-07-31 19:07</div>
<div class="gold">
<div class="name">{{ item.anchorIdA }}</div>
<div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
<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="time">PK时间：2025-07-31 19:07</div>
<div class="gold">
<div class="name">{{ item.anchorIdB }}</div>
<div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
<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="" alt="" />
<img class="particularsAvatar-avatar" :src="selectedData.anchorIconA" 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">
1000w
<div class="goldlist-list" v-for="(item, index) in fetchDetailPkDataWithId" :style="{background:item.anchorCoinA > item.anchorCoinB? '#D1F6F7' : '#F9DFD9'}">
第{{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 list" :key="index" :style="{background:?????? '#D1F6F7' : '#F9DFD9' }"> -->
10000000000000000w
<div class="goldlist-list" v-for="(item, index) in fetchDetailPkDataWithId" :key="index" :style="{background: item.anchorCoinB > item.anchorCoinA? '#D1F6F7' : '#F9DFD9'}">
第{{index+1}}局:
{{ 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 page = ref(0);
const IPKPostedData = ref([]);
const InvitationData = ref([]);
const list = ref([]);// PK记录列表
const page = ref(0);// 页数
const IPKPostedData = ref([]);//我发布的PK
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;
}

4
src/components/mineSubComponent/PKmessage.vue
View File

@@ -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%;

4
src/components/mineSubComponent/PointsList.vue
View File

@@ -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%;

115
src/utils/goeasy.js
View File

@@ -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);
},
});
})
}

19
src/utils/goldCoinCalculation.js Normal file
View File

@@ -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`;
}

22
src/utils/timeDisplay.js Normal file
View File

@@ -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;
}

4
src/views/ActivateEmail.vue
View File

@@ -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;

6
src/views/HomeView.vue
View File

@@ -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;

4
src/views/emailRegistration.vue
View File

@@ -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;

4
src/views/hosts/Forum.vue
View File

@@ -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%;

1033
src/views/hosts/Message.vue
View File

File diff suppressed because it is too large Load Diff

4
src/views/hosts/Mine.vue
View File

@@ -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;

1159
src/views/hosts/pk.vue
View File

File diff suppressed because it is too large Load Diff