Skip to content

B
beyond-clouds-front
Commit 35e7593f by yanju
Options

new blog api

parent ce0b1187
Showing with 867 additions and 673 deletions
action/utils/aria-dialog.js
...@@ -67,7 +67,6 @@ aria.Dialog.prototype.closeDialog = function() { ...@@ -67,7 +67,6 @@ aria.Dialog.prototype.closeDialog = function() {
this.removeListeners(); this.removeListeners();
if (this.focusAfterClosed) { if (this.focusAfterClosed) {
setTimeout(() => { setTimeout(() => {
this.focusAfterClosed.focus();
}); });
} }
}; };
......
components/common/message-box/src/main.vue
...@@ -161,9 +161,7 @@ ...@@ -161,9 +161,7 @@
} }
this.opened = false; this.opened = false;
// this.doAfterClose(); // this.doAfterClose();
setTimeout(() => {
if (this.action) this.callback(this.action, this);
});
}, },
handleWrapperClick() { handleWrapperClick() {
...@@ -179,16 +177,21 @@ ...@@ -179,16 +177,21 @@
}, },
handleAction(action) { handleAction(action) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) { if (action === 'confirm') {
return; setTimeout(() => {
} if (action) this.callback(action, this);
this.action = action; });
if (typeof this.beforeClose === 'function') {
this.close = this.getSafeClose();
this.beforeClose(action, this, this.close);
} else {
this.doClose(); this.doClose();
}else{
this.action = action;
if (typeof this.beforeClose === 'function') {
this.close = this.getSafeClose();
this.beforeClose(action, this, this.close);
} else {
this.doClose();
}
} }
}, },
validate() { validate() {
......
components/pc/answerCard.vue
<template> <template>
<div class="answer-card__wrap" :style="{width: this.cardType === '1' ? '938px' : '816px'}"> <div class="answer-card__wrap" :style="{width: this.cardType === '1' ? '938px' : '816px'}">
<div class="answer-card"> <div class="answer-card" @click="$router.push('/answer/detail/'+questionId)">
<div class="answer-card__left" v-if="!solved"> <div class="answer-card__left" v-if="!solved">
<div> <div>
<p>{{replyNumber}}</p> <p>{{replyNumber}}</p>
......
components/pc/comment/commentCard1.vue
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
<h6>{{info.userNick}}</h6> <h6>{{info.userNick}}</h6>
<p>{{floor}}楼</p> <p>{{floor}}楼</p>
</div> </div>
<p class="comment-box">{{info.comment}}</p> <p class="comment-box" v-if="type!=='question'">{{info.comment}}</p>
<p class="comment-box" v-if="type==='question'">{{info.reply}}</p>
<div class="footer"> <div class="footer">
<h6>{{dateConvert2}}</h6> <h6>{{dateConvert2}}</h6>
<p> <p>
...@@ -110,9 +111,13 @@ ...@@ -110,9 +111,13 @@
if(this.type === 'project'){ if(this.type === 'project'){
url = config.api.post.ProjectComment.release+this.id.toString()+'/comment' url = config.api.post.ProjectComment.release+this.id.toString()+'/comment'
} }
if(this.type === 'question'){
url = config.api.post.QuestionReplyComment.release+this.id.toString()+'/comment'
}
this.$axios.$post(url,{ this.$axios.$post(url,{
comment:this.commentContent, comment:this.commentContent,
parentId: this.info.commentId parentId: this.info.commentId||this.info.replyId
}).then((response)=>{ }).then((response)=>{
if(response.code===0){ if(response.code===0){
this.commentContent=''; this.commentContent='';
...@@ -152,6 +157,10 @@ ...@@ -152,6 +157,10 @@
params.parentId = this.info.commentId; params.parentId = this.info.commentId;
} }
if(this.type === 'question'){
url = config.api.get.ProjectComment.list+this.id.toString()+'/comments';
params.replyId = this.info.replyId ;
}
this.$axios.$get(url,{ this.$axios.$get(url,{
params params
}).then((response)=>{ }).then((response)=>{
...@@ -165,7 +174,7 @@ ...@@ -165,7 +174,7 @@
if(!this.$store.state.auth.token){ if(!this.$store.state.auth.token){
this.$message({ this.$message({
type:'warning', type:'warning',
message:'请在登录后点赞!' message:'请在登录后操作!'
}); });
return false; return false;
} }
......
components/pc/comment/commentCard2.vue
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
<h6>{{info.userNick}}</h6> <h6>{{info.userNick}}</h6>
<p>{{floor}}楼</p> <p>{{floor}}楼</p>
</div> </div>
<p class="comment-box">{{info.comment}}</p> <p class="comment-box" v-if="type!=='question'">{{info.comment}}</p>
<p class="comment-box" v-if="type==='question'">{{info.reply}}</p>
<div class="footer"> <div class="footer">
<h6>{{dateConvert2}}</h6> <h6>{{dateConvert2}}</h6>
<p> <p>
...@@ -105,6 +106,9 @@ ...@@ -105,6 +106,9 @@
if(this.type === 'project'){ if(this.type === 'project'){
url = config.api.post.ProjectComment.release+this.id.toString()+'/comment' url = config.api.post.ProjectComment.release+this.id.toString()+'/comment'
} }
if(this.type === 'question'){
url = config.api.post.QuestionReplyComment.release+this.id.toString()+'/comment'
}
this.$axios.$post(url,{ this.$axios.$post(url,{
comment:this.commentContent, comment:this.commentContent,
parentId: this.info.commentId parentId: this.info.commentId
...@@ -147,6 +151,10 @@ ...@@ -147,6 +151,10 @@
params.parentId = this.info.commentId; params.parentId = this.info.commentId;
} }
if(this.type === 'question'){
url = config.api.get.ProjectComment.list+this.id.toString()+'/comments';
params.replyId = this.info.replyId ;
}
this.$axios.$get(url,{ this.$axios.$get(url,{
params params
}).then((response)=>{ }).then((response)=>{
...@@ -160,7 +168,7 @@ ...@@ -160,7 +168,7 @@
if(!this.$store.state.auth.token){ if(!this.$store.state.auth.token){
this.$message({ this.$message({
type:'warning', type:'warning',
message:'请在登录后点赞!' message:'请在登录后操作!'
}); });
return false; return false;
} }
......
components/pc/comment/commentCard3.vue
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
<h6>{{info.userNick}}</h6> <h6>{{info.userNick}}</h6>
<p>{{floor}}楼</p> <p>{{floor}}楼</p>
</div> </div>
<p class="comment-box">{{info.comment}}</p> <p class="comment-box" v-if="type!=='question'">{{info.comment}}</p>
<p class="comment-box" v-if="type==='question'">{{info.reply}}</p>
<div class="footer"> <div class="footer">
<h6>{{dateConvert2}}</h6> <h6>{{dateConvert2}}</h6>
<p> <p>
...@@ -71,7 +72,7 @@ ...@@ -71,7 +72,7 @@
if(!this.$store.state.auth.token){ if(!this.$store.state.auth.token){
this.$message({ this.$message({
type:'warning', type:'warning',
message:'请在登录后点赞!' message:'请在登录后操作!'
}); });
return false; return false;
} }
......
components/pc/comment/commentCon.vue
...@@ -3,11 +3,13 @@ ...@@ -3,11 +3,13 @@
<div class="article-comment"> <div class="article-comment">
<textarea v-model="commentContent" name="" id="" cols="30" rows="10" class="release-area"></textarea> <textarea v-model="commentContent" name="" id="" cols="30" rows="10" class="release-area"></textarea>
<div class="button-box"> <div class="button-box">
<p @click="dataPostComment">评论</p> <p @click="dataPostComment" v-if="type!=='question'">评论</p>
<p @click="dataPostComment" v-if="type=='question'">回答</p>
</div> </div>
<div class="comments-header"> <div class="comments-header">
<p class="left"> <p class="left">
<span>全部评论</span> <span v-if="type!=='question'">全部评论</span>
<span v-if="type=='question'">全部回答</span>
<span>9</span> <span>9</span>
</p> </p>
<div class="right"> <div class="right">
...@@ -17,7 +19,7 @@ ...@@ -17,7 +19,7 @@
</div> </div>
</div> </div>
</div> </div>
<card @listenCommentReget1="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId" :info="val"></card> <card @listenCommentReget1="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId||val.questionId" :info="val"></card>
</div> </div>
</template> </template>
...@@ -65,36 +67,43 @@ ...@@ -65,36 +67,43 @@
if(!this.commentContent){ if(!this.commentContent){
this.$message({ this.$message({
type:'warning', type:'warning',
message:'请输入评论内容!' message:'请输入内容!'
}); });
return false; return false;
} }
let url; let url;
let postData={
}
if(this.type === 'blog'){ if(this.type === 'blog'){
url = config.api.post.BlogComment.release+this.id.toString()+'/comment' url = config.api.post.BlogComment.release+this.id.toString()+'/comment'
postData.comment = this.commentContent;
} }
if(this.type === 'project'){ if(this.type === 'project'){
url = config.api.post.ProjectComment.release+this.id.toString()+'/comment' url = config.api.post.ProjectComment.release+this.id.toString()+'/comment';
postData.comment = this.commentContent;
} }
this.$axios.$post(url,{
comment:this.commentContent if(this.type === 'question'){
}).then((response)=>{ url = config.api.post.QuestionReply.release+this.id.toString()+'/reply';
postData.reply = this.commentContent;
}
this.$axios.$post(url,postData
).then((response)=>{
if(response.code===0){ if(response.code===0){
this.commentContent=''; this.commentContent='';
this.dataGetComment(); this.dataGetComment();
this.$message({ this.$message({
type:'success', type:'success',
message:'评论发表成功!' message:'发表成功!'
}) })
}else{ }else{
this.$message({ this.$message({
type:'warning', type:'warning',
message:'评论发表失败!' message:'发表失败!'
}) })
} }
}) })
}, },
...@@ -109,6 +118,10 @@ ...@@ -109,6 +118,10 @@
if(this.type === 'project'){ if(this.type === 'project'){
url = config.api.get.ProjectComment.list+this.id.toString()+'/comments' url = config.api.get.ProjectComment.list+this.id.toString()+'/comments'
} }
if(this.type === 'question'){
url = config.api.get.QuestionReply.list+this.id.toString()+'/replies'
}
this.$axios.$get(url,{ this.$axios.$get(url,{
params:{ params:{
page:1, page:1,
......
components/pc/pageHeader.vue
...@@ -101,6 +101,7 @@ ...@@ -101,6 +101,7 @@
<li> <li>
<nuxt-link tag="span" to="/personal-center/account">账号资料</nuxt-link> <nuxt-link tag="span" to="/personal-center/account">账号资料</nuxt-link>
</li> </li>
<li @click="consoleF()">打印token</li>
<li @click="handleLogout">安全退出</li> <li @click="handleLogout">安全退出</li>
</ul> </ul>
</transition> </transition>
...@@ -166,15 +167,24 @@ ...@@ -166,15 +167,24 @@
methods:{ methods:{
handleLogout() { consoleF(){
// 删除cookie console.log(this.$store.state.auth.token);
Cookie.remove(config.default_data.KEY_COOKIE_TOKEN) },
// 移除登录信息 handleLogout() {
this.$store.commit('auth/logout') this.$alert('确认注销登录？', '', {
confirmButtonText: '确定',
callback: action => {
// 删除cookie
Cookie.remove(config.default_data.KEY_COOKIE_TOKEN)
// 移除登录信息
this.$store.commit('auth/logout')
// 移除用户信息
this.$store.commit('userProfile/removeUser')
this.routeToHome();
}
});
// 移除用户信息
this.$store.commit('userProfile/removeUser')
}, },
changeStateHideBox(...arg){ changeStateHideBox(...arg){
if(arg.indexOf(1)===0){ if(arg.indexOf(1)===0){
...@@ -220,7 +230,7 @@ ...@@ -220,7 +230,7 @@
}, },
routeToHome(){ routeToHome(){
this.$router.push('/home'); this.$router.push('/');
}, },
getUserInfo(){ getUserInfo(){
......
components/pc/projectCard.vue
...@@ -60,9 +60,13 @@ ...@@ -60,9 +60,13 @@
<div class="deleteButton" @click="dataDeleteItem(cardId)"> <div class="deleteButton" @click="dataDeleteItem(cardId)">
<yun-icon name="close1" size="12px" pb="3px"></yun-icon> <yun-icon name="close1" size="12px" pb="3px"></yun-icon>
</div> </div>
<div class="editButton"> <nuxt-link v-if="cardType===2" :to="{path:'/blog/release',query:{id:cardId}}" tag="div" class="editButton">
<yun-icon name="project" size="12px"></yun-icon> <yun-icon name="project" size="12px"></yun-icon>
</div> </nuxt-link>
<nuxt-link v-if="cardType===1" :to="{path:'/project/release',query:{id:cardId}}" tag="div" class="editButton">
<yun-icon name="project" size="12px"></yun-icon>
</nuxt-link>
</div> </div>
</div> </div>
</div> </div>
......
pages/answer/detail/_id.vue 0 → 100644
<template>
<div class="detail-container">
<div class="detail-container__left">
<div class="article-container">
<div class="article__header">
<div class="header-info">
<p class="title">{{articleDetail.questionTitle}}<span v-if="articleDetail.solved" class="solved">已解决</span><span v-if="!articleDetail.solved" class="unsolved">待采纳</span></p>
<div class="infos">
<div class="info-left">
<div class="icon-box">
<p class="icon">
<yun-icon name="hot" size="12px" color="#fff"></yun-icon>
</p>
<p class="icon">
<yun-icon name="like2" size="12px" color="#fff"></yun-icon>
</p>
</div>
<div class="label-box">
<p v-for="(val,index) in articleDetail.tags" :key="val.tagId">{val.tagName}}</p>
</div>
</div>
<div class="info-right">
<p class="left">
{{articleDetail.userNick}}<span>·</span>{{dataConvert2(articleDetail.createTime)}}
</p>
<div class="right">
<div class="icon-box">
<yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>4</span>
</div>
<div class="icon-box">
<yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>4</span>
</div>
<div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="article__introduce">{{articleDetail.questionAbstract}}</p>
<div class="article__content" v-html="articleDetail.questionDetail">
</div>
<div class="article__like">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">122</p>
</div>
<div class="article__footer">
<p class="link" v-if="false">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p>
<p class="report">举报</p>
<div class="project" v-if="false">
<p>
<yun-icon name="home" size="12px" style="margin-right: 5px"></yun-icon>项目首页
</p>
<p>
<yun-icon name="project" size="12px" style="margin-right: 5px"></yun-icon>项目文档
</p>
<p>
<yun-icon name="download" size="12px" style="margin-right: 5px"></yun-icon>项目下载
</p>
</div>
</div>
</div>
<comment-con :id="articleDetail.questionId" type="question"></comment-con>
</div>
<div class="detail-container__right">
<user-card :userId="articleDetail.userId"></user-card>
<card-container style="margin-top:16px" title="相关推荐" label="换一换" more="更多">
</card-container>
</div>
<div class="article-option">
<div class="option-item">
<yun-icon name="star" class="star"></yun-icon>
</div>
<div class="option-item">
<yun-icon name="like1" class="like"></yun-icon>
</div>
<div class="option-item">
<yun-icon name="comment" class="comment"></yun-icon>
</div>
<div class="share-word">分享</div>
<div class="option-item">
<embed src="../../../assets/svg/weibo.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="option-item">
<embed src="../../../assets/svg/wechat.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
<div class="option-item">
<embed src="../../../assets/svg/qq.svg" width="18" height="21"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</div>
</div>
</div>
</template>
<script>
import UserCard from '../../../components/pc/userCard';
import SocialContactCard from '../../../components/pc/socialContactCard';
import CardContainer from '../../../components/pc/cardContainer';
import CommentCon from '../../../components/pc/comment/commentCon';
import config from '../../../action/config'
import {dateConvert} from "../../../action/utils/dataConvert";
import hljs from 'highlight.js'
export default {
async asyncData ({ $axios ,params}) {
console.log(params);
let articleDetail = await $axios.$get(config.api.get.Question.detail+params.id);
console.log(articleDetail);
return {articleDetail:articleDetail.data||{}}
},
data(){
return{
commentContent:'',
commentList:[],
}
},
created(){
console.log(this.articleDetail)
},
mounted(){
this.highlightCode();
},
methods:{
dataConvert2(time){
return dateConvert(time)
},
highlightCode () {
if(process.browser){
const preEl = document.querySelectorAll('pre');
preEl.forEach((el) => {
hljs.highlightBlock(el)
})
}
}
},
components:{
UserCard,SocialContactCard,CardContainer,CommentCon
},
}
</script>
<style lang="scss" >
.detail-container{
width: $pageWidth;
margin:16*$length auto;
@extend %flex-row-spb;
align-items: flex-start;
.detail-container__left{
.article-container{
width:938*$length;
padding:35*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
.article__header{
@extend %flex-row-spb;
.header-info{
width:100%;
@extend %flex-column-spb;
align-items:flex-start;
.title{
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
.unsolved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#f4f4f5;
border-color: 1px solid
#e9e9eb;
color:
#909399;
border-radius: 4*$length;
}
}
.infos{
margin-top: 13*$length;
@extend %flex-row-spb;
width:100%;
.info-left{
@extend %flex-row-spb;
> .icon-box{
margin-right:15*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> .icon{
margin-right:10*$length;
width:20*$length;
height:20*$length;
border-radius:2*$length;
@extend %flex-column-center;
background-color: #FF7474;
}
}
> .label-box{
margin-left:5*$length;
@extend %flex-row-spb;
justify-content: flex-start;
> p{
margin-right:10*$length;
padding:2*$length 8*$length;
background-color: #F4F8FA;
@include fontStyle(12,16,500,#999,center);
@extend %animate-transition;
@extend %cursorPointer;
&:hover{
background-color:rgba(0,170,230,.2);
color:rgba(0,170,230,1);
}
}
}
}
.info-right{
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#999,left);
> span{
margin: 0 3*$length;
}
}
.right{
margin-left: 38*$length;
@extend %flex-row-spb;
justify-content: flex-start;
.icon-box{
@extend %inlineBlockV;
margin-right: 17*$length;
> span{
@include fontStyle(14,19,500,#ccc,left);
margin-left:5*$length;
vertical-align: top;
}
}
}
}
}
}
}
.article__introduce{
@include fontStyle(14,24,500,#666,left);
height:auto;
box-sizing: border-box;
padding:14*$length 14*$length;
margin-top:32*$length;
background-color: #F4F8FA;
border-radius: 4*$length;
}
.article__content{
@extend %markdown;
padding:30*$length 0;
word-wrap: break-word;
overflow: hidden;
color:#333;
font-size: 14*$font-size;
line-height:24*$length;
letter-spacing: 2*$length;
*{
word-wrap: break-word;
width:100%;
overflow: auto;
color:#333;
font-size: 14*$font-size;
line-height:24*$length;
letter-spacing: 2*$length;
font-weight: 400;
}
b, strong{
font-weight: bold;
}
li,ul,ol{
list-style: disc inside;
}
ul,ol{
padding-left:40*$length;
line-height: 1.75;
font-weight: 400;
font-size: 15px;
}
h1,h2,h3,h4,h5,h6{
color:#333;
line-height: 1.5;
margin-top: 35px;
margin-bottom: 10px;
}
h1{
padding-bottom: 12px;
font-size: 26px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h2{
padding-bottom: 12px;
font-size: 24px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h3{
padding-bottom: 12px;
font-size: 22px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
h4{
padding-bottom: 18px;
font-size: 22px;
line-height: 1.75;
font-weight: 400;
border-bottom: 1px solid #ececec;
}
a{
color:#00AAE6;
}
p{
font-size: 15*$length;
line-height: 1.75;
font-weight: 400;
margin:22*$length 0;
color:#333;
}
li{
font-size: 15*$length;
line-height: 1.75;
font-weight: 400;
margin:11*$length 0;
color:#333;
}
code{
width:100%;
background-color: #f1f1f1;
color:#000;
border-radius: 3*$length;
padding:3*$length 5*$length;
margin:22*$length 0;
}
pre{
line-height: 1.5;
padding: 15px;
background-color: #f1f1f1;
border-radius: 5px;
}
blockquote{
display: block;
border-left: 8*$length solid #d0e5f2;
padding: 5*$length 10*$length;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
margin:22*$length 0;
}
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
font-size: 14*$font-size;
margin:22*$length 0;
& tbody{
& tr{
}
}
}
img,
audio,
video{
max-width: 100%;
height: auto;
}
td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3*$length 5*$length;
}
}
.article__like{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
font-size: 62*$length;
color:#EFEFEF;
padding-bottom: 16*$length;
@extend %animate-transition;
}
.heart{
position: absolute;
font-size: 18*$length;
color:#CCCCCC;
left:24*$length;
top:10*$length;
@extend %animate-transition;
}
.num{
position: absolute;
@include fontStyle(12,19,500,#999,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
}
}
.article__footer{
height:34*$length;
width:100%;
position:relative;
@extend %flex-row-spb;
.link{
@include fontStyle(12,34,500,#666,left);
a{
&:hover{
color:#00AAE6
}
}
}
.report{
@extend %cursorPointer;
@include fontStyle(12,34,500,#999,left);
&:hover{
color:#00AAE6
}
}
.project{
position:absolute;
left:0;
right:0;
width:332*$length;
margin:0 auto;
@extend %flex-row-spb;
p{
width: 100*$length;
height:34*$length;
border-radius: 4*$length;
background-color: #00AAE6;
@extend %cursorPointer;
@extend %animate-transition;
@include fontStyle(14,34,500,#fff,center);
&:hover{
filter:brightness(1.1);
}
}
}
}
}
.article-comment{
width:938*$length;
padding:18*$length 24*$length;
box-sizing: border-box;
background-color: #fff;
border-radius: 4*$length;
overflow: hidden;
margin-top: 16*$length;
.release-area{
width:890*$length;
padding:14*$length 16*$length;
background-color: #F4F8FA;
border:1px solid #EFEFEF;
border-radius:4*$length;
@include fontStyle(12,22,500,#666666,left);
height:66*$length;
}
.button-box{
height:34*$length;
@extend %flex-row-spb;
justify-content: flex-end;
margin-top: 16*$length;
p{
width:100*$length;
background-color: #00AAE6;
border-radius: 4*$length;
@include fontStyle(12,34,500,#fff,center);
@extend %cursorPointer;
@extend %animate-transition;
&:hover{
filter: brightness(110%);
}
}
}
.comments-header{
padding-top: 16*$length;
margin-top: 24*$length;
border-top: 1px solid #EFEFEF;
@extend %flex-row-spb;
.left{
@include fontStyle(12,16,500,#A7A7A7,left);
span{
margin-right: 8*$length;
}
}
.right{
@extend %flex-row-spb;
p{
@include fontStyle(12,16,500,#A7A7A7,left);
margin-left:20*$length;
@extend %cursorPointer;
&:hover{
color:#000;
}
}
}
}
}
}
.detail-container__right{
width:302*$length;
}
.article-option{
position:fixed;
top:50%;
left:calc((100% - 1256px)/2 - 56px);
height:356*$length;
width:40*$length;
margin-top:-178*$length;
@extend %flex-column-spb;
.option-item{
width:40*$length;
height:40*$length;
border-radius: 4*$length;
background-color: #fff;
@extend %cursorPointer;
@extend %flex-row-center;
i{
@extend %animate-transition;
color:#CCCCCC;
font-size: 12px;
}
&:hover{
.star{
color:#F8A06F
}
.like{
color:#FF7474
}
.comment{
color:#59CBF4
}
}
embed{
@extend %cursorPointer;
filter:grayscale(0%);
@extend %animate-transition;
&:hover{
filter:grayscale(0%);
}
}
.star{
&:hover{
color:#F8A06F
}
}
.like{
&:hover{
color:#FF7474
}
}
.comment{
&:hover{
color:#59CBF4
}
}
}
.share-word{
@include fontStyle(12,16,500,#B4B4B4,center)
}
}
}
</style>
pages/answer/index.vue
...@@ -10,13 +10,12 @@ ...@@ -10,13 +10,12 @@
<div class="answer-container__center"> <div class="answer-container__center">
<card-container <card-container
width="816px" width="816px"
height="1012px"
:title="labelTitle" :title="labelTitle"
> >
<answer-card card-type="2"></answer-card> <answer-card card-type="2" v-for="(val,index) in QuestionList" :info="val" :key="val.questionId"></answer-card>
</card-container> </card-container>
<div class="pagination"> <div class="pagination">
<pagination style="margin: 0 auto;" pages="13" v-on:listenPageChange="changePage"></pagination> <pagination style="margin: 0 auto;" pages="pages" v-on:listenPageChange="changePage"></pagination>
</div> </div>
</div> </div>
<div class="answer-container__right"> <div class="answer-container__right">
...@@ -67,6 +66,7 @@ import CardContainer from "../../components/pc/cardContainer"; ...@@ -67,6 +66,7 @@ import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard"; import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination"; import Pagination from "../../components/pc/pagination";
import AnswerCard from "../../components/pc/answerCard"; import AnswerCard from "../../components/pc/answerCard";
import config from "../../action/config";
export default { export default {
components: {AnswerCard, Pagination, ProjectCard, CardContainer, NavWrap}, components: {AnswerCard, Pagination, ProjectCard, CardContainer, NavWrap},
data(){ data(){
...@@ -92,7 +92,9 @@ export default { ...@@ -92,7 +92,9 @@ export default {
address: '/answer', address: '/answer',
id: '职场经验' id: '职场经验'
} }
] ],
pages:1,
QuestionList:[],
} }
}, },
created() { created() {
...@@ -115,10 +117,26 @@ export default { ...@@ -115,10 +117,26 @@ export default {
search(){ search(){
this.$router.push('/search/answer'); this.$router.push('/search/answer');
}, },
dataGetQuestionList(currentPage){
this.$axios.$get(config.api.get.Question.list,{
params:{
page:currentPage,
size:10,
}
}).then((response)=>{
this.QuestionList=response.data.dataList;
this.pages = response.data.totalPage;
})
},
changePage(currentPage){ changePage(currentPage){
//返回页数 请求新的数据 //返回页数 请求新的数据
this.dataGetQuestionList(currentPage)
} }
} }
} }
</script> </script>
......
pages/answer/release/index.vue
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
questionTitle:'', questionTitle:'',
lastSaveTime: new Date(), lastSaveTime: new Date(),
classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}], classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
contentHtml:'',
} }
}, },
methods: { methods: {
...@@ -249,8 +250,8 @@ ...@@ -249,8 +250,8 @@
let now = new Date(); let now = new Date();
if (now - this.lastSaveTime >= 2 * 1000) { if (now - this.lastSaveTime >= 2 * 1000) {
this.lastSaveTime = now; this.lastSaveTime = now;
this.projectDetail = render; this.content = value;
console.log('zdsava'); this.contentHtml = render;
} }
}, },
readScreen(boolean, str){ // 预览 readScreen(boolean, str){ // 预览
......
pages/blog/detail/_id.vue
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<p class="article__introduce">{{articleDetail.blogAbstract}}</p> <p class="article__introduce">{{articleDetail.blogAbstract}}</p>
<div class="article__content" v-html="articleDetail.content"> <div class="article__content" v-html="articleDetail.contentHtml">
</div> </div>
<div class="article__like"> <div class="article__like">
...@@ -213,14 +213,32 @@ ...@@ -213,14 +213,32 @@
@extend %flex-row-spb; @extend %flex-row-spb;
.header-info{ .header-info{
width:100%; width:100%;
height:60*$length;
@extend %flex-column-spb; @extend %flex-column-spb;
align-items:flex-start; align-items:flex-start;
.title{ .title{
@include fontStyle(24,24,500,#222,left);
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
} }
.infos{ .infos{
margin-top: 13*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
width:100%; width:100%;
.info-left{ .info-left{
......
pages/blog/release/index.vue deleted 100644 → 0
<template>
<div class="blog-release-container">
<div class="blog-release-container__l">
<card-container
title="已发布的博客"
width="302px"
height="400px"
>
<div class="blog-release_List" v-for="val in blogList" :key="val.blogId" :info="val">
<div style="width: 60%"><p @click="toDetail">{{val.blogTitle}}</p></div>
<div class="blog-release_List_r" @click="toDetail" >{{val.category}}</div>
</div>
</card-container>
<card-container
title="博客草稿箱"
width="302px"
height="400px"
style="margin-top: 16px"
></card-container>
</div>
<div class="blog-release-container__r">
<card-container
title="发布博客"
width="938px"
height="912px"
>
<div class="blog-release">
<div class="blog-release__header">
<div class="header-content">
<span>*</span>
<input type="text" placeholder="请输入文章标题" v-model="blogTitle" ref="blogTitle">
</div>
<div class="header-content">
<div class="select__wrap">
<span>*</span>
<select-card selectType="2" :class-list="classList" @handleClass="handleBlogClass" ref="blogClass" placeholder="请选择文章分类" ></select-card>
</div>
<input type="text" placeholder="相关链接" style="width: 461px;" v-model="originLink" ref="originLink">
</div>
<div class="header-content">
<span>*</span>
<input type="text" placeholder="请用一句话介绍该文章" v-model="blogAbstract" ref="blogAbstract">
</div>
</div>
<div class="blog-release__content">
<span>*</span>
<div class="editor-container">
<mavon-editor
ref="content"
:toolbars="markdownOption"
class="editor"
placeholder="博客正文...."
:style="{zIndex: zIndex}"
@imgAdd="imgAdd"
@imgDel="imgDel"
@save="save"
@change="intervalSave"
@fullScreen="readScreen"
></mavon-editor>
</div>
</div>
<div class="blog-release__select__wrap">
<div class="select-content">
<span>*</span>
<select-card selectType="1" @handleTag="handleTagList" ref="tagIds"></select-card>
</div>
</div>
<div class="choose-container">
<div class="input-box__wrap">
<span>*</span>
<div class="input-box">
<input type="radio" id="公开" value="1" v-model="way" name="way">
<label for="公开">公开</label>
</div>
<div class="input-box">
<input type="radio" id="私密" value="0" v-model="way" name="way">
<label for="私密">私密</label>
</div>
</div>
<div class="input-box__wrap">
<span>*</span>
<div class="input-box">
<input type="radio" id="开启评论" value="true" v-model="allowComment" name="comment">
<label for="开启评论">开启评论</label>
</div>
<div class="input-box">
<input type="radio" id="禁止评论" value="false" v-model="allowComment" name="comment">
<label for="禁止评论">禁止评论</label>
</div>
</div>
<div class="input-box__wrap">
<span>*</span>
<div class="input-box">
<input type="radio" id="可以转载" value="true" v-model="allowForward" name="reprint">
<label for="可以转载">可以转载</label>
</div>
<div class="input-box">
<input type="radio" id="禁止转载" value="false" v-model="allowForward" name="reprint">
<label for="禁止转载">禁止转载</label>
</div>
</div>
</div>
<div class="blog-release__footer">
<p class="footer__left">上传封面
<img :src="this.cover" alt="">
<input type="file" @change="(e)=>changeToUploadCover(e)" placeholder="上传项目封面图" >
</p>
<div class="footer__right">
<p>已自动存为草稿</p>
<button class="preview" @click="readScreen">预览</button>
<button class="submit" v-on:click="dataPost">提交</button>
</div>
</div>
</div>
</card-container>
</div>
</div>
</template>
<script>
import CardContainer from "../../../components/pc/cardContainer";
import SelectCard from "../../../components/pc/select/selectCard";
import config from "../../../action/config";
export default {
async asyncData ({ $axios }) {
const blogList = await $axios.$get(config.api.get.Blog.myList,{
params:{
page:1,
size:12,
}
});
return {blogList:blogList.data.dataList}
},
components: {SelectCard, CardContainer},
data() {
return {
markdownOption: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: false, // 帮助
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
navigation: true, // 导航目录
alignleft: true, // 左对齐
subfield: true, // 单双栏模式
preview: true // 预览
},
zIndex: 100, // 控制全屏时
value: '',
comment: '',
reprint: '',
lastSaveTime: new Date(),
blogClass: '',
addFile:{},
userCover:'',
cover:'无',
originLink:'',
way:1,
allowComment:true,
allowForward:true,
blogAbstract:'',
blogTitle:'',
content:'',
tagIds:'',
i:0,
tagList:[],
img:"",
//classList: [{id:1,title:"web"}, {id:2,title:"java"},{id:3,title:"javascript"}]
classList:["web","java","javascript"]
}
},
methods: {
toDetail(){
this.$router.push('/detail')
},
// 获得下拉框得内容
handleBlogClass(value) {
this.blogClass = value.tag;
if(value.tag==="web"){
this.blogClass=1;
}else if(value.tag==="java"){
this.blogClass=2
}else if(value.tag==="javascript"){
this.blogClass=3
}
console.log(this.blogClass)
},
handleQuestionClass(value) {
this.class = value;
console.log(value);
},
// 获得得标签数组
handleTagList(tagList) {
this.tagIds=tagList;
console.log(this.tagIds);
console.log(this.tagIds.length);
for(this.i;this.i<this.tagIds.length;this.i++){
this.tagList+=this.tagIds[this.i].tag+" "
}
},
//上传图片
async changeToUploadCover(e) {
let formData = new window.FormData();
formData.append('file', e.target.files[0]);
formData.append('type', 1);
//console.log(formData);
const isLt5M = (e).target.files[0].size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('图片大小超过5M，请重新选择图片！');
return false
}
let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData);
console.log(imgResponse);
if (imgResponse.code === 0) {
this.cover = imgResponse.data;//图片地址
this.$message({
type: 'success',
message: '图片上传成功'
})
} else {
this.$message({
type: 'warning',
message: imgResponse.msg
})
}
},
//参数判断
dataPost() {
if(this.blogTitle===''){
this.$refs.blogTitle.focus();
this.$message({
message: "请输入文章标题",
type: 'warning'
});
return false;
}
if(this.blogClass===''){
this.$refs.blogClass.handleShow();
this.$refs.blogClass.$refs.select.focus();
this.$message({
message: "请选择文章分类",
type: 'warning'
});
return false;
}
if(this.blogAbstract===''){
this.$refs.blogAbstract.focus();
this.$message({
message: "请输入文章摘要（用一句话介绍该文章）",
type: 'warning'
});
return false;
}
if(this.content===''){
this.$refs.content.textAreaFocus();
this.$message({
message: "请输入博客正文",
type: 'warning'
});
return false;
}
if(this.tagIds===''){
//this.$refs.tagIds.focus();
this.$refs.tagIds.handleShow();
this.$refs.tagIds.$refs.tag.focus();
this.$message({
message: "请添加或创建您的博客标签",
type: 'warning'
});
return false;
}
if(this.originLink!==''){
if(this.originLink.slice(0, 12) === "https://www."||this.originLink==="无" ){
this.dataPostSaveUserInfo();
return false;
}else if(this.originLink.slice(0, 12) !== "https://www."){
this.$refs.originLink.focus();
this.$message({
message: "请输入开头为https://www.的有效相关链接",
type: 'warning'
});
return false;
}
}else{
this.originLink='无';
this.dataPostSaveUserInfo()
}
},
dataPostSaveUserInfo(){
this.$axios.$post(config.api.post.Blog.release,{
allowComment: this.allowComment,//评论权限
allowForward: this.allowForward,//转载权限
blogAbstract: this.blogAbstract,//摘要
content: this.content,//内容
blogTitle: this.blogTitle,//标题
categoryId: this.blogClass,//文章类型
cover: this.cover,//封面图
originLink: this.originLink,
tagIds: [
this.tagList//标签id
],
topicIds: [
"null"//话题id
],
viewPrivileges: this.way //1公开，0私有
}).then((response)=>{
if(response.code===0){
this.$message({
message:"提交成功",
type:'success'
});
/* setTimeout(() => {
this.$router.push('/personal-center/home/blog')
}, 500);*/
this.$router.push('/personal-center/home/blog')
}else{
this.$message({
message:response.msg,
type:'warning'
})
}
})
},
imgAdd(pos, file) {
// filename: 写在md中的文件名, File: File Object
// 第一步.将图片上传到服务器.
let formdata = new window.FormData();
formdata.append('file', file);
formdata.append('type', 4);
this.$axios.$post(config.api.post.Resource.file, formdata)
.then((res) => {
console.log(res);
let url = res.data;
this.$refs.content.$img2Url(pos, url);
this.$message({
type: 'success',
message: '上传图片成功'
})
})
.catch(err => {
this.$message({
type: 'warning',
message: '图片上传失败'
})
})
},
imgDel(pos) {
//删除图片，并不是修改就会触发，仅支持工具栏操作
// filename: 写在md中的文件名
console.log(pos);
},
save(value, render) { //保存文章内容
this.content = render;
},
intervalSave(value, render) {
// 自动保存
// render: value 经过markdown解析后的结果
let now = new Date();
if (now - this.lastSaveTime >= 2 * 1000) {
this.lastSaveTime = now;
this.content = render;
}
},
readScreen(boolean, str) { // 预览
this.zIndex = 8000
}
},
}
</script>
<style lang="scss" scoped>
input{
border:1*$length solid transparent;
@extend %animate-transition;
&:focus{
border:1*$length solid #00AAE6;
}
}
.blog-release-container {
width: $pageWidth;
margin: 24*$length auto 32*$length auto;
@extend %flex-row-spb;
align-items: start;
.blog-release-container__l {
.blog-release_List{
width: 266*$length;
@extend %flex-row-spb;
margin-top: 5px;
padding-left: 18*$length;
padding-right: 18*$length;
font-size: 13*$length;
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.blog-release_List_r{
color: #999999
}
:hover{
color: #00AAE6;
cursor:pointer
}
}
}
.blog-release-container__r {
.blog-release {
width: 748*$length;
margin: 0 auto;
.blog-release__header {
margin-top: 40*$length;
.header-content{
@extend %flex-row-spb;
margin-bottom: 32*$length;
> span {
color: #FF7474;
font-size: 6*$length;
}
> input {
width: 726*$length;
padding: 14*$length 16*$length;
box-sizing: border-box;
background-color: #F4F8FA;
@include border-radius(4*$length);
@include fontStyle(14, 46, 500, #666, left);
}
.select__wrap{
@extend %flex-row-spb;
align-items: start;
> span {
color: #FF7474;
font-size: 6*$length;
margin-right: 16*$length;
margin-top: 18*$length;
}
}
}
}
.blog-release__content {
@extend %flex-row-spb;
align-items: start;
> span {
display: inline-block;
margin-top: 18*$length;
color: #FF7474;
font-size: 6*$length;
}
.editor-container {
width: 723*$length;
height: 230*$length;
overflow: auto;
.editor {
min-height: 230*$length;
min-width: 723*$length;
}
}
}
.blog-release__select__wrap {
@extend %flex-row-spb;
align-items: start;
margin-top: 32*$length;
.select-content{
@extend %flex-row-spb;
align-items: start;
> span {
color: #FF7474;
font-size: 6*$length;
margin-right: 16*$length;
margin-top: 18*$length;
}
}
}
.choose-container{
@extend %flex-row-spb;
.input-box__wrap{
@extend %flex-row-spb;
> span {
margin-right: 16*$length;
color: #FF7474;
font-size: 6*$length;
}
.input-box {
margin-right: 40*$length;
line-height: 16*$length;
input[type="radio"] {
display: none;
}
label {
@include fontStyle(12, 16, 500, #999, left);
vertical-align: middle;
}
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
width: 12*$length;
height: 12*$length;
line-height: 12*$length;
margin-right: 8*$length;
margin-top: -2*$length;
border: 1*$length solid #999999;
box-sizing: border-box;
background-color: #fff;
@include border-radius(2*$length);
}
input[type="radio"]:checked + label::before {
display: inline-block;
width: 12*$length;
height: 12*$length;
line-height: 12*$length;
margin-right: 8*$length;
margin-top: -2*$length;
content: "\2713";
color: #fff;
background-color: #75D098;
border: none;
@include border-radius(2*$length);
}
}
}
}
}
.blog-release__footer {
height: 130*$length;
@extend %flex-row-spb;
align-items: flex-end;
margin-top: 35*$length;
.footer__left{
overflow: hidden;
width:196*$length;
background-color: #F4F8FA;
@extend %cursorPointer;
@include border-radius(4*$length);
@include fontStyle(12,130,500,#666,center);
& input{
float: left;
height:100%;
width:100%;
opacity: 0;
transform: translateY(-200%);
@extend %cursorPointer;
}
& img{
float: left;
height:100%;
width:100%;
transform: translateY(-100%);
object-fit: contain;
}
}
.footer__right{
@extend %flex-row-spb;
justify-content: flex-end;
> p {
margin-right: 32*$length;
@include fontStyle(12,16,500,#999,left);
}
> button {
@include fontStyle(14,19,500,#fff,center);
width: 100*$length;
height: 40*$length;
background-color: #00AAE6;
border: none;
@extend %cursorPointer;
@include border-radius(4*$length);
}
.preview{
color: #666;
background-color: #fff;
margin-right: 16*$length;
@extend %animate-transition;
&:hover{
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
}
</style>
pages/project/detail/_id.vue
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<p class="article__introduce">{{articleDetail.projectDescription}}</p> <p class="article__introduce">{{articleDetail.projectDescription}}</p>
<div class="article__content" v-html="articleDetail.projectDetail"> <div class="article__content" v-html="articleDetail.contentHtml">
</div> </div>
<div class="article__like"> <div class="article__like">
...@@ -71,7 +71,6 @@ ...@@ -71,7 +71,6 @@
</div> </div>
</div> </div>
<comment-con :id="articleDetail.projectId" type="project"></comment-con> <comment-con :id="articleDetail.projectId" type="project"></comment-con>
</div> </div>
<div class="detail-container__right"> <div class="detail-container__right">
<user-card :userId="articleDetail.userId"></user-card> <user-card :userId="articleDetail.userId"></user-card>
...@@ -212,15 +211,33 @@ ...@@ -212,15 +211,33 @@
.article__header{ .article__header{
@extend %flex-row-spb; @extend %flex-row-spb;
.header-info{ .header-info{
width:814*$length; width:100%;
height:60*$length;
@extend %flex-column-spb; @extend %flex-column-spb;
align-items:flex-start; align-items:flex-start;
.title{ .title{
@include fontStyle(24,24,500,#222,left);
@extend %flex-row-spb;
justify-content: flex-start;
@include fontStyle(24,28,500,#222,left);
height:auto;
.solved{
@include fontStyle(14,19,500,#222,left);
height:auto;
margin-left:20*$length;
padding:3*$length 5*$length;
background-color:
#e7faf0;
border: 1px solid
#d0f5e0;
color:
#13ce66;
border-radius: 4*$length;
}
} }
.infos{ .infos{
margin-top: 13*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
width:100%; width:100%;
.info-left{ .info-left{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment