Commit c0eb0514 by yanju

解决合并冲突

parent 365af56e
<template>
<div class="blog-container">
<div class="blog-container__main">
<div class="blog-container__left">
<nav-wrap
width="106px"
:list="list"
></nav-wrap>
</div>
<div class="blog-container__center">
<card-container
width="816px"
height="1012px"
:title="labelTitle"
>
<blog-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></blog-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</div>
<div class="blog-container__right">
<div class="right__write-blog" @click="toRelease">写文章</div>
<card-container
title="热门博主"
label="换一换"
more="更多"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
<card-container
title="热门标签"
width="302px"
height="446px"
style="margin-top: 16px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import Pagination from "../../components/pc/pagination";
import config from '../../action/config';
import BlogCard from "../../components/pc/projectCard";
export default {
components: {Pagination, CardContainer, NavWrap,BlogCard},
data(){
return{
blogList:[],
currentPage:1,
pages:1,
list: [
{
label: '全部类型',
address: '/blog',
id: '全部类型'
},
{
label: '程序人生',
address: '/blog',
id: '程序人生'
},
{
label: '移动开发',
address: '/blog',
id: '移动开发'
},
{
label: '前端',
address: '/blog',
id: '前端'
},
{
label: '其他',
address: '/blog',
id: '其他'
}
]
}
},
created() {
this.$router.replace({
path: '/blog',
query: {
id: '全部类型'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id
}
},
methods: {
dataGetBlogList(currentPage){
this.$axios.$get(config.api.get.Blog.list,{
params:{
page:currentPage,
size:7,
}
}).then((response)=>{
this.blogList=response.data.dataList;
this.pages = response.data.totalPage;
})
},
toRelease(){
this.$router.push('/blog/release')
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetBlogList(currentPage)
}
}
}
</script>
<style lang="scss" scoped>
.blog-container{
> .blog-container__main{
width: $pageWidth;
margin: 0 auto;
padding-top: 16*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.blog-container__left{}
.blog-container__center{
.pagination{
margin: 32*$length;
}
}
.blog-container__right{
.right__write-blog{
width: 302*$length;
background-color: #fff;
@include fontStyle(14,56,500,#00AAE6,center);
@include border-radius(4*$length);
@extend %animate-transition;
@extend %cursorPointer;
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
</style>
<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);
<<<<<<< pages/blog/release/index.vue
formdata.append('type', 4);
=======
formdata.append('type', 5);
>>>>>>> pages/blog/release/index.vue
this.$axios.$post(config.api.post.Resource.file, formdata)
.then((res) => {
console.log(res);
let url = res.data;
this.$refs.editor.$img2Url(pos, url);
this.$message({
type: 'success',
message: '上传图片成功'
})
})
.catch(err => {
this.$message({
type: 'warning',
message: '图片上传失败'
})
})
},
imgDel(pos) {
//删除图片,并不是修改就会触发,仅支持工具栏操作
// filename: 写在md中的文件名
console.log(pos);
},
<<<<<<< pages/blog/release/index.vue
save(value, render) { //保存文章内容
this.content = render;
=======
save(value, render) { //保存文章内容
this.projectDetail = render;
console.log('save');
>>>>>>> pages/blog/release/index.vue
},
intervalSave(value, render) {
// 自动保存
// render: value 经过markdown解析后的结果
let now = new Date();
if (now - this.lastSaveTime >= 2 * 1000) {
this.lastSaveTime = now;
<<<<<<< pages/blog/release/index.vue
this.content = render;
=======
this.projectDetail = render;
console.log('zdsava');
>>>>>>> pages/blog/release/index.vue
}
},
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>
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