1373 lines
32 KiB
Plaintext
1373 lines
32 KiB
Plaintext
<!-- pages/mall/consumer/cart.uvue -->
|
||
<template>
|
||
<view class="cart-page">
|
||
<!-- 智能顶部导航栏 - 与消息页保持一致 -->
|
||
<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<view class="nav-container">
|
||
<text class="nav-title">购物车</text>
|
||
<view class="nav-actions">
|
||
<view class="action-btn" @click="toggleManageMode">
|
||
<text class="action-icon">{{ isManageMode ? '✓' : '⚙️' }}</text>
|
||
<text class="action-text">{{ isManageMode ? '完成' : '管理' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 导航栏占位符 - 已移除 -->
|
||
<!-- <view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view> -->
|
||
|
||
<!-- 购物车内容 -->
|
||
<scroll-view scroll-y class="cart-content" :style="{ paddingTop: (statusBarHeight + 10) + 'px' }">
|
||
<!-- 空购物车 -->
|
||
<view v-if="!loading && cartItems.length === 0" class="empty-cart">
|
||
<text class="empty-icon">🛒</text>
|
||
<text class="empty-title">购物车是空的</text>
|
||
<text class="empty-desc">快去挑选喜欢的商品吧</text>
|
||
<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
|
||
</view>
|
||
|
||
<!-- 购物车商品列表 -->
|
||
<view v-else class="cart-list">
|
||
<view
|
||
v-for="group in cartGroups"
|
||
:key="group.shopId"
|
||
class="shop-group"
|
||
>
|
||
<!-- 店铺头部 -->
|
||
<view class="shop-header">
|
||
<view class="shop-select" @click="toggleShopSelect(group.shopId)">
|
||
<text v-if="isShopSelected(group.shopId)" class="selected-icon">✓</text>
|
||
<text v-else class="unselected-icon"></text>
|
||
</view>
|
||
<text class="shop-icon">🏪</text>
|
||
<text class="shop-name">{{ group.shopName }}</text>
|
||
<text class="shop-arrow">></text>
|
||
</view>
|
||
|
||
<!-- 店铺商品 -->
|
||
<view
|
||
v-for="item in group.items"
|
||
:key="item.id"
|
||
class="cart-item"
|
||
>
|
||
<view class="item-select" @click="toggleSelect(item.id)">
|
||
<text v-if="item.selected" class="selected-icon">✓</text>
|
||
<text v-else class="unselected-icon"></text>
|
||
</view>
|
||
|
||
<image
|
||
class="item-image"
|
||
:src="item.image"
|
||
mode="aspectFill"
|
||
@click="navigateToProduct(item)"
|
||
/>
|
||
|
||
<view class="item-info">
|
||
<view class="info-top">
|
||
<text class="item-name">{{ item.name }}</text>
|
||
<text class="item-spec">{{ item.spec }}</text>
|
||
</view>
|
||
|
||
<view class="item-footer">
|
||
<text class="item-price">¥{{ item.price }}</text>
|
||
<view class="quantity-control">
|
||
<text class="quantity-btn" @click="decreaseQuantity(item.id)">-</text>
|
||
<text class="quantity-value">{{ item.quantity }}</text>
|
||
<text class="quantity-btn" @click="increaseQuantity(item.id)">+</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 购物车操作栏 (移至推荐商品上方) -->
|
||
<view v-if="cartItems.length > 0" class="cart-action-bar">
|
||
<view class="action-bar-content">
|
||
<view class="action-left">
|
||
<view class="select-all" @click="toggleSelectAll">
|
||
<text v-if="allSelected" class="selected-icon">✓</text>
|
||
<text v-else class="unselected-icon"></text>
|
||
<text class="select-all-text">全选</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="action-right">
|
||
<view v-if="!isManageMode" class="total-info">
|
||
<text class="total-text">合计:</text>
|
||
<text class="total-price">¥{{ totalPrice }}</text>
|
||
</view>
|
||
<button v-if="!isManageMode" class="checkout-btn" @click="goToCheckout">
|
||
去结算({{ selectedCount }})
|
||
</button>
|
||
<button v-else class="delete-btn" @click="deleteSelectedItems">
|
||
删除({{ selectedCount }})
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐商品 -->
|
||
<view v-if="recommendProducts.length > 0" class="recommend-section">
|
||
<view class="section-header">
|
||
<text class="section-title">猜你喜欢</text>
|
||
</view>
|
||
<view class="recommend-list">
|
||
<view
|
||
v-for="product in recommendProducts"
|
||
:key="product.id"
|
||
class="recommend-item"
|
||
@click="navigateToProduct(product)"
|
||
>
|
||
<image
|
||
class="recommend-image"
|
||
:src="product.image"
|
||
mode="aspectFill"
|
||
/>
|
||
<text class="recommend-name">{{ product.name }}</text>
|
||
<view class="recommend-bottom">
|
||
<text class="recommend-price">¥{{ product.price }}</text>
|
||
<view class="recommend-add-btn" @click.stop="addToCart(product)">
|
||
<text class="recommend-add-icon">+</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部结算栏 - 已移除，移动到内容区域 -->
|
||
<!-- <view v-if="cartItems.length > 0" class="cart-footer">
|
||
<view class="footer-content">
|
||
<view class="footer-left">
|
||
<view class="select-all" @click="toggleSelectAll">
|
||
<text v-if="allSelected" class="selected-icon">✓</text>
|
||
<text v-else class="unselected-icon"></text>
|
||
<text class="select-all-text">全选</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer-right">
|
||
<view v-if="!isManageMode" class="total-info">
|
||
<text class="total-text">合计:</text>
|
||
<text class="total-price">¥{{ totalPrice }}</text>
|
||
</view>
|
||
<button v-if="!isManageMode" class="checkout-btn" @click="goToCheckout">
|
||
去结算({{ selectedCount }})
|
||
</button>
|
||
<button v-else class="delete-btn" @click="deleteSelectedItems">
|
||
删除({{ selectedCount }})
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { supabaseService, type CartItem as SupabaseCartItem, type Product } from '@/utils/supabaseService.uts'
|
||
|
||
// 响应式数据
|
||
const cartItems = ref<any[]>([])
|
||
const recommendProducts = ref<any[]>([])
|
||
const loading = ref<boolean>(false)
|
||
const statusBarHeight = ref(0)
|
||
const isManageMode = ref(false)
|
||
const updatingItems = ref<Set<string>>(new Set()) // Track items being updated to prevent race conditions
|
||
|
||
// 计算属性
|
||
const cartGroups = computed(() => {
|
||
const groups = new Map<string, any>()
|
||
cartItems.value.forEach(item => {
|
||
// Build a unique key for the shop
|
||
const shopKey = item.shopId || 'unknown'
|
||
if (!groups.has(shopKey)) {
|
||
groups.set(shopKey, {
|
||
shopId: item.shopId,
|
||
shopName: item.shopName || '商城优选', // Better default name
|
||
items: [] as any[]
|
||
})
|
||
}
|
||
const group = groups.get(shopKey)
|
||
if (group) {
|
||
group.items.push(item)
|
||
}
|
||
})
|
||
return Array.from(groups.values())
|
||
})
|
||
|
||
const allSelected = computed(() => {
|
||
return cartItems.value.length > 0 && cartItems.value.every(item => item.selected)
|
||
})
|
||
|
||
const selectedCount = computed(() => {
|
||
return cartItems.value.filter(item => item.selected).reduce((sum, item) => sum + item.quantity, 0)
|
||
})
|
||
|
||
const totalPrice = computed(() => {
|
||
return cartItems.value
|
||
.filter(item => item.selected)
|
||
.reduce((sum, item) => sum + item.price * item.quantity, 0)
|
||
.toFixed(2)
|
||
})
|
||
|
||
// 检查店铺是否全选
|
||
const isShopSelected = (shopId: string) => {
|
||
const group = cartGroups.value.find(g => g.shopId === shopId)
|
||
return group ? group.items.every(item => item.selected) : false
|
||
}
|
||
|
||
const toggleManageMode = () => {
|
||
isManageMode.value = !isManageMode.value
|
||
}
|
||
|
||
// 初始化页面数据
|
||
const initPage = () => {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
statusBarHeight.value = systemInfo.statusBarHeight || 0
|
||
}
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
initPage()
|
||
})
|
||
|
||
onShow(() => {
|
||
loadCartData()
|
||
})
|
||
|
||
// 加载数据
|
||
const loadCartData = async () => {
|
||
loading.value = true
|
||
|
||
try {
|
||
// 从Supabase加载购物车数据
|
||
const supabaseCartItems = await supabaseService.getCartItems()
|
||
|
||
// 转换数据格式以匹配前端界面
|
||
const transformedItems = supabaseCartItems.map((item: SupabaseCartItem) => {
|
||
// 调试日志：打印每条商品数据的关键字段
|
||
console.log(`CartItem raw: id=${item.id}, shop_id=${item.shop_id}, shop_name=${item.shop_name}, name=${item.product_name}, price=${item.product_price}`);
|
||
|
||
return {
|
||
id: item.id,
|
||
// 关键修复：确保shopId有值，如果后端返回null/undefined，使用'default_shop'作为分组键
|
||
shopId: (item.shop_id != null && item.shop_id !== '') ? item.shop_id : 'default_shop',
|
||
// 关键修复：确保shopName有值
|
||
shopName: (item.shop_name != null && item.shop_name !== '') ? item.shop_name : '商城优选',
|
||
name: item.product_name || '未知商品',
|
||
price: item.product_price != null ? item.product_price : 0,
|
||
image: item.product_image || '/static/images/default-product.png',
|
||
spec: item.product_specification || '标准规格',
|
||
quantity: item.quantity || 1,
|
||
selected: item.selected || false,
|
||
productId: item.product_id,
|
||
skuId: item.sku_id,
|
||
merchantId: item.merchant_id
|
||
}
|
||
})
|
||
|
||
console.log('Transformed items count:', transformedItems.length);
|
||
cartItems.value = transformedItems
|
||
|
||
// 加载推荐商品（优先获取推荐位商品，如果没有则通过搜索获取热销商品）
|
||
let recommends = await supabaseService.getRecommendedProducts(6)
|
||
|
||
// 如果没有设置推荐商品，则获取热销商品作为补充
|
||
if (recommends.length === 0) {
|
||
const hotResp = await supabaseService.searchProducts('', 1, 6, 'sales')
|
||
recommends = hotResp.data
|
||
}
|
||
|
||
if (recommends.length > 0) {
|
||
recommendProducts.value = recommends.map((p: Product) => {
|
||
return {
|
||
id: p.id,
|
||
shopId: p.merchant_id || 'unknown',
|
||
shopName: p.shop_name || '商城推荐',
|
||
name: p.name,
|
||
price: p.base_price,
|
||
image: p.main_image_url || '/static/images/default-product.png',
|
||
specification: '', // 推荐列表不显示详细规格
|
||
specDetails: {}
|
||
}
|
||
})
|
||
} else {
|
||
recommendProducts.value = []
|
||
}
|
||
} catch (error) {
|
||
console.error('加载购物车数据失败:', error)
|
||
cartItems.value = []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 商品操作 - 更新选中状态到Supabase
|
||
const toggleSelect = async (itemId: string) => {
|
||
// 乐观更新
|
||
const index = cartItems.value.findIndex(item => item.id === itemId)
|
||
if (index !== -1) {
|
||
const newSelected = !cartItems.value[index].selected
|
||
cartItems.value[index].selected = newSelected
|
||
cartItems.value = [...cartItems.value] // 触发响应式更新
|
||
|
||
// 更新到Supabase
|
||
const success = await supabaseService.updateCartItemSelection(itemId, newSelected)
|
||
if (!success) {
|
||
console.error('更新选中状态失败')
|
||
// 恢复状态
|
||
cartItems.value[index].selected = !newSelected
|
||
cartItems.value = [...cartItems.value]
|
||
uni.showToast({ title: '网络异常，请重试', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
|
||
const toggleShopSelect = async (shopId: string) => {
|
||
// 查找该组是否已存在，并判断目标状态
|
||
const group = cartGroups.value.find((g: any) => g.shopId === shopId)
|
||
if (!group) return
|
||
|
||
// 检查当前是否全选: 如果所有都选中，则目标是全不选(false)；否则全选(true)
|
||
const isAllShopSelected = (group.items as any[]).every((item: any) => item.selected)
|
||
const newState = !isAllShopSelected
|
||
|
||
// 获取该店铺下所有商品的ID
|
||
const shopItemIds = cartItems.value
|
||
.filter(item => item.shopId === shopId)
|
||
.map(item => item.id)
|
||
|
||
// 乐观更新本地状态
|
||
const oldStates = new Map<string, boolean>()
|
||
cartItems.value.forEach(item => {
|
||
if (item.shopId === shopId) {
|
||
oldStates.set(item.id, item.selected)
|
||
item.selected = newState
|
||
}
|
||
})
|
||
cartItems.value = [...cartItems.value]
|
||
|
||
// 批量更新到Supabase
|
||
const success = await supabaseService.batchUpdateCartItemSelection(shopItemIds, newState)
|
||
|
||
if (!success) {
|
||
console.error('批量更新店铺商品选中状态失败')
|
||
// 回滚
|
||
cartItems.value.forEach(item => {
|
||
if (item.shopId === shopId && oldStates.has(item.id)) {
|
||
item.selected = oldStates.get(item.id)!
|
||
}
|
||
})
|
||
cartItems.value = [...cartItems.value]
|
||
uni.showToast({
|
||
title: '操作失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const toggleSelectAll = async () => {
|
||
// 目标状态：如果当前全选，则取消全选；否则全选
|
||
const newSelectedState = !allSelected.value
|
||
|
||
// 乐观更新
|
||
const oldItems = JSON.parse(JSON.stringify(cartItems.value))
|
||
const selectedItems = cartItems.value.map(item => ({
|
||
...item,
|
||
selected: newSelectedState
|
||
}))
|
||
cartItems.value = selectedItems
|
||
|
||
// 更新到Supabase
|
||
const itemIds = cartItems.value.map(item => item.id)
|
||
if (itemIds.length === 0) return
|
||
|
||
const success = await supabaseService.batchUpdateCartItemSelection(itemIds, newSelectedState)
|
||
|
||
if (!success) {
|
||
console.error('批量更新选中状态失败')
|
||
cartItems.value = oldItems
|
||
uni.showToast({
|
||
title: '操作失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const increaseQuantity = async (itemId: string) => {
|
||
if (updatingItems.value.has(itemId)) return
|
||
|
||
const index = cartItems.value.findIndex(item => item.id === itemId)
|
||
if (index !== -1) {
|
||
updatingItems.value.add(itemId)
|
||
const newQuantity = cartItems.value[index].quantity + 1
|
||
cartItems.value[index].quantity = newQuantity
|
||
cartItems.value = [...cartItems.value]
|
||
|
||
// 更新到Supabase
|
||
const success = await supabaseService.updateCartItemQuantity(itemId, newQuantity)
|
||
updatingItems.value.delete(itemId)
|
||
|
||
if (!success) {
|
||
console.error('更新商品数量失败')
|
||
// 恢复状态
|
||
cartItems.value[index].quantity = newQuantity - 1
|
||
cartItems.value = [...cartItems.value]
|
||
uni.showToast({ title: '更新失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
|
||
const decreaseQuantity = async (itemId: string) => {
|
||
if (updatingItems.value.has(itemId)) return
|
||
|
||
const index = cartItems.value.findIndex(item => item.id === itemId)
|
||
if (index !== -1) {
|
||
if (cartItems.value[index].quantity > 1) {
|
||
updatingItems.value.add(itemId)
|
||
const newQuantity = cartItems.value[index].quantity - 1
|
||
cartItems.value[index].quantity = newQuantity
|
||
cartItems.value = [...cartItems.value]
|
||
|
||
// 更新到Supabase
|
||
const success = await supabaseService.updateCartItemQuantity(itemId, newQuantity)
|
||
updatingItems.value.delete(itemId)
|
||
|
||
if (!success) {
|
||
console.error('更新商品数量失败')
|
||
// 恢复状态
|
||
cartItems.value[index].quantity = newQuantity + 1
|
||
cartItems.value = [...cartItems.value]
|
||
uni.showToast({ title: '更新失败', icon: 'none' })
|
||
}
|
||
} else {
|
||
// 数量为1时，询问是否删除
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要从购物车移除该商品吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
// 从Supabase删除
|
||
const success = await supabaseService.deleteCartItem(itemId)
|
||
if (success) {
|
||
cartItems.value.splice(index, 1)
|
||
cartItems.value = [...cartItems.value]
|
||
uni.showToast({
|
||
title: '已移除',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
console.error('删除商品失败')
|
||
uni.showToast({
|
||
title: '删除失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 删除商品 - 增加保存逻辑
|
||
const deleteSelectedItems = async () => {
|
||
if (selectedCount.value === 0) {
|
||
uni.showToast({
|
||
title: '请选择要删除的商品',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `确定要删除选中的 ${selectedCount.value} 件商品吗？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
// 获取选中的商品ID
|
||
const selectedItemIds = cartItems.value
|
||
.filter(item => item.selected)
|
||
.map(item => item.id)
|
||
|
||
// 批量删除到Supabase
|
||
const success = await supabaseService.batchDeleteCartItems(selectedItemIds)
|
||
|
||
if (success) {
|
||
// 从本地列表移除
|
||
cartItems.value = cartItems.value.filter(item => !item.selected)
|
||
|
||
// 如果购物车删空了，退出管理模式
|
||
if (cartItems.value.length === 0) {
|
||
isManageMode.value = false
|
||
}
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success'
|
||
})
|
||
} else {
|
||
console.error('批量删除商品失败')
|
||
uni.showToast({
|
||
title: '删除失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const addToCart = async (product: any) => {
|
||
try {
|
||
// 调用SupabaseService添加商品到购物车
|
||
const success = await supabaseService.addToCart(product.id, 1, product.skuId)
|
||
if (success) {
|
||
uni.showToast({
|
||
title: '已添加到购物车',
|
||
icon: 'success'
|
||
})
|
||
|
||
// 重新加载购物车数据
|
||
loadCartData()
|
||
} else {
|
||
console.error('添加商品到购物车失败')
|
||
uni.showToast({
|
||
title: '添加失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('添加商品到购物车异常:', error)
|
||
uni.showToast({
|
||
title: '添加失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 导航函数
|
||
const goShopping = () => {
|
||
uni.switchTab({ url: '/pages/mall/consumer/index' })
|
||
}
|
||
|
||
const navigateToProduct = (product: any) => {
|
||
// 使用productId（如果存在）作为跳转的商品ID，否则使用id
|
||
const productId = product.productId || product.id
|
||
// 传递完整的参数，确保商品详情页能正确加载
|
||
const params = new URLSearchParams()
|
||
params.append('id', productId)
|
||
params.append('productId', productId)
|
||
params.append('price', product.price?.toString() || '0')
|
||
// 商品详情页期望的参数名是originalPrice
|
||
params.append('originalPrice', (product.original_price || product.originalPrice || (product.price * 1.2).toFixed(2))?.toString())
|
||
params.append('name', encodeURIComponent(product.name || ''))
|
||
params.append('image', encodeURIComponent(product.image || '/static/product1.jpg'))
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/mall/consumer/product-detail?${params.toString()}`
|
||
})
|
||
}
|
||
|
||
const goToCheckout = () => {
|
||
if (selectedCount.value === 0) {
|
||
uni.showToast({
|
||
title: '请选择商品',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 获取选中的商品 (直接过滤cartItems，不依赖cartGroups，确保扁平化传递)
|
||
const selectedItems = cartItems.value
|
||
.filter(item => item.selected)
|
||
.map(item => ({
|
||
id: item.id,
|
||
product_id: item.productId || item.id,
|
||
sku_id: item.skuId || item.id,
|
||
product_name: item.name,
|
||
shop_id: item.shopId, // 关键：保留shopId用于分组
|
||
shop_name: item.shopName, // 关键：保留shopName
|
||
merchant_id: item.merchantId,
|
||
product_image: item.image,
|
||
sku_specifications: item.spec,
|
||
price: Number(item.price), // 确保是数字
|
||
quantity: Number(item.quantity) // 确保是数字
|
||
}))
|
||
|
||
// 关键修复：将结算数据写入 Storage，确保 checkout 页面能稳定获取
|
||
uni.setStorageSync('checkout_type', 'cart')
|
||
// 使用纯JSON序列化防止复杂对象引发的问题
|
||
try {
|
||
uni.setStorageSync('checkout_items', JSON.stringify(selectedItems))
|
||
} catch (e) {
|
||
console.error('存储结算数据失败', e)
|
||
uni.showToast({ title: '系统异常，请重试', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
// 跳转到结算页面并传递数据
|
||
uni.navigateTo({
|
||
url: '/pages/mall/consumer/checkout',
|
||
success: (res) => {
|
||
// 通过eventChannel传递数据 (作为备份)
|
||
res.eventChannel.emit('acceptData', {
|
||
selectedItems: selectedItems
|
||
})
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.cart-page {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 智能导航栏 */
|
||
.smart-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
|
||
z-index: 1000;
|
||
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.nav-container {
|
||
padding: 0 16px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
height: 44px; /* 统一高度 44px */
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
|
||
.nav-actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 14px;
|
||
margin-right: 4px;
|
||
color: white;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 12px;
|
||
color: white;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 导航栏占位符 */
|
||
.navbar-placeholder {
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 内容区 */
|
||
.cart-content {
|
||
flex: 1;
|
||
height: 0; /* 配合 flex: 1 实现自适应滚动 */
|
||
padding-bottom: 60px; /* 为底部结算栏留出空间 */
|
||
}
|
||
|
||
/* 空购物车 */
|
||
.empty-cart {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 80px;
|
||
color: #ddd;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 18px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.go-shopping-btn {
|
||
background-color: #ff5000;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 25px;
|
||
padding: 10px 40px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 购物车商品列表 */
|
||
.cart-list {
|
||
background-color: transparent; /* 背景透明，因为每个店铺有自己的卡片 */
|
||
margin: 10px;
|
||
border-radius: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.shop-group {
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.shop-header {
|
||
display: flex;
|
||
flex-direction: row; /* 强制横向排列 */
|
||
align-items: center;
|
||
justify-content: flex-start; /* 靠左对齐 */
|
||
padding: 12px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.shop-select {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
flex-shrink: 0; /* 防止被压缩 */
|
||
}
|
||
|
||
.shop-icon {
|
||
font-size: 16px;
|
||
margin-right: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.shop-name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-right: 4px;
|
||
/* 自适应宽度，但不超过剩余空间 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.shop-arrow {
|
||
font-size: 12px;
|
||
color: #999;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cart-item {
|
||
display: flex;
|
||
flex-direction: row; /* 显式横向排列 */
|
||
padding: 12px; /* 减小内边距 */
|
||
border-bottom: 1px solid #f5f5f5;
|
||
align-items: center;
|
||
height: 100px; /* 固定高度节省空间 */
|
||
}
|
||
|
||
.cart-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-select {
|
||
width: 30px; /* 减小选择框区域 */
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.selected-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: #ff5000;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.unselected-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.item-image {
|
||
width: 70px; /* 减小图片尺寸 */
|
||
height: 70px;
|
||
border-radius: 6px;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 70px; /* 与图片高度一致 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.info-top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 14px; /* 稍微减小字体 */
|
||
color: #333;
|
||
margin-bottom: 2px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1; /* 单行显示 */
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.item-spec {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-bottom: auto; /* 自动占据中间空间 */
|
||
}
|
||
|
||
.item-footer {
|
||
display: flex;
|
||
flex-direction: row; /* 显式设置横向排列 */
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%; /* 确保占满宽度 */
|
||
}
|
||
|
||
.item-price {
|
||
font-size: 16px;
|
||
color: #ff5000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.quantity-control {
|
||
display: flex;
|
||
flex-direction: row; /* 显式设置横向排列 */
|
||
align-items: center;
|
||
background-color: #f5f5f5;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
height: 24px;
|
||
}
|
||
|
||
.quantity-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.quantity-value {
|
||
width: 30px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
/* 推荐商品 */
|
||
.recommend-section {
|
||
margin: 20px 10px;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.recommend-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr); /* 手机端默认双列 */
|
||
gap: 12px;
|
||
}
|
||
|
||
.recommend-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.recommend-image {
|
||
width: 100%;
|
||
aspect-ratio: 1; /* 保持正方形比例 */
|
||
height: auto; /* 自动高度 */
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.recommend-name {
|
||
font-size: 13px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
line-height: 1.4;
|
||
height: 36px;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.recommend-bottom {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.recommend-price {
|
||
font-size: 15px;
|
||
color: #ff5000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.recommend-add-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
background-color: #ff5000;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.recommend-add-icon {
|
||
color: white;
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 响应式布局优化 */
|
||
@media screen and (min-width: 768px) {
|
||
.cart-list,
|
||
.recommend-section {
|
||
margin: 20px auto;
|
||
max-width: 95%;
|
||
}
|
||
|
||
.recommend-list {
|
||
grid-template-columns: repeat(4, 1fr); /* 平板显示4列 */
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px) {
|
||
/* 桌面端整体布局调整 */
|
||
.cart-content {
|
||
padding: 20px 40px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.cart-list,
|
||
.recommend-section {
|
||
margin: 20px auto;
|
||
max-width: 1200px; /* 限制最大宽度 */
|
||
}
|
||
|
||
/* 店铺分组在桌面端显示为网格布局 */
|
||
.shop-group {
|
||
display: block;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.shop-header {
|
||
background: white;
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
padding: 16px 24px;
|
||
}
|
||
|
||
/* 购物车商品列表转为列表布局 */
|
||
.cart-item {
|
||
background: white;
|
||
border-radius: 0;
|
||
padding: 15px 30px;
|
||
height: 80px; /* 固定高度 */
|
||
border-bottom: 1px solid #eee;
|
||
box-shadow: none;
|
||
display: flex;
|
||
flex-direction: row; /* 显式设置横向排列 */
|
||
align-items: center; /* 垂直居中 */
|
||
width: 100%;
|
||
}
|
||
|
||
.cart-item:hover {
|
||
background-color: #f9f9f9;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.item-image {
|
||
width: 50px;
|
||
height: 50px;
|
||
margin-right: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row; /* 信息区域横向排列 */
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
overflow: visible;
|
||
}
|
||
|
||
.info-top {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row; /* 名称和规格横向排列 */
|
||
align-items: center;
|
||
margin-right: 20px;
|
||
height: 100%;
|
||
}
|
||
|
||
.item-name {
|
||
font-size: 14px;
|
||
width: 250px; /* 固定名称宽度 */
|
||
margin-right: 20px;
|
||
/* 限制行数 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.item-spec {
|
||
width: 150px;
|
||
margin-bottom: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item-footer {
|
||
width: auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 40px;
|
||
height: 100%;
|
||
}
|
||
|
||
.item-price {
|
||
width: 100px;
|
||
text-align: right;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.quantity-control {
|
||
margin-left: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
/* 推荐商品优化 */
|
||
.recommend-list {
|
||
grid-template-columns: repeat(5, 1fr); /* 桌面端显示5列 */
|
||
gap: 20px;
|
||
}
|
||
|
||
.recommend-image {
|
||
height: 200px; /* 强制高度 */
|
||
}
|
||
|
||
/* 底部结算栏优化 */
|
||
.cart-footer {
|
||
padding: 0 40px;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.footer-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1400px) {
|
||
.cart-list,
|
||
.recommend-section {
|
||
max-width: 1400px;
|
||
}
|
||
|
||
/* 大屏下购物车商品显示3列 - 移除，保持单列列表 */
|
||
/* .cart-list .shop-group > view:not(.shop-header) {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
} */
|
||
|
||
.recommend-list {
|
||
grid-template-columns: repeat(6, 1fr); /* 大屏幕显示6列 */
|
||
}
|
||
|
||
.footer-content {
|
||
max-width: 1400px;
|
||
}
|
||
}
|
||
|
||
/* 购物车操作栏样式 - 自适应横向排列 */
|
||
.cart-action-bar {
|
||
background-color: white;
|
||
margin: 10px;
|
||
border-radius: 12px;
|
||
padding: 10px 15px; /* 减小内边距 */
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.action-bar-content {
|
||
display: flex;
|
||
flex-direction: row; /* 强制横向 */
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.action-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.action-right {
|
||
display: flex;
|
||
flex-direction: row; /* 强制横向 */
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 合计信息区域 */
|
||
.total-info {
|
||
display: flex;
|
||
flex-direction: row; /* 强制横向 */
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
flex-shrink: 1; /* 允许压缩 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.total-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-right: 2px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 16px;
|
||
color: #ff5000;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 结算按钮 */
|
||
.checkout-btn, .delete-btn {
|
||
background-color: #ff5000;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 25px;
|
||
padding: 6px 16px; /* 减小按钮内边距 */
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
margin: 0; /* 移除可能的margin */
|
||
}
|
||
|
||
.delete-btn {
|
||
background-color: #ff3b30;
|
||
padding: 6px 20px;
|
||
}
|
||
|
||
/* 全选区域 */
|
||
.select-all {
|
||
display: flex;
|
||
flex-direction: row; /* 强制横向 */
|
||
align-items: center;
|
||
}
|
||
|
||
.select-all-text {
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
/* 手机端小屏幕优化 */
|
||
@media screen and (max-width: 375px) {
|
||
.cart-action-bar {
|
||
padding: 10px;
|
||
margin: 10px 5px; /* 减小外边距增加可用宽度 */
|
||
}
|
||
|
||
.total-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.checkout-btn, .delete-btn {
|
||
padding: 6px 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.select-all-text {
|
||
font-size: 13px;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
|
||
/* 平板端优化 */
|
||
@media screen and (min-width: 768px) {
|
||
.cart-action-bar {
|
||
margin: 20px auto;
|
||
max-width: 95%;
|
||
padding: 20px;
|
||
}
|
||
|
||
.action-bar-content {
|
||
gap: 20px;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.checkout-btn, .delete-btn {
|
||
padding: 10px 30px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
/* 桌面端优化 */
|
||
@media screen and (min-width: 1024px) {
|
||
.cart-action-bar {
|
||
max-width: 1200px;
|
||
padding: 20px 30px;
|
||
}
|
||
|
||
.action-bar-content {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.total-info {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.total-text {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.checkout-btn, .delete-btn {
|
||
padding: 12px 40px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.select-all-text {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
/* 大屏幕优化 */
|
||
@media screen and (min-width: 1400px) {
|
||
.cart-action-bar {
|
||
max-width: 1400px;
|
||
}
|
||
}
|
||
</style>
|