nebula/pages/user/_account.vue

421 lines
13 KiB
Vue
Raw Normal View History

2020-08-01 00:41:00 +08:00
<template>
<el-row>
<el-col :xs="24" :xl="24">
<div class="card card-profile">
2022-06-21 08:33:33 +08:00
<div v-if="user.bgImgUrl" class="card-header"
:style="{backgroundImage:'url('+user.bgImgUrl+')', backgroundSize:'cover', backgroundPosition:'50%'}"></div>
2020-08-01 00:41:00 +08:00
<div v-else class="card-header"
:style="{backgroundImage:'url(' + backgroundImage + ')', backgroundSize:'800px auto', backgroundPosition:'50%'}"></div>
2020-08-01 00:41:00 +08:00
<div class="card-body text-center">
2020-09-14 20:59:56 +08:00
<img v-if="user.avatarUrl" class="card-profile-img-avatar" :src="user.avatarUrl">
2020-08-02 23:55:08 +08:00
<img v-else class="card-profile-img" src="https://static.rymcu.com/article/1578475481946.png">
2020-09-09 22:58:18 +08:00
<h3 class="mb-3">{{ user.nickname }}</h3>
2020-08-01 00:41:00 +08:00
<p class="mb-4" v-html="user.signature"></p>
<div v-if="userExtend" style="margin-bottom: 1rem;">
<el-link v-if="userExtend.blog" class="user-link" title="博客" :underline="false" :href="userExtend.blog"
target="_blank">
2021-07-29 11:22:52 +08:00
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z"></path><path d="m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z"></path></svg>
</el-link>
<el-link v-if="userExtend.github" class="user-link" title="github" :underline="false"
:href="'https://github.com/' + userExtend.github" target="_blank">
2021-07-29 11:22:52 +08:00
<svg width="24" height="24">
<g :fill="'#' + github.hex">
<path :d="github.path"></path>
</g>
</svg>
</el-link>
<el-link v-if="userExtend.weibo" class="user-link" title="微博" :underline="false"
:href="'https://weibo.com/n/' + userExtend.weibo" target="_blank">
2021-07-29 11:22:52 +08:00
<svg width="24" height="24">
<g :fill="'#' + sinaweibo.hex">
<path :d="sinaweibo.path"></path>
</g>
</svg>
</el-link>
<el-popover
v-if="userExtend.weixin"
placement="top-start"
title="微信号"
width="200"
trigger="hover"
:content="userExtend.weixin">
<el-link slot="reference" class="user-link" :underline="false">
<svg width="24" height="24">
<g :fill="'#' + wechat.hex">
<path :d="wechat.path"></path>
</g>
</svg>
</el-link>
</el-popover>
<el-popover
v-if="userExtend.qq"
placement="top-start"
title="QQ 号"
width="200"
trigger="hover"
:content="userExtend.qq">
<el-link slot="reference" class="user-link" :underline="false">
<svg width="24" height="24">
<path :d="tencentqq.path"></path>
</svg>
</el-link>
</el-popover>
</div>
<div v-if="oauth">
<div v-if="oauth.idUser !== user.idUser">
2020-09-28 00:37:14 +08:00
<el-button type="primary" v-if="isFollow" @click="cancelFollowUser(user.idUser)" plain>取消关注</el-button>
<el-button type="primary" v-else @click="followUser(user.idUser)" plain>关注</el-button>
<el-button v-show="false" @click="gotoChats" plain>聊天</el-button>
</div>
2020-08-10 00:44:27 +08:00
</div>
2020-09-09 22:58:18 +08:00
<div v-else>
2020-09-28 00:37:14 +08:00
<el-button type="primary" @click="login" plain>关注</el-button>
<el-button v-show="false" @click="login" plain>聊天</el-button>
2020-09-09 22:58:18 +08:00
</div>
2020-08-01 00:41:00 +08:00
</div>
</div>
</el-col>
<el-col class="text-center" style="margin-bottom: 1rem;">
<el-row type="flex" justify="center">
<el-col>
<el-menu :default-active="activeTab" mode="horizontal" @select="handleToggleTab"
2020-10-25 01:40:24 +08:00
style="padding-left: calc(50vw - 11rem);">
2020-08-01 00:41:00 +08:00
<el-menu-item index="0">文章</el-menu-item>
<el-menu-item index="1">作品集</el-menu-item>
2020-10-25 01:40:24 +08:00
<el-menu-item index="2">关注用户</el-menu-item>
<el-menu-item index="3">粉丝</el-menu-item>
2020-08-01 00:41:00 +08:00
</el-menu>
</el-col>
</el-row>
</el-col>
2020-10-25 01:40:24 +08:00
<el-col v-if="activeTab === '0'" class="tab-content">
2020-08-01 00:41:00 +08:00
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
</el-col>
2020-10-25 01:40:24 +08:00
<el-col v-else-if="activeTab === '1'" class="tab-content">
2020-08-01 00:41:00 +08:00
<portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"></portfolio-list>
</el-col>
2020-10-25 01:40:24 +08:00
<el-col v-else-if="activeTab === '2'" class="tab-content">
2021-08-24 22:33:42 +08:00
<user-list :users="followings" @currentChange="currentChangeFollowing" @followUser="followUser" @cancelFollowUser="cancelFollowUser"></user-list>
2020-10-25 01:40:24 +08:00
</el-col>
<el-col v-else-if="activeTab === '3'" class="tab-content">
2021-08-24 22:33:42 +08:00
<user-list :users="followers" @currentChange="currentChangeFollower" @followUser="followUser" @cancelFollowUser="cancelFollowUser"></user-list>
2020-10-25 01:40:24 +08:00
</el-col>
2020-08-01 00:41:00 +08:00
</el-row>
</template>
<script>
2020-09-09 22:58:18 +08:00
import {mapState} from 'vuex';
import ArticleList from "~/components/archive/list";
import PortfolioList from "~/components/common/portfolio/list";
2020-10-25 01:40:24 +08:00
import UserList from "~/components/common/user/list";
import designTools from "~/static/banner/design-tools.jpg"
import asteroids from "~/static/banner/asteroids.jpg"
import isoMetropolis from "~/static/banner/isometropolis.jpg"
import naranjas from "~/static/banner/naranjas.png"
import retroFurnish from "~/static/banner/retro-furnish.png"
import science from "~/static/banner/science.png"
2021-07-29 11:22:52 +08:00
import {github, sinaweibo, wechat, tencentqq} from "simple-icons";
2020-09-09 22:58:18 +08:00
export default {
name: "User",
2020-10-25 01:40:24 +08:00
components: {ArticleList, PortfolioList, UserList},
2020-09-09 22:58:18 +08:00
validate({params, store}) {
return params.account
2020-09-09 22:58:18 +08:00
},
fetch({store, params, query, error}) {
params.page = query.page || 1
2020-09-09 22:58:18 +08:00
return Promise.all([
store
.dispatch('user/fetchDetail', params)
.catch(err => error({statusCode: 404})),
store.dispatch('user/fetchUserExtend', params),
2020-09-09 22:58:18 +08:00
store.dispatch('user/fetchArticleList', params),
2020-10-25 01:40:24 +08:00
store.dispatch('user/fetchPortfolioList', params),
store.dispatch('user/fetchFollowerList', params),
store.dispatch('user/fetchFollowingList', params)
2020-09-09 22:58:18 +08:00
])
},
watch: {
'$route.query': function () {
let _ts = this;
let activeTab = _ts.$route.query.tab || '0'
_ts.$set(_ts, 'activeTab', activeTab)
switch (_ts.activeTab) {
case "0":
_ts.$store.dispatch('user/fetchArticleList', {
account: _ts.$route.params.account,
page: _ts.$route.query.page || 1
})
break;
case "1":
_ts.$store.dispatch('user/fetchPortfolioList', {
account: _ts.$route.params.account,
page: _ts.$route.query.page || 1
})
break;
case "2":
_ts.$store.dispatch('user/fetchFollowingList', {
account: _ts.$route.params.account,
page: _ts.$route.query.page || 1
})
break;
default:
_ts.$store.dispatch('user/fetchFollowerList', {
account: _ts.$route.params.account,
page: _ts.$route.query.page || 1
})
break
}
}
},
2020-09-09 22:58:18 +08:00
computed: {
...mapState({
user: state => state.user.data,
userExtend: state => state.user.userExtend,
2020-09-09 22:58:18 +08:00
articles: state => state.user.articles,
portfolios: state => state.user.portfolios,
2020-10-25 01:40:24 +08:00
followers: state => state.user.followers,
followings: state => state.user.followings,
2020-09-09 22:58:18 +08:00
oauth: state => state.oauth
})
},
data() {
return {
2021-07-29 11:22:52 +08:00
github,
sinaweibo,
wechat,
tencentqq,
activeTab: this.$route.query.tab || '0',
isFollow: false,
backgroundImage: designTools,
backgroundImages: [
designTools,
asteroids,
isoMetropolis,
naranjas,
retroFurnish,
science
]
2020-09-09 22:58:18 +08:00
}
},
methods: {
currentChangeArticle(page) {
this.onRouter(0, page)
2020-09-09 22:58:18 +08:00
},
currentChangePortfolio(page) {
this.onRouter(1, page)
2020-08-01 00:41:00 +08:00
},
2020-10-25 01:40:24 +08:00
currentChangeFollowing(page) {
this.onRouter(2, page)
2020-10-25 01:40:24 +08:00
},
currentChangeFollower(page) {
this.onRouter(3, page)
2020-10-25 01:40:24 +08:00
},
2020-09-09 22:58:18 +08:00
handleToggleTab(key) {
this.onRouter(key, 1)
},
onRouter(key, page) {
this.$router.push({
path: `/user/${this.$route.params.account}?tab=${key}&page=${page}`
})
2020-08-01 00:41:00 +08:00
},
2020-09-09 22:58:18 +08:00
gotoChats() {
let _ts = this;
_ts.$router.push({
path: `/chats/${_ts.user.account}`
2020-08-01 00:41:00 +08:00
})
},
2020-09-09 22:58:18 +08:00
followUser(idUser) {
let _ts = this;
if (_ts.oauth) {
_ts.$axios.$post('/api/follow', {
followingId: idUser,
followingType: 0
}).then(function (res) {
_ts.$set(_ts, 'isFollow', res);
2021-08-24 22:33:42 +08:00
_ts.$store.dispatch('follow/fetchUserFollowingList');
2020-09-09 22:58:18 +08:00
})
} else {
_ts.login()
2020-08-01 00:41:00 +08:00
}
},
2020-09-09 22:58:18 +08:00
cancelFollowUser(idUser) {
let _ts = this;
if (_ts.oauth) {
_ts.$axios.$post('/api/follow/cancel-follow', {
followingId: idUser,
followingType: 0
}).then(function (res) {
_ts.$set(_ts, 'isFollow', res);
2021-08-24 22:33:42 +08:00
_ts.$store.dispatch('follow/fetchUserFollowingList');
2020-08-10 00:44:27 +08:00
})
2020-09-09 22:58:18 +08:00
} else {
_ts.login()
2020-08-01 00:41:00 +08:00
}
2020-09-09 22:58:18 +08:00
},
login() {
this.$router.push({
path: '/login',
query: {
historyUrl: window.location.href
}
2020-09-09 22:58:18 +08:00
})
}
},
mounted() {
let _ts = this;
this.$store.commit('setActiveMenu', 'user');
2020-09-09 22:58:18 +08:00
if (_ts.oauth) {
_ts.$axios.$get('/api/follow/is-follow', {
params: {
followingId: _ts.user.idUser,
followingType: 0
}
}).then(function (res) {
_ts.$set(_ts, 'isFollow', res);
})
2020-08-01 00:41:00 +08:00
}
}
2020-09-09 22:58:18 +08:00
}
2020-08-01 00:41:00 +08:00
</script>
<style scoped>
2020-09-09 22:58:18 +08:00
body {
overflow-x: hidden;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
position: relative;
margin-bottom: 1.5rem;
width: 100%;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-profile .card-header {
height: 20rem;
background-size: cover;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-header:first-child {
border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-header {
background: none;
padding: 0.5rem 1.5rem;
display: -ms-flexbox;
display: flex;
min-height: 3.5rem;
-ms-flex-align: center;
align-items: center;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-header {
padding: 1.5rem 1.5rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 40, 100, 0.12);
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-body {
-ms-flex: 1;
flex: 1;
margin: 0;
padding: 1.5rem 1.5rem;
position: relative;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-profile-img {
2020-09-14 20:59:56 +08:00
max-width: 16rem;
margin-top: -7rem;
margin-bottom: 1rem;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
.card-profile-img-avatar {
max-width: 16rem;
height: auto;
margin-top: -10rem;
2020-09-09 22:58:18 +08:00
margin-bottom: 1rem;
border: 3px solid #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-img-top {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.card-img-top {
width: 100%;
border-top-left-radius: calc(3px - 1px);
border-top-right-radius: calc(3px - 1px);
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.mb-3, .my-3 {
margin-bottom: 0.75rem !important;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
h3, .h3 {
font-size: 1.5rem;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.mb-4, .my-4 {
margin-bottom: 1rem !important;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.article-header-md {
position: relative;
line-height: 1.4em;
height: 1.4em;
overflow: hidden;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.article-header-md a {
font-weight: bold;
font-size: 1em;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.article-summary-md {
position: relative;
line-height: 1.4em;
height: 4.2em;
overflow: hidden;
}
2020-08-01 00:41:00 +08:00
2020-09-09 22:58:18 +08:00
.el-col-6 {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
2020-10-25 01:40:24 +08:00
.tab-content {
min-height: 50vh;
}
.user-link {
font-size: 24px;
margin: 0 0.5rem;
2021-07-29 11:22:52 +08:00
width: 24px;
height: 24px;
}
2020-08-01 00:41:00 +08:00
</style>