338 lines
7.4 KiB
Vue
338 lines
7.4 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import { useCartStore } from '@/pinia/stores/cart'
|
|||
|
|
import { useProductStore } from '@/pinia/stores/product'
|
|||
|
|
import { storeToRefs } from 'pinia'
|
|||
|
|
|
|||
|
|
// 定义组件事件：关闭详情
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'cartClose'): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
// 状态管理
|
|||
|
|
const cartStore = useCartStore()
|
|||
|
|
const { cartItems, totalPrice, totalQuantity } = storeToRefs(cartStore)
|
|||
|
|
|
|||
|
|
// 引入 productStore 获取 selectedShop
|
|||
|
|
const productStore = useProductStore()
|
|||
|
|
const { selectedShop } = storeToRefs(productStore)
|
|||
|
|
|
|||
|
|
// 判断当前是否为租用模式 (mode 为 3)
|
|||
|
|
const isRentingMode = computed(() => selectedShop.value?.mode === 3)
|
|||
|
|
|
|||
|
|
// 根据模式选择渲染的列表
|
|||
|
|
const currentItems = computed(() => {
|
|||
|
|
return isRentingMode.value ? [] : cartItems.value // 简化处理，暂不支持租用模式
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 根据模式选择渲染的总数量
|
|||
|
|
const currentTotalQuantity = computed(() => {
|
|||
|
|
return isRentingMode.value ? 0 : totalQuantity.value
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 处理关闭按钮点击事件
|
|||
|
|
function handleClose() {
|
|||
|
|
emit('cartClose')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通用处理添加到购物车或租用购物车（递增数量）
|
|||
|
|
function handleAddItem(item: any) {
|
|||
|
|
if (!isRentingMode.value && 'id' in item) {
|
|||
|
|
cartStore.addToCart(item)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通用处理从购物车或租用购物车移除（递减数量）
|
|||
|
|
function handleRemoveItem(item: any) {
|
|||
|
|
if (!isRentingMode.value && 'id' in item) {
|
|||
|
|
cartStore.removeFromCart(item.cellId)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通用清空购物车或租用购物车
|
|||
|
|
function handleClearCartOrRentingCart() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: `确认清空购物车吗？`,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
if (isRentingMode.value) {
|
|||
|
|
// rentingCabinetStore.clearRentingCart()
|
|||
|
|
} else {
|
|||
|
|
cartStore.clearCart()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 结算方法
|
|||
|
|
function handleCheckout() {
|
|||
|
|
handleClose()
|
|||
|
|
// emit事件由父组件处理
|
|||
|
|
// router.push("/product/checkout")
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="cart-container">
|
|||
|
|
<!-- 顶部操作栏 -->
|
|||
|
|
<view class="flex-header">
|
|||
|
|
<view class="clear-header">
|
|||
|
|
<view class="clear-btn" @click="handleClearCartOrRentingCart">
|
|||
|
|
<wd-icon name="delete" size="16px" color="#F56C6C"></wd-icon>
|
|||
|
|
<text style="margin-left: 4px">清空购物车</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view class="product-list" scroll-y>
|
|||
|
|
<template v-if="currentItems.length">
|
|||
|
|
<view v-for="item in currentItems" :key="item.product.id" class="product-item">
|
|||
|
|
<view class="product-content">
|
|||
|
|
<wd-img
|
|||
|
|
:src="item.product.image"
|
|||
|
|
width="80"
|
|||
|
|
height="80"
|
|||
|
|
border-radius="4"
|
|||
|
|
>
|
|||
|
|
<template #error>
|
|||
|
|
<view class="custom-error">图片加载失败</view>
|
|||
|
|
</template>
|
|||
|
|
</wd-img>
|
|||
|
|
|
|||
|
|
<view class="product-info">
|
|||
|
|
<view class="product-name">
|
|||
|
|
{{ item.product.name }}
|
|||
|
|
</view>
|
|||
|
|
<view class="product-price">
|
|||
|
|
¥{{ item.product.price.toFixed(2) }}
|
|||
|
|
</view>
|
|||
|
|
<view class="action-row">
|
|||
|
|
<text v-if="item.product.stock > 0" class="stock-count">
|
|||
|
|
还剩{{ item.product.stock }}份
|
|||
|
|
</text>
|
|||
|
|
<view class="cart-actions">
|
|||
|
|
<view
|
|||
|
|
class="cart-btn-minus"
|
|||
|
|
@click.stop="handleRemoveItem(item.product)"
|
|||
|
|
>
|
|||
|
|
<wd-icon name="minus" size="12px" color="#F56C6C"></wd-icon>
|
|||
|
|
</view>
|
|||
|
|
<text class="cart-count">{{ item.quantity }}</text>
|
|||
|
|
<view
|
|||
|
|
class="cart-btn-plus"
|
|||
|
|
@click.stop="handleAddItem(item.product)"
|
|||
|
|
>
|
|||
|
|
<wd-icon name="add" size="12px" color="#fff"></wd-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<view v-else class="empty-cart">
|
|||
|
|
<wd-icon name="shopping-cart" size="60px" color="#ddd"></wd-icon>
|
|||
|
|
<text class="empty-text">购物车是空的</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部购物车栏 -->
|
|||
|
|
<view v-if="currentItems.length" class="shopping-cart-bar">
|
|||
|
|
<view class="cart-info" @click.stop="handleClose()">
|
|||
|
|
<wd-badge :model-value="currentTotalQuantity" right="0" top="0">
|
|||
|
|
<wd-icon name="shopping-cart" size="24px"></wd-icon>
|
|||
|
|
</wd-badge>
|
|||
|
|
<text class="total-price">
|
|||
|
|
合计：¥{{ totalPrice.toFixed(2) }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="checkout-btn" @click="handleCheckout">
|
|||
|
|
去结算
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.cart-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 80vh;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
background: #fff;
|
|||
|
|
z-index: 1000;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|||
|
|
padding: 10px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear-header {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clear-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border: 1px solid #F56C6C;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-list {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 10px 16px 60px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-item {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding: 12px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-content {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 80px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-price {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
margin-top: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stock-count {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #bbbbbb;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cart-actions {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
margin-left: auto;
|
|||
|
|
|
|||
|
|
.cart-count {
|
|||
|
|
font-size: 12px;
|
|||
|
|
min-width: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cart-btn-minus,
|
|||
|
|
.cart-btn-plus {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #F56C6C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cart-btn-minus {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #F56C6C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-error {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #969799;
|
|||
|
|
font-size: 12px;
|
|||
|
|
background: #f7f8fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shopping-cart-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 50px;
|
|||
|
|
background: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cart-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total-price {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkout-btn {
|
|||
|
|
background-color: #F56C6C;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 0 24px;
|
|||
|
|
height: 36px;
|
|||
|
|
line-height: 36px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-cart {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 400px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
</style>
|