|
|
|
|
@ -1,4 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div v-if="!$common.isEmpty(article)">
|
|
|
|
|
<!-- 封面 -->
|
|
|
|
|
<div class="article-head my-animation-slide-top">
|
|
|
|
|
@ -145,9 +146,9 @@
|
|
|
|
|
版权声明：转载请注明文章出处
|
|
|
|
|
</div>
|
|
|
|
|
</blockquote>
|
|
|
|
|
<!-- 点赞 -->
|
|
|
|
|
<div class="myCenter" id="article-like">
|
|
|
|
|
<i class="el-icon-thumb article-like-icon" :class="{'article-like': article.likeCount}"></i>
|
|
|
|
|
<!-- 订阅 -->
|
|
|
|
|
<div class="myCenter" id="article-like" @click="subscribeLabel()">
|
|
|
|
|
<i class="el-icon-thumb article-like-icon" :class="{'article-like': subscribe}"></i>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 评论 -->
|
|
|
|
|
@ -185,6 +186,32 @@
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 微信 -->
|
|
|
|
|
<el-dialog title="密码"
|
|
|
|
|
:modal="false"
|
|
|
|
|
:visible.sync="showPasswordDialog"
|
|
|
|
|
width="25%"
|
|
|
|
|
:append-to-body="true"
|
|
|
|
|
destroy-on-close
|
|
|
|
|
center>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="password-content">{{tips}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin: 20px auto">
|
|
|
|
|
<el-input maxlength="30" v-model="password"></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;justify-content: center">
|
|
|
|
|
<proButton :info="'提交'"
|
|
|
|
|
@click.native="submitPassword()"
|
|
|
|
|
:before="$constant.before_color_2"
|
|
|
|
|
:after="$constant.after_color_2">
|
|
|
|
|
</proButton>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
@ -192,6 +219,7 @@
|
|
|
|
|
const comment = () => import( "./comment/comment");
|
|
|
|
|
const process = () => import( "./common/process");
|
|
|
|
|
const commentBox = () => import( "./comment/commentBox");
|
|
|
|
|
const proButton = () => import( "./common/proButton");
|
|
|
|
|
import MarkdownIt from 'markdown-it';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
@ -199,26 +227,91 @@
|
|
|
|
|
myFooter,
|
|
|
|
|
comment,
|
|
|
|
|
commentBox,
|
|
|
|
|
proButton,
|
|
|
|
|
process
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
id: this.$route.query.id,
|
|
|
|
|
subscribe: false,
|
|
|
|
|
article: {},
|
|
|
|
|
articleContentHtml: "",
|
|
|
|
|
treeHoleList: [],
|
|
|
|
|
weiYanDialogVisible: false,
|
|
|
|
|
newsTime: ""
|
|
|
|
|
newsTime: "",
|
|
|
|
|
showPasswordDialog: false,
|
|
|
|
|
password: "",
|
|
|
|
|
tips: ""
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getArticle();
|
|
|
|
|
if (!this.$common.isEmpty(this.id)) {
|
|
|
|
|
this.getArticle(localStorage.getItem("article_password_" + this.id));
|
|
|
|
|
|
|
|
|
|
if ("0" !== localStorage.getItem("showSubscribe")) {
|
|
|
|
|
this.$notify({
|
|
|
|
|
title: '文章订阅',
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '点击文章下方小手 - 订阅/取消订阅专栏（标签）',
|
|
|
|
|
duration: 0,
|
|
|
|
|
onClose: () => localStorage.setItem("showSubscribe", "0")
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// window.addEventListener("scroll", this.onScrollPage);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
subscribeLabel() {
|
|
|
|
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "请先登录！",
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$confirm('确认' + (this.subscribe ? '取消订阅' : '订阅') + '专栏【' + this.article.label.labelName + '】？' + (this.subscribe ? "" : "订阅专栏后，该专栏发布新文章将通过邮件通知订阅用户。"), this.subscribe ? "取消订阅" : "文章订阅", {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
center: true
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.$http.get(this.$constant.baseURL + "/user/subscribe", {
|
|
|
|
|
labelId: this.article.labelId,
|
|
|
|
|
flag: !this.subscribe
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
|
|
this.$store.commit("loadCurrentUser", res.data);
|
|
|
|
|
}
|
|
|
|
|
this.subscribe = !this.subscribe;
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: error.message,
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '已取消!'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
submitPassword() {
|
|
|
|
|
if (this.$common.isEmpty(this.password)) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "请先输入密码！",
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.getArticle(this.password);
|
|
|
|
|
},
|
|
|
|
|
deleteTreeHole(id) {
|
|
|
|
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
|
|
|
|
this.$message({
|
|
|
|
|
@ -334,8 +427,8 @@
|
|
|
|
|
let headings = $(".entry-content").find("h1, h2, h3, h4, h5, h6");
|
|
|
|
|
headings.attr('id', (i, id) => id || 'toc-' + i);
|
|
|
|
|
},
|
|
|
|
|
getArticle() {
|
|
|
|
|
this.$http.get(this.$constant.baseURL + "/article/getArticleById", {id: this.id, flag: true})
|
|
|
|
|
getArticle(password) {
|
|
|
|
|
this.$http.get(this.$constant.baseURL + "/article/getArticleById", {id: this.id, password: password})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
|
|
this.article = res.data;
|
|
|
|
|
@ -348,13 +441,31 @@
|
|
|
|
|
// todo 只有程序相关文章才显示toc
|
|
|
|
|
// this.getTocbot();
|
|
|
|
|
});
|
|
|
|
|
if (!this.$common.isEmpty(password)) {
|
|
|
|
|
localStorage.setItem("article_password_" + this.id, password);
|
|
|
|
|
}
|
|
|
|
|
this.showPasswordDialog = false;
|
|
|
|
|
if (!this.$common.isEmpty(this.$store.state.currentUser) && !this.$common.isEmpty(this.$store.state.currentUser.subscribe)) {
|
|
|
|
|
this.subscribe = JSON.parse(this.$store.state.currentUser.subscribe).includes(this.article.labelId);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
if ("密码错误" === error.message.substr(0, 4)) {
|
|
|
|
|
if (!this.$common.isEmpty(password)) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "密码错误，请重新输入！",
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.tips = error.message.substr(4);
|
|
|
|
|
this.showPasswordDialog = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: error.message,
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
highlight() {
|
|
|
|
|
@ -583,6 +694,12 @@
|
|
|
|
|
border-bottom: unset;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.password-content {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: var(--maxGreyFont);
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 700px) {
|
|
|
|
|
.article-info-container {
|
|
|
|
|
left: 20px;
|
|
|
|
|
|
haitao
1 year ago