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

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