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调用，提高了页面加载速度
|