727 lines
17 KiB
Vue
727 lines
17 KiB
Vue
<template>
|
||
<!-- 我的PK记录 -->
|
||
<div class="pk-record">
|
||
<el-splitter>
|
||
<el-splitter-panel>
|
||
<div class="demo-panel">
|
||
<!-- 选项卡 -->
|
||
<div class="custom-style">
|
||
<div
|
||
class="Options"
|
||
v-for="time in options"
|
||
@click="optionsclick(time.value)"
|
||
:style="{
|
||
borderBottom: segmentedvalue === time.value ? '5px solid #03ABA8' : '',
|
||
}"
|
||
>
|
||
<img
|
||
class="Options-icon"
|
||
:src="segmentedvalue === time.value ? time.SelectedIcon : time.icon"
|
||
alt=""
|
||
/>
|
||
<div
|
||
class="Options-label"
|
||
:style="{ color: segmentedvalue === time.value ? '#03ABA8' : '#636363' }"
|
||
>
|
||
{{ time.label }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- list -->
|
||
<div class="list" style="overflow: auto" v-infinite-scroll="load" v-if="list.length !== 0">
|
||
<div v-for="(item, index) in list" :key="index" class="list-item">
|
||
<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">{{ item.anchorIdA }}</div>
|
||
<div class="time">
|
||
{{t('PKTime')+TimestamptolocalTime(item.pkTime * 1000) }}
|
||
<!-- gjPK时间 -->
|
||
</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=""
|
||
/>
|
||
{{ t('ActualNumberOfGoldCoins') }}
|
||
<!-- gj实际金币数 -->
|
||
<div class="gold-num">
|
||
{{ goldCoinCalculation(item.userACoins) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="vs">
|
||
<img
|
||
style="width: 100%; height: 100%"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="information">
|
||
<div class="content-right">
|
||
<div class="name">{{ item.anchorIdB }}</div>
|
||
<div class="time">
|
||
{{t('PKTime')+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=""
|
||
/>
|
||
{{ t('ActualNumberOfGoldCoins') }}
|
||
<!-- gj实际金币数 -->
|
||
<div class="gold-num">
|
||
{{ goldCoinCalculation(item.userBCoins) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="avatar">
|
||
<img class="avatar-img" :src="item.anchorIconA" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chatNotDeta"v-if="list.length === 0">
|
||
<div class="chatNotDeta-text">{{ t('YouDonHaveAPKRecordYet') }}</div>
|
||
<!-- gj您还没有PK记录 -->
|
||
</div>
|
||
</div>
|
||
</el-splitter-panel>
|
||
|
||
<el-splitter-panel size="30%" :resizable="false" collapsible>
|
||
<div class="demo-panel" v-if="selectedData != null">
|
||
<div class="particularsAvatar">
|
||
<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">
|
||
{{t('InTotal')+goldCoinCalculation(selectedData.userACoins) }}
|
||
<!-- gj总计 -->
|
||
</div>
|
||
<img
|
||
class="altogether-icon"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||
alt=""
|
||
/>
|
||
<div class="altogether-num">
|
||
{{t('InTotal')+goldCoinCalculation(selectedData.userBCoins) }}
|
||
<!-- gj总计 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="goldlist">
|
||
<div class="goldlist-card goldlist-card-left">
|
||
<div
|
||
class="goldlist-list"
|
||
v-for="(item, index) in fetchDetailPkDataWithId"
|
||
:style="{
|
||
background: item.anchorCoinA > item.anchorCoinB ? '#D1F6F7' : '#F9DFD9',
|
||
}"
|
||
>
|
||
{{t('The')+index + 1+t('THInning') }}:
|
||
<!-- gj第几局 -->
|
||
{{ goldCoinCalculation(item.anchorCoinA) }}
|
||
</div>
|
||
</div>
|
||
<div class="goldlist-card goldlist-card-right">
|
||
<div
|
||
class="goldlist-list"
|
||
v-for="(item, index) in fetchDetailPkDataWithId"
|
||
:key="index"
|
||
:style="{
|
||
background: item.anchorCoinB > item.anchorCoinA ? '#D1F6F7' : '#F9DFD9',
|
||
}"
|
||
>
|
||
{{t('The')+index + 1+t('THInning') }}:
|
||
<!-- gj第几局 -->
|
||
{{ goldCoinCalculation(item.anchorCoinB) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="notdata" v-if="selectedData == null">
|
||
<div class="chatNotDeta-text">{{ t('SelectRecordOnTheRightToViewDetailsImmediately') }}</div>
|
||
<!-- gj请先选择记录 -->
|
||
</div>
|
||
</el-splitter-panel>
|
||
</el-splitter>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref, // 响应式基础
|
||
watch, // 侦听器
|
||
onMounted, // 组件挂载完成后执行
|
||
onUpdated, // 组件更新后执行
|
||
onUnmounted, // 组件销毁前执行
|
||
} from "vue";
|
||
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";
|
||
|
||
//
|
||
import { useI18n } from "vue-i18n";
|
||
const { t } = useI18n();
|
||
window["$t"] = t;
|
||
//
|
||
|
||
const user = ref(null); // 用户信息
|
||
const refname = ref("");
|
||
const segmentedvalue = ref(1);
|
||
const options = [
|
||
{
|
||
label: t('ThePKIPosted'),
|
||
// gj发布的PK
|
||
value: 1,
|
||
icon: require("@/assets/Publish.png"),
|
||
SelectedIcon: require("@/assets/PublishSelected.png"),
|
||
},
|
||
{
|
||
label: t('ThePKIInvited'),
|
||
// gj邀请的PK
|
||
value: 2,
|
||
icon: require("@/assets/Invitation.png"),
|
||
SelectedIcon: require("@/assets/InvitationSelected.png"),
|
||
},
|
||
];
|
||
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;
|
||
}).catch((err) => {});
|
||
}
|
||
//切换选项卡
|
||
function optionsclick(value) {
|
||
segmentedvalue.value = value;
|
||
selectedData.value = null;
|
||
if (value === 1) {
|
||
list.value = IPKPostedData.value;
|
||
} else {
|
||
list.value = InvitationData.value;
|
||
}
|
||
}
|
||
|
||
//获取PK记录列表
|
||
function PkRecord(type) {
|
||
getPkRecord({
|
||
type: type,
|
||
userId: user.value.id,
|
||
page: page.value,
|
||
size: 10,
|
||
}).then((res) => {
|
||
console.log(res);
|
||
if (type === 1) {
|
||
IPKPostedData.value.push(...res);
|
||
if (segmentedvalue.value === type) {
|
||
list.value = IPKPostedData.value;
|
||
}
|
||
} else {
|
||
InvitationData.value.push(...res);
|
||
if (segmentedvalue.value === type) {
|
||
list.value = InvitationData.value;
|
||
}
|
||
}
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
// 加载更多
|
||
function load() {}
|
||
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
getPromiseStorage("user")
|
||
.then((res) => {
|
||
user.value = res;
|
||
PkRecord(1);
|
||
PkRecord(2);
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
});
|
||
onUpdated(() => {
|
||
// 组件更新后执行
|
||
});
|
||
onUnmounted(() => {
|
||
// 组件销毁前执行
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.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%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.notdata {
|
||
width: 99%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-left: #03aba8 solid 1px;
|
||
}
|
||
.chatNotDeta-text {
|
||
font-size: 20px;
|
||
color: #03aba8;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
.custom-style {
|
||
width: 90%;
|
||
height: 150px;
|
||
display: flex;
|
||
|
||
.Options {
|
||
&:first-child {
|
||
&.active {
|
||
animation: slideInFromRight 0.3s ease;
|
||
}
|
||
}
|
||
&:last-child {
|
||
&.active {
|
||
animation: slideInFromLeft 0.3s ease;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes slideInFromLeft {
|
||
0% {
|
||
transform: translateX(-100%);
|
||
}
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideInFromRight {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
.Options {
|
||
width: 178px;
|
||
height: 100px;
|
||
margin-right: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 5px;
|
||
background-color: #03aba8;
|
||
transform: translateX(-100%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
&.active {
|
||
&::after {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
&.left-to-right {
|
||
&::after {
|
||
transform: translateX(-100%);
|
||
}
|
||
&.active::after {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
&.right-to-left {
|
||
&::after {
|
||
transform: translateX(100%);
|
||
}
|
||
&.active::after {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
display: flex;
|
||
}
|
||
.Options {
|
||
width: 300px;
|
||
height: 100px;
|
||
margin-right: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.Options-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-right: 15px;
|
||
}
|
||
.Options-label {
|
||
font-size: 24px;
|
||
}
|
||
.list {
|
||
width: 100%;
|
||
height: calc(100% -150px);
|
||
}
|
||
.chatNotDeta{
|
||
width: 100%;
|
||
height: calc(100% -150px);
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.chatNotDeta-text{
|
||
font-size: 20px;
|
||
color: #03aba8;
|
||
font-weight: bold;
|
||
}
|
||
.list-item {
|
||
width: 100%;
|
||
height: 150px;
|
||
margin-bottom: 15px;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.list-content {
|
||
width: 90%;
|
||
height: 100%;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
background-image: url(../../assets/PKbackground.png);
|
||
background-size: 100% 100%;
|
||
transition: all 0.4s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.list-content:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
|
||
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;
|
||
}
|
||
.information {
|
||
width: 40%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
}
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
.content-left {
|
||
width: calc(100% - 150px);
|
||
height: 80%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
}
|
||
.content-right {
|
||
width: calc(100% - 150px);
|
||
height: 80%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
}
|
||
.name {
|
||
color: @font-color;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
white-space: nowrap; /* 防止换行 */
|
||
overflow: hidden; /* 隐藏溢出内容 */
|
||
text-overflow: ellipsis;
|
||
}
|
||
.time {
|
||
color: @Prompt-text-color;
|
||
font-size: 14px;
|
||
}
|
||
.gold {
|
||
color: @font-color;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.goldimg {
|
||
width: 38px;
|
||
height: 38px;
|
||
margin-right: 13px;
|
||
}
|
||
.gold-num {
|
||
color: @font-color;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
.PKbothinfo {
|
||
width: 100%;
|
||
height: 70px;
|
||
display: flex;
|
||
}
|
||
.PKbothinfo-left {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
border-right: 1px solid @border-color;
|
||
}
|
||
.PKbothinfo-right {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
border-left: 1px solid @border-color;
|
||
}
|
||
.PKbothinfo-avatar {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
}
|
||
.PKbothinfo-gold-num {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: @font-color;
|
||
}
|
||
.PKbothinfo-center {
|
||
width: 100%;
|
||
height: calc(100% - 70px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
/* 隐藏滚动条外观 */
|
||
scrollbar-width: none; /* Firefox */
|
||
scrollbar-color: transparent; /* Firefox */
|
||
|
||
/* Webkit 浏览器（Chrome/Safari） */
|
||
&::-webkit-scrollbar {
|
||
display: none; /* 直接隐藏滚动条 */
|
||
/* 或者透明处理 */
|
||
/* width: 0; height: 0; */
|
||
/* background: transparent; */
|
||
}
|
||
}
|
||
.PKbothinfolist-item {
|
||
width: 100%;
|
||
height: 100px;
|
||
margin-bottom: 8px;
|
||
margin-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.PKbothinfolist-content {
|
||
width: 95%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
background-color: rgb(255, 255, 255);
|
||
transition: all 0.4s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.PKbothinfolist-content:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.02);
|
||
opacity: 0.8;
|
||
}
|
||
.gold-left {
|
||
width: 50%;
|
||
height: 100%;
|
||
color: @font-color;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
border-right: 2px solid @lose-color;
|
||
border-bottom-left-radius: 10px;
|
||
border-top-left-radius: 10px;
|
||
background-color: @lose-color;
|
||
}
|
||
.gold-right {
|
||
width: 50%;
|
||
height: 100%;
|
||
color: @font-color;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
border-left: 2px solid @win-color;
|
||
border-bottom-right-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
background-color: @win-color;
|
||
}
|
||
.particularsAvatar {
|
||
width: 100%;
|
||
height: 135px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-around;
|
||
}
|
||
.particularsAvatar-avatar {
|
||
width: 85px;
|
||
height: 85px;
|
||
border-radius: 50px;
|
||
background-color: #e9e9e9;
|
||
}
|
||
.altogether {
|
||
width: 100%;
|
||
height: 55px;
|
||
margin-top: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.altogethercard {
|
||
width: 90%;
|
||
height: 100%;
|
||
border-radius: 50px;
|
||
background-image: url(@/assets/InTotal.png);
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.altogether-icon {
|
||
width: 50px;
|
||
height: 40px;
|
||
}
|
||
.altogether-num {
|
||
width: 40%;
|
||
text-align: center;
|
||
color: #333333;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
overflow-x: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.goldlist {
|
||
width: 90%;
|
||
margin-top: 10px;
|
||
height: calc(100% - 200px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.goldlist-card {
|
||
width: 48%;
|
||
height: 98%;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow: auto;
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
.goldlist-card-left {
|
||
background-color: #dffefc;
|
||
border: 1px solid #86e1e3;
|
||
}
|
||
.goldlist-card-right {
|
||
background-color: #fbece9;
|
||
border: 1px solid #f4d0c9;
|
||
}
|
||
.goldlist-list {
|
||
width: 85%;
|
||
padding-left: 2.5%;
|
||
padding-right: 2.5%;
|
||
height: 57px;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
line-height: 57px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #03aba8;
|
||
border-radius: 10px;
|
||
white-space: nowrap;
|
||
// overflow-y: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.goldlist-list:first-child {
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|