feat: 添加课程详情页的收藏功能
在课程详情页中添加收藏按钮,点击按钮可以切换收藏状态。按钮的图标颜色会根据收藏状态动态变化
Showing
1 changed file
with
10 additions
and
3 deletions
| ... | @@ -219,13 +219,13 @@ | ... | @@ -219,13 +219,13 @@ |
| 219 | </svg> | 219 | </svg> |
| 220 | 分享 | 220 | 分享 |
| 221 | </button> --> | 221 | </button> --> |
| 222 | - <button class="flex flex-col items-center text-gray-500 text-xs"> | 222 | + <button class="flex flex-col items-center text-gray-500 text-xs" @click="toggleFavorite"> |
| 223 | <svg | 223 | <svg |
| 224 | xmlns="http://www.w3.org/2000/svg" | 224 | xmlns="http://www.w3.org/2000/svg" |
| 225 | class="h-6 w-6" | 225 | class="h-6 w-6" |
| 226 | - fill="none" | 226 | + :fill="isFavorite ? 'red' : 'none'" |
| 227 | viewBox="0 0 24 24" | 227 | viewBox="0 0 24 24" |
| 228 | - stroke="currentColor" | 228 | + :stroke="isFavorite ? 'red' : 'currentColor'" |
| 229 | > | 229 | > |
| 230 | <path | 230 | <path |
| 231 | stroke-linecap="round" | 231 | stroke-linecap="round" |
| ... | @@ -271,8 +271,15 @@ const route = useRoute() | ... | @@ -271,8 +271,15 @@ const route = useRoute() |
| 271 | const router = useRouter() | 271 | const router = useRouter() |
| 272 | const course = ref(null) | 272 | const course = ref(null) |
| 273 | const activeTab = ref('课程特色') | 273 | const activeTab = ref('课程特色') |
| 274 | +const isFavorite = ref(false) | ||
| 274 | const { addToCart, proceedToCheckout } = useCart() | 275 | const { addToCart, proceedToCheckout } = useCart() |
| 275 | 276 | ||
| 277 | +// Handle favorite toggle | ||
| 278 | +const toggleFavorite = () => { | ||
| 279 | + isFavorite.value = !isFavorite.value | ||
| 280 | + // TODO: 后续对接收藏接口 | ||
| 281 | +} | ||
| 282 | + | ||
| 276 | // Curriculum items | 283 | // Curriculum items |
| 277 | const curriculumItems = [ | 284 | const curriculumItems = [ |
| 278 | { title: '课程特色', active: true }, | 285 | { title: '课程特色', active: true }, | ... | ... |
-
Please register or login to post a comment