Skip to content

薪
薪瑞通-前端
Commit e4268ff3 authored by 谢子梦's avatar 谢子梦
Browse files
Options

stage：发薪账户管理-新增付款账户加入

parent 4e46195f
Hide whitespace changes
Inline Side-by-side
Showing with 1965 additions and 128 deletions
src/api/business/accInfo.js
View file @ e4268ff3
...@@ -93,7 +93,7 @@ export function agentAccList(query) { ...@@ -93,7 +93,7 @@ export function agentAccList(query) {
} }
// 设置线下充值收付规则 // 设置线下充值收付规则
export function setOfflineRechargeInfo(rechargeType, cardNo) { export function setOfflineRechargeInfo(data) {
return request({ return request({
url: '/business/accInfo/recharge/offline/rule', url: '/business/accInfo/recharge/offline/rule',
method: 'post', method: 'post',
......
src/views/business/salaryAccount/extAcc.vue
View file @ e4268ff3
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="false" label-width="50px">
<el-form-item label="卡号" prop="payAccNo"> <el-row :gutter="0">
<el-input <el-col :span="6">
v-model="queryParams.payAccNo" <el-form-item label="卡号" prop="payAccNo">
placeholder="请输入卡号搜索" <el-input style="width: 100%;" v-model="queryParams.payAccNo" placeholder="请输入卡号搜索" clearable
clearable @keyup.enter.native="handleQuery" />
@keyup.enter.native="handleQuery" </el-form-item>
/> </el-col>
</el-form-item> <el-col :span="10">
<el-form-item> <el-form-item label-width="10px">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="4" :offset="4">
<div style="text-align: end;">
<el-button type="primary" size="mini" @click="toSign">绑定发薪账户</el-button>
</div>
</el-col>
</el-row>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="primary" icon="el-icon-plus" size="mini"
type="primary" v-hasPermi="['business:payChannel:add']">新增</el-button>
icon="el-icon-plus"
size="mini"
v-hasPermi="['business:payChannel:add']"
>新增</el-button>
</el-col> </el-col>
<right-toolbar @queryTable="getList"></right-toolbar> <!-- <right-toolbar @queryTable="getList"></right-toolbar> -->
</el-row> </el-row>
<el-card class="box-card" v-for="ele in accList" :key="ele.id">
<el-row>
<el-col :span="16">
<div class="companyConterMain">
<div class="enterpriseImageMain">
<img class="enterpriseImage" src="@/assets/images/enterprise.png" alt="">
</div>
<div class="companyConterInformation">
<div style="width:90%;">
<el-row>
<el-col :span="16">
账户：{{ ele.payAccName }}
</el-col>
<el-col :span="6">
<el-button type="info" @click="viewDetail(ele)" plain>账户详情</el-button>
</el-col>
</el-row>
</div>
<div style="width:90%;">
<el-row>
<el-col :span="16">
卡号：{{ ele.payAccNo }}
</el-col>
</el-row>
</div>
<div style="width:90%;">
<el-row>
<el-col :span="16">
通道：{{ sysPayChannelMap.get(ele.channelCode) }}
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="7" :offset="1">
<div class="operateConterMain">
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="balanceRecharge(ele)">余额充值</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="serviceChargeRecharge(ele)">服务费充值</el-button></el-col>
</el-row>
</div>
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;;" type="primary" @click="showBill(ele.payAccNo)"
plain>充值记录</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;;" type="primary" @click="salarySelection(ele.payAccNo)"
plain>去发薪</el-button></el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-card>
<!-- 账户详情弹窗 -->
<el-dialog title="账号信息查询" :visible.sync="accDetail.panel" width="30%" center>
<el-descriptions :title="accDetail.companyName" :column="1" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ accDetail.info.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ accDetail.info.bankAccName }}</el-descriptions-item>
<el-descriptions-item label="银行">{{ accDetail.info.cardBank }}</el-descriptions-item>
<el-descriptions-item label="支行">{{ accDetail.info.cardBranch }}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ accDetail.info.cardLocation }}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ accDetail.info.cardDeposit }}</el-descriptions-item>
<el-descriptions-item label="可转账金额">{{ accDetail.info.availableTransferAmount }}</el-descriptions-item>
<el-descriptions-item label="可用服务费">{{ accDetail.info.availableFeeAmount }}</el-descriptions-item>
</el-descriptions>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="accDetail.panel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 绑定发薪账户 -->
<el-dialog title="绑定账户" :visible.sync="bindAcc.panel" width="80%">
<tax-sign-component @submitSignContract="submitSignContract"></tax-sign-component>
<div slot="footer" class="dialog-footer">
<el-button @click="bindAcc.panel = false">关 闭</el-button>
</div>
</el-dialog>
<el-dialog title="充值记录" :visible.sync="billPanel" width="80%">
<el-form :model="billQuery" size="small" :inline="true" label-width="100px">
<el-form-item label="账单类型" prop="tranType">
<el-select v-model="billQuery.capitalPurpose" clearable placeholder="请选择">
<el-option label="全部" :value="''" />
<el-option label="服务费" :value="1" />
<el-option label="余额" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="getBillList">搜索</el-button>
</el-form-item>
</el-form>
<el-tabs value="first">
<el-tab-pane label="账单列表" name="first"></el-tab-pane>
</el-tabs>
<el-table v-loading="loading" :data="billDataList">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="账单类型" align="center" prop="capitalPurpose">
<template slot-scope="scope">
<span v-if="scope.row.capitalPurpose == 1">服务费</span>
<span v-if="scope.row.capitalPurpose == 2">余额</span>
</template>
</el-table-column>
<el-table-column label="收支类型" align="center" prop="tranType">
<template>
<el-button type="success" size="mini">收入</el-button>
</template>
</el-table-column>
<el-table-column label="金额" align="center" prop="tranAmount">
<template slot-scope="scope">
<span style="color: rgb(255, 208, 75)">
+ {{ scope.row.tranAmount }}
</span>
</template>
</el-table-column>
<el-table-column label="时间" align="center" prop="createTime" width="180" />
</el-table>
<el-pagination small layout="prev, pager, next" :total="billTotal" :page.sync="billQuery.pageNum"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :limit.sync="billQuery.pageSize"
@pagination="getBillList()">
</el-pagination>
<div slot="footer" class="dialog-footer">
<el-button @click="billPanel = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 去发薪对话框 -->
<el-dialog title="发薪选择" :visible.sync="payVisible" width="38%" center>
<div class="salarySelectionStyle">
<div class="salarySelectionMain" @click="toLinkBankCard">
<div class="salarySelectionImageDiv">
<img class="salarySelectionImage" src="@/assets/images/yhk.png" alt="">
</div>
<p class="salarySelectionText">批量到银行卡</p>
</div>
<div class="salarySelectionMain" @click="toLinkAlipay">
<div class="salarySelectionImageDiv">
<img class="salarySelectionImage" src="@/assets/images/zfb.png" alt="">
</div>
<el-table :data="accList"> <p class="salarySelectionText">批量到支付宝</p>
<el-table-column label="卡号" align="center" prop="payAccNo" /> </div>
<el-table-column label="户名" align="center" prop="payAccName" /> </div>
<el-table-column label="通道" align="center" prop="payAccNo"> </el-dialog>
<template slot-scope="scope"> <!-- 余额充值 -->
{{ sysPayChannelMap.get(scope.row.channelCode) }} <extAccBalance ref="extAccBalance"></extAccBalance>
</template> <!-- 服务费充值 -->
</el-table-column> <extAccServieCharge ref="extAccServieCharge"></extAccServieCharge>
<el-table-column label="关联企业" align="center" prop="companyName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="viewDetail(scope.row.payAccNo)"
>详情</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
</template> </template>
<script> <script>
import { listAllAccInfo } from '@/api/business/accInfo' import { listAllAccInfo, getAccAliInfo } from '@/api/business/accInfo'
import { listAllPayChannel } from '@/api/business/payChannel' import { listAllPayChannel } from '@/api/business/payChannel'
import TaxSignComponent from '@/views/business/salaryAccount/taxSignComponent.vue'
import { formatDate } from '@/utils'
import { addDateRange } from '@/utils/ruoyi'
import { listBill } from '@/api/business/accRecharge.js'
import extAccBalance from '@/views/business/salaryAccount/extAccBalance.vue'
import extAccServieCharge from '@/views/business/salaryAccount/extAccServieCharge.vue'
export default { export default {
name: "ExtAcc", name: "ExtAcc",
components: { TaxSignComponent, extAccBalance, extAccServieCharge },
props: {
// 权限列表
activeName: {
type: String,
default: ''
}
},
data() { data() {
return { return {
// 根路径 // 根路径
...@@ -66,12 +215,137 @@ export default { ...@@ -66,12 +215,137 @@ export default {
queryParams: { queryParams: {
bindType: 2, bindType: 2,
}, },
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
},
label_style: {
'font-size': '16px',
},
info: {
cardNo: '',
bankAccName: '',
cardBank: '',
cardBranch: '',
cardLocation: '',
cardDeposit: '',
availableTransferAmount: '',
availableFeeAmount: ''
},
panel: false
},
// 绑定账户
bindAcc: {
panel: false,
},
// 充值记录参数
loading: false,
dateRange: [formatDate(new Date()), formatDate(new Date())],
billDataList: [],
billTotal: 0,
billPanel: false,
billQuery: {
pageNum: 1,
pageSize: 10,
capitalPurpose: 1, //账单类型:1-服务费;2-余额
tranType: '', //收支类型:1-收入;2-支出
startTime: '',
endTime: '',
},
// 去发薪部分参数
payVisible: false,
cardNo: ''
}; };
}, },
created() { created() {
this.getList();
},
mounted() {
if (this.activeName == 'extAcc') {
this.getList();
}
}, },
methods: { methods: {
/** 点击服务费充值方法 */
serviceChargeRecharge(val) {
this.$refs.extAccServieCharge.enableRecharge(val)
},
/** 顶级余额充值方法 */
balanceRecharge(val) {
this.$refs.extAccBalance.enableRecharge(val)
},
/** 点击去发薪按钮 */
salarySelection(number) {
this.cardNo = number
this.payVisible = true
},
// 跳转到批量到支付宝
toLinkAlipay() {
this.$router.push({ path: "/transfer/batchToAli", query: { number: this.cardNo } });
this.payVisible = false
},
// 跳转到批量到银行卡
toLinkBankCard() {
this.$router.push({ path: "/transfer/batchToBank", query: { number: this.cardNo } });
this.payVisible = false
},
/** 点击充值记录按钮方法 */
showBill(cardNo) {
this.billQuery.cardNo = cardNo;
this.billPanel = true;
this.getBillList();
},
handleSizeChange(val) {
this.billQuery.pageSize = Number(val)
this.getBillList()
},
handleCurrentChange(val) {
this.billQuery.pageNum = Number(val)
this.getBillList()
}, /** 请求记录数据 */
getBillList() {
if (this.dateRange && this.dateRange.length > 0) {
let searchVal = addDateRange(this.billQuery, this.dateRange)
this.billQuery.startTime = searchVal.params.beginTime.split(" ")[0] + " 00:00:00"
this.billQuery.endTime = searchVal.params.endTime.split(" ")[0] + " 23:59:59"
} else {
this.billQuery.startTime = ''
this.billQuery.endTime = ''
}
this.loading = true
listBill(this.billQuery).then(res => {
if (res.code == 200) {
this.billDataList = res.rows
this.billTotal = res.total
}
}).finally(() => {
this.loading = false
})
},
/**调用子组件方法 */
submitSignContract() {
this.bindAcc.panel = false;
// this.queryHasNoAccOut()
this.getList()
},
/** 点击绑定发薪账户 */
toSign() {
this.bindAcc.panel = true;
},
/** 查看账户详情 */
viewDetail(card) {
this.$modal.loading("数据加载中...")
getAccAliInfo(card.payAccNo).then(resp => {
if (200 === resp.code) {
this.accDetail.companyName = card.companyName
this.accDetail.info = resp.data
this.accDetail.panel = true
}
}).finally(() => {
this.$modal.closeLoading()
})
},
/** 查询账户列表 */ /** 查询账户列表 */
async getList() { async getList() {
this.$modal.loading(); this.$modal.loading();
...@@ -96,10 +370,59 @@ export default { ...@@ -96,10 +370,59 @@ export default {
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
},
viewDetail(accNo) {
} }
} }
}; };
</script> </script>
<style lang="scss" scoped>
// 卡片样式
.box-card {
margin-top: 12px;
// 公司信息部分样式
.companyConterMain {
width: 100%;
height: 140px;
display: flex;
align-items: center;
justify-content: space-between;
// 公司图标样式
.enterpriseImageMain {
width: 200px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.enterpriseImage {
width: 120px;
height: 68px;
}
}
// 公司信息内容部分样式
.companyConterInformation {
width: calc(100% - 180px);
height: 90%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
}
}
// 操作按钮部分样式
.operateConterMain {
width: 90%;
height: 120px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
}
}
</style>
\ No newline at end of file
src/views/business/salaryAccount/extAccBalance.vue 0 → 100644
View file @ e4268ff3
<template>
<!-- 代发账户-余额充值 -->
<div>
<!-- 代发账号充值 -->
<el-dialog title="代发账户余额充值" :visible.sync="rechargeCoursePanelDialog" width="42%" center>
<el-row :gutter="64">
<el-col :span="12">
<p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
</el-col>
<el-col :span="12">
<p style="text-align: center;">通过银行系统进行打款充值</p>
</el-col>
</el-row>
<el-row :gutter="64">
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
<el-button class="ownRechargeButton"
@click="rechargeCoursePanelDialog = false; aliQRCodeRechargeOpen = true">直属账户充值</el-button>
</div>
</el-col>
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
<el-button class="ownRechargeButton" @click="offlineRecharge(false)">线下账户充值</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<!-- 代发项目充值-余额充值 -->
<el-dialog title="汇款充值余额" :visible.sync="rechargeCoursePanel" width="50%">
<h2 style="font-weight: bold;font-size: 22px;margin-top: -15px;color: #1a1a1a">什么是汇款充值</h2>
<el-row>
<el-col :span="24">
代发企业为商户开设支付宝安全发专属账本，商户可使用开设“安全发专属账本”时备案的银行账户（切记一定要使用备案的银行账户转账，否则系统将无法自动划转至专属账本）将需下发资金转入至代发企业招行专户，招行专户收到款后，将在30分钟内由系统自动将钱转入至“支付宝安全发专属账本”，具体转账路径如下图所示：
<div style="text-align: center;">
<img style="width:80%;margin-top: 10px;" src="@/assets/images/stepRecharge.png" alt="">
</div>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<span style="font-weight: bold;font-size: 22px;color: #1a1a1a">
三步完成充值
</span>
<a style="color: #69b1ff" href="https://render.alipay.com/p/yuyan/180020040000423002/de59b"
target="_blank">（查看教程）</a>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<el-timeline>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">登录你的网上银行</span>
<span style="color: gray;font-size: 14px">(支持任意银行)</span>
<div style="font-size: 14px;margin-top: 5px">
必须使用开设“支付宝安全发专属账本”时备案的银行账户进行汇款转账，首次使用建议小额转入测试。</div>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">付款账户信息</span>
<el-descriptions :column="1" :border="true" style="margin-top: 15px"
:label-style="accDetail.label_style" :contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.payerAccNo
}}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.payerAccName
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账时填写以下专属账户</span>
<el-descriptions :column="1" :border="true" style="margin-top: 15px"
:label-style="accDetail.label_style" :contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.bankAccName
}}</el-descriptions-item>
<el-descriptions-item label="银行">{{ offlineRechargeData.cardBank
}}</el-descriptions-item>
<el-descriptions-item label="支行">{{ offlineRechargeData.cardBranch
}}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ offlineRechargeData.cardLocation
}}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ offlineRechargeData.cardDeposit
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</span>
<div style="font-size: 14px;margin-top: 5px">非工作时间预计最晚下个工作日到账(具体以银行为准)</div>
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="rechargeCoursePanel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 支付宝充值 -->
<el-dialog title="支付宝充值" :visible.sync="aliQRCodeRechargeOpen" width="500px" style="text-align: center">
<!-- <h3>转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</h3>-->
<el-form :model="aliQRCodeRechargeForm" ref="signNewForm" size="small" label-width="120px"
:rules="aliQRCodeRechargeRules">
<el-form-item label="收款账户" prop="payeeAccNo">
<el-input v-model="aliQRCodeRechargeForm.payeeAccNo" placeholder="请输入收款账号" disabled />
</el-form-item>
<el-form-item label="付款账户" prop="payerAccNo" v-if="aliQRCodeRechargeForm.bindType">
<accSelect :bindType="1" v-model="aliQRCodeRechargeForm.payerAccNo"></accSelect>
</el-form-item>
<el-form-item label="余额/服务费" prop="rechargeType">
<template>
<el-select v-model="aliQRCodeRechargeForm.rechargeType" style="width: 100%" disabled>
<el-option label="余额" :value="2">余额</el-option>
<el-option label="服务费" :value="1">服务费</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="充值金额" prop="amount">
<el-input-number v-model="aliQRCodeRechargeForm.amount" placeholder="请输入充值金额" :precision="2"
style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getAliPayUrl">确认支付</el-button>
<el-button @click="aliQRCodeRechargeOpen = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="确认支付" :visible.sync="qrPayPanel.open" width="20%">
<div>
<span style="font-size: 18px;">1、使用手机支付宝扫码支付;</span>
<qr-code-component :text="qrPayPanel.payUrl" />
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="qrPayPanel.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 付款账户信息填写 -->
<el-dialog title="添加付款账户" :visible.sync="paymentAccountDialog" width="30%">
<el-form :model="paymentAccountForm" ref="paymentAccountRef" label-width="120px"
:rules="paymentAccountRules">
<el-form-item label="付款账户" prop="payerAccNo">
<el-input v-model="paymentAccountForm.payerAccNo" placeholder="请输入付款账户" />
</el-form-item>
<el-form-item label="付款账户名称" prop="payerAccName">
<el-input v-model="paymentAccountForm.payerAccName" placeholder="请输入付款账户名称" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="paymentAccountDialog = false">取 消</el-button>
<el-button type="primary" @click="paymentAccountSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import AccSelect from '@/views/business/accInfo/accSelect.vue'
import QrCodeComponent from '@/components/QrCode.vue'
import { addAccRecharge } from '@/api/business/accRecharge.js'
import { getOfflineRechargeInfo, setOfflineRechargeInfo } from '@/api/business/accInfo.js'
export default {
components: { QrCodeComponent, AccSelect },
data() {
return {
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
'width': '70%'
},
label_style: {
'font-size': '16px',
'width': '30%'
}
},
aliQRCodeRechargeForm: {
payeeAccNo: '',
rechargeType: 2,
amount: '',
payerAccNo: ''
},
aliQRCodeRechargeRules: {
payerAccNo: [
{ required: true, message: '请选择付款账号', trigger: 'change' }
],
amount: [
{
validator: (rule, value, callback) => {
if (value <= 0) {
callback(new Error('充值金额必须大于零'));
} else {
callback()
}
},
trigger: 'blur'
}
]
},
rechargeCoursePanelDialog: false,
aliQRCodeRechargeOpen: false,
offlineRechargeStatic: false,
offlineRechargeData: {
cardNo: '',
bankAccName: '',
cardBank: '',
cardBranch: '',
cardLocation: '',
cardDeposit: '',
payerAccName: '',
payerAccNo: ''
},
rechargeCoursePanel: false,
qrPayPanel: {
open: false,
payUrl: ''
},
// 付款账户
paymentAccountDialog: false,
paymentAccountForm: {
targetAccNo: '', // 卡号
payerAccNo: '', // 付款账户
payerAccName: '', // 付款账户名称
},
paymentAccountRules: {
payerAccNo: [
{ required: true, message: '请输入付款账户', trigger: 'change' }
],
payerAccName: [
{ required: true, message: '请输入付款账户名称', trigger: 'blur' }
]
}
}
},
methods: {
// 确认支付按钮
getAliPayUrl() {
this.$refs.signNewForm.validate((valid) => {
if (valid) {
this.$modal.loading('充值中....')
addAccRecharge(this.aliQRCodeRechargeForm).then(res => {
this.aliQRCodeRechargeOpen = false
if (200 === res.code) {
// 如果是服务费充值 或者是内部账户余额充值
if (1 === this.aliQRCodeRechargeForm.rechargeType || 1 === this.aliQRCodeRechargeForm.bindType) {
if (res.data.status) {
this.qrPayPanel.payUrl = res.data.msg
this.qrPayPanel.open = true
this.$forceUpdate()
} else {
this.$modal.msgWarning(res.data.msg)
}
} else {
this.$modal.msgSuccess("充值成功！");
}
}
}).finally(() => {
this.$modal.closeLoading()
})
}
})
},
// 选择线下充值方法
offlineRecharge() {
getOfflineRechargeInfo(2, this.aliQRCodeRechargeForm.payeeAccNo).then(res => {
if (res.code === 200 && res.data.isNormal == 'yes') {
this.rechargeCoursePanelDialog = false
this.offlineRechargeData = {
cardNo: res.data.payeeAccNo,
bankAccName: res.data.payeeAccName,
cardBank: res.data.payeeBank,
cardBranch: res.data.payeeBranch,
cardLocation: res.data.payeeLocation,
cardDeposit: res.data.bankNumber,
payerAccName: res.data.payerAccName,
payerAccNo: res.data.payerAccNo
}
this.rechargeCoursePanel = true
} else if (res.code === 200 && res.data.isNormal == 'no') {
this.rechargeCoursePanelDialog = false
this.paymentAccountForm = {
targetAccNo: this.aliQRCodeRechargeForm.payeeAccNo,
payerAccNo: '',
payerAccName: ''
}
this.paymentAccountDialog = true
}
})
// this.offlineRechargeData = {
// cardNo: '515901720410008',
// bankAccName: '盐城美好生活专业清洁服务有限公司',
// cardBank: '招商银行',
// cardBranch: '盐城市青年路支行',
// cardLocation: '江苏-盐城市',
// cardDeposit: '308311000033'
// }
},
// 添加付款账户弹窗确认按钮
paymentAccountSubmit() {
this.$refs.paymentAccountRef.validate((valid) => {
if (valid) {
setOfflineRechargeInfo(this.paymentAccountForm).then(res => {
if (res.code === 200) {
this.$modal.msgSuccess('添加成功！')
this.paymentAccountDialog = false
this.offlineRecharge()
}
})
}
})
},
/** 父组件调用子组件 */
enableRecharge(val) {
// this.aliQRCodeRechargeForm.rechargeType = 2
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.rechargeCoursePanelDialog = true
},
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/views/business/salaryAccount/extAccServieCharge.vue 0 → 100644
View file @ e4268ff3
<template>
<!-- 代发账户-服务费充值 -->
<div>
<el-dialog title="代发账户服务费充值" :visible.sync="rechargeCoursePanelDialog" width="42%" center>
<el-row :gutter="64">
<el-col :span="12">
<p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
</el-col>
<el-col :span="12">
<p style="text-align: center;">通过银行系统进行打款充值</p>
</el-col>
</el-row>
<el-row :gutter="64">
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
<el-button class="ownRechargeButton"
@click="rechargeCoursePanelDialog = false; aliQRCodeRechargeOpen = true">直属账户充值</el-button>
</div>
</el-col>
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
<el-button class="ownRechargeButton" @click="offlineRecharge">线下账户充值</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<!-- 代发项目充值-服务费充值 -->
<el-dialog title="汇款充值服务费" :visible.sync="serviceCoursePanel" width="50%">
<h2 style="font-weight: bold;font-size: 22px;margin-top: -15px;color: #1a1a1a">什么是汇款充值</h2>
<el-row>
<el-col :span="24">
商户在下发资金时需消耗服务费，商户可使用开设“安全发专属账本”时备案的银行账户（切记一定要使用备案的银行账户转账，否则系统将无法自动划转至专属账本）将服务费转入至服务费专户，服务费专户收到款后，将在30分钟内由系统自动将钱计入至商户服务费，具体转账路径如下图所示：
<div style="text-align: center;">
<img style="width:80%;margin-top: 10px;" src="@/assets/images/stepRechargeServer.png" alt="">
</div>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<span style="font-weight: bold;font-size: 22px;color: #1a1a1a">
三步完成充值
</span>
<a style="color: #69b1ff" href="https://render.alipay.com/p/yuyan/180020040000423002/de59b"
target="_blank">（查看教程）</a>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<el-timeline>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">登录你的网上银行</span>
<span style="color: gray;font-size: 14px">(支持任意银行)</span>
<div style="font-size: 14px;margin-top: 5px">
必须使用开设“支付宝安全发专属账本”时备案的银行账户进行汇款转账，首次使用建议小额转入测试。</div>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">付款账户信息</span>
<el-descriptions :title="offlineRechargeStatic ? '你的企业备付金余额账户' : ''" :column="1"
:border="true" style="margin-top: 15px" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.payerAccNo
}}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.payerAccName
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账时填写以下专属账户</span>
<el-descriptions :title="offlineRechargeStatic ? '你的企业备付金余额账户' : ''" :column="1"
:border="true" style="margin-top: 15px" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.bankAccName
}}</el-descriptions-item>
<el-descriptions-item label="银行">{{ offlineRechargeData.cardBank
}}</el-descriptions-item>
<el-descriptions-item label="支行">{{ offlineRechargeData.cardBranch
}}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ offlineRechargeData.cardLocation
}}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ offlineRechargeData.cardDeposit
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</span>
<div style="font-size: 14px;margin-top: 5px">非工作时间预计最晚下个工作日到账(具体以银行为准)</div>
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="serviceCoursePanel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 充值弹窗 -->
<el-dialog title="支付宝充值" :visible.sync="aliQRCodeRechargeOpen" width="500px" style="text-align: center">
<el-form :model="aliQRCodeRechargeForm" ref="signNewForm" size="small" label-width="120px"
:rules="aliQRCodeRechargeRules">
<el-form-item label="收款账户" prop="payeeAccNo">
<el-input v-model="aliQRCodeRechargeForm.payeeAccNo" placeholder="请输入收款账号" disabled />
</el-form-item>
<el-form-item label="余额/服务费" prop="rechargeType">
<template>
<el-select v-model="aliQRCodeRechargeForm.rechargeType" style="width: 100%" disabled>
<el-option label="余额" :value="2">余额</el-option>
<el-option label="服务费" :value="1">服务费</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="充值金额" prop="amount">
<el-input-number v-model="aliQRCodeRechargeForm.amount" placeholder="请输入充值金额" :precision="2"
style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getAliPayUrl">确认支付</el-button>
<el-button @click="aliQRCodeRechargeOpen = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="确认支付" :visible.sync="qrPayPanel.open" width="20%">
<div>
<span style="font-size: 18px;">1、使用手机支付宝扫码支付;</span>
<qr-code-component :text="qrPayPanel.payUrl" />
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="qrPayPanel.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 付款账户信息填写 -->
<el-dialog title="添加付款账户" :visible.sync="paymentAccountDialog" width="30%">
<el-form :model="paymentAccountForm" ref="paymentAccountRef" label-width="120px"
:rules="paymentAccountRules">
<el-form-item label="付款账户" prop="payerAccNo">
<el-input v-model="paymentAccountForm.payerAccNo" placeholder="请输入付款账户" />
</el-form-item>
<el-form-item label="付款账户名称" prop="payerAccName">
<el-input v-model="paymentAccountForm.payerAccName" placeholder="请输入付款账户名称" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="paymentAccountDialog = false">取 消</el-button>
<el-button type="primary" @click="paymentAccountSubmit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { addAccRecharge } from '@/api/business/accRecharge.js'
import QrCodeComponent from '@/components/QrCode.vue'
import { getOfflineRechargeInfo, setOfflineRechargeInfo } from '@/api/business/accInfo.js'
export default {
components: { QrCodeComponent },
data() {
return {
rechargeCoursePanelDialog: false,
aliQRCodeRechargeOpen: false,
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
'width': '70%'
},
label_style: {
'font-size': '16px',
'width': '30%'
}
},
aliQRCodeRechargeForm: {
payeeAccNo: '',
rechargeType: 1,
amount: '',
payerAccNo: ''
},
offlineRechargeData: {
cardNo: '',
bankAccName: '',
cardBank: '',
cardBranch: '',
cardLocation: '',
cardDeposit: '',
payerAccName: '',
payerAccNo: ''
},
aliQRCodeRechargeRules: {
payerAccNo: [
{ required: true, message: '请选择付款账号', trigger: 'change' }
],
amount: [
{
validator: (rule, value, callback) => {
if (value <= 0) {
callback(new Error('充值金额必须大于零'));
} else {
callback()
}
},
trigger: 'blur'
}
]
},
qrPayPanel: {
open: false,
payUrl: ''
},
serviceCoursePanel: false,
offlineRechargeStatic: false,
// 付款账户
paymentAccountDialog: false,
paymentAccountForm: {
targetAccNo: '', // 卡号
payerAccNo: '', // 付款账户
payerAccName: '', // 付款账户名称
},
paymentAccountRules: {
payerAccNo: [
{ required: true, message: '请输入付款账户', trigger: 'change' }
],
payerAccName: [
{ required: true, message: '请输入付款账户名称', trigger: 'blur' }
]
}
}
},
methods: {
// 确认支付按钮
getAliPayUrl() {
this.$refs.signNewForm.validate((valid) => {
if (valid) {
this.$modal.loading('充值中....')
addAccRecharge(this.aliQRCodeRechargeForm).then(res => {
this.aliQRCodeRechargeOpen = false
if (200 === res.code) {
if (res.data.status) {
this.qrPayPanel.payUrl = res.data.msg
this.qrPayPanel.open = true
this.$forceUpdate()
} else {
this.$modal.msgWarning(res.data.msg)
}
} else {
this.$modal.msgSuccess("充值成功！");
}
}).finally(() => {
this.$modal.closeLoading()
})
}
})
},
// 选择线下充值方法
offlineRecharge() {
getOfflineRechargeInfo(1, this.aliQRCodeRechargeForm.payeeAccNo).then(res => {
console.log('res', res);
if (res.code === 200 && res.data.isNormal == 'yes') {
this.rechargeCoursePanelDialog = false
this.offlineRechargeData = {
cardNo: res.data.payeeAccNo,
bankAccName: res.data.payeeAccName,
cardBank: res.data.payeeBank,
cardBranch: res.data.payeeBranch,
cardLocation: res.data.payeeLocation,
cardDeposit: res.data.bankNumber,
payerAccName: res.data.payerAccName,
payerAccNo: res.data.payerAccNo
}
this.serviceCoursePanel = true
} else if (res.code === 200 && res.data.isNormal == 'no') {
this.rechargeCoursePanelDialog = false
this.paymentAccountForm = {
targetAccNo: this.aliQRCodeRechargeForm.payeeAccNo,
payerAccNo: '',
payerAccName: ''
}
this.paymentAccountDialog = true
}
})
// this.offlineRechargeData = {
// cardNo: '571922384010001',
// bankAccName: '良贸通(杭州)科技有限公司',
// cardBank: '招商银行',
// cardBranch: '招商银行股份有限公司杭州解放支行',
// cardLocation: '江苏-杭州市',
// cardDeposit: '308331012095'
// }
},
// 添加付款账户弹窗确认按钮
paymentAccountSubmit() {
this.$refs.paymentAccountRef.validate((valid) => {
if (valid) {
setOfflineRechargeInfo(this.paymentAccountForm).then(res => {
if (res.code === 200) {
this.$modal.msgSuccess('添加成功！')
this.paymentAccountDialog = false
this.offlineRecharge()
}
})
}
})
},
/** 父组件调用子组件 */
enableRecharge(val) {
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.rechargeCoursePanelDialog = true
},
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/views/business/salaryAccount/index.vue
View file @ e4268ff3
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div class="app-container"> <div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="直属账户" name="ownAcc"> <el-tab-pane label="直属账户" name="ownAcc">
<own-acc></own-acc> <own-acc v-if="activeName == 'ownAcc'" :activeName="activeName"></own-acc>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="代发账户" name="extAcc"> <el-tab-pane label="代发账户" name="extAcc">
<ext-acc></ext-acc> <ext-acc v-if="activeName == 'extAcc'" :activeName="activeName"></ext-acc>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<!-- 发薪账户管理页面 --> <!-- 发薪账户管理页面 -->
<el-tabs v-model="payType" @tab-click="handleClick" type="card"> <!-- <el-tabs v-model="payType" @tab-click="handleClick" type="card">
<el-tab-pane label="自有发薪账号" name="first"> <el-tab-pane label="自有发薪账号" name="first">
<el-form label-width="120px" label-position="left" class="formMain"> <el-form label-width="120px" label-position="left" class="formMain">
<el-row :gutter="30"> <el-row :gutter="30">
...@@ -56,19 +56,6 @@ ...@@ -56,19 +56,6 @@
通道：{{ sysPayChannelMap.get(ele.channelCode) }} 通道：{{ sysPayChannelMap.get(ele.channelCode) }}
</el-col> </el-col>
</el-row> </el-row>
<!-- <div style="width:90%;">
<el-row>
<el-col :span="8">
可转帐余额：<span style="color:#4aa3ff;">1111</span>
</el-col>
<el-col :span="8">
可用服务费：<span style="color:#4aa3ff;">1111</span>
</el-col>
<el-col :span="8">
服务费率：<span style="color:#4aa3ff;">11111</span>
</el-col>
</el-row>
</div> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -95,8 +82,8 @@ ...@@ -95,8 +82,8 @@
</el-row> </el-row>
</el-card> </el-card>
<el-empty v-if="ownList.length == 0" description="暂无账号"></el-empty> <el-empty v-if="ownList.length == 0" description="暂无账号"></el-empty>
</el-tab-pane> </el-tab-pane> -->
<el-tab-pane label="第三方发薪账号" name="second"> <el-form label-width="120px" label-position="left" class="formMain"> <!-- <el-tab-pane label="第三方发薪账号" name="second"> <el-form label-width="120px" label-position="left" class="formMain">
<el-row :gutter="30"> <el-row :gutter="30">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="支付宝外卡卡号"> <el-form-item label="支付宝外卡卡号">
...@@ -145,19 +132,6 @@ ...@@ -145,19 +132,6 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- <div style="width:90%;">
<el-row>
<el-col :span="8">
可转帐余额：<span style="color:#4aa3ff;">222</span>
</el-col>
<el-col :span="8">
可用服务费：<span style="color:#4aa3ff;">2222</span>
</el-col>
<el-col :span="8">
服务费率：<span style="color:#4aa3ff;">2222</span>
</el-col>
</el-row>
</div> -->
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -212,8 +186,8 @@ ...@@ -212,8 +186,8 @@
</el-card> </el-card>
<el-empty v-if="thirdParty.length == 0 && (!signNoAccList || signNoAccList.length == 0)" <el-empty v-if="thirdParty.length == 0 && (!signNoAccList || signNoAccList.length == 0)"
description="暂无账号"></el-empty> description="暂无账号"></el-empty>
</el-tab-pane> </el-tab-pane> -->
</el-tabs> <!-- </el-tabs> -->
<!-- 去发薪对话框 --> <!-- 去发薪对话框 -->
<el-dialog title="发薪选择" :visible.sync="payVisible" width="38%" center> <el-dialog title="发薪选择" :visible.sync="payVisible" width="38%" center>
<div class="salarySelectionStyle"> <div class="salarySelectionStyle">
...@@ -710,14 +684,14 @@ export default { ...@@ -710,14 +684,14 @@ export default {
created() { created() {
}, },
mounted() { mounted() {
this.sysPayChannelAll() // this.sysPayChannelAll()
if (this.payType == 'first') { // if (this.payType == 'first') {
this.params.bindType = 1 // this.params.bindType = 1
this.getListAllAccInfoFN() // this.getListAllAccInfoFN()
} else if (this.payType == 'second') { // } else if (this.payType == 'second') {
this.params.bindType = 2 // this.params.bindType = 2
this.getListAllAccInfoFN() // this.getListAllAccInfoFN()
} // }
}, },
methods: { methods: {
sysPayChannelAll() { sysPayChannelAll() {
...@@ -903,14 +877,16 @@ export default { ...@@ -903,14 +877,16 @@ export default {
}, },
// tab发生变化时执行 // tab发生变化时执行
handleClick(tab, event) { handleClick(tab, event) {
if (this.payType == 'first') { console.log('activeName', this.activeName);
this.params.bindType = 1 this.$forceUpdate()
this.getListAllAccInfoFN() // if (this.payType == 'first') {
} else if (this.payType == 'second') { // this.params.bindType = 1
this.params.bindType = 2 // this.getListAllAccInfoFN()
this.getListAllAccInfoFN() // } else if (this.payType == 'second') {
this.queryHasNoAccOut(); // this.params.bindType = 2
} // this.getListAllAccInfoFN()
// this.queryHasNoAccOut();
// }
// console.log(tab, event); // console.log(tab, event);
// console.log('payType', this.payType); // console.log('payType', this.payType);
}, },
......
src/views/business/salaryAccount/ownAcc.vue
View file @ e4268ff3
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="false" label-width="50px">
<el-form-item label="卡号" prop="payAccNo"> <el-row :gutter="0">
<el-input <el-col :span="6">
v-model="queryParams.payAccNo" <el-form-item label="卡号" prop="payAccNo">
placeholder="请输入卡号搜索" <el-input style="width: 100%;" v-model="queryParams.payAccNo" placeholder="请输入卡号搜索" clearable
clearable @keyup.enter.native="handleQuery" />
@keyup.enter.native="handleQuery" </el-form-item>
/> </el-col>
</el-form-item> <el-col :span="10">
<el-form-item> <el-form-item label-width="10px">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="4" :offset="4">
<div style="text-align: end;">
<el-button type="primary" size="mini" @click="goRegister">绑定发薪账户</el-button>
</div>
</el-col>
</el-row>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button type="primary" icon="el-icon-plus" size="mini"
type="primary" v-hasPermi="['business:payChannel:add']">新增</el-button>
icon="el-icon-plus"
size="mini"
v-hasPermi="['business:payChannel:add']"
>新增</el-button>
</el-col> </el-col>
<right-toolbar @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-card class="box-card" v-for="ele in accList" :key="ele.id">
<el-row>
<el-col :span="16">
<div class="companyConterMain">
<div class="enterpriseImageMain">
<img class="enterpriseImage" src="@/assets/images/enterprise.png" alt="">
</div>
<div class="companyConterInformation">
<div style="width:90%;">
<el-row>
<el-col :span="16">
账户：({{ ele.payAccName }})
</el-col>
<el-col :span="6">
<el-button type="info" @click="viewDetail(ele)" plain>账户详情</el-button>
</el-col>
</el-row>
</div>
<el-row>
<el-col :span="16">
卡号：{{ ele.payAccNo }}
</el-col>
</el-row>
<el-row>
<el-col :span="16">
通道：{{ sysPayChannelMap.get(ele.channelCode) }}
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="6" :offset="2">
<div class="operateConterMain">
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="ownBalanceRecharge(ele)">余额充值</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="ownServiceChargeRecharge(ele)">服务费充值</el-button></el-col>
</el-row>
</div>
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;" @click="showBill(ele.payAccNo)" type="primary"
plain>充值记录</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;" type="primary" plain
@click="salarySelection(ele.payAccNo)">去发薪</el-button></el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-empty v-if="accList.length == 0" description="暂无账号"></el-empty>
<!-- 账户详情弹窗 -->
<el-dialog title="账号信息查询" :visible.sync="accDetail.panel" width="30%" center>
<el-descriptions :title="accDetail.companyName" :column="1" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ accDetail.info.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ accDetail.info.bankAccName }}</el-descriptions-item>
<el-descriptions-item label="银行">{{ accDetail.info.cardBank }}</el-descriptions-item>
<el-descriptions-item label="支行">{{ accDetail.info.cardBranch }}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ accDetail.info.cardLocation }}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ accDetail.info.cardDeposit }}</el-descriptions-item>
<el-descriptions-item label="可转账金额">{{ accDetail.info.availableTransferAmount }}</el-descriptions-item>
<el-descriptions-item label="可用服务费">{{ accDetail.info.availableFeeAmount }}</el-descriptions-item>
</el-descriptions>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="accDetail.panel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 绑定发薪账户弹窗 -->
<el-dialog title="绑定账户" :visible.sync="openSign.panel" width="300">
<el-form label-width="80px">
<el-form-item label="账户主体">
<el-select v-model="openSign.companyId" placeholder="请选择账户对应的企业主体" @change="selectSignCompany">
<el-option v-for="item in openSign.companyList" :key="item.id" :label="item.companyName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="支付通道">
<el-select v-model="openSign.channelCode" placeholder="请选择要开通的支付通道">
<el-option v-for="item in companyPayChannelList" :key="item.channelCode" :label="item.channelName"
:value="item.channelCode" :disabled="!item.isEnter || item.isEnter > 2" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitBind">确定</el-button>
<el-button @click="openSign.panel = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 绑定账户弹窗-扫码签约 -->
<el-dialog title="扫码签约" :visible.sync="openSign.codePanel" width="300px" style="text-align: center">
<h3>1、请打开对应企业的支付宝</h3>
<h3>2、扫描下方二维码</h3>
<qr-code-component :text="openSign.codeUrl" />
<h3>操作完成后大约5-10分钟</h3>
<h3>可刷新页面查看结果</h3>
<div slot="footer" class="dialog-footer">
<el-button @click="openSign.codePanel = false">关 闭</el-button>
</div>
</el-dialog>
<el-dialog title="充值记录" :visible.sync="billPanel" width="80%">
<el-form :model="billQuery" size="small" :inline="true" label-width="100px">
<el-form-item label="账单类型" prop="tranType">
<el-select v-model="billQuery.capitalPurpose" clearable placeholder="请选择">
<el-option label="全部" :value="''" />
<el-option label="服务费" :value="1" />
<el-option label="余额" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="getBillList">搜索</el-button>
</el-form-item>
</el-form>
<el-tabs value="first">
<el-tab-pane label="账单列表" name="first"></el-tab-pane>
</el-tabs>
<el-table v-loading="loading" :data="billDataList">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="账单类型" align="center" prop="capitalPurpose">
<template slot-scope="scope">
<span v-if="scope.row.capitalPurpose == 1">服务费</span>
<span v-if="scope.row.capitalPurpose == 2">余额</span>
</template>
</el-table-column>
<el-table-column label="收支类型" align="center" prop="tranType">
<template>
<el-button type="success" size="mini">收入</el-button>
</template>
</el-table-column>
<el-table-column label="金额" align="center" prop="tranAmount">
<template slot-scope="scope">
<span style="color: rgb(255, 208, 75)">
+ {{ scope.row.tranAmount }}
</span>
</template>
</el-table-column>
<el-table-column label="时间" align="center" prop="createTime" width="180" />
</el-table>
<el-pagination small layout="prev, pager, next" :total="billTotal" :page.sync="billQuery.pageNum"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :limit.sync="billQuery.pageSize"
@pagination="getBillList()">
</el-pagination>
<div slot="footer" class="dialog-footer">
<el-button @click="billPanel = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 去发薪对话框 -->
<el-dialog title="发薪选择" :visible.sync="payVisible" width="38%" center>
<div class="salarySelectionStyle">
<div class="salarySelectionMain" @click="toLinkBankCard">
<div class="salarySelectionImageDiv">
<img class="salarySelectionImage" src="@/assets/images/yhk.png" alt="">
</div>
<p class="salarySelectionText">批量到银行卡</p>
</div>
<div class="salarySelectionMain" @click="toLinkAlipay">
<div class="salarySelectionImageDiv">
<img class="salarySelectionImage" src="@/assets/images/zfb.png" alt="">
</div>
<el-table :data="accList"> <p class="salarySelectionText">批量到支付宝</p>
<el-table-column label="卡号" align="center" prop="payAccNo" /> </div>
<el-table-column label="户名" align="center" prop="payAccName" /> </div>
<el-table-column label="通道" align="center" prop="payAccNo"> </el-dialog>
<template slot-scope="scope"> <!-- 余额充值组件 -->
{{ sysPayChannelMap.get(scope.row.channelCode) }} <ownAccBalance ref="ownAccBalance"></ownAccBalance>
</template> <!-- 服务费充值组件 -->
</el-table-column> <ownAccServiceCharge ref="ownAccServiceCharge"></ownAccServiceCharge>
</el-table>
</div> </div>
</template> </template>
<script> <script>
import { listAllAccInfo } from '@/api/business/accInfo' import { listAllAccInfo, getAccAliInfo } from '@/api/business/accInfo'
import { listAllPayChannel } from '@/api/business/payChannel' import { listAllPayChannel } from '@/api/business/payChannel'
import { listAllCompanyInfo } from '@/api/business/companyInfo'
import { listAllCompanyPayChannel, signChannel } from '@/api/business/companyPayChannel'
import QrCodeComponent from '@/components/QrCode.vue'
import { formatDate } from '@/utils'
import { addDateRange } from '@/utils/ruoyi'
import { listBill } from '@/api/business/accRecharge.js'
import ownAccBalance from "@/views/business/salaryAccount/ownAccBalance.vue"
import ownAccServiceCharge from '@/views/business/salaryAccount/ownAccServiceCharge.vue'
export default { export default {
name: "OwnAcc", name: "OwnAcc",
props: {
activeName: {
type: String,
default: ''
}
},
components: { QrCodeComponent, ownAccBalance, ownAccServiceCharge },
data() { data() {
return { return {
// 根路径 // 根路径
...@@ -55,12 +234,174 @@ export default { ...@@ -55,12 +234,174 @@ export default {
bindType: 1, bindType: 1,
}, },
sysPayChannelMap: null, sysPayChannelMap: null,
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
},
label_style: {
'font-size': '16px',
},
info: {
cardNo: '',
bankAccName: '',
cardBank: '',
cardBranch: '',
cardLocation: '',
cardDeposit: '',
availableTransferAmount: '',
availableFeeAmount: ''
},
panel: false
},
// 绑定账户
openSign: {
panel: false,
companyId: null,
companyList: [],
codePanel: false,
codeUrl: '',
channelCode: ''
},
companyPayChannelList: [],
// 充值记录参数
loading: false,
dateRange: [formatDate(new Date()), formatDate(new Date())],
billDataList: [],
billTotal: 0,
billPanel: false,
billQuery: {
pageNum: 1,
pageSize: 10,
capitalPurpose: 1, //账单类型:1-服务费;2-余额
tranType: '', //收支类型:1-收入;2-支出
startTime: '',
endTime: '',
},
// 去发薪部分参数
payVisible: false,
cardNo: ''
}; };
}, },
created() { created() {
this.getList();
},
mounted() {
if (this.activeName == 'ownAcc') {
this.getList();
}
}, },
methods: { methods: {
// 点击服务费充值
ownServiceChargeRecharge(val) {
this.$refs.ownAccServiceCharge.enableRecharge(val)
},
// 点击余额充值
ownBalanceRecharge(val) {
this.$refs.ownAccBalance.enableRecharge(val)
},
// 跳转到批量到支付宝
toLinkAlipay() {
this.$router.push({ path: "/transfer/batchToAli", query: { number: this.cardNo } });
this.payVisible = false
},
// 跳转到批量到银行卡
toLinkBankCard() {
this.$router.push({ path: "/transfer/batchToBank", query: { number: this.cardNo } });
this.payVisible = false
},
/** 点击去发薪按钮 */
salarySelection(number) {
this.cardNo = number
this.payVisible = true
},
/** 点击充值记录按钮方法 */
showBill(cardNo) {
this.billQuery.cardNo = cardNo;
this.billPanel = true;
this.getBillList();
},
handleSizeChange(val) {
this.billQuery.pageSize = Number(val)
this.getBillList()
},
handleCurrentChange(val) {
this.billQuery.pageNum = Number(val)
this.getBillList()
}, /** 请求记录数据 */
getBillList() {
if (this.dateRange && this.dateRange.length > 0) {
let searchVal = addDateRange(this.billQuery, this.dateRange)
this.billQuery.startTime = searchVal.params.beginTime.split(" ")[0] + " 00:00:00"
this.billQuery.endTime = searchVal.params.endTime.split(" ")[0] + " 23:59:59"
} else {
this.billQuery.startTime = ''
this.billQuery.endTime = ''
}
this.loading = true
listBill(this.billQuery).then(res => {
if (res.code == 200) {
this.billDataList = res.rows
this.billTotal = res.total
}
}).finally(() => {
this.loading = false
})
},
/** 绑定账户弹窗-确认按钮功能 */
submitBind() {
const singForm = {
companyId: this.openSign.companyId,
unitType: 1,
channelCode: this.openSign.channelCode
}
this.$modal.loading()
signChannel(singForm).then(resp => {
this.openSign.codePanel = true;
this.openSign.codeUrl = resp.data
}).finally(() => {
this.$modal.closeLoading()
this.openSign.panel = false;
})
},
// 点击绑账户
goRegister() {
this.openSign.companyId = null;
this.openSign.channelCode = null;
this.companyPayChannelList = [];
listAllCompanyInfo({ bindType: 1 }).then(resp => {
if (200 === resp.code) {
this.openSign.companyList = resp.data
}
}).finally(() => {
this.openSign.panel = true
})
},
/** 绑定账户-选择账户主体执行 */
selectSignCompany(value) {
this.openSign.channelCode = null;
const channelQuery = {
unitType: 1,
companyId: value,
status: 1
}
listAllCompanyPayChannel(channelQuery).then(resp => {
this.companyPayChannelList = resp.data
})
},
/** 查看账户详情 */
viewDetail(card) {
this.$modal.loading("数据加载中...")
getAccAliInfo(card.payAccNo).then(resp => {
if (200 === resp.code) {
this.accDetail.companyName = card.companyName
this.accDetail.info = resp.data
this.accDetail.panel = true
}
}).finally(() => {
this.$modal.closeLoading()
})
},
/** 查询账户列表 */ /** 查询账户列表 */
async getList() { async getList() {
this.$modal.loading(); this.$modal.loading();
...@@ -89,3 +430,55 @@ export default { ...@@ -89,3 +430,55 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped>
// 卡片样式
.box-card {
margin-top: 12px;
// 公司信息部分样式
.companyConterMain {
width: 100%;
height: 140px;
display: flex;
align-items: center;
justify-content: space-between;
// 公司图标样式
.enterpriseImageMain {
width: 200px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.enterpriseImage {
width: 120px;
height: 68px;
}
}
// 公司信息内容部分样式
.companyConterInformation {
width: calc(100% - 180px);
height: 90%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
}
}
// 操作按钮部分样式
.operateConterMain {
width: 90%;
height: 120px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
}
}
</style>
\ No newline at end of file
src/views/business/salaryAccount/ownAccBalance.vue 0 → 100644
View file @ e4268ff3
<template>
<!-- 自由账户充值-余额 -->
<div>
<!-- 余额充值弹窗 -->
<el-dialog title="余额充值" :visible.sync="ownAliQRCodeRechargeOpen" width="42%" center>
<el-row :gutter="64">
<el-col :span="12">
<p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
</el-col>
<el-col :span="12">
<p style="text-align: center;">通过银行系统进行打款充值</p>
</el-col>
</el-row>
<el-row :gutter="64">
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
<el-button class="ownRechargeButton"
@click="ownAliQRCodeRechargeOpen = false; aliQRCodeRechargeOpen = true">支付宝充值</el-button>
</div>
</el-col>
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
<el-button class="ownRechargeButton" @click="offlineRecharge()">线下充值</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<!-- 第三方线下充值-余额充值 -->
<el-dialog title="汇款充值余额" :visible.sync="rechargeCoursePanel" width="50%">
<h2 style="font-weight: bold;font-size: 22px;margin-top: -15px;color: #1a1a1a">什么是汇款充值</h2>
<el-row>
<el-col :span="24">
商户可通过银行转账方式完成对应支付宝专属收款账户的充值。支付宝会为商户的每个支付宝账户提供独立的"专属收款账户"，商户从任一同名银行账户向其对应的"专属收款账户"转账，即可完成充值。
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<span style="font-weight: bold;font-size: 22px;color: #1a1a1a">
三步完成充值
</span>
<a style="color: #69b1ff" href="https://render.alipay.com/p/yuyan/180020040000423002/de59b"
target="_blank">（查看教程）</a>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<el-timeline>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">登录你的网上银行</span>
<span style="color: gray;font-size: 14px">(支持任意银行)</span>
<div style="font-size: 14px;margin-top: 5px">
必须使用本公司同名的银行账户进行汇款转账，首次使用建议小金额转入测试
</div>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账时填写以下专属账户</span>
<div style="font-size: 14px;margin-top: 5px">请注意收款账户支行选择：
<span style="color: red">支付宝-备付金账户</span>
<span>、开户地选择：</span>
<span style="color: red">上海市-上海市</span>
<span>，否则支付宝无法收到资金</span>
</div>
<el-descriptions :title="offlineRechargeStatic ? '你的企业备付金余额账户' : ''" :column="1"
:border="true" style="margin-top: 15px" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.bankAccName
}}</el-descriptions-item>
<el-descriptions-item label="银行">{{ offlineRechargeData.cardBank
}}</el-descriptions-item>
<el-descriptions-item label="支行">{{ offlineRechargeData.cardBranch
}}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ offlineRechargeData.cardLocation
}}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ offlineRechargeData.cardDeposit
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</span>
<div style="font-size: 14px;margin-top: 5px">非工作时间预计最晚下个工作日到账(具体以银行为准)</div>
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="rechargeCoursePanel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 充值弹窗 -->
<el-dialog title="支付宝充值" :visible.sync="aliQRCodeRechargeOpen" width="500px" style="text-align: center">
<!-- <h3>转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</h3>-->
<el-form :model="aliQRCodeRechargeForm" ref="signNewForm" size="small" label-width="120px"
:rules="aliQRCodeRechargeRules">
<el-form-item label="收款账户" prop="payeeAccNo">
<el-input v-model="aliQRCodeRechargeForm.payeeAccNo" placeholder="请输入收款账号" disabled />
</el-form-item>
<el-form-item label="付款账户" prop="payerAccNo"
v-if="aliQRCodeRechargeForm.bindType && 2 === aliQRCodeRechargeForm.bindType && aliQRCodeRechargeForm.rechargeType == 2">
<accSelect :bindType="1" v-model="aliQRCodeRechargeForm.payerAccNo"></accSelect>
</el-form-item>
<el-form-item label="余额/服务费" prop="rechargeType">
<template>
<el-select v-model="aliQRCodeRechargeForm.rechargeType" style="width: 100%" disabled>
<el-option label="余额" :value="2">余额</el-option>
<el-option label="服务费" :value="1">服务费</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="充值金额" prop="amount">
<el-input-number v-model="aliQRCodeRechargeForm.amount" placeholder="请输入充值金额" :precision="2"
style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getAliPayUrl">确认支付</el-button>
<el-button @click="aliQRCodeRechargeOpen = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="确认支付" :visible.sync="qrPayPanel.open" width="20%">
<div>
<span style="font-size: 18px;">1、使用手机支付宝扫码支付;</span>
<qr-code-component :text="qrPayPanel.payUrl" />
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="qrPayPanel.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getAccAliInfo } from '@/api/business/accInfo'
import { addAccRecharge } from '@/api/business/accRecharge.js'
import QrCodeComponent from '@/components/QrCode.vue'
export default {
name: "EnableRecharge",
props: {
},
components: { QrCodeComponent },
data() {
return {
// 父组件参数
parentComponentData: {},
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
'width': '70%'
},
label_style: {
'font-size': '16px',
'width': '30%'
}
},
ownAliQRCodeRechargeOpen: false,
aliQRCodeRechargeOpen: false,
offlineRechargeStatic: false,
rechargeCoursePanel: false,
offlineRechargeData: {
cardNo: '', // 卡号
bankAccName: '', // 户名
cardBank: '', // 银行
cardBranch: '', // 支行
cardLocation: '', // 开户地
cardDeposit: '' // 联行号
},
aliQRCodeRechargeForm: {
payeeAccNo: '',
rechargeType: 2,
amount: '',
payerAccNo: ''
},
aliQRCodeRechargeRules: {
payerAccNo: [
{ required: true, message: '请选择付款账号', trigger: 'change' }
],
amount: [
{
validator: (rule, value, callback) => {
if (value <= 0) {
callback(new Error('充值金额必须大于零'));
} else {
callback()
}
},
trigger: 'blur'
}
]
},
qrPayPanel: {
open: false,
payUrl: ''
},
}
},
created() {
},
mounted() {
},
methods: {
// 确认支付按钮
getAliPayUrl() {
this.$refs.signNewForm.validate((valid) => {
if (valid) {
this.$modal.loading('充值中....')
addAccRecharge(this.aliQRCodeRechargeForm).then(res => {
this.aliQRCodeRechargeOpen = false
if (200 === res.code) {
// 如果是服务费充值 或者是内部账户余额充值
if (1 === this.aliQRCodeRechargeForm.rechargeType || 1 === this.aliQRCodeRechargeForm.bindType) {
if (res.data.status) {
this.qrPayPanel.payUrl = res.data.msg
this.qrPayPanel.open = true
this.$forceUpdate()
} else {
this.$modal.msgWarning(res.data.msg)
}
} else {
this.$modal.msgSuccess("充值成功！");
}
}
}).finally(() => {
this.$modal.closeLoading()
})
}
})
},
// 父组件调起子组件方法
enableRecharge(val) {
// console.log('子组件接收父组件参数', val);
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.parentComponentData = val
this.ownAliQRCodeRechargeOpen = true;
},
// 选择线下充值方法
offlineRecharge() {
this.offlineRechargeStatic = true
this.ownAliQRCodeRechargeOpen = false
// this.$modal.loading('...加载中')
getAccAliInfo(this.parentComponentData.payAccNo).then(resp => {
if (200 === resp.code) {
this.offlineRechargeData = resp.data
this.rechargeCoursePanel = true
}
}).finally(() => {
this.$modal.closeLoading()
})
},
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/views/business/salaryAccount/ownAccServiceCharge.vue 0 → 100644
View file @ e4268ff3
<template>
<!-- 自有账户服务费充值 -->
<div>
<!-- 自有账户充值 -->
<el-dialog title="服务费充值" :visible.sync="ownAliQRCodeRechargeOpen" width="42%" center>
<el-row :gutter="64">
<el-col :span="12">
<p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
</el-col>
<el-col :span="12">
<p style="text-align: center;">通过银行系统进行打款充值</p>
</el-col>
</el-row>
<el-row :gutter="64">
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
<el-button class="ownRechargeButton"
@click="ownAliQRCodeRechargeOpen = false; aliQRCodeRechargeOpen = true">支付宝充值</el-button>
</div>
</el-col>
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
<el-button class="ownRechargeButton" @click="offlineRecharge()">线下充值</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<!-- 充值弹窗 -->
<el-dialog title="支付宝充值" :visible.sync="aliQRCodeRechargeOpen" width="500px" style="text-align: center">
<el-form :model="aliQRCodeRechargeForm" ref="signNewForm" size="small" label-width="120px"
:rules="aliQRCodeRechargeRules">
<el-form-item label="收款账户" prop="payeeAccNo">
<el-input v-model="aliQRCodeRechargeForm.payeeAccNo" placeholder="请输入收款账号" disabled />
</el-form-item>
<el-form-item label="余额/服务费" prop="rechargeType">
<template>
<el-select v-model="aliQRCodeRechargeForm.rechargeType" style="width: 100%" disabled>
<el-option label="余额" :value="2">余额</el-option>
<el-option label="服务费" :value="1">服务费</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="充值金额" prop="amount">
<el-input-number v-model="aliQRCodeRechargeForm.amount" placeholder="请输入充值金额" :precision="2"
style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getAliPayUrl">确认支付</el-button>
<el-button @click="aliQRCodeRechargeOpen = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="确认支付" :visible.sync="qrPayPanel.open" width="20%">
<div>
<span style="font-size: 18px;">1、使用手机支付宝扫码支付;</span>
<qr-code-component :text="qrPayPanel.payUrl" />
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="qrPayPanel.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 直属线下充值-余额充值 -->
<el-dialog title="汇款充值余额" :visible.sync="rechargeCoursePanel" width="50%">
<h2 style="font-weight: bold;font-size: 22px;margin-top: -15px;color: #1a1a1a">什么是汇款充值</h2>
<el-row>
<el-col :span="24">
商户可通过银行转账方式完成对应支付宝专属收款账户的充值。支付宝会为商户的每个支付宝账户提供独立的"专属收款账户"，商户从任一同名银行账户向其对应的"专属收款账户"转账，即可完成充值。
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<span style="font-weight: bold;font-size: 22px;color: #1a1a1a">
三步完成充值
</span>
<a style="color: #69b1ff" href="https://render.alipay.com/p/yuyan/180020040000423002/de59b"
target="_blank">（查看教程）</a>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<el-timeline>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">登录你的网上银行</span>
<span style="color: gray;font-size: 14px">(支持任意银行)</span>
<div style="font-size: 14px;margin-top: 5px">
必须使用本公司同名的银行账户进行汇款转账，首次使用建议小金额转入测试
</div>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账时填写以下专属账户</span>
<div style="font-size: 14px;margin-top: 5px">请注意收款账户支行选择：
<span style="color: red">支付宝-备付金账户</span>
<span>、开户地选择：</span>
<span style="color: red">上海市-上海市</span>
<span>，否则支付宝无法收到资金</span>
</div>
<el-descriptions :title="offlineRechargeStatic ? '你的企业备付金余额账户' : ''" :column="1"
:border="true" style="margin-top: 15px" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.bankAccName
}}</el-descriptions-item>
<el-descriptions-item label="银行">{{ offlineRechargeData.cardBank
}}</el-descriptions-item>
<el-descriptions-item label="支行">{{ offlineRechargeData.cardBranch
}}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ offlineRechargeData.cardLocation
}}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ offlineRechargeData.cardDeposit
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</span>
<div style="font-size: 14px;margin-top: 5px">非工作时间预计最晚下个工作日到账(具体以银行为准)</div>
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="rechargeCoursePanel = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addAccRecharge } from '@/api/business/accRecharge.js'
import QrCodeComponent from '@/components/QrCode.vue'
import { getAccAliInfo } from '@/api/business/accInfo'
export default {
components: { QrCodeComponent },
data() {
return {
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
'width': '70%'
},
label_style: {
'font-size': '16px',
'width': '30%'
}
},
aliQRCodeRechargeForm: {
payeeAccNo: '',
rechargeType: 1,
amount: '',
payerAccNo: ''
},
aliQRCodeRechargeRules: {
payerAccNo: [
{ required: true, message: '请选择付款账号', trigger: 'change' }
],
amount: [
{
validator: (rule, value, callback) => {
if (value <= 0) {
callback(new Error('充值金额必须大于零'));
} else {
callback()
}
},
trigger: 'blur'
}
]
},
ownAliQRCodeRechargeOpen: false,
aliQRCodeRechargeOpen: false,
qrPayPanel: {
open: false,
payUrl: ''
},
rechargeCoursePanel: false,
offlineRechargeData: {
cardNo: '',
bankAccName: '',
cardBank: '',
cardBranch: '',
cardLocation: '',
cardDeposit: ''
},
offlineRechargeStatic: false,
}
},
methods: {
// 选择线下充值方法
offlineRecharge() {
this.offlineRechargeStatic = true
this.ownAliQRCodeRechargeOpen = false
// this.$modal.loading('...加载中')
getAccAliInfo(this.aliQRCodeRechargeForm.payeeAccNo).then(resp => {
if (200 === resp.code) {
this.offlineRechargeData = resp.data
this.rechargeCoursePanel = true
}
}).finally(() => {
this.$modal.closeLoading()
})
},
// 确认支付按钮
getAliPayUrl() {
this.$refs.signNewForm.validate((valid) => {
if (valid) {
this.$modal.loading('充值中....')
addAccRecharge(this.aliQRCodeRechargeForm).then(res => {
this.aliQRCodeRechargeOpen = false
if (200 === res.code) {
// 如果是服务费充值 或者是内部账户余额充值
if (1 === this.aliQRCodeRechargeForm.rechargeType || 1 === this.aliQRCodeRechargeForm.bindType) {
if (res.data.status) {
this.qrPayPanel.payUrl = res.data.msg
this.qrPayPanel.open = true
this.$forceUpdate()
} else {
this.$modal.msgWarning(res.data.msg)
}
} else {
this.$modal.msgSuccess("充值成功！");
}
}
}).finally(() => {
this.$modal.closeLoading()
})
}
})
},
/** 父组件调用子组件 */
enableRecharge(val) {
// this.aliQRCodeRechargeForm.rechargeType = 1
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
// this.ownRechargeTitle = '自有服务费充值'
this.ownAliQRCodeRechargeOpen = true
},
},
mounted() {
},
created() {
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment