Files
tk-mini-program/pages/Home/Home.vue
pengxiaolong 8580cd18fa 优化
2025-07-25 16:39:52 +08:00

814 lines
21 KiB
Vue

<template>
<view class="page">
<image
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
class="HomeBackground"
></image>
</view>
<view class="top-navigation-container">
<top-navigation
@RealTimePk="goRealTimePk"
@MakeAppointmentPK="goMakeAppointmentPK"
@screening="goScreening"
></top-navigation>
</view>
<!-- <view class="Advertisement" @click="goAdvertisement">
<advertisement></advertisement>
</view> -->
<view class="contentList">
<scroll-view
show-scrollbar="false"
scroll-y="true"
class="scroll"
refresher-enabled="true"
refresher-threshold="40"
@refresherrefresh="onRefresherRefresh"
lower-threshold="100"
@scrolltolower="onScrollToLower"
:refresher-triggered="triggered"
>
<uni-card v-if="list.length !== 0" v-for="(item, index) in list" :key="index">
<view
class="content-list"
@click="goDetail(item)"
:style="{
border: item.isPin === true ? '2px solid #eeff00' : '2px solid #f5f5f5',
}"
>
<!-- `````````````````````````` -->
<image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
<!-- `````````````````````````````````````` -->
<view class="content-list-title">
<view class="cardname">{{ item.disPlayId }}</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
mode="scaleToFill"
/>
<image
v-else
class="Genderimg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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>
<!-- `````````````````````````````````````````````````````` -->
</view>
</uni-card>
<view v-if="list.length === 0" class="no-content">暂无内容</view>
</scroll-view>
</view>
<view class="tabBar">
<tabBar :tabIndex="0" @publishSucces="onRefresherRefresh()"></tabBar>
</view>
<uni-popup ref="popup" position="right">
<view class="popup-container">
<view class="popup-title">筛选条件</view>
<!-- 国家 -->
<view class="p-country">
<wht-select
style="width: 350rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#a3a3a3"
@change="country"
:options="Country"
:filterable="filterable"
placeholder="请选择国家"
:value="countrys"
/>
</view>
<!-- 性别 -->
<view class="popup-sex">
<view class="p-sex">
<wht-select
style="width: 350rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#a3a3a3"
@change="gender"
:options="Gender"
placeholder="性别"
:value="genders"
/>
</view>
<view class="Gendericoncss">
<image
v-if="genders === 0"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
mode="scaleToFill"
/>
</view>
</view>
<!-- 金币 -->
<view class="popup-coin">
<view class="p-coin">
<view class="p-coin-title">最小金币数(单位为k)</view>
<uni-number-box
:max="9999999999"
background="ffffff"
v-model="minNumberCoins"
></uni-number-box>
<view class="Hintcss" v-if="minNumberCoins == '' && HintCion === true"
>请填写金币数量</view
>
</view>
<view class="p-dar">K&nbsp;&nbsp;</view>
<view class="p-dar">-</view>
<view class="p-coin">
<view class="p-coin-title">最大金币数(单位为k)</view>
<uni-number-box
:max="9999999999"
background="#ffffff"
v-model="maxNumberCoins"
></uni-number-box>
<view class="Hintcss" v-if="maxNumberCoins == '' && HintCion === true"
>请填写金币数量</view
>
</view>
<view class="p-dar">K</view>
</view>
<!-- 时间 -->
<view class="p-time" v-if="listtype === 2">
<view class="p-coin-title">最小PK时间</view>
<uni-datetime-picker
type="datetime"
hide-second="true"
v-model="mindatetimesingle"
/>
<view class="Hintcss" v-if="mindatetimesingle == '' && HintTime === true"
>请选择日期</view
>
</view>
<view class="p-time" v-if="listtype === 2">
<view class="p-coin-title">最大PK时间</view>
<uni-datetime-picker
type="datetime"
hide-second="true"
v-model="maxdatetimesingle"
/>
<view class="Hintcss" v-if="maxdatetimesingle == '' && HintTime === true"
>请选择日期</view
>
</view>
<view class="popup-btn">
<view class="popup-btn-cancel" @click="closePopup">取消</view>
<view class="popup-btn-confirm" @click="confirm">确定</view>
<view class="popup-btn-clear" @click="clear">清空</view>
</view>
</view>
</uni-popup>
</template>
<script>
import topNavigation from "../../components/topNavigation/topNavigation";
import Advertisement from "../../components/Advertisement/Advertisement";
import tabBar from "../../components/tabBar/tabBar";
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
import { useCounterStore } from "@/stores/counter";
import optionsArray from "../../components/NationalDictionary.js";
import { goEasylogin } from "../../components/goEasyTool/tool.js";
const counter = useCounterStore();
export default {
inject: ["$global"],
data() {
return {
info: {},
myuserSig: "",
chatInfo: {},
page: 0, //页码
size: 10, //每页条数
list: [], // 列表数据
detailsdata: {}, //详情数据
triggered: false, //下拉刷新标识
RealTimePklist: [], // PK大厅列表数据
MakeAppointmentPKlist: [], // 今日PK列表数据
listtype: 1, // 列表类型 1 当天 2 大于当天
filterable: true, //是否可搜索
Country: optionsArray,
countrys: "", //国家
genders: 0, //性别
Gender: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
minNumberCoins: "", //最小金币数
maxNumberCoins: "", //最大金币数
mindatetimesingle: "", //最小PK时间
maxdatetimesingle: "", //最大PK时间
HintCion: false, //金币提示信息
HintTime: false, //时间提示信息
ConfirmStatus: false, //确认弹窗状态
};
},
onShareAppMessage(res) {
if (res.from === "menu") {
return {
title: "分享",
path: getCurrentPages()[getCurrentPages().length - 1].route,
};
}
},
onShow() {
// 页面显示时请求数据
this.page = 0;
this.list = [];
this.MakeAppointmentPKlist = [];
this.RealTimePklist = [];
this.pkList({ type: 2 });
this.pkList({ type: 1 });
// uni.showShareMenu({
// withShareTicket: true,
// });
},
onLoad() {
this.AutomaticCleaning();
uni.getStorage({
key: "userinfo",
success: (res) => {
this.info = res.data;
console.log("userinfo", this.info);
counter.$patch({ myitem: this.info });
goEasylogin(this.$goeasy, String(this.info.id), this.info.headerIcon, this.info.nickName)//登录IM
},
});
// setTimeout(() => {
// uni.switchTab({ url: "/pages/Home/Home" });
// }, 1000);
},
methods: {
//自动清理
AutomaticCleaning() {
const lastCleanTime = uni.getStorageSync("last_clean_time") || 0;
const now = Date.now();
if (now - lastCleanTime < 7 * 24 * 3600 * 1000) return; // 7 days
uni.clearStorage();
uni.setStorageSync("last_clean_time", now);
},
//关闭弹窗(取消)
closePopup() {
this.$refs.popup.close();
},
//格式化日期
dateformat(date) {
const isoString = date.replace(" ", "T");
const timestamp = Date.parse(isoString);
if (isNaN(timestamp)) {
throw new Error(`Invalid date format: ${this.datetimesingle}`);
}
return Math.floor(timestamp / 1000);
},
//确认弹窗
confirm() {
//判断金币是否有为空
this.ConfirmStatus = true;
if (
(this.minNumberCoins === "" && this.maxNumberCoins !== "") ||
(this.minNumberCoins !== "" && this.maxNumberCoins === "")
) {
this.HintCion = true;
return;
}
if (
(this.mindatetimesingle === "" && this.maxdatetimesingle !== "") ||
(this.mindatetimesingle !== "" && this.maxdatetimesingle === "")
) {
this.HintTime = true;
return;
}
if (
this.genders === 0 &&
this.countrys === "" &&
this.minNumberCoins === "" &&
this.maxNumberCoins === "" &&
this.mindatetimesingle === "" &&
this.maxdatetimesingle === ""
) {
if (this.listtype === 1) {
this.MakeAppointmentPKlist = [];
} else {
this.RealTimePklist = [];
}
this.list = [];
this.pkList({ type: this.listtype });
this.closePopup();
return;
}
this.closePopup();
this.page = 0;
this.list = [];
if (this.listtype === 1) {
this.MakeAppointmentPKlist = [];
let condition = {
type: this.listtype,
};
if (this.genders !== 0) {
condition.sex = this.genders;
}
if (this.minNumberCoins !== "") {
condition.coin = {
start: this.minNumberCoins,
};
}
if (this.maxNumberCoins !== "") {
condition.coin.end = this.maxNumberCoins;
}
if (this.mindatetimesingle !== "") {
condition.pkTime = {
start: this.mindatetimesingle,
};
}
if (this.maxdatetimesingle !== "") {
condition.pkTime.end = this.maxdatetimesingle;
}
if (this.countrys !== "") {
condition.country = this.countrys;
}
this.pkList(condition);
} else {
this.RealTimePklist = [];
let condition = {};
if (this.genders !== 0) {
condition.sex = this.genders;
}
if (this.minNumberCoins !== "") {
condition.coin = {
start: this.minNumberCoins,
};
}
if (this.maxNumberCoins !== "") {
condition.coin.end = this.maxNumberCoins;
}
if (this.mindatetimesingle !== "") {
condition.pkTime = {
start: this.dateformat(this.mindatetimesingle),
};
}
if (this.maxdatetimesingle !== "") {
condition.pkTime.end = this.dateformat(this.maxdatetimesingle);
}
if (this.countrys !== "") {
condition.country = this.countrys;
}
this.pkList(condition);
}
},
//清空弹窗
clear() {
this.genders = 0;
this.countrys = "";
this.minNumberCoins = "";
this.maxNumberCoins = "";
this.mindatetimesingle = "";
this.maxdatetimesingle = "";
this.ConfirmStatus = false;
},
//获取国家
country(item) {
this.countrys = item.value;
},
//获取性别
gender(item) {
this.genders = item.value;
},
// 打开弹窗(筛选条件)
goScreening() {
this.$refs.popup.open("right");
},
//今日
goMakeAppointmentPK() {
this.listtype = 1;
this.list = this.MakeAppointmentPKlist;
this.clear();
},
//大厅
goRealTimePk() {
this.listtype = 2;
this.list = this.RealTimePklist;
this.clear();
},
goAdvertisement() {
// this.$global.lastPage = getCurrentPages().router;
uni.navigateTo({ url: "/pages/pkDetail/pkDetail" });
},
//下拉刷新
onRefresherRefresh() {
this.page = 0;
this.list = [];
if (this.listtype === 1) {
this.MakeAppointmentPKlist = [];
} else {
this.RealTimePklist = [];
}
this.triggered = true;
if (this.ConfirmStatus) {
if (
this.genders === 0 &&
this.countrys === "" &&
this.minNumberCoins === "" &&
this.maxNumberCoins === "" &&
this.mindatetimesingle === "" &&
this.maxdatetimesingle === ""
) {
this.pkList({ type: this.listtype });
} else {
if (
(this.minNumberCoins === "" && this.maxNumberCoins !== "") ||
(this.minNumberCoins !== "" && this.maxNumberCoins === "")
) {
this.pkList({ type: this.listtype });
return;
}
if (
(this.mindatetimesingle === "" && this.maxdatetimesingle !== "") ||
(this.mindatetimesingle !== "" && this.maxdatetimesingle === "")
) {
this.pkList({ type: this.listtype });
return;
}
this.confirm();
}
} else {
this.pkList({ type: this.listtype });
}
},
async goDetail(item) {
uni.showLoading({
title: "加载中...",
mask: true,
});
//获取详情
const res = await request({
url: "pk/pkInfoDetail",
method: "POST",
data: {
id: item.id,
userId: this.info.id,
from: 1,
},
userInfo: true,
});
this.detailsdata = res.data;
if (res.code === 200) {
if (res.data.length !== 0) {
uni.hideLoading();
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(condition) {
//获取list
const res = await request({
url: "pk/pkList",
method: "POST",
data: {
status: 0,
page: this.page,
size: this.size,
condition: condition,
userId: this.info.id,
},
userInfo: false,
});
if (res.code === 200) {
this.triggered = false;
if (condition.type === 1) {
this.MakeAppointmentPKlist.push(...res.data);
if (condition.type == this.listtype) {
this.list = this.MakeAppointmentPKlist;
}
} else {
this.RealTimePklist.push(...res.data);
if (condition.type == this.listtype) {
this.list = this.RealTimePklist;
}
if (condition.type == null) {
this.list = this.RealTimePklist;
}
}
}
},
},
onScrollToLower() {
this.page++;
this.pkList({ type: this.listtype });
},
components: {
topNavigation,
Advertisement,
tabBar,
},
};
</script>
<style scoped>
.page {
position: relative;
width: 750rpx;
height: 1620rpx;
}
.HomeBackground {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.top-navigation-container {
position: fixed;
top: 160rpx;
left: 0;
width: 100%;
height: 114.5rpx;
}
.Advertisement {
position: fixed;
top: 300rpx;
left: 0;
width: 100%;
height: 100rpx;
z-index: 2;
}
.contentList {
position: fixed;
top: 312rpx;
left: 0;
bottom: 114.5rpx;
width: 100%;
/* height: 1300rpx; */
}
.scroll {
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.scroll ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.content-list {
display: flex;
align-items: center;
width: 712rpx;
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;
}
.content-list-info {
display: flex;
align-items: center;
}
.cardname {
font-size: 31rpx;
color: #161616;
line-height: 38rpx;
margin-bottom: 20rpx;
}
.Genderimg {
width: 15rpx;
height: 15rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}
.age {
color: #ffffff;
font-size: 14rpx;
}
.Gendermale {
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png)
no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.RoomID {
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
}
.Charm {
font-size: 23rpx;
color: #a3a3a3;
line-height: 38rpx;
margin-right: 12rpx;
margin-left: 20rpx;
}
.charmValue {
font-size: 23rpx;
color: #161616;
line-height: 38rpx;
font-weight: 600;
}
.no-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28rpx;
color: #a3a3a3;
line-height: 40rpx;
text-align: center;
}
.popup-container {
height: 1626px;
width: 650rpx;
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png);
border-radius: 15rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.popup-title {
font-size: 50rpx;
line-height: 50rpx;
margin-top: 250rpx;
font-weight: bold;
background: linear-gradient(135deg, #00afb2, #4fcacd);
-webkit-background-clip: text; /* 兼容 WebKit 内核 */
background-clip: text;
color: transparent; /* 隐藏原文字颜色 */
-webkit-text-fill-color: transparent; /* Safari 兼容 */
}
.p-country {
width: 500rpx;
height: 100rpx;
margin-top: 80rpx;
}
.popup-sex {
width: 500rpx;
height: 100rpx;
margin-top: 40rpx;
display: flex;
justify-content: space-between;
}
.p-sex {
width: 420rpx;
height: 100rpx;
}
.Gendericoncss {
display: flex;
justify-content: center;
align-items: center;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 1rpx solid #ff9d0067;
margin-left: 20rpx;
margin-top: 10rpx;
}
.Gendericon {
width: 40rpx;
height: 40rpx;
/* margin-top: 10rpx;
margin-right: 40rpx; */
}
.popup-coin {
width: 500rpx;
margin-top: 40rpx;
display: flex;
}
.p-coin {
width: 500rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.p-dar {
margin-top: 30rpx;
}
.p-coin-title {
font-size: 20rpx;
color: #a3a3a3;
}
.p-time {
width: 500rpx;
margin-top: 40rpx;
}
.popup-btn-cancel {
width: 170rpx;
height: 60rpx;
font-size: 30rpx;
color: #ffffff;
line-height: 60rpx;
text-align: center;
margin-right: 20rpx;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
}
.popup-btn-confirm {
width: 170rpx;
height: 60rpx;
font-size: 30rpx;
color: #ffffff;
line-height: 60rpx;
text-align: center;
margin-right: 20rpx;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
background-image: linear-gradient(135deg, #4fcd9d, #5fdeba);
}
.popup-btn-clear {
width: 170rpx;
height: 60rpx;
font-size: 30rpx;
color: #ffffff;
line-height: 60rpx;
text-align: center;
border-top-left-radius: 50rpx;
border-bottom-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
background-image: linear-gradient(135deg, #cd924f, #debc5f);
}
.Hintcss {
font-size: 18rpx;
color: #ff5555;
}
.popup-btn {
width: 600rpx;
height: 100rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 400rpx;
}
</style>