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-21 14:57:27 +08:00
parent 9c82553013
commit d902254bf6
4 changed files with 145 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,14 +30,24 @@
<!-- 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" @click="detail(item)" :style="{ backgroundImage: item == selectedData ? '' : '',background: item == selectedData ? '#FFFBFA' : '',border: item == selectedData ? '1px solid #F4D0C9' : ''}">
<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="">
<img class="avatar-img" :src="item.anchorIconA" alt="" />
</div>
<div class="content-left">
<div class="name">{{ item.anchorIdA }}</div>
<div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
<div class="time">
PK时间：{{ TimestamptolocalTime(item.pkTime * 1000) }}
</div>
<div class="gold" v-if="item.userACoins != null">
<img
class="goldimg"
@@ -45,7 +55,9 @@
alt=""
/>
实际金币数：
<div class="gold-num">{{ goldCoinCalculation(item.userACoins) }}</div>
<div class="gold-num">
{{ goldCoinCalculation(item.userACoins) }}
</div>
</div>
</div>
</div>
@@ -59,19 +71,23 @@
<div class="information">
<div class="content-right">
<div class="name">{{ item.anchorIdB }}</div>
<div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
<div class="gold" v-if="item.userBCoins!= null">
<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" >{{ goldCoinCalculation(item.userBCoins) }}</div>
<div class="gold-num">
{{ goldCoinCalculation(item.userBCoins) }}
</div>
</div>
</div>
<div class="avatar">
<img class="avatar-img" :src="item.anchorIconA" alt="">
<img class="avatar-img" :src="item.anchorIconA" alt="" />
</div>
</div>
</div>
@@ -83,37 +99,64 @@
<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="" />
<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">总共：{{ goldCoinCalculation(selectedData.userACoins) }}</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">总共：{{ goldCoinCalculation(selectedData.userBCoins) }}</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" v-for="(item, index) in fetchDetailPkDataWithId" :style="{background:item.anchorCoinA > item.anchorCoinB? '#D1F6F7' : '#F9DFD9'}">
第{{index+1}}局:
<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" v-for="(item, index) in fetchDetailPkDataWithId" :key="index" :style="{background: item.anchorCoinB > item.anchorCoinA? '#D1F6F7' : '#F9DFD9'}">
第{{index+1}}局:
<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>
<div class="notdata" v-if="selectedData == null">
<div class="chatNotDeta-text">右方选择记录立即查看详情</div>
</div>
</el-splitter-panel>
</el-splitter>
@@ -128,9 +171,9 @@ import {
onUpdated, // 组件更新后执行
onUnmounted, // 组件销毁前执行
} from "vue";
import {getPkRecord,queryPkDetail} from "@/api/account";
import { getPkRecord, queryPkDetail } from "@/api/account";
import { ElMessage } from "element-plus";
import {getPromiseStorage } from "@/utils/storage.js";
import { getPromiseStorage } from "@/utils/storage.js";
import { TimestamptolocalTime } from "@/utils/timeConversion.js";
import { goldCoinCalculation } from "@/utils/goldCoinCalculation.js";
@@ -151,14 +194,13 @@ const options = [
SelectedIcon: require("@/assets/InvitationSelected.png"),
},
];
const list = ref([]);// PK记录列表
const page = ref(0);// 页数
const IPKPostedData = ref([]);//我发布的PK
const InvitationData = ref([]);//我邀请的PK
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;
@@ -171,12 +213,13 @@ function detail(item) {
//切换选项卡
function optionsclick(value) {
segmentedvalue.value = value;
selectedData.value = null;
if (value === 1) {
list.value = IPKPostedData.value;
console.log("我发布的PK",list.value);
console.log("我发布的PK", list.value);
} else {
list.value = InvitationData.value;
console.log("我邀请的PK",list.value);
console.log("我邀请的PK", list.value);
}
}
@@ -191,16 +234,16 @@ function PkRecord(type) {
console.log(res);
if (type === 1) {
IPKPostedData.value.push(...res);
if(segmentedvalue.value === type){
if (segmentedvalue.value === type) {
list.value = IPKPostedData.value;
}
}else{
} else {
InvitationData.value.push(...res);
if(segmentedvalue.value === type){
if (segmentedvalue.value === type) {
list.value = InvitationData.value;
}
}
})
});
}
// 加载更多
@@ -242,6 +285,19 @@ onUnmounted(() => {
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;
}
.custom-style {
width: 90%;
height: 150px;
@@ -396,7 +452,7 @@ onUnmounted(() => {
border-radius: 50%;
background-color: #fff;
}
.avatar-img{
.avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
@@ -615,7 +671,7 @@ onUnmounted(() => {
background-color: #fbece9;
border: 1px solid #f4d0c9;
}
.goldlist-list{
.goldlist-list {
width: 85%;
padding-left: 2.5%;
padding-right: 2.5%;