pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面

Browse Source
This commit is contained in:
pengxiaolong
2025-06-04 22:36:28 +08:00
parent a40b5b88c9
commit d766790f04
52 changed files with 2371 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

423
pages/Mine/minecomponents/pkInformation.vue
View File

@@ -1,205 +1,230 @@
<template>
<view class="pkRecord">
<view>返回</view>
<view>pk信息</view>
<view></view>
<view class="pk-information">
<view class="bg">
<image class="bgImg" src="../../../static/HomeBackground.png" mode="scaleToFill" />
</view>
<scroll-view
scroll-y="true"
class="scroll"
refresher-enabled="true"
refresher-threshold="40"
@refresherrefresh="onRefresherRefresh"
lower-threshold="100"
@scrolltolower="onScrollToLower"
>
<uni-card v-for="(item, index) in list">
<view class="content-list" @click="goDetail(item)">
<!-- `````````````````````````` -->
<image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
<!-- `````````````````````````````````````` -->
<view class="content-list-title">
<view class="cardname">{{ item.anchorId }}</view>
<view class="content-list-info">
<view
:class="{ Gendermale: item.sex === '1', Genderfemale: item.sex === '2' }"
>
<image
v-if="item.sex === '2'"
class="Genderimg"
src="../../../static/female.png"
mode="scaleToFill"
/>
<image
v-else
class="Genderimg"
src="../../../static/male.png"
mode="scaleToFill"
/>
<view class="age">性别</view>
</view>
<view class="RoomID">PK时间:&nbsp;{{ formatDate(item.pkTime) }}</view>
<view>国家</view>
<view>性别</view>
<view class="Charm">金币:</view>
<view class="charmValue"> {{ item.coin + "K" }}</view>
<view class="Return" @click="onBack">
<image class="ReturnImg" src="../../../static/Return.png" mode="scaleToFill" />
</view>
<view class="content">
<scroll-view
scroll-y="true"
class="scroll"
refresher-enabled="true"
refresher-threshold="40"
@refresherrefresh="onRefresherRefresh"
lower-threshold="100"
@scrolltolower="onScrollToLower"
>
<uni-card class="card" v-for="(item, index) in pkList" :key="index">
<view class="Profile">
<image style="width: 89.12rpx; height: 89.12rpx" src="" mode="scaleToFill" />
</view>
</view>
<!-- `````````````````````````````````````````````````````` -->
</view>
</uni-card>
</scroll-view>
<view class="Individual">
<view class="Name">{{ item.anchorId }}</view>
<view class="Label">
<view>
<view
:class="{
Gendermale: item.sex === '1',
Genderfemale: item.sex === '2',
}"
>
<image
v-if="item.sex === '2'"
class="Genderimg"
src="../../../static/female.png"
mode="scaleToFill"
/>
<image
v-else
class="Genderimg"
src="../../../static/male.png"
mode="scaleToFill"
/>
<view class="age">{{ item.sex === "1" ? "男" : "女" }}</view>
</view>
</view>
<view class="state">{{ item.country }}</view>
<view class="species">
<image
style="width: 28.63rpx; height: 28.63rpx"
src="../../../static/species.png"
mode="scaleToFill"
/>
<view class="species-text">金币:</view>
<view class="species-num">{{ item.coin }}K</view>
</view>
</view>
<view class="time">PK时间:{{ formatDate(item.pkTime) }}</view>
</view>
<view class="handle" v-if="item.status === 0">
<view class="recompose" @click="onRecompose(item)">
<image
style="width: 46rpx; height: 46rpx"
src="../../../static/recompose.png"
mode="scaleToFill"
/>
</view>
<view class="expurgate" @click="onExpurgate(item)">
<image
style="width: 46rpx; height: 46rpx"
src="../../../static/expurgate.png"
mode="scaleToFill"
/>
</view>
</view>
</uni-card>
</scroll-view>
</view>
</view>
<Recompose ref="createModule" class="createModule" :message="parentMessage" ></Recompose>
</template>
<script>
import request from "../../../components/request.js";
import formatDate from "../../../components/formatDate.js";
import Recompose from "../minecomponents/recompose/recompose.vue";
export default {
inject: ["$global"],
data() {
return {
page: 0, //页码
size: 10, //每页条数
list: [], // 列表数据
detailsdata: {}, //详情数据
pkList: [],
userinfo: {},
page: 0,
createModule: null,
parentMessage: null,
};
},
onLoad() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.userinfo = res.data;
console.log(this.userinfo);
this.getpkList();
},
});
},
mounted() {
// 页面加载完成后请求数据
this.pkList();
this.createModule = this.$refs.createModule; // 挂载后赋值
},
methods: {
onRefresherRefresh() {
this.page = 0;
this.list = [];
this.pkList();
onBack() {
uni.navigateBack(
{
delta: 1,
}
);
},
async goDetail(item) {
uni.showLoading({
title: "加载中...",
mask: true,
formatDate: formatDate,
getpkList() {
const res = request({
url: "user/queryMyAllPkData",
method: "POST",
data: {
userId: this.userinfo.id,
page: this.page,
size: 10,
},
userInfo: false,
}).then((res) => {
if (res.code == 200) {
this.pkList = res.data;
console.log(this.pkList);
} else {
console.log(res.msg);
}
});
console.log("id", item.id);
const res = await request({
url: "pk/pkInfoDetail",
},
onRecompose(item) {
this.createModule.open()
this.parentMessage = item
},
onExpurgate(item){
const res = request({
url: "pk/deletePkDataWithId",
method: "POST",
data: {
id: item.id,
},
userInfo: true,
});
console.log("res", res);
this.detailsdata = res.data;
if (res.code === 200) {
if (res.data.length !== 0) {
uni.hideLoading();
console.log("res.data", res.data);
uni.navigateTo({
url: "/pages/pkDetail/pkDetail",
success: (res) => {
res.eventChannel.emit("itemDetail", {
item: this.detailsdata,
});
},
});
} else {
uni.hideLoading();
this.openPopupQuantity();
}
} else {
uni.hideLoading();
uni.showToast({
title: "加载失败",
userInfo: false,
}).then((res) => {
if (res.code == 200) {
uni.showToast({
title: "删除成功",
icon: "none",
duration: 2000,
});
}
},
formatDate: formatDate,
async pkList() {
const res = await request({
url: "pk/pkList",
method: "POST",
data: {
status: 0,
page: this.page,
size: this.size,
},
userInfo: false,
this.getpkList()
} else {
console.log(res.msg);
}
});
console.log(res);
if (res.code === 200) {
this.list.push(...res.data);
console.log(this.list);
}
},
onScrollToLower() {
this.page++;
this.pkList();
},
}
},
components: {
Recompose ,
},
};
</script>
<style scoped>
.pkRecord{
width: 100vw;
height: 200rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
padding-top: 40rpx;
border-bottom: 1px solid #000000;
}
.scroll {
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.content-list {
display: flex;
align-items: center;
width: 712rpx;
.bgImg {
width: 100%;
height: 100%;
}
.Return {
position: absolute;
top: 100rpx;
left: 35rpx;
width: 46rpx;
height: 46rpx;
}
.ReturnImg {
width: 100%;
height: 100%;
}
.scroll {
position: absolute;
top: 200rpx;
left: 0;
right: 0;
height: 1300rpx;
width: 100%;
}
.card {
width: 695rpx;
height: 161rpx;
background: #ffffff;
border-radius: 15rpx;
margin-bottom: 12rpx;
margin-left: 20rpx;
}
.headShot {
width: 101rpx;
height: 101rpx;
border-radius: 50rpx;
margin-left: 30rpx;
margin-right: 33rpx;
background-color: aqua;
}
.content-list-info {
display: flex;
align-items: center;
margin-left: 30rpx;
margin-top: 11.5rpx;
}
.cardname {
font-size: 31rpx;
color: #161616;
line-height: 38rpx;
.Profile {
width: 89rpx;
height: 89rpx;
border-radius: 50rpx;
background-color: #cccccc;
margin-left: 27.5rpx;
}
.Genderimg {
width: 15rpx;
height: 15rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}
.age {
color: #ffffff;
font-size: 14rpx;
}
.Gendermale {
background: url(../../static/maleimg.png) no-repeat center;
background: url(../../../static/maleimg.png) no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
@@ -208,7 +233,7 @@ export default {
margin-right: 10rpx;
}
.Genderfemale {
background: url(../../static/femaleimg.png) no-repeat center;
background: url(../../../static/femaleimg.png) no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
@@ -216,22 +241,76 @@ export default {
align-items: center;
margin-right: 10rpx;
}
.RoomID {
.Individual {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 37rpx;
}
.Name {
font-size: 30.53rpx;
color: #161616;
font-weight: 500;
}
.time {
margin-top: 13rpx;
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
}
.Charm {
.state {
height: 30rpx;
background: #f6f6f6;
border-radius: 14rpx;
line-height: 30rpx;
font-size: 17rpx;
color: #666666;
padding: 0 15rpx;
}
.Label {
margin-top: 15rpx;
display: flex;
}
.age {
font-size: 17rpx;
color: #ffffff;
margin-left: 10rpx;
}
.Genderimg {
width: 14.22rpx;
height: 14.22rpx;
margin-left: 10rpx;
}
.species {
display: flex;
margin-left: 10rpx;
}
.species-text {
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
margin-right: 12rpx;
margin-left: 20rpx;
}
.charmValue {
.species-num {
font-size: 23rpx;
color: #161616;
line-height: 38rpx;
font-weight: 600;
font-weight: bold;
}
.handle {
display: flex;
}
.recompose {
width: 46rpx;
height: 46rpx;
margin-left: 90rpx;
}
.expurgate {
width: 46rpx;
height: 46rpx;
margin-left: 40rpx;
}
.createModule{
position: fixed;
bottom: 0;
right: 0;
z-index: 998;
width: 100vw;
}
</style>