Merge branch 'yoona' into 'master'

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

See merge request pigbigbig/beyond-clouds-front!39

components/pc/select/selectCard.vue

@@ -41,9 +41,9 @@
         ></label-wrap>
       </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">
-        <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">
           <yun-icon name="down_arrow" size="10px" color="#999"></yun-icon>
         </div>
@@ -211,6 +211,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  input {
+    border: 1*$length solid transparent;
+    @extend %animate-transition;
+    &:focus {
+      border: 1*$length solid #00AAE6;
+    }
+  }
 .select-container{
   .select-container__input-box{
     @extend %flex-row-spb;

pages/project/release/index.vue

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