|
|
|
@ -1,38 +1,45 @@ |
|
|
|
<template> |
|
|
|
<view class="container"> |
|
|
|
<view class="top"> |
|
|
|
<view class="background-image-dim"> |
|
|
|
<image :src="userInfo.img" style="width: 100%; height: 100%;" :model="'center'"></image> |
|
|
|
</view> |
|
|
|
<view class="dim-div"></view> |
|
|
|
<view class="my-message"> |
|
|
|
<view class="left"> |
|
|
|
<image :src="userInfo.img" mode=""></image> |
|
|
|
<image :src="userInfo.img" :model="'center'"></image> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="user-info-div"> |
|
|
|
<view class="username uni-white"> |
|
|
|
{{userInfo.name}} |
|
|
|
</view> |
|
|
|
<view class="user-info uni-secondary-color"> |
|
|
|
<view class="nums-item">粉丝 <span class="num-span uni-white">{{creatorFansLikeInfo.fansNum}}</span> </view> |
|
|
|
<view class="nums-item">点赞 <span class="num-span uni-white">{{creatorFansLikeInfo.likeNum}}</span> </view> |
|
|
|
<view class="nums-item">收藏 <span class="num-span uni-white">{{creatorFansLikeInfo.collectNum}}</span> </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="middle"> |
|
|
|
<uni-section title="我的数据" type="line" padding> |
|
|
|
<uni-group mode="card"> |
|
|
|
<view>粉丝数 {{creatorFansLikeInfo.fansNum}} </view> |
|
|
|
<view>点赞数 {{creatorFansLikeInfo.likeNum}}</view> |
|
|
|
<view>收藏数 {{creatorFansLikeInfo.collectNum}} </view> |
|
|
|
</uni-group> |
|
|
|
</uni-section> |
|
|
|
<view class="middle-item-box" v-for="(item, index) in middleList" :index="index" :key="index" :class="item.class"> |
|
|
|
<view class="middle-btn-item" @click="change(item)" > |
|
|
|
<div class="text uni-white">{{item.title}}</div> |
|
|
|
<image :src="item.img" class="listIconImage" :mode="'aspectFill'" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="foot"> |
|
|
|
<uni-section title="更多服务" type="line"> |
|
|
|
<uni-group mode="card"> |
|
|
|
<uni-grid :column="3" @change="change" :showBorder="false" :square="true"> |
|
|
|
<uni-grid-item v-for="(item, index) in list" :index="index" :key="index"> |
|
|
|
<view class="grid-item-box" style="background-color: #fff;"> |
|
|
|
<view class="foot-item-box" v-for="(item, index) in list" :index="index" :key="index" > |
|
|
|
<view class="list-click-item" @click="change(item)"> |
|
|
|
<!-- <uni-icons type="image" :size="30" color="#777" /> --> |
|
|
|
<image :src="item.img" class="listIconImage" mode="aspectFill" /> |
|
|
|
<text class="text">{{item.title}}</text> |
|
|
|
<image :src="item.img" class="listIconImage" :mode="'aspectFill'" /> |
|
|
|
<div class="text uni-white">{{item.title}}</div> |
|
|
|
<uni-icons type="right" size="12" color="#ffffff" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uni-grid-item> |
|
|
|
</uni-grid> |
|
|
|
</uni-group> |
|
|
|
</uni-section> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -44,6 +51,19 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
middleList: [ |
|
|
|
{ |
|
|
|
url: '/pages-userInfo/extends/extends', |
|
|
|
title: '邀请他人', |
|
|
|
img: '/static/iconInvite.png', |
|
|
|
class: 'meddle-invite' |
|
|
|
}, { |
|
|
|
url: '/pages-userInfo/withdraw/withdrawIndex', |
|
|
|
title: '提现记录', |
|
|
|
img: '/static/iconWithdraw.png', |
|
|
|
class: 'meddle-withdraw' |
|
|
|
} |
|
|
|
], |
|
|
|
list: [{ |
|
|
|
url: '/pages-userInfo/about/about', |
|
|
|
title: '常见问题', |
|
|
|
@ -52,25 +72,20 @@ |
|
|
|
url: '/pages-userInfo/contact/contact', |
|
|
|
title: '联系我们', |
|
|
|
img: '/static/iconContactUs.png' |
|
|
|
}, { |
|
|
|
url: '/pages-userInfo/extends/extends', |
|
|
|
title: '邀请他人', |
|
|
|
img: '/static/iconInvite.png' |
|
|
|
}, { |
|
|
|
url: '/pages-userInfo/notice/notice', |
|
|
|
title: '通知公告', |
|
|
|
img: '/static/iconNotice.png' |
|
|
|
}, { |
|
|
|
url: '/pages-userInfo/withdraw/withdrawIndex', |
|
|
|
title: '提现记录', |
|
|
|
img: '/static/iconWithdraw.png' |
|
|
|
},{ |
|
|
|
url: '/pages-userInfo/setting/setting', |
|
|
|
title: '系统设置', |
|
|
|
img: '/static/iconInviteLog.png' |
|
|
|
}], |
|
|
|
pageUrl: '', |
|
|
|
userInfo: {}, |
|
|
|
userInfo: { |
|
|
|
name: "Adming", |
|
|
|
img: "/static/material.png" |
|
|
|
}, |
|
|
|
creatorFansLikeInfo: { |
|
|
|
fansNum: 0, |
|
|
|
likeNum: 0, |
|
|
|
@ -81,7 +96,6 @@ |
|
|
|
created() { |
|
|
|
const userInfo = uni.getStorageSync('userInfo') |
|
|
|
if (!userInfo) { |
|
|
|
console.log('havent userInfo') |
|
|
|
uni.showModal({ |
|
|
|
content: '艺术家账户过期,请重新登录！', |
|
|
|
showCancel: false, |
|
|
|
@ -94,21 +108,22 @@ |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.userInfo = userInfo; |
|
|
|
console.log('have userInfo') |
|
|
|
} |
|
|
|
//获取粉丝李欢收藏数量 |
|
|
|
this.getCreatorInfoFansLike(); |
|
|
|
}, |
|
|
|
onPullDownRefresh() { |
|
|
|
this.getCreatorInfoFansLike(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
change(e) { |
|
|
|
let { |
|
|
|
index |
|
|
|
} = e.detail |
|
|
|
this.pageUrl = this.list[index].url |
|
|
|
console.log('this.pageUrl', this.pageUrl) |
|
|
|
// let { |
|
|
|
// index |
|
|
|
// } = e.detail |
|
|
|
// this.pageUrl = this.list[index].url |
|
|
|
/** 跳转指定页面*/ |
|
|
|
uni.navigateTo({ |
|
|
|
url: this.pageUrl |
|
|
|
url: e.url |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -117,10 +132,8 @@ |
|
|
|
async getCreatorInfoFansLike() { |
|
|
|
let that = this; |
|
|
|
const res = await getCreatorInfoFansLike(that.userInfo.id) |
|
|
|
console.log('res', res) |
|
|
|
if (res.data.code === 200) { |
|
|
|
that.creatorFansLikeInfo = res.data.data |
|
|
|
console.log('creatorFansLikeInfo', that.creatorFansLikeInfo) |
|
|
|
} else { |
|
|
|
uni.showModal({ |
|
|
|
content: '获取粉丝喜欢收藏数量数据加载失败！', |
|
|
|
@ -132,21 +145,63 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.container { |
|
|
|
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif; |
|
|
|
min-height: 100vh; |
|
|
|
background: #141b29; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.top { |
|
|
|
width: 100vw; |
|
|
|
height: 25vh; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.background-image-dim { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.dim-div { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
/* 主要内容 */ |
|
|
|
background: rgba(29, 39, 52, .6); |
|
|
|
/* 模糊大小就是靠的blur这个函数中的数值大小 */ |
|
|
|
backdrop-filter: blur(25rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.my-message { |
|
|
|
width: calc(100% - 80rpx); |
|
|
|
height: calc(100% - 80rpx); |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.my-message { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
padding: 20rpx; |
|
|
|
align-items: flex-end; |
|
|
|
padding: 40rpx; |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
margin-right: 40rpx; |
|
|
|
|
|
|
|
>image { |
|
|
|
width: 100%; |
|
|
|
@ -157,109 +212,126 @@ |
|
|
|
|
|
|
|
.right { |
|
|
|
font-size: 12px; |
|
|
|
height: 150rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.user-info-div { |
|
|
|
|
|
|
|
.username { |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.user-info { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
.nums-item { |
|
|
|
margin-right: 20rpx; |
|
|
|
|
|
|
|
.num-span { |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// .container { |
|
|
|
// .top { |
|
|
|
// width: 100vw; |
|
|
|
|
|
|
|
// image { |
|
|
|
// width: 100vw; |
|
|
|
// height: 400rpx; |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// .uni-searchbar { |
|
|
|
// border: 1px solid #11A8FD; |
|
|
|
// margin: 0 40rpx; |
|
|
|
// border-radius: 16rpx; |
|
|
|
// padding: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// .uni-searchbar__box { |
|
|
|
// padding: 0; |
|
|
|
// border-radius: 16rpx !important; |
|
|
|
.middle { |
|
|
|
width: 670rpx; |
|
|
|
margin: 40rpx auto; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
//.meddle-invite { |
|
|
|
// background-image: linear-gradient(45deg, #243949 0%, #30a9c0 100%); |
|
|
|
//} |
|
|
|
// |
|
|
|
//.meddle-withdraw { |
|
|
|
// background-image: linear-gradient(45deg, #243949 0%, #2580B3 100%); |
|
|
|
//} |
|
|
|
|
|
|
|
// >text { |
|
|
|
// font-weight: bold; |
|
|
|
// font-size: 14px; |
|
|
|
// display: block; |
|
|
|
// text-align: center; |
|
|
|
// padding-top: 40rpx; |
|
|
|
// padding-bottom: 20rpx; |
|
|
|
// } |
|
|
|
.middle-item-box { |
|
|
|
width: 315rpx; |
|
|
|
height: 150rpx; |
|
|
|
//background: #1d2734; |
|
|
|
border-radius: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
backdrop-filter: blur(25rpx); |
|
|
|
background-image: linear-gradient(45deg, #243949 0%, #30a9c0 100%); |
|
|
|
|
|
|
|
// .user-list { |
|
|
|
// display: flex; |
|
|
|
// justify-content: flex-start; |
|
|
|
// align-items: center; |
|
|
|
// overflow-x: auto; |
|
|
|
|
|
|
|
// .user-list-box { |
|
|
|
// width: 140rpx; |
|
|
|
// padding: 20rpx; |
|
|
|
// text-align: center; |
|
|
|
|
|
|
|
// image { |
|
|
|
// width: 100rpx; |
|
|
|
// height: 100rpx; |
|
|
|
// border-radius: 100rpx; |
|
|
|
// } |
|
|
|
|
|
|
|
// text { |
|
|
|
// font-size: 24rpx; |
|
|
|
// color: #1E1E1E; |
|
|
|
// text-align: center; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
.middle-btn-item { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
// .middle { |
|
|
|
// text-align: center; |
|
|
|
// height: calc(100vh - 248rpx); |
|
|
|
// padding-top: 40rpx; |
|
|
|
.listIconImage{ |
|
|
|
width: 140rpx; |
|
|
|
height: 140rpx; |
|
|
|
position: absolute; |
|
|
|
bottom: -20rpx; |
|
|
|
left: -20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// text { |
|
|
|
// font-weight: bold; |
|
|
|
// font-size: 14px; |
|
|
|
// display: block; |
|
|
|
// } |
|
|
|
.text { |
|
|
|
text-align: right; |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
width: 500rpx; |
|
|
|
position: absolute; |
|
|
|
top: 30rpx; |
|
|
|
right: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
// image { |
|
|
|
// width: 40rpx; |
|
|
|
// height: 40rpx; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
.grid-item-box { |
|
|
|
flex: 1; |
|
|
|
// position: relative; |
|
|
|
/* #ifndef APP-NVUE */ |
|
|
|
display: flex; |
|
|
|
/* #endif */ |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 15px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.grid-item-box-row { |
|
|
|
flex: 1; |
|
|
|
// position: relative; |
|
|
|
/* #ifndef APP-NVUE */ |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.foot { |
|
|
|
width: 670rpx; |
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
.foot-item-box { |
|
|
|
width: calc(100% - 40rpx); |
|
|
|
background: #1d2734; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
.list-click-item { |
|
|
|
display: flex; |
|
|
|
/* #endif */ |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 15px 0; |
|
|
|
} |
|
|
|
justify-content: space-between; |
|
|
|
height: 60rpx; |
|
|
|
|
|
|
|
.listIconImage{ |
|
|
|
width:2rem; |
|
|
|
height:2rem; |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
font-size: 24rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
width: 500rpx; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
