peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 文章分享功能

Browse Source
This commit is contained in:
x ronger 2020-08-02 23:55:08 +08:00
parent 933898be6c
commit 4a3d17d943
14 changed files with 322 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/rymcugzh.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/weixin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

2
components/archive/list.vue
View File

@ -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>

2
components/common/comment/main.vue
View File

@ -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;">

2
components/common/portfolio/list.vue
View File

@ -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">

4
components/layouts/mobile/header.vue
View File

@ -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>

4
components/layouts/pc/header.vue
View File

@ -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>

58
components/layouts/pc/main.vue
View File

@ -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>

53
components/widget/share.vue Normal file
View File

@ -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>

112
package-lock.json generated
View File

@ -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=",
"dev": true
"integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
},
"emoji-regex": {
"version": "7.0.3",
"resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz",
"integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
"dev": true
"integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
},
"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=",
"dev": true
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
},
"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=",
"dev": true
"integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34="
},
"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=",
"dev": true
"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
},
"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=",
"dev": true
"integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs="
},
"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=",
"dev": true
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"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=",
"dev": true
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
},
"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=",
"dev": true
"integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
},
"emoji-regex": {
"version": "7.0.3",
"resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz",
"integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY=",
"dev": true
"integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
},
"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=",
"dev": true
"integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY="
},
"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"

1
package.json
View File

@ -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",

153
pages/article/_article_id.vue
View File

@ -1,94 +1,76 @@
<template>
<el-row class="article__wrapper">
<el-col v-if="isShow">
<el-col>
<el-card>
<div class="card-body d-flex flex-column article">
<div class="article__item">
<h1 class="list__title" v-html="article.articleTitle"></h1>
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1">
<el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
<el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
</el-col>
<el-col :xs="9" :sm="11" :xl="11">
<div style="margin-left: 1rem;">
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
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-col>
<el-card>
<div class="card-body d-flex flex-column article">
<div class="article__item">
<h1 class="list__title" v-html="article.articleTitle"></h1>
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1">
<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-col>
<el-col :xs="9" :sm="11" :xl="11">
<div style="margin-left: 1rem;">
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
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>
</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-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="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 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 v-if="isShare" style="margin-bottom: 1rem;">-->
<!-- <el-input v-model="shareData.shareUrl">-->
<!-- <el-popover slot="append"-->
<!-- placement="bottom"-->
<!-- width="20"-->
<!-- trigger="hover">-->
<!-- <el-col>-->
<!-- <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>
</el-col>
<el-col v-if="isShare" style="margin-bottom: 1rem;">
<share-box :url="shareData.shareUrl"></share-box>
</el-col>
</el-row>
<div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
style="overflow: hidden;"></div>
</div>
</el-card>
</el-col>
<el-col>
<comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
:post-id="routeArticleId"></comment-box>
</el-col>
</div>
</el-card>
</el-col>
<el-col v-else>
<!-- <Component404></Component404>-->
<el-col>
<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);
})
}

120
pages/draft/_draft_id.vue
View File

@ -1,73 +1,68 @@
<template>
<el-row class="article__wrapper">
<el-col v-if="isShow">
<el-col>
<el-card>
<div class="card-body d-flex flex-column article">
<div class="article__item">
<h1 class="list__title" v-html="article.articleTitle"></h1>
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1">
<el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
<el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
</el-col>
<el-col :xs="9" :sm="11" :xl="11">
<div style="margin-left: 1rem;">
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
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-col>
<el-card>
<div class="card-body d-flex flex-column article">
<div class="article__item">
<h1 class="list__title" v-html="article.articleTitle"></h1>
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1">
<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-col>
<el-col :xs="9" :sm="11" :xl="11">
<div style="margin-left: 1rem;">
<el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
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>
</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-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="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 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-row>
<div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
style="overflow: hidden;"></div>
</div>
</el-col>
</el-row>
<div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
style="overflow: hidden;"></div>
</div>
</el-card>
</el-col>
</el-col>
<el-col v-else>
<!-- <Component404></Component404>-->
</div>
</el-card>
</el-col>
</el-row>
</template>
@ -111,7 +106,6 @@
},
data() {
return {
isShow: true,
loading: false
}
},

4
pages/user/_nickname.vue
View File

@ -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>