mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-06-10 02:09:49 +08:00
522 lines
21 KiB
Vue
522 lines
21 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- <div>
|
||
<input type="file" accept="image/*" @change="getFile($event)" />
|
||
</div> -->
|
||
<el-card v-if="adapayMember == null" shadow="hover" style="margin-bottom:10px">
|
||
<div style="margin: 12px 0" >
|
||
没有查询到汇付会员配置，请点击按钮创建会员信息及结算账号
|
||
<!-- 刷新按钮 -->
|
||
<el-button
|
||
size="medium"
|
||
type="primary"
|
||
@click="dialog = true"
|
||
>
|
||
创建会员信息与结算账号
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
<template v-else>
|
||
<el-card class="box-card" shadow="hover" style="margin-bottom: 10px">
|
||
<h2>会员信息</h2>
|
||
<hr>
|
||
<el-descriptions>
|
||
<!-- <el-descriptions-item label="会员昵称">{{
|
||
dialogForm.nickname
|
||
}}</el-descriptions-item> -->
|
||
<el-descriptions-item label="会员邮箱">{{
|
||
dialogForm.email
|
||
}}</el-descriptions-item>
|
||
<!-- <el-descriptions-item label="会员性别">{{
|
||
dialogForm.gender === "FEMALE" ? "女" : "男"
|
||
}}</el-descriptions-item> -->
|
||
<el-descriptions-item label="公司地址">{{
|
||
dialogForm.location
|
||
}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
<el-card class="box-card" shadow="hover" style="margin:20px 0">
|
||
<!-- <div style="margin: 12px 0">汇付结算账户</div> -->
|
||
<h2>结算账户</h2>
|
||
<hr>
|
||
<el-descriptions :column="2" v-for="(item,index) in settleAccountList" :key="index">
|
||
<el-descriptions-item label="银行账户类型">{{ item.bankAcctType === '1'? '对公':'对私'}}</el-descriptions-item>
|
||
<el-descriptions-item label="银行卡号">{{
|
||
item.cardId
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="银行卡对应的户名">{{
|
||
item.cardName
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="手机号">{{
|
||
item.telNo
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="银行编码">{{
|
||
item.bankCode
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="银行账户开户银行所在省份编码">{{provCode(item.provCode)}}/ {{areaCode(item.areaCode)}}
|
||
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</template>
|
||
<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="上传附件" prop="imgList">
|
||
<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 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="submitDialogForm('dialogForm')"
|
||
>提交</el-button
|
||
>
|
||
<el-button @click="resetForm('dialogForm')">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
selectAdapayMember,
|
||
createAdapayMember,createCorpMember,createSettleAccount
|
||
} from "@/api/adapayMember/adapayMember";
|
||
import { getToken } from "@/utils/auth";
|
||
export default {
|
||
props: ["merchantId"],
|
||
data() {
|
||
return {
|
||
dialog:false,
|
||
dialogForm:{
|
||
bankAcctType:'1'
|
||
},
|
||
// 汇付会员
|
||
adapayMember: '',
|
||
openCreateAdapayMember: false,
|
||
// 汇付结算账户
|
||
adapaySettleAccount: null,
|
||
dialogRules: {
|
||
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",
|
||
},
|
||
],
|
||
certId: [
|
||
{
|
||
required: true,
|
||
message: "请填写证件号",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
bankCode: [
|
||
{
|
||
required: true,
|
||
message: "请填写银行编码",
|
||
trigger: "blur",
|
||
}
|
||
],
|
||
imgList: [
|
||
{
|
||
required: true,
|
||
message: "请上传三张照片",
|
||
trigger: "change",
|
||
}
|
||
],
|
||
businessName:[{
|
||
required: true,
|
||
message: "请输入企业名称",
|
||
trigger: "blur",
|
||
},],
|
||
provCode:[{
|
||
required: true,
|
||
message: "请选择省份编码",
|
||
trigger: "change",
|
||
},],
|
||
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",
|
||
label: "title",
|
||
value: "value",
|
||
children: "cities",
|
||
},
|
||
value: [],
|
||
options: [],
|
||
settleAccount:{},
|
||
settleAccountList:[],
|
||
actionUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS",
|
||
dialogImageUrl: "",
|
||
headers: {
|
||
Authorization: "Bearer " + getToken(),
|
||
},
|
||
imageUrl: null,
|
||
fileList: [],
|
||
};
|
||
},
|
||
methods: {
|
||
getFile(e){
|
||
// console.log(e,'file');
|
||
const file = e.target.files
|
||
// this.file = e.target.files[0]
|
||
if(file.length !== 0) {
|
||
const reader = new FileReader()
|
||
reader.readAsDataURL(file[0])
|
||
// reader.readAsText(file[0])
|
||
reader.addEventListener('load',() =>{
|
||
console.log('asdfjao',reader.result);
|
||
})
|
||
}
|
||
},
|
||
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
|
||
// console.log(this.dialogForm.imgList,'this.dialogForm.imgList');
|
||
|
||
},
|
||
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);
|
||
},
|
||
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
|
||
},
|
||
enterpriseChange(value) {
|
||
this.dialogForm.provCode = value[0]
|
||
this.dialogForm.areaCode = value[1]
|
||
},
|
||
submitDialogForm(dialogForm){
|
||
|
||
console.log(this.dialogForm);
|
||
this.$refs[dialogForm].validate((valid) =>{
|
||
if (valid) {
|
||
if(this.dialogForm.imgList.length !== 3 ) return this.$message.warning('请上传三张照片')
|
||
console.log(valid,'valid');
|
||
createSettleAccount(this.dialogForm).then((response) =>{
|
||
console.log('新增',response);
|
||
this.dialog = false
|
||
this.selectAdapayMember();
|
||
})
|
||
} else {
|
||
console.log('表格提交失败');
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
resetForm(dialogForm) {
|
||
this.$refs[dialogForm].resetFields();
|
||
},
|
||
// 查询汇付会员
|
||
selectAdapayMember() {
|
||
console.log("this.merchantId", this.merchantId);
|
||
let param = {
|
||
merchantId: this.merchantId,
|
||
};
|
||
selectAdapayMember(param).then((response) => {
|
||
console.log("查询 selectAdapayMember", response);
|
||
this.adapayMember = response.data;
|
||
if (response.data != null) {
|
||
this.dialogForm = response.data.adapayMember;
|
||
this.settleAccountList= response.data.settleAccountList
|
||
console.log(' this.settleAccountList', this.settleAccountList)
|
||
}
|
||
});
|
||
},
|
||
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>
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-input .el-input--medium{
|
||
width: 43% !important;
|
||
}
|
||
|
||
</style>
|