💄 作品集 UI 更新
This commit is contained in:
ronger
parent
edd5d422a9
commit
880e2c87ba
@ -4,11 +4,15 @@
|
||||
<el-card :body-style="{ padding: '20px', borderRadius: '16px' }">
|
||||
<el-col style="padding-bottom: 20px;">
|
||||
<el-col :span="8" v-if="portfolio.headImgUrl">
|
||||
<el-image style="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;" :src="portfolio.headImgUrl" :preview-src-list="[portfolio.headImgUrl]"></el-image>
|
||||
<el-image
|
||||
style="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;"
|
||||
:src="portfolio.headImgUrl" :preview-src-list="[portfolio.headImgUrl]"></el-image>
|
||||
</el-col>
|
||||
<el-col :span="8" v-else>
|
||||
<el-image style="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;">
|
||||
<div slot="error" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
|
||||
<el-image
|
||||
style="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;">
|
||||
<div slot="error"
|
||||
style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
|
||||
无图片
|
||||
</div>
|
||||
</el-image>
|
||||
@ -25,7 +29,7 @@
|
||||
</el-link>
|
||||
</el-col>
|
||||
<el-col style="font-size: 14px;">
|
||||
<span style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}} 篇
|
||||
<span style="padding-right: 1rem;">文章</span> {{ portfolio.articleNumber || 0 }} 篇
|
||||
</el-col>
|
||||
<el-col style="margin-bottom: .5rem;font-size: 14px;" v-html="portfolio.portfolioDescription"></el-col>
|
||||
</el-col>
|
||||
@ -40,133 +44,133 @@
|
||||
<el-col>
|
||||
<el-divider></el-divider>
|
||||
<el-col>
|
||||
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
|
||||
<article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex';
|
||||
import ArticleList from "../../components/archive/list";
|
||||
import {mapState} from 'vuex';
|
||||
import ArticleList from "../../components/archive/list";
|
||||
|
||||
export default {
|
||||
name: "PortfolioDetail",
|
||||
components: {ArticleList},
|
||||
validate({params, store}) {
|
||||
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||
},
|
||||
fetch({store, params, query, error}) {
|
||||
params.page = query.page || 1
|
||||
return Promise.all([
|
||||
store
|
||||
.dispatch('portfolio/fetchDetail', params)
|
||||
.catch(err => error({statusCode: 404})),
|
||||
store.dispatch('portfolio/fetchArticleList', params)
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$route.query': function () {
|
||||
this.$store.dispatch('portfolio/fetchArticleList', {
|
||||
page: this.$route.query.page || 1,
|
||||
portfolio_id: this.routePortfolioId
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
portfolio: state => state.portfolio.detail.data,
|
||||
articles: state => state.portfolio.articles,
|
||||
isFetching: state => state.portfolio.detail.fetching,
|
||||
isMobile: state => state.global.isMobile,
|
||||
user: state => state.oauth,
|
||||
avatar: state => state.userInfo?.avatarURL
|
||||
}),
|
||||
isAuthor() {
|
||||
let account = this.$store.state.userInfo?.nickname;
|
||||
if (account) {
|
||||
if (account === this.portfolio.portfolioAuthor.userNickname) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
routePortfolioId() {
|
||||
return Number(this.$route.params.portfolio_id)
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.portfolio.portfolioTitle || 'RYMCU - 嵌入式知识学习交流平台',
|
||||
meta: [
|
||||
{
|
||||
name: 'keywords',
|
||||
content: this.portfolio.portfolioTags || 'RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
content: this.portfolio.portfolioPreviewContent
|
||||
},
|
||||
{
|
||||
name: 'site_name',
|
||||
content: 'RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
content: this.portfolio.portfolioPermalink
|
||||
},
|
||||
{
|
||||
name: 'og:title',
|
||||
content: this.portfolio.portfolioTitle + ' - RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'og:description',
|
||||
content: this.portfolio.portfolioPreviewContent
|
||||
},
|
||||
{
|
||||
name: 'og:site_name',
|
||||
content: 'RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'og:url',
|
||||
content: this.portfolio.portfolioPermalink
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRouter(name, data) {
|
||||
if (name === 'article') {
|
||||
this.$router.push({
|
||||
path: data
|
||||
})
|
||||
} else {
|
||||
this.$router.push(
|
||||
{
|
||||
path: '/user/' + data
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
managerPortfolio(id) {
|
||||
this.$router.push(
|
||||
{
|
||||
path: `/portfolio/manager/${id}`
|
||||
}
|
||||
)
|
||||
},
|
||||
currentChangeArticle(page) {
|
||||
this.$router.push(
|
||||
{
|
||||
path: `/portfolio/${this.routePortfolioId}?page=${page}`
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setActiveMenu', 'portfolioDetail');
|
||||
export default {
|
||||
name: "PortfolioDetail",
|
||||
components: {ArticleList},
|
||||
validate({params, store}) {
|
||||
return params.portfolio_id && !isNaN(Number(params.portfolio_id))
|
||||
},
|
||||
fetch({store, params, query, error}) {
|
||||
params.page = query.page || 1
|
||||
return Promise.all([
|
||||
store
|
||||
.dispatch('portfolio/fetchDetail', params)
|
||||
.catch(err => error({statusCode: 404})),
|
||||
store.dispatch('portfolio/fetchArticleList', params)
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'$route.query': function () {
|
||||
this.$store.dispatch('portfolio/fetchArticleList', {
|
||||
page: this.$route.query.page || 1,
|
||||
portfolio_id: this.routePortfolioId
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
portfolio: state => state.portfolio.detail.data,
|
||||
articles: state => state.portfolio.articles,
|
||||
isFetching: state => state.portfolio.detail.fetching,
|
||||
isMobile: state => state.global.isMobile,
|
||||
user: state => state.oauth,
|
||||
avatar: state => state.userInfo?.avatarURL
|
||||
}),
|
||||
isAuthor() {
|
||||
let account = this.$store.state.userInfo?.nickname;
|
||||
if (account) {
|
||||
if (account === this.portfolio.portfolioAuthor.userNickname) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
routePortfolioId() {
|
||||
return Number(this.$route.params.portfolio_id)
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.portfolio.portfolioTitle || 'RYMCU - 嵌入式知识学习交流平台',
|
||||
meta: [
|
||||
{
|
||||
name: 'keywords',
|
||||
content: this.portfolio.portfolioTags || 'RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
content: this.portfolio.portfolioPreviewContent
|
||||
},
|
||||
{
|
||||
name: 'site_name',
|
||||
content: 'RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
content: this.portfolio.portfolioPermalink
|
||||
},
|
||||
{
|
||||
name: 'og:title',
|
||||
content: this.portfolio.portfolioTitle + ' - RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'og:description',
|
||||
content: this.portfolio.portfolioPreviewContent
|
||||
},
|
||||
{
|
||||
name: 'og:site_name',
|
||||
content: 'RYMCU'
|
||||
},
|
||||
{
|
||||
name: 'og:url',
|
||||
content: this.portfolio.portfolioPermalink
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRouter(name, data) {
|
||||
if (name === 'article') {
|
||||
this.$router.push({
|
||||
path: data
|
||||
})
|
||||
} else {
|
||||
this.$router.push(
|
||||
{
|
||||
path: '/user/' + data
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
managerPortfolio(id) {
|
||||
this.$router.push(
|
||||
{
|
||||
path: `/portfolio/manager/${id}`
|
||||
}
|
||||
)
|
||||
},
|
||||
currentChangeArticle(page) {
|
||||
this.$router.push(
|
||||
{
|
||||
path: `/portfolio/${this.routePortfolioId}?page=${page}`
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setActiveMenu', 'portfolioDetail');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user