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-05-27 21:05:01 +08:00
parent cf8728f0d7
commit e682754922
28 changed files with 2742 additions and 2434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/TimeFormatting.js Normal file
View File

@@ -0,0 +1,12 @@
function TimeFormatting(timestamp) {
const date = new Date(timestamp * 1000); // 秒级转毫秒级
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hour = String(date.getHours()).padStart(2, '0');
const minute = String(date.getMinutes()).padStart(2, '0');
const second = String(date.getSeconds()).padStart(2, '0');
return `${month}-${day} ${hour}:${minute}`;
}
export default TimeFormatting;

133
components/contentList/contentList.vue
View File

@@ -1,24 +1,44 @@
<template>
<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">
<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">{{ item.sex === '1'? "男" : "女" }}</view>
<!-- `````````````````````````` -->
<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">{{ item.sex === "1" ? "男" : "女" }}</view>
</view>
<view class="RoomID">PK时间:&nbsp;{{ formatDate(item.pkTime) }}</view>
<view class="Charm">金币:</view>
<view class="charmValue"> {{ item.coin + "K" }}</view>
</view>
<view class="RoomID">PK时间:&nbsp;{{formatDate(item.pkTime)}}</view>
<view class="Charm">金币:</view>
<view class="charmValue"> {{item.coin+'K'}}</view>
</view>
</view>
<!-- `````````````````````````````````````````````````````` -->
<!-- `````````````````````````````````````````````````````` -->
</view>
</uni-card>
</scroll-view>
@@ -28,17 +48,18 @@
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
export default {
inject: ['$global'],
inject: ["$global"],
data() {
return {
page: 0,//页码
page: 0, //页码
size: 10, //每页条数
list: [], // 列表数据
list: [], // 列表数据
detailsdata: {}, //详情数据
};
},
mounted() {
// 页面加载完成后请求数据
this.pkList()
this.pkList();
},
methods: {
onRefresherRefresh() {
@@ -46,18 +67,49 @@ export default {
this.list = [];
this.pkList();
},
goDetail(item) {
uni.navigateTo({
url: '/pages/pkDetail/pkDetail',
success: function(res) {
res.eventChannel.emit('itemDetail', {
item: item,
});
async goDetail(item) {
uni.showLoading({
title: "加载中...",
mask: true,
});
console.log("id", item.id);
const res = await request({
url: "pk/pkInfoDetail",
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: "加载失败",
icon: "none",
duration: 2000,
});
}
},
formatDate: formatDate,
async pkList(){
async pkList() {
const res = await request({
url: "pk/pkList",
method: "POST",
@@ -65,13 +117,13 @@ export default {
status: 0,
page: this.page,
size: this.size,
},
userInfo: false,
},
userInfo: false,
});
console.log(res);
if (res.code === 200) {
this.list.push(...res.data)
console.log(this.list)
this.list.push(...res.data);
console.log(this.list);
}
},
onScrollToLower() {
@@ -127,18 +179,18 @@ export default {
font-size: 14rpx;
}
.Gendermale{
background: url(../../static/maleimg.png) no-repeat center;
width: 56.3rpx;
.Gendermale {
background: url(../../static/maleimg.png) no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.Genderfemale{
background: url(../../static/femaleimg.png) no-repeat center;
width: 56.3rpx;
.Genderfemale {
background: url(../../static/femaleimg.png) no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
@@ -149,7 +201,6 @@ export default {
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
}
.Charm {
font-size: 23rpx;