Skip to content

B
beyond-clouds-front
Commit 64124069 by 高浩杰
Options

修复发布项目 必填项 校验 光标

parent 0ba564f5
Showing with 119 additions and 68 deletions
components/pc/select/selectCard.vue
...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
></label-wrap> ></label-wrap>
</div> </div>
</div> </div>
<div class="select-container" v-if="selectType === '2'" style="width: 196px" @mouseleave="isShow=false"> <div class="select-container" v-if="selectType === '2'" style="width: 196px;cursor: pointer;" @mouseleave="isShow=false">
<div class="input-box" @click="handleShow"> <div class="input-box" @click="handleShow">
<input type="text" v-model="value.tag" :placeholder="placeholder" ref="select"> <input type="text" v-model="value.tag" :placeholder="placeholder" ref="select" style="cursor: pointer;">
<div class="icon-box"> <div class="icon-box">
<yun-icon name="down_arrow" size="10px" color="#999"></yun-icon> <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
</div> </div>
...@@ -212,6 +212,13 @@ export default { ...@@ -212,6 +212,13 @@ export default {
</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;
}
}
.select-container{ .select-container{
.select-container__input-box{ .select-container__input-box{
@extend %flex-row-spb; @extend %flex-row-spb;
......
pages/project/release/index.vue
<template> <template>
<div class="blog-release-container"> <div class="project-release-container">
<div class="blog-release-container__l"> <div class="project-release-container__l">
<card-container <card-container
title="已发布项目" title="已发布项目"
width="302px" width="302px"
...@@ -13,14 +13,14 @@ ...@@ -13,14 +13,14 @@
style="margin-top: 16px" style="margin-top: 16px"
></card-container> ></card-container>
</div> </div>
<div class="blog-release-container__r"> <div class="project-release-container__r">
<card-container <card-container
title="发布项目" title="发布项目"
width="938px" width="938px"
height="1062px" height="1062px"
> >
<div class="blog-release"> <div class="project-release">
<div class="blog-release__header"> <div class="project-release__header">
<div class="header-content"> <div class="header-content">
<span>*</span> <span>*</span>
<input type="text" placeholder="请输入项目名称" v-model="name" ref="name"> <input type="text" placeholder="请输入项目名称" v-model="name" ref="name">
...@@ -57,7 +57,15 @@ ...@@ -57,7 +57,15 @@
<div class="header-content"> <div class="header-content">
<div class="header-content__left"> <div class="header-content__left">
<span>*</span> <span>*</span>
<input type="text" placeholder="项目所在地址链接" v-model="addressLink" ref="addressLink" style="width: 461px;"> <input
type="text"
placeholder="项目所在地址链接"
v-model="addressLink"
ref="addressLink"
style="width: 461px;"
@focus="() => this.$refs.addressLink.style.border = '1px solid transparent'"
@blur="checkAddress(addressLink, 'addressLink')"
>
</div> </div>
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
...@@ -65,7 +73,15 @@ ...@@ -65,7 +73,15 @@
</div> </div>
</div> </div>
<div class="header-content"> <div class="header-content">
<input type="text" placeholder="项目文档链接" v-model="docLink" style="width: 461px;margin-left: 22px;"> <input
type="text"
placeholder="项目文档链接"
v-model="docLink"
ref="docLink"
style="width: 461px;margin-left: 22px;"
@focus="() => this.$refs.docLink.style.border = '1px solid transparent'"
@blur="checkAddress(docLink, 'docLink')"
>
<div class="select__wrap"> <div class="select__wrap">
<span>*</span> <span>*</span>
<select-card <select-card
...@@ -77,7 +93,15 @@ ...@@ -77,7 +93,15 @@
</div> </div>
</div> </div>
<div class="header-content"> <div class="header-content">
<input type="text" placeholder="项目官网链接" v-model="homeLink" style="width: 461px;margin-left: 22px;"> <input
type="text"
placeholder="项目官网链接"
v-model="homeLink"
ref="homeLink"
style="width: 461px;margin-left: 22px;"
@focus="() => this.$refs.homeLink.style.border = '1px solid transparent'"
@blur="checkAddress(homeLink, 'homeLink')"
>
<select-card <select-card
selectType="2" selectType="2"
:class-list="classList" :class-list="classList"
...@@ -89,7 +113,7 @@ ...@@ -89,7 +113,7 @@
<input type="text" placeholder="请用一句话介绍该项目" ref="projectDescription" v-model="projectDescription"> <input type="text" placeholder="请用一句话介绍该项目" ref="projectDescription" v-model="projectDescription">
</div> </div>
</div> </div>
<div class="blog-release__content"> <div class="project-release__content">
<span>*</span> <span>*</span>
<div class="editor-container"> <div class="editor-container">
<mavon-editor <mavon-editor
...@@ -98,7 +122,7 @@ ...@@ -98,7 +122,7 @@
:toolbars="markdownOption" :toolbars="markdownOption"
class="editor" class="editor"
:style="{zIndex: zIndex}" :style="{zIndex: zIndex}"
placeholder="项目详情...." placeholder="请输入详细的项目介绍，说明等...."
@imgAdd="imgAdd" @imgAdd="imgAdd"
@imgDel="imgDel" @imgDel="imgDel"
@save="save" @save="save"
...@@ -107,7 +131,7 @@ ...@@ -107,7 +131,7 @@
></mavon-editor> ></mavon-editor>
</div> </div>
</div> </div>
<div class="blog-release__footer"> <div class="project-release__footer">
<p class="footer__left">上传封面 <p class="footer__left">上传封面
<img :src="imgSrc" alt=""> <img :src="imgSrc" alt="">
<input type="file" @change=" e =>changeToUploadCover(e)"> <input type="file" @change=" e =>changeToUploadCover(e)">
...@@ -120,6 +144,7 @@ ...@@ -120,6 +144,7 @@
</div> </div>
</div> </div>
</card-container> </card-container>
<yun-cropper type="2" :autoCrop="true" :file="imgFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper>
</div> </div>
</div> </div>
</template> </template>
...@@ -178,6 +203,7 @@ export default { ...@@ -178,6 +203,7 @@ export default {
docLink: '', // 项目文档链接 docLink: '', // 项目文档链接
homeLink: '', // 项目官网链接 homeLink: '', // 项目官网链接
projectDescription: '',// 项目描述 projectDescription: '',// 项目描述
imgFile: {}
} }
}, },
methods: { methods: {
...@@ -214,35 +240,32 @@ export default { ...@@ -214,35 +240,32 @@ export default {
this.lastSaveTime = now; this.lastSaveTime = now;
} }
}, },
async changeToUploadCover(e) { changeToUploadCover(e) {
if (e.target.files[0].size > (8 * Math.pow(2, 20))) { this.imgFile = e.target.files[0];
},
getCroppedPic(pic) {
this.imgSrc = pic;
},
readScreen(boolean, str) { // 预览
this.zIndex = 8000
},
// 检测网址
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({ this.$message({
type: 'warning', type: 'warning',
message: '文件大小超过8M，请重新选择文件！' message: '请输入正确的网站地址'
}); });
return if (ref === 'addressLink') {
} this.$refs.addressLink.style.border = '1px solid red';
let formData = new window.FormData(); } else if (ref === 'docLink') {
formData.append('file', e.target.files[0]); this.$refs.docLink.style.border = '1px solid red';
formData.append('type', 2); } else if (ref === 'homeLink') {
console.log(formData); this.$refs.homeLink.style.border = '1px solid red';
let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData); }
console.log(imgResponse);
if (imgResponse.code === 0) {
this.imgSrc = imgResponse.data;
this.$message({
type: 'success',
message: '图片上传成功'
})
} else {
this.$message({
type: 'warning',
message: imgResponse.msg
})
} }
},
readScreen(boolean, str) { // 预览
this.zIndex = 8000
}, },
// 检测项目必填项是否完成 // 检测项目必填项是否完成
checkProject() { checkProject() {
...@@ -252,10 +275,9 @@ export default { ...@@ -252,10 +275,9 @@ export default {
this.$refs.name.focus(); this.$refs.name.focus();
this.$message({ this.$message({
type: 'warning', type: 'warning',
message: '请输入请输入项目名称' message: '请输入项目名称'
}) })
} } else if (this.license === '') {
if (this.license === '') {
console.log(this.$refs.license); console.log(this.$refs.license);
this.$refs.license.handleShow(); this.$refs.license.handleShow();
this.$refs.license.$refs.select.focus(); this.$refs.license.$refs.select.focus();
...@@ -263,37 +285,52 @@ export default { ...@@ -263,37 +285,52 @@ export default {
type: 'warning', type: 'warning',
message: '请选择授权协议' message: '请选择授权协议'
}) })
} }else if (this.language === '') {
if (this.language === '') {
this.$refs.language.handleShow(); this.$refs.language.handleShow();
this.$refs.language.$refs.select.focus(); this.$refs.language.$refs.select.focus();
this.$message({ this.$message({
type: 'warning', type: 'warning',
message: '请选择开发语言' message: '请选择开发语言'
}) })
} }else if (this.system === '') {
if (this.system) {
this.$refs.system.handleShow(); this.$refs.system.handleShow();
this.$refs.system.$refs.select.focus(); this.$refs.system.$refs.select.focus();
this.$message({ this.$message({
type: 'warning', type: 'warning',
message: '请选择操作系统' message: '请选择操作系统'
}) })
} }else if (this.addressLink === '') {
if (this.addressLink === '') { this.$refs.addressLink.focus();
this.$message({
} type: 'warning',
if (this.projectClass === '') { message: '请输入项目所在地址链接'
})
} }else if (this.projectClass === '') {
if (this.projectDescription === '') { this.$refs.projectClass.handleShow();
this.$refs.projectClass.$refs.select.focus();
} this.$message({
if (this.value === '') { type: 'warning',
message: '请选择项目类型'
} })
if (this.imgSrc === '') { }else if (this.projectDescription === '') {
this.$refs.projectDescription.focus();
this.$message({
type: 'warning',
message: '请填写项目描述'
})
}else if (this.value === '') {
this.$refs.editor.textAreaFocus();
this.$message({
type: 'warning',
message: '请输入项目详情'
})
}else if (this.imgSrc === '') {
this.$message({
type: 'warning',
message: '请上传项目封面'
})
} else {
return true
} }
} else { } else {
if (this.name !== '' && this.license !== '' && this.language !== '' && this.system !== '' if (this.name !== '' && this.license !== '' && this.language !== '' && this.system !== ''
...@@ -350,7 +387,7 @@ export default { ...@@ -350,7 +387,7 @@ export default {
} }
console.log(projectRes); console.log(projectRes);
if (projectRes.code === 0) { if (projectRes.code === 0) {
this.$router.push('http://localhost:3010/personal-center/home/project'); this.$router.push('/personal-center/home/project');
this.$message({ this.$message({
type: 'success', type: 'success',
message: '项目发布成功' message: '项目发布成功'
...@@ -368,21 +405,28 @@ export default { ...@@ -368,21 +405,28 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.blog-release-container { input {
border: 1*$length solid transparent;
@extend %animate-transition;
&:focus {
border: 1*$length solid #00AAE6 !important;
}
}
.project-release-container {
width: $pageWidth; width: $pageWidth;
margin: 24*$length auto 32*$length auto; margin: 24*$length auto 32*$length auto;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
.blog-release-container__l { .project-release-container__l {
} }
.blog-release-container__r { .project-release-container__r {
.blog-release { .project-release {
width: 748*$length; width: 748*$length;
margin: 0 auto; margin: 0 auto;
.blog-release__header { .project-release__header {
margin-top: 40*$length; margin-top: 40*$length;
.header-content { .header-content {
...@@ -419,7 +463,7 @@ export default { ...@@ -419,7 +463,7 @@ export default {
} }
} }
.blog-release__content { .project-release__content {
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: start; align-items: start;
...@@ -442,7 +486,7 @@ export default { ...@@ -442,7 +486,7 @@ export default {
} }
} }
.blog-release__footer { .project-release__footer {
height: 196*$length; height: 196*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-end; align-items: flex-end;
......
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