382 lines
14 KiB
Vue
382 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="user" :style="[background]">
|
|||
|
|
<u-navbar id="navbar" :border-bottom="false"
|
|||
|
|
:background="{ background: 'rgba(256,256,256, '+ navStyle.backgroundBg +')', }"
|
|||
|
|
:back-bg="'rgba(0,0,0,' + navStyle.backBg + ')'" :back-icon-color="navStyle.backColor" :immersive="false">
|
|||
|
|
</u-navbar>
|
|||
|
|
|
|||
|
|
<!-- Header Start -->
|
|||
|
|
<view class="header">
|
|||
|
|
<!-- 用户信息 -->
|
|||
|
|
<view class="user_info flex row-between">
|
|||
|
|
<view class="flex">
|
|||
|
|
<view class="user-avatar flex row-center">
|
|||
|
|
<u-image :src="userInfo.avatar" width="106" height="106" borderRadius="50%"></u-image>
|
|||
|
|
</view>
|
|||
|
|
<view class="m-l-30">
|
|||
|
|
<view class="user-name xxl white bold line-1">{{ userInfo.nickname }}</view>
|
|||
|
|
<view class="user-id m-t-14 xs white">会员ID: {{ userInfo.sn }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 去用户设置 -->
|
|||
|
|
<navigator v-if="userInfo.is_self" url="/bundle_b/pages/community_user_profile/community_user_profile"
|
|||
|
|
hover-class="none">
|
|||
|
|
<image src="/bundle_b/static/icon_my_setting.png" class="user-setting"></image>
|
|||
|
|
</navigator>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户简介 -->
|
|||
|
|
<view class="user-intro line-3 white sm">
|
|||
|
|
{{ userInfo.signature || '暂无简介~' }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户数据底部 -->
|
|||
|
|
<view class="user-footer flex">
|
|||
|
|
<!-- 统计 -->
|
|||
|
|
<view class="user-statistics">
|
|||
|
|
<view class="user-statistics--item">
|
|||
|
|
<view class="xl bold">{{ userInfo.follow }}</view>
|
|||
|
|
<view class="sm">关注</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="user-statistics--item">
|
|||
|
|
<view class="xl bold">{{ userInfo.fans }}</view>
|
|||
|
|
<view class="sm">粉丝</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="user-statistics--item">
|
|||
|
|
<view class="xl bold">{{ userInfo.like }}</view>
|
|||
|
|
<view class="sm">获赞</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 操作 -->
|
|||
|
|
<view class="user-operation flex">
|
|||
|
|
<!-- 发布 -->
|
|||
|
|
<navigator url="/bundle_b/pages/published_works/published_works" hover-class="none">
|
|||
|
|
<button class="btn-primary br60 xs white" v-if="userInfo.is_self">
|
|||
|
|
<image src="/bundle_b/static/icon_publish.png"></image>
|
|||
|
|
<text class="m-l-6">发布</text>
|
|||
|
|
</button>
|
|||
|
|
</navigator>
|
|||
|
|
<!-- 关注 -->
|
|||
|
|
<button class="btn-primary br60 xs white" v-if="userInfo.is_self==0 && userInfo.is_follow==0"
|
|||
|
|
@click="handleCommunityFollow(1)">
|
|||
|
|
<image src="/bundle_b/static/icon_follow.png"></image>
|
|||
|
|
<text class="m-l-6">关注</text>
|
|||
|
|
</button>
|
|||
|
|
<!-- 已关注 -->
|
|||
|
|
<button class="followed-btn br60 xs primary bold"
|
|||
|
|
v-if="userInfo.is_self==0 && userInfo.is_follow==1" @click="showFollowTips = true">已关注</button>
|
|||
|
|
|
|||
|
|
<button open-type="share" @click="handleShare" class="flex-col col--center" hover-class="none">
|
|||
|
|
<image src="/bundle_b/static/icon_share.png" class="share"></image>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- Header End -->
|
|||
|
|
|
|||
|
|
<!-- Main Start -->
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="nav-title">
|
|||
|
|
<tabs :current="active" @change="changeTabs" bgColor="transparent" stickyBgColor="transparent"
|
|||
|
|
height="100" fontSize="34" :is-scroll="false" width="400rpx" borderRadius="20rpx 20rpx 0 0">
|
|||
|
|
<tab name="作品">
|
|||
|
|
<community-works v-if="!isFirstLoading" :worksNum="worksNum" :i="0" :index="active"
|
|||
|
|
ref="mescoll1" :userId="userId"></community-works>
|
|||
|
|
</tab>
|
|||
|
|
<tab name="赞过">
|
|||
|
|
<community-like v-if="!isFirstLoading" :likeNum="likeNum" :i="1" :index="active" ref="mescoll2"
|
|||
|
|
:userId="userId"></community-like>
|
|||
|
|
</tab>
|
|||
|
|
</tabs>
|
|||
|
|
</view>
|
|||
|
|
<!-- </u-sticky> -->
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<!-- Main End -->
|
|||
|
|
|
|||
|
|
<!-- 加载 -->
|
|||
|
|
<loading-view v-if="isFirstLoading"></loading-view>
|
|||
|
|
|
|||
|
|
<!-- 取消关注 -->
|
|||
|
|
<u-modal v-model="showFollowTips" :show-cancel-button="true" comfirm-text="取消关注" cancelText="再想想"
|
|||
|
|
:confirm-color="colorConfig.primary" :show-title="false" @confirm="handleCommunityFollow(0)">
|
|||
|
|
<view class="flex-col col-center tips-dialog" style="padding-top: 40rpx">
|
|||
|
|
<image class="icon-lg" src="/static/images/icon_warning.png" />
|
|||
|
|
<view style="margin:30rpx 0;">确认取消关注？</view>
|
|||
|
|
</view>
|
|||
|
|
</u-modal>
|
|||
|
|
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<u-popup :custom-style="{'background': 'none'}" class="share-tips" v-model="showTips" mode="top">
|
|||
|
|
<view style="overflow: hidden;">
|
|||
|
|
<image src="/static/images/share_arrow.png" class="share-arrow" />
|
|||
|
|
<view class="white" style="text-align: center;margin-top: 280rpx;">
|
|||
|
|
<view class="bold lg">立即分享给好友吧</view>
|
|||
|
|
<view class="sm m-t-10">点击屏幕右上角将本页面分享给好友</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getCommunityUserCenter,
|
|||
|
|
apiCommunityFollow,
|
|||
|
|
} from "@/api/community.js"
|
|||
|
|
import CommunityLike from "./components/community-like.vue"
|
|||
|
|
import CommunityWorks from "./components/community-works.vue"
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CommunityLike,
|
|||
|
|
CommunityWorks
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isFirstLoading: true,
|
|||
|
|
|
|||
|
|
worksNum: 0, // 用于子组件监听触底
|
|||
|
|
likeNum: 0, // 用于子组件监听触底
|
|||
|
|
|
|||
|
|
navStyle: {
|
|||
|
|
backBg: 0.4,
|
|||
|
|
backgroundBg: 0,
|
|||
|
|
backColor: 'rgba(256,256,256,1)'
|
|||
|
|
},
|
|||
|
|
active: 0,
|
|||
|
|
userId: '', //用户ID（不传为当前用户
|
|||
|
|
|
|||
|
|
showFollowTips: false, // 取消关注
|
|||
|
|
showTips: false, // 分享弹窗H5
|
|||
|
|
|
|||
|
|
userInfo: {
|
|||
|
|
id: '', // int 用户id
|
|||
|
|
sn: '', //string 用户编号
|
|||
|
|
nickname: '', //string 用户昵称
|
|||
|
|
avatar: '', //string 用户头像
|
|||
|
|
image: '', //string 背景图
|
|||
|
|
signature: '', //string 签名
|
|||
|
|
follow: 0, //int 关注人数
|
|||
|
|
fans: 0, //int 粉丝数
|
|||
|
|
like: 0, //int 点赞数
|
|||
|
|
is_self: 0, // int 是否为当前登录者 0-不是 1-是
|
|||
|
|
is_follow: 0, // int 登录者是否关注获取信息目标 0-未关注 1-关注
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
background() {
|
|||
|
|
const {
|
|||
|
|
image
|
|||
|
|
} = this.userInfo
|
|||
|
|
return image ? {
|
|||
|
|
'background-image': `url(${image})`
|
|||
|
|
} : {
|
|||
|
|
'background-image': `url('https://cdn3.codesign.qq.com/dcloud/attachments/2022/04/25/7fd5f8177ee51dfbe7e2934c77037373-o.png?imageMogr2/thumbnail/!700x650r/interlace/1')`
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
const options = this.$Route.query;
|
|||
|
|
this.userId = options.id;
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
if (this.active == 0) {
|
|||
|
|
this.worksNum += 1
|
|||
|
|
} else if (this.active == 1) {
|
|||
|
|
this.likeNum += 1
|
|||
|
|
}
|
|||
|
|
this.initCommunityUserCenter()
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
uni.$off("changeItem")
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
const top = uni.upx2px(500)
|
|||
|
|
const {
|
|||
|
|
scrollTop
|
|||
|
|
} = e
|
|||
|
|
|
|||
|
|
const percent = scrollTop / top;
|
|||
|
|
this.navStyle.backgroundBg = percent
|
|||
|
|
this.navStyle.backBg = 0.4 * (0.5 - percent)
|
|||
|
|
this.navStyle.backColor = percent < 0.5 ? 'rgba(256,256,256,' + (0.5 - percent) * 2 + ')' : 'rgba(0,0,0,' +
|
|||
|
|
(
|
|||
|
|
percent - 0.5) * 2 + ')'
|
|||
|
|
},
|
|||
|
|
// 触底加载
|
|||
|
|
onReachBottom() {
|
|||
|
|
console.log('触底')
|
|||
|
|
if (this.active == 0) {
|
|||
|
|
this.worksNum += 1
|
|||
|
|
} else if (this.active == 1) {
|
|||
|
|
this.likeNum += 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
changeTabs(event) {
|
|||
|
|
this.active = event
|
|||
|
|
},
|
|||
|
|
// 分享处理
|
|||
|
|
handleShare() {
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.showTips = true
|
|||
|
|
// #endif
|
|||
|
|
// #ifndef MP
|
|||
|
|
this.$store.commit('setCommunity', {
|
|||
|
|
user: {
|
|||
|
|
nickname: this.userInfo.nickname,
|
|||
|
|
},
|
|||
|
|
image: this.userInfo.avatar,
|
|||
|
|
content: this.userInfo.signature,
|
|||
|
|
url: 'bundle_b/pages/community_user/community_user'
|
|||
|
|
})
|
|||
|
|
this.$store.dispatch('communityShare')
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 初始化个人中心
|
|||
|
|
initCommunityUserCenter() {
|
|||
|
|
getCommunityUserCenter({
|
|||
|
|
user_id: this.userId
|
|||
|
|
}).then(res => {
|
|||
|
|
this.userInfo = res.data
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isFirstLoading = false;
|
|||
|
|
}, 600)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 关注 / 取消关注
|
|||
|
|
handleCommunityFollow(status) {
|
|||
|
|
apiCommunityFollow({
|
|||
|
|
follow_id: this.userId,
|
|||
|
|
status
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code === 1) this.initCommunityUserCenter()
|
|||
|
|
this.$toast({
|
|||
|
|
title: res.msg
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async onShareAppMessage() {
|
|||
|
|
return {
|
|||
|
|
title: `${ this.userInfo.nickname }，TA的内容超级棒`,
|
|||
|
|
path: '/bundle_b/pages/community_user/community_user?id=' + this.userId
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.user {
|
|||
|
|
background-position: center;
|
|||
|
|
background-size: 100% auto;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
padding: 20rpx 24rpx;
|
|||
|
|
|
|||
|
|
// 用户信息
|
|||
|
|
.user_info {
|
|||
|
|
.user-avatar {
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 110rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 2px solid #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-name {
|
|||
|
|
width: 450rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-id {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 4rpx 16rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
border: 1px solid #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-setting {
|
|||
|
|
width: 58rpx;
|
|||
|
|
height: 58rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 用户简介
|
|||
|
|
.user-intro {
|
|||
|
|
padding: 20rpx 14rpx 20rpx 0;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 用户数据底部
|
|||
|
|
.user-footer {
|
|||
|
|
|
|||
|
|
// 统计数据
|
|||
|
|
.user-statistics {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
&--item {
|
|||
|
|
width: 160rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 操作
|
|||
|
|
.user-operation {
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
padding: 0;
|
|||
|
|
width: 126rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
background: linear-gradient(90.00deg, #f95f2f 0%, #ff2c3c 100%);
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 28rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 已关注按钮
|
|||
|
|
.followed-btn {
|
|||
|
|
width: 126rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
.nav-title {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 92rpx;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-tips .share-arrow {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
float: right;
|
|||
|
|
margin: 15rpx 31rpx 0 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|