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

7
src/components/Appaside.vue
View File

@@ -397,7 +397,6 @@ const chatList = ref({
//监听会话消息
function onConversationsUpdated(conversations) {
chatList.value = conversations;
console.log(chatList.value);
}
//获取会话列表
function getChatList() {
@@ -539,7 +538,6 @@ const handleAvatarSuccess = (
uploadFile
) => {
avatar.value = URL.createObjectURL(uploadFile.raw)
console.log(info.value);
editUserInfo({
id: info.value.id,
headerIcon: response.data.filename,
@@ -759,7 +757,6 @@ onMounted(() => {
});
getPromiseStorage('user').then(res => {
info.value = res;
console.log(res);
avatar.value = info.value.headerIcon;
getAnchorLibrary()
UserInfo();
@@ -821,6 +818,10 @@ onUnmounted(() => {
.Avatar-content{
width: 100%;
height: 250px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Avatar-content-name{
width: 100%;

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

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

@@ -877,7 +877,7 @@ watch(refname, async (newQuestion, oldQuestion) => {
resize: none;
}
.Confirm {
width: 400px;
width: 300px;
height: 50px;
margin-top: 40px;
text-align: center;
@@ -898,7 +898,7 @@ watch(refname, async (newQuestion, oldQuestion) => {
opacity: 0.8;
}
.Reset {
width: 400px;
width: 300px;
height: 50px;
margin-top: 30px;
text-align: center;

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

@@ -191,8 +191,8 @@
</el-splitter-panel>
<el-splitter-panel collapsible size="27%" :resizable="false">
<!-- 聊天面板 -->
<div class="demo-panel">
<div class="chat">
<div class="demo-panel" >
<div class="chat" v-if="handleClickdata != null">
<div class="chat-name">{{ info.nickName }}</div>
<!-- 聊天列表 -->
<div class="chat-content">
@@ -272,7 +272,7 @@
</div>
</div>
<!-- 聊天输入框 -->
<div class="chat-input" v-if="handleClickdata != null">
<div class="chat-input">
<!-- 控件 -->
<div class="chat-input-Controls">
<!-- 其他的消息 -->
@@ -317,6 +317,11 @@
</div>
</div>
</div>
<div class="chatNotDeta" v-if="handleClickdata == null">
<div class="chatNotDeta-text">
右方选择主播立即聊天
</div>
</div>
</div>
<!-- -->
</el-splitter-panel>
@@ -788,7 +793,6 @@ function reminderDialogConfirm() {
nickname: info.value.nickName,
};
goEasySendPKMessage(data).then((res) => {
console.log(res);
messageslist.value.push(res);
reminder.value = false;
resets();
@@ -885,17 +889,14 @@ function handleClick(time) {
handleClickdata.value = time;
isPage.value = true;
messageRead();
console.log(time);
getUserInfo({
id: handleClickdata.value.senderId,
}).then((res) => {
console.log(res);
info.value = res;
goEasyGetMessages({
id: String(handleClickdata.value.senderId),
timestamp: null,
}).then((res) => {
console.log(res);
messageslist.value = res;
nextTick(() => {
if (chatlistContainer.value) {
@@ -993,14 +994,19 @@ function scrollHandler() {
// 获取pk列表
function PkList(body) {
function PkList(body,type) {
console.log("body", body);
getPkList(body).then((res) => {
console.log("res", res);
if (type == "load" && res.length == []) {
page.value--;
}
if (body.condition.type == 2 || body.condition.type == undefined) {
HallList.value.push(...res);
if (PKistodayorhall.value) {
list.value = HallList.value;
}
} else {
} else if (body.condition.type == 1) {
TodayList.value.push(...res);
if (!PKistodayorhall.value) {
list.value = TodayList.value;
@@ -1008,13 +1014,13 @@ function PkList(body) {
}
});
}
// 加载更多
function load() {
page.value++;
if (searchStatus.value) {
const body = {
status: 0,
page: page.value,
page: page.value++,
size: 10,
userId: user.value.id,
condition: {},
@@ -1023,7 +1029,7 @@ function load() {
if (PKistodayorhall.value) {
body.condition.type = 2;
} else {
body.condition.type = 2;
body.condition.type = 1;
}
} else {
if (PKistodayorhall.value) {
@@ -1065,7 +1071,7 @@ function load() {
} else {
const body = {
status: 0,
page: page.value,
page: page.value++,
size: 10,
userId: user.value.id,
condition: {},
@@ -1074,7 +1080,7 @@ function load() {
if (PKistodayorhall.value) {
body.condition.type = 2;
} else {
body.condition.type = 2;
body.condition.type = 1;
}
} else {
if (PKistodayorhall.value) {
@@ -1082,7 +1088,7 @@ function load() {
body.condition.type = 1;
}
}
PkList(body);
PkList(body,"load");
}
}
@@ -1090,6 +1096,7 @@ function load() {
function Switch() {
searchStatus.value = false;
PKistodayorhall.value = !PKistodayorhall.value;
handleClickdata.value = null;
if (PKistodayorhall.value) {
list.value = HallList.value;
} else {
@@ -1099,17 +1106,19 @@ function Switch() {
//搜索按钮
function search(data) {
handleClickdata.value = null;
const body = {
status: 0,
size: 10,
userId: user.value.id,
condition: {},
};
if (timevalue.value == null) {
if (PKistodayorhall.value) {
body.condition.type = 2;
} else {
body.condition.type = 2;
body.condition.type = 1;
}
} else {
if (PKistodayorhall.value) {
@@ -1117,6 +1126,7 @@ function search(data) {
body.condition.type = 1;
}
}
if (countryvalue.value != null) {
body.condition.country = countryvalue.value;
}
@@ -1147,11 +1157,13 @@ function search(data) {
end: timevalue.value[1] / 1000,
};
}
if (PKistodayorhall) {
if (PKistodayorhall.value) {
HallList.value = [];
} else {
TodayList.value = [];
}
body.page = 0;
page.value = 0;
list.value = [];
@@ -1161,7 +1173,9 @@ function search(data) {
searchStatus.value = true;
}
PkList(body);
page.value = 1;
}
//重置按钮
function reset() {
searchStatus.value = false;
@@ -1204,7 +1218,7 @@ onMounted(() => {
user.value = res;
PkList({
status: 0,
page: 1,
page: 0,
size: 10,
userId: user.value.id,
condition: {
@@ -1213,13 +1227,14 @@ onMounted(() => {
});
PkList({
status: 0,
page: 1,
page: 0,
size: 10,
userId: user.value.id,
condition: {
type: 2,
},
});
page.value = 1;
})
.catch((err) => {
console.log(err);
@@ -1396,7 +1411,8 @@ onBeforeUnmount(() => {
.infinite-list {
width: 100%;
height: 100%;
border-radius: 16px;
border-top-left-radius: 16px;
border-bottom-right-radius: 16px;
background-color: #ffffff;
}
.infinite-list-item {
@@ -1519,6 +1535,21 @@ onBeforeUnmount(() => {
border-top-right-radius: 16px;
border-left: 1px solid #03aba82f;
}
.chatNotDeta{
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border-top-right-radius: 16px;
border-left: 1px solid #03aba82f;
}
.chatNotDeta-text{
font-size: 20px;
color: #03aba8;
font-weight: bold;
}
.chat-name {
width: 100%;
height: 50px;