Skip to content

B
beyond-clouds-front
Commit 7c2806b5 by yanju
Options

Merge branch 'yoona' into 'master' 

项目发布博客发布1.传值修改为render2.可填写图片 标签增加热门标签

See merge request pigbigbig/beyond-clouds-front!42
parents 20f6804d 1a7130b4
Showing with 122 additions and 59 deletions
action/config.js
...@@ -28,6 +28,7 @@ export default { ...@@ -28,6 +28,7 @@ export default {
Tag:{ Tag:{
myList:'/api/my/tag/created',//获取我创建的标签列表 myList:'/api/my/tag/created',//获取我创建的标签列表
search:'/api/tag/search',//检索标签 search:'/api/tag/search',//检索标签
hotTags: '/api/tag/hots',//热门标签
}, },
User:{ User:{
myInfo:'/api/my/baseinfo' , //获取我的信息 myInfo:'/api/my/baseinfo' , //获取我的信息
......
components/pc/select/selectCard.vue
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<div class="select-container" v-if="selectType === '1'" style="min-height: 100px;width: 354px;"> <div class="select-container" v-if="selectType === '1'" style="min-height: 100px;width: 354px;">
<div class="select-container__input-box"> <div class="select-container__input-box">
<div> <div>
<!--@focus="handleShow"-->
<input <input
type="text" placeholder="回车搜索标签" type="text" placeholder="回车搜索标签"
@blur="isShow=false" @blur="isShow=false"
@keyup.enter="handleSearch" @keyup.enter="handleSearch"
@focus="handleShow"
v-model="value.tag" v-model="value.tag"
ref="tag" ref="tag"
> >
...@@ -17,8 +17,9 @@ ...@@ -17,8 +17,9 @@
<select-content <select-content
v-if="isSearch" v-if="isSearch"
v-for="(item, index) in labelList" v-for="(item, index) in labelList"
:item="item.tag" :isHot="labelList[0].hasOwnProperty('tagType')"
:tagId="item.tagId" :item="item"
:index="index"
:key="`${item}${index}`" :key="`${item}${index}`"
@select="handleChange" @select="handleChange"
></select-content> ></select-content>
...@@ -77,10 +78,7 @@ export default { ...@@ -77,10 +78,7 @@ export default {
return{ return{
isShow: false, isShow: false,
isShow2: false, isShow2: false,
list: [{ list: [],
tagId: '123',
tag: 'web'
}],
searchList: [], searchList: [],
result: [], result: [],
value: { value: {
...@@ -207,6 +205,25 @@ export default { ...@@ -207,6 +205,25 @@ export default {
this.isShow2 = true; this.isShow2 = true;
} }
}, },
created() {
if (this.selectType === '1') {
this.$axios.$get(config.api.get.Tag.hotTags, {
params: {
page: 1,
size: 10
}
}).then(res => {
let arr = res.data.dataList;
arr.forEach(item => {
this.list.push({
tagId: item.tagId,
tag: item.tagName,
tagType: item.tagType
})
})
})
}
}
} }
</script> </script>
...@@ -243,6 +260,7 @@ export default { ...@@ -243,6 +260,7 @@ export default {
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
@include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1)); @include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
@include border-radius(4*$length); @include border-radius(4*$length);
&:before{ &:before{
......
components/pc/select/selectContent.vue
<template> <template>
<div> <div class="tag-box">
<p @click="handleClick">{{item}}</p> <p v-if="!isHot" @click="handleClick">{{item.tag}}</p>
<div v-if="isHot" @click="handleClick" :style="{backgroundColor: bgColor}">{{item.tag}}</div>
</div> </div>
</template> </template>
...@@ -8,26 +9,55 @@ ...@@ -8,26 +9,55 @@
export default { export default {
name: "selectContent", name: "selectContent",
props: { props: {
item: String, item: Object,
tagId: String index: Number,
isHot: {
type: Boolean,
default: false
}
}, },
methods: { methods: {
handleClick(){ handleClick(){
console.log(this.item); console.log(this.item);
this.$emit('select', this.item, this.tagId); this.$emit('select', this.item.tag, this.item.tagId);
}
},
created() {
if (this.isHot) {
if (this.index % 2 === 0) {
this.bgColor = '#38d3e9'
} else if (this.index % 3 === 0) {
this.bgColor = '#FF7474'
} else {
this.bgColor = '#75D098'
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
p { .tag-box{
@include fontStyle(14, 40, 500, #999, left); display: inline-block;
padding-left: 20*$length; > div {
@extend %cursorPointer; display: inline-block;
&:hover { margin: 5*$length 7*$length;
background-color: #F4F8FA; padding: 5*$length 7*$length;
color: #00AAE6; @extend %cursorPointer;
@include border-radius(4*$length);
background-color: orange;
@include fontStyle(14, 20, 500, #fff, center);
}
> p {
width: 275*$length;
@include fontStyle(14, 40, 500, #999, left);
padding-left: 20*$length;
@extend %cursorPointer;
&:hover {
background-color: #F4F8FA;
color: #00AAE6;
}
} }
} }
</style> </style>
pages/answer/release/index.vue
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
questionDetail:'', questionDetail:'',
questionTitle:'', questionTitle:'',
lastSaveTime: new Date(), lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript'] classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
} }
}, },
methods: { methods: {
......
pages/blog/release/index.vue
...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
<span>*</span> <span>*</span>
<div class="editor-container"> <div class="editor-container">
<mavon-editor <mavon-editor
v-model="content"
ref="content" ref="content"
:toolbars="markdownOption" :toolbars="markdownOption"
class="editor" class="editor"
...@@ -194,10 +193,6 @@ ...@@ -194,10 +193,6 @@
toDetail(){ toDetail(){
this.$router.push('/detail') this.$router.push('/detail')
}, },
<<<<<<< HEAD
=======
>>>>>>> ad73e16e073e5d5d4eb0a2043fbabfd8ef19b73b
// 获得下拉框得内容 // 获得下拉框得内容
handleBlogClass(value) { handleBlogClass(value) {
this.blogClass = value.tag; this.blogClass = value.tag;
...@@ -364,7 +359,11 @@ ...@@ -364,7 +359,11 @@
// 第一步.将图片上传到服务器. // 第一步.将图片上传到服务器.
let formdata = new window.FormData(); let formdata = new window.FormData();
formdata.append('file', file); formdata.append('file', file);
<<<<<<< pages/blog/release/index.vue
formdata.append('type', 4);
=======
formdata.append('type', 5); formdata.append('type', 5);
>>>>>>> pages/blog/release/index.vue
this.$axios.$post(config.api.post.Resource.file, formdata) this.$axios.$post(config.api.post.Resource.file, formdata)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
...@@ -387,9 +386,15 @@ ...@@ -387,9 +386,15 @@
// filename: 写在md中的文件名 // filename: 写在md中的文件名
console.log(pos); console.log(pos);
}, },
<<<<<<< pages/blog/release/index.vue
save(value, render) { //保存文章内容
this.content = render;
=======
save(value, render) { //保存文章内容 save(value, render) { //保存文章内容
this.projectDetail = render; this.projectDetail = render;
console.log('save'); console.log('save');
>>>>>>> pages/blog/release/index.vue
}, },
intervalSave(value, render) { intervalSave(value, render) {
// 自动保存 // 自动保存
...@@ -397,8 +402,12 @@ ...@@ -397,8 +402,12 @@
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;
<<<<<<< pages/blog/release/index.vue
this.content = render;
=======
this.projectDetail = render; this.projectDetail = render;
console.log('zdsava'); console.log('zdsava');
>>>>>>> pages/blog/release/index.vue
} }
}, },
...@@ -492,11 +501,10 @@ ...@@ -492,11 +501,10 @@
.editor-container { .editor-container {
width: 723*$length; width: 723*$length;
height: 230*$length; height: 230*$length;
overflow: auto;
.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/project/release/index.vue
...@@ -118,7 +118,6 @@ ...@@ -118,7 +118,6 @@
<div class="editor-container"> <div class="editor-container">
<mavon-editor <mavon-editor
ref="editor" ref="editor"
v-model="value"
:toolbars="markdownOption" :toolbars="markdownOption"
class="editor" class="editor"
:style="{zIndex: zIndex}" :style="{zIndex: zIndex}"
...@@ -144,7 +143,7 @@ ...@@ -144,7 +143,7 @@
</div> </div>
</div> </div>
</card-container> </card-container>
<yun-cropper type="2" :autoCrop="true" :file="imgFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper> <yun-cropper :type="2" :autoCrop="true" :file="imgFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper>
</div> </div>
</div> </div>
</template> </template>
...@@ -188,10 +187,9 @@ export default { ...@@ -188,10 +187,9 @@ export default {
preview: true // 预览 preview: true // 预览
}, },
zIndex: 100, zIndex: 100,
value: '', // 项目详情
imgSrc: '', imgSrc: '',
lastSaveTime: new Date(), lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript'], classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
license: '', // 项目协议 license: '', // 项目协议
language: '', // 项目语言 language: '', // 项目语言
system: '', // 项目系统 system: '', // 项目系统
...@@ -203,46 +201,56 @@ export default { ...@@ -203,46 +201,56 @@ export default {
docLink: '', // 项目文档链接 docLink: '', // 项目文档链接
homeLink: '', // 项目官网链接 homeLink: '', // 项目官网链接
projectDescription: '',// 项目描述 projectDescription: '',// 项目描述
projectDetail: '', // 项目详情
imgFile: {} imgFile: {}
} }
}, },
methods: { methods: {
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;
}, },
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;
} }
}, },
// 上传图片
changeToUploadCover(e) { changeToUploadCover(e) {
this.imgFile = e.target.files[0]; this.imgFile = e.target.files[0];
}, },
// 调用裁剪图片
getCroppedPic(pic) { getCroppedPic(pic) {
this.imgSrc = pic; this.imgSrc = pic;
}, },
...@@ -251,7 +259,6 @@ export default { ...@@ -251,7 +259,6 @@ export default {
}, },
// 检测网址 // 检测网址
checkAddress(address, ref) { checkAddress(address, ref) {
let reg =/^(?=^.{3,255}$)((http|https|ftp)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/)?(?:\/(.+)\/?$)?(\/\w+\.\w+)*([\?&]\w+=\w*|[\u4e00-\u9fa5]+)*$/; let reg =/^(?=^.{3,255}$)((http|https|ftp)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/)?(?:\/(.+)\/?$)?(\/\w+\.\w+)*([\?&]\w+=\w*|[\u4e00-\u9fa5]+)*$/;
if (!reg.test(address)) { if (!reg.test(address)) {
this.$message({ this.$message({
...@@ -362,7 +369,7 @@ export default { ...@@ -362,7 +369,7 @@ export default {
"homeLink": this.homeLink, "homeLink": this.homeLink,
"license": this.license, "license": this.license,
"projectDescription": this.projectDescription, "projectDescription": this.projectDescription,
"projectDetail": this.value, "projectDetail": this.projectDetail,
"projectName": this.name, "projectName": this.name,
"projectType": this.projectClass, "projectType": this.projectClass,
"runtimePlatform": this.system, "runtimePlatform": this.system,
...@@ -378,7 +385,7 @@ export default { ...@@ -378,7 +385,7 @@ export default {
"homeLink": this.homeLink, "homeLink": this.homeLink,
"license": this.license, "license": this.license,
"projectDescription": this.projectDescription, "projectDescription": this.projectDescription,
"projectDetail": this.value, "projectDetail": this.projectDetail,
"projectName": this.name, "projectName": this.name,
"projectType": this.projectClass, "projectType": this.projectClass,
"runtimePlatform": this.system, "runtimePlatform": this.system,
...@@ -476,11 +483,10 @@ export default { ...@@ -476,11 +483,10 @@ export default {
.editor-container { .editor-container {
width: 723*$length; width: 723*$length;
height: 230*$length; height: 230*$length;
overflow: auto;
.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;
} }
} }
} }
......
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