mfx/web-fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pk优化版

Browse Source
This commit is contained in:
没复习
2026-02-26 13:15:19 +08:00
parent d4c0dcf6b1
commit 5c1911314f
22 changed files with 742 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/pk-mini/PkAppaside.vue
View File

@@ -33,9 +33,10 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { getMainUserData, setStorage, getStorage } from '@/utils/pk-mini/storage'
import { goEasyGetConversations } from '@/utils/pk-mini/goeasy'
import { goEasyGetConversations, getPkGoEasy, GoEasy } from '@/utils/pk-mini/goeasy'
import { pkUnreadStore } from '@/stores/pk-mini/notice.js'
import { signIn } from '@/api/pk-mini'
import { ElMessage } from 'element-plus'
@@ -50,7 +51,8 @@ const props = defineProps({
const defaultAvatar = 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/default-avatar.png'
const userInfo = ref({})
const unreadCount = ref(0)
const unreadStore = pkUnreadStore()
const unreadCount = computed(() => unreadStore.count)
const activeId = ref('pk')
const navigationModule = [
@@ -79,30 +81,42 @@ function handleSettings() {
function getChatList() {
goEasyGetConversations().then((res) => {
if (res?.content?.unreadTotal) {
unreadCount.value = res.content.unreadTotal
}
unreadStore.setCount(res?.content?.unreadTotal || 0)
}).catch(() => {})
}
function onMessageReceived() {
unreadStore.setCount(unreadStore.count + 1)
}
onMounted(() => {
// 获取用户信息
const userData = getMainUserData()
if (userData) {
userInfo.value = userData
}
// 获取保存的 activeId
const savedId = getStorage('activeId')
if (savedId) {
activeId.value = savedId
}
// 获取未读消息数
setTimeout(() => {
getChatList()
const goeasy = getPkGoEasy()
if (goeasy) {
goeasy.im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onMessageReceived)
}
}, 2000)
})
onUnmounted(() => {
const goeasy = getPkGoEasy()
if (goeasy) {
try {
goeasy.im.off(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onMessageReceived)
} catch (e) {}
}
})
</script>
<style scoped lang="less">

203
src/components/pk-mini/chat/MiniPKMessage.vue
View File

@@ -1,76 +1,71 @@
<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 ? $t('pkMini.man') : $t('pkMini.woman') }}
<div class="chat-message-mini-pk" :class="{ compact: compact }">
<!-- 卡片区域（相对定位容器，VS 绝对叠在中间） -->
<div class="pk-cards">
<!-- 用户A -->
<div class="userA">
<div class="genderAndCountry">
<div class="gender" :style="{ background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F' }">
{{ ArticleDetailsA.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
</div>
<div class="Country">{{ ArticleDetailsA.country }}</div>
</div>
<div class="Country">{{ ArticleDetailsA.country }}</div>
</div>
<div class="time">
{{ $t('pkMini.PKTime') + 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">
{{ $t('pkMini.GoldCoin') }}
<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">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
<div class="time">
{{ $t('pkMini.PKTime') + 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">
{{ $t('pkMini.GoldCoin') }}
<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">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
</div>
</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsA.remark }}</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsA.remark }}</div>
</div>
<!-- VS -->
<div class="messageVS">
<img class="messageVS-img" src="@/assets/pk-mini/messageVS.png" alt="" />
</div>
<!-- VS 叠在两卡片中间缝 -->
<div class="messageVS">
<img class="messageVS-img" src="@/assets/pk-mini/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 ? $t('pkMini.man') : $t('pkMini.woman') }}
<!-- 用户B -->
<div class="userB">
<div class="genderAndCountry">
<div class="gender" :style="{ background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F' }">
{{ ArticleDetailsB.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
</div>
<div class="Country">{{ ArticleDetailsB.country }}</div>
</div>
<div class="Country">{{ ArticleDetailsB.country }}</div>
</div>
<div class="time">
{{ $t('pkMini.PKTime') + 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">
{{ $t('pkMini.GoldCoin') }}
<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">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
<div class="time">
{{ $t('pkMini.PKTime') + 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">
{{ $t('pkMini.GoldCoin') }}
<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">
{{ $t('pkMini.session') }}
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
</div>
</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsB.remark }}</div>
</div>
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsB.remark }}</div>
</div>
<!-- 按钮 -->
@@ -123,6 +118,10 @@ const props = defineProps({
item: {
type: Object,
required: true
},
compact: {
type: Boolean,
default: false
}
})
@@ -196,58 +195,43 @@ onMounted(() => {
<style scoped>
.chat-message-mini-pk {
width: 325px;
height: 820px;
width: 560px;
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);
padding: 15px 0;
}
.pk-cards {
position: relative;
width: 90%;
display: flex;
flex-direction: column;
}
.messageVS {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 67px;
height: 67px;
margin-top: -33.5px;
margin-bottom: -33.5px;
z-index: 2;
pointer-events: none;
}
.messageVS-img {
width: 67px;
height: 67px;
}
.userA {
width: 90%;
height: 335px;
width: 100%;
background-color: #c0e8e8;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 20px;
border-radius: 20px 20px 0 0;
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;
padding-bottom: 15px;
}
.genderAndCountry {
width: 90%;
@@ -314,15 +298,13 @@ onMounted(() => {
margin-top: 10px;
}
.userB {
width: 90%;
height: 315px;
width: 100%;
background-color: #f8e4e0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-top: 20px;
border-radius: 0 0 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 15px;
}
.btn {
margin-top: 20px;
@@ -424,4 +406,29 @@ onMounted(() => {
border-radius: 100px;
cursor: pointer;
}
/* 紧凑模式：适配 PK 大厅 350px 窄聊天框 */
.compact.chat-message-mini-pk {
width: 300px;
padding: 10px 0;
}
.compact .pk-cards {
width: 92%;
}
.compact .userA {
border-radius: 12px 12px 0 0;
padding-bottom: 10px;
}
.compact .userB {
border-radius: 0 0 12px 12px;
padding-bottom: 10px;
}
.compact .messageVS {
width: 44px;
height: 44px;
}
.compact .messageVS-img {
width: 44px;
height: 44px;
}
</style>

69
src/components/pk-mini/mine/PKRecord.vue
View File

@@ -1,8 +1,8 @@
<template>
<!-- 我的PK记录 -->
<div class="pk-record">
<el-splitter>
<el-splitter-panel>
<div class="pk-layout">
<div class="left-panel">
<div class="demo-panel">
<!-- 选项卡 -->
<div class="tab-header">
@@ -62,10 +62,10 @@
<div class="empty-tip" v-else>您还没有PK记录！</div>
</div>
</el-splitter-panel>
</div>
<!-- 右侧详情 -->
<el-splitter-panel :size="30" :resizable="false">
<div class="right-panel">
<div class="detail-panel" v-if="selectedData">
<!-- 双方头像 -->
<div class="detail-avatars">
@@ -110,8 +110,8 @@
<div class="empty-detail" v-else>
<span>选择右侧的记录，可立即查看详细信息</span>
</div>
</el-splitter-panel>
</el-splitter>
</div>
</div>
</div>
</template>
@@ -232,6 +232,28 @@ onMounted(() => {
height: 100%;
}
.pk-layout {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.left-panel {
flex: 1;
min-width: 0;
height: 100%;
overflow: hidden;
}
.right-panel {
width: 380px;
flex-shrink: 0;
height: 100%;
overflow: hidden;
border-left: 1px solid #03aba82f;
}
.demo-panel {
width: 100%;
height: 100%;
@@ -378,53 +400,54 @@ onMounted(() => {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-left: 1px solid #03aba82f;
padding: 15px;
box-sizing: border-box;
overflow: hidden;
}
.detail-avatars {
display: flex;
gap: 40px;
margin-bottom: 20px;
gap: 20px;
margin-bottom: 12px;
}
.detail-avatar {
width: 70px;
height: 70px;
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.detail-total {
width: 100%;
margin-bottom: 20px;
margin-bottom: 12px;
}
.total-card {
display: flex;
align-items: center;
justify-content: space-around;
padding: 15px;
padding: 10px;
background: linear-gradient(90deg, #e4ffff, #fff, #e4ffff);
border-radius: 30px;
}
.total-num {
font-size: 16px;
font-size: 13px;
font-weight: bold;
color: #333;
}
.total-icon {
width: 35px;
height: 28px;
width: 28px;
height: 22px;
}
.detail-rounds {
flex: 1;
width: 100%;
display: flex;
gap: 15px;
gap: 10px;
overflow: hidden;
}
@@ -432,9 +455,9 @@ onMounted(() => {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
border-radius: 16px;
gap: 8px;
padding: 10px;
border-radius: 12px;
overflow: auto;
}
@@ -449,9 +472,9 @@ onMounted(() => {
}
.round-item {
padding: 12px 15px;
padding: 8px 10px;
border-radius: 8px;
font-size: 16px;
font-size: 13px;
font-weight: bold;
color: #03aba8;
text-align: center;