493 lines
13 KiB
Vue
493 lines
13 KiB
Vue
<template>
|
||
<view :style="colorStyle">
|
||
<NavBar titleText="个人主页"
|
||
textSize="34rpx"
|
||
:isScrolling="pageScrollStatus"
|
||
:iconColor="pageScrollStatus ? '#333333' : '#ffffff'"
|
||
:textColor="pageScrollStatus ? '#333333' : '#ffffff'"
|
||
showBack
|
||
:showEmpty="false"></NavBar>
|
||
<!-- :style="{'height': 552 + (sysHeight * 2) + 'rpx'}" -->
|
||
<view class="info-card w-full relative" >
|
||
<view class="blur-bg w-full h-full abs-lt" :style="[headerStyle]"></view>
|
||
<view class="w-full h-full content" :style="[cardStyle]">
|
||
<view class="info">
|
||
<view class="flex-between-center">
|
||
<view class="flex-y-center">
|
||
<view class="w-140 h-140 rd-50-p111- relative" :class="userInfo.vip_status ? 'svip-border' : 'white-border'">
|
||
<image class="w-full h-full rd-50-p111- block" :src="userInfo.author_image" mode="aspectFill"></image>
|
||
<image class="vip-badge" src="@/static/img/svip_badge.png" v-show="userInfo.vip_status"></image>
|
||
</view>
|
||
<view class="pl-28 text--w111-fff">
|
||
<view class="w-260 flex-y-center flex-wrap">
|
||
<text class="fs-32 fw-500">{{userInfo.author}}</text>
|
||
<view class="vip flex-center" v-show="userInfo.level_name">
|
||
<text class="iconfont icon-huiyuandengji"></text>
|
||
V{{userInfo.level_name}}
|
||
</view>
|
||
</view>
|
||
<view class="fs-24 pt-22">ID:{{userInfo.relation_id}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-y-center">
|
||
<view class="w-154 h-58 rd-30rpx flex-center fs-24 text--w111-fff bg-white-01"
|
||
v-if="userInfo.is_self" @tap="authTo('/pages/discover/discoverCreate/index')">
|
||
<text class="iconfont icon-ic_edit fs-26"></text>
|
||
<text class="pl-8">去发布</text>
|
||
|
||
</view>
|
||
<view v-else class="w-124 h-58 rd-30rpx flex-center fs-24 text--w111-fff bg-white-01"
|
||
@tap="followChange">
|
||
<text v-show="!userInfo.is_follow" class="iconfont icon-ic_increase fs-24"></text>
|
||
<text>{{userInfo.is_follow ? '已关注' : '关注'}}</text>
|
||
</view>
|
||
<view class="w-58 h-58 rd-50-p111- ml-12 text--w111-fff bg-white-01 flex-center"
|
||
:class="{'msg-icon': is_view == 0}" v-if="userInfo.is_self" @tap="authTo('/pages/discover/discoverMessage/index')">
|
||
<text class="iconfont icon-ic_message2 w-32"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fs-26 text--w111-fff lh-40rpx space-line user-desc mt-20">
|
||
<text v-show="userInfo.desc">{{userInfo.desc}} </text>
|
||
<text v-show="!userInfo.desc">此人很神秘，什么也没有留下～</text>
|
||
<text class="iconfont icon-ic_edit fs-26" v-if="userInfo.is_self" @tap="toggleModal"></text>
|
||
</view>
|
||
<view class="mt-48 px-28 flex-between-center text--w111-fff">
|
||
<view class="text-center" v-for="(item,index) in infoList" :key="index"
|
||
@tap="userTo('/pages/discover/discoverFollow/index?type=' + index)">
|
||
<view class="fs-30">{{item.count}}</view>
|
||
<view class="pt-10 fs-24">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-56"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="list-tab flex-between-center relative" :class="showSearch ? 'pt-28' : 'pt-42'" v-if="userInfo.is_self">
|
||
<text v-show="!showSearch"></text>
|
||
<view class="flex-y-center fs-34 text--w111-999 center-tabs" v-show="!showSearch">
|
||
<view :class="{'active-tab': active == 0}" @tap="changeTab(0)">作品</view>
|
||
<view class="ml-66" :class="{'active-tab': active == 1}" @tap="changeTab(1)">赞过</view>
|
||
</view>
|
||
<view class="w-608 h-58 rd-30rpx bg--w111-f1f1f1 flex-y-center ml-12 pl-20" v-show="showSearch">
|
||
<text class="iconfont icon-ic_search fs-30 text--w111-999"></text>
|
||
<input type="text" v-model="params.keyword" placeholder="搜索笔记/用户/商品" @confirm="searchSubmit"
|
||
class="flex-1 pl-14 fs-24" />
|
||
</view>
|
||
<text v-show="!showSearch && !params.keyword" class="iconfont icon-ic_search fs-40 pr-10" @tap="openSearch"></text>
|
||
<text v-show="showSearch && params.keyword" class="fs-26 text--w111-999 pr-10" @tap="searchSubmit">搜索</text>
|
||
<text v-show="showSearch && !params.keyword" class="fs-26 text--w111-999 pr-10" @tap="reset">取消</text>
|
||
</view>
|
||
<view class="list-tab" v-else></view>
|
||
<view class="pt-20 pl-20 pr-20 bg--w111-f5f5f5" v-show="contentList.length">
|
||
<waterfallsFlow :wfList="contentList" isSelf @onFlowLike="flowLike"></waterfallsFlow>
|
||
</view>
|
||
<view class="px-20 bg--w111-f5f5f5" v-show="!contentList.length">
|
||
<emptyPage title="暂无内容～"></emptyPage>
|
||
</view>
|
||
</view>
|
||
<!-- 确认框 -->
|
||
<tui-modal :show="showModal" maskClosable custom @cancel="toggleModal">
|
||
<view class="tui-modal-custom">
|
||
<view class="fs-32 fw-500 lh-44rpx text-center">编辑简介</view>
|
||
<view class="mt-24 bg--w111-f5f5f5 rd-16rpx p-30rpx h-342" @tap="openFocus">
|
||
<textarea class="w-full fs-26"
|
||
ref="myTextarea"
|
||
v-model="userInfo.desc"
|
||
auto-height
|
||
:focus="focus"
|
||
wrap-style="wrap"
|
||
:always-embed="true"
|
||
:adjust-position="true"
|
||
cursor-spacing="85rpx"
|
||
:maxlength="50"
|
||
name="desc" />
|
||
</view>
|
||
<view class="flex-between-center mt-40">
|
||
<view class="w-244 h-72 rd-36rpx flex-center fs-26 font-num close-btn" @tap="toggleModal">取消</view>
|
||
<view class="w-244 h-72 rd-36rpx flex-center bg-color text--w111-fff fs-26" @tap="saveDesc">保存</view>
|
||
</view>
|
||
</view>
|
||
</tui-modal>
|
||
<!-- 确认框 -->
|
||
<tuiModal
|
||
:show="showFollow"
|
||
title="确认取消关注"
|
||
:maskClosable="false"
|
||
@click="handleClick"></tuiModal>
|
||
<home></home>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let sysHeight = uni.getWindowInfo().statusBarHeight;
|
||
import colors from "@/mixins/color";
|
||
import emptyPage from '@/components/emptyPage.vue';
|
||
import NavBar from "@/components/NavBar.vue";
|
||
import waterfallsFlow from "@/components/discoverWaterfall/WaterfallsFlow.vue";
|
||
import tuiModal from "@/components/tui-modal/index.vue";
|
||
import {
|
||
communityListApi,
|
||
communityUserInfoApi,
|
||
communityUpdateDescApi,
|
||
communitySetInsterestApi,
|
||
communityLikeListApi
|
||
} from "@/api/community.js"
|
||
import {serviceRecord} from '@/api/user.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
sysHeight,
|
||
pageScrollStatus:false,
|
||
id:0,
|
||
params:{
|
||
page:1,
|
||
limit:20,
|
||
topic_id:'', //话题
|
||
keyword:'',
|
||
is_interest:0, //是否关注
|
||
relation_id:'',
|
||
},
|
||
infoList:[
|
||
{name:'关注',count:'0'},
|
||
{name:'好友',count:'0'},
|
||
{name:'粉丝',count:'0'},
|
||
{name:'获赞',count:'0'},
|
||
],
|
||
active:0,
|
||
contentList:[],
|
||
userInfo:{},
|
||
showSearch:false,
|
||
showModal:false,
|
||
showFollow:false,
|
||
focus:false,
|
||
is_view: 1
|
||
};
|
||
},
|
||
mixins: [colors],
|
||
components:{ emptyPage, NavBar, waterfallsFlow, tuiModal },
|
||
computed:{
|
||
headerStyle(){
|
||
return {
|
||
// 'height': 552 + (this.sysHeight * 2) + 'rpx',
|
||
'background-image':`url(${this.userInfo.author_image})`
|
||
}
|
||
},
|
||
cardStyle(){
|
||
return {
|
||
'padding-top':40 + this.sysHeight + 'px',
|
||
}
|
||
}
|
||
},
|
||
provide() {
|
||
return {
|
||
flowLike: this.flowLike
|
||
}
|
||
},
|
||
onPageScroll(object) {
|
||
if (object.scrollTop > 130) {
|
||
this.pageScrollStatus = true;
|
||
} else if (object.scrollTop < 130) {
|
||
this.pageScrollStatus = false;
|
||
}
|
||
uni.$emit('scroll');
|
||
},
|
||
onReachBottom() {
|
||
this.getList();
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id;
|
||
this.getList();
|
||
},
|
||
onShow() {
|
||
this.getUserInfo();
|
||
},
|
||
methods:{
|
||
openFocus(){
|
||
this.focus = true;
|
||
},
|
||
changeTab(val){
|
||
if(this.active == val) return
|
||
this.active = val;
|
||
this.loading = false;
|
||
this.contentList = [];
|
||
this.params.page = 1;
|
||
val == 1 ? this.getLike() : this.getList()
|
||
},
|
||
getList(){
|
||
if (this.loading) return;
|
||
this.loading = true;
|
||
this.$set(this.params,'relation_id',this.id);
|
||
communityListApi(this.params).then(res=>{
|
||
let list = res.data;
|
||
let loading = list.length < this.params.limit;
|
||
this.contentList = this.contentList.concat(list);
|
||
this.params.page++;
|
||
this.loading = loading;
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
getLike(){
|
||
if (this.loading) return;
|
||
this.loading = true;
|
||
communityLikeListApi().then(res=>{
|
||
let list = res.data.list;
|
||
let loading = list.length < this.params.limit;
|
||
this.contentList = this.contentList.concat(list);
|
||
this.params.page++;
|
||
this.loading = loading;
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
getUserInfo(){
|
||
communityUserInfoApi(this.id).then(res=>{
|
||
this.userInfo = res.data;
|
||
this.infoList[0].count = res.data.follow_num;
|
||
this.infoList[1].count = res.data.friend_count;
|
||
this.infoList[2].count = res.data.fans_num;
|
||
this.infoList[3].count = res.data.like_num;
|
||
serviceRecord({page: 1,limit: 1}).then(res => {
|
||
this.is_view = res.data.community.is_viewed;
|
||
})
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
},{
|
||
tab: 3
|
||
});
|
||
});
|
||
},
|
||
userTo(url){
|
||
if(this.userInfo.is_self){
|
||
if(url == '/pages/discover/discoverFollow/index?type=3') return
|
||
this.authTo(url);
|
||
}
|
||
},
|
||
authTo(url){
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
openSearch(){
|
||
this.showSearch = !this.showSearch;
|
||
if(!this.showSearch && this.params.keyword){
|
||
this.params.keyword = '';
|
||
this.params.page = 1;
|
||
this.contentList = [];
|
||
this.loading = false;
|
||
this.getList();
|
||
}
|
||
},
|
||
searchSubmit(){
|
||
this.params.page = 1;
|
||
this.contentList = [];
|
||
this.loading = false;
|
||
this.getList();
|
||
},
|
||
reset(){
|
||
this.params.keyword = '';
|
||
this.showSearch = false;
|
||
// this.searchSubmit();
|
||
},
|
||
toggleModal(){
|
||
this.showModal = !this.showModal;
|
||
},
|
||
saveDesc(){
|
||
if(this.userInfo.desc == '') return this.$util.Tips({
|
||
title: '请输入介绍'
|
||
});
|
||
communityUpdateDescApi({desc:this.userInfo.desc}).then(res=>{
|
||
this.showModal = false;
|
||
this.getUserInfo();
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon:'none'
|
||
})
|
||
}).catch(err=>{
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
},
|
||
followChange(){
|
||
if(this.userInfo.is_follow == 0){
|
||
communitySetInsterestApi(this.id,{status:1}).then(res=>{
|
||
this.userInfo.is_follow = 1;
|
||
return this.$util.Tips({
|
||
title: res.msg
|
||
});
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
}else{
|
||
this.showFollow = true;
|
||
}
|
||
},
|
||
handleClick(e){
|
||
let index = e.index;
|
||
let that = this;
|
||
if(index == 1){
|
||
communitySetInsterestApi(this.id,{status:0}).then(res=>{
|
||
this.userInfo.is_follow = 0;
|
||
this.showFollow = false;
|
||
return this.$util.Tips({
|
||
title: res.msg
|
||
});
|
||
|
||
}).catch(err => {
|
||
this.showFollow = false;
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
}else{
|
||
this.showFollow = false;
|
||
}
|
||
},
|
||
flowLike(data){
|
||
let index = this.contentList.findIndex(item=> data.id == item.id);
|
||
this.contentList[index].is_like = data.status;
|
||
if(data.status == 1){
|
||
this.contentList[index].like_num++;
|
||
}else{
|
||
this.contentList[index].like_num--;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.info-card{
|
||
background-size: cover;
|
||
}
|
||
.blur-bg{
|
||
filter: blur(50rpx);
|
||
background-size: cover;
|
||
}
|
||
.content{
|
||
position: relative; /* 设置为相对定位 */
|
||
z-index: 2; /* 设置更高的层级以覆盖背景 */
|
||
filter: blur(0);
|
||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 39%, rgba(0, 0, 0, 0.7) 100%);
|
||
}
|
||
.info{
|
||
padding: 38rpx 34rpx 0 30rpx;
|
||
}
|
||
.bg-white-01{
|
||
background-color:rgba(255, 255, 255, 0.1);
|
||
}
|
||
.bg--w111-f1f1f1{
|
||
background-color: #f1f1f1;
|
||
}
|
||
.border-white{
|
||
border: 1rpx solid #fff;
|
||
}
|
||
.list-box{
|
||
position: relative;
|
||
left: 0;
|
||
top: -24rpx;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
z-index: 90;
|
||
}
|
||
.list-tab{
|
||
background: linear-gradient( 180deg, #FFFFFF 0%, #F5F5F5 100%);
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
padding-bottom: 24rpx;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
}
|
||
.center-tabs{
|
||
position: absolute;
|
||
top: 38rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.active-tab{
|
||
font-weight: 500;
|
||
color: #333;
|
||
position: relative;
|
||
&:after{
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -14rpx;
|
||
width: 64rpx;
|
||
height: 5rpx;
|
||
background: var(--view-theme);
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
.vip{
|
||
width: 64rpx;
|
||
height: 26rpx;
|
||
background: #FEF0D9;
|
||
border: 1px solid #FACC7D;
|
||
border-radius: 50rpx;
|
||
font-size: 18rpx;
|
||
font-weight: 500;
|
||
color: #DFA541;
|
||
margin-left: 10rpx;
|
||
.iconfont {
|
||
font-size: 16rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
.vip-badge{
|
||
position: absolute;
|
||
top: -20rpx;
|
||
right: 0;
|
||
width: 48rpx;
|
||
height: 46rpx;
|
||
}
|
||
.svip-border{
|
||
border: 2rpx solid #F1BB0D;
|
||
}
|
||
.tui-modal-custom{
|
||
height: 530rpx;
|
||
.h-342{
|
||
height: 342rpx;
|
||
}
|
||
}
|
||
.white-border{
|
||
border: 2rpx solid #FFFFFF;
|
||
}
|
||
.modal-btn{
|
||
width: 244rpx;
|
||
height: 72rpx;
|
||
border-radius: 36rpx;
|
||
}
|
||
.close-btn{
|
||
border: 1rpx solid var(--view-theme);
|
||
}
|
||
.confirm-btn{
|
||
background-color: var(--view-theme);
|
||
}
|
||
.msg-icon{
|
||
position: relative;
|
||
&:after{
|
||
content: '';
|
||
position: absolute;
|
||
right: 8rpx;
|
||
top: 10rpx;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 6rpx;
|
||
background-color: #e93323;
|
||
}
|
||
}
|
||
.user-desc{
|
||
max-height: 200rpx;
|
||
overflow-y: scroll;
|
||
}
|
||
</style>
|