提交

jsowell-ui/src/views/pile/merchant/components/adapayMember.vue

@@ -97,23 +97,54 @@
                     <el-form-item label="企业邮箱">
                         <el-input v-model="dialogForm.email"></el-input>
                     </el-form-item>
-                    <el-form-item label="上传附件" prop="imgList">
+                    <el-form-item  label="上传法人身份证正面照" >
-                        <el-upload
+                        <el-upload list-type="picture-card" :action="actionUrl" :headers="headers" :on-success="idCardSuccess"
-                            class="upload-demo"
+                                   :on-remove="idCardRemove"
-                            :action="actionUrl"
+                                   :file-list="idCardList"
-                            :headers="headers"
+                                   :limit="1"
-                            :on-success="handleSuccess"
+                                   accept=".png,.jpg"
-                            :on-preview="handlePreview"
+                                   :on-exceed="idCardExceed">
-                            :on-remove="handleRemove"
+                            <i class="el-icon-plus"></i>
-                            :file-list="fileList"
+                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
-                            list-type="picture"
-                            :limit="4"
-                            accept=".png,.jpg"
-                            :on-exceed="handleExceed">
-                            <el-button size="small" type="primary">点击上传</el-button>
-                            <div slot="tip" class="el-upload__tip">上传法人身份证正面照，法人身份证反面照，开户银行许可证</div>
                         </el-upload>
                     </el-form-item>
+                    <el-form-item  label="上传法人身份证反面照" >
+                        <el-upload :action="actionUrl" :headers="headers" :on-success="sideCardSuccess"
+                                   :on-remove="sideCardRemove"
+                                   :file-list="sideCardList"
+                                   list-type="picture-card"
+                                   :limit="1"
+                                   accept=".png,.jpg"
+                                   :on-exceed="sideCardExceed">
+                            <i class="el-icon-plus"></i>
+                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item  label="上传开户银行许可证" >
+                        <el-upload :action="actionUrl" :headers="headers" :on-success="depositBankSuccess"
+                                   :on-remove="depositBankRemove"
+                                   :file-list="depositBankList"
+                                   list-type="picture-card"
+                                   :limit="1"
+                                   accept=".png,.jpg"
+                                   :on-exceed="depositBankExceed">
+                            <i class="el-icon-plus"></i>
+                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item  label="上传营业执照" >
+                        <el-upload :action="actionUrl" :headers="headers" :on-success="businessSuccess"
+                                   :on-remove="businessRemove"
+                                   :file-list="businessList"
+                                   list-type="picture-card"
+                                   :limit="1"
+                                   accept=".png,.jpg"
+                                   :on-exceed="businessExceed">
+                            <i class="el-icon-plus"></i>
+                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
+                        </el-upload>
+                    </el-form-item>
+
                     <el-form-item label="银行类型" prop="bankCode">
                          <el-select v-model="dialogForm.bankCode" filterable placeholder="请选择">
     <el-option
@@ -318,40 +349,6 @@
 <!--                    </el-form-item>-->
 <!--                </el-form>-->
             </template>
-            <!-- <div class="txt">
-                <div v-if="adapayCorpMember.auditState == 'B' || adapayCorpMember.auditState == 'C'|| adapayCorpMember.auditState == 'D'">
-              <div style="font-size: 14px;">审核不成功，需要重新填写信息
-                <el-button  type="primary" @click="dialog=true">新建</el-button>
-              </div>
-            </div>
-            <div>{{auditStatus(adapayCorpMember.auditState)}}</div>
-            <div style="font-size: 14px;margin: 10px 0;">{{adapayCorpMember.auditDesc}}</div>
-            </div> -->
-            <!-- <div v-if="adapayCorpMember.auditState == 'E'"> -->
-            <!-- <el-table :data="adapayCorpMember"
-      style="width: 100%">
-      <el-table-column
-        prop="name"
-        label="企业名称"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="申请状态">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="申请状态描述">
-      </el-table-column>
-       <el-table-column
-        prop="address"
-        label="操作">
-        <template slot-scope="scoped">
-            <div>详情</div>
-        </template>
-      </el-table-column>
-            </el-table> -->
-
         </el-card>
         <el-dialog title="修改信息" :visible.sync="updateDialog" width="50%">
             <el-form :model="adapayCorpMember" :rules="adapayCorpRules" ref="dialogForm" label-width="220px">
@@ -402,21 +399,51 @@
                 <el-form-item label="企业邮箱">
                     <el-input v-model="adapayCorpMember.email"></el-input>
                 </el-form-item>
-                <el-form-item label="上传附件" prop="imgList">
+                <el-form-item  label="上传法人身份证正面照">
-                    <el-upload
+                    <el-upload list-type="picture-card" :action="actionUrl" :headers="headers" :on-success="idCardSuccess"
-                        class="upload-demo"
+                               :on-remove="idCardRemove"
-                        :action="actionUrl"
+                               :file-list="idCardList"
-                        :headers="headers"
+                               :limit="1"
-                        :on-success="handleSuccess"
+                               accept=".png,.jpg"
-                        :on-preview="handlePreview"
+                               :on-exceed="idCardExceed">
-                        :on-remove="handleRemove"
+                        <i class="el-icon-plus"></i>
-                        :file-list="fileList"
+                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
-                        list-type="picture"
+                    </el-upload>
-                        :limit="4"
+                </el-form-item>
-                        accept=".png,.jpg"
+                <el-form-item  label="上传法人身份证反面照">
-                        :on-exceed="handleExceed">
+                    <el-upload :action="actionUrl" :headers="headers" :on-success="sideCardSuccess"
-                        <el-button size="small" type="primary">点击上传</el-button>
+                               :on-remove="sideCardRemove"
-                        <div slot="tip" class="el-upload__tip">上传法人身份证正面照，法人身份证反面照，开户银行许可证以及营业执照</div>
+                               :file-list="sideCardList"
+                               list-type="picture-card"
+                               :limit="1"
+                               accept=".png,.jpg"
+                               :on-exceed="sideCardExceed">
+                        <i class="el-icon-plus"></i>
+                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item  label="上传开户银行许可证">
+                    <el-upload :action="actionUrl" :headers="headers" :on-success="depositBankSuccess"
+                               :on-remove="depositBankRemove"
+                               :file-list="depositBankList"
+                               list-type="picture-card"
+                               :limit="1"
+                               accept=".png,.jpg"
+                               :on-exceed="depositBankExceed">
+                        <i class="el-icon-plus"></i>
+                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item  label="上传营业执照">
+                    <el-upload :action="actionUrl" :headers="headers" :on-success="businessSuccess"
+                               :on-remove="businessRemove"
+                               :file-list="businessList"
+                               list-type="picture-card"
+                               :limit="1"
+                               accept=".png,.jpg"
+                               :on-exceed="businessExceed">
+                        <i class="el-icon-plus"></i>
+                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件格式</div>
                     </el-upload>
                 </el-form-item>
                 <el-form-item>
@@ -607,7 +634,7 @@ export default {
                     {
                         required: true,
                         message: "请填写银行类型",
-                        trigger: "blur",
+                        trigger: "change",
                     }
                 ],
                 cardNo:[
@@ -617,13 +644,6 @@ export default {
                         trigger: "blur",
                     }
                 ],
-                imgList: [
-                    {
-                        required: true,
-                        message: "请上传四张照片",
-                        trigger: "change",
-                    }
-                ],
                 businessName:[{
                     required: true,
                     message: "请输入企业名称",
@@ -700,10 +720,86 @@ export default {
                 Authorization: "Bearer " + getToken(),
             },
             imageUrl: null,
-            fileList: [],
+            idCardList:[],
+            sideCardList:[],
+            depositBankList:[],
+            businessList:[]
         };
     },
     methods: {
+        businessExceed(files) {
+            this.$message.warning(
+                `当前限制选择 1 张图片，本次选择了 ${
+                    files.length
+                }张`
+            );
+        },
+        businessSuccess(res, file) {
+            this.$refs.dialogForm.clearValidate()
+            this.imageUrl = URL.createObjectURL(file.raw);
+            console.log("图片上传成功 url：", this.imageUrl);
+            this.businessList.push({ url: res.url });
+        },
+        businessRemove(file, fileList) {
+            console.log("移除图片", file, fileList);
+            const i = this.businessList.findIndex((x) => x.uid === file.uid);
+            this.businessList.splice(i, 1);
+        },
+        depositBankExceed(files) {
+            this.$message.warning(
+                `当前限制选择 1 张图片，本次选择了 ${
+                    files.length
+                }张`
+            );
+        },
+        depositBankSuccess(res, file) {
+            this.$refs.dialogForm.clearValidate()
+            this.imageUrl = URL.createObjectURL(file.raw);
+            console.log("图片上传成功 url：", this.imageUrl);
+            this.depositBankList.push({ url: res.url });
+        },
+        depositBankRemove(file, fileList) {
+            console.log("移除图片", file, fileList);
+            const i = this.depositBankList.findIndex((x) => x.uid === file.uid);
+            this.depositBankList.splice(i, 1);
+        },
+        sideCardExceed(files) {
+            this.$message.warning(
+                `当前限制选择 1 张图片，本次选择了 ${
+                    files.length
+                }张`
+            );
+        },
+        sideCardSuccess(res) {
+            this.$refs.dialogForm.clearValidate()
+            console.log("图片上传成功 url：", this.imageUrl);
+            this.sideCardList.push({ url: res.url });
+        },
+        sideCardRemove(file, fileList) {
+            console.log("移除图片", file, fileList);
+            // 从pics数组中，找到图片对应的索引值
+            const i = this.sideCardList.findIndex((x) => x.uid === file.uid);
+            // 调用splice方法，移除图片信息
+            this.sideCardList.splice(i, 1);
+        },
+        idCardExceed(files) {
+            this.$message.warning(
+                `当前限制选择 1 张图片，本次选择了 ${
+                    files.length
+                }张`
+            );
+        },
+        idCardSuccess(res, file) {
+            this.$refs.dialogForm.clearValidate()
+            this.idCardList.push({ url: res.url });
+        },
+        idCardRemove(file, fileList) {
+            console.log("移除图片", file, fileList);
+            // 从pics数组中，找到图片对应的索引值
+            const i = this.idCardList.findIndex((x) => x.uid === file.uid);
+            // 调用splice方法，移除图片信息
+            this.idCardList.splice(i, 1);
+        },
         updateDialogForm(form){
             console.log(this.adapayCorpMember,'this.adapayCorpMember')
             this.adapayCorpMember.merchantId  = this.merchantId
@@ -729,36 +825,6 @@ export default {
                 return str.statusTitle
             }
         },
-        handleExceed(files, fileList) {
-            this.$message.warning(
-                `当前限制选择 4 张图片，本次选择了 ${
-                    files.length
-                } 张，共选择了 ${files.length + fileList.length} 张`
-            );
-        },
-        handleSuccess(res, file) {
-            this.$refs.dialogForm.clearValidate()
-            // this.$refs.updateForm.clearValidate()
-            this.imageUrl = URL.createObjectURL(file.raw);
-            console.log("图片上传成功 url：", this.imageUrl);
-            // console.log("图片上传成功 res：", res);
-            this.fileList.push({ url: res.url });
-            // console.log('push方法', this.fileList);
-            this.dialogForm.imgList = this.fileList.map(obj => obj.url)
-            console.log(this.dialogForm.imgList,'this.dialogForm.imgList');
-        },
-        handleRemove(file, fileList) {
-            console.log("移除图片", file, fileList);
-            // 从pics数组中，找到图片对应的索引值
-            const i = this.fileList.findIndex((x) => x.uid === file.uid);
-            // 调用splice方法，移除图片信息
-            this.fileList.splice(i, 1);
-        },
-        handlePreview(file) {
-            // console.log(file);
-            this.dialogImageUrl = file.url;
-            console.log(this.dialogImageUrl);
-        },
         provCode(code){
             let arr = this.options.find(item => item.value == code)
             if (arr ==null){
@@ -770,7 +836,6 @@ export default {
         },
         areaCode(area){
             let arr = this.areaList.find(item => item.value === area);
-            // console.log("areaCode code:{}, value:{}", area, arr);
             if (arr ==null){
                 return '一'
             } else{
@@ -783,13 +848,17 @@ export default {
             this.dialogForm.areaCode = value[1]
         },
         submitDialogForm(dialogForm){
-            console.log(this.dialogForm);
             this.$refs[dialogForm].validate((valid) =>{
                 if (valid) {
-                    if(this.dialogForm.imgList.length !== 3 ) return this.$message.warning('请上传三张照片')
+                    if(!this.idCardList[0] || !this.sideCardList[0] || !this.depositBankList[0] ||!this.businessList[0]){
-                    console.log(valid,'valid');
+                        return this.$message.warning('请上传图片')
+                    } else{
+                        this.dialogForm.imgList = [this.idCardList[0].url,this.sideCardList[0].url,this.depositBankList[0].url,this.businessList[0].url]
+                    }
+                    console.log(this.dialogForm.imgList.length,'this.dialogForm.imgList')
                     createSettleAccount(this.dialogForm).then((response) =>{
                         console.log('新增',response);
+                        this.$message.success('新增成功')
                         this.dialog = false
                         this.selectAdapayMember();
                     })
@@ -856,6 +925,9 @@ export default {
 ::v-deep .el-input .el-input--medium{
     width: 43% !important;
 }
+.freePic ::v-deep .el-upload--picture-card {
+    display: none;
+}
 .status-card{
     display: flex;background-color: #f6f7f8;padding: 15px;
 }