✨ 文章分享功能

components/archive/list.vue

@@ -21,7 +21,7 @@
                 <el-avatar v-if="article.articleAuthorAvatarUrl" size="medium"
                            :src="article.articleAuthorAvatarUrl"></el-avatar>
                 <el-avatar v-else size="medium"
-                           src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+                           src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
               </el-col>
               <el-col :xs="20" :sm="20" :xl="20">
                 <div>

components/common/comment/main.vue

@@ -38,7 +38,7 @@
             <el-col :xs="3" :sm="1" :xl="1">
               <el-avatar v-show="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar>
               <el-avatar v-show="!comment.commenter.userAvatarURL"
-                         src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+                         src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
             </el-col>
             <el-col :xs="21" :sm="23" :xl="23">
               <el-col style="margin-left: 1rem;">

components/common/portfolio/list.vue

@@ -10,7 +10,7 @@
               </a>
               <a v-show="!portfolio.headImgUrl">
                 <el-image class="card-img-top" style="height: 10rem;"
-                          src="https://rymcu.com/vertical/article/1574441170152.jpg"></el-image>
+                          src="https://static.rymcu.com/article/1574441170152.jpg"></el-image>
               </a>
             </el-col>
             <el-col :span="18">

components/layouts/mobile/header.vue

@@ -53,13 +53,13 @@
           <el-link :underline="false" style="margin-left: 10px;">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
-              <el-avatar v-else size="small" src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+              <el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="user" style="align-items: center;">
                   <el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
                              :src="avatarURL"></el-avatar>
                   <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
-                             src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+                             src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
                   <el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
                 </el-dropdown-item>
                 <el-dropdown-item v-show="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>

components/layouts/pc/header.vue

@@ -55,13 +55,13 @@
             <el-link :underline="false" style="margin-left: 10px;">
               <el-dropdown trigger="click" @command="handleCommand">
                 <el-avatar v-if="avatarURL" size="small" :src="avatarURL"></el-avatar>
-                <el-avatar v-else size="small" src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+                <el-avatar v-else size="small" src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item command="user" style="align-items: center;">
                     <el-avatar class="mr-3" v-if="avatarURL" size="small" style="margin-top: 1rem;"
                                :src="avatarURL"></el-avatar>
                     <el-avatar class="mr-3" v-else size="small" style="margin-top: 1rem;"
-                               src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+                               src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
                     <el-link :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
                   </el-dropdown-item>
                   <el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>

components/layouts/pc/main.vue

@@ -4,18 +4,40 @@
       <header-view/>
     </el-header>
     <el-main>
-      <nuxt :nuxt-child-key="$route.name" />
+      <nuxt :nuxt-child-key="$route.name"/>
     </el-main>
     <el-footer>
       <footer-view/>
     </el-footer>
+    <div v-if="isPostArticle && isShow" style="position: fixed;bottom: 10vh;right: 3vw;">
+      <el-col v-if="isPostArticle" :xs="0" :xl="24">
+        <el-popover
+          placement="right"
+          width="20"
+          trigger="hover">
+          <el-col>
+            <el-image :src="gzh"></el-image>
+          </el-col>
+          <el-col class="text-center">
+            <span>扫码关注公众号</span>
+          </el-col>
+          <el-button slot="reference" circle><img style="width: 14px;height: 14px;" :src="wx" fit="cover"/>
+          </el-button>
+        </el-popover>
+      </el-col>
+      <el-col style="padding-top: 1rem;" :xs="0" :xl="24">
+        <el-button circle @click="backTop" icon="el-icon-caret-top"></el-button>
+      </el-col>
+    </div>
   </el-container>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import {mapState} from 'vuex';
   import HeaderView from "./header";
   import FooterView from "./footer";
+  import wx from "~/assets/weixin.png";
+  import gzh from "~/assets/rymcugzh.jpg";
 
   export default {
     name: "PcMain",
@@ -24,7 +46,37 @@
       FooterView
     },
     computed: {
-      ...mapState('global', [])
+      ...mapState('global', []),
+      isPostArticle() {
+        if (this.$route.name == 'article-post-article_id') {
+          return false;
+        }
+        return true;
+      }
+    },
+    data() {
+      return {
+        isShow: false,
+        wx: wx,
+        gzh: gzh
+      }
+    },
+    methods: {
+      backTop() {
+        window.scrollTo(0, 0);
+      },
+      handleScroll() {
+        let _ts = this;
+        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        if (scrollTop > 100) {
+          _ts.$set(_ts, 'isShow', true);
+        } else {
+          _ts.$set(_ts, 'isShow', false);
+        }
+      }
+    },
+    mounted() {
+      window.addEventListener('scroll', this.handleScroll, true);
     }
   }
 </script>

components/widget/share.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-input v-model="url">
+        <el-popover slot="append"
+                    placement="bottom"
+                    width="20"
+                    trigger="hover">
+          <el-col>
+            <qrcode :value="share(url)" :options="{ width: 20 }"></qrcode>
+          </el-col>
+          <el-col class="text-center">
+            <span>扫码分享至微信</span>
+          </el-col>
+          <el-button slot="reference">
+            <el-image style="width: 14px;height: 14px;" :src="wx" fit="cover"></el-image>
+          </el-button>
+        </el-popover>
+      </el-input>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import VueQrCode from '@chenfengyuan/vue-qrcode';
+  import wx from "~/assets/weixin.png";
+
+  Vue.component(VueQrCode.name, VueQrCode);
+  export default {
+    name: "Share",
+    props: {
+      url: {
+        type: String
+      }
+    },
+    data() {
+      return {
+        wx: wx
+      }
+    },
+    methods: {
+      share(url) {
+        let path = url + '?s=' + this.$store.state.oauth.nickname
+        return path;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package-lock.json

@@ -1053,6 +1053,14 @@
         }
       }
     },
+    "@chenfengyuan/vue-qrcode": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/@chenfengyuan/vue-qrcode/download/@chenfengyuan/vue-qrcode-1.0.2.tgz",
+      "integrity": "sha1-N9cZAuFm4a5YF2vWy5xAkFwbCUk=",
+      "requires": {
+        "qrcode": "^1.4.4"
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/@csstools/convert-colors/download/@csstools/convert-colors-1.4.0.tgz",
@@ -2766,6 +2774,25 @@
         "isarray": "^1.0.0"
       }
     },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/buffer-alloc/download/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha1-iQ3ZDZI6hz4I4Q5f1RpX5bfM4Ow=",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/buffer-alloc-unsafe/download/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha1-vX3CauKXLQ7aJTvgYdupkjScGfA="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/buffer-fill/download/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz",
@@ -3175,7 +3202,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-5.0.0.tgz?cache=0&sync_timestamp=1573942320052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-5.0.0.tgz",
       "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
-      "dev": true,
       "requires": {
         "string-width": "^3.1.0",
         "strip-ansi": "^5.2.0",
@@ -3185,20 +3211,17 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz",
-          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
+          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
-          "dev": true
         },
         "emoji-regex": {
           "version": "7.0.3",
           "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz",
-          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
+          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
-          "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-3.1.0.tgz",
           "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
-          "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -3209,7 +3232,6 @@
           "version": "5.2.0",
           "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-5.2.0.tgz",
           "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -3218,7 +3240,6 @@
           "version": "5.1.0",
           "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-5.1.0.tgz",
           "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
-          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.0",
             "string-width": "^3.0.0",
@@ -3951,8 +3972,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz?cache=0&sync_timestamp=1580010393599&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdecamelize%2Fdownload%2Fdecamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-      "dev": true
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -4077,6 +4097,11 @@
         }
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/dijkstrajs/download/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
     "dimport": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/dimport/download/dimport-1.0.0.tgz",
@@ -5232,8 +5257,7 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz",
-      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=",
+      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34="
-      "dev": true
     },
     "get-port-please": {
       "version": "1.0.0",
@@ -7857,6 +7881,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npm.taobao.org/pngjs/download/pngjs-3.4.0.tgz",
+      "integrity": "sha1-mcp9clll+2VYFOr2XzjxK72/VV8="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npm.taobao.org/posix-character-classes/download/posix-character-classes-0.1.1.tgz",
@@ -8949,6 +8978,36 @@
       "resolved": "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz",
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
+    "qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npm.taobao.org/qrcode/download/qrcode-1.4.4.tgz",
+      "integrity": "sha1-8MQ1aKfnUQpV78O4jZYC9xlj6oM=",
+      "requires": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npm.taobao.org/buffer/download/buffer-5.6.0.tgz",
+          "integrity": "sha1-oxdJ3H2B2E2wir+Te2uMQDP2J4Y=",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4"
+          }
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-2.0.5.tgz",
+          "integrity": "sha1-ivHkwSISRMxiRZ+vOJQNTmRKVyM="
+        }
+      }
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz",
@@ -9320,14 +9379,12 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
-      "dev": true
     },
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/require-main-filename/download/require-main-filename-2.0.0.tgz",
-      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs=",
+      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs="
-      "dev": true
     },
     "requires-port": {
       "version": "1.0.0",
@@ -9630,8 +9687,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-      "dev": true
     },
     "set-value": {
       "version": "2.0.1",
@@ -11477,8 +11533,7 @@
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
-      "dev": true
     },
     "which-typed-array": {
       "version": "1.1.2",
@@ -11696,7 +11751,6 @@
       "version": "13.3.2",
       "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-13.3.2.tgz",
       "integrity": "sha1-rX/+/sGqWVZayRX4Lcyzipwxot0=",
-      "dev": true,
       "requires": {
         "cliui": "^5.0.0",
         "find-up": "^3.0.0",
@@ -11713,20 +11767,17 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz",
-          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
+          "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
-          "dev": true
         },
         "emoji-regex": {
           "version": "7.0.3",
           "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz",
-          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
+          "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
-          "dev": true
         },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
           "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
-          "dev": true,
           "requires": {
             "locate-path": "^3.0.0"
           }
@@ -11735,7 +11786,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz",
           "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
-          "dev": true,
           "requires": {
             "p-locate": "^3.0.0",
             "path-exists": "^3.0.0"
@@ -11745,7 +11795,6 @@
           "version": "2.3.0",
           "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz",
           "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
-          "dev": true,
           "requires": {
             "p-try": "^2.0.0"
           }
@@ -11754,7 +11803,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz",
           "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
-          "dev": true,
           "requires": {
             "p-limit": "^2.0.0"
           }
@@ -11762,14 +11810,12 @@
         "p-try": {
           "version": "2.2.0",
           "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz",
-          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
+          "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY="
-          "dev": true
         },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-3.1.0.tgz",
           "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
-          "dev": true,
           "requires": {
             "emoji-regex": "^7.0.1",
             "is-fullwidth-code-point": "^2.0.0",
@@ -11780,7 +11826,6 @@
           "version": "5.2.0",
           "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz?cache=0&sync_timestamp=1573280518303&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-5.2.0.tgz",
           "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -11791,7 +11836,6 @@
       "version": "13.1.2",
       "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.2.tgz",
       "integrity": "sha1-Ew8JcC667vJlDVTObj5XBvek+zg=",
-      "dev": true,
       "requires": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"

package.json

@@ -9,6 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@chenfengyuan/vue-qrcode": "^1.0.2",
     "@nuxtjs/axios": "^5.12.0",
     "cookieparser": "^0.1.0",
     "cross-env": "^7.0.2",

pages/article/_article_id.vue

@@ -1,94 +1,76 @@
 <template>
   <el-row class="article__wrapper">
-    <el-col v-if="isShow">
+    <el-col>
-      <el-col>
+      <el-card>
-        <el-card>
+        <div class="card-body d-flex flex-column article">
-          <div class="card-body d-flex flex-column article">
+          <div class="article__item">
-            <div class="article__item">
+            <h1 class="list__title" v-html="article.articleTitle"></h1>
-              <h1 class="list__title" v-html="article.articleTitle"></h1>
+            <el-row class="pt-5">
-              <el-row class="pt-5">
+              <el-col :xs="3" :sm="1" :xl="1">
-                <el-col :xs="3" :sm="1" :xl="1">
+                <el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
-                  <el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
+                <el-avatar v-else src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-                  <el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+              </el-col>
-                </el-col>
+              <el-col :xs="9" :sm="11" :xl="11">
-                <el-col :xs="9" :sm="11" :xl="11">
+                <div style="margin-left: 1rem;">
-                  <div style="margin-left: 1rem;">
+                  <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
-                    <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
+                           class="text-default">{{ article.articleAuthorName }}
-                             class="text-default">{{ article.articleAuthorName }}
-                    </el-link>
-                    <small class="d-block text-muted">{{ article.timeAgo }}</small>
-                  </div>
-                </el-col>
-                <el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
-                  <el-dropdown trigger="click" @command="handleCommand">
-                    <el-link :underline="false"><i class="el-icon-more"></i></el-link>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
-                      <el-dropdown-item command="share">分享</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </el-col>
-                <el-col class="text-right">
-                  <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
                   </el-link>
+                  <small class="d-block text-muted">{{ article.timeAgo }}</small>
+                </div>
+              </el-col>
+              <el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
+                <el-dropdown trigger="click" @command="handleCommand">
+                  <el-link :underline="false"><i class="el-icon-more"></i></el-link>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
+                    <el-dropdown-item command="share">分享</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-col>
+              <el-col class="text-right">
+                <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
+                </el-link>
+              </el-col>
+              <el-col style="margin: 1rem 0;">
+                <el-tag
+                  style="margin-right: 0.5rem;"
+                  v-for="tag in article.tags"
+                  :key="tag.idTag"
+                  size="small"
+                  effect="plain">
+                  {{ tag.tagTitle }}
+                </el-tag>
+              </el-col>
+              <el-col v-if="article.portfolios && article.portfolios.length > 0">
+                <el-col>
+                  <h4>所属作品集</h4>
                 </el-col>
-                <el-col style="margin: 1rem 0;">
+                <el-col style="padding: 1rem">
-                  <el-tag
+                  <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
-                    style="margin-right: 0.5rem;"
+                    <el-col :xs="3" :sm="3" :xl="3">
-                    v-for="tag in article.tags"
+                      <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
-                    :key="tag.idTag"
+                    </el-col>
-                    size="small"
+                    <el-col :xs="20" :sm="20" :xl="20">
-                    effect="plain">
+                      <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
-                    {{ tag.tagTitle }}
+                               class="text-default">{{ portfolio.portfolioTitle }}
-                  </el-tag>
+                      </el-link>
-                </el-col>
-                <el-col v-if="article.portfolios && article.portfolios.length > 0">
-                  <el-col>
-                    <h4>所属作品集</h4>
-                  </el-col>
-                  <el-col style="padding: 1rem">
-                    <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
-                      <el-col :xs="3" :sm="3" :xl="3">
-                        <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
-                      </el-col>
-                      <el-col :xs="20" :sm="20" :xl="20">
-                        <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
-                                 class="text-default">{{ portfolio.portfolioTitle }}
-                        </el-link>
-                      </el-col>
                     </el-col>
                   </el-col>
                 </el-col>
-                <!--                <el-col v-if="isShare" style="margin-bottom: 1rem;">-->
+              </el-col>
-                <!--                  <el-input v-model="shareData.shareUrl">-->
+              <el-col v-if="isShare" style="margin-bottom: 1rem;">
-                <!--                    <el-popover slot="append"-->
+                <share-box :url="shareData.shareUrl"></share-box>
-                <!--                                placement="bottom"-->
+              </el-col>
-                <!--                                width="20"-->
+            </el-row>
-                <!--                                trigger="hover">-->
+            <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
-                <!--                      <el-col>-->
+                 style="overflow: hidden;"></div>
-                <!--                        <qrcode :value="shareWeiXin(shareData.shareUrl)" :options="{ width: 20 }"></qrcode>-->
-                <!--                      </el-col>-->
-                <!--                      <el-col class="text-center">-->
-                <!--                        <span>扫码分享至微信</span>-->
-                <!--                      </el-col>-->
-                <!--                      <el-button slot="reference"><el-image style="width: 14px;height: 14px;" :src="weiXin" fit="cover"></el-image></el-button>-->
-                <!--                    </el-popover>-->
-                <!--                  </el-input>-->
-                <!--                </el-col>-->
-              </el-row>
-              <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
-                   style="overflow: hidden;"></div>
-            </div>
           </div>
-        </el-card>
+        </div>
-      </el-col>
+      </el-card>
-      <el-col>
-        <comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
-        :post-id="routeArticleId"></comment-box>
-      </el-col>
     </el-col>
-    <el-col v-else>
+    <el-col>
-      <!--      <Component404></Component404>-->
+      <comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
+                   :post-id="routeArticleId"></comment-box>
     </el-col>
   </el-row>
 </template>
@@ -96,9 +78,13 @@
 <script>
   import Vue from 'vue';
   import {mapState} from 'vuex';
+  import ShareBox from '~/components/widget/share';
 
   export default {
     name: "ArticleDetail",
+    components: {
+      ShareBox
+    },
     validate({params, store}) {
       return params.article_id && !isNaN(Number(params.article_id))
     },
@@ -172,7 +158,6 @@
     },
     data() {
       return {
-        isShow: true,
         loading: false,
         isShare: false,
         shareData: {},
@@ -225,7 +210,7 @@
         Vue.VditorPreview.abcRender(previewElement);
         Vue.VditorPreview.mediaRender(previewElement);
         //VditorPreview.outlineRender(previewElement, outLineElement);
-        window.scrollTo(0,0);
+        window.scrollTo(0, 0);
       })
     }
 

pages/draft/_draft_id.vue

@@ -1,73 +1,68 @@
 <template>
   <el-row class="article__wrapper">
-    <el-col v-if="isShow">
+    <el-col>
-      <el-col>
+      <el-card>
-        <el-card>
+        <div class="card-body d-flex flex-column article">
-          <div class="card-body d-flex flex-column article">
+          <div class="article__item">
-            <div class="article__item">
+            <h1 class="list__title" v-html="article.articleTitle"></h1>
-              <h1 class="list__title" v-html="article.articleTitle"></h1>
+            <el-row class="pt-5">
-              <el-row class="pt-5">
+              <el-col :xs="3" :sm="1" :xl="1">
-                <el-col :xs="3" :sm="1" :xl="1">
+                <el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
-                  <el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
+                <el-avatar v-else src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
-                  <el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+              </el-col>
-                </el-col>
+              <el-col :xs="9" :sm="11" :xl="11">
-                <el-col :xs="9" :sm="11" :xl="11">
+                <div style="margin-left: 1rem;">
-                  <div style="margin-left: 1rem;">
+                  <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
-                    <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
+                           class="text-default">{{ article.articleAuthorName }}
-                             class="text-default">{{ article.articleAuthorName }}
-                    </el-link>
-                    <small class="d-block text-muted">{{ article.timeAgo }}</small>
-                  </div>
-                </el-col>
-                <el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
-                  <el-dropdown trigger="click" @command="handleCommand">
-                    <el-link :underline="false"><i class="el-icon-more"></i></el-link>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </el-col>
-                <el-col class="text-right">
-                  <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
                   </el-link>
+                  <small class="d-block text-muted">{{ article.timeAgo }}</small>
+                </div>
+              </el-col>
+              <el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
+                <el-dropdown trigger="click" @command="handleCommand">
+                  <el-link :underline="false"><i class="el-icon-more"></i></el-link>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-col>
+              <el-col class="text-right">
+                <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
+                </el-link>
+              </el-col>
+              <el-col style="margin: 1rem 0;">
+                <el-tag
+                  style="margin-right: 0.5rem;"
+                  v-for="tag in article.tags"
+                  :key="tag.idTag"
+                  size="small"
+                  effect="plain">
+                  {{ tag.tagTitle }}
+                </el-tag>
+              </el-col>
+              <el-col v-if="article.portfolios && article.portfolios.length > 0">
+                <el-col>
+                  <h4>所属作品集</h4>
                 </el-col>
-                <el-col style="margin: 1rem 0;">
+                <el-col style="padding: 1rem">
-                  <el-tag
+                  <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
-                    style="margin-right: 0.5rem;"
+                    <el-col :xs="3" :sm="3" :xl="3">
-                    v-for="tag in article.tags"
+                      <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
-                    :key="tag.idTag"
+                    </el-col>
-                    size="small"
+                    <el-col :xs="20" :sm="20" :xl="20">
-                    effect="plain">
+                      <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
-                    {{ tag.tagTitle }}
+                               class="text-default">{{ portfolio.portfolioTitle }}
-                  </el-tag>
+                      </el-link>
-                </el-col>
-                <el-col v-if="article.portfolios && article.portfolios.length > 0">
-                  <el-col>
-                    <h4>所属作品集</h4>
-                  </el-col>
-                  <el-col style="padding: 1rem">
-                    <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
-                      <el-col :xs="3" :sm="3" :xl="3">
-                        <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
-                      </el-col>
-                      <el-col :xs="20" :sm="20" :xl="20">
-                        <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
-                                 class="text-default">{{ portfolio.portfolioTitle }}
-                        </el-link>
-                      </el-col>
                     </el-col>
                   </el-col>
                 </el-col>
-              </el-row>
+              </el-col>
-              <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
+            </el-row>
-                   style="overflow: hidden;"></div>
+            <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
-            </div>
+                 style="overflow: hidden;"></div>
           </div>
-        </el-card>
+        </div>
-      </el-col>
+      </el-card>
-    </el-col>
-    <el-col v-else>
-      <!--      <Component404></Component404>-->
     </el-col>
   </el-row>
 </template>
@@ -111,7 +106,6 @@
     },
     data() {
       return {
-        isShow: true,
         loading: false
       }
     },

pages/user/_nickname.vue

@@ -5,10 +5,10 @@
         <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>
+             :style="{backgroundImage:'url(https://static.rymcu.com/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">
+          <img v-else class="card-profile-img" src="https://static.rymcu.com/article/1578475481946.png">
           <h3 class="mb-3">{{user.nickname}}</h3>
           <p class="mb-4" v-html="user.signature"></p>
         </div>