Skip to content

B
beyond-clouds-front
Commit 8f5830c2 by xuebiao
Options

博客发布页面完善

parent 0ba564f5
Showing with 176 additions and 86 deletions
components/common/cropper/src/cropper.vue
......@@ -123,7 +123,7 @@
let that = this;
// this.addImg(this.img)
this.$refs.cropper.getCropData((e) => {
this.loading = true
this.loading = true;
let bytes = window.atob(e.split(',')[1]);
let array = [];
for(let i = 0;i<bytes.length;i++){
......
components/pc/select/selectCard.vue
......@@ -129,7 +129,6 @@ export default {
async handleSearch(){
this.isShow = true;
this.isShow2 = true;
console.log(111);
if (this.value.tag !== "") {
let tagSearch = await this.$axios.$get(config.api.get.Tag.search, {
params: {
......@@ -138,7 +137,7 @@ export default {
size: 12
}
});
console.log(tagSearch);
//console.log(tagSearch);
this.isSearch = true; // 用于 有无搜索结果
this.searchList = [];
if (tagSearch.data.dataList.length !== 0) {
......
pages/answer/release/index.vue
......@@ -22,13 +22,13 @@
<div class="answer-release">
<div class="answer-release__header">
<span>*</span>
<input type="text" placeholder="请一句话说明问题，并以问号结尾">
<input type="text" v-model="questionDetail" placeholder="请一句话说明问题，并以问号结尾">
</div>
<div class="answer-release__content">
<span>*</span>
<div class="editor-container">
<mavon-editor
v-model="value"
v-model="questionDetail"
:toolbars="markdownOption"
class="editor"
placeholder="问题详情...."
......@@ -46,7 +46,7 @@
<span>*</span>
<select-card selectType="1"></select-card>
</div>
<select-card selectType="2" :class-list="classList" placeholder="请选择问题分类"></select-card>
<select-card selectType="2" :class-list="classList" @handleClass="handleBlogClass" placeholder="请选择问题分类"></select-card>
</div>
<div class="answer-release__footer">
<p>已自动存为草稿</p>
......@@ -60,10 +60,10 @@
</template>
<script>
import CardContainer from "../../../components/pc/cardContainer";
import SelectCard from "../../../components/pc/select/selectCard";
export default {
import CardContainer from "../../../components/pc/cardContainer";
import SelectCard from "../../../components/pc/select/selectCard";
import config from "../../../action/config";
export default {
components: {SelectCard, CardContainer},
data() {
return {
......@@ -103,6 +103,38 @@ export default {
}
},
methods: {
handleBlogClass(value) {
this.blogClass = value;
if(value=="web"){
this.blogClass=1
}else if(value=="java"){
this.blogClass=2
}else if(value=="javascript"){
this.blogClass=3
}
console.log(this.blogClass);
},
postQuestion(){
this.$axios.$post(config.api.post.question.release,{
categoryId: this.blogClass,
questionAbstract: "摘要",//摘要
questionDetail: this.questionDetail,
questionTitle: this.questionTitle,
tagIds: [//标签id
"java"
],
topicIds: [//话题id
"话题id"
]
}).then((response)=>{
//处理response
})
},
imgAdd(pos, file) {
//添加图片，pos为位置
// 第一步.将图片上传到服务器.
......@@ -141,7 +173,7 @@ export default {
boolean = true;
}
}
}
}
</script>
<style lang="scss" scoped>
......
pages/blog/release/index.vue
......@@ -28,18 +28,18 @@
<div class="blog-release__header">
<div class="header-content">
<span>*</span>
<input type="text" placeholder="请输入文章标题" v-model="blogTitle">
<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" placeholder="请选择文章分类" ></select-card>
<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" >
<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">
<input type="text" placeholder="请用一句话介绍该文章" v-model="blogAbstract" ref="blogAbstract">
</div>
</div>
<div class="blog-release__content">
......@@ -47,9 +47,10 @@
<div class="editor-container">
<mavon-editor
v-model="content"
ref="content"
:toolbars="markdownOption"
class="editor"
placeholder="问题详情...."
placeholder="博客正文...."
:style="{zIndex: zIndex}"
@imgAdd="imgAdd"
@imgDel="imgDel"
......@@ -62,9 +63,9 @@
<div class="blog-release__select__wrap">
<div class="select-content">
<span>*</span>
<select-card selectType="1" @handleTag="handleTagList"></select-card>
<select-card selectType="1" @handleTag="handleTagList" ref="tagIds"></select-card>
</div>
<select-card selectType="2" :class-list="classList.title" @handleClass="handleQuestionClass" placeholder="请选择问题分类"></select-card>
</div>
<div class="choose-container">
<div class="input-box__wrap">
......@@ -103,8 +104,8 @@
</div>
<div class="blog-release__footer">
<p class="footer__left">上传封面
<img :src="this.userCover" alt="">
<input type="file" @change="(e)=>openCropper(e)" placeholder="上传项目封面图" accept="image/png,image/gif,image/jpeg" >
<img :src="this.cover" alt="">
<input type="file" @change="(e)=>changeToUploadCover(e)" placeholder="上传项目封面图" >
</p>
<div class="footer__right">
<p>已自动存为草稿</p>
......@@ -114,7 +115,7 @@
</div>
</div>
</card-container>
<yun-cropper :type="1" :autoCrop="false" :file="addFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper>
</div>
</div>
</template>
......@@ -131,7 +132,6 @@
size:12,
}
});
return {blogList:blogList.data.dataList}
},
components: {SelectCard, CardContainer},
......@@ -168,17 +168,24 @@
},
zIndex: 100, // 控制全屏时
value: '',
way: '',
comment: '',
reprint: '',
lastSaveTime: new Date(),
blogClass: '',
addFile:{},
userCover:'',
cover:'',
cover:'无',
originLink:'',
//blogAbstract:'',
questionClass: '',
way:1,
allowComment:true,
allowForward:true,
blogAbstract:'',
blogTitle:'',
content:'',
tagIds:'',
blogList:'',
i:0,
tagList:[],
img:"",
//classList: [{id:1,title:"web"}, {id:2,title:"java"},{id:3,title:"javascript"}]
classList:["web","java","javascript"]
......@@ -188,6 +195,7 @@
toDetail(){
this.$router.push('/detail')
},
// 获得下拉框得内容
handleBlogClass(value) {
this.blogClass = value.tag;
......@@ -206,44 +214,111 @@
},
// 获得得标签数组
handleTagList(tagList) {
console.log(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+" "
}
openCropper(e){
this.addFile = e.target.files[0];
},
getCroppedPic(pic){
if(pic){
this.userCover = pic;
console.log(this.cover)
//this.dataPostSaveUserInfo(1);
//上传图片
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() {
this.cover = this.userCover;
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();
if (this.originLink.slice(0, 12) === "https://www." || this.originLink.length === 0) {
if (this.originLink.length === 0) {
this.originLink = "null";
this.$message({
message: "请输入博客正文",
type: 'warning'
});
return false;
}
if (this.cover === '') {
this.dataPostSaveUserInfo(2)
} else {
this.dataPostSaveUserInfo(1)
if(this.tagIds===''){
//this.$refs.tagIds.focus();
this.$refs.tagIds.handleShow();
this.$refs.tagIds.$refs.tag.focus();
this.$message({
message: "请添加或创建您的博客标签",
type: 'warning'
});
return false;
}
} else {
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.的有效网址",
message: "请输入开头为https://www.的有效相关链接",
type: 'warning'
})
});
return false;
}
}else{
this.originLink='无';
this.dataPostSaveUserInfo()
}
},
dataPostSaveUserInfo(type){
let userInfo1 = {
dataPostSaveUserInfo(){
this.$axios.$post(config.api.post.Blog.release,{
allowComment: this.allowComment,//评论权限
allowForward: this.allowForward,//转载权限
blogAbstract: this.blogAbstract,//摘要
......@@ -253,42 +328,27 @@
cover: this.cover,//封面图
originLink: this.originLink,
tagIds: [
"Java"//标签id
this.tagList//标签id
],
topicIds: [
"Java"//话题id
"null"//话题id
],
viewPrivileges: this.way //1公开，0私有
};
let userInfo2 = {
allowComment: this.allowComment,//评论权限
allowForward: this.allowForward,//转载权限
blogAbstract: this.blogAbstract,//摘要
content: this.content,//内容
blogTitle: this.blogTitle,//标题
categoryId: this.blogClass,//文章类型
cover: "string",//封面图
originLink: this.originLink,
tagIds: [
"Java"//标签id
],
topicIds: [
"Java"//话题id
],
viewPrivileges: this.way //1公开，0私有
};
this.$axios.$post(config.api.post.Blog.release,type===1?userInfo1:userInfo2).then((response)=>{
if(response.code===0){
let user = {userAvatar:this.userAvatar}
this.$store.commit('userProfile/setUser', user);
}).then((response)=>{
if(response.code===0){
this.$message({
message:response.msg,
message:"提交成功",
type:'success'
})
});
/* setTimeout(() => {
this.$router.push('/personal-center/home/blog')
}, 500);*/
this.$router.push('/personal-center/home/blog')
}else{
this.$message({
message:response.data.errMsg,
message:response.msg,
type:'warning'
})
}
......@@ -296,13 +356,6 @@
},
imgAdd(pos, file) {
//添加图片，pos为位置
// 第一步.将图片上传到服务器.
......@@ -329,10 +382,7 @@
console.log(pos);
console.log(url);
},
changeToUploadCover(e){
console.log(e);
this.imgSrc = 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg';
},
save() { //保存文章内容
},
......@@ -353,6 +403,13 @@
</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;
......@@ -429,6 +486,8 @@
.editor {
min-height: 230*$length;
min-width: 723*$length;
max-height:230*$length;
max-width: 732*$length;
}
}
}
......
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