Selaa lähdekoodia

feat: 新增提款页面统计数据

叶静 2 viikkoa sitten
vanhempi
sitoutus
7be14f393c

+ 130 - 9
src/app/shop/admin/finance/withdraw/index.vue

@@ -4,7 +4,7 @@
       <!-- 简化搜索组件 -->
       <div class="search-container">
         <sa-search-simple key="withdraw-search" :searchFields="searchFields" :defaultValues="defaultSearchValues"
-          v-model="currentSearchParams" @search="handleSearch" @reset="handleReset" />
+          v-model="currentSearchParams" @search="handleSearch" @reset="handleReset" :defaultExpand="true" />
       </div>
       <!-- 状态Tab切换 -->
       <el-tabs class="sa-tabs" v-model="currentStatus" @tab-change="handleTabChange">
@@ -16,6 +16,29 @@
         <el-tab-pane :label="t('modules.withdraw.failed')" name="5"></el-tab-pane>
         <el-tab-pane :label="t('modules.withdraw.timeout')" name="6"></el-tab-pane>
       </el-tabs>
+      <!-- 统计数据展示 -->
+      <div class="statistics-container">
+        <div class="stat-item">
+          <div class="stat-label">{{ t('modules.withdraw.orderNum') }}</div>
+          <div class="stat-value">{{ statistics.orderNum || 0 }}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">{{ t('modules.withdraw.orderAmount') }}</div>
+          <div class="stat-value">৳{{ statistics.orderAmount || 0 }}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">{{ t('modules.withdraw.successOrderNum') }}</div>
+          <div class="stat-value">{{ statistics.successNum || 0 }}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">{{ t('modules.withdraw.successAmount') }}</div>
+          <div class="stat-value">৳{{ statistics.successAmount || 0 }}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">{{ t('modules.withdraw.successRate') }}</div>
+          <div class="stat-value">{{ statistics.successRate || 0 }}%</div>
+        </div>
+      </div>
       <div class="sa-title sa-flex sa-row-between">
         <div class="label sa-flex">{{ t('modules.withdraw.title') }}</div>
         <div>
@@ -149,6 +172,25 @@ const exportLoading = ref(false);
 const channelList = ref([]);
 const channelLoading = ref(false);
 
+// 统计数据
+const statistics = ref({
+  orderNum: 0,
+  orderAmount: 0,
+  successNum: 0,
+  successAmount: 0,
+  successRate: 0
+});
+
+// 获取当天日期范围
+function getTodayRange() {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, '0');
+  const day = String(today.getDate()).padStart(2, '0');
+  const dateStr = `${year}-${month}-${day}`;
+  return [dateStr + ' 00:00:00', dateStr + ' 23:59:59'];
+}
+
 // 搜索字段配置 - 使用计算属性以支持语言切换
 const searchFields = computed(() => ({
   userName: {
@@ -227,7 +269,7 @@ const defaultSearchValues = reactive({
   methodName: '',
   channel: '',
   timeType: 1, // 默认下单时间
-  date_range: [],
+  date_range: getTodayRange(), // 默认当天
 });
 // 列表
 const table = reactive({
@@ -271,10 +313,21 @@ async function getData(page, searchParams = {}) {
     const { code, data } = await api.withdraw.list(params, false);
 
     if (code == '200') {
-      table.data = data.list || [];
-      pageData.page = data.pageNum || 1;
-      pageData.size = data.pageSize || 20;
-      pageData.total = data.total || 0;
+      // 适配新的数据结构
+      const listData = data.list?.list || data.list || [];
+      table.data = listData;
+      pageData.page = data.list?.pageNum || data.pageNum || 1;
+      pageData.size = data.list?.pageSize || data.pageSize || 20;
+      pageData.total = data.list?.total || data.total || 0;
+
+      // 更新统计数据
+      statistics.value = {
+        orderNum: data.orderNum || 0,
+        orderAmount: data.orderAmount || 0,
+        successNum: data.successNum || 0,
+        successAmount: data.successAmount || 0,
+        successRate: data.successRate || 0
+      };
     }
   } catch (error) {
     console.error('获取数据失败:', error);
@@ -315,8 +368,17 @@ const handleSearch = (searchParams) => {
 
 // 重置处理
 const handleReset = () => {
-  // 手动清空搜索参数
-  currentSearchParams.value = {};
+  // 清空搜索参数,包括时间范围
+  currentSearchParams.value = {
+    userName: '',
+    userPhone: '',
+    orderNo: '',
+    accountType: '',
+    methodName: '',
+    channel: '',
+    timeType: 1,
+    date_range: [], // 重置时清空时间范围
+  };
   // 获取当前tab的状态参数
   let statusParams = {};
   if (currentStatus.value !== 'all') {
@@ -439,7 +501,9 @@ async function getChannelList() {
 
 onMounted(() => {
   getChannelList();
-  getData();
+  // 初始化时使用默认搜索参数(包含默认时间范围)
+  currentSearchParams.value = { ...defaultSearchValues };
+  getData(1, currentSearchParams.value);
 });
 </script>
 <style lang="scss" scoped>
@@ -453,5 +517,62 @@ onMounted(() => {
       height: 100%;
     }
   }
+
+  // 统计数据容器样式
+  .statistics-container {
+    display: flex;
+    gap: 16px;
+    margin: 14px 0;
+    padding: 14px 16px;
+    background: linear-gradient(to right, #f8f9fa, #ffffff);
+    border-radius: 6px;
+    border: 1px solid #e4e7ed;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+    .stat-item {
+      flex: 1;
+      text-align: center;
+      padding: 10px 12px;
+      background: #ffffff;
+      border-radius: 4px;
+      border-left: 3px solid #409eff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      transition: all 0.2s ease;
+
+      &:hover {
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+        transform: translateY(-1px);
+      }
+
+      &:nth-child(2) {
+        border-left-color: #67c23a;
+      }
+
+      &:nth-child(3) {
+        border-left-color: #e6a23c;
+      }
+
+      &:nth-child(4) {
+        border-left-color: #f56c6c;
+      }
+
+      &:nth-child(5) {
+        border-left-color: #909399;
+      }
+
+      .stat-label {
+        font-size: 12px;
+        color: #606266;
+        margin-bottom: 6px;
+        font-weight: 500;
+      }
+
+      .stat-value {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+  }
 }
 </style>

+ 5 - 0
src/locales/en-US/index.json

@@ -923,6 +923,11 @@
       "accountType": "Withdraw Type",
       "amount": "Withdraw Amount",
       "fee": "Withdraw Fee",
+      "orderNum": "Total Orders",
+      "orderAmount": "Total Amount",
+      "successOrderNum": "Success Orders",
+      "successAmount": "Success Amount",
+      "successRate": "Success Rate",
       "receivingBank": "Receiving Bank",
       "receivingAccountName": "Receiving Account Name",
       "receivingAccount": "Receiving Account",

+ 5 - 0
src/locales/zh-CN/index.json

@@ -864,6 +864,11 @@
       "accountType": "提款类型",
       "amount": "提款金额",
       "fee": "手续费",
+      "orderNum": "提款订单",
+      "orderAmount": "提款金额",
+      "successOrderNum": "提款成功订单",
+      "successAmount": "提款成功金额",
+      "successRate": "成功率",
       "receivingBank": "收款银行",
       "receivingAccountName": "收款账户名称",
       "receivingAccount": "收款账户",

+ 6 - 1
src/sheep/components/sa-table/sa-search/sa-search-simple.global.vue

@@ -113,12 +113,17 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  // 默认是否展开
+  defaultExpand: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['search', 'reset', 'update:modelValue']);
 
 const formRef = ref();
-const isExpanded = ref(false);
+const isExpanded = ref(props.defaultExpand);
 const isInitialized = ref(false);
 
 // 表单数据