400 lines
16 KiB
Vue
400 lines
16 KiB
Vue
<template>
|
||
<div class="divBox">
|
||
<div class="selCard">
|
||
<el-form :model="tableFrom" ref="searchForm" size="small" inline label-width="85px">
|
||
<el-form-item label="时间选择：">
|
||
<el-date-picker v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 280px;" :picker-options="pickerOptions" @change="onchangeTime" />
|
||
</el-form-item>
|
||
<el-form-item label="提现状态：" prop="status">
|
||
<el-select
|
||
v-model="tableFrom.status"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择"
|
||
class="selWidth"
|
||
@change="getList(1)"
|
||
>
|
||
<el-option label="全部" value=""/>
|
||
<el-option label="审核中" value="0"/>
|
||
<el-option label="已提现" value="1"/>
|
||
<el-option label="已拒绝" value="-1"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="提现方式：" prop="extract_type">
|
||
<el-select
|
||
v-model="tableFrom.extract_type"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择"
|
||
class="selWidth"
|
||
@change="getList(1)"
|
||
>
|
||
<el-option label="全部" value=""/>
|
||
<el-option label="银行卡" value="0"/>
|
||
<el-option label="支付宝" value="2"/>
|
||
<el-option label="微信" value="1"/>
|
||
<el-option label="微信零钱" value="3"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="关键字：" prop="keyword">
|
||
<el-input v-model="tableFrom.keyword" @keyup.enter.native="getList(1)" placeholder="姓名/支付宝账号/银行卡号" clearable class="selWidth" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
|
||
<el-button size="small" @click="searchReset()">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-card class="mt14">
|
||
<div class="mb20">
|
||
<el-button size="small" type="primary" @click="exports">导出列表</el-button>
|
||
</div>
|
||
<el-table v-loading="listLoading" :data="tableData.data" size="small" class="table" highlight-current-row>
|
||
<el-table-column prop="extract_id" label="序号" width="60" />
|
||
<el-table-column label="二维码" min-width="80">
|
||
<template slot-scope="scope">
|
||
<div class="demo-image__preview">
|
||
<el-image v-if="scope.row.extract_pic" :src="scope.row.extract_pic" :preview-src-list="[scope.row.extract_pic]" />
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="user.nickname" label="用户信息" min-width="100" />
|
||
<el-table-column prop="uid" label="用户UID" min-width="80" />
|
||
<el-table-column prop="real_name" label="户名" min-width="100" />
|
||
<el-table-column prop="extract_price" label="提现金额" min-width="90" />
|
||
<el-table-column label="提现方式" min-width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.extract_type | extractTypeFilter }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="银行名称" min-width="100">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.extract_type === 0">{{ (scope.row.bank_name&&scope.row.bank_address) ? scope.row.bank_name+scope.row.bank_address : scope.row.bank_address }}</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="账号" min-width="100">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.extract_type==0">{{scope.row.bank_code }}</span>
|
||
<span v-else-if="scope.row.extract_type==2">{{scope.row.alipay_code }}</span>
|
||
<span v-else-if="scope.row.extract_type==1">{{scope.row.wechat }}</span>
|
||
<span v-else></span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="审核状态" min-width="90">
|
||
<template slot-scope="scope">
|
||
<span class="spBlock">{{ scope.row.status | extractStatusFilter }}</span>
|
||
<!-- <template v-if="scope.row.status === 0">
|
||
<el-button type="danger" icon="el-icon-close" size="mini" @click="onExamine(scope.row.extract_id)">未通过</el-button>
|
||
<el-button type="primary" icon="el-icon-check" size="mini" @click="ok(scope.row.extract_id)">通过</el-button>
|
||
</template> -->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="拒绝原因" min-width="120">
|
||
<template slot-scope="scope">
|
||
<span class="spBlock">{{ scope.row.fail_msg ? scope.row.fail_msg : '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="create_time" label="添加时间" min-width="150" />
|
||
<el-table-column label="操作" min-width="80" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button v-if="scope.row.status === 0" type="text" size="small" @click="onAudit(scope.row.extract_id)">审核</el-button>
|
||
<el-button v-else type="text" size="small" @click="onDetails(scope.row.extract_id)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination background :page-size="tableFrom.limit" :current-page="tableFrom.page" layout="total, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="pageChange" />
|
||
</div>
|
||
</el-card>
|
||
<el-dialog v-if="dialogVisible" title="提现详情" center :visible.sync="dialogVisible" width="660px">
|
||
<div v-loading="loading" style="margin-top: 5px;">
|
||
<div class="box-container">
|
||
<div class="list-count">
|
||
<div class="title">用户信息</div>
|
||
<div class="acea-row">
|
||
<div v-if="extractDetail.user" class="list"><label class="name">用户昵称：</label>{{ extractDetail.user.nickname }}</div>
|
||
<div v-if="extractDetail.user" class="list"><label class="name">用户ID：</label><span>{{ extractDetail.user.uid }}</span></div>
|
||
<div class="list"><label class="name">提现金额：</label>{{ extractDetail.extract_price }}</div>
|
||
<div class="list"><label class="name">申请时间：</label><span>{{ extractDetail.create_time }}</span></div>
|
||
<div v-if="extractDetail.extract_type==0" class="list"><label class="name">开户人：</label>{{ extractDetail.real_name }}</div>
|
||
<div v-if="extractDetail.extract_type==0" class="list"><label class="name">银行卡号：</label>{{ extractDetail.bank_code }}</div>
|
||
<div v-if="extractDetail.extract_type==0" class="list"><label class="name">开户行：</label>{{ extractDetail.bank_name }}</div>
|
||
<div v-if="extractDetail.extract_pic" class="list sp100 image">
|
||
<label class="name">二维码：</label>
|
||
<img
|
||
style="max-width: 150px; height: 80px;"
|
||
:src="extractDetail.extract_pic"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-count">
|
||
<div class="title">提现方式</div>
|
||
<div class="acea-row">
|
||
<div class="list"><label class="name">审核状态：</label>{{ extractDetail.status | extractStatusFilter }}</div>
|
||
<div class="list"><label class="name">审核时间：</label>{{ extractDetail.status_time }}</div>
|
||
<div v-if="extractDetail.status == -1" class="list sp100"><label class="name">拒绝原因：</label>{{ extractDetail.fail_msg }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!--导出订单列表-->
|
||
<file-list ref="exportList" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {
|
||
extractListApi,
|
||
extractStatusApi,
|
||
extractManageExportApi,
|
||
extractManageAudit,
|
||
extractManageDetail
|
||
} from '@/api/accounts'
|
||
import createWorkBook from '@/utils/newToExcel.js'
|
||
import { fromList } from '@/libs/constants.js'
|
||
import fileList from '@/components/exportFile/fileList'
|
||
import timeOptions from '@/utils/timeOptions';
|
||
export default {
|
||
components: { fileList },
|
||
name: 'AccountsExtract',
|
||
data() {
|
||
return {
|
||
pickerOptions: timeOptions,
|
||
timeVal: [],
|
||
tableData: {
|
||
data: [],
|
||
total: 0
|
||
},
|
||
listLoading: true,
|
||
loading: true,
|
||
tableFrom: {
|
||
extract_type: '',
|
||
status: '',
|
||
date: '',
|
||
keyword: '',
|
||
page: 1,
|
||
limit: 20
|
||
},
|
||
fromList: fromList,
|
||
extractDetail: {},
|
||
dialogVisible: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
/**重置 */
|
||
searchReset(){
|
||
this.timeVal = []
|
||
this.tableFrom.date = ""
|
||
this.$refs.searchForm.resetFields()
|
||
this.getList(1)
|
||
},
|
||
onExamine(id) {
|
||
this.$prompt('未通过', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
inputErrorMessage: '请输入原因',
|
||
inputType: 'textarea',
|
||
inputValue: '输入信息不完整或有误!',
|
||
inputPlaceholder: '请输入原因',
|
||
inputValidator: (value) => {
|
||
if (!value) {
|
||
return '请输入原因'
|
||
}
|
||
}
|
||
}).then(({
|
||
value
|
||
}) => {
|
||
extractStatusApi(id, {
|
||
status: -1,
|
||
fail_msg: value
|
||
}).then(res => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '提交成功'
|
||
})
|
||
this.getList()
|
||
}).catch((res) => {
|
||
this.$message.error(res.message)
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '取消输入'
|
||
})
|
||
})
|
||
},
|
||
ok(id) {
|
||
this.$modalSure('审核通过吗').then(() => {
|
||
extractStatusApi(id, {
|
||
status: 1
|
||
}).then(({
|
||
message
|
||
}) => {
|
||
this.$message.success(message)
|
||
this.getList()
|
||
}).catch(({
|
||
message
|
||
}) => {
|
||
this.$message.error(message)
|
||
})
|
||
})
|
||
},
|
||
/**审核 */
|
||
onAudit(id){
|
||
this.$modalForm(extractManageAudit(id)).then(() => this.getList(1));
|
||
},
|
||
onDetails(id){
|
||
this.dialogVisible = true
|
||
extractManageDetail(id).then(res => {
|
||
this.loading = false
|
||
this.extractDetail = res.data
|
||
}).catch((res) => {
|
||
this.$message.error(res.message)
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 选择时间
|
||
selectChange(tab) {
|
||
this.timeVal = []
|
||
this.tableFrom.date = tab
|
||
this.tableFrom.page = 1;
|
||
this.getList()
|
||
},
|
||
// 具体日期
|
||
onchangeTime(e) {
|
||
this.timeVal = e
|
||
this.tableFrom.date = e ? this.timeVal.join('-') : ''
|
||
this.tableFrom.page = 1;
|
||
this.getList()
|
||
},
|
||
async exports() {
|
||
let excelData = JSON.parse(JSON.stringify(this.tableFrom)), data = []
|
||
excelData.page = 1
|
||
excelData.limit = 100
|
||
let pageCount = 1
|
||
let lebData = {};
|
||
for (let i = 0; i < pageCount; i++) {
|
||
lebData = await this.downData(excelData)
|
||
pageCount = Math.ceil(lebData.count/excelData.limit)
|
||
if (lebData.export.length) {
|
||
data = data.concat(lebData.export)
|
||
excelData.page++
|
||
}
|
||
}
|
||
createWorkBook(lebData.header, lebData.title, data, lebData.foot,lebData.filename);
|
||
return
|
||
},
|
||
/**体现管理 */
|
||
downData(excelData) {
|
||
return new Promise((resolve, reject) => {
|
||
extractManageExportApi(excelData).then((res) => {
|
||
return resolve(res.data)
|
||
})
|
||
})
|
||
},
|
||
// 导出
|
||
exportRecord() {
|
||
extractManageExportApi(this.tableFrom)
|
||
.then((res) => {
|
||
const h = this.$createElement;
|
||
this.$msgbox({
|
||
title: '提示',
|
||
message: h('p', null, [
|
||
h('span', null, '文件正在生成中，请稍后点击"'),
|
||
h('span', { style: 'color: teal' }, '导出记录'),
|
||
h('span', null, '"查看~ '),
|
||
]),
|
||
confirmButtonText: '我知道了',
|
||
}).then(action => {
|
||
|
||
});
|
||
})
|
||
.catch((res) => {
|
||
this.$message.error(res.message)
|
||
})
|
||
},
|
||
// 导出列表
|
||
getExportFileList() {
|
||
this.$refs.exportList.exportFileList()
|
||
},
|
||
// 列表
|
||
getList(num) {
|
||
this.listLoading = true
|
||
this.tableFrom.page = num ? num : this.tableFrom.page;
|
||
extractListApi(this.tableFrom).then(res => {
|
||
this.tableData.data = res.data.list
|
||
this.tableData.total = res.data.count
|
||
this.listLoading = false
|
||
}).catch((res) => {
|
||
this.$message.error(res.message)
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
pageChange(page) {
|
||
this.tableFrom.page = page
|
||
this.getList()
|
||
},
|
||
handleSizeChange(val) {
|
||
this.tableFrom.limit = val
|
||
this.getList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.box-container {
|
||
overflow: hidden;
|
||
|
||
}
|
||
.list-count{
|
||
padding:30px 0;
|
||
&:first-child{
|
||
padding-top: 0;
|
||
border-bottom: 1px dashed #f5f5f5;
|
||
}
|
||
}
|
||
.box-container .list {
|
||
margin-top: 15px;
|
||
font-size: 13px;
|
||
width: 50%;
|
||
color: var(--prev-color-text-primary);
|
||
}
|
||
.box-container .sp100 {
|
||
width: 100%;
|
||
}
|
||
.box-container .list .name {
|
||
display: inline-block;
|
||
color: var(--prev-color-text-secondary);
|
||
|
||
}
|
||
.box-container .list .blue {
|
||
color: var(--prev-color-primary);
|
||
}
|
||
.box-container .list.image {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.labeltop{
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
}
|
||
.title{
|
||
color: #17233d;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
line-height: 15px;
|
||
padding-left: 5px;
|
||
border-left: 3px solid var(--prev-color-primary);
|
||
}
|
||
</style>
|