20260227-1
This commit is contained in:
cyh666666
@@ -8,20 +8,12 @@
|
||||
</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>
|
||||
<image :src="product.main_image_url" class="product-image" mode="aspectFill" />
|
||||
<text class="product-name" :lines="2">{{ product.name }}</text>
|
||||
<view class="product-bottom">
|
||||
<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 class="product-add-btn" @click.stop="addToCart(product)">
|
||||
<text class="add-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -32,27 +24,42 @@
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { supabaseService } from '@/utils/supabaseService.uts'
|
||||
import type { Product } 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 favorites = ref<Array<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' })
|
||||
uni.showLoading({ title: '检查商品...' })
|
||||
try {
|
||||
const merchantId = product.merchant_id ?? product.shop_id ?? ''
|
||||
|
||||
// 检查商品是否有SKU
|
||||
const skus = await supabaseService.getProductSkus(product.id)
|
||||
uni.hideLoading()
|
||||
|
||||
if (skus.length > 0) {
|
||||
// 有规格，提示并跳转到商品详情页选择规格
|
||||
uni.showToast({ title: '请选择规格', icon: 'none' })
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/consumer/product-detail?id=' + product.id
|
||||
})
|
||||
}, 500)
|
||||
} else {
|
||||
// 无规格，直接加入购物车
|
||||
uni.showLoading({ title: '添加中...' })
|
||||
const success = await supabaseService.addToCart(product.id, 1, '', merchantId)
|
||||
uni.hideLoading()
|
||||
if (success) {
|
||||
uni.showToast({ title: '已添加到购物车', icon: 'success' })
|
||||
} else {
|
||||
uni.showToast({ title: '添加失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('添加到购物车异常', e)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,6 +83,7 @@ const loadFavorites = async () => {
|
||||
let name = '未知商品'
|
||||
let price = 0
|
||||
let sales = 0
|
||||
let merchantId = ''
|
||||
|
||||
if (prod != null) {
|
||||
let prodObj: UTSJSONObject
|
||||
@@ -90,6 +98,7 @@ const loadFavorites = async () => {
|
||||
price = prodObj.getNumber('base_price') ?? 0
|
||||
image = prodObj.getString('main_image_url') ?? image
|
||||
sales = prodObj.getNumber('sale_count') ?? 0
|
||||
merchantId = prodObj.getString('merchant_id') ?? ''
|
||||
|
||||
if (image === '/static/default-product.png') {
|
||||
const imgUrls = prodObj.getString('image_urls')
|
||||
@@ -112,10 +121,10 @@ const loadFavorites = async () => {
|
||||
id: id,
|
||||
name: name,
|
||||
price: price,
|
||||
image: image,
|
||||
sales: sales,
|
||||
shopId: '',
|
||||
shopName: ''
|
||||
category_id: '',
|
||||
merchant_id: merchantId,
|
||||
main_image_url: image,
|
||||
sale_count: sales
|
||||
} as Product
|
||||
})
|
||||
}
|
||||
@@ -213,107 +222,79 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
width: 48%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
text-overflow: ellipsis;
|
||||
lines: 2;
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.4;
|
||||
height: 36px;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.product-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 8px 8px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
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;
|
||||
.product-add-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #ff5000;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px; /* Replacement for gap */
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
background-color: #ff5000;
|
||||
.add-icon {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cart-icon {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
/* PC/Tablet Responsive */
|
||||
@media (min-width: 768px) {
|
||||
.product-item {
|
||||
width: 31% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
font-size: 14px;
|
||||
@media (min-width: 1024px) {
|
||||
.product-item {
|
||||
width: 15% !important;
|
||||
}
|
||||
|
||||
.product-grid, .header {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user