autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-05-05 02:20:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改汇付支付配置页面

Browse Source
This commit is contained in:
JS-LM
2023-06-21 09:52:12 +08:00
parent 8d12bb63d1
commit 469c5bd05f
2 changed files with 301 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
jsowell-ui/src/views/pile/merchant/components/adapayMember.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<el-card v-if="adapayMember == null" shadow="hover">
<div class="app-container">
<el-card v-if="adapayMember == null" shadow="hover" style="margin-bottom:10px">
<div style="margin: 12px 0" >
没有查询到汇付会员配置，请点击按钮创建汇付会员，汇付结算账号
<!-- 刷新按钮 -->
<el-button
size="medium"
type="primary"
@click="openCreateAdapaySettleAccount = true"
@click="dialog = true"
>
创建汇付会员与结算账号
</el-button>
@@ -15,10 +15,9 @@
</el-card>
<template v-else>
<el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
<!-- <div style="margin: 12px 0">汇付会员</div> -->
<h2>汇付会员</h2>
<hr>
<el-descriptions :column="2" >
<!-- <el-descriptions :column="2" >
<el-descriptions-item label="会员昵称">{{
ruleForm.nickname
}}</el-descriptions-item>
@@ -28,13 +27,13 @@
<el-descriptions-item label="会员性别">{{
ruleForm.gender === "FEMALE" ? "女" : "男"
}}</el-descriptions-item>
<el-descriptions-item label="会员地址">{{
<el-descriptions-item label="公司地址">{{
ruleForm.location
}}</el-descriptions-item>
</el-descriptions>
</el-descriptions> -->
</el-card>
<el-card class="box-card" shadow="hover" style="margin-top:20px">
<el-card class="box-card" shadow="hover" style="margin:20px 0">
<!-- <div style="margin: 12px 0">汇付结算账户</div> -->
<h2>汇付结算账户</h2>
<hr>
@@ -58,94 +57,15 @@
</el-descriptions>
</el-card>
</template>
<el-dialog
title="创建汇付会员与结算账户"
:visible.sync="openCreateAdapaySettleAccount"
width="25%"
append-to-body
>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
>
<el-form-item label="会员昵称" prop="nickname">
<!-- <el-card shadow="hover">
<div style="margin: 12px 0">没有查询到企业会员配置，请点击按钮创建企业账号
<el-button size="medium" type="primary" @click="enterpriseDialog = true">创建企业汇付会员与结算账号</el-button>
</div>
</el-card> -->
<!-- <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> -->
<!-- <el-form-item
label="银行账户开户银行所在地区编码"
prop="areaCode"
@@ -157,8 +77,143 @@
>
<el-input v-model="ruleForm.areaCode"></el-input>
</el-form-item> -->
<!-- <el-button type="primary" @click="submitForm('ruleForm')"
>提交</el-button
> -->
<!-- <el-form-item label="会员昵称" prop="nickname">
<el-input v-model="ruleForm.nickname"></el-input>
</el-form-item> -->
<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="上传附件">
<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
v-if="dialogForm.bankAcctType === '1'"
label="银行编码"
prop="bankCode"
:rules="
dialogForm.bankAcctType === '1'
? dialogRules.bankCode
: [{ required: false }]
"
>
<el-input v-model="dialogForm.bankCode"></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="submitForm('ruleForm')"
<el-button type="primary" @click="submitDialogForm('dialogForm')"
>提交</el-button
>
</el-form-item>
@@ -170,36 +225,23 @@
<script>
import {
selectAdapayMember,
createAdapayMember
createAdapayMember,createCorpMember
} from "@/api/adapayMember/adapayMember";
import { getToken } from "@/utils/auth";
export default {
props: ["merchantId"],
data() {
return {
dialog:false,
dialogForm:{},
enterpriseDialog:false, // 企业弹窗
// 汇付会员
adapayMember: '',
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: {
dialogRules: {
email: [
{
required: true,
@@ -304,6 +346,75 @@ export default {
trigger: "change",
},
],
businessName:[{
required: true,
message: "请输入企业名称",
trigger: "blur",
},],
provCode:[{
required: true,
message: "请选择省份编码",
trigger: "blur",
},],
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",
@@ -314,40 +425,86 @@ export default {
value: [],
options: [],
settleAccount:{},
settleAccountList:[]
settleAccountList:[],
actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
dialogImageUrl: "",
headers: {
Authorization: "Bearer " + getToken(),
},
imageUrl: null,
fileList: [],
};
},
methods: {
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
},
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);
this.dialogVisible = true;
},
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
},
handleChange(value) {
this.ruleForm.provCode = value[0]
this.ruleForm.areaCode = value[1]
enterpriseChange(value) {
this.dialogForm.provCode = value[0]
this.dialogForm.areaCode = value[1]
},
submitDialogForm(dialogForm){
if(!this.dialogForm.imgList == [] && this.dialogForm.imgList.length !== 3) return this.$message.warning('请上传三张照片')
this.$refs[dialogForm].validate((valid) =>{
if (valid) {
console.log(valid,'valid');
} else {
console.log('表格提交失败');
return false
}
})
},
// 创建汇付会员
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;
}
});
},
// 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();
},