nebula/pages/portfolio/manager/_portfolio_id.vue

<template>
  <el-row class="wrapper">
    <el-col v-if="isAuthor">
      <el-col>
        <el-col :xs="3" :sm="3" :xl="3" class="mr-3">
          <el-image :src="portfolio.headImgUrl"></el-image>
        </el-col>
        <el-col :xs="20" :sm="20" :xl="20">
          <el-col>
            <h1>{{ portfolio.portfolioTitle }}</h1>
          </el-col>
          <el-col style="margin-bottom: .5rem;">
            <span class="text-default" style="padding-right: 1rem;">作者</span>
            <el-link rel="nofollow" @click="onRouter('user', portfolio.portfolioAuthorName)" :underline="false" class="text-default">
              <el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar>
              {{ portfolio.portfolioAuthorName }}
            </el-link>
          </el-col>
          <el-col style="margin-bottom: .5rem;">
            <span class="text-default" style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}篇
          </el-col>
          <el-col style="margin-bottom: .5rem;" v-html="portfolio.portfolioDescription">
          </el-col>
        </el-col>
      </el-col>
      <el-col>
        <el-col style="text-align: right;">
          <el-col>
            <el-link rel="nofollow" @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false" class="text-default"
                     style="margin-right: 1rem;">编辑
            </el-link>
            <el-link rel="nofollow" @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false" class="text-default"
                     style="margin-right: 1rem;">添加文章
            </el-link>
          </el-col>
        </el-col>
        <el-col>
          <el-divider></el-divider>
        </el-col>
        <el-col>
          <portfolio-manager-list :idPortfolio="portfolio.idPortfolio"></portfolio-manager-list>
        </el-col>
      </el-col>
    </el-col>
    <el-col v-else class="text-center">
      <el-alert
        title="用户无权限"
        type="warning"
        center
        show-icon
        :closable="false">
      </el-alert>
    </el-col>
  </el-row>
</template>

<script>
  import {mapState} from 'vuex';
  import PortfolioManagerList from "~/components/common/portfolio/manager/list";

  export default {
    name: "PortfolioManager",
    components: {
      PortfolioManagerList
    },
    validate({params, store}) {
      return params.portfolio_id && !isNaN(Number(params.portfolio_id))
    },
    fetch({store, params, error}) {
      return Promise.all([
        store
          .dispatch('portfolio/fetchDetail', params)
          .catch(err => error({statusCode: 404}))
      ])
    },
    computed: {
      ...mapState({
        portfolio: state => state.portfolio.detail.data
      }),
      isAuthor() {
        let account = this.$store.state.userInfo?.nickname;
        if (account) {
          if (account === this.portfolio.portfolioAuthorName) {
            return true;
          }
        }
        return false;
      }
    },
    methods: {
      onRouter(name, data) {
        if (name === 'article') {
          this.$router.push({
            path: data
          })
        } else if (name === 'user') {
          this.$router.push(
            {
              path: '/user/' + data
            }
          )
        } else {
          this.$router.push(
            {
              path: '/portfolio/post/' + data
            }
          )
        }
      },
      showBindArticleDialog(idPortfolio) {
        this.$router.push({
          path: `/portfolio/manager/bind/${idPortfolio}`
        });
      }
    }
  }
</script>

<style scoped>

</style>