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

439 lines
17 KiB
Vue
Raw Normal View History

2023-06-09 10:38:23 +08:00
<template>
<div>
2023-06-12 16:01:39 +08:00
<el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
2023-06-09 11:37:58 +08:00
<div style="margin: 12px 0">汇付会员</div>
2023-06-09 16:55:18 +08:00
<div style="margin: 12px 0" v-if="ruleForm.nickname == ''">
2023-06-09 11:37:58 +08:00
没有查询到汇付会员配置请点击按钮创建汇付会员
<!-- 刷新按钮 -->
2023-06-09 11:59:23 +08:00
<el-button size="medium" type="primary" @click="openCreateAdapayMember = true">
2023-06-09 11:37:58 +08:00
创建汇付会员
</el-button>
</div>
2023-06-09 17:09:33 +08:00
<el-descriptions v-else :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>
2023-06-09 11:37:58 +08:00
</el-card>
<el-card class="box-card" shadow="hover">
<div style="margin: 12px 0">汇付结算账户</div>
2023-06-09 17:09:33 +08:00
<div style="margin: 12px 0" v-if="ruleForm.nickname !== ''">
2023-06-09 11:37:58 +08:00
没有查询到汇付结算账户配置请点击按钮创建汇付结算账户
<!-- 刷新按钮 -->
2023-06-09 11:59:23 +08:00
<el-button size="medium" type="primary" @click="openCreateAdapaySettleAccount = true">
2023-06-09 11:37:58 +08:00
创建汇付结算账户
</el-button>
</div>
2023-06-09 16:55:18 +08:00
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="250px"
class="demo-ruleForm"
v-else
>
<el-form-item label="银行账户类型" prop="bank_acct_type">
<el-radio-group v-model="ruleForm.bank_acct_type">
<el-radio label="1">对公</el-radio>
<el-radio label="2">对私</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="银行卡号" prop="card_id">
<el-input v-model="ruleForm.card_id"></el-input>
</el-form-item>
<el-form-item label="银行卡对应的户名" prop="card_name">
<el-input v-model="ruleForm.card_name"></el-input>
</el-form-item>
<el-form-item
label="证件号"
prop="cert_id"
:rules="
ruleForm.bank_acct_type === '2'
? rules.cert_id
: [{ required: false }]
"
>
<el-input v-model="ruleForm.cert_id"></el-input>
</el-form-item>
<el-form-item
label="证件类型"
prop="cert_type"
:rules="
ruleForm.bank_acct_type === '2'
? rules.cert_type
: [{ required: false }]
"
>
<el-input v-model="ruleForm.cert_type"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="tel_no">
<el-input v-model="ruleForm.tel_no"></el-input>
</el-form-item>
<el-form-item
label="银行编码"
prop="bank_code"
:rules="
ruleForm.bank_acct_type === '1'
? rules.bank_code
: [{ required: false }]
"
>
<el-input v-model="ruleForm.bank_code"></el-input>
</el-form-item>
<el-form-item label="开户银行名称" prop="bank_name">
<el-input v-model="ruleForm.bank_name"></el-input>
</el-form-item>
<el-form-item
label="银行账户开户银行所在省份编码"
prop="prov_code"
:rules="
ruleForm.bank_acct_type === '1'
? rules.prov_code
: [{ required: false }]
"
>
<el-input v-model="ruleForm.prov_code"></el-input>
</el-form-item>
<el-form-item
label="银行账户开户银行所在地区编码"
prop="area_code"
:rules="
ruleForm.bank_acct_type === '1'
? rules.area_code
: [{ required: false }]
"
>
<el-input v-model="ruleForm.area_code"></el-input>
</el-form-item>
2023-06-09 17:09:33 +08:00
<el-form-item>
2023-06-09 16:55:18 +08:00
<el-button
type="primary"
@click="submitForm('ruleForm')"
>提交</el-button
>
</el-form-item>
</el-form>
2023-06-09 11:37:58 +08:00
</el-card>
2023-06-09 10:38:23 +08:00
2023-06-09 16:03:32 +08:00
<el-dialog title="创建汇付会员" :visible.sync="openCreateAdapayMember" width="150" append-to-body>
2023-06-09 11:59:23 +08:00
<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>
2023-06-09 16:03:32 +08:00
<el-form-item>
<el-button
type="primary"
@click="submitForm('ruleForm')"
>提交</el-button>
</el-form-item>
2023-06-09 11:59:23 +08:00
</el-form>
</el-dialog>
2023-06-09 16:03:32 +08:00
<el-dialog title="创建汇付结算账户" :visible.sync="openCreateAdapaySettleAccount" width="150" append-to-body>
2023-06-09 11:59:23 +08:00
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="250px"
class="demo-ruleForm"
>
<el-form-item label="银行账户类型" prop="bank_acct_type">
<el-radio-group v-model="ruleForm.bank_acct_type">
<el-radio label="1">对公</el-radio>
<el-radio label="2">对私</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="银行卡号" prop="card_id">
<el-input v-model="ruleForm.card_id"></el-input>
</el-form-item>
<el-form-item label="银行卡对应的户名" prop="card_name">
<el-input v-model="ruleForm.card_name"></el-input>
</el-form-item>
<el-form-item
label="证件号"
prop="cert_id"
:rules="
2023-06-09 10:38:23 +08:00
ruleForm.bank_acct_type === '2'
? rules.cert_id
: [{ required: false }]
"
2023-06-09 11:59:23 +08:00
>
<el-input v-model="ruleForm.cert_id"></el-input>
</el-form-item>
2023-06-09 10:38:23 +08:00
2023-06-09 11:59:23 +08:00
<el-form-item
label="证件类型"
prop="cert_type"
:rules="
2023-06-09 10:38:23 +08:00
ruleForm.bank_acct_type === '2'
? rules.cert_type
: [{ required: false }]
"
2023-06-09 11:59:23 +08:00
>
<el-input v-model="ruleForm.cert_type"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="tel_no">
<el-input v-model="ruleForm.tel_no"></el-input>
</el-form-item>
<el-form-item
label="银行编码"
prop="bank_code"
:rules="
2023-06-09 10:38:23 +08:00
ruleForm.bank_acct_type === '1'
? rules.bank_code
: [{ required: false }]
"
2023-06-09 11:59:23 +08:00
>
<el-input v-model="ruleForm.bank_code"></el-input>
</el-form-item>
<el-form-item label="开户银行名称" prop="bank_name">
<el-input v-model="ruleForm.bank_name"></el-input>
</el-form-item>
<el-form-item
label="银行账户开户银行所在省份编码"
prop="prov_code"
:rules="
2023-06-09 10:38:23 +08:00
ruleForm.bank_acct_type === '1'
? rules.prov_code
: [{ required: false }]
"
2023-06-09 11:59:23 +08:00
>
<el-input v-model="ruleForm.prov_code"></el-input>
</el-form-item>
<el-form-item
label="银行账户开户银行所在地区编码"
prop="area_code"
:rules="
2023-06-09 10:38:23 +08:00
ruleForm.bank_acct_type === '1'
? rules.area_code
: [{ required: false }]
"
2023-06-09 11:59:23 +08:00
>
<el-input v-model="ruleForm.area_code"></el-input>
</el-form-item>
2023-06-09 16:03:32 +08:00
<el-form-item>
<el-button
type="primary"
@click="submitForm('ruleForm')"
>提交</el-button
>
</el-form-item>
2023-06-09 11:59:23 +08:00
</el-form>
</el-dialog>
2023-06-09 10:38:23 +08:00
</div>
</template>
<script>
import {
selectAdapayMember,
createAdapayMember,
} from "@/api/adapayMember/adapayMember";
export default {
props: ["merchantId"],
data() {
return {
2023-06-09 11:37:58 +08:00
// 汇付会员
adapayMember: null,
2023-06-09 11:59:23 +08:00
openCreateAdapayMember: false,
2023-06-09 11:37:58 +08:00
// 汇付结算账户
adapaySettleAccount: null,
2023-06-09 11:59:23 +08:00
openCreateAdapaySettleAccount: false,
2023-06-09 10:38:23 +08:00
ruleForm: {
nickname: "",
email: "",
gender: "",
location: "",
card_id: "",
card_name: "",
cert_id: "",
cert_type: "",
tel_no: "",
bank_code: "",
bank_name: "",
bank_acct_type: "",
prov_code: "",
area_code: "",
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",
},
],
card_id: [
{
required: true,
message: "请填写银行卡号",
trigger: "blur",
},
{
pattern: /^[1-9]\d{9,29}$/,
message: "银行卡号格式有误",
trigger: "blur",
},
],
card_name: [
{
required: true,
message: "请填写银行卡号对应的户名",
trigger: "blur",
},
],
tel_no: [
{
required: true,
message: "请填写手机号",
trigger: "blur",
},
{
pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
message: "手机号格式有误",
trigger: "blur",
},
],
bank_acct_type: [
{
required: true,
message: "请选择银行账户类型",
trigger: "blur",
},
],
area_code: [
{
required: true,
message: "银行账户开户银行所在地区编码",
trigger: "blur",
},
],
prov_code: [
{
required: true,
message: "请填写银行账户开户银行所在省份编码",
trigger: "blur",
},
],
cert_id: [
{
required: true,
message: "请填写证件号",
trigger: "blur",
},
],
cert_type: [
{
required: true,
message: "请填写证件类型",
trigger: "blur",
},
],
bank_code: [
{
required: true,
message: "请填写银行编码",
trigger: "blur",
},
],
},
};
},
methods: {
2023-06-09 11:37:58 +08:00
// 创建汇付会员
2023-06-09 10:38:23 +08:00
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log("valid", this.ruleForm);
2023-06-09 11:37:58 +08:00
createAdapayMember(this.ruleForm).then((response) => {
2023-06-09 10:38:23 +08:00
console.log("新增", response);
2023-06-09 16:03:32 +08:00
this.openCreateAdapayMember =false
this.selectAdapayMember()
2023-06-09 10:38:23 +08:00
});
} else {
console.log("提交表格失败");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
2023-06-09 11:37:58 +08:00
// 查询汇付会员
2023-06-09 14:44:32 +08:00
selectAdapayMember() {
2023-06-09 10:38:23 +08:00
console.log("this.merchantId", this.merchantId);
let param = {
merchantId: this.merchantId,
};
2023-06-09 11:37:58 +08:00
selectAdapayMember(param).then((response) => {
2023-06-09 11:12:21 +08:00
// console.log("查询 response", response);
2023-06-09 15:56:08 +08:00
if (response.data != null) {
this.ruleForm = response.data;
this.adapayMember = response.data;
}
2023-06-09 10:38:23 +08:00
});
},
2023-06-09 14:44:32 +08:00
// 查询汇付结算账户
selectSettleAccount() {
}
2023-06-09 10:38:23 +08:00
},
created() {
2023-06-09 14:44:32 +08:00
this.selectAdapayMember();
this.selectSettleAccount();
2023-06-09 10:38:23 +08:00
},
};
</script>