✨ 作品集面板功能

components/common/portfolio/list.vue

@@ -1,31 +1,34 @@
 <template>
   <div class="wrapper">
-    <el-row class="row-cards row-deck" :gutter="10">
+    <el-row class="row-cards row-deck" :gutter="20">
-      <el-col v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
+      <el-col :span="8" v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
-        <el-col class="card">
+        <el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
-          <el-col class="card-body d-flex flex-column">
+          <el-card :body-style="{ padding: '0px' }">
-            <el-col :span="24" class="mr-3">
+            <el-col style="padding: 0;">
-              <a v-show="portfolio.headImgUrl">
+              <el-image :src="portfolio.headImgUrl" style="width:281px;height: 281px;" fit="cover"></el-image>
-                <el-image class="card-img-top" style="height: 10rem;" :src="portfolio.headImgUrl"></el-image>
-              </a>
-              <a v-show="!portfolio.headImgUrl">
-                <el-image class="card-img-top" style="height: 10rem;"
-                          src="https://static.rymcu.com/article/1574441170152.jpg"></el-image>
-              </a>
             </el-col>
-            <el-col :span="24">
+            <el-col style="padding: 0 10px;">
               <h4 class="article-header-md">
                 <el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"
                          v-html="portfolio.portfolioTitle"></el-link>
               </h4>
-              <div class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</div>
-              <div class="d-flex align-items-center pt-5 mt-auto">
-                <div class="ml-auto text-muted">
-                  <span>{{ portfolio.timeAgo }}</span>
-                </div>
-              </div>
             </el-col>
+            <el-col class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</el-col>
+          </el-card>
         </el-col>
+        <el-col v-else style="margin-bottom: 20px;">
+          <el-card :body-style="{ padding: '0px' }">
+            <el-col style="padding: 0;">
+              <el-image :src="portfolio.headImgUrl" style="width:280px;height: 240px;" fit="cover"></el-image>
+            </el-col>
+            <el-col style="padding: 0 10px;">
+              <h4 class="article-header-md">
+                <el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"
+                         v-html="portfolio.portfolioTitle"></el-link>
+              </h4>
+            </el-col>
+            <el-col class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</el-col>
+          </el-card>
         </el-col>
       </el-col>
       <el-col v-show="!portfolios" class="text-center">

components/layouts/pc/header.vue

@@ -13,6 +13,7 @@
                      @select="handleSelectMenu">
               <el-menu-item index="index">首页</el-menu-item>
               <el-menu-item index="topic">专题</el-menu-item>
+              <el-menu-item index="portfolios">作品集</el-menu-item>
             </el-menu>
           </el-col>
         </el-row>
@@ -185,6 +186,11 @@ export default {
               path: '/topic/news?page=1'
             })
             break;
+          case 'portfolios':
+            _ts.$router.push({
+              path: '/portfolios?page=1'
+            })
+            break;
           case 'github':
             window.open("https://github.com/rymcu");
             return false;

pages/portfolio/post/_portfolio_id.vue

@@ -23,19 +23,31 @@
             <el-col :span="24">
               <vue-cropper
                 ref="cropper"
-                :aspect-ratio="4 / 1"
+                :aspect-ratio="1 / 1"
                 :src="headImgUrl"
                 :checkCrossOrigin="false"
                 :checkOrientation="false"
-                :imgStyle="{width: '950px', height: '237.5px'}"
+                :imgStyle="{width: '480px', height: '480px'}"
                 :autoCropArea="1"
                 :autoCrop="autoCrop"
                 preview=".preview"
               />
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
+              <el-col :span="8">
+                <el-card :body-style="{ padding: '0px' }">
+                  <el-col>
                     <div class="preview preview-large"/>
                   </el-col>
+                  <el-col style="padding: 0 10px;">
+                    <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
+                  </el-col>
+                  <el-col class="text-muted article-summary-md" style="padding: 0 10px;">
+                    {{ portfolio.portfolioDescription }}
+                  </el-col>
+                </el-card>
+              </el-col>
+            </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
               <el-upload
                 class="avatar-uploader"
@@ -68,13 +80,13 @@
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
-  import saveSvg from 'save-svg-as-png';
+import saveSvg from 'save-svg-as-png';
-  import VueCropper from 'vue-cropperjs';
+import VueCropper from 'vue-cropperjs';
-  import 'cropperjs/dist/cropper.css';
+import 'cropperjs/dist/cropper.css';
 
-  export default {
+export default {
   name: "PortfolioPost",
   validate({params, store}) {
     if (typeof params.portfolio_id === 'undefined') {
@@ -205,9 +217,7 @@
           url: this.tokenURL.URL,
           linkToImgUrl: this.tokenURL.linkToImageURL,
           token: this.tokenURL.token,
-            filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
-            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-            replace('/\\s/g', '')
         },
         height: data.height,
         counter: 102400,
@@ -362,46 +372,45 @@
       value: portfolioContent
     });
   }
-  }
+}
 </script>
 
 <style lang="scss">
-  @import "~vditor/src/assets/scss/index.scss";
+@import "~vditor/src/assets/scss/index.scss";
-  .preview-area {
+
+.preview-area {
   width: 16rem;
-  }
+}
 
-  .preview-area p {
+.preview-area p {
   font-size: 1.25rem;
-  }
+}
 
-  .preview-area p:last-of-type {
+.preview-area p:last-of-type {
   margin-top: 1rem;
-  }
+}
 
-  .crop-placeholder {
+.crop-placeholder {
   width: 36px;
   height: 36px;
   background: #ccc;
-  }
+}
 
-  .cropped-image img {
+.cropped-image img {
   max-width: 100%;
-  }
+}
 
-  .img-cropper {
+.img-cropper {
-    width: 950px;
+  width: 480px;
-    min-height: 300px;
+  min-height: 480px;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
-  }
+}
 
-  .preview-large {
+.preview-large {
-    width: 950px;
+  width: 100%;
-    height: 237.5px;
+  height: 480px;
-    margin-bottom: 1rem;
-    margin-top: 3rem;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   background-color: #ffffff;
   overflow: hidden;
-  }
+}
 </style>

pages/portfolios.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-row class="wrapper">
+    <el-col>
+      <h1>最新作品集</h1>
+    </el-col>
+    <el-col>
+      <portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"></portfolio-list>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import PortfolioList from "~/components/common/portfolio/list";
+
+export default {
+  name: "Portfolios",
+  components: {PortfolioList},
+  fetch({store, query, error}) {
+    return Promise.all([
+      store
+        .dispatch('portfolio/fetchList', {page: query.page || 1})
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  watch: {
+    '$route.query': function () {
+      this.$store.dispatch('portfolio/fetchList', {page: this.$route.query.page || 1})
+    }
+  },
+  computed: {
+    ...mapState({
+      portfolios: state => state.portfolio.list.data
+    })
+  },
+  methods: {
+    currentChangePortfolio(page) {
+      this.$router.push({
+        name: 'portfolios',
+        query: {
+          page: page
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'portfolios');
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

store/portfolio.js

@@ -73,15 +73,20 @@ export const mutations = {
 
 export const actions = {
   // 获取作品集列表
-  fetchList({commit}, params = {}) {
+  fetchList({commit, state}, params = {}) {
 
     // 清空已有数据
-    commit('updateListData', getDefaultListData())
     commit('updateListFetching', true)
+    let currentData = JSON.parse(JSON.stringify(state)).list.data
+    if (Number(params.page) === currentData.pagination.currentPage) {
+      commit('updateListFetching', false)
+      return
+    }
     let data = {
       page: params.page,
       topicUri: params.topic_uri
     }
+    commit('updateListData', getDefaultListData())
 
     return this.$axios
       .$get(`${BASE_API_PATH}/portfolios`, {