gold-vue/src/views/moneyManage/receiveDetail/receiveFinance.vue

<template>
    <div class="content">
        <div class="div-card1">
            <el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;">
                <div class="row">
                    <div class="rowItem">
                        <el-text style="width: 4vw;">精网号</el-text>
                        <el-input v-model="searchData.jwcode" placeholder="请输入精网号" style="width:10vw;"
                            clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">客户姓名</el-text>
                        <el-input v-model="searchData.name" placeholder="请输入客户姓名" style="width:10vw;"
                            clearable></el-input>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">所属地区</el-text>
                        <el-select v-model="searchData.market" placeholder="请选择所属地区" style="width:10vw;" clearable>
                            <el-option v-for="item in marketList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                    <!-- 地区财务固定显示付款币种，删除客服的订单状态 -->
                    <div class="rowItem">
                        <el-text style="width: 4vw;">付款币种</el-text>
                        <el-select v-model="searchData.paymentCurrency" placeholder="请选择付款币种" style="width: 10vw;"
                            clearable>
                            <el-option v-for="item in customOptions" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">支付方式</el-text>
                        <el-select v-model="searchData.payType" placeholder="请选择支付方式" style="width: 10vw;" clearable>
                            <el-option v-for="item in paytypeList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="rowItem">
                        <el-text style="width: 4vw;">活动名称</el-text>
                        <el-select v-model="searchData.activity" placeholder="请选择活动方式" style="width: 10vw;" clearable>
                            <el-option v-for="item in activityList" :key="item.id" :label="item.activityName"
                                :value="item.id" />
                        </el-select>
                    </div>
                    <div class="rowItem">
                        <el-text style="width: 4vw;">产品名称</el-text>
                        <el-cascader v-model="searchData.goodsName" :options="productList" style="width: 10vw;"
                            clearable />
                    </div>
                    <div class="rowItem" style="width: 30vw">
                        <el-text style="width: 4vw; margin-left: 0.5vw;">付款时间</el-text>
                        <el-date-picker v-model="getTime" type="datetimerange" range-separator="至"
                            start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; "
                            @change="handleDatePickerChange" :default-time="defaultTime"
                            :disabled-date="disabledDate" />
                    </div>
                    <!-- 地区财务查询/重置按钮，删除客服相关按钮 -->
                    <div class="buttons">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button type="success" @click="reset">重置</el-button>
                    </div>
                </div>
            </el-card>
        </div>


        <div class="div-card2">
            <el-card class="card2">
                <div class="btns">
                    <!-- 地区财务专属标签页（待审核/已通过/已完成/已驳回） -->
                    <div class="tabs">
                        <el-button-group>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }"
                                @click="navigateTo('wait')">
                                待审核
                            </el-button>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }"
                                @click="navigateTo('pass')">
                                已通过
                            </el-button>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'done' ? '#2741DE' : '#E5EBFE', color: activeTab === 'done' ? 'white' : '#666' }"
                                @click="navigateTo('done')">
                                已完成
                            </el-button>
                            <el-button class="btnItem"
                                :style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }"
                                @click="navigateTo('reject')">
                                已驳回
                            </el-button>
                        </el-button-group>
                    </div>
                    <!-- 删除客服的“添加收款”按钮 -->
                    <div class="btnAdd"></div>
                </div>

                <div class="table">
                    <el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange"
                        :row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }">
                        <el-table-column type="index" label="序号" width="100px" fixed="left">
                            <template #default="scope">
                                <span>{{ scope.$index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="left" prop="jwcode" label="Homily ID" width="110px" />
                        <el-table-column fixed="left" prop="name" label="姓名" width="110px" />
                        <el-table-column prop="marketName" label="所属地区" width="80px" />
                        <el-table-column prop="activity" label="活动名称" width="120px" show-overflow-tooltip />
                        <el-table-column prop="goodsName" label="产品名称" width="120px" />
                        <el-table-column prop="goodNum" label="产品数量" width="130px">
                            <template #default="scope">
                                <span v-if="scope.row.goodsName == '金币充值'">{{ scope.row.permanentGold }}</span>
                                <span v-else>{{ scope.row.goodNum }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="paymentCurrency" label="付款币种" width="100px" />
                        <el-table-column prop="paymentAmount" label="付款金额" width="120px" />
                        <!-- 地区财务显示到账币种/金额/手续费（已通过/已完成标签页） -->
                        <el-table-column prop="receivedCurrency" label="到账币种"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="150px"></el-table-column>
                        <el-table-column prop="receivedAmount" label="到账金额"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="150px">
                            <template #default="scope">
                                <div v-if="!scope.row.receivedAmount">
                                    <text style="color: #FA5A1E;">待补充</text>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="handlingCharge" label="手续费"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="150px">
                            <template #default="scope">
                                <div v-if="scope.row.handlingCharge == null">
                                    <text style="color: #FA5A1E;">待补充</text>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="payType" label="支付方式" width="130px" />
                        <el-table-column prop="payTime" label="付款时间" width="180px" />
                        <el-table-column prop="voucher" label="转账凭证" width="110px">
                            <template #default="scope">
                                <div v-if="scope.row.voucher"
                                    style="display: flex; justify-content: center; align-items: center; cursor: pointer;"
                                    @click="previewImage(scope.row.voucher)">
                                    <img :src="scope.row.voucher" alt="支付凭证" style="width: auto; height: 40px;">
                                </div>
                                <div v-else
                                    style="display: flex; justify-content: center; align-items: center; height: 40px;">
                                    ——
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="submitterName" label="提交人" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <!-- 地区财务显示审核人（已通过/已驳回/已完成标签页） -->
                        <el-table-column prop="auditName" label="审核人"
                            v-if="activeTab == 'pass' || activeTab == 'reject' || activeTab == 'done'" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="receivedTime" label="到账时间"
                            v-if="activeTab == 'pass' || activeTab == 'done'" width="180px" />
                        <el-table-column prop="remark" label="备注" v-if="activeTab != 'reject'" width="150px"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="status" label="订单状态" v-if="activeTab == 'done'" width="150px"
                            show-overflow-tooltip>
                            <template #default="scope">
                                <span v-if="scope.row.status == 6">退款</span>
                                <span v-else>正常</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="auditTime" label="驳回时间" v-if="activeTab == 'reject'" width="180px"
                            show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rejectReason" label="驳回理由" v-if="activeTab == 'reject'" width="150px">
                            <template #default="scope">
                                <div class="ellipsis-container"
                                    @mouseenter="handleMouseEnter($event, scope.row.rejectReason)"
                                    @mouseleave="handleMouseLeave" @mousemove="handleMouseMove($event)">
                                    <span class="ellipsis-text">
                                        {{ scope.row.rejectReason || '—' }}
                                    </span>
                                    <!-- 自定义提示框 -->
                                    <div v-if="showTooltip && tooltipContent" class="custom-tooltip" :style="{
                                        left: `${tooltipLeft}px`,
                                        top: `${tooltipTop}px`
                                    }">
                                        {{ tooltipContent }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- 地区财务表格操作（待审核→审核，已通过→编辑） -->
                        <el-table-column fixed="right" label="操作" width="120px"
                            v-if="activeTab != 'reject' && activeTab != 'done'">
                            <template #default=scope>
                                <el-link v-if="activeTab == 'wait'" style="color: #2741DE;"
                                    @click="openAuditForm(scope.row)">审核
                                </el-link>
                                <el-link
                                    v-else-if="activeTab == 'pass' && !(scope.row.status == 6 || scope.row.status == 4)"
                                    style="color: #2741DE;" @click="openEditForm(scope.row)">编辑
                                </el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination background :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handlePagination('size', $event)"
                        @current-change="handlePagination('page', $event)"></el-pagination>
                </div>
            </el-card>
        </div>

        <!-- 仅保留地区财务相关弹窗：审核弹窗、编辑手续费弹窗 -->
        <!-- 审核弹窗 -->
        <el-dialog class="adddialog" v-model="auditFormisible" width="20vw" :before-close="closeAuditForm">
            <el-form class="addForm" label-width="4vw" label-position="left">
                <el-form-item label="精网号">
                    <el-input disabled="true" v-model="auditFormData.jwcode" placeholder="请输入驳回理由" />
                </el-form-item>
                <el-form-item label="客户姓名">
                    <el-input disabled="true" v-model="auditFormData.name" placeholder="请输入客户姓名" />
                </el-form-item>
                <el-form-item label="所属地区">
                    <el-input disabled="true" v-model="auditFormData.market" />
                </el-form-item>
                <el-form-item label="活动名称">
                    <el-input disabled="true" v-model="auditFormData.activity" placeholder="请输入活动名称" />
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-select disabled="true" v-model="auditFormData.goodsName" />
                </el-form-item>
                <el-form-item label="付款币种">
                    <el-select disabled="true" v-model="auditFormData.paymentCurrency" placeholder="请选择付款币种"
                        @change="handleCurrencyChange" />
                </el-form-item>
                <el-form-item label="付款金额">
                    <el-input disabled="true" v-model="auditFormData.paymentAmount" placeholder="请输入付款金额" />
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-select disabled="true" v-model="auditFormData.payType" :items="paytypeOptions"
                        placeholder="请选择支付方式" />
                </el-form-item>
                <el-form-item label="到账地区">
                    <el-select disabled="true" v-model="auditFormData.receivedMarket" placeholder="到账地区" />
                </el-form-item>
                <el-form-item label="付款时间">
                    <el-date-picker disabled="true" type="datetime" v-model="auditFormData.payTime"
                        placeholder="请选择付款时间" />
                </el-form-item>
                <el-form-item label="转账凭证">
                    <div class="pic">
                        <el-upload disabled="true" ref="uploadRef" class="uploader" :show-file-list="false"
                            list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
                            :on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload">
                            <img v-if="auditFormData.voucher" :src="auditFormData.voucher" class="avatar"
                                style="height: 100%; width: 100%;  object-fit: cover;" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <el-text class="picText">
                            仅支持.jpg .png格式文件≤ 1 MB
                        </el-text>
                    </div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input disabled="true" v-model="auditFormData.remark" type="textarea" :rows="3"
                        placeholder="请输入备注" maxlength="100" show-word-limit />
                </el-form-item>
                <el-form-item label="驳回理由" v-if="ifReject" required>
                    <el-input v-model="auditFormData.rejectReason" type="textarea" :rows="3" placeholder="请输入驳回理由"
                        maxlength="100" show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer" v-if="!ifReject">
                    <el-button style="background-color: #7E91FF;" @click="ifReject = true">驳回</el-button>
                    <el-button :style="{
                        backgroundColor: isBtnDisabled ? '#E5E5E5FF' : '#2741DEFF',
                        marginLeft: '60px',
                        color: isBtnDisabled ? '#8A8A8A' : '#F3FAFE'
                    }" @click="handelAudit" :disabled="isBtnDisabled">{{ btnText }}</el-button>
                </span>
                <span class="dialog-footer" v-if="ifReject">
                    <el-button style="background-color: #7E91FF;" @click="closeAuditForm">取消</el-button>
                    <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
                        @click="throttledhandelAuditReject">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 编辑填手续费弹窗（地区财务核心编辑功能） -->
        <el-dialog class="editdialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm">
            <div class="content">
                <div class="left">
                    <el-form class="editForm" label-width="4.5vw" label-position="left">
                        <el-form-item label="精网号">
                            <el-input disabled="true" v-model="editFormData.jwcode" placeholder="精网号" />
                        </el-form-item>
                        <el-form-item label="客户姓名">
                            <el-input disabled="true" v-model="editFormData.name" placeholder="客户姓名" />
                        </el-form-item>
                        <el-form-item label="所属地区">
                            <el-input disabled="true" v-model="editFormData.marketName" placeholder="所属地区" />
                        </el-form-item>
                        <el-form-item label="活动名称">
                            <el-input disabled="true" v-model="editFormData.activity" placeholder="活动名称" />
                        </el-form-item>
                        <el-form-item label="产品名称">
                            <el-select disabled="true" v-model="editFormData.goodsName" placeholder="产品名称"
                                clearable></el-select>
                        </el-form-item>
                        <!-- 金币产品特殊显示 -->
                        <el-form-item v-show="!isEditGold" label="产品数量">
                            <div style="padding-right: 50px; display: flex;">
                                <el-input disabled="true" style="padding-right: 10px;" v-model="editFormData.goodNum"
                                    placeholder="产品数量" />
                                <span style="color: #999999;">个</span>
                            </div>
                        </el-form-item>
                        <div v-show="isEditGold" style="margin-bottom: 15px;  display: flex;">
                            <div style=" display: flex; margin-right: 10px;">
                                <span
                                    style="color: #999999; display: flex; white-space: nowrap;align-items: center;">永久金币：</span>
                                <el-input disabled="true"
                                    style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
                                    v-model="editFormData.permanentGold" />
                            </div>
                            <div style="padding-right: 5px; display: flex;">
                                <span
                                    style="color: #999999; display: flex; white-space: nowrap;align-items: center;">免费金币：</span>
                                <el-input disabled="true"
                                    style="padding-right: 10px; padding-left: 10px; height: 30px; width: 110px;"
                                    v-model="editFormData.freeGold" />
                            </div>
                        </div>
                        <el-form-item label="付款币种">
                            <CurrencySelect :disabled="!ifOnline" v-model="editFormData.paymentCurrency"
                                :items="customOptions" placeholder="付款币种" />
                        </el-form-item>
                        <el-form-item label="付款金额">
                            <el-input :disabled="!ifOnline" v-model="editFormData.paymentAmount" placeholder="付款金额" />
                        </el-form-item>
                        <el-form-item label="支付方式">
                            <el-select disabled="true" v-model="editFormData.payType" placeholder="支付方式"
                                clearable></el-select>
                        </el-form-item>
                        <el-form-item label="到账地区">
                            <el-select disabled="true" v-model="editFormData.receivedMarket" placeholder="到账地区"
                                clearable></el-select>
                        </el-form-item>
                        <el-form-item label="付款时间">
                            <el-date-picker disabled="true" type="datetime" v-model="editFormData.payTime"
                                placeholder="付款时间" />
                        </el-form-item>
                        <el-form-item label="转账凭证">
                            <div class="pic">
                                <el-upload disabled="true" ref="uploadRef" class="uploader" :show-file-list="false"
                                    list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
                                    :on-error="handelImgErr" :on-change="handleImageChange"
                                    :http-request="customUpload">
                                    <img v-if="editFormData.voucher" :src="editFormData.voucher" class="avatar"
                                        style="height: 100%; width: 100%;  object-fit: cover;" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                                <el-text class="picText">仅支持.jpg .png格式文件≤ 1 MB</el-text>
                            </div>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input disabled="true" v-model="editFormData.remark" type="textarea" :rows="4"
                                placeholder="备注" maxlength="100" show-word-limit />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <!-- 地区财务可编辑项：仅到账相关信息 -->
                    <el-form ref="editFormRef" :rules="editFormRule" :model="editFormData" class="editFormRighrt"
                        label-width="4.5vw" label-position="left">
                        <el-form-item label="到账货币" required>
                            <CurrencySelect v-model="editFormData.receivedCurrency" :items="customOptions"
                                placeholder="请选择到账货币" />
                        </el-form-item>
                        <el-form-item label="到账金额" prop="receivedAmount" required>
                            <el-input v-model="editFormData.receivedAmount" placeholder="请输入到账金额" type="number" />
                        </el-form-item>
                        <el-form-item label="手续费" prop="handlingCharge" required>
                            <el-input v-model="editFormData.handlingCharge" placeholder="请输入手续费" type="number" />
                        </el-form-item>
                        <el-form-item label="到账时间" required>
                            <el-date-picker type="datetime" v-model="editFormData.receivedTime" placeholder="请选择到账时间" />
                        </el-form-item>
                    </el-form>
                    <span class="editBtns">
                        <button class="editBtn1" @click="closeEditForm">
                            <text class="txt">取消</text>
                        </button>
                        <button class="editBtn2" @click="throttledsubmitEditForm">
                            <text class="txt">提交</text>
                        </button>
                    </span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
// 仅导入地区财务所需依赖
import { ref, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus';
import API from '@/util/http.js';
import request from '@/util/http.js';
import moment from 'moment';
import _ from 'lodash';
import { Plus } from '@element-plus/icons-vue';

// 地区财务专属组件
import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue';

// 静态数据与规则（仅保留必要项）
import { editFormRule } from './utils/recriveFormRules.js';
import { productList, MarketNameForId, CurrencyForId, marketList } from './utils/staticData.js';
import { useAdminStore } from '@/store/index.js';
import { hasMenuPermission } from '@/utils/menuTreePermission.js';

// ===================== 1. 核心状态管理（仅地区财务） =====================
const adminStore = useAdminStore();
const { menuTree } = storeToRefs(adminStore);

// 角色固定：地区财务（caiwu=true，其他角色关闭）
const kefu = ref(false);
const caiwu = ref(true);
const HQcaiwu = ref(false);
const superAdmin = ref(false);

// 表格与分页数据
const tableData = ref([]);
const total = ref(0);
const pageInfo = ref({ pageSize: 10, pageNum: 1 });

// 搜索条件
const searchData = ref({});
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
const getTime = ref([]);

// 标签页：默认“待审核”
const activeTab = ref('wait');

// 审核弹窗状态
const auditFormisible = ref(false);
const auditFormData = ref({});
const ifReject = ref(false);
const countdown = ref(0);
const isBtnDisabled = ref(false);
const btnText = ref('通过(3)');

// 编辑弹窗状态
const editFormisible = ref(false);
const editFormData = ref({});
const editFormRef = ref(null);
const isEditGold = ref(false); // 金币产品标记
const ifOnline = ref(false); // 在线支付标记

// 辅助状态：图片上传、悬浮提示
const uploadRef = ref(null);
const showTooltip = ref(false);
const tooltipContent = ref('');
const tooltipLeft = ref(0);
const tooltipTop = ref(0);

// 基础数据（地区财务专用）
const adminData = ref({});
const activityList = ref([]);
const customOptions = ref(['美元(USD)', '港币(HKD)', '新币(SGD)', '马币(MYR)', '泰铢(THB)', '加币(CAD)', '越南盾(VDN)', '韩元(KRW)']);
const paytypeList = ["Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款", "银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal"];
const paytypeOptions = ref([...paytypeList]);

// ===================== 2. 核心功能函数（仅地区财务） =====================
// 2.1 数据加载：获取地区财务订单列表
const getlist = async () => {
    try {
        let payCurrencySelect = '';
        let goodsName = '';

        // 处理时间范围
        if (getTime.value && getTime.value.length === 2) {
            searchData.value.startTime = moment(getTime.value[0]).format('YYYY-MM-DD HH:mm:ss');
            searchData.value.endTime = moment(getTime.value[1]).format('YYYY-MM-DD HH:mm:ss');
        } else {
            searchData.value.startTime = '';
            searchData.value.endTime = '';
        }

        // 处理产品名称（级联选择取最后一级）
        if (searchData.value.goodsName) {
            goodsName = searchData.value.goodsName[searchData.value.goodsName.length - 1];
        }

        // 处理付款币种（转ID）
        if (searchData.value.paymentCurrency) {
            payCurrencySelect = CurrencyForId(searchData.value.paymentCurrency);
        }

        // 地区财务固定参数：角色ID=1，按标签页筛选状态
        const cashRoleId = '1';
        const receivedMarket = adminData.value.markets;
        if (activeTab.value === 'wait') searchData.value.status = 0;
        else if (activeTab.value === 'pass') searchData.value.status = 13;
        else if (activeTab.value === 'done') searchData.value.status = 46;
        else if (activeTab.value === 'reject') searchData.value.status = 2;

        const result = await request({
            url: '/cashCollection/selectCollection',
            data: {
                ...pageInfo.value,
                cashCollection: {
                    ...searchData.value,
                    submitterId: adminData.value.id,
                    receivedMarket: MarketNameForId(receivedMarket),
                    cashRoleId: cashRoleId,
                    paymentCurrency: payCurrencySelect,
                    submitterMarket: receivedMarket,
                    goodsName: goodsName,
                    market: MarketNameForId(searchData.value.market)
                }
            }
        });

        if (result.code === 200) {
            tableData.value = result.data.list;
            total.value = result.data.total;
        } else {
            ElMessage.error('订单数据加载失败');
        }
    } catch (error) {
        console.error('地区财务订单列表请求异常：', error);
        ElMessage.error('网络异常，请重试');
    }
};

// 2.2 搜索与重置
const search = () => {
    getlist();
    ElMessage.success('查询成功');
};

const reset = () => {
    searchData.value = {};
    getlist();
};

// 2.3 标签页切换
const navigateTo = async (tab) => {
    activeTab.value = tab;
    await getlist();
};

// 2.4 审核功能
// 打开审核弹窗
const openAuditForm = (row) => {
    auditFormData.value = { ...row, market: row.marketName };
    auditFormisible.value = true;
};

// 关闭审核弹窗
const closeAuditForm = () => {
    ifReject.value = false;
    auditFormisible.value = false;
    auditFormData.value = {};
};

// 审核通过
const handelAudit = async () => {
    try {
        const result = await request({
            url: '/cashAudit/collectionAudit',
            data: {
                orderCode: auditFormData.value.orderCode,
                action: 1,
                auditId: adminData.value.id
            }
        });

        if (result.code === 200) {
            ElMessage.success('审核通过');
            getlist();
            closeAuditForm();
        } else {
            ElMessage.error(result.msg || '审核失败');
        }
    } catch (error) {
        console.error('审核通过请求异常：', error);
        ElMessage.error('网络异常，请重试');
    }
};

// 审核驳回
const handelAuditReject = async () => {
    if (!auditFormData.value.rejectReason) {
        ElMessage.warning('请输入驳回理由');
        return;
    }

    try {
        const result = await request({
            url: '/cashAudit/collectionAudit',
            data: {
                orderCode: auditFormData.value.orderCode,
                rejectReason: auditFormData.value.rejectReason,
                action: 2,
                auditId: adminData.value.id
            }
        });

        if (result.code === 200) {
            ElMessage.success('驳回成功');
            getlist();
            closeAuditForm();
        } else {
            ElMessage.error(result.msg || '驳回失败');
        }
    } catch (error) {
        console.error('审核驳回请求异常：', error);
        ElMessage.error('网络异常，请重试');
    }
};

// 审核按钮倒计时（防止误操作）
watch(auditFormisible, (val) => {
    if (val) {
        countdown.value = 3;
        isBtnDisabled.value = true;
        btnText.value = `通过(${countdown.value})`;

        const timer = setInterval(() => {
            countdown.value--;
            btnText.value = `通过(${countdown.value})`;

            if (countdown.value <= 0) {
                isBtnDisabled.value = false;
                clearInterval(timer);
                btnText.value = '通过';
            }
        }, 1000);
    }
});

// 2.5 编辑手续费功能
// 打开编辑弹窗
const openEditForm = (row) => {
    editFormData.value = { ...row };
    // 区分金币产品与普通产品
    if (row.goodsName === '金币充值') isEditGold.value = true;
    else isEditGold.value = false;
    // 在线支付订单允许修改付款信息
    if (row.status === 3) ifOnline.value = true;
    else ifOnline.value = false;

    editFormisible.value = true;
};

// 关闭编辑弹窗
const closeEditForm = () => {
    editFormisible.value = false;
    editFormData.value = {};
};

// 提交编辑（补充手续费）
const submitEditForm = async () => {
    try {
        await editFormRef.value.validate();

        // 处理时间格式
        if (editFormData.value.receivedTime) {
            editFormData.value.receivedTime = moment(editFormData.value.receivedTime).format('YYYY-MM-DD HH:mm:ss');
        }

        const result = await request({
            url: '/cashCollection/complete',
            data: {
                orderCode: editFormData.value.orderCode,
                handlingCharge: editFormData.value.handlingCharge * 100, // 转为分单位
                paymentCurrency: CurrencyForId(editFormData.value.paymentCurrency),
                paymentAmount: editFormData.value.paymentAmount * 100, // 转为分单位
                receivedCurrency: CurrencyForId(editFormData.value.receivedCurrency),
                receivedAmount: editFormData.value.receivedAmount * 100, // 转为分单位
                receivedTime: editFormData.value.receivedTime,
                receivedRemark: editFormData.value.receivedRemark || ''
            }
        });

        if (result.code === 200) {
            ElMessage.success('编辑提交成功');
            getlist();
            closeEditForm();
        } else {
            ElMessage.error(result.msg || '提交失败');
        }
    } catch (error) {
        console.error('编辑提交请求异常：', error);
        ElMessage.error('表单验证失败，请检查数据格式');
    }
};

// 2.6 辅助功能
// 图片预览
const previewImage = (imageUrl) => {
    if (!imageUrl) return;

    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.style.maxWidth = '80vw';
    imageElement.style.maxHeight = '80vh';
    imageElement.style.objectFit = 'contain';

    const viewer = document.createElement('div');
    viewer.style.position = 'fixed';
    viewer.style.top = '0';
    viewer.style.left = '0';
    viewer.style.width = '100vw';
    viewer.style.height = '100vh';
    viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    viewer.style.display = 'flex';
    viewer.style.justifyContent = 'center';
    viewer.style.alignItems = 'center';
    viewer.style.zIndex = '9999';
    viewer.appendChild(imageElement);

    // 点击关闭预览
    viewer.addEventListener('click', () => {
        document.body.removeChild(viewer);
    });

    document.body.appendChild(viewer);
};

// 驳回理由悬浮提示
const handleMouseEnter = (e, content) => {
    if (!content) return;

    showTooltip.value = true;
    tooltipContent.value = content;
    handleMouseMove(e);
};

const handleMouseLeave = () => {
    showTooltip.value = false;
    tooltipContent.value = '';
};

const handleMouseMove = (e) => {
    // 提示框显示在鼠标左侧，避免遮挡
    tooltipLeft.value = e.clientX - 210;
    tooltipTop.value = e.clientY - 10;
};

// 2.7 基础数据加载（初始化）
// 获取管理员信息
const getAdminData = async () => {
    try {
        const result = await API({ url: '/admin/userinfo', data: {} });
        adminData.value = result;

        // 超级管理员判断（仅用于角色切换权限）
        if (adminData.value.roleId === 2) {
            superAdmin.value = true;
            // 管理员所属地区提示
            if (adminData.value.markets === '总部' || adminData.value.markets === '研发部') {
                ElMessageBox.alert(
                    '管理员账号仅显示所属地区的财务数据，请确认地区设置',
                    '温馨提示',
                    { type: 'warning' }
                );
            }
        }
    } catch (error) {
        console.error('管理员信息获取失败：', error);
        ElMessage.error('管理员信息加载异常');
    }
};

// 获取活动列表
const getActivitys = async () => {
    try {
        const result = await API({ url: '/cashCollection/getActivityList', data: {} });
        if (result.code === 200) {
            activityList.value = result.data;
        } else {
            ElMessage.error('活动列表加载失败');
        }
    } catch (error) {
        console.error('活动列表获取失败：', error);
        ElMessage.error('活动数据加载异常');
    }
};

// 2.8 节流函数（防止重复提交）
const throttledhandelAuditReject = _.throttle(handelAuditReject, 3000, { trailing: false });
const throttledsubmitEditForm = _.throttle(submitEditForm, 3000, { trailing: false });

// 2.9 页面初始化
onMounted(async () => {
    await getAdminData();
    await getActivitys();
    // 初始化加载地区财务订单数据
    await getlist();

    // 菜单权限校验（确保地区财务权限）
    if (!hasMenuPermission(menuTree.value, 78)) {
        ElMessageBox.alert(
            '您暂无地区财务操作权限，请联系管理员',
            '权限提示',
            { type: 'error' }
        ).then(() => {
            window.history.back();
        });
    }
});

// 2.10 未使用函数占位（避免报错）
const handleCurrencyChange = () => { };
const beforeUpload = () => true;
const handelImgErr = () => { };
const handleImageChange = () => { };
const customUpload = () => { };
const handleDatePickerChange = () => { };
const disabledDate = () => false;
const handleSortChange = () => { };
const handlePagination = (type, val) => {
    if (type === 'size') pageInfo.value.pageSize = val;
    else pageInfo.value.pageNum = val;
    getlist();
};
</script>

<style scoped lang="scss">
// 地区财务界面样式优化：移除客服/总部相关样式，保留核心样式
.content {
    height: 100%;
    width: 80vw;
    margin: 0 auto;
    padding: 1vh 0;

    // 搜索卡片样式
    .div-card1 {
        .card1 {
            background: #F3FAFE;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

            .row {
                height: auto;
                width: 100%;
                display: flex;
                align-items: center;
                margin-bottom: 1vh;
                min-height: 40px;

                .rowItem {
                    display: flex;
                    align-items: center;
                    margin-right: 1.5vw;
                    width: auto;

                    el-text {
                        min-width: 60px;
                        margin-right: 0.5vw;
                        color: #333;
                        font-weight: 500;
                    }

                    el-input,
                    el-select,
                    el-cascader {
                        min-width: 160px;
                    }
                }

                .buttons {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 10px;
                }
            }
        }
    }

    // 数据展示卡片样式
    .div-card2 {
        margin-top: 1.5vh;

        .card2 {
            background: #F3FAFE;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

            // 标签页样式
            .btns {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1vh 1vw;
                border-bottom: 1px solid #E5EBFE;

                .tabs {
                    .btnItem {
                        margin-right: 0.5vw;
                        border-radius: 4px;
                        padding: 0.3vh 1vw;
                        font-size: 0.9vw;

                        &:hover {
                            opacity: 0.9;
                        }
                    }
                }

                .btnAdd {
                    display: none; // 隐藏客服的添加收款按钮
                }
            }

            // 表格样式
            .table {
                margin: 1vh 1vw;
                overflow: hidden;

                .el-table {
                    border: none;

                    .el-table__header th {
                        background: #E5EBFE;
                        color: #2741DE;
                        font-weight: 500;
                    }

                    .el-table__body tr {
                        background: #F3FAFE;

                        &:hover>td {
                            background: #EEF3FF !important;
                        }
                    }

                    .el-table-column {

                        &[label="序号"],
                        &[label="Homily ID"],
                        &[label="姓名"] {
                            background: #F3FAFE;
                            z-index: 1;
                        }

                        &[label="操作"] {
                            el-link {
                                color: #2741DE;
                                cursor: pointer;

                                &:hover {
                                    color: #1A30B9;
                                    text-decoration: underline;
                                }
                            }
                        }
                    }

                    // 驳回理由悬浮提示
                    .ellipsis-container {
                        .ellipsis-text {
                            color: #333;
                            cursor: pointer;

                            &:hover {
                                color: #2741DE;
                            }
                        }

                        .custom-tooltip {
                            position: fixed;
                            z-index: 9999;
                            padding: 8px 12px;
                            width: 200px;
                            background-color: #fff;
                            color: #333;
                            border: 1px solid #E5EBFE;
                            border-radius: 4px;
                            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                            max-height: 300px;
                            overflow-y: auto;
                            font-size: 14px;
                            line-height: 1.5;
                        }
                    }
                }
            }

            // 分页样式
            .pagination {
                padding: 1vh 1vw;
                text-align: right;

                .el-pagination {
                    .el-pager li {
                        &.active {
                            background: #2741DE;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    // 审核弹窗样式
    :deep(.adddialog) {
        background-color: #F3FAFE !important;
        border-radius: 8px;

        .addForm {
            padding: 1.5vh 2vw;

            .el-form-item {
                margin-bottom: 1.5vh;

                &:last-of-type {
                    margin-bottom: 0;
                }

                .el-form-item__label {
                    color: #333;
                    font-weight: 500;
                    min-width: 80px;
                }

                .pic {
                    display: flex;
                    align-items: center;

                    .uploader {
                        height: 80px;
                        width: 80px;
                        border: 1px dashed #DCDFE6;

                        .el-upload {
                            height: 100%;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }

                    .picText {
                        margin-left: 1vw;
                        color: #999;
                        font-size: 12px;
                    }
                }
            }

            .dialog-footer {
                display: flex;
                justify-content: center;
                gap: 1vw;
                padding-top: 1.5vh;

                button {
                    padding: 0.5vh 1.5vw;
                    border-radius: 4px;

                    &:first-of-type {
                        background: #7E91FF;
                        border: none;
                        color: #fff;
                    }

                    &:last-of-type {
                        background: #2741DE;
                        border: none;
                        color: #fff;
                    }
                }
            }
        }
    }

    // 编辑弹窗样式
    :deep(.editdialog) {
        background-color: #F3FAFE !important;
        border-radius: 8px;
        width: 60vw !important;

        .content {
            display: flex;
            gap: 2vw;
            padding: 1.5vh 2vw;

            .left,
            .right {
                flex: 1;
            }

            .editForm,
            .editFormRighrt {
                .el-form-item {
                    margin-bottom: 1.5vh;

                    .el-form-item__label {
                        color: #333;
                        font-weight: 500;
                        min-width: 80px;
                    }
                }
            }

            .right {
                .editBtns {
                    display: flex;
                    justify-content: center;
                    gap: 1vw;
                    margin-top: 2vh;

                    .editBtn1,
                    .editBtn2 {
                        padding: 0.5vh 1.5vw;
                        border-radius: 4px;
                        border: none;
                        color: #fff;

                        .txt {
                            font-size: 14px;
                        }
                    }

                    .editBtn1 {
                        background: #7E91FF;
                    }

                    .editBtn2 {
                        background: #2741DE;
                    }
                }
            }
        }
    }
}

// 全局样式修复
:deep(.el-date-editor) {
    width: 100%;
}

:deep(.el-select-dropdown) {
    max-height: 200px;
}

:deep(.el-cascader-panel) {
    max-height: 200px;
}
</style>