mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-05-17 08:18:34 +08:00
385 lines
14 KiB
Vue
385 lines
14 KiB
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
|
||
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"
|
||
: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("查询 selectAdapayMember", 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>
|