mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-06-11 10:49:52 +08:00
319 lines
11 KiB
Vue
319 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
汇付会员
|
||
|
|
<el-form
|
||
|
|
:model="ruleForm"
|
||
|
|
:rules="rules"
|
||
|
|
ref="ruleForm"
|
||
|
|
label-width="250px"
|
||
|
|
class="demo-ruleForm"
|
||
|
|
>
|
||
|
|
<el-row :gutter="24">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="会员昵称" prop="nickname">
|
||
|
|
<el-input v-model="ruleForm.nickname"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="会员邮箱" prop="email">
|
||
|
|
<el-input v-model="ruleForm.email"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<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-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="会员地址" prop="location">
|
||
|
|
<!-- type="textarea" -->
|
||
|
|
<el-input v-model="ruleForm.location"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="24">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="银行卡号" prop="card_id">
|
||
|
|
<el-input v-model="ruleForm.card_id"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="银行卡对应的户名" prop="card_name">
|
||
|
|
<el-input v-model="ruleForm.card_name"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<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-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<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-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="24">
|
||
|
|
<el-col :span="6">
|
||
|
|
<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-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="手机号" prop="tel_no">
|
||
|
|
<el-input v-model="ruleForm.tel_no"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<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-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="开户银行名称" prop="bank_name">
|
||
|
|
<el-input v-model="ruleForm.bank_name"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="24">
|
||
|
|
<el-col :span="6">
|
||
|
|
<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-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<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>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button
|
||
|
|
type="primary"
|
||
|
|
@click="submitForm('ruleForm')"
|
||
|
|
>提交</el-button
|
||
|
|
>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
selectAdapayMember,
|
||
|
|
createAdapayMember,
|
||
|
|
} from "@/api/adapayMember/adapayMember";
|
||
|
|
export default {
|
||
|
|
props: ["merchantId"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
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: {
|
||
|
|
submitForm(formName) {
|
||
|
|
this.$refs[formName].validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
console.log("valid", this.ruleForm);
|
||
|
|
selectAdapayMember(this.ruleForm).then((response) => {
|
||
|
|
console.log("新增", response);
|
||
|
|
this.getList();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log("提交表格失败");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
resetForm(formName) {
|
||
|
|
this.$refs[formName].resetFields();
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
console.log("this.merchantId", this.merchantId);
|
||
|
|
let param = {
|
||
|
|
merchantId: this.merchantId,
|
||
|
|
};
|
||
|
|
createAdapayMember(param).then((response) => {
|
||
|
|
console.log("查询 response", response);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|