修改创建小圈页面

src/components/yqrange/baseinfo.vue

@@ -2,8 +2,9 @@
   <el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix="：" class="basic-form">
     <el-form-item label="圈子名称" prop="name">
       <el-col :span="13">
-        <el-input size="small" v-model="formData.name" placeholder="请输入圈子名称" style="width:70%;" @change="returnTypeData('name')"></el-input>
-        <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/24</span>
+        <el-input size="small" v-model="formData.name" placeholder="请输入圈子名称" style="width:70%;"
+          @change="returnTypeData('name')"></el-input>
+        <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/14</span>
       </el-col>
     </el-form-item>
     <div class="basic-item-icon">
@@ -25,30 +26,11 @@
       </el-form-item>
       <p class="upload-message" v-if="uploadImgMessage1">请选择圈子头像</p>
     </div>
-    <div class="basic-item-icon">
-      <el-form-item label="圈子封面" class="required-label">
-        <el-upload v-model="formData.coverUrl" class="bg-uploader" @change="returnTypeData('coverUrl')" action="#" :show-file-list="false"
-          :before-upload="beforeUploadPic2">
-          <img v-if="formData.coverUrl" :src="formData.coverUrl" @mouseover.stop="imgMouseOver2=true" class="bg-img" />
-          <img v-if="!formData.coverUrl" class="bg-img" src="../../assets/image/small.png" />
-          <div class="img-delete" v-show="imgMouseOver2" @click.stop="deleteImg(2)"
-            @mouseout.stop="imgMouseOver2=false">
-            <i class="el-icon-delete"></i>
-          </div>
-          <div class="limit-text">
-            <p>尺寸:750*420</p>
-            <p>限制大小: 2Mb</p>
-            <p>支持.jpg,.png格式</p>
-          </div>
-        </el-upload>
-      </el-form-item>
-      <p class="upload-message" v-if="uploadImgMessage2">请选择圈子头像</p>
-    </div>
     <el-form-item label="圈子介绍" prop="introduce">
       <el-col :span="13">
         <el-input size="small" v-model="formData.introduce" placeholder="请输入圈子介绍" @change="returnTypeData('introduce')"
           style="width:70%;"></el-input>
-        <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
+        <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/40</span>
       </el-col>
     </el-form-item>
     <el-form-item label="内容发布权限" prop="dynamicFlag">
@@ -94,30 +76,31 @@
             { required: true, message: "请输入圈子名称", trigger: "blur" },
             {
               min: 2,
-              max: 24,
-              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
+              max: 14,
+              message: "输入长度为2-14的内容，可包含中英文、数字及特殊符号",
               trigger: "blur"
-            },
+            }, 
             { validator: checkProjectStr, trigger: "blur" }
           ],
           introduce: [
-            { required: true, message: "请输入圈子名称", trigger: "blur" },
+            { required: true, message: "请输入圈子介绍", trigger: "blur" },
             {
               min: 2,
-              max: 24,
-              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
+              max: 40,
+              message: "输入长度为2-40的内容，可包含中英文、数字及特殊符号",
               trigger: "blur"
             },
             { validator: checkProjectStr, trigger: "blur" }
           ],
+          headUrl: [
+            { required: true, message: "请选择圈子头像", trigger: "blur" }
+          ],
           dynamicFlag: [
             { required: true, message: "请选择内容发布权限", trigger: "blur" },
           ]
         },
         imgMouseOver1: false,
         uploadImgMessage1: false,//未上传图片，校验提示语
-        imgMouseOver2: false,
-        uploadImgMessage2: false,
         contentList: [
           {
             value: 1,
@@ -137,8 +120,25 @@
           val: this.formData[name]
 
         })
-      }
-      ,
+      },
+      //表单校验
+      submitForm() {
+        let formName = "formData";
+        let flag = null;
+        if (!this.formData.headUrl){
+          this.uploadImgMessage1 = true;
+        }
+        debugger
+        this.$refs[formName].validate(valid => {
+          if (valid&&this.formData.headUrl!="") {
+            flag = true;
+          } else {
+            console.log("error submit!!");
+            flag = false;
+          }
+        });
+        this.$emit('returnIsNext', flag);
+      },
       //上传圈子头像
       beforeUploadPic1(file) {
         let fileLimit = {
@@ -152,18 +152,6 @@
         };
         this.beforeUpload(file, fileLimit);
       },
-      beforeUploadPic2(file) {
-        let fileLimit = {
-          width: 750,
-          height: 420,
-          size: 2,
-          sizeText: "2Mb",
-          key: "coverUrl",
-          more: "imgUrl2More",
-          show: "uploadImgMessage2"
-        };
-        this.beforeUpload(file, fileLimit);
-      },
       //上传图片
       beforeUpload(file, fileLimit) {
         let vm = this;
@@ -186,7 +174,7 @@
           image.onload = function () {
             let _this = this;
             if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
-            // if (false) {
+              // if (false) {
               vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
             } else {
               openLoading(vm);
@@ -217,10 +205,6 @@
           vm.formData.headUrl = "";
           vm.imgMouseOver1 = false;
         }
-        if (type == 2) {
-          vm.formData.coverUrl = "";
-          vm.imgMouseOver2 = false;
-        }
       }
     }
   }

src/views/yqrange/create-range.vue

@@ -18,7 +18,7 @@
       </el-row>
       <div class="first-step" v-if="active === 0">
         <p class="p-title">基础信息</p>
-        <base-info :formData="formData" @returnTypeData="returnTypeData">
+        <base-info :formData="formData" @returnTypeData="returnTypeData" @returnIsNext="returnIsNext" ref='child'>
         </base-info>
       </div>
       <div class="second-step" v-else-if="active === 1">
@@ -55,7 +55,6 @@
           name: '',
           headUrl: '',
           imgUrl1More: {},
-          coverUrl: '',
           imgUrl2More: {},
           introduce: '',
           dynamicFlag: '',
@@ -81,8 +80,9 @@
       //下一步
       nextStep() {
         // debugger
-        this.commitQuanziInfo();
+        this.$refs.child.submitForm();
       },
+      
       //完成
       complete() {
         console.log(this.formData.id);
@@ -107,6 +107,12 @@
         });
        
        },
+       returnIsNext(flag){
+         debugger
+         if (flag == true){
+          this.commitQuanziInfo();
+         }
+       },
       returnTypeData(item) {
         this.formData[item.name] = item.val
       },