大B logo

package.json

@@ -29,6 +29,7 @@
     "vue-awesome-swiper": "^3.1.3",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.14.0",
+    "vue-image-crop-upload": "^2.5.0",
     "vue-qrcode-component": "^2.1.1",
     "vue-router": "^3.0.3",
     "vue-select": "^3.1.0",

src/components/bigbusiness/addFirstStep.vue

@@ -31,32 +31,42 @@
                 <el-form-item :label="$t('workPlace.basicForm.companyLogo')+'：'" required class="businesscard">
                     <p class="imgTitle" style="margin-bottom: 10px;">{{$t("workPlace.basicForm.imgLogoTitle")}}</p>
                     <div class="uploadImg">
-                        <el-upload
-                                name="fileUpload"
-                                :limit="1"
-                                :on-exceed="handleExceed"
-                                list-type="picture-card"
-                                class="uploadImgCircle"
-                                :action=uploadHostHeader
-                                :multiple="false"
-                                :file-list="fileList"
-                                :on-preview="handlePictureCardPreview"
-                                :on-success="uploadComplete"
-                                :before-upload="handleBeforeFile"
-                                :on-remove="handleRemove"
-                        >
-                            <i class="iconfont icon-jiahao"></i>
-                            <p class="uploadImgTitle">{{$t("workPlace.basicForm.uploadImg")}}</p>
-                        </el-upload>
-                        <el-dialog :visible.sync="dialogVisible">
-                            <img width="100%" :src="dialogImageUrl" alt="">
-                        </el-dialog>
+                        <uploadCmpt :returnFrom="ruleForm" @postOneThing="handelChangeImgUrl" @postErrorText="postErrorText" @postErrorText2="postErrorText2">
+
+                        </uploadCmpt>
+                        <!--<el-upload-->
+                                <!--name="fileUpload"-->
+                                <!--:limit="1"-->
+                                <!--:on-exceed="handleExceed"-->
+                                <!--list-type="picture-card"-->
+                                <!--class="uploadImgCircle"-->
+                                <!--:action=uploadHostHeader-->
+                                <!--:multiple="false"-->
+                                <!--:file-list="fileList"-->
+                                <!--:on-preview="handlePictureCardPreview"-->
+                                <!--:on-success="uploadComplete"-->
+                                <!--:before-upload="handleBeforeFile"-->
+                                <!--:on-remove="handleRemove"-->
+                        <!--&gt;-->
+                            <!--<i class="iconfont icon-jiahao"></i>-->
+                            <!--<p class="uploadImgTitle">{{$t("workPlace.basicForm.uploadImg")}}</p>-->
+                        <!--</el-upload>-->
+                        <!--<el-dialog :visible.sync="dialogVisible">-->
+                            <!--<img width="100%" :src="dialogImageUrl" alt="">-->
+                        <!--</el-dialog>-->
                     </div>
-                    <span class="errorText" v-if="isShowErrorText1">{{$t("workPlace.basicForm.emptyLogo")}}</span>
-                    <span class="errorText" v-if="isShowErrorText2">{{$t("personalAuth.errorformatCard")}}</span>
-                    <span class="errorText" v-if="isShowErrorText3">{{$t("personalAuth.errorSizeCard")}}</span>
-                    <span class="errorText" v-if="isShowErrorText4">{{$t("personalAuth.uploadingCard")}}</span>
-                    <span class="errorText" v-if="isShowErrorText5">{{$t("personalAuth.errorExceedCard")}}</span>
+                    <div class="errorTitle">
+                        <span class="errorText" v-if="isShowErrorText1">{{$t("workPlace.basicForm.emptyLogo")}}</span>
+                        <span class="errorText" v-if="isShowErrorText2">{{$t("personalAuth.errorformatCard")}}</span>
+                        <span class="errorText" v-if="isShowErrorText3">{{$t("personalAuth.errorSizeCard")}}</span>
+                        <span class="errorText" v-if="isShowErrorText4">{{$t("personalAuth.uploadingCard")}}</span>
+                        <span class="errorText" v-if="isShowErrorText5">{{$t("personalAuth.errorExceedCard")}}</span>
+                    </div>
+                    <!--<span class="errorText" v-if="isShowErrorText1">{{$t("workPlace.basicForm.emptyLogo")}}</span>-->
+                    <!--<span class="errorText" v-if="isShowErrorText2">{{$t("personalAuth.errorformatCard")}}</span>-->
+                    <!--<span class="errorText" v-if="isShowErrorText3">{{$t("personalAuth.errorSizeCard")}}</span>-->
+                    <!--<span class="errorText" v-if="isShowErrorText4">{{$t("personalAuth.uploadingCard")}}</span>-->
+                    <!--<span class="errorText" v-if="isShowErrorText5">{{$t("personalAuth.errorExceedCard")}}</span>-->
                 </el-form-item>
 
                 <el-form-item :label="$t('workPlace.basicForm.industryInvolved')+'：'" prop="companyIndustryListData">
@@ -234,9 +244,12 @@
     import api from '../../views/bigbusiness/api/api';
     import publicFunc from '../../common/public';
     import validate from '../../common/validate';
-
+    import uploadCmpt from '../common/uploadCmpt'
     export default {
         name: "addFirstStep",
+        components:{
+            uploadCmpt
+        },
         props: {
             isBtn:"",
             isSale:{
@@ -837,6 +850,32 @@
                     }
                 })
             },
+
+            //给图片路径赋值
+            handelChangeImgUrl(data){
+                console.log(data)
+                // this.ruleForm.companyLogoUrl = data;
+                // this.identityUrl = this.returnFrom.url;
+                console.log(this.ruleForm)
+            },
+
+            postErrorText(data){
+                this.flag = data;
+                this.isShowErrorText1 = false;
+                this.isShowErrorText2 = false;
+                this.isShowErrorText3 = false;
+                this.isShowErrorText4 = false;
+                this.isShowErrorText5 = false;
+            },
+
+            postErrorText2(data){
+                this.flag = data;
+                this.isShowErrorText1 = false;
+                this.isShowErrorText2 = true;
+                this.isShowErrorText3 = false;
+                this.isShowErrorText4 = false;
+                this.isShowErrorText5 = false;
+            }
         },
 
         mounted() {
@@ -880,4 +919,13 @@
             width: 180px;
         }
     }
+    .errorTitle{
+        span.errorText{
+            position: static;
+            color: #ff4949;
+            font-size: 12px;
+            line-height: 1;
+            padding-top: 16px;
+        }
+    }
 </style>
\ No newline at end of file

src/components/common/uploadCmpt.vue

+<template>
+    <div>
+        <div :class="this.$i18n.locale=='zh-CN'?'uploadCmptZh':'uploadCmptEn'">
+            <img :src="imgDataUrl" width="130" height="130" v-if='this.imgDataUrl!=""'/>
+            <a class="uploadClick" @click="toggleShow"></a>
+        </div>
+        <my-upload field="fileUpload"
+                   @src-file-set="srcFileSet"
+                   @crop-success="cropSuccess"
+                   @crop-upload-success="cropUploadSuccess"
+                   @crop-upload-fail="cropUploadFail"
+                   v-model="show"
+                   :width="130"
+                   :maxSize="2"
+                   ref="uploadCmpt"
+                   :height="130"
+                   :params="params"
+                   :noRotate='false'
+                   :url=upload_Url
+                   :langType="this.$i18n.locale=='zh-CN'?'zh':'en'"
+                   imgFormat="png"></my-upload>
+    </div>
+</template>
+<script>
+    import myUpload from 'vue-image-crop-upload';
+    export default {
+        props:[
+            'returnFrom'
+        ],
+        components: {
+            'my-upload': myUpload
+        },
+        data(){
+            return{
+                upload_Url:process.env.VUE_APP_UPLOAD_LOGO,
+                show: false,
+                params: {
+                    name: 'fileUpload'
+                },
+                imgDataUrl: '', // the datebase64 url of created image
+                isShowErrorText1: false,
+                isShowErrorText2: false,
+                isShowErrorText3: false,
+                isShowErrorText4: false,
+                isShowErrorText5: false,
+                isSuccess:false
+            }
+        },
+        methods:{
+            srcFileSet(fileName, fileType, fileSize){
+                var nameArr = fileName.split('.');
+                const isPng = nameArr[nameArr.length - 1] === 'png';
+                const isJpg = nameArr[nameArr.length - 1] === 'jpg';
+                // const isJpeg = nameArr[nameArr.length - 1] === 'jpeg';
+                const isPNG = nameArr[nameArr.length - 1] === 'PNG';
+                const isJPG = nameArr[nameArr.length - 1] === 'JPG';
+                // const isJPEG = nameArr[nameArr.length - 1] === 'JPEG';
+                const isLt2M = fileSize / 1024 / 1024 <= 2;
+                if (!isPNG && !isJPG && !isPng && !isJpg) {
+                    this.isShowErrorText1 = false;
+                    this.isShowErrorText2 = true;
+                    this.isShowErrorText3 = false;
+                    this.isShowErrorText4 = false;
+                    this.isShowErrorText5 = false;
+                    this.$emit("postErrorText2",1)
+                    this.$refs.uploadCmpt.off(true);
+                } else {
+                    this.isShowErrorText1 = false;
+                    this.isShowErrorText2 = false;
+                    this.isShowErrorText3 = false;
+                    this.isShowErrorText4 = false;
+                    this.isShowErrorText5 = false;
+                    this.$emit("postErrorText",2)
+                }
+            },
+            toggleShow() {
+                this.show = !this.show;
+            },
+            cropSuccess(imgDataUrl, field){
+                console.log(2333)
+                this.imgDataUrl = imgDataUrl;
+            },
+            cropUploadSuccess(jsonData, field){
+                this.isSuccess = true;
+                this.returnFrom.companyLogoUrl = jsonData.result.fileUpload;
+                this.$emit('postOneThing',this.returnFrom.companyLogoUrl);
+            },
+            cropUploadFail(status, field){
+
+            }
+        },
+        mounted(){
+
+        }
+    }
+</script>
+<style scoped="scoped" lang="scss">
+    .uploadCmptZh{
+        position: relative;
+        width:130px;
+        height:130px;
+        background: url(../../assets/img/uploadZh.png) no-repeat;
+        background-size: cover;
+        border-radius: 6px;
+
+        img{
+            border: 1px solid #c0ccda;
+            border-radius: 6px;
+
+        }
+    }
+    .uploadCmptEn{
+        position: relative;
+        width:130px;
+        height:130px;
+        background: url(../../assets/img/uploadEn.png) no-repeat;
+        background-size: cover;
+        border-radius: 6px;
+        img{
+            border: 1px solid #c0ccda;
+            border-radius: 6px;
+
+        }
+    }
+    .uploadClick{
+        width:130px;
+        height:130px;
+        display: block;
+        overflow: hidden;
+        position: absolute;
+        cursor: pointer;
+        left:0;
+        top:0;
+    }
+</style>