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 {
Tag:{
myList:'/api/my/tag/created',//获取我创建的标签列表
search:'/api/tag/search',//检索标签
hotTags: '/api/tag/hots',//热门标签
},
User:{
myInfo:'/api/my/baseinfo' , //获取我的信息
......
components/pc/select/selectCard.vue
......@@ -3,11 +3,11 @@
<div class="select-container" v-if="selectType === '1'" style="min-height: 100px;width: 354px;">
<div class="select-container__input-box">
<div>
<!--@focus="handleShow"-->
<input
type="text" placeholder="回车搜索标签"
@blur="isShow=false"
@keyup.enter="handleSearch"
@focus="handleShow"
v-model="value.tag"
ref="tag"
>
......@@ -17,8 +17,9 @@
<select-content
v-if="isSearch"
v-for="(item, index) in labelList"
:item="item.tag"
:tagId="item.tagId"
:isHot="labelList[0].hasOwnProperty('tagType')"
:item="item"
:index="index"
:key="`${item}${index}`"
@select="handleChange"
></select-content>
......@@ -77,10 +78,7 @@ export default {
return{
isShow: false,
isShow2: false,
list: [{
tagId: '123',
tag: 'web'
}],
list: [],
searchList: [],
result: [],
value: {
......@@ -207,6 +205,25 @@ export default {
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>
......@@ -243,6 +260,7 @@ export default {
background-color: #fff;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
@include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
@include border-radius(4*$length);
&:before{
......
components/pc/select/selectContent.vue
<template>
<div>
<p @click="handleClick">{{item}}</p>
<div class="tag-box">
<p v-if="!isHot" @click="handleClick">{{item.tag}}</p>
<div v-if="isHot" @click="handleClick" :style="{backgroundColor: bgColor}">{{item.tag}}</div>
</div>
</template>
......@@ -8,26 +9,55 @@
export default {
name: "selectContent",
props: {
item: String,
tagId: String
item: Object,
index: Number,
isHot: {
type: Boolean,
default: false
}
},
methods: {
handleClick(){
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>
<style lang="scss" scoped>
p {
@include fontStyle(14, 40, 500, #999, left);
padding-left: 20*$length;
@extend %cursorPointer;
&:hover {
background-color: #F4F8FA;
color: #00AAE6;
.tag-box{
display: inline-block;
> div {
display: inline-block;
margin: 5*$length 7*$length;
padding: 5*$length 7*$length;
@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>
pages/answer/release/index.vue
......@@ -106,7 +106,7 @@
questionDetail:'',
questionTitle:'',
lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript']
classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
}
},
methods: {
......
pages/blog/release/index.vue
......@@ -46,7 +46,6 @@
<span>*</span>
<div class="editor-container">
<mavon-editor
v-model="content"
ref="content"
:toolbars="markdownOption"
class="editor"
......@@ -194,10 +193,6 @@
toDetail(){
this.$router.push('/detail')
},
<<<<<<< HEAD
=======
>>>>>>> ad73e16e073e5d5d4eb0a2043fbabfd8ef19b73b
// 获得下拉框得内容
handleBlogClass(value) {
this.blogClass = value.tag;
......@@ -364,7 +359,11 @@
// 第一步.将图片上传到服务器.
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);
......@@ -387,9 +386,15 @@
// 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) {
// 自动保存
......@@ -397,8 +402,12 @@
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
}
},
......@@ -492,11 +501,10 @@
.editor-container {
width: 723*$length;
height: 230*$length;
overflow: auto;
.editor {
min-height: 230*$length;
min-width: 723*$length;
max-height:230*$length;
max-width: 732*$length;
}
}
}
......
pages/project/release/index.vue
......@@ -118,7 +118,6 @@
<div class="editor-container">
<mavon-editor
ref="editor"
v-model="value"
:toolbars="markdownOption"
class="editor"
:style="{zIndex: zIndex}"
......@@ -144,7 +143,7 @@
</div>
</div>
</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>
</template>
......@@ -188,10 +187,9 @@ export default {
preview: true // 预览
},
zIndex: 100,
value: '', // 项目详情
imgSrc: '',
lastSaveTime: new Date(),
classList: ['web', 'java', 'javascript'],
classList: [{tagId:1,tag:"web"}, {tagId:2,tag:"java"},{tagId:3,tag:"javascript"}],
license: '', // 项目协议
language: '', // 项目语言
system: '', // 项目系统
......@@ -203,46 +201,56 @@ export default {
docLink: '', // 项目文档链接
homeLink: '', // 项目官网链接
projectDescription: '',// 项目描述
projectDetail: '', // 项目详情
imgFile: {}
}
},
methods: {
imgAdd(pos, file) {
//添加图片，pos为位置
// filename: 写在md中的文件名, File: File Object
// 第一步.将图片上传到服务器.
let formData = new FormData();
formData.append('image', file);
axios({
url: 'server url',
method: 'post',
data: formdata,
headers: {'Content-Type': 'multipart/form-data'},
}).then((url) => {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
/**
* $vm 指为mavonEditor实例，可以通过如下两种方式获取
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
let formdata = new window.FormData();
formdata.append('file', file);
formdata.append('type', 5);
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, url) { //删除图片，并不是修改就会触发，仅支持工具栏操作
imgDel(pos) {
//删除图片，并不是修改就会触发，仅支持工具栏操作
// filename: 写在md中的文件名
console.log(pos);
console.log(url);
},
save() { //保存文章内容
save(value, render) { //保存文章内容
this.projectDetail = render;
},
intervalSave() { //自动保存
intervalSave(value, render) {
// 自动保存
// render: value 经过markdown解析后的结果
let now = new Date();
if (now - this.lastSaveTime >= 2 * 60 * 1000) {
if (now - this.lastSaveTime >= 2 * 1000) {
this.lastSaveTime = now;
this.projectDetail = render;
}
},
// 上传图片
changeToUploadCover(e) {
this.imgFile = e.target.files[0];
},
// 调用裁剪图片
getCroppedPic(pic) {
this.imgSrc = pic;
},
......@@ -251,7 +259,6 @@ export default {
},
// 检测网址
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]+)*$/;
if (!reg.test(address)) {
this.$message({
......@@ -362,7 +369,7 @@ export default {
"homeLink": this.homeLink,
"license": this.license,
"projectDescription": this.projectDescription,
"projectDetail": this.value,
"projectDetail": this.projectDetail,
"projectName": this.name,
"projectType": this.projectClass,
"runtimePlatform": this.system,
......@@ -378,7 +385,7 @@ export default {
"homeLink": this.homeLink,
"license": this.license,
"projectDescription": this.projectDescription,
"projectDetail": this.value,
"projectDetail": this.projectDetail,
"projectName": this.name,
"projectType": this.projectClass,
"runtimePlatform": this.system,
......@@ -476,11 +483,10 @@ export default {
.editor-container {
width: 723*$length;
height: 230*$length;
overflow: auto;
.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