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

<template>
    <div>
        <el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
            <!-- <div style="margin: 12px 0">汇付会员</div> -->
            <h2>汇付会员</h2>
            <hr>
            <div style="margin: 12px 0" v-if="ruleForm.adapayMemberId == null">
                没有查询到汇付会员配置，请点击按钮创建汇付会员，汇付结算账号
                <!-- 刷新按钮 -->
                <el-button
                    size="medium"
                    type="primary"
                    @click="openCreateAdapaySettleAccount = true"
                >
                    创建汇付会员与结算账号
                </el-button>
            </div>
            <el-descriptions :column="2" v-else>
                <el-descriptions-item label="会员昵称">{{
                    ruleForm.nickname
                }}</el-descriptions-item>
                <el-descriptions-item label="会员邮箱">{{
                    ruleForm.email
                }}</el-descriptions-item>
                <el-descriptions-item label="会员性别">{{
                    ruleForm.gender === "FEMALE" ? "女" : "男"
                }}</el-descriptions-item>
                <el-descriptions-item label="会员地址">{{
                    ruleForm.location
                }}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card class="box-card" shadow="hover" style="margin-top:20px" v-if="ruleForm.adapayMemberId !== null">
            <!-- <div style="margin: 12px 0">汇付结算账户</div> -->
            <h2>汇付结算账户</h2>
            <hr>
              <el-descriptions :column="2">
                <el-descriptions-item label="银行账户类型">{{
                    ruleForm.nickname
                }}</el-descriptions-item>
                <el-descriptions-item label="银行卡号">{{
                    ruleForm.email
                }}</el-descriptions-item>
                <el-descriptions-item label="银行卡对应的户名">{{
                    ruleForm.gender === "FEMALE" ? "女" : "男"
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{
                    ruleForm.location
                }}</el-descriptions-item>
                <el-descriptions-item label="银行编码">{{
                    ruleForm.location
                }}</el-descriptions-item>
                <el-descriptions-item label="开户银行名称">{{
                    ruleForm.location
                }}</el-descriptions-item>
                <el-descriptions-item label="银行账户开户银行所在省份编码">{{
                    ruleForm.location
                }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-dialog
            title="创建汇付会员与结算账户"
            :visible.sync="openCreateAdapaySettleAccount"
            width="150"
            append-to-body
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="250px"
                class="demo-ruleForm"
            >
               <el-form-item label="会员昵称" prop="nickname">
                    <el-input v-model="ruleForm.nickname"></el-input>
                </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
                    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
                    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="bankName">
                    <el-input v-model="ruleForm.bankName"></el-input>
                </el-form-item>
                <el-form-item
                    label="银行账户开户银行所在省份编码"
                    prop="provCode"
                    :rules="
                        ruleForm.bankAcctType === '1'
                            ? rules.provCode
                            : [{ required: false }]
                    "
                >
                 <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"
                    :rules="
                        ruleForm.bankAcctType === '1'
                            ? rules.areaCode
                            : [{ required: false }]
                    "
                >
                    <el-input v-model="ruleForm.areaCode"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')"
                        >提交</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    selectAdapayMember,
    createAdapayMember
} from "@/api/adapayMember/adapayMember";
export default {
    props: ["merchantId"],
    data() {
        return {
            // 汇付会员
            adapayMember: null,
            openCreateAdapayMember: false,
            // 汇付结算账户
            adapaySettleAccount: null,
            openCreateAdapaySettleAccount: false,
            ruleForm: {
                adapayMemberId:null,
                nickname: "",
                email: "",
                gender: "",
                location: "",
                cardId: "",
                cardName: "",
                certId: "",
                telNo: "",
                bankCode: "",
                bankName: "",
                bankAcctType: "",
                provCode: "",
                areaCode: "",
                merchantId: this.merchantId,
            },
            rules: {
                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",
                    },
                ],
                provCode: [
                    {
                        required: true,
                        message: "请填写银行账户开户银行所在省份编码",
                        trigger: "blur",
                    },
                ],
                certId: [
                    {
                        required: true,
                        message: "请填写证件号",
                        trigger: "blur",
                    },
                ],
                bankCode: [
                    {
                        required: true,
                        message: "请填写银行编码",
                        trigger: "blur",
                    },
                      {
                        pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
                        message: "手机号格式有误",
                        trigger: "change",
                    },
                ],
            },
            cateProps: {
                expandTrigger: "click",
                label: "title",
                value: "value",
                children: "cities",
            },
            value: [],
            options: [],
            settleAccount:{}
        };
    },
    methods: {
        handleChange(value) {
            console.log(value);
            this.ruleForm.provCode = value[0]
            this.ruleForm.areaCode = value[1]
        },
        // 创建汇付会员
        submitForm(formName) {
            console.log('省 市',this.ruleForm.provCode,this.ruleForm.areaCode)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log("valid", this.ruleForm);
                    createAdapayMember(this.ruleForm).then((response) => {
                        console.log("新增", response);
                        this.openCreateAdapaySettleAccount = false
                        this.selectAdapayMember();
                    });
                } else {
                    console.log("提交表格失败");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 查询汇付会员
        selectAdapayMember() {
            console.log("this.merchantId", this.merchantId);
            let param = {
                merchantId: this.merchantId,
            };
            selectAdapayMember(param).then((response) => {
                console.log("查询 response", response);
                if (response.data != null) {
                    this.ruleForm = response.data;
                    this.adapayMember = response.data;
                }
            });
        },
        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>