1278715334@163.com

src/pages/subscriptions/index.vue

@@ -191,11 +191,14 @@
         class="usage-dialog"
       >
         <div v-if="selectedSubscription" class="space-y-6">
-          <div class="grid grid-cols-2 gap-6">
-            <!-- <div class="usage-stat-card">
-              <div class="usage-stat-value">{{ selectedSubscription.api_used || 0 }}</div>
-              <div class="usage-stat-label">已使用API调用次数</div>
-            </div> -->
+          <div v-if="loadingUsage" class="flex justify-center items-center py-8">
+            <el-loading />
+          </div>
+          <div v-else class="grid grid-cols-2 gap-6">
+            <div class="usage-stat-card">
+              <div class="usage-stat-value">{{ usageData?.api_used || 0 }}</div>
+              <div class="usage-stat-label">API调用次数</div>
+            </div>
             <div class="usage-stat-card">
               <div class="usage-stat-value">¥{{ formatPrice(selectedSubscription.price) }}</div>
               <div class="usage-stat-label">订阅价格</div>
@@ -235,6 +238,8 @@ const currentPage = ref(1)
 const pageSize = ref(10)
 const usageDialogVisible = ref(false)
 const selectedSubscription = ref(null)
+const usageData = ref(null)
+const loadingUsage = ref(false)
 
 // 统计数据
 const stats = ref({
@@ -376,9 +381,24 @@ const handleViewProduct = (product) => {
 }
 
 // 查看使用情况
-const handleViewUsage = (subscription) => {
+const handleViewUsage = async (subscription) => {
   selectedSubscription.value = subscription
   usageDialogVisible.value = true
+  usageData.value = null
+  
+  // 加载使用情况数据
+  if (subscription && subscription.id) {
+    loadingUsage.value = true
+    try {
+      const response = await subscriptionApi.getMySubscriptionUsage(subscription.id)
+      usageData.value = response.data
+    } catch (error) {
+      console.error('加载使用情况失败:', error)
+      ElMessage.error('加载使用情况失败')
+    } finally {
+      loadingUsage.value = false
+    }
+  }
 }
 
 // 跳转到在线调试页面