|
|
@@ -0,0 +1,430 @@
|
|
|
+<template>
|
|
|
+ <div class="ele-body">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <!-- 状态 Tab 标签页 -->
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="ele-tabs-card">
|
|
|
+ <el-tab-pane label="全部" name="all"></el-tab-pane>
|
|
|
+ <el-tab-pane label="待审核" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已审核/到账" name="2"></el-tab-pane>
|
|
|
+ <el-tab-pane label="审核失败" name="3"></el-tab-pane>
|
|
|
+ <el-tab-pane label="已取消" name="-1"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 搜索表单 -->
|
|
|
+ <el-form :model="table.where" label-width="80px" class="ele-form-search" @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :md="4" :sm="12" v-if="showTypeFilter">
|
|
|
+ <el-form-item label="类型:">
|
|
|
+ <el-select clearable v-model="table.where.type" placeholder="请选择类型" class="ele-fluid">
|
|
|
+ <el-option label="充值" :value="1"/>
|
|
|
+ <el-option label="提现" :value="2"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <el-form-item label="关键词:">
|
|
|
+ <el-input clearable v-model="table.where.keyword" placeholder="订单号/姓名/手机号"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <el-form-item label="时间范围:">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ class="ele-fluid">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4" :sm="12">
|
|
|
+ <div class="ele-form-actions">
|
|
|
+ <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="$refs.table.reload()">查询</el-button>
|
|
|
+ <el-button @click="reset">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <ele-data-table
|
|
|
+ ref="table"
|
|
|
+ :config="table"
|
|
|
+ :choose.sync="selection"
|
|
|
+ height="calc(100vh - 350px)">
|
|
|
+ <template slot-scope="{index}">
|
|
|
+ <el-table-column type="selection" width="45" align="center" fixed="left"/>
|
|
|
+ <el-table-column prop="id" label="ID" width="60" align="center" sortable="custom"/>
|
|
|
+ <el-table-column prop="order_no" label="订单号" min-width="180" align="center" show-overflow-tooltip/>
|
|
|
+
|
|
|
+ <!-- 账户类型 -->
|
|
|
+ <el-table-column label="账户类型" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag v-if="row.account_type === 1" type="success" size="mini">会员</el-tag>
|
|
|
+ <el-tag v-else-if="row.account_type === 2" type="warning" size="mini">代理</el-tag>
|
|
|
+ <el-tag v-else-if="row.account_type === 3" type="info" size="mini">商户</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 类型 -->
|
|
|
+ <el-table-column label="类型" width="80" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag v-if="row.type === 1" type="success" size="mini">充值</el-tag>
|
|
|
+ <el-tag v-else-if="row.type === 2" type="primary" size="mini">提现</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="realname" label="姓名/商户" min-width="120" align="center" show-overflow-tooltip/>
|
|
|
+
|
|
|
+ <!-- 金额 -->
|
|
|
+ <el-table-column label="金额" min-width="120" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span :style="{color: row.type === 1 ? '#67C23A' : '#F56C6C', fontWeight: 'bold'}">
|
|
|
+ {{ row.type === 1 ? '+' : '-' }}¥{{ row.money }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 实际到账 -->
|
|
|
+ <el-table-column label="实际到账" min-width="120" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span style="color: #409EFF; font-weight: bold;">¥{{ row.actual_money }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 支付方式 -->
|
|
|
+ <el-table-column label="支付方式" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag v-if="row.pay_type === 10" type="success" size="mini">微信</el-tag>
|
|
|
+ <el-tag v-else-if="row.pay_type === 20" type="primary" size="mini">支付宝</el-tag>
|
|
|
+ <el-tag v-else-if="row.pay_type === 50" type="info" size="mini">银行卡</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 状态 -->
|
|
|
+ <el-table-column label="状态" width="120" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag v-if="row.status === -1" type="info" size="mini">已取消</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 1" type="warning" size="mini">待审核</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 2" type="success" size="mini">已审核/到账</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 3" type="danger" size="mini">审核失败</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="create_time_text" label="申请时间" min-width="160" align="center" show-overflow-tooltip/>
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <el-table-column label="操作" width="240" align="center" fixed="right">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-link @click="openDetail(row)" icon="el-icon-view" type="primary" :underline="false" style="margin-right: 10px;">查看</el-link>
|
|
|
+ <el-link v-if="row.status === 1 && row.type === 2 && permission.includes(permissionPrefix + ':edit')"
|
|
|
+ @click="openAudit(row)" icon="el-icon-check" type="success" :underline="false" style="margin-right: 10px;">审核</el-link>
|
|
|
+ <el-popconfirm title="确定要删除此记录吗?" @confirm="remove(row)"
|
|
|
+ v-if="row.status !== 1 && permission.includes(permissionPrefix + ':delete')">
|
|
|
+ <el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </ele-data-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
+ <el-dialog :visible.sync="detailVisible" title="详情" width="700px" :destroy-on-close="true">
|
|
|
+ <el-descriptions :column="2" border v-if="detailData">
|
|
|
+ <el-descriptions-item label="订单号">{{ detailData.order_no }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="账户类型">
|
|
|
+ <el-tag v-if="detailData.account_type === 1" type="success" size="mini">会员</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.account_type === 2" type="warning" size="mini">代理</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.account_type === 3" type="info" size="mini">商户</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="类型">
|
|
|
+ <el-tag v-if="detailData.type === 1" type="success" size="mini">充值</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.type === 2" type="primary" size="mini">提现</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="姓名">{{ detailData.realname }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="金额">
|
|
|
+ <span :style="{color: detailData.type === 1 ? '#67C23A' : '#F56C6C', fontWeight: 'bold'}">
|
|
|
+ {{ detailData.type === 1 ? '+' : '-' }}¥{{ detailData.money }}
|
|
|
+ </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="实际到账金额">
|
|
|
+ <span style="color: #409EFF; font-weight: bold;">¥{{ detailData.actual_money }}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="支付方式">
|
|
|
+ <el-tag v-if="detailData.pay_type === 10" type="success" size="mini">微信</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.pay_type === 20" type="primary" size="mini">支付宝</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.pay_type === 50" type="info" size="mini">银行卡</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="支付状态">
|
|
|
+ <el-tag v-if="detailData.pay_status === 10" type="warning" size="mini">待支付</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.pay_status === 20" type="success" size="mini">已支付</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="提现账号" v-if="detailData.type === 2">{{ detailData.account }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="账号备注" v-if="detailData.type === 2">{{ detailData.account_remark }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="状态">
|
|
|
+ <el-tag v-if="detailData.status === -1" type="info" size="mini">已取消</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 1" type="warning" size="mini">待审核</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 2" type="success" size="mini">已审核/到账</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 3" type="danger" size="mini">审核失败</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="申请时间">{{ detailData.create_time_text }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="处理时间">{{ detailData.update_time_text }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="付款时间" v-if="detailData.pay_at">{{ detailData.pay_at }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="支付交易号" v-if="detailData.transaction_id">{{ detailData.transaction_id }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="打款凭证" :span="2" v-if="detailData.pay_img">
|
|
|
+ <el-image :src="detailData.pay_img" style="width: 200px; height: 200px;" :preview-src-list="[detailData.pay_img]"></el-image>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="审核备注" :span="2" v-if="detailData.confirm_remark">{{ detailData.confirm_remark }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 审核弹窗 -->
|
|
|
+ <el-dialog :visible.sync="auditVisible" title="审核" width="500px" :destroy-on-close="true">
|
|
|
+ <el-form :model="auditForm" :rules="auditRules" ref="auditForm" label-width="100px">
|
|
|
+ <el-form-item label="金额:">
|
|
|
+ <span style="color: #F56C6C; font-weight: bold; font-size: 18px;">¥{{ auditForm.money }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="审核结果:" prop="status">
|
|
|
+ <el-radio-group v-model="auditForm.status">
|
|
|
+ <el-radio :label="2">通过</el-radio>
|
|
|
+ <el-radio :label="3">驳回</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="审核备注:" prop="remark">
|
|
|
+ <el-input type="textarea" v-model="auditForm.remark" :rows="3" placeholder="请输入审核备注"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="打款凭证:" v-if="auditForm.status === 2">
|
|
|
+ <upload-image v-model="auditForm.pay_img" :limit="1" />
|
|
|
+ <div class="el-form-item__tip">建议尺寸:800x600像素,支持jpg、png格式</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="auditVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitAudit" :loading="auditLoading">提交</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import UploadImage from "@/components/uploadImage";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "BalanceLogs",
|
|
|
+ components: {
|
|
|
+ UploadImage
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 默认账户类型(1-会员,2-代理,3-商户)
|
|
|
+ defaultAccountType: {
|
|
|
+ type: Number,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ // 默认类型(1-充值,2-提现)
|
|
|
+ defaultType: {
|
|
|
+ type: Number,
|
|
|
+ default: 2
|
|
|
+ },
|
|
|
+ // 是否显示账户类型筛选
|
|
|
+ showAccountTypeFilter: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 是否显示类型筛选
|
|
|
+ showTypeFilter: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 页面标题
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ // 权限前缀(如:sys:agentWithdraw, sys:storesWithdraw, sys:balanceLogs)
|
|
|
+ permissionPrefix: {
|
|
|
+ type: String,
|
|
|
+ default: 'sys:balanceLogs'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["permission"])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 表格配置
|
|
|
+ table: {
|
|
|
+ url: '/financial/balanceLogs/index',
|
|
|
+ where: {}
|
|
|
+ },
|
|
|
+ // 当前激活的 Tab
|
|
|
+ activeTab: 'all',
|
|
|
+ // 日期范围
|
|
|
+ dateRange: [],
|
|
|
+ // 表格选中数据
|
|
|
+ selection: [],
|
|
|
+ // 详情弹窗
|
|
|
+ detailVisible: false,
|
|
|
+ detailData: null,
|
|
|
+ // 审核弹窗
|
|
|
+ auditVisible: false,
|
|
|
+ auditForm: {
|
|
|
+ id: null,
|
|
|
+ account_type: null,
|
|
|
+ money: '',
|
|
|
+ status: 2,
|
|
|
+ remark: '',
|
|
|
+ pay_img: ''
|
|
|
+ },
|
|
|
+ auditRules: {
|
|
|
+ status: [
|
|
|
+ {required: true, message: '请选择审核结果', trigger: 'change'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ auditLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始化默认筛选条件
|
|
|
+ if (this.defaultAccountType !== null) {
|
|
|
+ this.table.where.account_type = this.defaultAccountType;
|
|
|
+ }
|
|
|
+ if (this.defaultType !== null) {
|
|
|
+ this.table.where.type = this.defaultType;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dateRange(val) {
|
|
|
+ if (val && val.length === 2) {
|
|
|
+ this.table.where.start_time = val[0];
|
|
|
+ this.table.where.end_time = val[1];
|
|
|
+ } else {
|
|
|
+ this.table.where.start_time = '';
|
|
|
+ this.table.where.end_time = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* Tab 切换 */
|
|
|
+ handleTabClick(tab) {
|
|
|
+ if (this.activeTab === 'all') {
|
|
|
+ // 全部 - 不筛选状态
|
|
|
+ delete this.table.where.status;
|
|
|
+ } else {
|
|
|
+ // 按状态筛选
|
|
|
+ this.table.where.status = parseInt(this.activeTab);
|
|
|
+ }
|
|
|
+ this.$refs.table.reload();
|
|
|
+ },
|
|
|
+ /* 重置搜索 */
|
|
|
+ reset() {
|
|
|
+ this.table.where = {};
|
|
|
+ this.activeTab = 'all';
|
|
|
+ // 重置时恢复默认值
|
|
|
+ if (this.defaultAccountType !== null) {
|
|
|
+ this.table.where.account_type = this.defaultAccountType;
|
|
|
+ }
|
|
|
+ if (this.defaultType !== null) {
|
|
|
+ this.table.where.type = this.defaultType;
|
|
|
+ }
|
|
|
+ this.dateRange = [];
|
|
|
+ this.$refs.table.reload();
|
|
|
+ },
|
|
|
+ /* 打开详情 */
|
|
|
+ openDetail(row) {
|
|
|
+ this.$http.get('/financial/balanceLogs/info', {params: {id: row.id}}).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.detailData = res.data.data;
|
|
|
+ this.detailVisible = true;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 打开审核弹窗 */
|
|
|
+ openAudit(row) {
|
|
|
+ this.auditForm = {
|
|
|
+ id: row.id,
|
|
|
+ account_type: row.account_type,
|
|
|
+ money: row.money,
|
|
|
+ status: 2,
|
|
|
+ remark: '',
|
|
|
+ pay_img: ''
|
|
|
+ };
|
|
|
+ this.auditVisible = true;
|
|
|
+ },
|
|
|
+ /* 提交审核 */
|
|
|
+ submitAudit() {
|
|
|
+ this.$refs.auditForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.auditLoading = true;
|
|
|
+ this.$http.post('/financial/balanceLogs/audit', this.auditForm).then(res => {
|
|
|
+ this.auditLoading = false;
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success(res.data.msg);
|
|
|
+ this.auditVisible = false;
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.auditLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 删除 */
|
|
|
+ remove(row) {
|
|
|
+ if (!row) {
|
|
|
+ // 批量删除
|
|
|
+ if (!this.selection.length) {
|
|
|
+ this.$message.error('请至少选择一条数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const ids = this.selection.map(d => d.id);
|
|
|
+ this.$confirm('确定要删除选中的记录吗?', '提示', {type: 'warning'}).then(() => {
|
|
|
+ this.$http.post('/financial/balanceLogs/deleteAll', {ids}).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success(res.data.msg);
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(() => {});
|
|
|
+ } else {
|
|
|
+ // 单个删除
|
|
|
+ this.$http.post('/financial/balanceLogs/delete', {id: row.id}).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success(res.data.msg);
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Tab 标签页样式 */
|
|
|
+.ele-tabs-card {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+.ele-tabs-card >>> .el-tabs__header {
|
|
|
+ margin: 0 0 15px;
|
|
|
+}
|
|
|
+.ele-tabs-card >>> .el-tabs__item {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.ele-tabs-card >>> .el-tabs__nav-wrap::after {
|
|
|
+ height: 1px;
|
|
|
+}
|
|
|
+</style>
|