694 lines
14 KiB
Plaintext
694 lines
14 KiB
Plaintext
<!-- 收藏页面 -->
|
|
<template>
|
|
<view class="favorites-page">
|
|
<!-- 顶部栏 -->
|
|
<view class="favorites-header">
|
|
<view class="header-title">
|
|
<text class="title-text">我的收藏</text>
|
|
</view>
|
|
<view v-if="favorites.length > 0" class="edit-btn" @click="toggleEditMode">
|
|
<text class="edit-text">{{ isEditMode ? '完成' : '编辑' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签页 -->
|
|
<view class="favorites-tabs">
|
|
<view :class="['favorites-tab', { active: activeTab === 'product' }]" @click="changeTab('product')">
|
|
<text class="tab-text">商品</text>
|
|
</view>
|
|
<view :class="['favorites-tab', { active: activeTab === 'shop' }]" @click="changeTab('shop')">
|
|
<text class="tab-text">店铺</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收藏内容 -->
|
|
<scroll-view class="favorites-content" scroll-y @scrolltolower="loadMore">
|
|
<!-- 空状态 -->
|
|
<view v-if="favorites.length === 0 && !isLoading" class="empty-favorites">
|
|
<text class="empty-icon">❤️</text>
|
|
<text class="empty-text">{{ getEmptyText() }}</text>
|
|
<text class="empty-subtext">{{ getEmptySubtext() }}</text>
|
|
<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
|
|
</view>
|
|
|
|
<!-- 商品收藏 -->
|
|
<view v-if="activeTab === 'product'" class="product-favorites">
|
|
<view v-for="item in favorites" :key="item.id" class="product-item">
|
|
<view v-if="isEditMode" class="item-selector" @click="toggleSelect(item)">
|
|
<view :class="['select-icon', { selected: item.selected }]">
|
|
<text v-if="item.selected" class="icon-text">✓</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-content" @click="viewProduct(item)">
|
|
<image class="product-image" :src="getProductImage(item)" />
|
|
<view class="product-info">
|
|
<text class="product-name">{{ item.product?.name || '商品已下架' }}</text>
|
|
<text class="product-price">¥{{ item.product?.price || 0 }}</text>
|
|
<view class="product-meta">
|
|
<text class="meta-text">收藏时间: {{ formatTime(item.created_at) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 店铺收藏 -->
|
|
<view v-if="activeTab === 'shop'" class="shop-favorites">
|
|
<view v-for="item in favorites" :key="item.id" class="shop-item">
|
|
<view v-if="isEditMode" class="item-selector" @click="toggleSelect(item)">
|
|
<view :class="['select-icon', { selected: item.selected }]">
|
|
<text v-if="item.selected" class="icon-text">✓</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-content" @click="viewShop(item)">
|
|
<image class="shop-logo" :src="item.shop?.shop_logo || '/static/default-shop.png'" />
|
|
<view class="shop-info">
|
|
<text class="shop-name">{{ item.shop?.shop_name || '店铺已关闭' }}</text>
|
|
<view class="shop-rating">
|
|
<text class="rating-text">评分: {{ item.shop?.rating?.toFixed(1) || '0.0' }}</text>
|
|
<text class="sales-text">销量: {{ item.shop?.total_sales || 0 }}</text>
|
|
</view>
|
|
<view class="shop-meta">
|
|
<text class="meta-text">收藏时间: {{ formatTime(item.created_at) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view v-if="isLoading" class="loading-more">
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
<view v-if="!hasMore && favorites.length > 0" class="no-more">
|
|
<text class="no-more-text">没有更多了</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 编辑操作栏 -->
|
|
<view v-if="isEditMode && favorites.length > 0" class="edit-bar">
|
|
<view class="select-all" @click="toggleSelectAll">
|
|
<view :class="['all-select-icon', { selected: isAllSelected }]">
|
|
<text v-if="isAllSelected" class="icon-text">✓</text>
|
|
</view>
|
|
<text class="select-all-text">全选</text>
|
|
</view>
|
|
<view class="delete-btn" @click="deleteSelected">
|
|
<text class="delete-text">删除({{ selectedCount }})</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted, computed, watch } from 'vue'
|
|
import supa from '@/components/supadb/aksupainstance.uts'
|
|
|
|
type FavoriteType = {
|
|
id: string
|
|
user_id: string
|
|
product_id: string | null
|
|
merchant_id: string | null
|
|
type: string // 'product' | 'shop'
|
|
created_at: string
|
|
selected?: boolean
|
|
product?: {
|
|
id: string
|
|
name: string
|
|
price: number
|
|
images: string[]
|
|
status: number
|
|
}
|
|
shop?: {
|
|
id: string
|
|
shop_name: string
|
|
shop_logo: string
|
|
rating: number
|
|
total_sales: number
|
|
shop_status: number
|
|
}
|
|
}
|
|
|
|
const activeTab = ref<string>('product')
|
|
const favorites = ref<Array<FavoriteType>>([])
|
|
const isEditMode = ref<boolean>(false)
|
|
const isLoading = ref<boolean>(false)
|
|
const currentPage = ref<number>(1)
|
|
const pageSize = ref<number>(20)
|
|
const hasMore = ref<boolean>(true)
|
|
|
|
// 计算属性
|
|
const selectedCount = computed(() => {
|
|
return favorites.value.filter(item => item.selected).length
|
|
})
|
|
|
|
const isAllSelected = computed(() => {
|
|
return favorites.value.length > 0 && favorites.value.every(item => item.selected)
|
|
})
|
|
|
|
// 监听标签页变化
|
|
watch(activeTab, () => {
|
|
resetData()
|
|
loadFavorites()
|
|
})
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
loadFavorites()
|
|
})
|
|
|
|
// 重置数据
|
|
const resetData = () => {
|
|
favorites.value = []
|
|
currentPage.value = 1
|
|
hasMore.value = true
|
|
isEditMode.value = false
|
|
}
|
|
|
|
// 加载收藏数据
|
|
const loadFavorites = async (loadMore: boolean = false) => {
|
|
if (isLoading.value || (!hasMore.value && loadMore)) {
|
|
return
|
|
}
|
|
|
|
isLoading.value = true
|
|
|
|
try {
|
|
const userId = getCurrentUserId()
|
|
if (!userId) {
|
|
uni.navigateTo({
|
|
url: '/pages/user/login'
|
|
})
|
|
return
|
|
}
|
|
|
|
const page = loadMore ? currentPage.value + 1 : 1
|
|
|
|
let query = supa
|
|
.from('user_favorites')
|
|
.select(`
|
|
*,
|
|
product:product_id(*),
|
|
shop:merchant_id(*)
|
|
`)
|
|
.eq('user_id', userId)
|
|
.eq('type', activeTab.value)
|
|
.order('created_at', { ascending: false })
|
|
|
|
// 分页
|
|
query = query.range((page - 1) * pageSize.value, page * pageSize.value - 1)
|
|
|
|
const { data, error } = await query
|
|
|
|
if (error !== null) {
|
|
console.error('加载收藏失败:', error)
|
|
return
|
|
}
|
|
|
|
const newFavorites = (data || []).map((item: any) => ({
|
|
...item,
|
|
selected: false
|
|
}))
|
|
|
|
if (loadMore) {
|
|
favorites.value.push(...newFavorites)
|
|
currentPage.value = page
|
|
} else {
|
|
favorites.value = newFavorites
|
|
currentPage.value = 1
|
|
}
|
|
|
|
hasMore.value = newFavorites.length === pageSize.value
|
|
} catch (err) {
|
|
console.error('加载收藏异常:', err)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 获取当前用户ID
|
|
const getCurrentUserId = (): string => {
|
|
const userStore = uni.getStorageSync('userInfo')
|
|
return userStore?.id || ''
|
|
}
|
|
|
|
// 获取商品图片
|
|
const getProductImage = (item: FavoriteType): string => {
|
|
if (!item.product?.images?.[0]) {
|
|
return '/static/default-product.png'
|
|
}
|
|
return item.product.images[0]
|
|
}
|
|
|
|
// 格式化时间
|
|
const formatTime = (timeStr: string): string => {
|
|
const date = new Date(timeStr)
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
|
const day = date.getDate().toString().padStart(2, '0')
|
|
return `${month}-${day}`
|
|
}
|
|
|
|
// 获取空状态文本
|
|
const getEmptyText = (): string => {
|
|
return activeTab.value === 'product' ? '暂无商品收藏' : '暂无店铺收藏'
|
|
}
|
|
|
|
// 获取空状态副文本
|
|
const getEmptySubtext = (): string => {
|
|
return activeTab.value === 'product' ? '快去收藏喜欢的商品吧' : '快去收藏喜欢的店铺吧'
|
|
}
|
|
|
|
// 切换编辑模式
|
|
const toggleEditMode = () => {
|
|
isEditMode.value = !isEditMode.value
|
|
// 重置选择状态
|
|
favorites.value.forEach(item => {
|
|
item.selected = false
|
|
})
|
|
}
|
|
|
|
// 切换标签页
|
|
const changeTab = (tab: string) => {
|
|
activeTab.value = tab
|
|
}
|
|
|
|
// 切换选择状态
|
|
const toggleSelect = (item: FavoriteType) => {
|
|
item.selected = !item.selected
|
|
favorites.value = [...favorites.value]
|
|
}
|
|
|
|
// 全选/取消全选
|
|
const toggleSelectAll = () => {
|
|
const newSelectedState = !isAllSelected.value
|
|
favorites.value.forEach(item => {
|
|
item.selected = newSelectedState
|
|
})
|
|
favorites.value = [...favorites.value]
|
|
}
|
|
|
|
// 删除选中项
|
|
const deleteSelected = async () => {
|
|
const selectedItems = favorites.value.filter(item => item.selected)
|
|
if (selectedItems.length === 0) {
|
|
uni.showToast({
|
|
title: '请选择要删除的收藏',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '确认删除',
|
|
content: `确定要删除选中的${selectedItems.length}个收藏吗？`,
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
try {
|
|
const ids = selectedItems.map(item => item.id)
|
|
|
|
const { error } = await supa
|
|
.from('user_favorites')
|
|
.delete()
|
|
.in('id', ids)
|
|
|
|
if (error !== null) {
|
|
throw error
|
|
}
|
|
|
|
// 从列表中移除
|
|
favorites.value = favorites.value.filter(item => !item.selected)
|
|
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 如果删完了，退出编辑模式
|
|
if (favorites.value.length === 0) {
|
|
isEditMode.value = false
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('删除收藏失败:', err)
|
|
uni.showToast({
|
|
title: '删除失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 查看商品
|
|
const viewProduct = (item: FavoriteType) => {
|
|
if (isEditMode.value) return
|
|
|
|
if (!item.product_id || !item.product?.status) {
|
|
uni.showToast({
|
|
title: '商品已下架',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/product-detail?id=${item.product_id}`
|
|
})
|
|
}
|
|
|
|
// 查看店铺
|
|
const viewShop = (item: FavoriteType) => {
|
|
if (isEditMode.value) return
|
|
|
|
if (!item.merchant_id || !item.shop?.shop_status) {
|
|
uni.showToast({
|
|
title: '店铺已关闭',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/shop-detail?id=${item.merchant_id}`
|
|
})
|
|
}
|
|
|
|
// 加载更多
|
|
const loadMore = () => {
|
|
if (hasMore.value && !isLoading.value) {
|
|
loadFavorites(true)
|
|
}
|
|
}
|
|
|
|
// 去逛逛
|
|
const goShopping = () => {
|
|
uni.switchTab({
|
|
url: '/pages/mall/consumer/index'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.favorites-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.favorites-header {
|
|
background-color: #ffffff;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.edit-btn {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.edit-text {
|
|
color: #007aff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.favorites-tabs {
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.favorites-tab {
|
|
flex: 1;
|
|
padding: 15px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.favorites-tab.active {
|
|
color: #007aff;
|
|
}
|
|
|
|
.favorites-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: #007aff;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 16px;
|
|
color: #666666;
|
|
}
|
|
|
|
.favorites-tab.active .tab-text {
|
|
color: #007aff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.favorites-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.empty-favorites {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80px 20px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 80px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 16px;
|
|
color: #666666;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.empty-subtext {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.go-shopping-btn {
|
|
background-color: #007aff;
|
|
color: #ffffff;
|
|
padding: 10px 40px;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
border: none;
|
|
}
|
|
|
|
.product-favorites,
|
|
.shop-favorites {
|
|
padding: 10px;
|
|
}
|
|
|
|
.product-item,
|
|
.shop-item {
|
|
background-color: #ffffff;
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.item-selector {
|
|
width: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.select-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.select-icon.selected {
|
|
background-color: #007aff;
|
|
border-color: #007aff;
|
|
}
|
|
|
|
.icon-text {
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 15px;
|
|
}
|
|
|
|
.product-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 5px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.product-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
line-height: 1.4;
|
|
margin-bottom: 10px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 16px;
|
|
color: #ff4757;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.product-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.meta-text {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
|
|
.shop-logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.shop-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.shop-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 10px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.shop-rating {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.rating-text,
|
|
.sales-text {
|
|
font-size: 13px;
|
|
color: #666666;
|
|
}
|
|
|
|
.shop-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.loading-more,
|
|
.no-more {
|
|
padding: 20px;
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.loading-text,
|
|
.no-more-text {
|
|
color: #999999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.edit-bar {
|
|
background-color: #ffffff;
|
|
border-top: 1px solid #e5e5e5;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.select-all {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.all-select-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid #cccccc;
|
|
border-radius: 10px;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.all-select-icon.selected {
|
|
background-color: #007aff;
|
|
border-color: #007aff;
|
|
}
|
|
|
|
.select-all-text {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
}
|
|
|
|
.delete-btn {
|
|
background-color: #ff4757;
|
|
padding: 10px 20px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.delete-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
</style> |