✨ 个人主页模块功能

components/common/portfolio/list.vue

@@ -0,0 +1,187 @@
+<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="4" class="mr-3">
+              <a v-if="portfolio.headImgUrl">
+                <el-image class="card-img-top" style="height: 10rem;" :src="portfolio.headImgUrl"></el-image>
+              </a>
+              <a v-else>
+                <el-image class="card-img-top" style="height: 10rem;"
+                          src="https://rymcu.com/vertical/article/1574441170152.jpg"></el-image>
+              </a>
+            </el-col>
+            <el-col :span="18">
+              <h4 class="article-header-md">
+                <el-link @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>
+        </el-col>
+      </el-col>
+      <el-col v-if="!portfolios" class="text-center">
+        这里什么都没有!
+      </el-col>
+      <el-col>
+        <div class="vertical-container text-center">
+          <el-pagination v-show="portfolios.pagination.total > 10" v-model="portfolios.pagination"
+                         layout="prev, pager, next"
+                         :current-page="portfolios.pagination.currentPage"
+                         :total="portfolios.pagination.total"
+                         @current-change="currentChange">
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "PortfolioList",
+    props: {
+      portfolios: {
+        type: Object
+      }
+    },
+    methods: {
+      onRouter(name, data) {
+        this.$router.push(
+          {
+            path: `/${name}/${data}`
+          }
+        )
+      },
+      currentChange(page) {
+        this.$emit('currentChangePortfolios', page);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  body {
+    overflow-x: hidden;
+  }
+
+  .card {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    position: relative;
+    margin-bottom: 1.5rem;
+    width: 100%;
+  }
+
+  .card {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 40, 100, 0.12);
+    border-radius: 3px;
+  }
+
+  .card-profile .card-header {
+    height: 20rem;
+    background-size: cover;
+  }
+
+  .card-header:first-child {
+    border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
+  }
+
+  .card-header {
+    background: none;
+    padding: 0.5rem 1.5rem;
+    display: -ms-flexbox;
+    display: flex;
+    min-height: 3.5rem;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .card-header {
+    padding: 1.5rem 1.5rem;
+    margin-bottom: 0;
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+  }
+
+  .card-body {
+    -ms-flex: 1;
+    flex: 1;
+    margin: 0;
+    padding: 1.5rem 1.5rem;
+    position: relative;
+  }
+
+  .card-profile-img {
+    max-width: 6rem;
+    margin-top: -5rem;
+    margin-bottom: 1rem;
+    border: 3px solid #fff;
+    border-radius: 100%;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    background-color: #ffffff;
+  }
+
+  .card-img-top {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  .card-img-top {
+    width: 100%;
+    border-top-left-radius: calc(3px - 1px);
+    border-top-right-radius: calc(3px - 1px);
+  }
+
+  .mb-3, .my-3 {
+    margin-bottom: 0.75rem !important;
+  }
+
+  h3, .h3 {
+    font-size: 1.5rem;
+  }
+
+  .mb-4, .my-4 {
+    margin-bottom: 1rem !important;
+  }
+
+  .article-header-md {
+    position: relative;
+    line-height: 1.4em;
+    height: 1.4em;
+    overflow: hidden;
+  }
+
+  .article-header-md a {
+    font-weight: bold;
+    font-size: 1em;
+  }
+
+  .article-summary-md {
+    position: relative;
+    line-height: 1.4em;
+    height: 4.2em;
+    overflow: hidden;
+  }
+
+  .el-col-6 {
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+  }
+</style>

pages/user/_nickname.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-row>
+    <el-col :xs="24" :xl="24">
+      <div class="card card-profile">
+        <div v-if="user.userHomeBImgURL" class="card-header"
+             :style="{backgroundImage:'url('+user.userHomeBImgURL+')', backgroundSize:'percentage', backgroundPosition:'50%'}"></div>
+        <div v-else class="card-header"
+             :style="{backgroundImage:'url(https://rymcu.com/vertical/article/1574441651963.jpg)', backgroundSize:'cover', backgroundPosition:'50%'}"></div>
+        <div class="card-body text-center">
+          <img v-if="user.avatarUrl" class="card-profile-img" :src="user.avatarUrl">
+          <img v-else class="card-profile-img" src="https://rymcu.com/vertical/article/1578475481946.png">
+          <h3 class="mb-3">{{user.nickname}}</h3>
+          <p class="mb-4" v-html="user.signature"></p>
+        </div>
+      </div>
+    </el-col>
+    <el-col class="text-center" style="margin-bottom: 1rem;">
+      <el-row type="flex" justify="center">
+        <el-col>
+          <el-menu :default-active="activeTab" mode="horizontal" @select="handleToggleTab"
+                   style="padding-left: calc(50vw - 4.8rem);">
+            <el-menu-item index="0">文章</el-menu-item>
+            <el-menu-item index="1">作品集</el-menu-item>
+          </el-menu>
+        </el-col>
+      </el-row>
+    </el-col>
+    <el-col v-if="activeTab === '0'">
+      <article-list :articles="articles" @currentChange="currentChangeArticle"></article-list>
+    </el-col>
+    <el-col v-else>
+      <portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"></portfolio-list>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+  import ArticleList from "~/components/archive/list";
+  import PortfolioList from "~/components/common/portfolio/list";
+
+  export default {
+    name: "User",
+    components: {ArticleList, PortfolioList},
+    validate({params, store}) {
+      return params.nickname
+    },
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('user/fetchDetail', params)
+          .catch(err => error({statusCode: 404})),
+        store.dispatch('user/fetchArticleList', params),
+        store.dispatch('user/fetchPortfolioList', params)
+      ])
+    },
+    computed: {
+      ...mapState({
+        user: state => state.user.data,
+        articles: state => state.user.articles,
+        portfolios: state => state.user.portfolios
+      })
+    },
+    data() {
+      return {
+        activeTab: '0'
+      }
+    },
+    methods: {
+      currentChangeArticle(page) {
+        this.$store.dispatch('user/fetchArticleList', {page: page, nickname: this.$route.params.nickname})
+      },
+      currentChangePortfolio(page) {
+        this.$store.dispatch('user/fetchPortfolioList', {page: page, nickname: this.$route.params.nickname})
+      },
+      handleToggleTab(key) {
+        this.$set(this, 'activeTab', key);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  body {
+    overflow-x: hidden;
+  }
+
+  .card {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    position: relative;
+    margin-bottom: 1.5rem;
+    width: 100%;
+  }
+
+  .card {
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 40, 100, 0.12);
+    border-radius: 3px;
+  }
+
+  .card-profile .card-header {
+    height: 20rem;
+    background-size: cover;
+  }
+
+  .card-header:first-child {
+    border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
+  }
+
+  .card-header {
+    background: none;
+    padding: 0.5rem 1.5rem;
+    display: -ms-flexbox;
+    display: flex;
+    min-height: 3.5rem;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .card-header {
+    padding: 1.5rem 1.5rem;
+    margin-bottom: 0;
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+  }
+
+  .card-body {
+    -ms-flex: 1;
+    flex: 1;
+    margin: 0;
+    padding: 1.5rem 1.5rem;
+    position: relative;
+  }
+
+  .card-profile-img {
+    max-width: 6rem;
+    margin-top: -5rem;
+    margin-bottom: 1rem;
+    border: 3px solid #fff;
+    border-radius: 100%;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    background-color: #ffffff;
+  }
+
+  .card-img-top {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  .card-img-top {
+    width: 100%;
+    border-top-left-radius: calc(3px - 1px);
+    border-top-right-radius: calc(3px - 1px);
+  }
+
+  .mb-3, .my-3 {
+    margin-bottom: 0.75rem !important;
+  }
+
+  h3, .h3 {
+    font-size: 1.5rem;
+  }
+
+  .mb-4, .my-4 {
+    margin-bottom: 1rem !important;
+  }
+
+  .article-header-md {
+    position: relative;
+    line-height: 1.4em;
+    height: 1.4em;
+    overflow: hidden;
+  }
+
+  .article-header-md a {
+    font-weight: bold;
+    font-size: 1em;
+  }
+
+  .article-summary-md {
+    position: relative;
+    line-height: 1.4em;
+    height: 4.2em;
+    overflow: hidden;
+  }
+
+  .el-col-6 {
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+  }
+</style>

store/user.js

@@ -0,0 +1,84 @@
+/**
+ * @file 用户信息状态 / ES module
+ * @module store/category
+ * @author Ronger <https://github.com/ronger-x>
+ */
+
+export const USER_API_PATH = '/api/user'
+
+export const state = () => {
+  return {
+    fetching: false,
+    data: [],
+    articles: {
+      fetching: false,
+      articles: [],
+      pagination: {}
+    },
+    portfolios:  {
+      fetching: false,
+      portfolios: [],
+      pagination: {}
+    }
+  }
+}
+
+export const mutations = {
+  updateFetching(state, action) {
+    state.fetching = action
+  },
+  updateDetailData(state, action) {
+    state.data = action
+  },
+  updateArticleList(state, action) {
+    state.articles = action
+  },
+  updatePortfolioList(state, action) {
+    state.portfolios = action
+  }
+}
+
+export const actions = {
+  fetchDetail({ commit }, params) {
+    commit('updateFetching', true);
+    return this.$axios
+      .$get(`${USER_API_PATH}/${params.nickname}`)
+      .then(response => {
+        commit('updateDetailData', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
+  },
+  fetchArticleList({commit}, params) {
+    return this.$axios
+      .$get(`${USER_API_PATH}/${params.nickname}/articles`, {
+        params: {
+          page: params.page
+        }
+      })
+      .then(response => {
+        commit('updateArticleList', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
+  },
+  fetchPortfolioList({commit}, params) {
+    return this.$axios
+      .$get(`${USER_API_PATH}/${params.nickname}/portfolios`, {
+        params: {
+          page: params.page
+        }
+      })
+      .then(response => {
+        commit('updatePortfolioList', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
+  }
+}