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

<template>
    <div class="app-container">
         <!-- <div>
              <input type="file" accept="image/*" @change="getFile($event)" />
         </div> -->
        <el-card v-if="adapayMember == null" shadow="hover" style="margin-bottom:10px">
            <div style="margin: 12px 0" >
                没有查询到汇付会员配置，请点击按钮创建会员信息及结算账号
                <!-- 刷新按钮 -->
                <el-button
                    size="medium"
                    type="primary"
                    @click="dialog = true"
                >
                    创建会员信息与结算账号
                </el-button>
            </div>
        </el-card>
        <template  v-else>
              <el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
            <h2>会员信息</h2>
            <hr>
            <el-descriptions>
                <!-- <el-descriptions-item label="会员昵称">{{
                    dialogForm.nickname
                }}</el-descriptions-item> -->
                <el-descriptions-item label="会员邮箱">{{
                    dialogForm.email
                }}</el-descriptions-item>
                <!-- <el-descriptions-item label="会员性别">{{
                    dialogForm.gender === "FEMALE" ? "女" : "男"
                }}</el-descriptions-item> -->
                <el-descriptions-item label="公司地址">{{
                    dialogForm.location
                }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card class="box-card" shadow="hover" style="margin:20px 0">
            <!-- <div style="margin: 12px 0">汇付结算账户</div> -->
            <h2>结算账户</h2>
            <hr>
              <el-descriptions :column="2" v-for="(item,index) in settleAccountList" :key="index">
                <el-descriptions-item label="银行账户类型">{{ item.bankAcctType === '1'? '对公':'对私'}}</el-descriptions-item>
                <el-descriptions-item label="银行卡号">{{
                    item.cardId
                }}</el-descriptions-item>
                <el-descriptions-item label="银行卡对应的户名">{{
                    item.cardName
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{
                    item.telNo
                }}</el-descriptions-item>
                <el-descriptions-item label="银行编码">{{
                    item.bankCode
                }}</el-descriptions-item>
                <el-descriptions-item label="银行账户开户银行所在省份编码">{{provCode(item.provCode)}}/ {{areaCode(item.areaCode)}}
                    
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        </template>
        <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="上传附件" prop="imgList">
                    <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 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="submitDialogForm('dialogForm')"
                        >提交</el-button
                    >
                    <el-button @click="resetForm('dialogForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
      
    </div>
</template>

<script>
import {
    selectAdapayMember,
    createAdapayMember,createCorpMember,createSettleAccount
} from "@/api/adapayMember/adapayMember";
import { getToken } from "@/utils/auth";
export default {
    props: ["merchantId"],
    data() {
        return {
            dialog:false,
            dialogForm:{
                bankAcctType:'1'
            },
            // 汇付会员
            adapayMember: '',
            openCreateAdapayMember: false,
            // 汇付结算账户
            adapaySettleAccount: null,
            dialogRules: {
                email: [
                    {
                        required: true,
                        message: "请填写会员邮箱",
                        trigger: "blur",
                    },
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: "blur",
                    },
                ],
                gender: [
                    {
                        required: true,
                        message: "请选择会员性别",
                        trigger: "blur",
                    },
                ],
                location: [
                    {
                        required: true,
                        message: "请填写会员地址",
                        trigger: "blur",
                    },
                ],
                nickname: [
                    {
                        required: true,
                        message: "请填写会员昵称",
                        trigger: "blur",
                    },
                ],
                cardId: [
                    {
                        required: true,
                        message: "请填写银行卡号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[1-9]\d{9,29}$/,
                        message: "银行卡号格式有误",
                        trigger: "blur",
                    },
                ],
                cardName: [
                    {
                        required: true,
                        message: "请填写银行卡号对应的户名",
                        trigger: "blur",
                    },
                ],
                telNo: [
                    {
                        required: true,
                        message: "请填写手机号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
                        message: "手机号格式有误",
                        trigger: "blur",
                    },
                ],
                bankAcctType: [
                    {
                        required: true,
                        message: "请选择银行账户类型",
                        trigger: "blur",
                    },
                ],
                areaCode: [
                    {
                        required: true,
                        message: "银行账户开户银行所在地区编码",
                        trigger: "blur",
                    },
                ],
                certId: [
                    {
                        required: true,
                        message: "请填写证件号",
                        trigger: "blur",
                    },
                ],
                bankCode: [
                    {
                        required: true,
                        message: "请填写银行编码",
                        trigger: "blur",
                    }
                ], 
                imgList: [
                    {
                        required: true,
                        message: "请上传三张照片",
                        trigger: "change",
                    }
                ],
                 businessName:[{
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur",
                    },],
                provCode:[{
                        required: true,
                        message: "请选择省份编码",
                        trigger: "change",
                    },],
                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",
                label: "title",
                value: "value",
                children: "cities",
            },
            value: [],
            options: [],
            settleAccount:{},
            settleAccountList:[],
            actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
            dialogImageUrl: "",
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            imageUrl: null,
            fileList: [],
        };
    },
    methods: {
        getFile(e){
            // console.log(e,'file');
            const  file  = e.target.files
            // this.file = e.target.files[0]
            if(file.length !== 0) {
                const reader = new FileReader()
                reader.readAsDataURL(file[0])
                // reader.readAsText(file[0])
                reader.addEventListener('load',() =>{
                    console.log('asdfjao',reader.result);
                })
            }
        },
         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
            // 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);
        },
        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
        },
        enterpriseChange(value) {
            this.dialogForm.provCode = value[0]
            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('请上传三张照片')
                    console.log(valid,'valid');
                    createSettleAccount(this.dialogForm).then((response) =>{
                        console.log('新增',response);
                        this.dialog = false
                        this.selectAdapayMember();
                    })
                } else {
                    console.log('表格提交失败');
                    return false
                }
            })
        },
        resetForm(dialogForm) {
            this.$refs[dialogForm].resetFields();
        },
        // 查询汇付会员
        selectAdapayMember() {
            console.log("this.merchantId", this.merchantId);
            let param = {
                merchantId: this.merchantId,
            };
            selectAdapayMember(param).then((response) => {
                console.log("查询 selectAdapayMember", response);
                 this.adapayMember = response.data;
                if (response.data != null) {
                    this.dialogForm = response.data.adapayMember;
                    this.settleAccountList= response.data.settleAccountList
                    console.log(' this.settleAccountList', this.settleAccountList)
                }
            });
        },
        jsonHttp() {
            var that = this;
            //(1).实例化ajax对象
            let xhr = new XMLHttpRequest();
            //(2).设置请求方法和地址
            //get请求的数据直接添加在url的后面 格式是 url?key=value
            xhr.open(
                "get",
                "https://cdn.cloudpnr.com/adapayresource/documents/Adapay%E7%9C%81%E5%B8%82%E7%BC%96%E7%A0%81%EF%BC%88%E5%9B%9B%E4%BD%8D%EF%BC%89.json"
            );
            //(3).发送请求
            xhr.send();
            //(4).注册回调函数
            xhr.onload = function () {
                // console.log(xhr.responseText,'responseText')
                that.options = JSON.parse(xhr.responseText);
            };
        },
    },
    created() {
        this.selectAdapayMember();
        this.jsonHttp();
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input .el-input--medium{
    width: 43% !important;
}

</style>