pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d766790f041afc28dc1cba9ed137d6666a5062f1
tk-mini-program/pages/Mine/Mine.vue
pengxiaolong d766790f04 优化页面
2025-06-04 22:36:28 +08:00

413 lines
9.1 KiB
Vue
Raw Blame History

<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" />
</view>
<view>
<view class="name">{{ userinfo.nickName }}</view>
</view>
<view class="Settings" @click="goSetting">
<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 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="tabBar">
<tabBar></tabBar>
</view>
</template>
<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() {
uni.getStorage({
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",
});
uni.removeStorage({
key: "userinfo",
});
uni.removeStorage({
key: "userSig",
});
uni.removeStorage({
key: "lastPage",
});
uni.reLaunch({
url: "/pages/login/login",
});
},
},
components: {
tabBar,
},
};
</script>
<style scoped>
.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;
}
.PKInformation {
margin-top: 48.5rpx;
}
.myPkRecord {
margin-top: 48.5rpx;
}
.title {
width: 682rpx;
height: 33.4rpx;
display: flex;
align-items: center;
}
.titleText {
font-size: 34.35rpx;
font-weight: bold;
color: #100e0f;
}
.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;
}
.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;
}
.cardContent {
width: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 83rpx;
}
.cardImg {
width: 80rpx;
height: 80rpx;
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{
font-size: 23rpx;
color: #929292;
text-align: center;
position: fixed;
bottom: 250rpx;
left: 0;
right: 0;
height: 50rpx;
}
</style>
Reference in New Issue View Git Blame Copy Permalink