133 lines
2.3 KiB
Plaintext
133 lines
2.3 KiB
Plaintext
<template>
|
|
<view class="page">
|
|
<!-- 收藏列表 -->
|
|
<scroll-view
|
|
class="list-scroll"
|
|
scroll-y
|
|
>
|
|
<view class="case-list">
|
|
<case-card
|
|
v-for="item in favoriteList"
|
|
:key="item.id"
|
|
:caseData="item"
|
|
@click="goToDetail"
|
|
></case-card>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-if="!loading && favoriteList.length == 0">
|
|
<text class="empty-icon">❤️</text>
|
|
<text class="empty-text">还没有收藏任何案例</text>
|
|
<view class="empty-btn" @click="goToCases">
|
|
<text class="empty-btn-text">去看看案例</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部间距 -->
|
|
<view class="bottom-space"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { STORAGE_KEYS } from '@/utils/config.uts'
|
|
|
|
// 案例类型
|
|
type CaseItem = {
|
|
id : string
|
|
title : string
|
|
category : string
|
|
categoryName : string
|
|
coverImage : string
|
|
material : string
|
|
duration : string
|
|
price : string
|
|
views : number
|
|
likes : number
|
|
}
|
|
|
|
// 收藏列表
|
|
const favoriteList = ref<CaseItem[]>([])
|
|
|
|
// 加载状态
|
|
const loading = ref(false)
|
|
|
|
// 获取收藏列表
|
|
const fetchFavorites = () => {
|
|
loading.value = true
|
|
// 从本地存储获取收藏列表
|
|
const favorites = uni.getStorageSync(STORAGE_KEYS.FAVORITES) as string[] || []
|
|
|
|
// TODO: 这里应该根据收藏的ID列表从后端获取案例详情
|
|
// 暂时使用空列表
|
|
favoriteList.value = []
|
|
|
|
loading.value = false
|
|
}
|
|
|
|
// 跳转详情
|
|
const goToDetail = (id : string) => {
|
|
uni.navigateTo({
|
|
url: `/pages/cases/detail?id=${id}`
|
|
})
|
|
}
|
|
|
|
// 去案例列表
|
|
const goToCases = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/cases/list'
|
|
})
|
|
}
|
|
|
|
onLoad(() => {
|
|
fetchFavorites()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page {
|
|
flex: 1;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.list-scroll {
|
|
flex: 1;
|
|
}
|
|
|
|
.case-list {
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
padding: 120rpx 32rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.empty-btn {
|
|
padding: 16rpx 48rpx;
|
|
background-color: #D4A574;
|
|
border-radius: 48rpx;
|
|
}
|
|
|
|
.empty-btn-text {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 32rpx;
|
|
}
|
|
</style>
|