Skip to content

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

发薪账户管理-前端页面

parent 1974ed1b
Hide whitespace changes
Inline Side-by-side
Showing with 368 additions and 0 deletions
src/api/business/accInfo.js
View file @ 61587825
...@@ -51,3 +51,13 @@ export function delAccInfo(id) { ...@@ -51,3 +51,13 @@ export function delAccInfo(id) {
method: 'get' method: 'get'
}) })
} }
// 获取商户信息详情
export const getMerchantDetailsAPI = (cardNo) => {
return request({
url: '/dev-api/business/accInfo/detail',
method: 'GET',
params: {
cardNo
}
})
}
\ No newline at end of file
src/views/business/salaryAccount/index.vue 0 → 100644
View file @ 61587825
<template>
<div class="app-container">
<!-- 发薪账户管理页面 -->
<el-tabs v-model="payType" @tab-click="handleClick" type="card">
<el-tab-pane label="自有发薪账号" name="first">
<el-form label-width="120px" label-position="left" class="formMain">
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="支付宝外卡卡号">
<el-input v-model="params.payAccNo" placeholder="请输入支付宝外卡卡号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" icon="el-icon-search" @click="getListAllAccInfoFN">查询</el-button>
</el-col>
<!-- <el-col :span="8">
<div class="buttonOperate">
<el-button type="primary">绑定发薪账户</el-button>
</div>
</el-col> -->
</el-row>
</el-form>
<el-card class="box-card" v-for="ele in ownList" :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="14">
公司名称：({{ ele.companyName }})
</el-col>
<el-col :span="8">
<el-button type="info" plain>账户详情</el-button>
</el-col>
</el-row>
</div>
<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>
</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:120px;"
type="primary">余额充值</el-button></el-col>
<el-col :span="12"><el-button style="width:120px;"
type="primary">服务费充值</el-button></el-col>
</el-row>
</div>
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:120px;" type="primary"
plain>账单查询</el-button></el-col>
<el-col :span="12"><el-button style="width:120px;" type="primary" plain
@click="salarySelection">去发薪</el-button></el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-empty v-if="ownList.length == 0" description="暂无账号"></el-empty>
</el-tab-pane>
<el-tab-pane label="第三方发薪账号" name="second"> <el-form label-width="120px" label-position="left"
class="formMain">
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="支付宝外卡卡号">
<el-input placeholder="请输入支付宝外卡卡号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" icon="el-icon-search">查询</el-button>
</el-col>
<el-col :span="8">
<div class="buttonOperate">
<el-button type="primary">绑定发薪账户</el-button>
</div>
</el-col>
</el-row>
</el-form>
<el-card class="box-card" v-for="ele in thirdParty" :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="14">
公司名称：({{ ele.companyName }})
</el-col>
<el-col :span="8">
<el-button type="info" plain>账户详情</el-button>
</el-col>
</el-row>
</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>
</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:120px;"
type="primary">余额充值</el-button></el-col>
<el-col :span="12"><el-button style="width:120px;"
type="primary">服务费充值</el-button></el-col>
</el-row>
</div>
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:120px;" type="primary"
plain>账单查询</el-button></el-col>
<el-col :span="12"><el-button @click="salarySelection" style="width:120px;"
type="primary" plain>去发薪</el-button></el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-empty v-if="thirdParty.length == 0" description="暂无账号"></el-empty>
</el-tab-pane>
</el-tabs>
<!-- 去发薪对话框 -->
<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>
<p class="salarySelectionText">批量到支付宝</p>
</div>
</div>
</el-dialog>
<!-- 账户详情弹窗 -->
</div>
</template>
<script>
import { listAllAccInfo, getMerchantDetailsAPI } from '@/api/business/accInfo'
export default {
name: 'SalaryAccount',
data() {
return {
// tab选择参数
payType: 'first',
// 发薪选择对话框参数
payVisible: false,
params: {
bindType: 1,
payAccNo: null,
},
// 自有发薪数据
ownList: [],
// 第三方发薪数据
thirdParty: []
}
},
created() { },
mounted() {
if (this.payType == 'first') {
this.params.bindType = 1
this.getListAllAccInfoFN()
} else if (this.payType == 'second') {
this.params.bindType = 2
this.getListAllAccInfoFN()
}
},
methods: {
// 跳转到批量到支付宝
toLinkAlipay() {
this.$router.push({ path: "/transfer/batchToAli", query: { id: "1" } });
},
// 跳转到批量到银行卡
toLinkBankCard() {
this.$router.push({ path: "/transfer/batchToBank", query: { id: "2" } });
},
// 获取公司列表方法
getListAllAccInfoFN() {
listAllAccInfo(this.params).then(res => {
if (res.code == 200) {
if (this.params.bindType == 1) {
this.ownList = res.data
} else if (this.params.bindType == 2) {
this.thirdParty = res.data
}
}
})
},
// 点击去发薪按钮执行
salarySelection() {
this.payVisible = true
},
// tab发生变化时执行
handleClick(tab, event) {
if (this.payType == 'first') {
this.params.bindType = 1
this.getListAllAccInfoFN()
} else if (this.payType == 'second') {
this.params.bindType = 2
this.getListAllAccInfoFN()
}
// console.log(tab, event);
// console.log('payType', this.payType);
}
}
}
</script>
<style lang="scss" scoped>
.app-container ::v-deep {
// 表单部分样式
.formMain {
padding-left: 12px;
// 操作按钮样式
.buttonOperate {
text-align: right;
padding-right: 20px;
}
}
// 卡片样式
.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;
}
}
// 去发薪-发薪选择对话框样式
.salarySelectionStyle {
width: 90%;
margin: 0 auto;
height: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
.salarySelectionMain {
width: 40%;
height: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: rgba(117, 190, 245, .1);
border-radius: 12px;
padding: 12px;
.salarySelectionImageDiv {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.salarySelectionImage {
width: 120px;
height: 120px;
z-index: 9999;
}
}
.salarySelectionText {
text-align: center;
width: 100%;
font-size: 18px;
font-weight: bold;
}
}
}
}
</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