优化页面
This commit is contained in:
pengxiaolong
@@ -1,113 +1,183 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg">
|
||||
<image class="bgImg" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png" mode="scaleToFill" />
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="scroll">
|
||||
<view class="container">
|
||||
<view class="bg">
|
||||
<image
|
||||
class="bgImg"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="PersonalInformation">
|
||||
<view class="header">
|
||||
<image :src="userinfo.headerIcon" style="width: 144.5rpx; height: 144.5rpx; border-radius: 72.25rpx;" mode="scaleToFill" class="headerIcon" />
|
||||
<view class="PersonalInformation">
|
||||
<view class="header">
|
||||
<image
|
||||
:src="userinfo.headerIcon"
|
||||
style="width: 144.5rpx; height: 144.5rpx; border-radius: 72.25rpx"
|
||||
mode="scaleToFill"
|
||||
class="headerIcon"
|
||||
/>
|
||||
</view>
|
||||
<view>
|
||||
<view class="name">{{ userinfo.nickName }}</view>
|
||||
</view>
|
||||
<!-- 签到 -->
|
||||
<view class="Sign" @click="sign" v-if="SignStatus === true">签到</view>
|
||||
<view class="Sign" v-if="SignStatus === false">已签到</view>
|
||||
<!-- -->
|
||||
<view class="Settings" @click="goSetting">
|
||||
<image
|
||||
class="SettingsIcon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Settings.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="name">{{ userinfo.nickName }}</view>
|
||||
</view>
|
||||
<view class="Settings" @click="goSetting">
|
||||
<image class="SettingsIcon" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="content">
|
||||
<!-- 主播库 -->
|
||||
<view class="PKInformation">
|
||||
<view class="title">
|
||||
<view class="titleText">主播库</view>
|
||||
<view class="titleLine"></view>
|
||||
<view class="AnchorMore" @click="anchorLibrary"
|
||||
>更多主播信息<image
|
||||
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view
|
||||
class="cardContent"
|
||||
v-for="(item, index) in AnchorList"
|
||||
:key="index"
|
||||
v-if="AnchorList.length !== 0"
|
||||
>
|
||||
<view class="cardImg">
|
||||
<image
|
||||
:src="item.headerIcon"
|
||||
style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="Time">{{ item.anchorId }}</view>
|
||||
<view class="gold"> {{ item.country }}</view>
|
||||
</view>
|
||||
<view v-if="AnchorList.length === 0" class="no-content">暂无内容</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- PK信息 -->
|
||||
<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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view
|
||||
class="cardContent"
|
||||
v-for="(item, index) in pkInformationdata"
|
||||
:key="index"
|
||||
v-if="pkInformationdata.length !== 0"
|
||||
>
|
||||
<view class="cardImg">
|
||||
<image
|
||||
:src="item.anchorIcon"
|
||||
style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="Time">{{ formatDate(item.pkTime) }}</view>
|
||||
<view class="gold"> {{ item.coin }}K</view>
|
||||
</view>
|
||||
<view v-if="pkInformationdata.length === 0" class="no-content">暂无内容</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view
|
||||
class="cardContent"
|
||||
v-for="(item, index) in myPkRecorddata"
|
||||
:key="index"
|
||||
v-if="myPkRecorddata.length !== 0"
|
||||
>
|
||||
<view class="cardImg">
|
||||
<image
|
||||
style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
|
||||
:src="item.anchorIconA"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="Failure" v-if="item.winnerAnchorId !== item.anchorIdA && item.winnerAnchorId !== ''">
|
||||
失败
|
||||
</view>
|
||||
<view class="Result" v-else-if="item.winnerAnchorId === item.anchorIdA">
|
||||
胜利
|
||||
</view>
|
||||
<view class="Session"> 共{{ item.pkNumber }}场 </view>
|
||||
<view class="Time">{{ TimeFormatting(item.pkTime) }}</view>
|
||||
</view>
|
||||
<view v-if="myPkRecorddata.length === 0" class="no-content">暂无内容</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="PKInformation">
|
||||
<view class="title">
|
||||
<view class="titleText">专属客服</view>
|
||||
<view class="titleLine"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="cardContent" v-for="(item,index) in pkInformationdata" :key="index" v-if="pkInformationdata.length !== 0">
|
||||
<view class="cardImg">
|
||||
<image :src="item.anchorIcon" style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx;" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="Time">{{ formatDate(item.pkTime) }}</view>
|
||||
<view class="gold"> {{item.coin}}K</view>
|
||||
</view>
|
||||
<view v-if="pkInformationdata.length === 0" class="no-content">暂无内容</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
|
||||
<view class="service" @click="contact">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/service.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">联系客服</view>
|
||||
</view>
|
||||
|
||||
<view class="service" @click="serviceProtocol">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Agreement.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">服务协议</view>
|
||||
</view>
|
||||
|
||||
<view class="service" @click="logout">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/logout.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">退出登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="cardContent"v-for="(item,index) in myPkRecorddata" :key="index" v-if="myPkRecorddata.length !== 0">
|
||||
<view class="cardImg">
|
||||
<image style="width: 80rpx; height: 80rpx;border-radius: 72.25rpx;" :src="item.anchorIconA" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="Failure"v-if="item.winnerAnchorId !== item.anchorIdA">
|
||||
失败
|
||||
</view>
|
||||
<view class="Result" v-else-if="item.winnerAnchorId === item.anchorIdA"> 胜利 </view>
|
||||
<view class="Session"> 共{{item.pkNumber}}场 </view>
|
||||
<view class="Time">{{TimeFormatting(item.pkTime)}}</view>
|
||||
</view>
|
||||
<view v-if="myPkRecorddata.length === 0" class="no-content">暂无内容</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="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/service.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">联系客服</view>
|
||||
</view>
|
||||
|
||||
<view class="service" @click="serviceProtocol">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Agreement.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">服务协议</view>
|
||||
</view>
|
||||
|
||||
<view class="service" @click="logout">
|
||||
<image
|
||||
style="width: 48.28rpx; height: 48.09rpx"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/logout.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="cardtext">退出登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copyright">版权所有 © 2025 ...................</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copyright">版权所有 © 2025 ...................</view>
|
||||
|
||||
</scroll-view>
|
||||
<view class="tabBar">
|
||||
<tabBar :tabIndex="4"></tabBar>
|
||||
</view>
|
||||
@@ -126,6 +196,8 @@ export default {
|
||||
userinfo: {},
|
||||
pkInformationdata: [],
|
||||
myPkRecorddata: [],
|
||||
SignStatus: null,
|
||||
AnchorList: [],
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
@@ -136,52 +208,115 @@ export default {
|
||||
console.log(this.userinfo);
|
||||
this.getpkInformation();
|
||||
this.getmyPkRecord();
|
||||
this.getSignStatus();
|
||||
this.getAnchorList();
|
||||
},
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 获取主播列表
|
||||
getAnchorList() {
|
||||
const res = request({
|
||||
url: "anchor/list",
|
||||
method: "POST",
|
||||
data: {
|
||||
id: this.userinfo.id,
|
||||
},
|
||||
userInfo: true,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.AnchorList = res.data.slice(0, 4);
|
||||
} else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取签到状态
|
||||
getSignStatus() {
|
||||
const res = request({
|
||||
url: "user/checkSignStatus",
|
||||
method: "GET",
|
||||
data: {
|
||||
userId: this.userinfo.id,
|
||||
},
|
||||
userInfo: true,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.SignStatus = res.data;
|
||||
} else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//签到
|
||||
sign() {
|
||||
const res = request({
|
||||
url: "user/signIn",
|
||||
method: "POST",
|
||||
data: {
|
||||
userId: this.userinfo.id,
|
||||
},
|
||||
userInfo: true,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: "签到成功",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
this.getSignStatus();
|
||||
} else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
formatDate: formatDate,
|
||||
TimeFormatting: TimeFormatting,
|
||||
//获取pk信息
|
||||
getpkInformation(){
|
||||
getpkInformation() {
|
||||
const res = request({
|
||||
url: "user/queryMyAllPkData",
|
||||
method: "POST",
|
||||
data: {
|
||||
userId: this.userinfo.id,
|
||||
page:0,
|
||||
size:4
|
||||
},
|
||||
userInfo: true,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
url: "user/queryMyAllPkData",
|
||||
method: "POST",
|
||||
data: {
|
||||
userId: this.userinfo.id,
|
||||
page: 0,
|
||||
size: 4,
|
||||
},
|
||||
userInfo: true,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.pkInformationdata = res.data;
|
||||
console.log(this.pkInformationdata);
|
||||
}else {
|
||||
} else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取pk记录
|
||||
getmyPkRecord(){
|
||||
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) {
|
||||
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 {
|
||||
} else {
|
||||
console.log(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 跳转到主播库页面
|
||||
anchorLibrary() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/Mine/minecomponents/anchorLibrary",
|
||||
});
|
||||
},
|
||||
// 跳转到PK信息页面
|
||||
pkInformation() {
|
||||
@@ -214,8 +349,8 @@ export default {
|
||||
});
|
||||
},
|
||||
// 退出登录
|
||||
logout(){
|
||||
uni.clearStorage()
|
||||
logout() {
|
||||
uni.clearStorage();
|
||||
TUILogin.logout();
|
||||
uni.reLaunch({
|
||||
url: "/pages/login/login",
|
||||
@@ -268,14 +403,25 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
.name {
|
||||
width: 400rpx;
|
||||
width: 280rpx;
|
||||
font-size: 36.26rpx;
|
||||
font-weight: 500;
|
||||
color: #161616;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
}
|
||||
.Sign {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
background-color: #91e3e4;
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 294.5rpx;
|
||||
@@ -286,6 +432,16 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.scroll {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.PKInformation {
|
||||
margin-top: 48.5rpx;
|
||||
}
|
||||
@@ -311,13 +467,18 @@ export default {
|
||||
border-radius: 7.16rpx 0rpx 7.16rpx 7.16rpx;
|
||||
background-color: #91e3e48b;
|
||||
}
|
||||
.AnchorMore {
|
||||
margin-left: 390rpx;
|
||||
font-size: 28.63rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.titleMore {
|
||||
margin-left: 400rpx;
|
||||
font-size: 28.63rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.myPkRecordMore {
|
||||
margin-left:330rpx;
|
||||
margin-left: 330rpx;
|
||||
font-size: 28.63rpx;
|
||||
color: #333333;
|
||||
}
|
||||
@@ -404,17 +565,17 @@ export default {
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
.copyright{
|
||||
.copyright {
|
||||
font-size: 23rpx;
|
||||
color: #929292;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 250rpx;
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50rpx;
|
||||
}
|
||||
.no-content{
|
||||
.no-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user