From 880e2c87ba7151aae8e43e27764a30f1675ca09c Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Wed, 11 Aug 2021 13:31:32 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E4=BD=9C=E5=93=81=E9=9B=86=20UI?=
 =?UTF-8?q?=20=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/portfolio/_portfolio_id.vue | 248 +++++++++++++++---------------
 1 file changed, 126 insertions(+), 122 deletions(-)

diff --git a/pages/portfolio/_portfolio_id.vue b/pages/portfolio/_portfolio_id.vue
index 0438266..48cac9d 100644
--- a/pages/portfolio/_portfolio_id.vue
+++ b/pages/portfolio/_portfolio_id.vue
@@ -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>