182878715334@163.com

src/pages/subscriptions/index.vue

@@ -131,7 +131,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作" width="320" fixed="right">
+          <el-table-column label="操作" width="400" fixed="right">
             <template #default="{ row }">
               <div class="flex items-center space-x-2">
                 <el-button
@@ -155,6 +155,13 @@
                 >
                   在线调试
                 </el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click="handleCancelSubscription(row)"
+                >
+                  取消订阅
+                </el-button>
               </div>
             </template>
           </el-table-column>
@@ -216,7 +223,7 @@ import { subscriptionApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const router = useRouter()
 
@@ -383,6 +390,50 @@ const goToApiDebugger = (product) => {
     })
   }
 }
+
+// 取消订阅
+const handleCancelSubscription = async (subscription) => {
+  if (!subscription || !subscription.id) {
+    ElMessage.error('订阅信息不完整')
+    return
+  }
+
+  try {
+    // 显示确认对话框
+    await ElMessageBox.confirm(
+      `确定要取消订阅 "${subscription.product?.name || '该产品'}" 吗？取消后将无法继续使用该产品的API服务。`,
+      '取消订阅确认',
+      {
+        confirmButtonText: '确定取消',
+        cancelButtonText: '我再想想',
+        type: 'warning',
+        dangerouslyUseHTMLString: false
+      }
+    )
+
+    // 用户确认后执行取消操作
+    loading.value = true
+    try {
+      await subscriptionApi.cancelMySubscription(subscription.id)
+      ElMessage.success('取消订阅成功')
+      // 重新加载订阅列表
+      await loadSubscriptions()
+      // 重新加载统计数据
+      await loadStats()
+    } catch (error) {
+      console.error('取消订阅失败:', error)
+      const errorMessage = error.response?.data?.message || error.message || '取消订阅失败'
+      ElMessage.error(errorMessage)
+    } finally {
+      loading.value = false
+    }
+  } catch (error) {
+    // 用户取消操作，不做任何处理
+    if (error !== 'cancel') {
+      console.error('取消订阅操作异常:', error)
+    }
+  }
+}
 </script>
 
 <style scoped>