From 74a99107825f77dbede6c704a5cc88e66f1678a9 Mon Sep 17 00:00:00 2001
From: Ygb <2694611394@qq.com>
Date: Wed, 16 Jul 2025 18:43:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B4=BB=E8=B7=83=E5=8D=A1=E5=AF=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/cards.js                  |  27 ++-
 src/layout/Sidebar.vue                    |   5 +-
 src/router/index.js                       |   5 +
 src/views/Login/index.vue                 |  63 +++----
 src/views/Tools/Cards/ActiveCardsList.vue | 192 ++++++++++++++++++++++
 5 files changed, 259 insertions(+), 33 deletions(-)
 create mode 100644 src/views/Tools/Cards/ActiveCardsList.vue

diff --git a/src/api/modules/cards.js b/src/api/modules/cards.js
index 17e493b..ff11615 100644
--- a/src/api/modules/cards.js
+++ b/src/api/modules/cards.js
@@ -41,7 +41,32 @@ const cardsApi = {
   batchCreateCards: (data) => instance.post('/cards/batchCreate', data),
   
   // 修改卡密状态
-  updateCardStatus: (data) => instance.put('/cards/updateStatus', data)
+  updateCardStatus: (data) => instance.put('/cards/updateStatus', data),
+
+  // 获取活跃卡密列表(分页)
+  getActiveCardsPage: (params) => {
+    // 转换分页参数名称
+    const convertedParams = {
+      pageNum: params.current,
+      pageSize: params.size
+    }
+
+    // 删除旧的参数
+    delete convertedParams.current
+    delete convertedParams.size
+
+    console.log('活跃卡密查询参数:', convertedParams)
+    return instance.get('/verifyPrice/getActiveCardsPage', {
+      params: convertedParams,
+      paramsSerializer: params => {
+        return Object.entries(params)
+            .filter(([_, v]) => v !== undefined)
+            .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
+            .join('&')
+      }
+    })
+  }
+
 }
 
 export { cardsApi } 
\ No newline at end of file
diff --git a/src/layout/Sidebar.vue b/src/layout/Sidebar.vue
index 50910e2..22d65db 100644
--- a/src/layout/Sidebar.vue
+++ b/src/layout/Sidebar.vue
@@ -133,7 +133,10 @@
 				children: [{
 					title: '卡密列表',
 					path: '/tools/cards/list'
-				}]
+				},{
+          title: '活跃卡密列表',
+          path: '/tools/cards/activeCardsList'
+        }]
 			}]
 		},
 		{
diff --git a/src/router/index.js b/src/router/index.js
index 9792132..f2c8cb2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -48,6 +48,11 @@ const routes = [{
 					component: () => import('@/views/Tools/Cards/List.vue'),
 					meta: { title: '卡密列表' }
 				},
+				{
+					path: '/tools/cards/activeCardsList',
+					component: () => import('@/views/Tools/Cards/ActiveCardsList.vue'),
+					meta: { title: '活跃卡密列表' }
+				},
 				{
 					path: '/examine/violation/list',
 					component: () => import('@/views/Examine/Violation/List.vue'),
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index 3fe6ef0..edca692 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -1,28 +1,29 @@
 <template>
-	<div class="login-container">
-		<el-form ref="formRef" :model="form" :rules="rules" @keyup.enter="handleLogin">
-			<div class="header">
-				<h2 class="title">登录</h2>
-				<p class="subtitle">欢迎使用{{ global?.system.name }}管理系统</p>
-				<el-divider />
-			</div>
-			<el-form-item prop="username" class="form-item">
-				<el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="User" class="input-item" />
-			</el-form-item>
-			<el-form-item prop="password" class="form-item">
-				<el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="Lock" show-password
-					class="input-item" />
-			</el-form-item>
-			<el-form-item prop="captcha" class="form-item">
-				<div class="captcha-wrapper">
-					<el-input v-model="form.captcha" placeholder="请输入验证码" prefix-icon="Picture" class="captcha-input input-item" />
-					<img :src="captchaUrl" class="captcha-image" @click="refreshCaptcha">
-				</div>
-			</el-form-item>
-			<el-divider class="custom-divider" />
-			<el-button type="primary" class="login-btn" :loading="loading" @click="handleLogin">登录</el-button>
-		</el-form>
-	</div>
+  <div class="login-container">
+    <el-form ref="formRef" :model="form" :rules="rules" @keyup.enter="handleLogin">
+      <div class="header">
+        <h2 class="title">登录</h2>
+        <p class="subtitle">欢迎使用{{ global?.system.name }}管理系统</p>
+        <el-divider/>
+      </div>
+      <el-form-item prop="username" class="form-item">
+        <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="User" class="input-item"/>
+      </el-form-item>
+      <el-form-item prop="password" class="form-item">
+        <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="Lock" show-password
+                  class="input-item"/>
+      </el-form-item>
+      <el-form-item prop="captcha" class="form-item">
+        <div class="captcha-wrapper">
+          <el-input v-model="form.captcha" placeholder="请输入验证码" prefix-icon="Picture"
+                    class="captcha-input input-item"/>
+          <img :src="captchaUrl" class="captcha-image" @click="refreshCaptcha">
+        </div>
+      </el-form-item>
+      <el-divider class="custom-divider"/>
+      <el-button type="primary" class="login-btn" :loading="loading" @click="handleLogin">登录</el-button>
+    </el-form>
+  </div>
 </template>
 
 <script setup>
@@ -54,22 +55,22 @@
 
 	// 验证码URL
 	const captchaUrl = ref('')
-	
+
 	// 防止重复提交
 	const loading = ref(false)
-	
+
 	// 路由
 	const router = useRouter()
-	
+
 	// 刷新验证码
-	const refreshCaptcha = () => { 
-		captchaUrl.value = `https://newadmin.buzhiyushu.cn/admin/generateCaptcha?t=${Date.now()}` 
+	const refreshCaptcha = () => {
+		captchaUrl.value = `https://newadmin.buzhiyushu.cn/admin/generateCaptcha?t=${Date.now()}`
 	}
 
 	// 处理登录
 	const handleLogin = async () => {
 		if (!formRef.value) return
-		
+
 		await formRef.value.validate(async (valid) => {
 			if (valid) {
 				try {
@@ -111,7 +112,7 @@
 			}
 		})
 	}
-	
+
 	// 组件挂载时刷新验证码
 	onMounted(() => {
 		refreshCaptcha()
diff --git a/src/views/Tools/Cards/ActiveCardsList.vue b/src/views/Tools/Cards/ActiveCardsList.vue
new file mode 100644
index 0000000..3df20e5
--- /dev/null
+++ b/src/views/Tools/Cards/ActiveCardsList.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="active-cards-container">
+    <!-- 操作按钮 -->
+    <ActionBar @refresh="refreshData"/>
+
+    <!-- 数据表格 -->
+    <el-table
+        :data="tableData"
+        border
+        stripe
+        style="width: 100%;"
+        v-loading="loading"
+    >
+      <el-table-column label="状态" width="80" align="center">
+        <template #default>
+          <div class="status-indicator active"></div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="cardId" label="卡密账号" min-width="180"/>
+      <el-table-column prop="cardSecret" label="卡密密码" min-width="180"/>
+      <el-table-column prop="status" label="使用状态" width="120">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.status)">
+            {{ getStatusText(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="effectiveDays" label="有效期" width="100">
+        <template #default="{ row }">
+          {{ row.effectiveDays }}天
+        </template>
+      </el-table-column>
+      <el-table-column prop="activateTime" label="激活时间" min-width="160">
+        <template #default="{ row }">
+          {{ formatDateTime(row.activateTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="expireTime" label="过期时间" min-width="160">
+        <template #default="{ row }">
+          {{ formatDateTime(row.expireTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="note" label="备注" min-width="120"/>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.size"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, onMounted} from 'vue'
+import {ElMessage} from 'element-plus'
+import ActionBar from '@/components/ActionBar.vue'
+import { cardsApi } from '@/api/modules/cards'
+
+// 表格数据
+const tableData = ref([])
+const loading = ref(false)
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  size: 10,
+  total: 0
+})
+
+// 初始化
+onMounted(() => {
+  fetchData()
+})
+
+// 获取表格数据
+const fetchData = async () => {
+  loading.value = true
+  try {
+    const res = await cardsApi.getActiveCardsPage(pagination)
+
+    if (res.code === 200) {
+      tableData.value = res.data.list || []
+      pagination.total = res.data.total || 0
+    } else {
+      ElMessage.error(res.message || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('获取数据失败:', error)
+    ElMessage.error('获取数据失败，请稍后再试')
+    tableData.value = []
+    pagination.total = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+// 刷新数据
+const refreshData = () => {
+  fetchData()
+}
+
+// 分页大小变化
+const handleSizeChange = (size) => {
+  pagination.size = size
+  pagination.current = 1
+  fetchData()
+}
+
+// 页码变化
+const handleCurrentChange = (current) => {
+  pagination.current = current
+  fetchData()
+}
+
+// 获取状态类型
+const getStatusType = (status) => {
+  const map = {
+    0: 'info',
+    1: 'success',
+    2: 'warning',
+    3: 'danger',
+    4: 'info'
+  }
+  return map[status] || 'info'
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const map = {
+    0: '未激活',
+    1: '未使用',
+    2: '已使用',
+    3: '已冻结',
+    4: '已过期'
+  }
+  return map[status] || '未知'
+}
+
+// 格式化时间
+const formatDateTime = (timestamp) => {
+  if (!timestamp) return '-'
+  const date = new Date(timestamp)
+  return date.toLocaleString()
+}
+</script>
+
+<style scoped>
+.active-cards-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 40px);
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.status-indicator.active {
+  background-color: #67c23a;
+  box-shadow: 0 0 6px rgba(103, 194, 58, 0.5);
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.el-table {
+  margin-bottom: 20px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.el-table ::v-deep(.el-table__header) th {
+  background-color: #f8f8f9;
+}
+</style>
\ No newline at end of file