You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
7.8 KiB
350 lines
7.8 KiB
<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" :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">
|
|
<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'" />-->
|
|
<uni-icons class="listIconImage" custom-prefix="iconfont" :type="item.icon" size="70" :color="iconColor" ></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="foot">
|
|
<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 class="listIconImage" custom-prefix="iconfont" :type="item.icon" size="20" :color="iconColor" ></uni-icons>
|
|
<!-- <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>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCreatorInfoFansLike
|
|
} from '@/api/userInfo.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
iconColor: '#0b6375',
|
|
middleList: [
|
|
{
|
|
url: '/pages-userInfo/extends/extends',
|
|
title: '邀请他人',
|
|
icon: 'icon-yaoqingtuiguang',
|
|
class: 'meddle-invite'
|
|
}, {
|
|
url: '/pages-userInfo/withdraw/withdrawIndex',
|
|
title: '提现记录',
|
|
icon: 'icon-tixianjilu',
|
|
class: 'meddle-withdraw'
|
|
}
|
|
],
|
|
list: [{
|
|
url: '/pages-userInfo/about/about',
|
|
title: '常见问题',
|
|
icon: 'icon-wenti'
|
|
}, {
|
|
url: '/pages-userInfo/contact/contact',
|
|
title: '联系我们',
|
|
icon: 'icon-zhifeiji'
|
|
}, {
|
|
url: '/pages-userInfo/notice/notice',
|
|
title: '通知公告',
|
|
icon: 'icon-tongzhigonggao'
|
|
},{
|
|
url: '/pages-userInfo/setting/setting',
|
|
title: '系统设置',
|
|
icon: 'icon-xitongshezhi'
|
|
}],
|
|
pageUrl: '',
|
|
userInfo: {
|
|
name: "Adming",
|
|
img: "/static/material.png"
|
|
},
|
|
creatorFansLikeInfo: {
|
|
fansNum: 0,
|
|
likeNum: 0,
|
|
collectNum: 0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo) {
|
|
uni.showModal({
|
|
content: '艺术家账户过期,请重新登录！',
|
|
showCancel: false,
|
|
success() {
|
|
//没有缓存则跳转登录页面
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.userInfo = userInfo;
|
|
}
|
|
//获取粉丝李欢收藏数量
|
|
this.getCreatorInfoFansLike();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getCreatorInfoFansLike();
|
|
},
|
|
onShow() {
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (userInfo) {
|
|
this.getCreatorInfoFansLike();
|
|
}
|
|
},
|
|
methods: {
|
|
change(e) {
|
|
// let {
|
|
// index
|
|
// } = e.detail
|
|
// this.pageUrl = this.list[index].url
|
|
/** 跳转指定页面*/
|
|
uni.navigateTo({
|
|
url: e.url
|
|
});
|
|
},
|
|
|
|
//获取粉丝喜欢收藏数量
|
|
|
|
async getCreatorInfoFansLike() {
|
|
let that = this;
|
|
const res = await getCreatorInfoFansLike(that.userInfo.id)
|
|
if (res.data.code === 200) {
|
|
that.creatorFansLikeInfo = res.data.data
|
|
} else {
|
|
uni.showModal({
|
|
content: '获取粉丝喜欢收藏数量数据加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $uni-bg-color;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
|
|
min-height: 100vh;
|
|
background: $uni-bg-color;
|
|
|
|
}
|
|
|
|
.top {
|
|
width: 100vw;
|
|
height: 30vh;
|
|
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: flex-end;
|
|
padding: 40rpx;
|
|
|
|
.left {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
margin-right: 40rpx;
|
|
|
|
>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
font-size: 12px;
|
|
height: 150rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.user-info-div {
|
|
|
|
.username {
|
|
font-size: 32rpx;
|
|
line-height: 60rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
.nums-item {
|
|
margin-right: 20rpx;
|
|
|
|
.num-span {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.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%);
|
|
//}
|
|
|
|
.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%, #0b6375 100%);
|
|
|
|
|
|
.middle-btn-item {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.listIconImage{
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
position: absolute;
|
|
bottom: -20rpx;
|
|
left: -20rpx;
|
|
}
|
|
|
|
.text {
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
line-height: 40rpx;
|
|
width: 500rpx;
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 60rpx;
|
|
|
|
.listIconImage{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
width: 500rpx;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|