zc新需求

src/views/platform_manage/companyInfo/recruit/components/component.vue

@@ -23,6 +23,19 @@
             <el-form-item label="发布人：">
               <el-input v-model="contentForm.releaser" style="width:30%;min-width:400px;" maxlength="10"></el-input>
             </el-form-item>
+            <el-form-item label="背景图片：" prop="cover">
+              <div class="upload_img">
+                <img :src="coverUrl(contentForm.cover)" class="cover" v-if="contentForm.cover">
+                <div class="upload_default" v-else><img src="@/assets/img/common/default_img.png"></div>
+              </div>
+              <div style="float:left">
+                <el-upload :action="`${fileUrl}upload`" :show-file-list="false" 
+                  :on-success="handleImageSuccess" :before-upload="beforeImageUpload">
+                  <div class="upload_btn">上传图片</div>
+                </el-upload>
+                <div class="line_tip">仅支持jpg、jpeg、png、gif、bmp格式，大小不超过2M。</div>
+              </div>
+            </el-form-item>
             <el-form-item label="链接地址：">
               <el-radio-group v-model="contentForm.linkType">
                 <el-radio :label="'0'">默认</el-radio>
@@ -147,7 +160,7 @@ export default {
         linkUrl:'http://',
         addressLinkId:null,
         fileName:null,
-        // cover:null,
+        cover:null,
         // type:'1',
       },
       rules: {
@@ -168,6 +181,9 @@ export default {
           { required: true, message:'请选择发表时间', trigger:'change'},
           { validator: valValidate },
         ],
+        cover:[
+          { required: true , message: '请上传背景图片' },
+        ],
       },
       isShowUpdate:true,
       dateBeginTime: {
@@ -241,27 +257,28 @@ export default {
         }
       })
     },
-    handleCoverSuccess(response, file) { //封面上传成功
-      this.contentForm.cover = response
-      this.isShowUpdate = false
-      this.$nextTick(() => {
-        this.isShowUpdate = true
-      })
+    verify() { // 验证富文本是否输入内容
+      if(this.contentForm.content.length > 0) {
+        this.$refs.content.clearValidate()
+      }
     },
-    beforeCoverUpload(file) { //图片限制
+    beforeImageUpload(file){
       const isFile = file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png' || file.type == 'image/bmp' || file.type == 'image/gif'
-      const isLimit = file.size / 1024 / 1024 < 2;
+      const isLimit = file.size / 1024  < 2048;
       if (!isFile) {
         this.$message.error('上传图片仅支持jpg、jpeg、png、gif、bmp格式!');
-      }else if (!isLimit) {
-        this.$message.error('上传图片大小不能超过2MB!');
+      }
+      if (!isLimit) {
+        this.$message.error('上传图片大小不能超过2M!');
       }
       return isFile && isLimit;
     },
-    verify() { // 验证富文本是否输入内容
-      if(this.contentForm.content.length > 0) {
-        this.$refs.content.clearValidate()
-      }
+    handleImageSuccess(response, file) { //图片上传成功
+      this.contentForm.cover = response;
+      this.isShowUpdate = false
+      this.$nextTick(() => {
+        this.isShowUpdate = true
+      })
     },
     handleSuccess(response, file) { //附件上传成功
       this.loading = false