✨ 作品集面板功能

2021-03-06 21:29:35 +08:00 · 2021-03-06 21:29:35 +08:00 · 0909fa2c65
commit 0909fa2c65
parent af361e297e
5 changed files with 426 additions and 349 deletions
--- a/components/common/portfolio/list.vue
+++ b/components/common/portfolio/list.vue
@ -1,31 +1,34 @@
 <template>
  <div class="wrapper">
-    <el-row class="row-cards row-deck" :gutter="10">
-      <el-col v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
-        <el-col class="card">
-          <el-col class="card-body d-flex flex-column">
-            <el-col :span="24" class="mr-3">
-              <a v-show="portfolio.headImgUrl">
-                <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-row class="row-cards row-deck" :gutter="20">
+      <el-col :span="8" v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
+        <el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
+          <el-card :body-style="{ padding: '0px' }">
+            <el-col style="padding: 0;">
+              <el-image :src="portfolio.headImgUrl" style="width:281px;height: 281px;" fit="cover"></el-image>
            </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">
--- a/components/layouts/pc/header.vue
+++ b/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;
--- a/pages/portfolio/post/_portfolio_id.vue
+++ b/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 {mapState} from 'vuex';
-  import saveSvg from 'save-svg-as-png';
-  import VueCropper from 'vue-cropperjs';
-  import 'cropperjs/dist/cropper.css';
+import Vue from 'vue';
+import {mapState} from 'vuex';
+import saveSvg from 'save-svg-as-png';
+import VueCropper from 'vue-cropperjs';
+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, '').
-            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-            replace('/\\s/g', '')
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/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";
-  .preview-area {
+@import "~vditor/src/assets/scss/index.scss";
+
+.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 {
-    width: 950px;
-    min-height: 300px;
+.img-cropper {
+  width: 480px;
+  min-height: 480px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
-  }
+}

-  .preview-large {
-    width: 950px;
-    height: 237.5px;
-    margin-bottom: 1rem;
-    margin-top: 3rem;
+.preview-large {
+  width: 100%;
+  height: 480px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  overflow: hidden;
-  }
+}
 </style>
--- a/pages/portfolios.vue
+++ b/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>
--- a/store/portfolio.js
+++ b/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`, {