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-12 22:16:09 +08:00
parent 931d867c09
commit de99d32c01
63 changed files with 973 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
pages/Home/Home.vue
View File

@@ -1,11 +1,15 @@
<template>
<view class="page">
<image src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png" class="HomeBackground"></image>
<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">
@@ -61,6 +65,116 @@
<view class="tabBar">
<tabBar :tabIndex="0"></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">最小金币数</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>_</view>
<view class="p-coin">
<view class="p-coin-title">最大金币数</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>
<!-- 时间 -->
<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>
@@ -71,6 +185,7 @@ import TUIlogin from "../../components/TUILogin.js";
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
import { useCounterStore } from "@/stores/counter";
import optionsArray from "../../components/NationalDictionary.js";
const counter = useCounterStore();
export default {
inject: ["$global"],
@@ -87,6 +202,21 @@ export default {
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, //确认弹窗状态
};
},
mounted() {
@@ -121,10 +251,112 @@ export default {
}, 1000);
},
methods: {
//关闭弹窗（取消）
closePopup() {
this.$refs.popup.close();
},
//确认弹窗
confirm() {
//判断金币是否有为空
this.ConfirmStatus = true;
console.log(
this.minNumberCoins,
this.maxNumberCoins,
this.mindatetimesingle,
this.maxdatetimesingle
);
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 = [];
this.pkList({
type: this.listtype,
sex: this.genders,
coin: {
start: this.minNumberCoins,
end: this.maxNumberCoins,
},
country: this.countrys,
});
} else {
this.RealTimePklist = [];
this.pkList({
sex: this.genders,
coin: {
start: this.minNumberCoins,
end: this.maxNumberCoins,
},
country: this.countrys,
pkTime: {
start: this.mindatetimesingle,
end: this.maxdatetimesingle,
},
});
}
},
//清空弹窗
clear() {
this.genders = 0;
this.countrys = "";
this.minNumberCoins = "";
this.maxNumberCoins = "";
this.mindatetimesingle = "";
this.maxdatetimesingle = "";
this.ConfirmStatus = false;
},
//获取国家
country(item) {
this.countrys = item.value;
console.log(item);
},
//获取性别
gender(item) {
this.genders = item.value;
console.log(item);
},
// 打开弹窗（筛选条件）
goScreening() {
this.$refs.popup.open("right");
},
//今日
goMakeAppointmentPK() {
this.listtype = 1;
this.list = this.MakeAppointmentPKlist;
},
//大厅
goRealTimePk() {
this.listtype = 2;
this.list = this.RealTimePklist;
@@ -142,14 +374,43 @@ export default {
this.RealTimePklist = [];
}
this.triggered = true;
this.pkList({ type: this.listtype });
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,
});
console.log("id", item.id,this.info.id);
console.log("id", item.id, this.info.id);
//获取详情
const res = await request({
url: "pk/pkInfoDetail",
@@ -260,7 +521,7 @@ export default {
left: 0;
width: 100%;
height: 100rpx;
z-index: 100;
z-index: 2;
}
.contentList {
position: fixed;
@@ -315,7 +576,8 @@ export default {
}
.Gendermale {
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/maleimg.png) no-repeat center;
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%;
@@ -324,7 +586,8 @@ export default {
margin-right: 10rpx;
}
.Genderfemale {
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png) no-repeat center;
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%;
@@ -350,7 +613,7 @@ export default {
line-height: 38rpx;
font-weight: 600;
}
.no-content{
.no-content {
position: absolute;
top: 50%;
left: 50%;
@@ -360,4 +623,126 @@ export default {
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-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>