|
|
@@ -1,27 +1,35 @@ |
|
|
|
<template>
|
|
|
|
<view class="page">
|
|
|
|
<!-- 背景图 -->
|
|
|
|
<!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
|
|
|
|
<!-- 头像 -->
|
|
|
|
<view class="avatarBox">
|
|
|
|
<up-avatar :src="avatarUrl" size="150"></up-avatar>
|
|
|
|
<image
|
|
|
|
class="avatar"
|
|
|
|
src="../../assets/img/avatar.png"
|
|
|
|
mode="scaleToFill"
|
|
|
|
/>
|
|
|
|
<view @click="chooseAvatar" class="changeAvatar">
|
|
|
|
<image src="../../assets/icon/reset.png" mode="aspectFit" />
|
|
|
|
<image src="../../assets/img/reset.png" mode="aspectFit" />
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 金币 -->
|
|
|
|
<view class="coinBox">
|
|
|
|
我的金币: 30
|
|
|
|
<text @click="goBuyCoin">[点击购买]</text></view
|
|
|
|
<text @click="goBuyCoin">购买金币</text></view
|
|
|
|
>
|
|
|
|
<!-- tab栏 -->
|
|
|
|
<u-tabs
|
|
|
|
:list="tabList"
|
|
|
|
:activeStyle="{
|
|
|
|
color: '#4452d7',
|
|
|
|
fontWeight: 'bold',
|
|
|
|
transform: 'scale(1.05)',
|
|
|
|
}"
|
|
|
|
@click="clickTabHandle"
|
|
|
|
></u-tabs>
|
|
|
|
<view class="tabsBox">
|
|
|
|
<view
|
|
|
|
class="tabItem"
|
|
|
|
v-for="item in tabList"
|
|
|
|
:key="item.id"
|
|
|
|
:class="showListActive == item.id ? 'active' : ''"
|
|
|
|
@click="clickTabHandle(item)"
|
|
|
|
>
|
|
|
|
{{ item.name }}</view
|
|
|
|
>
|
|
|
|
</view>
|
|
|
|
<!-- 显示风格列表内容 -->
|
|
|
|
<view v-show="showListActive == 1" class="showStyleList">
|
|
|
|
<view v-for="item in 7" :key="item" class="showListItem">
|
|
|
@@ -41,32 +49,33 @@ |
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 显示邀请列表内容 -->
|
|
|
|
<view v-show="showListActive == 2" class="showInviteList">
|
|
|
|
<view v-for="item in 3" class="InviteList">
|
|
|
|
<up-avatar :src="avatarUrl" size="50"></up-avatar>
|
|
|
|
<view class="info">
|
|
|
|
<view class="name">猕猴桃</view>
|
|
|
|
<view class="time">2023/7/29</view>
|
|
|
|
<view class="InviteBox" v-show="showListActive == 3">
|
|
|
|
<scroll-view :scroll-y="true" class="showInviteList">
|
|
|
|
<view v-for="item in 9" class="InviteList">
|
|
|
|
<up-avatar :src="avatarUrl" size="50"></up-avatar>
|
|
|
|
<view class="info">
|
|
|
|
<view class="name">猕猴桃</view>
|
|
|
|
<view class="time">2023/7/29</view>
|
|
|
|
</view>
|
|
|
|
<view class="getCoin"> 金币+2 </view>
|
|
|
|
</view>
|
|
|
|
<view class="getCoin"> 金币+2 </view>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<view class="inviteBtn">继续邀请好友</view>
|
|
|
|
</view>
|
|
|
|
<!-- 显示消费列表内容 -->
|
|
|
|
<view v-show="showListActive == 3" class="showOrderList">
|
|
|
|
<view v-show="showListActive == 4" class="showOrderList">
|
|
|
|
<view class="top">
|
|
|
|
<text>名称</text>
|
|
|
|
<text>时间</text>
|
|
|
|
<text>花费</text>
|
|
|
|
</view>
|
|
|
|
<view
|
|
|
|
v-for="item in 16"
|
|
|
|
class="OrderListItem"
|
|
|
|
:class="item % 2 != 1 ? 'otherBgc' : ''"
|
|
|
|
>
|
|
|
|
<view class="name">大西瓜</view>
|
|
|
|
<view class="time">2023/7/29</view>
|
|
|
|
<view class="coin">-2金币</view>
|
|
|
|
<text>金币</text>
|
|
|
|
</view>
|
|
|
|
<scroll-view :scroll-y="true" class="bottom">
|
|
|
|
<view class="OrderListItem" v-for="item in 16">
|
|
|
|
<view class="name">大西瓜</view>
|
|
|
|
<view class="time">2023/7/29 </view>
|
|
|
|
<view class="coin">-2金币</view>
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
@@ -131,13 +140,14 @@ function goBuyCoin() { |
|
|
|
|
|
|
|
//#region tab
|
|
|
|
const tabList = ref([
|
|
|
|
{ name: "我的写真", value: 1 },
|
|
|
|
{ name: "我的邀请", value: 2 },
|
|
|
|
{ name: "消费记录", value: 3 },
|
|
|
|
{ name: "我的写真", id: 1 },
|
|
|
|
{ name: "我的视频", id: 2 },
|
|
|
|
{ name: "我的邀请", id: 3 },
|
|
|
|
{ name: "消费记录", id: 4 },
|
|
|
|
]);
|
|
|
|
const showListActive = ref(1);
|
|
|
|
const showListActive = ref(3);
|
|
|
|
function clickTabHandle(e) {
|
|
|
|
showListActive.value = e.value;
|
|
|
|
showListActive.value = e.id;
|
|
|
|
}
|
|
|
|
//#endregion
|
|
|
|
|
|
|
@@ -147,14 +157,39 @@ function clickTabHandle(e) { |
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.page {
|
|
|
|
position: relative;
|
|
|
|
height: 100vh;
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
// background: url("../../assets/img/avatar.png");
|
|
|
|
.bgc {
|
|
|
|
position: absolute;
|
|
|
|
width: 750rpx;
|
|
|
|
height: 750rpx;
|
|
|
|
transform: scale(1.5);
|
|
|
|
top: 187rpx;
|
|
|
|
left: 0;
|
|
|
|
object-fit: cover;
|
|
|
|
z-index: -2;
|
|
|
|
backdrop-filter: blur(3px);
|
|
|
|
// backdrop-filter: blur(20px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.avatarBox {
|
|
|
|
position: relative;
|
|
|
|
width: 260rpx;
|
|
|
|
height: 260rpx;
|
|
|
|
.avatar {
|
|
|
|
width: 260rpx;
|
|
|
|
height: 260rpx;
|
|
|
|
border-radius: 130rpx;
|
|
|
|
}
|
|
|
|
.changeAvatar {
|
|
|
|
position: absolute;
|
|
|
|
right: -0%;
|
|
|
|
top: 70%;
|
|
|
|
width: 40rpx;
|
|
|
|
height: 40rpx;
|
|
|
|
right: -20rpx;
|
|
|
|
bottom: 0;
|
|
|
|
width: 66rpx;
|
|
|
|
height: 66rpx;
|
|
|
|
image {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
@@ -162,15 +197,39 @@ function clickTabHandle(e) { |
|
|
|
}
|
|
|
|
}
|
|
|
|
.coinBox {
|
|
|
|
margin-top: 30rpx;
|
|
|
|
margin-top: 38rpx;
|
|
|
|
line-height: 50rpx;
|
|
|
|
text {
|
|
|
|
font-weight: 700;
|
|
|
|
margin-left: 28rpx;
|
|
|
|
display: inline-block;
|
|
|
|
width: 160rpx;
|
|
|
|
height: 50rpx;
|
|
|
|
border-radius: 50rpx;
|
|
|
|
font-size: 26rpx;
|
|
|
|
text-align: center;
|
|
|
|
// font-weight: 700;
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.u-tabs {
|
|
|
|
margin-top: 20rpx;
|
|
|
|
width: 100%;
|
|
|
|
// tab栏样式
|
|
|
|
.tabsBox {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin-top: 50rpx;
|
|
|
|
.tabItem {
|
|
|
|
margin: 0 9rpx;
|
|
|
|
width: 160rpx;
|
|
|
|
height: 80rpx;
|
|
|
|
line-height: 80rpx;
|
|
|
|
text-align: center;
|
|
|
|
border-radius: 12rpx;
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
}
|
|
|
|
.active {
|
|
|
|
background-color: rgba(255, 79, 0, 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 风格列表
|
|
|
|
.showStyleList {
|
|
|
|
margin-top: 20rpx;
|
|
|
@@ -203,64 +262,117 @@ function clickTabHandle(e) { |
|
|
|
}
|
|
|
|
}
|
|
|
|
// 邀请列表
|
|
|
|
.InviteBox {
|
|
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
overflow: hidden;
|
|
|
|
.inviteBtn {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 20rpx;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, 0);
|
|
|
|
width: 520rpx;
|
|
|
|
height: 100rpx;
|
|
|
|
line-height: 100rpx;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 30rpx;
|
|
|
|
background-color: rgba(255, 79, 0, 1);
|
|
|
|
border-radius: 50rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.showInviteList {
|
|
|
|
position: relative;
|
|
|
|
margin-top: 15rpx;
|
|
|
|
flex: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
|
|
.InviteList {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-start;
|
|
|
|
margin-top: 15rpx;
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
width: 100%;
|
|
|
|
height: 150rpx;
|
|
|
|
border: 5rpx solid #000;
|
|
|
|
border-radius: 30rpx;
|
|
|
|
height: 120rpx;
|
|
|
|
border-radius: 24rpx;
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
.u-avatar {
|
|
|
|
margin: 0 30rpx;
|
|
|
|
height: 150rpx !important;
|
|
|
|
height: 120rpx !important;
|
|
|
|
}
|
|
|
|
.info {
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-evenly;
|
|
|
|
.name {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.time {
|
|
|
|
font-size: 22rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.getCoin {
|
|
|
|
width: 145rpx;
|
|
|
|
height: 145rpx;
|
|
|
|
line-height: 145rpx;
|
|
|
|
height: 120rpx;
|
|
|
|
line-height: 120rpx;
|
|
|
|
text-align: center;
|
|
|
|
border-left: 5rpx solid #000;
|
|
|
|
border-radius: 30rpx;
|
|
|
|
margin-right: 30rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.InviteList:last-child::after {
|
|
|
|
content: "";
|
|
|
|
width: 1rpx;
|
|
|
|
height: 130rpx;
|
|
|
|
padding-bottom: 130rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 消费列表
|
|
|
|
.showOrderList {
|
|
|
|
position: relative;
|
|
|
|
flex: 1;
|
|
|
|
margin-top: 30rpx;
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
border-radius: 24rpx;
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding: 15rpx 20rpx;
|
|
|
|
// padding-top: 80rpx;
|
|
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
.top {
|
|
|
|
padding: 0 30rpx;
|
|
|
|
width: 100%;
|
|
|
|
height: 80rpx;
|
|
|
|
line-height: 80rpx;
|
|
|
|
border-radius: 30rpx;
|
|
|
|
padding: 0 50rpx;
|
|
|
|
height: 64rpx;
|
|
|
|
line-height: 64rpx;
|
|
|
|
border-radius: 40rpx;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
background-color: #e9e9e9;
|
|
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
font-size: 22rpx;
|
|
|
|
}
|
|
|
|
.OrderListItem {
|
|
|
|
// margin-top: 15rpx;
|
|
|
|
padding: 0 15rpx;
|
|
|
|
.bottom {
|
|
|
|
// flex: 1;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
height: 80rpx;
|
|
|
|
line-height: 80rpx;
|
|
|
|
border-bottom: 5rpx solid #fff;
|
|
|
|
border-radius: 15rpx;
|
|
|
|
justify-content: space-between;
|
|
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
.otherBgc {
|
|
|
|
background-color: #f6f7f9;
|
|
|
|
overflow: hidden;
|
|
|
|
.OrderListItem {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0 20rpx;
|
|
|
|
height: 65rpx;
|
|
|
|
line-height: 65rpx;
|
|
|
|
.name,
|
|
|
|
.coin {
|
|
|
|
font-weight: 900;
|
|
|
|
}
|
|
|
|
.time {
|
|
|
|
font-weight: 100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|