优化页面
This commit is contained in:
pengxiaolong
@@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg">
|
||||
<image class="bgImg" src="../../static/HomeBackground.png" mode="scaleToFill" />
|
||||
</view>
|
||||
|
||||
<view class="PersonalInformation">
|
||||
<view class="header">
|
||||
<image :src="userinfo.headerIcon" mode="scaleToFill" class="headerIcon" />
|
||||
@@ -11,21 +15,97 @@
|
||||
<image class="SettingsIcon" src="../../static/Settings.png" mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- PK信息 -->
|
||||
<view class="content">
|
||||
<view class="PKInformation" >
|
||||
<view class="title">
|
||||
<view class="titleText">PK信息</view>
|
||||
<view class="titleLine"></view>
|
||||
<view class="titleMore"
|
||||
@click="pkInformation"
|
||||
>更多PK信息<image
|
||||
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
|
||||
src="../../static/More.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="cardContent" v-for="(item,index) in pkInformationdata" :key="index">
|
||||
<view class="cardImg">
|
||||
<image :src="item.anchorIcon" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="Time">{{ formatDate(item.pkTime) }}</view>
|
||||
<view class="gold"> {{item.coin}}K</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- PK记录 -->
|
||||
<view class="myPkRecord" >
|
||||
<view class="title">
|
||||
<view class="titleText">我的PK记录</view>
|
||||
<view class="titleLine"></view>
|
||||
<view class="myPkRecordMore"
|
||||
@click="pkRecord">更多PK记录<image
|
||||
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
|
||||
src="../../static/More.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="cardContent">
|
||||
<view class="cardImg">
|
||||
<image src="" mode="scaleToFill" />
|
||||
</view>
|
||||
<!-- <view class="Failure">
|
||||
失败
|
||||
</view> -->
|
||||
<view class="Result"> 胜利 </view>
|
||||
<view class="Session"> 共一场 </view>
|
||||
<view class="Time"> 20:30 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="logout" @click="pkInformation">pk信息</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="logout" @click="pkRecord">我的pk记录</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="logout" @click="contact">联系客服</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="logout" @click="logout">退出登录</view>
|
||||
<view class="PKInformation">
|
||||
<view class="title">
|
||||
<view class="titleText">专属客服</view>
|
||||
<view class="titleLine"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="service" @click="contact">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="../../static/service.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">联系客服</view>
|
||||
</view>
|
||||
|
||||
<view class="service">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="../../static/Agreement.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">服务协议</view>
|
||||
</view>
|
||||
|
||||
<view class="service" @click="logout">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="../../static/logout.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">退出登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copyright">版权所有 © 2025 ...................</view>
|
||||
<view class="copyright">版权所有 © 2025 ...................</view>
|
||||
|
||||
<view class="tabBar">
|
||||
<tabBar></tabBar>
|
||||
</view>
|
||||
@@ -33,10 +113,15 @@
|
||||
|
||||
<script>
|
||||
import tabBar from "../../components/tabBar/tabBar";
|
||||
import request from "../../components/request.js";
|
||||
import formatDate from "../../components/formatDate.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
pkInformationdata: [],
|
||||
myPkRecorddata: [],
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
@@ -44,31 +129,80 @@ export default {
|
||||
key: "userinfo",
|
||||
success: (res) => {
|
||||
this.userinfo = res.data;
|
||||
console.log(this.userinfo);
|
||||
this.getpkInformation();
|
||||
this.getmyPkRecord();
|
||||
},
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
formatDate: formatDate,
|
||||
//获取pk信息
|
||||
getpkInformation(){
|
||||
const res = request({
|
||||
url: "user/queryMyAllPkData",
|
||||
method: "POST",
|
||||
data: {
|
||||
userId: this.userinfo.id,
|
||||
page:0,
|
||||
size:4
|
||||
},
|
||||
userInfo: false,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.pkInformationdata = res.data;
|
||||
console.log(this.pkInformationdata);
|
||||
}else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取pk记录
|
||||
getmyPkRecord(){
|
||||
const ress = request({
|
||||
url: "user/handlePkInfo",
|
||||
method: "POST",
|
||||
data: {
|
||||
type:1,
|
||||
userId: this.userinfo.id,
|
||||
page:0,
|
||||
size:4
|
||||
},
|
||||
userInfo: false,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.myPkRecorddata = res.data;
|
||||
console.log(this.myPkRecorddata);
|
||||
}else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 跳转到PK信息页面
|
||||
pkInformation() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/Mine/minecomponents/pkInformation",
|
||||
});
|
||||
},
|
||||
// 跳转到PK记录页面
|
||||
pkRecord() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/Mine/minecomponents/pkRecord",
|
||||
});
|
||||
},
|
||||
// 跳转到联系客服页面
|
||||
contact() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/Mine/minecomponents/contact",
|
||||
});
|
||||
},
|
||||
|
||||
// 跳转到设置页面
|
||||
goSetting() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/Setting/Setting",
|
||||
});
|
||||
},
|
||||
// 退出登录
|
||||
logout() {
|
||||
uni.removeStorage({
|
||||
key: "chatInfo",
|
||||
@@ -84,8 +218,8 @@ export default {
|
||||
});
|
||||
uni.reLaunch({
|
||||
url: "/pages/login/login",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
tabBar,
|
||||
@@ -94,63 +228,185 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
.bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.bgImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.PersonalInformation {
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 144.5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header {
|
||||
width: 144.5rpx;
|
||||
height: 144.5rpx;
|
||||
border-radius: 72.25rpx;
|
||||
background-color: #fff;
|
||||
margin-left: 32.5rpx;
|
||||
margin-right: 39.5rpx;
|
||||
}
|
||||
.Settings {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-left: 360rpx;
|
||||
}
|
||||
.SettingsIcon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.name {
|
||||
font-size: 36.26rpx;
|
||||
font-weight: 500;
|
||||
color: #161616;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 294.5rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, #11cb2a6e, #2574fc6d);
|
||||
}
|
||||
.PersonalInformation {
|
||||
margin-top: 200rpx;
|
||||
.PKInformation {
|
||||
margin-top: 48.5rpx;
|
||||
}
|
||||
.myPkRecord {
|
||||
margin-top: 48.5rpx;
|
||||
}
|
||||
.title {
|
||||
width: 682rpx;
|
||||
height: 33.4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
background: #ffffff;
|
||||
margin-left: 50rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
.titleText {
|
||||
font-size: 34.35rpx;
|
||||
font-weight: bold;
|
||||
color: #100e0f;
|
||||
}
|
||||
.headerIcon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
.titleLine {
|
||||
width: 40.08rpx;
|
||||
height: 14.31rpx;
|
||||
margin-left: -40rpx;
|
||||
margin-top: 25rpx;
|
||||
border-radius: 7.16rpx 0rpx 7.16rpx 7.16rpx;
|
||||
background-color: #91e3e48b;
|
||||
}
|
||||
.name {
|
||||
.titleMore {
|
||||
margin-left: 410rpx;
|
||||
font-size: 28.63rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.myPkRecordMore {
|
||||
margin-left: 340rpx;
|
||||
font-size: 28.63rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.card {
|
||||
width: 689.03rpx;
|
||||
height: 208.02rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 26.5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.card .cardContent:first-child {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.Settings {
|
||||
margin-left: 370rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
|
||||
.cardContent {
|
||||
width: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 83rpx;
|
||||
}
|
||||
.SettingsIcon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.logout{
|
||||
margin-top: 20rpx;
|
||||
width: 100vw;
|
||||
.cardImg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #000000;
|
||||
border-bottom: 1px solid #000000;
|
||||
border-radius: 40rpx;
|
||||
background-color: rgb(205, 205, 205);
|
||||
}
|
||||
.Time {
|
||||
font-size: 18rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.gold {
|
||||
font-size: 18rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.Failure {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-image: url("../../static/maleimg.png");
|
||||
background-position-x: center;
|
||||
background-position-y: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
font-size: 17.18rpx;
|
||||
text-align: center;
|
||||
line-height: 29.58rpx;
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
.Result {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-image: url("../../static/femaleimg.png");
|
||||
background-position-x: center;
|
||||
background-position-y: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
font-size: 17.18rpx;
|
||||
text-align: center;
|
||||
line-height: 29.58rpx;
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
.Session {
|
||||
font-weight: bold;
|
||||
font-size: 18rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.service {
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cardtext {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28.63rpx;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
.copyright{
|
||||
position: absolute;
|
||||
bottom: 250rpx;
|
||||
width: 100%;
|
||||
font-size: 23rpx;
|
||||
color: #929292;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
bottom: 250rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user