jh-admin/app/shop/view/account/shop_account.html

546 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="__STATIC__/element-ui/index.css">
<script src="STATIC_JS/vue.js"></script>
<script src="__STATIC__/element-ui/index.js"></script>
<style>
.pagination{
text-align: right!important;
padding-top: 20px!important;
}
.selWidth {
width: 350px !important;
margin-bottom: 5px;
}
.one {
background: #e4ecff;
}
.two {
background: #fff3e0;
}
.three {
background: #eaf9e1;
}
.four {
background: #ffeaf4;
}
.five {
background: #f1e4ff;
}
.one1 {
background: #4d7cfe;
}
.two1 {
background: #ffab2b;
}
.three1 {
background: #6dd230;
}
.four1 {
background: #ff85c0;
}
.five1 {
background: #b37feb;
}
.card_box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 25px;
box-sizing: border-box;
border-radius: 4px;
background: #f5f7f9;
margin-bottom: 10px;
}
.card_box .card_box_cir{
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.card_box .card_box_cir .card_box_cir1{
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.card_box .card_box_txt{}
.card_box .card_box_txt .sp1{
display: block;
color: #252631;
font-size: 24px;
line-height: 37px;
overflow: hidden;
text-overflow: ellipsis;
}
.card_box .card_box_txt .sp2{
display: block;
color: #98a9bc;
font-size: 12px;
}
</style>
{/block}
{block name="main"}
<div id="vueContent">
<!--主要内容-->
<el-card class="box-card">
<!--顶部搜索栏-->
<div slot="header" class="clearfix">
<div class="container">
<!--筛选-->
<el-form inline size="small" label-width="80px">
<el-form-item label="搜索">
<el-select v-model="tableFrom.status" placeholder="请选择" class="filter-item selWidth" clearable>
<el-option label="待结算" :value="0"></el-option>
<el-option label="已结算" :value="1"></el-option>
<el-option label="已退款" :value="2"></el-option>
</el-select>
<el-input v-model="tableFrom.order_no" placeholder="请输入订单号" class="selWidth" clearable>
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)"></el-button>
</el-input>
</el-form-item>
</el-form>
<!--统计-->
<el-row align="middle" :gutter="10" class="ivu-mt">
<el-col v-for="(item, index) in cardLists" :key="index" :xl="4" :lg="8" :md="12" :sm="24" :xs="24" class="ivu-mb mb10">
<div class="card_box">
<div class="card_box_cir" :class="{'one':index%5==0,'two':index%5==1,'three':index%5==2,'four':index%5==3,'five':index%5==4}">
<div class="card_box_cir1" :class="{'one1':index%5==0,'two1':index%5==1,'three1':index%5==2,'four1':index%5==3,'five1':index%5==4}">
<i :class="item.className" style="font-size: 24px;"></i>
</div>
</div>
<div class="card_box_txt">
<span class="sp1" v-text="item.count || 0"></span>
<span class="sp2" v-text="item.name"></span>
</div>
</div>
</el-col>
</el-row>
<!--操作按钮-->
<el-button type="primary" effect="dark" size="small" @click="applyWithdrawal">申请提现</el-button>
</div>
</div>
<!--表格信息-->
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%">
<el-table-column label="ID" prop="id" min-width="50" align="center"></el-table-column>
<el-table-column label="订单信息" min-width="200" align="center">
<template slot-scope="scope">
{{ scope.row.order_type_name || '' }}<br />
{{ scope.row.order_no || '' }}
</template>
</el-table-column>
<el-table-column label="收入金额" prop="account_data" min-width="80" align="center"></el-table-column>
<el-table-column label="结算状态" min-width="80" align="center">
<template slot-scope="scope">
<!--状态0=待结算1=已结算2=已退款-->
<el-tag v-if="Number(scope.row.status) === 1" type="success" effect="dark">已结算</el-tag>
<el-tag v-else-if="Number(scope.row.status) === 2" type="danger" effect="dark">已退款</el-tag>
<el-tag v-else type="info" effect="dark">待结算</el-tag>
</template>
</el-table-column>
<el-table-column label="添加时间" prop="create_time" min-width="150" align="center"></el-table-column>
<el-table-column label="备注" prop="remark" min-width="200" align="center"></el-table-column>
</el-table>
<!--分页-->
<div class="pagination">
<el-pagination :current-page="tableFrom.page" hide-on-single-page :total="tableData.total" @current-change="pageChange"></el-pagination>
</div>
</el-card>
<!-- 提现弹框 -->
<el-dialog title="收入提现" :visible.sync="isShowDialog" width="60%" append-to-body>
<el-form size="small" label-width="80px">
<el-form-item label="收款账户">
<el-input :value="useAccountTitle" placeholder="请选择收款账户" class="selWidth" readonly disabled></el-input>
<el-button type="warning" effect="dark" size="small" @click="selectAccount">选择账户</el-button>
</el-form-item>
<el-form-item label="提现金额">
<el-input placeholder="请输入提现金额" v-model="applyInfo.apply_money" type="number" step="0.01" :min="0" class="selWidth"></el-input>
</el-form-item>
<el-form-item label="">
<div>可提现收入:¥{{ Number(info.withdrawable_money || 0).toFixed(2) }}</div>
<div v-if="Number(commission_handling_fees) > 0">
提现手续费比例:{{commission_handling_fees}}%
<span v-if="commission_money > 0">;手续费:{{ commission_money }}元,实际到账:{{ real_money }}元</span>
</div>
</el-form-item>
<el-form-item label="">
<el-button type="primary" effect="dark" size="small" @click="submitApply">提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 提现账户 -->
<el-dialog title="账户管理" :visible.sync="accountDialog" width="60%" append-to-body>
<!--顶部搜索栏-->
<el-button type="primary" effect="dark" size="small" @click="createAccount({})">增加账户</el-button>
<!--表格信息-->
<el-table v-loading="accountListLoading" :data="accountList" style="width: 100%">
<el-table-column label="ID" prop="id" min-width="50" align="center"></el-table-column>
<el-table-column label="真实姓名" prop="realname" min-width="100" align="center"></el-table-column>
<el-table-column label="手机号" prop="mobile" min-width="100" align="center"></el-table-column>
<el-table-column label="账户类型" prop="mobile" min-width="100" align="center">
<template slot-scope="scope">
<!--账户类型card=银行卡,wechat=微信零钱,alipay=支付宝,balance=余额,threeStaff=第三方打款(灵活用工)-->
<span v-if="scope.row.account_type === 'card'">银行卡</span>
<span v-else-if="scope.row.account_type === 'wechat'">微信零钱</span>
<span v-else-if="scope.row.account_type === 'alipay'">支付宝</span>
<span v-else-if="scope.row.account_type === 'balance'">余额</span>
<span v-else-if="scope.row.account_type === 'threeStaff'">第三方打款</span>
</template>
</el-table-column>
<el-table-column label="收款账户" prop="mobile" min-width="100" align="center">
<template slot-scope="scope">
<span v-if="scope.row.account_type === 'card'">{{ scope.row.card_num || '' }}</span>
<span v-else-if="scope.row.account_type === 'wechat'"></span>
<span v-else-if="scope.row.account_type === 'alipay'">{{ scope.row.alipay_account || '' }}</span>
<span v-else-if="scope.row.account_type === 'balance'"></span>
<span v-else-if="scope.row.account_type === 'threeStaff'">
银行卡类型:{{ Number(scope.row.card_type) === 1 ? '对私' : '对公' }}<br />
开户银行支行:{{ scope.row.bank_sub_name || '' }}<br />
银行卡持有人: {{ scope.row.bank_act_name || '' }}<br />
银行卡卡号: {{ scope.row.card_num || '' }}<br />
银行卡类型:{{ Number(scope.row.mer_type) === 1 ? '个体户' : '个人' }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="150" align="center">
<template slot-scope="scope">
<el-button @click="createAccount(scope.row)" type="warning" size="small">编辑</el-button>
<el-button @click="useAccount(scope.row)" size="small">使用</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 账户编辑 -->
<el-dialog title="账户编辑" :visible.sync="accountEditDialog" width="60%" append-to-body>
<el-form size="small" label-width="120px">
<el-form-item label="账户类型">
<el-select v-model="accountInfo.account_type" placeholder="请选择" class="filter-item selWidth" clearable>
<el-option label="银行卡" value="card" v-if="Object.values(accountType).includes('card')"></el-option>
<!--<el-option label="微信零钱" value="wechat" v-if="Object.values(accountType).includes('wechat')"></el-option>-->
<el-option label="支付宝" value="alipay" v-if="Object.values(accountType).includes('alipay')"></el-option>
<!--<el-option label="余额" value="balance" v-if="Object.values(accountType).includes('balance')"></el-option>-->
<el-option label="第三方打款" value="threeStaff" v-if="Object.values(accountType).includes('threeStaff')"></el-option>
</el-select>
</el-form-item>
<el-form-item label="真实姓名">
<el-input v-model="accountInfo.realname" placeholder="请输入真实姓名" class="selWidth" type="text"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="accountInfo.mobile" placeholder="请输入手机号" class="selWidth" type="text"></el-input>
</el-form-item>
<template v-if="accountInfo.account_type === 'alipay'">
<el-form-item label="支付宝账号">
<el-input v-model="accountInfo.alipay_account" placeholder="请输入支付宝账号" class="selWidth" type="text"></el-input>
</el-form-item>
</template>
<template v-if="accountInfo.account_type === 'card'">
<el-form-item label="银行卡卡号">
<el-input v-model="accountInfo.card_num" placeholder="银行卡卡号" class="selWidth" type="text"></el-input>
</el-form-item>
</template>
<template v-if="accountInfo.account_type === 'threeStaff'">
<el-form-item label="银行卡类型">
<el-select v-model="accountInfo.card_type" placeholder="请选择" class="filter-item selWidth" clearable>
<el-option label="对私" :value="1"></el-option>
<el-option label="对公" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="开户银行支行" v-if="Number(accountInfo.card_type) === 2">
<el-input v-model="accountInfo.bank_sub_name" placeholder="请输入开户银行支行名称" class="selWidth" type="text"></el-input>
</el-form-item>
<el-form-item label="持有人姓名">
<el-input v-model="accountInfo.bank_act_name" placeholder="请输入银行卡持有人姓名" class="selWidth" type="text"></el-input>
</el-form-item>
<el-form-item label="银行卡卡号">
<el-input v-model="accountInfo.card_num" placeholder="请输入银行卡卡号" class="selWidth" type="text"></el-input>
</el-form-item>
<el-form-item label="身份证号码">
<el-input v-model="accountInfo.account_id" placeholder="请输入银行卡持有人身份证号码" class="selWidth" type="text"></el-input>
</el-form-item>
<el-form-item label="有效期">
<el-date-picker v-model="accountInfo.account_id_start" type="date" placeholder="请选择身份证有效期开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="商户类型">
<el-select v-model="accountInfo.mer_type" placeholder="请选择商户类型" class="filter-item selWidth" clearable>
<el-option label="个体户" :value="1"></el-option>
<el-option label="个人" :value="3"></el-option>
</el-select>
</el-form-item>
</template>
<el-form-item label="">
<el-button type="primary" effect="dark" size="small" @click="submitEditAccount">提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
{/block}
{block name="script"}
<script>
new Vue({
el:'#vueContent',
data(){
return {
info: JSON.parse('{$info|raw}'),
// 表格
listLoading: true,
tableData: {
data: [],
total: 0,
},
tableFrom: {
page: 1,
order_no: '',
status: '',
},
// 统计
cardLists: [],
// 提现相关
account: JSON.parse('{$account|raw}'),
// 总平台提现设置
set: JSON.parse('{$set|raw}'),
accountType: {},// 打款方式列表
commission_handling_fees: 0,// 提现手续费
// 提现申请相关信息
isShowDialog: false,
applyInfo: {
apply_money: '',
finance_account_id: '',
income_type: 'shop_legumes_integral'
},
useAccountInfo: {},
useAccountTitle: '',
commission_money: 0,// 手续费
real_money: 0,// 实际获得
// 提现账户相关信息
accountListLoading: true,
accountList: [],
accountDialog: false,
// 账户编辑相关信息
accountEditDialog: false,
accountInfo:{
realname: '',
mobile: '',
account_type: '',
alipay_account: '',
card_type: '',
bank_sub_name: '',
account_id_start: '',
bank_act_name: '',
card_num: '',
account_id: '',
mer_type: '',
},
};
},
filters:{
formatDate(value){
if (!value) return '';
const date = new Date(value * 1000);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
},
watch:{
'applyInfo.apply_money': {
handler: function (val, oldVal) {
let withdrawable_money = Number(this.info.withdrawable_money || 0);
let applyMoney = Number(this.applyInfo.apply_money || 0);
applyMoney = applyMoney > withdrawable_money ? withdrawable_money : applyMoney;
this.applyInfo.apply_money = applyMoney;
// 计算手续费
if(Number(this.commission_handling_fees) > 0){
this.commission_money = (Number(applyMoney) * Number(this.commission_handling_fees) / 100).toFixed(2);
this.real_money = (Number(applyMoney) - Number(this.commission_money)).toFixed(2);
}
},
deep: true
}
},
mounted(){
let _this = this;
_this.getList('');
_this.$nextTick(function() {
let info = Object.assign({}, _this.info);
_this.cardLists = [
{ className: 'el-icon-coin', count: info.total_money, name: '已结算(元)'},
{ className: 'el-icon-coin', count: info.frozen_money, name: '冻结中(元)'},
{ className: 'el-icon-coin', count: info.withdrawn_money, name: '已提现(元)'},
{ className: 'el-icon-coin', count: info.withdrawable_money, name: '可提现(元)'},
];
})
},
methods: {
// 获取列表
getList(num) {
let _this = this;
_this.listLoading = true;
_this.tableFrom.page = num ? num : this.tableFrom.page;
$.ajax({
url: ns.url("shop/account/shopIncome"),
data: _this.tableFrom,
dataType: 'JSON',
type: 'POST',
success: function(res) {
if(Number(res.code) === 0){
let data = res.data || {};
_this.tableData.data = data.list || {};
_this.tableData.total = data.count || 0;
_this.listLoading = false;
}
}
});
},
pageChange(page) {
this.tableFrom.page = page;
this.getList('');
},
// 申请提现 - 点击按钮
applyWithdrawal(){
let _this = this;
// 判断:总平台是否设置打款方式
_this.commission_handling_fees = this.set.commission_handling_fees || 0;
_this.accountType = Object.assign({}, this.set.account_type || {});
if(Object.values(_this.accountType).length <= 0){
_this.$alert('不存在打款方式,请联系总平台管理员!');
return;
}
// 显示提现弹框
this.isShowDialog = true;
},
// 选择提现账户
selectAccount(){
this.accountGetList();
this.accountDialog = true;
},
// 提现账户列表
accountGetList() {
let _this = this;
_this.accountListLoading = true;
$.ajax({
url: ns.url("shop/account/getAccountList"),
dataType: 'JSON',
type: 'POST',
success: function(res) {
if(Number(res.code) === 0){
let data = res.data || {};
_this.accountList = data || {};
_this.accountListLoading = false;
}
}
});
},
// 点击增加 or 编辑账户信息
createAccount(info = {}){
if(Object.values(info).length > 0) this.accountInfo = info;
else this.accountInfo = Object.assign({}, this.$options.data().accountInfo);
this.accountEditDialog = true;
},
// 账户编辑提交
submitEditAccount(){
let _this = this;
let accountInfo = Object.assign({}, this.accountInfo);
let rule = [
{name: 'account_type', checkType: 'required', errorMsg: '请选择账户类型'},
{name: 'realname', checkType: 'required', errorMsg: '请输入真实姓名'},
{name: 'mobile', checkType: 'required', errorMsg: '请输入手机号'},
{name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号'},
];
if (accountInfo.account_type === 'card') {
rule.push({name: 'card_num', checkType: 'required', errorMsg: '请输入银行卡卡号'});
}
if (accountInfo.account_type === 'alipay') {
rule.push({name: 'alipay_account', checkType: 'required', errorMsg: '请输入支付宝账号'});
}
if (accountInfo.account_type === 'threeStaff') {
rule.push({name: 'card_type', checkType: 'required', errorMsg: '请选择卡类型'});
rule.push({name: 'account_id_start', checkType: 'required', errorMsg: '请选择身份证有效期开始时间'});
rule.push({name: 'bank_act_name', checkType: 'required', errorMsg: '请输入银行卡持有人姓名'});
rule.push({name: 'card_num', checkType: 'required', errorMsg: '请输入银行卡卡号'});
rule.push({name: 'account_id', checkType: 'required', errorMsg: '请输入银行卡持有人身份证号码'});
rule.push({name: 'mer_type', checkType: 'required', errorMsg: '请选择商户类型'});
}
let verifyResult = ns.validate(accountInfo, rule);
if(verifyResult.length > 0 && verifyResult !== true){
_this.$alert(verifyResult);
return;
}
// 校验通过 提交编辑信息
$.ajax({
url: ns.url("shop/account/editFinanceAccount"),
data: accountInfo,
dataType: 'JSON',
type: 'POST',
success: function(res) {
_this.accountEditDialog = false;
_this.accountGetList();
}
});
},
// 选中使用的账户
useAccount(info){
this.useAccountInfo = info || {};
this.applyInfo.finance_account_id = info.id || 0;
// 生成账户标题
// 账户类型card=银行卡,wechat=微信零钱,alipay=支付宝,balance=余额,threeStaff=第三方打款(灵活用工)
if(info.account_type === 'card') this.useAccountTitle = '银行卡:' + info.card_num;
else if(info.account_type === 'wechat') this.useAccountTitle = '微信零钱';
else if(info.account_type === 'alipay') this.useAccountTitle = '支付宝:' + info.alipay_account;
else if(info.account_type === 'balance') this.useAccountTitle = '余额';
else if(info.account_type === 'threeStaff') this.useAccountTitle = '第三方打款:' + info.card_num;
this.accountDialog = false
},
// 提交申请信息
submitApply(){
let _this = this;
let applyInfo = Object.assign({}, this.applyInfo);
let rule = [
{name: 'apply_money', checkType: 'required', errorMsg: '请输入提现金额'},
{name: 'apply_money', checkType: 'min', errorMsg: '提现金额必须大于0',checkRule: 0},
{name: 'finance_account_id', checkType: 'required', errorMsg: '请选择收款账户'},
];
let verifyResult = ns.validate(applyInfo, rule);
if(verifyResult.length > 0 && verifyResult !== true){
_this.$alert(verifyResult);
return;
}
// 校验通过 提交编辑信息
$.ajax({
url: ns.url("shop/account/submitApplyInfo"),
data: applyInfo,
dataType: 'JSON',
type: 'POST',
success: function(res) {
if(Number(res.code) === 0){
_this.$alert('提交成功!').then(()=>{
window.history.go(0)
});
}else{
_this.$alert(res.message);
}
}
});
}
}
});
</script>
{/block}