320 lines
7.3 KiB
Plaintext
320 lines
7.3 KiB
Plaintext
<template>
|
|
<scroll-view class="favorites-page" direction="vertical">
|
|
<view class="product-grid">
|
|
<view v-if="favorites.length === 0" class="empty-state">
|
|
<text class="empty-icon">❤️</text>
|
|
<text class="empty-text">暂无收藏商品</text>
|
|
<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
|
|
</view>
|
|
|
|
<view v-else v-for="(product, index) in favorites" :key="index" class="product-item" @click="goToDetail(product.id)">
|
|
<image :src="product.image" class="product-image" mode="aspectFill" />
|
|
<view class="product-info">
|
|
<text class="product-name">{{ product.name }}</text>
|
|
<text class="product-price">¥{{ product.price }}</text>
|
|
<view class="product-footer">
|
|
<text class="product-sales">已售 {{ product.sales }}</text>
|
|
<view class="action-btns">
|
|
<view class="cart-btn" @click.stop="addToCart(product)">
|
|
<text class="cart-icon">🛒</text>
|
|
</view>
|
|
<view class="remove-btn" @click.stop="removeFavorite(product.id)">
|
|
<text class="remove-icon">🗑️</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { supabaseService } from '@/utils/supabaseService.uts'
|
|
|
|
type Product = {
|
|
id: string
|
|
name: string
|
|
price: number
|
|
image: string
|
|
sales: number
|
|
shopId?: string
|
|
shopName?: string
|
|
}
|
|
|
|
const favorites = ref<Product[]>([])
|
|
|
|
const addToCart = async (product: Product) => {
|
|
uni.showLoading({ title: '添加中' })
|
|
const success = await supabaseService.addToCart(product.id, 1, '')
|
|
uni.hideLoading()
|
|
if (success) {
|
|
uni.showToast({ title: '已添加到购物车', icon: 'success' })
|
|
} else {
|
|
uni.showToast({ title: '添加失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
const loadFavorites = async () => {
|
|
const res = await supabaseService.getFavorites()
|
|
|
|
favorites.value = res.map((item: any): Product => {
|
|
let prod: any | null = null
|
|
let itemObj: UTSJSONObject | null = null
|
|
|
|
if (item instanceof UTSJSONObject) {
|
|
itemObj = item as UTSJSONObject
|
|
prod = itemObj.get('ml_products')
|
|
} else {
|
|
itemObj = JSON.parse(JSON.stringify(item)) as UTSJSONObject
|
|
prod = itemObj.get('ml_products')
|
|
}
|
|
|
|
let image = '/static/default-product.png'
|
|
let id = ''
|
|
let name = '未知商品'
|
|
let price = 0
|
|
let sales = 0
|
|
|
|
if (prod != null) {
|
|
let prodObj: UTSJSONObject
|
|
if (prod instanceof UTSJSONObject) {
|
|
prodObj = prod as UTSJSONObject
|
|
} else {
|
|
prodObj = JSON.parse(JSON.stringify(prod)) as UTSJSONObject
|
|
}
|
|
|
|
id = prodObj.getString('id') ?? ''
|
|
name = prodObj.getString('name') ?? '未知商品'
|
|
price = prodObj.getNumber('base_price') ?? 0
|
|
image = prodObj.getString('main_image_url') ?? image
|
|
sales = prodObj.getNumber('sale_count') ?? 0
|
|
|
|
if (image === '/static/default-product.png') {
|
|
const imgUrls = prodObj.getString('image_urls')
|
|
if (imgUrls != null) {
|
|
try {
|
|
const arr = JSON.parse(imgUrls)
|
|
if (Array.isArray(arr) && arr.length > 0) {
|
|
image = arr[0] as string
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
}
|
|
} else {
|
|
if (itemObj != null) {
|
|
id = itemObj.getString('target_id') ?? ''
|
|
}
|
|
}
|
|
|
|
return {
|
|
id: id,
|
|
name: name,
|
|
price: price,
|
|
image: image,
|
|
sales: sales,
|
|
shopId: '',
|
|
shopName: ''
|
|
} as Product
|
|
})
|
|
}
|
|
|
|
const goShopping = () => {
|
|
uni.switchTab({
|
|
url: '/pages/mall/consumer/index'
|
|
})
|
|
}
|
|
|
|
const goToDetail = (id: string) => {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/product-detail?productId=${id}`
|
|
})
|
|
}
|
|
|
|
const removeFavorite = (id: string) => {
|
|
uni.showModal({
|
|
title: '取消收藏',
|
|
content: '确定要取消收藏该商品吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
supabaseService.toggleFavorite(id).then((isStillFavorite) => {
|
|
if (!isStillFavorite) {
|
|
const index = favorites.value.findIndex((item): Boolean => {
|
|
return item.id === id
|
|
})
|
|
if (index !== -1) {
|
|
favorites.value.splice(index, 1)
|
|
}
|
|
uni.showToast({
|
|
title: '已取消收藏',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '取消失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadFavorites()
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.favorites-page {
|
|
padding: 15px;
|
|
background-color: #f5f5f5;
|
|
flex: 1;
|
|
}
|
|
|
|
.product-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.empty-state {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 100px;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 60px;
|
|
margin-bottom: 20px;
|
|
color: #ddd;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 16px;
|
|
color: #999;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.go-shopping-btn {
|
|
background-color: #ff5000;
|
|
color: white;
|
|
padding: 8px 24px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
border: none;
|
|
}
|
|
|
|
.product-item {
|
|
width: 48%; /* Default Mobile: 2 items per row */
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box; /* Important for grid */
|
|
}
|
|
|
|
/* PC/Tablet Responsive */
|
|
@media (min-width: 768px) {
|
|
.product-item {
|
|
width: 31% !important; /* Tablet: 3 items (gap 15px roughly distributed) */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.product-item {
|
|
width: 15% !important; /* PC: 6 items */
|
|
}
|
|
|
|
/* Center content on large screens */
|
|
.product-grid, .header {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.product-image {
|
|
width: 100%;
|
|
height: 170px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.product-info {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-bottom: 6px;
|
|
text-overflow: ellipsis;
|
|
lines: 2;
|
|
overflow: hidden;
|
|
height: 40px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 16px;
|
|
color: #ff5000;
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.product-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.product-sales {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.action-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.cart-btn, .remove-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 8px; /* Replacement for gap */
|
|
}
|
|
|
|
.cart-btn {
|
|
background-color: #ff5000;
|
|
}
|
|
|
|
.cart-icon {
|
|
font-size: 14px;
|
|
color: white;
|
|
}
|
|
|
|
.remove-btn {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.remove-icon {
|
|
font-size: 14px;
|
|
}
|
|
</style>
|