166 lines
4.6 KiB
Markdown
166 lines
4.6 KiB
Markdown
# 前端订阅状态筛选功能说明
|
||
|
||
## 功能概述
|
||
|
||
本次更新为前端产品列表页面添加了订阅状态筛选功能，并优化了订阅状态的判断逻辑。
|
||
|
||
## 主要修改
|
||
|
||
### 1. 产品列表页面 (`tyapi-frontend/src/pages/products/index.vue`)
|
||
|
||
#### 新增功能
|
||
- **订阅状态筛选器**：添加了"订阅状态"筛选选项，用户可以选择"已订阅"或"未订阅"
|
||
- **优化订阅状态判断**：移除了原来的 `loadUserSubscriptions` 逻辑，直接使用产品接口返回的 `is_subscribed` 字段
|
||
|
||
#### 修改内容
|
||
```javascript
|
||
// 新增筛选条件
|
||
const filters = reactive({
|
||
category_id: '',
|
||
is_package: null,
|
||
is_subscribed: null, // 新增：订阅状态筛选
|
||
keyword: ''
|
||
})
|
||
|
||
// 新增筛选器UI
|
||
<FilterItem label="订阅状态">
|
||
<el-select v-model="filters.is_subscribed" placeholder="选择订阅状态" clearable @change="handleFilterChange"
|
||
class="w-full">
|
||
<el-option label="已订阅" value="true" />
|
||
<el-option label="未订阅" value="false" />
|
||
</el-select>
|
||
</FilterItem>
|
||
|
||
// 优化订阅状态传递
|
||
<ProductCard v-for="product in products" :key="product.id" :product="product"
|
||
:is-subscribed="product.is_subscribed" @view-detail="handleViewDetail"
|
||
@subscribe="handleSubscribe" />
|
||
```
|
||
|
||
#### 移除的功能
|
||
- 移除了 `loadUserSubscriptions` 方法
|
||
- 移除了 `userSubscriptions` 响应式数据
|
||
- 移除了 `isProductSubscribed` 方法
|
||
- 移除了对 `subscriptionApi` 的依赖
|
||
|
||
### 2. 产品卡片组件 (`tyapi-frontend/src/components/product/ProductCard.vue`)
|
||
|
||
#### 新增功能
|
||
- **未启用产品处理**：当产品 `is_enabled` 为 `false` 时，显示灰色的"未启用"按钮，不允许订阅
|
||
- **优化按钮逻辑**：重新设计了按钮的显示逻辑，按优先级显示
|
||
|
||
#### 修改内容
|
||
```vue
|
||
<!-- 未启用的产品 -->
|
||
<el-button
|
||
v-if="!product.is_enabled"
|
||
type="info"
|
||
disabled
|
||
class="action-btn disabled-btn"
|
||
size="small"
|
||
>
|
||
未启用
|
||
</el-button>
|
||
|
||
<!-- 已订阅的产品 -->
|
||
<el-button
|
||
v-else-if="isSubscribed"
|
||
type="info"
|
||
disabled
|
||
class="action-btn subscribed-btn"
|
||
size="small"
|
||
>
|
||
已订阅
|
||
</el-button>
|
||
|
||
<!-- 可订阅的产品 -->
|
||
<el-button
|
||
v-else
|
||
type="success"
|
||
@click="handleSubscribe"
|
||
class="action-btn subscribe-btn"
|
||
size="small"
|
||
>
|
||
订阅
|
||
</el-button>
|
||
```
|
||
|
||
#### 新增样式
|
||
```css
|
||
.disabled-btn {
|
||
background: rgba(100, 116, 139, 0.1);
|
||
border-color: rgba(100, 116, 139, 0.2);
|
||
color: #64748b;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.disabled-btn:hover {
|
||
background: rgba(100, 116, 139, 0.1);
|
||
border-color: rgba(100, 116, 139, 0.2);
|
||
color: #64748b;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
### 1. 订阅状态筛选
|
||
- 用户可以通过筛选器选择查看"已订阅"或"未订阅"的产品
|
||
- 筛选条件会实时应用到产品列表
|
||
- 支持与其他筛选条件组合使用
|
||
|
||
### 2. 产品状态显示
|
||
- **已启用且未订阅**：显示绿色的"订阅"按钮
|
||
- **已启用且已订阅**：显示灰色的"已订阅"按钮（禁用状态）
|
||
- **未启用**：显示灰色的"未启用"按钮（禁用状态）
|
||
|
||
### 3. 性能优化
|
||
- 移除了额外的订阅列表加载，减少了API调用
|
||
- 直接使用产品接口返回的订阅状态，提高了响应速度
|
||
- 订阅成功后直接重新加载产品列表，确保状态同步
|
||
|
||
## 使用说明
|
||
|
||
### 筛选功能
|
||
1. 在产品列表页面的筛选区域找到"订阅状态"下拉框
|
||
2. 选择"已订阅"查看已订阅的产品
|
||
3. 选择"未订阅"查看未订阅的产品
|
||
4. 选择"全部"（清空选择）查看所有产品
|
||
5. 可以与其他筛选条件组合使用
|
||
|
||
### 订阅操作
|
||
1. 对于已启用的产品，点击"订阅"按钮进行订阅
|
||
2. 订阅成功后，按钮会自动变为"已订阅"状态
|
||
3. 未启用的产品无法订阅，会显示"未启用"状态
|
||
|
||
## 技术实现
|
||
|
||
### 后端支持
|
||
- 产品列表接口支持 `is_subscribed` 筛选参数
|
||
- 返回的产品数据包含 `is_subscribed` 字段
|
||
- 支持可选认证，未认证用户不显示订阅状态
|
||
|
||
### 前端实现
|
||
- 使用 Vue 3 Composition API
|
||
- 响应式数据管理筛选条件
|
||
- 组件化设计，便于维护和扩展
|
||
|
||
## 测试验证
|
||
|
||
### 单元测试
|
||
- 创建了 `product_subscription_filter_test.go` 测试文件
|
||
- 验证筛选条件构建逻辑
|
||
- 验证产品响应结构
|
||
|
||
### 功能测试
|
||
- 前端项目编译成功
|
||
- 后端项目编译成功
|
||
- 所有测试用例通过
|
||
|
||
## 注意事项
|
||
|
||
1. **认证要求**：订阅状态筛选功能需要用户登录才能使用
|
||
2. **数据同步**：订阅操作成功后会自动刷新产品列表
|
||
3. **状态一致性**：前端显示状态与后端数据保持一致
|
||
4. **性能考虑**：减少了不必要的API调用，提高了页面加载速度 |