fix: 优化界面以及更新接口

src/pages/agent-system/commission-center/index.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { getCommissionSummary, getCommissionRecords, getCommissionStats } from '@/api/commission'
-import type { CommissionSummary, CommissionRecord, CommissionStats } from '@/api/commission'
+import { getFundSummary, getCommissionRecords, getCommissionStats } from '@/api/commission'
+import type { FundSummary, CommissionRecord, CommissionStats } from '@/api/commission'
 import SimplePicker from '@/components/SimplePicker.vue'
 
 // 佣金概览
-const commissionSummary = ref<CommissionSummary | null>(null)
+const commissionSummary = ref<FundSummary | null>(null)
+
+// 店铺ID (从登录信息获取)
+const shopId = ref<number>(0)
+
+// 从本地存储获取用户信息
+function getUserInfo() {
+  const userInfo = uni.getStorageSync('user_info')
+  return userInfo || null
+}
 
 // 佣金明细列表
 const commissionRecords = ref<CommissionRecord[]>([])
@@ -92,6 +101,12 @@ function formatTime(time: string) {
 
 // 页面加载
 onMounted(() => {
+  // 从登录信息获取 shop_id
+  const userInfo = getUserInfo()
+  if (userInfo?.shop_id) {
+    shopId.value = userInfo.shop_id
+  }
+
   loadCommissionSummary()
   loadCommissionStats()
   loadCommissionRecords()
@@ -100,7 +115,7 @@ onMounted(() => {
 // 加载佣金概览
 async function loadCommissionSummary() {
   try {
-    const summary = await getCommissionSummary()
+    const summary = await getFundSummary()
     commissionSummary.value = summary
   }
   catch (error) {
@@ -110,8 +125,10 @@ async function loadCommissionSummary() {
 
 // 加载佣金统计
 async function loadCommissionStats() {
+  if (!shopId.value) return
+
   try {
-    const stats = await getCommissionStats()
+    const stats = await getCommissionStats(shopId.value)
     commissionStats.value = stats
   }
   catch (error) {
@@ -121,6 +138,8 @@ async function loadCommissionStats() {
 
 // 加载佣金明细
 async function loadCommissionRecords() {
+  if (!shopId.value) return
+
   loadingRecords.value = true
 
   try {
@@ -152,7 +171,7 @@ async function loadCommissionRecords() {
       }
     }
 
-    const response = await getCommissionRecords(params)
+    const response = await getCommissionRecords(shopId.value, params)
 
     if (page.value === 1) {
       commissionRecords.value = response.items || []
@@ -214,217 +233,155 @@ function refreshList() {
 </script>
 
 <template>
-  <view class="bg-[#fafafa] min-h-screen pb-safe">
-    <!-- 加载中 -->
+  <view class="bg-[var(--bg-page)] min-h-screen pb-safe">
     <view v-if="loading" class="pt-20 center">
-      <i class="i-mdi-loading animate-spin text-40px text-[#999]" />
+      <text class="text-14px text-[var(--text-secondary)]">加载中...</text>
     </view>
 
-    <!-- 内容区域 -->
-    <view v-else class="px-4 pt-4">
-      <!-- 佣金概览卡片 -->
-      <view v-if="commissionSummary" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3">
-        <view class="flex items-center justify-between mb-3">
-          <view class="flex items-center gap-2">
-            <i class="i-mdi-currency-cny text-24px text-[#ff6700]" />
-            <text class="text-15px font-600 text-[#212121]">
-              佣金概览
-            </text>
-          </view>
-        </view>
+    <view v-else>
+      <view class="bg-brand px-4 py-3 mx-4 mt-4 rounded-12px">
+        <text class="text-11px text-white/60">可提现佣金</text>
+        <text class="text-24px font-700 text-white block mt-1">
+          {{ commissionSummary ? formatAmount(commissionSummary.available_commission) : '--' }}
+        </text>
+      </view>
 
-        <view class="grid grid-cols-2 gap-3">
-          <view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
-            <text class="text-11px text-[#999] block mb-1">可提现</text>
-            <text class="text-18px font-700 text-[#ff6700]">
-              {{ formatAmount(commissionSummary.available_commission) }}
+      <view class="bg-[var(--bg-container)] rounded-12px p-4 mx-4 mt-3">
+        <view class="grid grid-cols-3 gap-4">
+          <view class="text-center">
+            <text class="text-11px text-[var(--text-tertiary)] block">累计佣金</text>
+            <text class="text-16px font-700 text-[var(--text-primary)] mt-1">
+              {{ commissionSummary ? formatAmount(commissionSummary.total_commission) : '--' }}
             </text>
           </view>
-          <view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
-            <text class="text-11px text-[#999] block mb-1">累计佣金</text>
-            <text class="text-18px font-700 text-[#212121]">
-              {{ formatAmount(commissionSummary.total_commission) }}
+          <view class="text-center">
+            <text class="text-11px text-[var(--text-tertiary)] block">冻结</text>
+            <text class="text-16px font-700 text-[var(--text-tertiary)] mt-1">
+              {{ commissionSummary ? formatAmount(commissionSummary.frozen_commission) : '--' }}
             </text>
           </view>
-          <view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
-            <text class="text-11px text-[#999] block mb-1">冻结</text>
-            <text class="text-18px font-700 text-[#999]">
-              {{ formatAmount(commissionSummary.frozen_commission) }}
-            </text>
-          </view>
-          <view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
-            <text class="text-11px text-[#999] block mb-1">已提现</text>
-            <text class="text-18px font-700 text-[#52c41a]">
-              {{ formatAmount(commissionSummary.withdrawn_commission) }}
+          <view class="text-center">
+            <text class="text-11px text-[var(--text-tertiary)] block">已提现</text>
+            <text class="text-16px font-700 text-[#52c41a] mt-1">
+              {{ commissionSummary ? formatAmount(commissionSummary.withdrawn_commission) : '--' }}
             </text>
           </view>
         </view>
       </view>
 
-      <!-- 佣金统计卡片 -->
-      <view v-if="commissionStats" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3">
+      <view class="px-4 mt-4">
+        <text class="text-14px font-600 text-[var(--text-primary)] block mb-2">佣金统计</text>
+        <view class="bg-[var(--bg-container)] rounded-12px p-4">
+          <view class="flex items-center justify-between">
+            <text class="text-13px text-[var(--text-secondary)]">成本价差</text>
+            <view class="flex items-center gap-2">
+              <text class="text-14px font-600 text-[var(--text-primary)]">
+                {{ commissionStats ? formatAmount(commissionStats.cost_diff_amount) : '--' }}
+              </text>
+              <text class="text-11px text-[var(--text-tertiary)]">
+                {{ commissionStats ? (commissionStats.cost_diff_percent / 10).toFixed(1) + '%' : '--' }}
+              </text>
+            </view>
+          </view>
+          <view class="flex items-center justify-between mt-3">
+            <text class="text-13px text-[var(--text-secondary)]">一次性佣金</text>
+            <view class="flex items-center gap-2">
+              <text class="text-14px font-600 text-[var(--text-primary)]">
+                {{ commissionStats ? formatAmount(commissionStats.one_time_amount) : '--' }}
+              </text>
+              <text class="text-11px text-[var(--text-tertiary)]">
+                {{ commissionStats ? (commissionStats.one_time_percent / 10).toFixed(1) + '%' : '--' }}
+              </text>
+            </view>
+          </view>
+          <view class="flex items-center justify-between mt-3 pt-3 border-t border-[var(--border-secondary)]">
+            <text class="text-13px font-600 text-[var(--text-primary)]">总计</text>
+            <text class="text-16px font-700 text-brand">
+              {{ commissionStats ? formatAmount(commissionStats.total_amount) : '--' }}
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <view class="px-4 mt-4">
+        <text class="text-14px font-600 text-[var(--text-primary)] block mb-2">佣金明细</text>
+
         <view class="flex items-center gap-2 mb-3">
-          <i class="i-mdi-chart-pie text-20px text-[#ff6700]" />
-          <text class="text-15px font-600 text-[#212121]">
-            佣金统计
-          </text>
-        </view>
-
-        <view class="space-y-2">
-          <view class="flex items-center justify-between">
-            <text class="text-13px text-[#666]">成本价差</text>
-            <view class="flex items-center gap-2">
-              <text class="text-14px font-600 text-[#212121]">
-                {{ formatAmount(commissionStats.cost_diff_amount) }}
-              </text>
-              <text class="text-11px text-[#999]">
-                {{ (commissionStats.cost_diff_percent / 10).toFixed(1) }}%
-              </text>
-            </view>
-          </view>
-
-          <view class="flex items-center justify-between">
-            <text class="text-13px text-[#666]">一次性佣金</text>
-            <view class="flex items-center gap-2">
-              <text class="text-14px font-600 text-[#212121]">
-                {{ formatAmount(commissionStats.one_time_amount) }}
-              </text>
-              <text class="text-11px text-[#999]">
-                {{ (commissionStats.one_time_percent / 10).toFixed(1) }}%
-              </text>
-            </view>
-          </view>
-
-          <view class="pt-2 border-t-1px border-[#f5f5f5]">
-            <view class="flex items-center justify-between">
-              <text class="text-13px font-600 text-[#212121]">总计</text>
-              <text class="text-16px font-700 text-[#ff6700]">
-                {{ formatAmount(commissionStats.total_amount) }}
-              </text>
-            </view>
-            <text class="text-11px text-[#999] mt-1 block text-right">
-              共 {{ commissionStats.total_count }} 笔
-            </text>
+          <input
+            v-model="searchKeyword"
+            class="flex-1 h-40px bg-[var(--bg-container)] rounded-8px px-3 text-14px text-[var(--text-primary)]"
+            placeholder="搜索 ICCID / 虚拟号 / 订单号"
+            placeholder-class="text-[var(--text-quaternary)]"
+            @confirm="handleSearch"
+          >
+          <view
+            class="px-4 h-40px bg-brand text-white text-14px rounded-8px flex items-center justify-center"
+            @click="handleSearch"
+          >
+            搜索
           </view>
         </view>
-      </view>
 
-      <!-- 搜索框 -->
-      <view class="mb-3">
-        <view class="bg-white rounded-12px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden">
-          <view class="flex items-center px-4 py-3 gap-2">
-            <i class="i-mdi-magnify text-20px text-[#999]" />
-            <input
-              v-model="searchKeyword"
-              class="flex-1 text-14px text-[#212121] placeholder:text-[#999]"
-              placeholder="搜索 ICCID / 虚拟号 / 订单号"
-              @confirm="handleSearch"
-            >
-            <view
-              v-if="searchKeyword"
-              class="ml-1 min-w-32px min-h-32px flex items-center justify-center"
-              @click="clearSearch"
-            >
-              <i class="i-mdi-close-circle text-18px text-[#999]" />
-            </view>
-            <view
-              class="px-4 py-2 bg-[#ff6700] text-white text-13px font-600 rounded-8px min-h-32px flex items-center justify-center"
-              @click="handleSearch"
-            >
-              搜索
-            </view>
+        <view class="flex items-center gap-2 mb-3">
+          <view class="flex-1 bg-[var(--bg-container)] rounded-8px px-3 h-40px flex items-center" @click="showSourcePicker = true">
+            <text class="flex-1 text-14px text-[var(--text-primary)]">{{ selectedSourceName }}</text>
+            <text class="text-12px text-[var(--text-tertiary)]">▼</text>
           </view>
         </view>
-      </view>
 
-      <!-- 筛选条件 -->
-      <view class="flex items-center gap-2 mb-3">
-        <!-- 佣金来源筛选 -->
-        <view class="flex-1 bg-white rounded-full px-4 py-2 flex items-center shadow-[0_2px_12px_rgba(0,0,0,0.06)]" @click="showSourcePicker = true">
-          <text class="flex-1 text-14px text-[#212121]">{{ selectedSourceName }}</text>
-          <i class="i-mdi-chevron-down text-18px text-[#999]" />
-        </view>
-      </view>
-
-      <!-- 佣金明细列表 -->
-      <view class="mb-3">
-        <view class="flex items-center justify-between mb-2 px-2">
-          <text class="text-14px font-600 text-[#212121]">
-            佣金明细
-          </text>
-          <text class="text-12px text-[#999]">
-            共 {{ total }} 条记录
-          </text>
+        <view class="flex items-center justify-between mb-3">
+          <text class="text-12px text-[var(--text-secondary)]">共 {{ total }} 条记录</text>
         </view>
 
         <view v-if="loadingRecords && page === 1" class="pt-10 center">
-          <i class="i-mdi-loading animate-spin text-40px text-[#999]" />
+          <text class="text-14px text-[var(--text-secondary)]">加载中...</text>
         </view>
 
         <view v-else-if="commissionRecords.length > 0" class="space-y-2">
           <view
             v-for="record in commissionRecords"
             :key="record.id"
-            class="bg-white rounded-12px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4"
+            class="bg-[var(--bg-container)] rounded-12px p-4"
           >
-            <view class="flex items-center justify-between mb-2">
+            <view class="flex items-center justify-between">
               <view class="flex items-center gap-2">
-                <i class="i-mdi-cash-plus text-20px text-[#ff6700]" />
-                <text class="text-14px font-600 text-[#212121]">
+                <text class="text-14px font-600 text-[var(--text-primary)]">
                   {{ getSourceText(record.commission_source) }}
                 </text>
+                <view
+                  :style="{
+                    backgroundColor: getStatusColor(record.status).bg,
+                    color: getStatusColor(record.status).text,
+                  }"
+                  class="px-2 py-0.5 rounded text-11px font-600"
+                >
+                  {{ getStatusText(record.status) }}
+                </view>
               </view>
-              <view
-                :style="{
-                  backgroundColor: getStatusColor(record.status).bg,
-                  color: getStatusColor(record.status).text,
-                }"
-                class="px-2 py-1 rounded-6px text-11px font-600"
-              >
-                {{ getStatusText(record.status) }}
-              </view>
-            </view>
-
-            <view class="flex items-center justify-between">
-              <text class="text-12px text-[#999]">
-                {{ formatTime(record.created_at) }}
-              </text>
-              <text class="text-18px font-700 text-[#ff6700]">
+              <text class="text-18px font-700 text-brand">
                 +{{ formatAmount(record.amount) }}
               </text>
             </view>
-
-            <view v-if="record.order_id" class="mt-2 pt-2 border-t-1px border-[#f5f5f5]">
-              <text class="text-11px text-[#999]">
-                订单ID: {{ record.order_id }}
-              </text>
+            <view class="flex items-center justify-between mt-2">
+              <text class="text-12px text-[var(--text-tertiary)]">{{ formatTime(record.created_at) }}</text>
+              <text v-if="record.order_id" class="text-11px text-[var(--text-tertiary)]">订单ID: {{ record.order_id }}</text>
             </view>
           </view>
 
-          <!-- 加载更多 -->
           <view v-if="commissionRecords.length < total" class="py-3 center">
-            <text v-if="loadingRecords" class="text-12px text-[#999]">
-              加载中...
-            </text>
-            <text v-else class="text-12px text-[#ff6700]" @click="loadMore">
-              加载更多
-            </text>
+            <text v-if="loadingRecords" class="text-12px text-[var(--text-secondary)]">加载中...</text>
+            <text v-else class="text-12px text-brand" @click="loadMore">加载更多</text>
           </view>
         </view>
 
-        <view v-else class="pt-10 center flex-col">
-          <i class="i-mdi-cash-remove text-60px text-[#ddd] mb-3" />
-          <text class="text-14px text-[#999]">
-            暂无佣金记录
-          </text>
+        <view v-else class="pt-10 center">
+          <text class="text-14px text-[var(--text-secondary)]">暂无佣金记录</text>
         </view>
       </view>
 
-      <!-- 底部留白 -->
-      <view class="h-8" />
+      <view class="h-16" />
     </view>
 
-    <!-- 佣金来源选择器 -->
     <SimplePicker
       v-model:show="showSourcePicker"
       :options="sourceOptions"