|
|
@@ -0,0 +1,696 @@
|
|
|
+<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">
|
|
|
+ <template slot="label">
|
|
|
+ <span><i class="el-icon-s-order"></i> 全部</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="已完成" name="1">
|
|
|
+ <template slot="label">
|
|
|
+ <span><i class="el-icon-success"></i> 已完成</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="待处理" name="2">
|
|
|
+ <template slot="label">
|
|
|
+ <span><i class="el-icon-loading"></i> 待处理</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="失败/取消" name="3">
|
|
|
+ <template slot="label">
|
|
|
+ <span><i class="el-icon-circle-close"></i> 失败/取消</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 搜索表单 -->
|
|
|
+ <el-form :model="table.where" label-width="90px" 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="user.account_type<=0">
|
|
|
+ <el-form-item label="交易类型:">
|
|
|
+ <el-select v-model="table.where.type" placeholder="请选择交易类型" clearable class="ele-fluid">
|
|
|
+ <el-option v-for="(v,k) in getTypes()" :key="k" :label="v.name" :value="v.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="5" :sm="12" v-if="user.id<=0">
|
|
|
+ <el-form-item label="关键词:">
|
|
|
+ <el-input v-model="table.where.keyword" placeholder="用户昵称/手机号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4" :sm="12">
|
|
|
+ <el-form-item label="订单号:">
|
|
|
+ <el-input v-model="table.where.order_no" placeholder="请输入订单号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="5" :sm="12">
|
|
|
+ <el-form-item label="起止日期:" prop="date">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="table.where.date"
|
|
|
+ type="daterange"
|
|
|
+ placeholder="选择起止日期"
|
|
|
+ size="small"
|
|
|
+ style="width: 180px;"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" :sm="12">
|
|
|
+ <div class="ele-form-actions">
|
|
|
+ <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search"
|
|
|
+ class="ele-btn-icon">查询</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+
|
|
|
+ <el-button type="warning" @click="showRecharge">账户充值</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 统计信息 -->
|
|
|
+ <div class="stat-cards" v-if="counts">
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-label">总记录数</div>
|
|
|
+ <div class="stat-value">{{ counts.count || 0 }}笔</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="stat-label">总金额</div>
|
|
|
+ <div class="stat-value amount">{{ counts.total || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <ele-data-table ref="table" :config="table" :choose.sync="selection" @loaded="parseData"
|
|
|
+ height="calc(100vh - 400px)">
|
|
|
+ <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="source_order_no" label="订单号" min-width="170" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="nickname" :label="$store.state.user.user.type==2?'来源用户':'用户昵称'" min-width="130" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span class="ele-text-primary" v-if="$store.state.user.user.type==2">{{row.bill && row.bill.user? row.bill.user.nickname+'('+row.bill.user.mobile+')':'-'}}</span>
|
|
|
+ <span class="ele-text-primary" v-else>{{row.nickname}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="mobile" v-if="$store.state.user.user.type!=2" label="手机号" min-width="110" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 金额 -->
|
|
|
+ <el-table-column label="金额" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span v-if="row.money>=0" class="ele-text-success" style="font-weight: bold;">{{ row.money }}{{row.account_type==1?'元':'个'}}</span>
|
|
|
+ <span v-else class="ele-text-danger" style="font-weight: bold;">{{ row.money }}{{row.account_type==1?'元':'个'}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 变更前金额 -->
|
|
|
+ <el-table-column label="变更后金额" width="100" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span style="color: #909399;">{{ row.after_money }}{{row.account_type==1?'元':'个'}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 交易类型 -->
|
|
|
+ <el-table-column label="交易类型" width="90" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag :type="['','success','primary','info','warning','danger','success','warning','info','success','paimary'][row.type]" size="mini">{{row.type_name}}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 状态 -->
|
|
|
+ <el-table-column label="状态" width="90" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag v-if="row.status === 1" type="success" size="mini">已完成</el-tag>
|
|
|
+ <el-tag v-else-if="row.status === 2" type="warning" 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" label="创建时间" min-width="160" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="remark" label="备注" min-width="150" align="center">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <el-table-column label="操作" width="100" align="center" fixed="right">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-link @click="viewDetail(row)" icon="el-icon-view" type="primary" :underline="false">查看</el-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </ele-data-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 查看详情弹窗 -->
|
|
|
+ <el-dialog title="财务明细详情" :visible.sync="detailVisible" width="700px" :destroy-on-close="true"
|
|
|
+ :close-on-click-modal="false" custom-class="account-detail-dialog">
|
|
|
+
|
|
|
+ <!-- 头部信息卡片 -->
|
|
|
+ <div class="detail-header">
|
|
|
+ <div class="header-item">
|
|
|
+ <div class="header-label">记录ID</div>
|
|
|
+ <div class="header-value">#{{ detailData.id }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <div class="header-label">交易类型</div>
|
|
|
+ <div class="header-value">
|
|
|
+ <el-tag type="success" size="medium">{{detailData.type_name}}</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="header-item">
|
|
|
+ <div class="header-label">状态</div>
|
|
|
+ <div class="header-value">
|
|
|
+ <el-tag v-if="detailData.status === 1" type="success" size="medium">已完成</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 2" type="warning" size="medium">待处理</el-tag>
|
|
|
+ <el-tag v-else-if="detailData.status === 3" type="danger" size="medium">失败/取消</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 金额信息 -->
|
|
|
+ <div class="amount-section">
|
|
|
+ <div class="amount-card main-amount">
|
|
|
+ <div class="amount-label">交易金额</div>
|
|
|
+ <div class="amount-value">
|
|
|
+ ¥{{ detailData.money }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount-card">
|
|
|
+ <div class="amount-label">变更后金额</div>
|
|
|
+ <div class="amount-value secondary">¥{{ detailData.after_money }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 详细信息 -->
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="el-icon-user"></i> 基本信息
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="2" border size="medium">
|
|
|
+ <el-descriptions-item label="关联订单号" :span="2">
|
|
|
+ <span class="order-no">{{ detailData.source_order_no || '-' }}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <template v-if="$store.state.user.user.type==2">
|
|
|
+ <el-descriptions-item label="来源用户">{{ detailData.bill && detailData.bill.user?detailData.bill.nickname+'(ID:'+detailData.bill.id+'-'+detailData.bill.mobile+')':'-'}}</el-descriptions-item>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-descriptions-item label="用户ID">{{ detailData.user_id || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="用户昵称">{{ detailData.nickname || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="手机号">{{ detailData.mobile || '-' }}</el-descriptions-item>
|
|
|
+ </template>
|
|
|
+ <el-descriptions-item label="交易类型" :span="2">
|
|
|
+ <span>{{ detailData.type_name }}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="detail-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="el-icon-time"></i> 时间信息
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="2" border size="medium">
|
|
|
+ <el-descriptions-item label="创建时间">
|
|
|
+ <i class="el-icon-time"></i> {{ detailData.create_time_text }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="更新时间">
|
|
|
+ <i class="el-icon-time"></i> {{ detailData.update_time_text }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="detail-section" v-if="detailData.remark">
|
|
|
+ <div class="section-title">
|
|
|
+ <i class="el-icon-document"></i> 备注
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="1" border size="medium">
|
|
|
+ <el-descriptions-item label="备注" :span="1">
|
|
|
+ <div class="remark-text">{{ detailData.remark }}</div>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" size="medium" @click="detailVisible = false">
|
|
|
+ <i class="el-icon-check"></i> 关闭
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 账户充值 -->
|
|
|
+ <el-dialog title="账户充值/扣除" :visible.sync="showRechargeEdit" width="600px" zIndex="1020" @closed="form = {account_type:1}"
|
|
|
+ :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false" :close-on-click-modal="false">
|
|
|
+ <el-form :model="form" ref="editForm" :rules="rules" label-width="90px" @keyup.enter.native="save"
|
|
|
+ @submit.native.prevent>
|
|
|
+ <el-form-item label="账户类型:" prop="account_type">
|
|
|
+ <el-select v-model="form.account_type" :disabled="user.account_type?true:false" placeholder="请选择账户类型" class="ele-fluid">
|
|
|
+ <el-option label="余额" :value="1" />
|
|
|
+ <el-option label="报单积分" :value="3" />
|
|
|
+ <el-option label="数字资产" :value="2" disabled/>
|
|
|
+ <el-option label="绿色积分" :value="4" disabled/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户账户:" prop="user_id">
|
|
|
+ <el-select v-model="form.user_id" filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请选择用户账户"
|
|
|
+ :remote-method="getUsers"
|
|
|
+ :disabled="user.id?true:false"
|
|
|
+ :loading="loading" class="ele-fluid">
|
|
|
+ <el-option v-for="(v,k) in users" :key="k" :label="v.nickname+'-'+v.mobile" :value="v.id">
|
|
|
+ <span style="float: left">{{ v.nickname }}</span>
|
|
|
+ <span style="float: right;color: #999;">{{ v.mobile }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="调整类型:" prop="change_type">
|
|
|
+ <el-select v-model="form.change_type" placeholder="请选择调整类型" clearable class="ele-fluid">
|
|
|
+ <el-option label="充值" :value="1" />
|
|
|
+ <el-option label="扣除" :value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="金额:" prop="money">
|
|
|
+ <el-input v-model="form.money" controls-position="right" placeholder="请输入调整金额"
|
|
|
+ class="ele-fluid ele-text-left" >
|
|
|
+ <template slot="append">{{form.account_type==1?'元':'个'}}</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="调整备注:">
|
|
|
+ <el-input v-model="form.remark" placeholder="请输入备注" :rows="3" type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="showRechargeEdit = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="recharge">确定调整</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "AccountLog",
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["permission"]),
|
|
|
+ // 判断是否为商户用户
|
|
|
+ isStoreUser() {
|
|
|
+ return this.$store.state.user.user && this.$store.state.user.user.store_id > 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ user: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {id:0,account_type:0, mobile: ''};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeTab: 'all', // 当前激活的 Tab
|
|
|
+ // 表格配置
|
|
|
+ table: {
|
|
|
+ url: '/account/index',
|
|
|
+ where: {
|
|
|
+ type: '',
|
|
|
+ account_type: this.user.account_type,
|
|
|
+ status: '',
|
|
|
+ user_id: this.user.id,
|
|
|
+ keyword: '',
|
|
|
+ order_no: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ selection: [], // 表格选中数据
|
|
|
+ counts: null, // 统计数据
|
|
|
+ detailVisible: false, // 是否显示详情弹窗
|
|
|
+ showRechargeEdit: false,
|
|
|
+ form: {
|
|
|
+ user_id: '',
|
|
|
+ money:'',
|
|
|
+ change_type: 1,
|
|
|
+ account_type:1,
|
|
|
+ },
|
|
|
+ users:[],
|
|
|
+ detailData: {}, // 详情数据
|
|
|
+ rules: { // 表单验证规则
|
|
|
+ account_type: [
|
|
|
+ {required: true, message: '请选择账户类型', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ user_id: [
|
|
|
+ {required: true, message: '请选择账号', trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ money: [
|
|
|
+ {required: true, message: '请输入金额', trigger: 'blur'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 解析表格数据 */
|
|
|
+ parseData(data,counts) {
|
|
|
+ if (data && counts) {
|
|
|
+ this.counts = counts;
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+
|
|
|
+ /* Tab 切换 */
|
|
|
+ handleTabClick(tab) {
|
|
|
+ // 根据 Tab 设置状态
|
|
|
+ if (tab.name === 'all') {
|
|
|
+ this.table.where.status = '';
|
|
|
+ } else {
|
|
|
+ this.table.where.status = parseInt(tab.name);
|
|
|
+ }
|
|
|
+ // 重新加载数据
|
|
|
+ this.$refs.table.reload();
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 重置搜索 */
|
|
|
+ handleReset() {
|
|
|
+ this.activeTab = 'all';
|
|
|
+ this.table.where = {
|
|
|
+ type: '',
|
|
|
+ status: '',
|
|
|
+ account_type: this.user.account_type,
|
|
|
+ user_id: this.user.id,
|
|
|
+ keyword: '',
|
|
|
+ order_no: ''
|
|
|
+ };
|
|
|
+ this.$refs.table.reload();
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 查看详情 */
|
|
|
+ viewDetail(row) {
|
|
|
+ this.detailData = Object.assign({}, row);
|
|
|
+ this.detailVisible = true;
|
|
|
+ },
|
|
|
+ showRecharge() {
|
|
|
+ this.getUsers('');
|
|
|
+ this.form = {
|
|
|
+ user_id: this.user.id?this.user.id:'',
|
|
|
+ account_type: this.user.account_type?this.user.account_type:3,
|
|
|
+ change_type: 1,
|
|
|
+ money: '',
|
|
|
+ remark: '',
|
|
|
+ };
|
|
|
+ this.showRechargeEdit = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 获取交易类型文本 */
|
|
|
+ getTypes() {
|
|
|
+ const typeMap =[
|
|
|
+ {id: 1,name: '订单付款'},
|
|
|
+ {id: 2,name: '账户充值'},
|
|
|
+ {id: 3,name: '订单退款'},
|
|
|
+ {id: 4,name: '账户提现'},
|
|
|
+ {id: 5,name: '提现驳回'},
|
|
|
+ {id: 6,name: '平台调整'},
|
|
|
+ {id: 7,name: '商家结算'},
|
|
|
+ {id: 8,name: '收益奖励'},
|
|
|
+ {id: 10,name: '账户转账'},
|
|
|
+ {id: 9,name: '其他'},
|
|
|
+ ];
|
|
|
+ return this.$store.state.user.user.type==2? [{id: 7,name:'商家结算'}] : typeMap;
|
|
|
+ },
|
|
|
+ getUsers(keyword) {
|
|
|
+ this.$http.post('/member/options', {keyword: keyword}).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.users = res.data.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /* 充值 */
|
|
|
+ recharge() {
|
|
|
+ this.$message.closeAll();
|
|
|
+ if(this.form.money<=0){
|
|
|
+ this.$message.error('请输入金额');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$confirm('确定要给该用户'+'账户'+(this.form.change_type==1?'充值':'扣除')+this.form.money+(['','余额','数字资产','报单积分','绿色积分'][this.form.account_type])+'?', '提示', {type: 'warning'}).then(() => {
|
|
|
+ this.$refs['editForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const loading = this.$loading({lock: true});
|
|
|
+ this.$http.post('/member/recharge', this.form).then(res => {
|
|
|
+ loading.close();
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.showRechargeEdit = false;
|
|
|
+ this.$message({type: 'success', message: res.data.msg});
|
|
|
+ this.$refs.table.reload();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ loading.close();
|
|
|
+ this.$message.error(e.message);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(() => 0);
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// Tab 标签页样式
|
|
|
+::v-deep .ele-tabs-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ border-bottom: 2px solid #e4e7ed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__item {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ margin-right: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ height: 3px;
|
|
|
+ background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-cards {
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .stat-card {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ .stat-label {
|
|
|
+ font-size: 14px;
|
|
|
+ opacity: 0.9;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &.amount {
|
|
|
+ color: #ffd700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 详情弹窗样式
|
|
|
+::v-deep .account-detail-dialog {
|
|
|
+ .el-dialog__header {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #f0f0f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 1px solid #e4e7ed;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.detail-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .header-item {
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.amount-section {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .amount-card {
|
|
|
+ flex: 1;
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ &.main-amount {
|
|
|
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
|
+
|
|
|
+ .amount-label {
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-value {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-value {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &.secondary {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.detail-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 3px solid #409eff;
|
|
|
+
|
|
|
+ i {
|
|
|
+ margin-right: 5px;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-descriptions {
|
|
|
+ background: white;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .el-descriptions__label {
|
|
|
+ background: #fafafa;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-descriptions__content {
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-no {
|
|
|
+ font-family: 'Courier New', monospace;
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remark-text {
|
|
|
+ line-height: 1.6;
|
|
|
+ color: #606266;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-footer {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ min-width: 120px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
