Skip to content

B
beyond-clouds-front
Commit 20f6804d by yanju
Options

Merge branch 'master' of coding.yundingshuyuan.com:pigbigbig/beyond-clouds-front

parents b6f55738 ad73e16e
Showing with 165 additions and 221 deletions
pages/answer/release/index.vue
...@@ -22,13 +22,14 @@ ...@@ -22,13 +22,14 @@
<div class="answer-release"> <div class="answer-release">
<div class="answer-release__header"> <div class="answer-release__header">
<span>*</span> <span>*</span>
<input type="text" v-model="questionDetail" placeholder="请一句话说明问题，并以问号结尾"> <input type="text" v-model="questionTitle" ref="questionTitle" placeholder="请一句话说明问题，并以问号结尾">
</div> </div>
<div class="answer-release__content"> <div class="answer-release__content">
<span>*</span> <span>*</span>
<div class="editor-container"> <div class="editor-container">
<mavon-editor <mavon-editor
v-model="questionDetail" v-model="questionDetail"
ref="questionDetail"
:toolbars="markdownOption" :toolbars="markdownOption"
class="editor" class="editor"
placeholder="问题详情...." placeholder="问题详情...."
...@@ -44,14 +45,14 @@ ...@@ -44,14 +45,14 @@
<div class="select__wrap"> <div class="select__wrap">
<div class="select-content"> <div class="select-content">
<span>*</span> <span>*</span>
<select-card selectType="1"></select-card> <select-card selectType="1" @handleTag="handleTagList" ref="tagIds"></select-card>
</div> </div>
<select-card selectType="2" :class-list="classList" @handleClass="handleBlogClass" placeholder="请选择问题分类"></select-card> <select-card selectType="2" :class-list="classList" @handleClass="handleClass" ref="blogClass" placeholder="请选择问题分类"></select-card>
</div> </div>
<div class="answer-release__footer"> <div class="answer-release__footer">
<p>已自动存为草稿</p> <p>已自动存为草稿</p>
<button class="preview" @click="readScreen">预览</button> <button class="preview" @click="readScreen">预览</button>
<button class="submit">提交</button> <button class="submit" @click="dataPostQuestion">提交</button>
</div> </div>
</div> </div>
</card-container> </card-container>
...@@ -98,74 +99,158 @@ ...@@ -98,74 +99,158 @@
}, },
zIndex: 100, zIndex: 100,
value: '', value: '',
tagList:'',
i:0,
blogClass:'',
questionDetail:'',
questionTitle:'',
lastSaveTime: new Date(), lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript'] classList: ['web', 'java', 'javascript']
} }
}, },
methods: { methods: {
handleBlogClass(value) { handleClass(value) {
this.blogClass = value; this.blogClass = value.tag;
if(value=="web"){ if(value.tag=="web"){
this.blogClass=1 this.blogClass=1
}else if(value=="java"){ }else if(value.tag=="java"){
this.blogClass=2 this.blogClass=2
}else if(value=="javascript"){ }else if(value.tag=="javascript"){
this.blogClass=3 this.blogClass=3
} }
console.log(this.blogClass); console.log(this.blogClass);
}, },
// 获得得标签数组
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+" "
}
console.log(this.tagList)
},
//参数判断
dataPostQuestion(){
console.log(this.questionTitle.slice(this.questionTitle.length-1,this.questionTitle.length));
if(this.questionTitle===''
){
this.$refs.questionTitle.focus();
this.$message({
message: "请输入您的问题，并以问号结尾",
type: 'warning'
});
return false;
}
if(this.questionDetail===''){
this.$refs.questionDetail.textAreaFocus();
this.$message({
message: "请输入问题详情",
type: 'warning'
});
return false;
}
if(this.tagList===''){
//this.$refs.tagIds.focus();
this.$refs.tagIds.handleShow();
this.$refs.tagIds.$refs.tag.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;
}
this.postQuestion()
},
postQuestion(){ postQuestion(){
this.$axios.$post(config.api.post.question.release,{ this.$axios.$post(config.api.post.Question.release,{
categoryId: this.blogClass, categoryId: this.blogClass,
questionAbstract: "摘要",//摘要 questionAbstract: "无",//摘要
questionDetail: this.questionDetail, questionDetail: this.questionDetail,
questionTitle: this.questionTitle, questionTitle: this.questionTitle,
tagIds: [//标签id tagIds: [//标签id
"java" this.tagList
], ],
topicIds: [//话题id topicIds: [//话题id
"话题id" "无话题id"
] ]
}).then((response)=>{ }).then((response)=>{
//处理response //处理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/answer?type=my')
}else{
this.$message({
message:response.msg,
type:'warning'
})
}
}) })
}, },
imgAdd(pos, file) { imgAdd(pos, file) {
//添加图片，pos为位置 // filename: 写在md中的文件名, File: File Object
// 第一步.将图片上传到服务器. // 第一步.将图片上传到服务器.
let formData = new FormData(); let formdata = new window.FormData();
formData.append('image', file); formdata.append('file', file);
axios({ formdata.append('type', 5);
url: 'server url', this.$axios.$post(config.api.post.Resource.file, formdata)
method: 'post', .then((res) => {
data: formdata, console.log(res);
headers: {'Content-Type': 'multipart/form-data'}, let url = res.data;
}).then((url) => { this.$refs.editor.$img2Url(pos, url);
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url) this.$message({
/** type: 'success',
* $vm 指为mavonEditor实例，可以通过如下两种方式获取 message: '上传图片成功'
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor` })
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md` })
*/ .catch(err => {
$vm.$img2Url(pos, url); this.$message({
type: 'warning',
message: '图片上传失败'
})
}) })
}, },
imgDel(pos, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作 imgDel(pos) {
//删除图片，并不是修改就会触发，仅支持工具栏操作
// filename: 写在md中的文件名
console.log(pos); console.log(pos);
console.log(url);
}, },
save() { //保存文章内容 save(value, render) { //保存文章内容
this.projectDetail = render;
console.log('save');
}, },
intervalSave() { //自动保存 intervalSave(value, render) {
// 自动保存
// render: value 经过markdown解析后的结果
let now = new Date(); let now = new Date();
if (now - this.lastSaveTime >= 2 * 60 * 1000) { if (now - this.lastSaveTime >= 2 * 1000) {
this.lastSaveTime = now; this.lastSaveTime = now;
this.projectDetail = render;
console.log('zdsava');
} }
}, },
readScreen(boolean, str){ // 预览 readScreen(boolean, str){ // 预览
...@@ -177,6 +262,13 @@ ...@@ -177,6 +262,13 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
input{
border:1*$length solid transparent;
@extend %animate-transition;
&:focus{
border:1*$length solid #00AAE6;
}
}
.answer-release-container { .answer-release-container {
width: $pageWidth; width: $pageWidth;
margin: 24*$length auto 32*$length auto; margin: 24*$length auto 32*$length auto;
...@@ -222,6 +314,8 @@ ...@@ -222,6 +314,8 @@
.editor { .editor {
min-height: 230*$length; min-height: 230*$length;
min-width: 723*$length; min-width: 723*$length;
max-height:230*$length;
max-width: 732*$length;
} }
} }
} }
......
pages/blog/index.vue deleted 100644 → 0
<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>
pages/blog/release/index.vue
...@@ -183,7 +183,6 @@ ...@@ -183,7 +183,6 @@
blogTitle:'', blogTitle:'',
content:'', content:'',
tagIds:'', tagIds:'',
blogList:'',
i:0, i:0,
tagList:[], tagList:[],
img:"", img:"",
...@@ -195,7 +194,10 @@ ...@@ -195,7 +194,10 @@
toDetail(){ toDetail(){
this.$router.push('/detail') this.$router.push('/detail')
}, },
<<<<<<< HEAD
=======
>>>>>>> ad73e16e073e5d5d4eb0a2043fbabfd8ef19b73b
// 获得下拉框得内容 // 获得下拉框得内容
handleBlogClass(value) { handleBlogClass(value) {
this.blogClass = value.tag; this.blogClass = value.tag;
...@@ -225,6 +227,7 @@ ...@@ -225,6 +227,7 @@
}, },
//上传图片 //上传图片
async changeToUploadCover(e) { async changeToUploadCover(e) {
let formData = new window.FormData(); let formData = new window.FormData();
formData.append('file', e.target.files[0]); formData.append('file', e.target.files[0]);
formData.append('type', 1); formData.append('type', 1);
...@@ -297,7 +300,6 @@ ...@@ -297,7 +300,6 @@
}); });
return false; return false;
} }
if(this.originLink!==''){ if(this.originLink!==''){
if(this.originLink.slice(0, 12) === "https://www."||this.originLink==="无" ){ if(this.originLink.slice(0, 12) === "https://www."||this.originLink==="无" ){
this.dataPostSaveUserInfo(); this.dataPostSaveUserInfo();
...@@ -356,40 +358,47 @@ ...@@ -356,40 +358,47 @@
}, },
imgAdd(pos, file) { imgAdd(pos, file) {
//添加图片，pos为位置 // filename: 写在md中的文件名, File: File Object
// 第一步.将图片上传到服务器. // 第一步.将图片上传到服务器.
let formData = new FormData(); let formdata = new window.FormData();
formData.append('image', file); formdata.append('file', file);
axios({ formdata.append('type', 5);
url: 'server url', this.$axios.$post(config.api.post.Resource.file, formdata)
method: 'post', .then((res) => {
data: formdata, console.log(res);
headers: {'Content-Type': 'multipart/form-data'}, let url = res.data;
}).then((url) => { this.$refs.editor.$img2Url(pos, url);
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url) this.$message({
/** type: 'success',
* $vm 指为mavonEditor实例，可以通过如下两种方式获取 message: '上传图片成功'
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor` })
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md` })
* .catch(err => {
*/ this.$message({
//$vm.$img2Url(pos, url); type: 'warning',
console.log(url) message: '图片上传失败'
})
}) })
}, },
imgDel(pos, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作 imgDel(pos) {
//删除图片，并不是修改就会触发，仅支持工具栏操作
// filename: 写在md中的文件名
console.log(pos); console.log(pos);
console.log(url);
}, },
save(value, render) { //保存文章内容
save() { //保存文章内容 this.projectDetail = render;
console.log('save');
}, },
intervalSave() { //自动保存 intervalSave(value, render) {
// 自动保存
// render: value 经过markdown解析后的结果
let now = new Date(); let now = new Date();
if (now - this.lastSaveTime >= 2 * 60 * 1000) { if (now - this.lastSaveTime >= 2 * 1000) {
this.lastSaveTime = now; this.lastSaveTime = now;
this.projectDetail = render;
console.log('zdsava');
} }
}, },
......
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