529 lines
12 KiB
Plaintext
529 lines
12 KiB
Plaintext
<!-- pages/mall/consumer/cart.uvue -->
|
|
<template>
|
|
<view class="cart-page">
|
|
<!-- 顶部标题 -->
|
|
<view class="cart-header">
|
|
<text class="header-title">购物车</text>
|
|
</view>
|
|
|
|
<!-- 购物车内容 -->
|
|
<scroll-view scroll-y class="cart-content">
|
|
<!-- 空购物车 -->
|
|
<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="item in cartItems"
|
|
: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">
|
|
<text class="item-name">{{ item.name }}</text>
|
|
<text class="item-spec">{{ item.spec }}</text>
|
|
|
|
<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 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>
|
|
<text class="recommend-price">¥{{ product.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部结算栏 -->
|
|
<view v-if="cartItems.length > 0" class="cart-footer">
|
|
<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 class="total-info">
|
|
<text class="total-text">合计:</text>
|
|
<text class="total-price">¥{{ totalPrice }}</text>
|
|
</view>
|
|
<button class="checkout-btn" @click="goToCheckout">
|
|
去结算({{ selectedCount }})
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
|
|
// 响应式数据
|
|
const cartItems = ref<any[]>([])
|
|
const recommendProducts = ref<any[]>([])
|
|
const loading = ref<boolean>(false)
|
|
|
|
// Mock 购物车数据
|
|
const mockCartItems = [
|
|
{
|
|
id: '1',
|
|
name: '无线蓝牙耳机',
|
|
price: 299,
|
|
image: 'https://picsum.photos/100/100?random=1',
|
|
spec: '白色',
|
|
quantity: 1,
|
|
selected: true
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '运动T恤',
|
|
price: 79,
|
|
image: 'https://picsum.photos/100/100?random=2',
|
|
spec: '黑色 L',
|
|
quantity: 2,
|
|
selected: true
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '智能手环',
|
|
price: 199,
|
|
image: 'https://picsum.photos/100/100?random=3',
|
|
spec: '黑色',
|
|
quantity: 1,
|
|
selected: false
|
|
}
|
|
]
|
|
|
|
const mockRecommendProducts = [
|
|
{
|
|
id: '101',
|
|
name: '保温杯',
|
|
price: 49,
|
|
image: 'https://picsum.photos/100/100?random=4'
|
|
},
|
|
{
|
|
id: '102',
|
|
name: '电动牙刷',
|
|
price: 89,
|
|
image: 'https://picsum.photos/100/100?random=5'
|
|
},
|
|
{
|
|
id: '103',
|
|
name: '运动鞋',
|
|
price: 199,
|
|
image: 'https://picsum.photos/100/100?random=6'
|
|
}
|
|
]
|
|
|
|
// 计算属性
|
|
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)
|
|
})
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
loadCartData()
|
|
})
|
|
|
|
// 加载数据
|
|
const loadCartData = () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
cartItems.value = [...mockCartItems]
|
|
recommendProducts.value = [...mockRecommendProducts]
|
|
loading.value = false
|
|
}, 500)
|
|
}
|
|
|
|
// 商品操作
|
|
const toggleSelect = (itemId: string) => {
|
|
const index = cartItems.value.findIndex(item => item.id === itemId)
|
|
if (index !== -1) {
|
|
cartItems.value[index].selected = !cartItems.value[index].selected
|
|
cartItems.value = [...cartItems.value] // 触发响应式更新
|
|
}
|
|
}
|
|
|
|
const toggleSelectAll = () => {
|
|
const newSelectedState = !allSelected.value
|
|
cartItems.value = cartItems.value.map(item => ({
|
|
...item,
|
|
selected: newSelectedState
|
|
}))
|
|
}
|
|
|
|
const increaseQuantity = (itemId: string) => {
|
|
const index = cartItems.value.findIndex(item => item.id === itemId)
|
|
if (index !== -1) {
|
|
cartItems.value[index].quantity++
|
|
cartItems.value = [...cartItems.value]
|
|
}
|
|
}
|
|
|
|
const decreaseQuantity = (itemId: string) => {
|
|
const index = cartItems.value.findIndex(item => item.id === itemId)
|
|
if (index !== -1 && cartItems.value[index].quantity > 1) {
|
|
cartItems.value[index].quantity--
|
|
cartItems.value = [...cartItems.value]
|
|
}
|
|
}
|
|
|
|
// 导航函数
|
|
const goShopping = () => {
|
|
uni.switchTab({ url: '/pages/mall/consumer/index' })
|
|
}
|
|
|
|
const navigateToProduct = (product: any) => {
|
|
uni.navigateTo({ url: `/pages/mall/consumer/product-detail?id=${product.id}` })
|
|
}
|
|
|
|
const goToCheckout = () => {
|
|
if (selectedCount.value === 0) {
|
|
uni.showToast({
|
|
title: '请选择商品',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({ url: '/pages/mall/consumer/checkout' })
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.cart-page {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 头部 */
|
|
.cart-header {
|
|
background-color: white;
|
|
padding: 15px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 内容区 */
|
|
.cart-content {
|
|
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: white;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cart-item {
|
|
display: flex;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-select {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.selected-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #ff5000;
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.unselected-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.item-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.item-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.item-name {
|
|
font-size: 15px;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
}
|
|
|
|
.item-spec {
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.item-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-price {
|
|
font-size: 18px;
|
|
color: #ff5000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.quantity-control {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f5f5f5;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.quantity-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
.quantity-value {
|
|
width: 40px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* 推荐商品 */
|
|
.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(3, 1fr);
|
|
gap: 15px;
|
|
}
|
|
|
|
.recommend-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.recommend-image {
|
|
width: 100%;
|
|
height: 100px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.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-price {
|
|
font-size: 15px;
|
|
color: #ff5000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 底部结算栏 */
|
|
.cart-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
background-color: white;
|
|
border-top: 1px solid #eee;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.footer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.select-all {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.select-all-text {
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.footer-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.total-info {
|
|
margin-right: 15px;
|
|
text-align: right;
|
|
}
|
|
|
|
.total-text {
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.total-price {
|
|
font-size: 18px;
|
|
color: #ff5000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.checkout-btn {
|
|
background-color: #ff5000;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 25px;
|
|
padding: 8px 20px;
|
|
font-size: 14px;
|
|
}
|
|
</style> |