拆分页面，下一不一定提前拆

src/router/index.js

@@ -311,27 +311,27 @@ const routes = [
                             {
                                 path: 'receiveService',
                                 name: "receiveService",
-                                component: () => import("../views/moneyManage/receiveDetail/receiveDetail.vue"),
+                                component: () => import("../views/moneyManage/receiveDetail/receiveService.vue"),
                                 meta: { permissionId: 60 }
                             },
                             // 地区负责人页面
                             {
                                 path: 'receiveManager',
                                 name: "receiveManager",
-                                component: () => import("../views/moneyManage/receiveDetail/receiveDetail.vue"),
+                                component: () => import("../views/moneyManage/receiveDetail/receiveManage.vue"),
                                 meta: { permissionId: [67, 79] }
                             },
                             {//地区财务
                                 path: 'receiveFinance',
                                 name: "receiveFinance",
-                                component: () => import("../views/moneyManage/receiveDetail/receiveDetail.vue"),
+                                component: () => import("../views/moneyManage/receiveDetail/receiveFinance.vue"),
                                 meta: { permissionId: [67, 79] }
                             },
                             //总部管理员及财务
                             {
                                 path: 'receiveHeader',
                                 name: "receiveHeader",
-                                component: () => import("../views/moneyManage/receiveDetail/receiveDetail.vue"),
+                                component: () => import("../views/moneyManage/receiveDetail/receiveHead.vue"),
                                 meta: { permissionId: 91 }
                             },
                         ]

src/views/moneyManage/receiveDetail/receiveHead.vue

@@ -0,0 +1,819 @@
+<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 === '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-group>
+          </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 == '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="备注" 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 fixed="right" label="操作" width="120px"
+                             v-if="activeTab != 'reject'">
+              <template #default=scope>
+                <el-link
+                    v-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="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; ">
+                <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="editFormRight"
+                   label-width="4.5vw" label-position="left">
+            <el-form-item label="到账货币">
+              <CurrencySelect v-model="editFormData.receivedCurrency" :items="customOptions"
+                              placeholder="请选择到账货币"/>
+            </el-form-item>
+            <el-form-item label="到账金额" prop="receivedAmount">
+              <el-input v-model="editFormData.receivedAmount" placeholder="请输入到账金额"/>
+            </el-form-item>
+            <el-form-item label="手续费" prop="handlingCharge">
+              <el-input v-model="editFormData.handlingCharge" placeholder="请输入手续费"/>
+            </el-form-item>
+            <el-form-item label="到账时间">
+              <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>
+
+    <!-- 查看驳回理由弹窗 -->
+    <el-dialog v-model="showRejectReasonDialog" title="驳回理由" width="30vw" :before-close="closeRejectReasonDialog">
+      <el-form label-width="80px">
+        <el-form-item label="驳回原因">
+          <el-input type="textarea" v-model="rejectReasonContent" disabled :rows="5" placeholder="无驳回理由"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="closeRejectReasonDialog">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {ref, 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 {useAdminStore} from '@/store/index.js'
+import {hasMenuPermission} from '@/utils/menuTreePermission.js'
+import _ from 'lodash'
+import {editFormRule} from './utils/recriveFormRules.js'
+import {productList, MarketNameForId, CurrencyForId, marketList} from './utils/staticData.js'
+import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue'
+import {Plus} from '@element-plus/icons-vue';
+
+// 状态管理
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
+const tableData = ref([])
+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('pass')
+const HQcaiwu = ref(true)
+const superAdmin = ref(false)
+const editFormData = ref({})
+const ifOnline = ref(false)
+const editFormisible = ref(false)
+const editFormRef = ref(null)
+const isEditGold = ref(false)
+const showRejectReasonDialog = ref(false)
+const rejectReasonContent = ref('')
+const pageInfo = ref({pageSize: 10, pageNum: 1})
+const total = ref(0)
+const uploadRef = ref()
+const customOptions = ref(['美元(USD)', '港币(HKD)', '新币(SGD)', '马币(MYR)', '泰铢(THB)', '加币(CAD)', '越南盾(VDN)', '韩元(KRW)'])
+const paytypeList = ref(["Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款", "银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal"])
+const activityList = ref([])
+const adminData = ref({})
+
+// 核心方法
+const search = () => {
+  getlist()
+  ElMessage.success('查询成功')
+}
+const reset = () => {
+  searchData.value = {}
+  getTime.value = []
+  getlist()
+}
+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]
+    }
+    if (searchData.value.paymentCurrency) {
+      payCurrencySelect = CurrencyForId(searchData.value.paymentCurrency)
+    }
+    const cashRoleId = '2'
+    if (activeTab.value === 'pass') {
+      searchData.value.status = 13
+    } else if (activeTab.value === 'done') {
+      searchData.value.status = 46
+    }
+    const result = await request({
+      url: '/cashCollection/selectCollection',
+      data: {
+        ...pageInfo.value,
+        cashCollection: {
+          ...searchData.value,
+          submitterId: adminData.value.id,
+          receivedMarket: MarketNameForId(adminData.value.markets),
+          cashRoleId: cashRoleId,
+          paymentCurrency: payCurrencySelect,
+          submitterMarket: adminData.value.markets,
+          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.log(error);
+  }
+}
+
+const navigateTo = async (tab) => {
+  if (tab === 'pass') {
+    activeTab.value = 'pass'
+    await getlist()
+  } else if (tab === 'done') {
+    activeTab.value = 'done'
+    await getlist()
+  }
+}
+
+const EditifGold = () => {
+  isEditGold.value = editFormData.value.goodsName === '金币充值'
+}
+const openEditForm = (row) => {
+  editFormData.value = {...row}
+  EditifGold()
+  ifOnline.value = row.status === 3
+  editFormisible.value = true
+}
+const closeEditForm = () => {
+  editFormisible.value = false
+  editFormData.value = {}
+  getlist()
+}
+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()
+    }
+  } catch (error) {
+    ElMessage.error('请检查表单数据格式');
+  }
+}
+
+const openRejectReason = (reason) => {
+  rejectReasonContent.value = reason || '无驳回理由'
+  showRejectReasonDialog.value = true
+}
+const closeRejectReasonDialog = () => {
+  showRejectReasonDialog.value = false
+  rejectReasonContent.value = ''
+}
+
+const previewImage = (imageUrl) => {
+  const imageElement = document.createElement('img');
+  imageElement.src = imageUrl;
+  imageElement.style.maxWidth = '80vw';
+  imageElement.style.maxHeight = '80vh';
+  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.style.overflow = 'auto';
+  viewer.appendChild(imageElement);
+  document.body.appendChild(viewer);
+  viewer.addEventListener('click', () => {
+    document.body.removeChild(viewer);
+  });
+}
+
+const handlePagination = (type, val) => {
+  if (type === 'size') {
+    pageInfo.value.pageSize = val
+  } else {
+    pageInfo.value.pageNum = val
+  }
+  getlist()
+}
+
+const beforeUpload = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
+    ElMessage.error('图片必须是jpg或png类型!')
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片大小不能超过 2MB!')
+    return false
+  }
+  return true
+}
+const handelImgErr = (err) => {
+  ElMessage.error("图片加载失败")
+}
+const handleImageChange = (file) => {
+  uploadRef.value.submit()
+}
+const customUpload = async (options) => {
+  try {
+    const formData = new FormData()
+    formData.append('file', options.file)
+    const response = await API({
+      url: 'https://api.homilychart.com/hljw/api/aws/upload',
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    if (response.code === 200 && response.data) {
+      ElMessage.success('上传成功')
+    } else {
+      options.onError(response)
+      ElMessage.error(response.msg || '上传失败')
+    }
+  } catch (error) {
+    ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
+  }
+}
+
+const getAdminData = async function () {
+  try {
+    const result = await API({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+  } catch (error) {
+    console.log('管理员信息获取失败', error)
+  }
+}
+const getActivitys = async function () {
+  try {
+    const result = await API({
+      url: '/cashCollection/getActivityList',
+      data: {}
+    })
+    if (result.code === 200) {
+      activityList.value = result.data
+    } else {
+      ElMessage.error('活动列表获取失败')
+    }
+  } catch (error) {
+    console.log('活动列表请求失败', error)
+  }
+}
+
+const throttledsubmitEditForm = _.throttle(submitEditForm, 5000, {
+  trailing: false
+})
+
+onMounted(async function () {
+  await getAdminData()
+  await getActivitys()
+  if (adminData.value.roleId === 2) {
+    superAdmin.value = true
+  }
+  await getlist()
+})
+
+// 未使用方法占位
+const handleSortChange = () => {}
+const handleDatePickerChange = () => {}
+const disabledDate = () => {}
+</script>
+
+<style scoped lang="scss">
+.content {
+  height: 100%;
+  width: 80vw;
+
+  .card1 {
+    background: #F3FAFE;
+    width: 100%;
+
+    .row {
+      height: 4vh;
+      width: 80vw;
+      display: flex;
+      min-height: 40px;
+
+      .rowItem {
+        display: flex;
+        width: 15vw;
+        align-items: center;
+        justify-content: center;
+        margin-right: 0.5vw;
+      }
+
+      .buttons {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .div-card2 {
+    width: 100%;
+    margin-top: 2vh;
+
+    .card2 {
+      background: #E7F4FD;
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 10px;
+
+      .tabs {
+        min-width: 300px;
+
+        .btnItem {
+          margin-left: 10px;
+          border-radius: 5px;
+        }
+      }
+    }
+
+    .table {
+      margin: 10px;
+      border-radius: 20px;
+
+      .ellipsis-container {
+        position: relative;
+        width: 100%;
+
+        .ellipsis-text {
+          display: inline-block;
+          width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          cursor: pointer;
+        }
+
+        .custom-tooltip {
+          position: fixed;
+          z-index: 9999;
+          padding: 8px 12px;
+          width: 200px;
+          background-color: #E4F0FC;
+          color: #333333;
+          border: 1px solid #e5e7eb;
+          border-radius: 4px;
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          min-height: 30px;
+          max-height: 300px;
+          overflow-y: auto;
+          font-size: 14px;
+          line-height: 1.5;
+        }
+      }
+    }
+
+    .pagination {
+      margin-top: 10px;
+      padding: 10px 10px;
+    }
+  }
+
+  :deep(.editdialog) {
+    min-width: 990px;
+    background-color: #F3FAFE !important;
+    margin-top: 8vh;
+    border-radius: 8px;
+
+    .content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+
+      .left {
+        min-width: 500px;
+      }
+
+      .right {
+        flex: 1;
+
+        .editFormRight {
+          padding: 0 60px 0 40px;
+
+          .el-date-editor {
+            display: flex;
+            flex: 1;
+          }
+        }
+
+        .editBtns {
+          display: flex;
+          justify-content: center;
+          margin-top: 60px;
+
+          .txt {
+            color: #f3fafe;
+            text-align: center;
+            font-family: "PingFang SC";
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 22px;
+          }
+
+          .editBtn1 {
+            min-width: 80px;
+            padding: 5px 12px;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            border-radius: 4px;
+            background: #7E91FF;
+            border: none;
+            box-shadow: 0 0 4px 0 #00000040;
+          }
+
+          .editBtn2 {
+            display: flex;
+            width: 80px;
+            min-width: 80px;
+            padding: 5px 12px;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            border-radius: 4px;
+            background: #2741DE;
+            border: none;
+            box-shadow: 0 0 4px 0 #00000040;
+            margin-left: 60px;
+          }
+        }
+      }
+    }
+
+    .editForm {
+      padding: 0 60px 1vh 60px;
+
+      .el-date-editor {
+        display: flex;
+        flex: 1;
+      }
+
+      .pic {
+        display: flex;
+        align-items: center;
+
+        .uploader {
+          height: 80px;
+          width: 80px;
+
+          .el-upload {
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        .picText {
+          color: #999999;
+          font-family: "PingFang SC";
+          font-size: 10px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  :deep(.el-table__header-wrapper),
+  :deep(.el-table__body-wrapper),
+  :deep(.el-table__cell),
+  :deep(.el-table__body td) {
+    background-color: #F3FAFE !important;
+  }
+
+  :deep(.el-table__header th) {
+    background-color: #F3FAFE !important;
+  }
+
+  :deep(.el-table__row:hover > .el-table__cell) {
+    background-color: #E5EBFE !important;
+  }
+
+  .reject-reason-box {
+    --el-message-box-height: 500px;
+  }
+
+  .reject-reason-box .el-message-box__content {
+    max-height: 350px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+  }
+}
+</style>