修改汇付支付配置页面

jsowell-ui/src/api/adapayMember/adapayMember.js

@@ -40,3 +40,11 @@ export function queryAdapayAccountBalance(data) {
     data: data
   })
 }
+// 新增企业
+export function createCorpMember(data) {
+  return request({
+    url: '/adapay/member/createCorpMember',
+    method: 'post',
+    data: data
+  })
+}

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

@@ -1,13 +1,13 @@
 <template>
-    <div>
+    <div class="app-container">
-        <el-card v-if="adapayMember == null" shadow="hover">
+        <el-card v-if="adapayMember == null" shadow="hover" style="margin-bottom:10px">
             <div style="margin: 12px 0" >
                 没有查询到汇付会员配置，请点击按钮创建汇付会员，汇付结算账号
                 <!-- 刷新按钮 -->
                 <el-button
                     size="medium"
                     type="primary"
-                    @click="openCreateAdapaySettleAccount = true"
+                    @click="dialog = true"
                 >
                     创建汇付会员与结算账号
                 </el-button>
@@ -15,10 +15,9 @@
         </el-card>
         <template  v-else>
               <el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
-            <!-- <div style="margin: 12px 0">汇付会员</div> -->
             <h2>汇付会员</h2>
             <hr>
-            <el-descriptions :column="2" >
+            <!-- <el-descriptions :column="2" >
                 <el-descriptions-item label="会员昵称">{{
                     ruleForm.nickname
                 }}</el-descriptions-item>
@@ -28,13 +27,13 @@
                 <el-descriptions-item label="会员性别">{{
                     ruleForm.gender === "FEMALE" ? "女" : "男"
                 }}</el-descriptions-item>
-                <el-descriptions-item label="会员地址">{{
+                <el-descriptions-item label="公司地址">{{
                     ruleForm.location
                 }}</el-descriptions-item>
-            </el-descriptions>
+            </el-descriptions> -->
         </el-card>
 
-        <el-card class="box-card" shadow="hover" style="margin-top:20px">
+        <el-card class="box-card" shadow="hover" style="margin:20px 0">
             <!-- <div style="margin: 12px 0">汇付结算账户</div> -->
             <h2>汇付结算账户</h2>
             <hr>
@@ -58,94 +57,15 @@
             </el-descriptions>
         </el-card>
         </template>
-        <el-dialog
+        <!-- <el-card shadow="hover">
-            title="创建汇付会员与结算账户"
+            <div style="margin: 12px 0">没有查询到企业会员配置，请点击按钮创建企业账号
-            :visible.sync="openCreateAdapaySettleAccount"
+                 <el-button size="medium" type="primary" @click="enterpriseDialog = true">创建企业汇付会员与结算账号</el-button>
-            width="25%"
+            </div>
-            append-to-body
+        </el-card> -->
-        >
+               <!-- <el-form-item label="会员昵称" prop="nickname">
-            <el-form
-                :model="ruleForm"
-                :rules="rules"
-                ref="ruleForm"
-                label-width="150px"
-                class="demo-ruleForm"
-            >
-               <el-form-item label="会员昵称" prop="nickname">
                     <el-input v-model="ruleForm.nickname"></el-input>
-                </el-form-item>
+                </el-form-item> -->
-                <el-form-item label="会员邮箱" prop="email">
-                    <el-input v-model="ruleForm.email"></el-input>
-                </el-form-item>
-                <el-form-item label="会员性别" prop="gender">
-                    <el-radio-group v-model="ruleForm.gender">
-                        <el-radio label="MALE">男</el-radio>
-                        <el-radio label="FEMALE">女</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="会员地址" prop="location">
-                    <!-- type="textarea" -->
-                    <el-input v-model="ruleForm.location"></el-input>
-                </el-form-item>
-                <el-form-item label="银行账户类型" prop="bankAcctType">
-                    <el-radio-group v-model="ruleForm.bankAcctType">
-                        <el-radio label="1">对公</el-radio>
-                        <el-radio label="2">对私</el-radio>
-                    </el-radio-group>
-                </el-form-item>
              
-                <el-form-item label="银行卡号" prop="cardId">
-                    <el-input v-model="ruleForm.cardId"></el-input>
-                </el-form-item>
-                <el-form-item label="银行卡对应的户名" prop="cardName">
-                    <el-input v-model="ruleForm.cardName"></el-input>
-                </el-form-item>
-                <el-form-item
-                v-if="ruleForm.bankAcctType === '2'"
-                    label="证件号"
-                    prop="certId"
-                    :rules="
-                        ruleForm.bankAcctType === '2'
-                            ? rules.certId
-                            : [{ required: false }]
-                    "
-                >
-                    <el-input v-model="ruleForm.certId"></el-input>
-                </el-form-item>
-
-                <el-form-item label="手机号" prop="telNo">
-                    <el-input v-model="ruleForm.telNo"></el-input>
-                </el-form-item>
-                <el-form-item
-                v-if="ruleForm.bankAcctType === '1'"
-                    label="银行编码"
-                    prop="bankCode"
-                    :rules="
-                        ruleForm.bankAcctType === '1'
-                            ? rules.bankCode
-                            : [{ required: false }]
-                    "
-                >
-                    <el-input v-model="ruleForm.bankCode"></el-input>
-                </el-form-item>
-                <el-form-item
-                    label="银行账户开户银行所在省份编码"
-                    prop="provCode"
-                    :rules="
-                        ruleForm.bankAcctType === '1'
-                            ? rules.provCode
-                            : [{ required: false }]
-                    "
-                    v-if="ruleForm.bankAcctType === '1'"
-                >
-                 <el-cascader
-                        v-model="value"
-                        :options="options"
-                        @change="handleChange"
-                        :props="cateProps"
-                    ></el-cascader>
-                    <!-- <el-input v-model="ruleForm.provCode"></el-input> -->
-                </el-form-item>
                 <!-- <el-form-item
                     label="银行账户开户银行所在地区编码"
                     prop="areaCode"
@@ -157,8 +77,143 @@
                 >
                     <el-input v-model="ruleForm.areaCode"></el-input>
                 </el-form-item> -->
+                    <!-- <el-button type="primary" @click="submitForm('ruleForm')"
+                        >提交</el-button
+                    > -->   
+               <!-- <el-form-item label="会员昵称" prop="nickname">
+                    <el-input v-model="ruleForm.nickname"></el-input>
+                </el-form-item> -->
+        <el-dialog title="创建结算账户" :visible.sync="dialog" width="50%">
+            <el-form :model="dialogForm" :rules="dialogRules" ref="dialogForm" label-width="220px">
+                   <el-form-item label="银行账户类型" prop="bankAcctType">
+                    <el-radio-group v-model="dialogForm.bankAcctType">
+                        <el-radio label="1">对公</el-radio>
+                        <el-radio label="2">对私</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <template v-if="dialogForm.bankAcctType === '1'">
+                    <el-form-item label="企业名称" prop="businessName">
+                    <el-input type="textarea" v-model="dialogForm.businessName" maxlength="50"></el-input>
+                </el-form-item>
+                <el-form-item label="省份编码" prop="provCode">
+                     <el-cascader
+                        v-model="value"
+                        :options="options"
+                        @change="enterpriseChange"
+                        :props="cateProps"
+                    ></el-cascader>
+                </el-form-item>
+                <el-form-item label="统一社会信用码" prop="socialCreditCode">
+                   <el-input v-model.number="dialogForm.socialCreditCode" maxlength="18"></el-input>
+                </el-form-item>
+                <el-form-item label="统一社会信用证有效期" prop="socialCreditCodeExpires">
+                   <el-input v-model.number="dialogForm.socialCreditCodeExpires" maxlength="8" placeholder="有效期格式为:20190909"></el-input>
+                </el-form-item>
+                <el-form-item label="经营范围" prop="businessScope">
+                   <el-input type="textarea" v-model="dialogForm.businessScope"></el-input>
+                </el-form-item>
+                <el-form-item label="法人姓名" prop="legalPerson">
+                   <el-input v-model="dialogForm.legalPerson"></el-input>
+                </el-form-item>
+                <el-form-item label="法人身份证号码" prop="legalCertId">
+                   <el-input v-model="dialogForm.legalCertId" maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="法人身份证有效期" prop="legalCertIdExpires">
+                   <el-input v-model.number="dialogForm.legalCertIdExpires" maxlength="8" placeholder="有效期格式为:20190909"></el-input>
+                </el-form-item>
+                <el-form-item label="法人手机号" prop="legalMp">
+                   <el-input v-model="dialogForm.legalMp"></el-input>
+                </el-form-item>
+                <el-form-item label="企业地址" prop="address">
+                   <el-input v-model="dialogForm.address"></el-input>
+                </el-form-item>
+                <el-form-item label="邮编">
+                   <el-input v-model="dialogForm.zipCode"></el-input>
+                </el-form-item>
+                <el-form-item label="企业电话">
+                   <el-input v-model="dialogForm.telphone"></el-input>
+                </el-form-item>
+                <el-form-item label="企业邮箱"> 
+                   <el-input v-model="dialogForm.email"></el-input>
+                </el-form-item>
+                <el-form-item label="上传附件">
+                    <el-upload
+                        class="upload-demo"
+                        :action="actionUrl"
+                        :headers="headers"
+                        :on-success="handleSuccess"
+                        :on-preview="handlePreview"
+                        :on-remove="handleRemove"
+                        :file-list="fileList"
+                        list-type="picture"
+                        :limit="3"
+                        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="银行代码" prop="bankCode">
+                   <el-input v-model="dialogForm.bankCode"></el-input>
+                </el-form-item>
+                <el-form-item label="银行卡号" prop="cardNo">
+                    <el-input v-model="dialogForm.cardNo"></el-input>
+                </el-form-item>
+                <el-form-item label="银行卡对应的户名" prop="cardName">
+                    <el-input v-model="dialogForm.cardName"></el-input>
+                </el-form-item>
+                </template>
+                <template v-else>
+                       <el-form-item label="会员邮箱" prop="email">
+                    <el-input v-model="dialogForm.email"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="会员性别" prop="gender">
+                    <el-radio-group v-model="dialogForm.gender">
+                        <el-radio label="MALE">男</el-radio>
+                        <el-radio label="FEMALE">女</el-radio>
+                    </el-radio-group>
+                </el-form-item> -->
+                <el-form-item label="银行卡号" prop="cardId">
+                    <el-input v-model="dialogForm.cardId"></el-input>
+                </el-form-item>
+                <el-form-item label="银行卡对应的户名" prop="cardName">
+                    <el-input v-model="dialogForm.cardName"></el-input>
+                </el-form-item>
+                <el-form-item
+                v-if="dialogForm.bankAcctType === '2'"
+                    label="证件号"
+                    prop="certId"
+                    :rules="
+                        dialogForm.bankAcctType === '2'
+                            ? dialogRules.certId
+                            : [{ required: false }]
+                    "
+                >
+                    <el-input v-model="dialogForm.certId"></el-input>
+                </el-form-item>
+
+                <el-form-item label="手机号" prop="telNo">
+                    <el-input v-model="dialogForm.telNo"></el-input>
+                </el-form-item>
+                <el-form-item
+                v-if="dialogForm.bankAcctType === '1'"
+                    label="银行编码"
+                    prop="bankCode"
+                    :rules="
+                        dialogForm.bankAcctType === '1'
+                            ? dialogRules.bankCode
+                            : [{ required: false }]
+                    "
+                >
+                    <el-input v-model="dialogForm.bankCode"></el-input>
+                </el-form-item>
+                  <el-form-item label="公司地址" prop="location">
+                    <!-- type="textarea" -->
+                    <el-input v-model="dialogForm.location"></el-input>
+                </el-form-item>
+                </template>
                 <el-form-item>
-                    <el-button type="primary" @click="submitForm('ruleForm')"
+                    <el-button type="primary" @click="submitDialogForm('dialogForm')"
                         >提交</el-button
                     >
                 </el-form-item>
@@ -170,36 +225,23 @@
 <script>
 import {
     selectAdapayMember,
-    createAdapayMember
+    createAdapayMember,createCorpMember
 } from "@/api/adapayMember/adapayMember";
+import { getToken } from "@/utils/auth";
 export default {
     props: ["merchantId"],
     data() {
         return {
+            dialog:false,
+            dialogForm:{},
+            enterpriseDialog:false, // 企业弹窗
             // 汇付会员
             adapayMember: '',
             openCreateAdapayMember: false,
             // 汇付结算账户
             adapaySettleAccount: null,
             openCreateAdapaySettleAccount: false,
-            ruleForm: {
+            dialogRules: {
-                adapayMemberId:null,
-                nickname: "",
-                email: "",
-                gender: "",
-                location: "",
-                cardId: "",
-                cardName: "",
-                certId: "",
-                telNo: "",
-                bankCode: "",
-                bankName: "",
-                bankAcctType: "",
-                provCode: "",
-                areaCode: "",
-                merchantId: this.merchantId,
-            },
-            rules: {
                 email: [
                     {
                         required: true,
@@ -304,6 +346,75 @@ export default {
                         trigger: "change",
                     },
                 ],
+                 businessName:[{
+                        required: true,
+                        message: "请输入企业名称",
+                        trigger: "blur",
+                    },],
+                provCode:[{
+                        required: true,
+                        message: "请选择省份编码",
+                        trigger: "blur",
+                    },],
+                socialCreditCode:[{
+                        required: true,
+                        message: "请输入统一社会信用码",
+                        trigger: "blur",
+                    },],
+                socialCreditCodeExpires:[{
+                        required: true,
+                        message: "请输入统一社会信用证有效期",
+                        trigger: "blur",
+                    },
+                     {
+                        type: "number",
+                        message: "请输入正确的统一社会信用证有效期",
+                        trigger: "blur",
+                    },
+                    ],
+                businessScope:[{
+                        required: true,
+                        message: "请输入经营范围",
+                        trigger: "blur",
+                    },],
+                legalPerson:[{
+                        required: true,
+                        message: "请输入法人姓名",
+                        trigger: "blur",
+                    },],
+                legalCertId:[{
+                        required: true,
+                        message: "请输入法人身份证号码",
+                        trigger: "blur",
+                    },
+                    ],
+                legalCertIdExpires:[{
+                        required: true,
+                        message: "请输入法人身份证有效期",
+                        trigger: "blur",
+                    },
+                    {
+                        type: "number",
+                        message: "请输入正确的法人身份证有效期",
+                        trigger: "blur",
+                    },
+                    ],
+                legalMp:[{
+                        required: true,
+                        message: "请输入法人手机号",
+                        trigger: "blur",
+                    },
+                      {
+                        pattern: /^1\d{10}$/,
+                        message: "手机号码格式有误",
+                        trigger: "blur",
+                    },
+                    ],
+                address:[{
+                        required: true,
+                        message: "请输入企业地址",
+                        trigger: "blur",
+                    },]
             },
             cateProps: {
                 expandTrigger: "click",
@@ -314,40 +425,86 @@ export default {
             value: [],
             options: [],
             settleAccount:{},
-            settleAccountList:[]
+            settleAccountList:[],
+            actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
+            dialogImageUrl: "",
+            headers: {
+                Authorization: "Bearer " + getToken(),
+            },
+            imageUrl: null,
+            fileList: [],
         };
     },
     methods: {
+         handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 3 张图片，本次选择了 ${
+                    files.length
+                } 张，共选择了 ${files.length + fileList.length} 张`
+            );
+        },
+        handleSuccess(res, file) {
+            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
+
+        },
+        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);
+            this.dialogVisible = true;
+        },
         areaCode(area){
             let arr = this.options.find(item => item.cities[0].value == area)
             return arr.title
-
         },
         provCode(code){
             let arr = this.options.find(item => item.value == code)
             return arr.title
         },
-        handleChange(value) {
+        enterpriseChange(value) {
-            this.ruleForm.provCode = value[0]
+            this.dialogForm.provCode = value[0]
-            this.ruleForm.areaCode = value[1]
+            this.dialogForm.areaCode = value[1]
+        },
+        submitDialogForm(dialogForm){
+            if(!this.dialogForm.imgList == [] && this.dialogForm.imgList.length !== 3) return this.$message.warning('请上传三张照片')
+            this.$refs[dialogForm].validate((valid) =>{
+                if (valid) {
+                    console.log(valid,'valid');
+                } else {
+                    console.log('表格提交失败');
+                    return false
+                }
+            })
         },
         // 创建汇付会员
-        submitForm(formName) {
+        // submitForm(formName) {
-            console.log('省 市',this.ruleForm.provCode,this.ruleForm.areaCode)
+        //     console.log('省 市',this.ruleForm.provCode,this.ruleForm.areaCode)
-            this.$refs[formName].validate((valid) => {
+        //     this.$refs[formName].validate((valid) => {
-                if (valid) {
+        //         if (valid) {
-                    console.log("valid", this.ruleForm);
+        //             console.log("valid", this.ruleForm);
-                    createAdapayMember(this.ruleForm).then((response) => {
+        //             createAdapayMember(this.ruleForm).then((response) => {
-                        console.log("新增", response);
+        //                 console.log("新增", response);
-                        this.openCreateAdapaySettleAccount = false
+        //                 this.openCreateAdapaySettleAccount = false
-                        this.selectAdapayMember();
+        //                 this.selectAdapayMember();
-                    });
+        //             });
-                } else {
+        //         } else {
-                    console.log("提交表格失败");
+        //             console.log("提交表格失败");
-                    return false;
+        //             return false;
-                }
+        //         }
-            });
+        //     });
-        },
+        // },
         resetForm(formName) {
             this.$refs[formName].resetFields();
         },