|
|
@@ -0,0 +1,892 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="recharge-container">
|
|
|
+ <!-- 页面头部 -->
|
|
|
+ <div class="page-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <i class="el-icon-wallet header-icon"></i>
|
|
|
+ <span class="header-title">储值记录</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 统计卡片 -->
|
|
|
+ <div class="stat-cards">
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon stat-icon-primary">
|
|
|
+ <i class="el-icon-document"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-content">
|
|
|
+ <div class="stat-value">{{ total }}</div>
|
|
|
+ <div class="stat-label">总记录数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon stat-icon-success">
|
|
|
+ <i class="el-icon-circle-check"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-content">
|
|
|
+ <div class="stat-value">{{ todayCount }}</div>
|
|
|
+ <div class="stat-label">今日充值</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-icon stat-icon-warning">
|
|
|
+ <i class="el-icon-money"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-content">
|
|
|
+ <div class="stat-value">¥{{ todayAmount }}</div>
|
|
|
+ <div class="stat-label">今日金额</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <div class="search-card">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="default" :inline="true" class="search-form">
|
|
|
+ <el-form-item label="" prop="userName">
|
|
|
+ <el-input v-model="queryParams.userName" placeholder="请输入用户姓名" clearable prefix-icon="el-icon-user" @keyup.enter.native="handleQuery" class="search-input" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="transactionId">
|
|
|
+ <el-input v-model="queryParams.transactionId" placeholder="请输入交易流水号" clearable prefix-icon="el-icon-tickets" @keyup.enter.native="handleQuery" class="search-input" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="businessType">
|
|
|
+ <el-select v-model="queryParams.businessType" placeholder="请选择业务状态">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in businessTypeOptions"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictLabel"
|
|
|
+ :value="parseInt(dict.dictValue)"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery" class="search-btn">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetQuery" class="reset-btn">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="table-tools">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="default" @click="handleRecharge" v-hasPermi="['company:rechargeRecord:add']" class="action-btn action-btn-primary">
|
|
|
+ <i class="el-icon-wallet"></i> 充值
|
|
|
+ </el-button>
|
|
|
+<!-- <el-button type="danger" icon="el-icon-delete" size="default" :disabled="multiple" @click="handleDelete" v-hasPermi="['company:rechargeRecord:remove']" class="action-btn">-->
|
|
|
+<!-- 删除-->
|
|
|
+<!-- </el-button>-->
|
|
|
+ <el-button type="warning" icon="el-icon-download" size="default" @click="handleExport" v-hasPermi="['company:rechargeRecord:export']" class="action-btn">
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <div class="table-card">
|
|
|
+ <el-table v-loading="loading" :data="rechargeRecordList" @selection-change="handleSelectionChange" class="custom-table">
|
|
|
+ <el-table-column type="selection" width="50" align="center" />
|
|
|
+ <el-table-column label="序号" type="index" width="60" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="序号">{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="用户ID" align="center" prop="userId" width="100" />
|
|
|
+ <el-table-column label="用户姓名" align="center" prop="userName" min-width="120" />
|
|
|
+ <el-table-column label="交易流水号" align="center" prop="transactionId" min-width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="transaction-id">{{ scope.row.transactionId || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="储值金额" align="center" prop="totalAmount" width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="amount-tag">¥{{ scope.row.totalAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="类型" align="center" prop="businessType" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="businessTypeOptions" :value="scope.row.businessType"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="公司名称" align="center" prop="companyName" min-width="150" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="company-name">{{ scope.row.companyName || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="170">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="time-text">{{ parseTime(scope.row.createTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="remark-text">{{ scope.row.remark || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+<!-- <el-table-column label="操作" align="center" width="120" fixed="right">-->
|
|
|
+<!-- <template slot-scope="scope">-->
|
|
|
+<!-- <el-button type="text" size="small" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.row)" v-hasPermi="['company:rechargeRecord:remove']">删除</el-button>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination-wrapper">
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 充值对话框 -->
|
|
|
+ <el-dialog title="用户充值" :visible.sync="rechargeOpen" width="650px" append-to-body class="recharge-dialog" @close="resetRechargeForm">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="user-info-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <i class="el-icon-user section-icon"></i>
|
|
|
+ <span class="section-title">选择用户</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="rechargeForm" :model="rechargeForm" :rules="rechargeRules" label-width="100px" class="recharge-form">
|
|
|
+ <el-form-item label="用户ID" prop="userId">
|
|
|
+ <el-input v-model.number="rechargeForm.userId" placeholder="点击选择用户" readonly @focus="handleSelectUser" class="user-input">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户姓名" prop="userName">
|
|
|
+ <el-input v-model="rechargeForm.userName" placeholder="选择用户后自动填充" readonly class="user-input" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="divider-wrapper">
|
|
|
+ <div class="divider-line"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="amount-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <i class="el-icon-money section-icon"></i>
|
|
|
+ <span class="section-title">充值金额</span>
|
|
|
+ </div>
|
|
|
+ <div class="quick-amounts">
|
|
|
+ <div
|
|
|
+ v-for="item in quickAmounts"
|
|
|
+ :key="item"
|
|
|
+ class="amount-item"
|
|
|
+ :class="{ active: rechargeForm.totalAmount === item }"
|
|
|
+ @click="rechargeForm.totalAmount = item"
|
|
|
+ >
|
|
|
+ <span class="amount-value">¥{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form ref="rechargeForm2" :model="rechargeForm" :rules="rechargeRules" label-width="100px" class="recharge-form custom-amount">
|
|
|
+ <el-form-item label="自定义金额" prop="totalAmount">
|
|
|
+ <el-input-number
|
|
|
+ v-model="rechargeForm.totalAmount"
|
|
|
+ :precision="2"
|
|
|
+ :step="0.01"
|
|
|
+ :min="0.01"
|
|
|
+ :max="999999"
|
|
|
+ style="width: 100%;"
|
|
|
+ placeholder="请输入充值金额"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="divider-wrapper">
|
|
|
+ <div class="divider-line"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="other-section">
|
|
|
+ <div class="section-header">
|
|
|
+ <i class="el-icon-edit section-icon"></i>
|
|
|
+ <span class="section-title">其他信息</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="rechargeForm3" :model="rechargeForm" label-width="100px" class="recharge-form">
|
|
|
+ <el-form-item label="交易流水号">
|
|
|
+ <el-input v-model="rechargeForm.transactionId" placeholder="请输入交易流水号（选填）" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="rechargeForm.remark" type="textarea" :rows="3" placeholder="请输入备注（选填）" maxlength="200" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="rechargeOpen = false" class="cancel-btn">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitRecharge" :loading="rechargeLoading" class="submit-btn">
|
|
|
+ <i class="el-icon-wallet"></i> 确 定 充 值
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 用户选择对话框 -->
|
|
|
+ <el-dialog title="选择用户" :visible.sync="userSelectOpen" width="900px" append-to-body class="user-select-dialog">
|
|
|
+ <div class="user-select-search">
|
|
|
+ <el-form :model="userQueryParams" size="default" :inline="true" class="user-search-form">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-input v-model="userQueryParams.nickname" placeholder="请输入昵称" clearable prefix-icon="el-icon-user" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-input v-model="userQueryParams.phone" placeholder="请输入手机号" clearable prefix-icon="el-icon-phone" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleUserQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetUserQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <el-table v-loading="userLoading" :data="userList" border stripe highlight-current-row @current-change="handleCurrentChange" class="user-table">
|
|
|
+ <el-table-column width="60" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-radio v-model="selectedUserId" :label="scope.row.userId"><i class="el-icon-circle-check"></i></el-radio>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="用户ID" align="center" prop="userId" width="100" />
|
|
|
+ <el-table-column label="昵称" align="center" prop="nickname" min-width="120" />
|
|
|
+ <el-table-column label="企业昵称" align="center" prop="companyUserNickName" min-width="160" />
|
|
|
+ <el-table-column label="手机号" align="center" prop="phone" width="130">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span class="phone-text">{{ scope.row.phone || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" prop="statusText" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag size="mini" type="success">{{ scope.row.statusText || '正常' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="userTotal>0"
|
|
|
+ :total="userTotal"
|
|
|
+ :page.sync="userQueryParams.pageNum"
|
|
|
+ :limit.sync="userQueryParams.pageSize"
|
|
|
+ @pagination="getUserList"
|
|
|
+ />
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="userSelectOpen = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmUserSelect">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ listRechargeRecord,
|
|
|
+ getRechargeRecord,
|
|
|
+ delRechargeRecord,
|
|
|
+ addRechargeRecord,
|
|
|
+ updateRechargeRecord,
|
|
|
+ exportPostRechargeRecord
|
|
|
+} from "@/api/company/rechargeRecord";
|
|
|
+import { myListUser } from "@/api/user/fsUser";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "RechargeRecord",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ ids: [],
|
|
|
+ businessTypeOptions: [],
|
|
|
+ single: true,
|
|
|
+ multiple: true,
|
|
|
+ showSearch: true,
|
|
|
+ total: 0,
|
|
|
+ rechargeRecordList: [],
|
|
|
+ title: "",
|
|
|
+ open: false,
|
|
|
+ // 统计数据
|
|
|
+ todayCount: 0,
|
|
|
+ todayAmount: '0.00',
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ userId: null,
|
|
|
+ userName: null,
|
|
|
+ transactionId: null,
|
|
|
+ businessType: null,
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ // 充值相关
|
|
|
+ rechargeOpen: false,
|
|
|
+ rechargeLoading: false,
|
|
|
+ quickAmounts: [100, 200, 500, 1000, 2000, 5000],
|
|
|
+ rechargeForm: {
|
|
|
+ userId: null,
|
|
|
+ userName: null,
|
|
|
+ totalAmount: null,
|
|
|
+ businessType: 0,
|
|
|
+ transactionId: '',
|
|
|
+ remark: ''
|
|
|
+ },
|
|
|
+ rechargeRules: {
|
|
|
+ userId: [{ required: true, message: "请选择用户", trigger: "change" }],
|
|
|
+ userName: [{ required: true, message: "请选择用户", trigger: "change" }],
|
|
|
+ totalAmount: [{ required: true, message: "请输入充值金额", trigger: "blur" }]
|
|
|
+ },
|
|
|
+ // 用户选择相关
|
|
|
+ userSelectOpen: false,
|
|
|
+ userLoading: false,
|
|
|
+ userList: [],
|
|
|
+ userTotal: 0,
|
|
|
+ selectedUserId: null,
|
|
|
+ selectedUserRow: null,
|
|
|
+ userQueryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ nickname: '',
|
|
|
+ phone: ''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("company_recharge_business_type").then(response => {
|
|
|
+ this.businessTypeOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listRechargeRecord(this.queryParams).then(response => {
|
|
|
+ this.rechargeRecordList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.calculateStats();
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 计算统计数据
|
|
|
+ calculateStats() {
|
|
|
+ // 今日统计数据（只统计充值类型）
|
|
|
+ const today = new Date();
|
|
|
+ today.setHours(0, 0, 0, 0);
|
|
|
+ const todayStart = today.getTime();
|
|
|
+
|
|
|
+ let todayCount = 0;
|
|
|
+ let todayAmount = 0;
|
|
|
+
|
|
|
+ this.rechargeRecordList.forEach(item => {
|
|
|
+ const createTime = new Date(item.createTime).getTime();
|
|
|
+ // 只统计类型为"充值"的记录(businessType=0)
|
|
|
+ if (createTime >= todayStart && item.businessType === 0) {
|
|
|
+ todayCount++;
|
|
|
+ todayAmount += parseFloat(item.totalAmount || 0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.todayCount = todayCount;
|
|
|
+ this.todayAmount = todayAmount.toFixed(2);
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.form = { id: null, userId: null, userName: null, totalAmount: null, transactionId: null, remark: null };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map(item => item.id);
|
|
|
+ this.single = selection.length !== 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
+ },
|
|
|
+ // 充值
|
|
|
+ handleRecharge() {
|
|
|
+ this.rechargeOpen = true;
|
|
|
+ this.rechargeForm = {
|
|
|
+ userId: null,
|
|
|
+ userName: null,
|
|
|
+ totalAmount: null,
|
|
|
+ businessType: 0,
|
|
|
+ transactionId: this.generateTransactionId(),
|
|
|
+ remark: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ resetRechargeForm() {
|
|
|
+ this.$refs.rechargeForm && this.$refs.rechargeForm.resetFields();
|
|
|
+ this.$refs.rechargeForm2 && this.$refs.rechargeForm2.resetFields();
|
|
|
+ this.$refs.rechargeForm3 && this.$refs.rechargeForm3.resetFields();
|
|
|
+ },
|
|
|
+ generateTransactionId() {
|
|
|
+ return 'TX' + Date.now() + Math.random().toString(36).substr(2, 6).toUpperCase();
|
|
|
+ },
|
|
|
+ // 选择用户
|
|
|
+ handleSelectUser() {
|
|
|
+ this.userSelectOpen = true;
|
|
|
+ this.selectedUserId = null;
|
|
|
+ this.selectedUserRow = null;
|
|
|
+ this.userQueryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ nickname: '',
|
|
|
+ phone: ''
|
|
|
+ };
|
|
|
+ this.getUserList();
|
|
|
+ },
|
|
|
+ getUserList() {
|
|
|
+ this.userLoading = true;
|
|
|
+ myListUser(this.userQueryParams).then(response => {
|
|
|
+ this.userList = response.rows || response.data || [];
|
|
|
+ this.userTotal = response.total || this.userList.length;
|
|
|
+ this.userLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.userLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleUserQuery() {
|
|
|
+ this.userQueryParams.pageNum = 1;
|
|
|
+ this.getUserList();
|
|
|
+ },
|
|
|
+ resetUserQuery() {
|
|
|
+ this.userQueryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ nickname: '',
|
|
|
+ phone: ''
|
|
|
+ };
|
|
|
+ this.getUserList();
|
|
|
+ },
|
|
|
+ handleCurrentChange(row) {
|
|
|
+ if (row) {
|
|
|
+ this.selectedUserId = row.userId;
|
|
|
+ this.selectedUserRow = row;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmUserSelect() {
|
|
|
+ if (!this.selectedUserId) {
|
|
|
+ this.$message.warning('请选择用户');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const row = this.selectedUserRow;
|
|
|
+ this.rechargeForm.userId = row.userId;
|
|
|
+ this.rechargeForm.userName = row.nickname || row.companyUserNickName || '用户' + row.userId;
|
|
|
+ this.userSelectOpen = false;
|
|
|
+ // 手动触发验证
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.rechargeForm && this.$refs.rechargeForm.validateField('userId');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitRecharge() {
|
|
|
+ const valid1 = this.$refs.rechargeForm ? this.$refs.rechargeForm.validate() : true;
|
|
|
+ const valid2 = this.$refs.rechargeForm2 ? this.$refs.rechargeForm2.validate() : true;
|
|
|
+ Promise.all([valid1, valid2]).then(() => {
|
|
|
+ this.rechargeLoading = true;
|
|
|
+ addRechargeRecord(this.rechargeForm).then(response => {
|
|
|
+ this.$message.success("充值成功");
|
|
|
+ this.rechargeOpen = false;
|
|
|
+ this.getList();
|
|
|
+ }).finally(() => {
|
|
|
+ this.rechargeLoading = false;
|
|
|
+ });
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id || this.ids;
|
|
|
+ this.$confirm('是否确认删除储值记录编号为"' + ids + '"的数据项？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ return delRechargeRecord(ids);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = this.queryParams;
|
|
|
+ this.$confirm('是否确认导出所有储值记录数据?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return exportPostRechargeRecord(queryParams);
|
|
|
+ }).then(response => {
|
|
|
+ this.download(response.msg);
|
|
|
+ }).catch(function() {});
|
|
|
+ },
|
|
|
+ // handleExport() {
|
|
|
+ // this.download('company/rechargeRecord/export', { ...this.queryParams }, `rechargeRecord_${new Date().getTime()}.xlsx`)
|
|
|
+ // }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 页面容器 */
|
|
|
+.recharge-container {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f0f2f5;
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
+}
|
|
|
+
|
|
|
+/* 页面头部 */
|
|
|
+.page-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 16px 24px;
|
|
|
+ background: linear-gradient(135deg, #69c0ff 0%, #87e8de 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.header-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统计卡片 */
|
|
|
+.stat-cards {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 24px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon i {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon-primary {
|
|
|
+ background: linear-gradient(135deg, #69c0ff 0%, #87e8de 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon-success {
|
|
|
+ background: linear-gradient(135deg, #95de64 0%, #b7eb8f 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-icon-warning {
|
|
|
+ background: linear-gradient(135deg, #ffd666 0%, #ffe58f 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.stat-content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #262626;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索区域 */
|
|
|
+.search-card {
|
|
|
+ background: #fff;
|
|
|
+ padding: 18px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-form {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-select {
|
|
|
+ width: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-btn {
|
|
|
+ background: #69c0ff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-btn:hover {
|
|
|
+ background: #40a9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.reset-btn {
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 操作按钮 */
|
|
|
+.table-tools {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn {
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 8px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表格区域 */
|
|
|
+.table-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-table /deep/ .el-table__header-wrapper th {
|
|
|
+ background: #fafafa;
|
|
|
+ color: #595959;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-table /deep/ .el-table__row:hover > td {
|
|
|
+ background: #f7f9fc !important;
|
|
|
+}
|
|
|
+
|
|
|
+.序号 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ background: #e6f7ff;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #69c0ff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 10px;
|
|
|
+ background: #fff7e6;
|
|
|
+ color: #fa8c16;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.transaction-id {
|
|
|
+ font-family: 'Monaco', 'Consolas', monospace;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8c8c8c;
|
|
|
+}
|
|
|
+
|
|
|
+.company-name {
|
|
|
+ color: #595959;
|
|
|
+}
|
|
|
+
|
|
|
+.time-text {
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.remark-text {
|
|
|
+ color: #595959;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn {
|
|
|
+ color: #ff4d4f;
|
|
|
+}
|
|
|
+
|
|
|
+/* 分页 */
|
|
|
+.pagination-wrapper {
|
|
|
+ padding: 14px 20px;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 充值对话框 */
|
|
|
+.recharge-dialog /deep/ .el-dialog__header {
|
|
|
+ background: linear-gradient(135deg, #69c0ff 0%, #87e8de 100%);
|
|
|
+ padding: 16px 24px;
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.recharge-dialog /deep/ .el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.recharge-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.recharge-dialog /deep/ .el-dialog__body {
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-content {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.section-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #69c0ff;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #262626;
|
|
|
+}
|
|
|
+
|
|
|
+.divider-wrapper {
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.divider-line {
|
|
|
+ height: 1px;
|
|
|
+ background: #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 快捷金额 */
|
|
|
+.quick-amounts {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-amounts .amount-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: calc(33.33% - 8px);
|
|
|
+ padding: 14px 10px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-amounts .amount-item:hover {
|
|
|
+ border-color: #69c0ff;
|
|
|
+ color: #69c0ff;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-amounts .amount-item.active {
|
|
|
+ border-color: #69c0ff;
|
|
|
+ background: #e6f7ff;
|
|
|
+ color: #69c0ff;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-amounts .amount-value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #262626;
|
|
|
+}
|
|
|
+
|
|
|
+/* 表单样式 */
|
|
|
+.recharge-form /deep/ .el-form-item__label {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #595959;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-amount /deep/ .el-input-number {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 对话框底部 */
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 12px;
|
|
|
+ padding-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.cancel-btn {
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 9px 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn {
|
|
|
+ background: #69c0ff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 9px 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn:hover {
|
|
|
+ background: #40a9ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 用户选择对话框 */
|
|
|
+.user-select-dialog /deep/ .el-dialog__header {
|
|
|
+ background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
|
|
+ padding: 16px 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-select-dialog /deep/ .el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.user-select-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.user-select-search {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ padding: 14px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-search-form {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.phone-text {
|
|
|
+ color: #595959;
|
|
|
+}
|
|
|
+</style>
|
