|
|
@ -1,63 +0,0 @@ |
|
|
<template> |
|
|
|
|
|
<view class="cart-popup" :class="{ show: visible }"> |
|
|
|
|
|
<view class="popup-header"> |
|
|
|
|
|
<text class="popup-title">购物车 ({{ items.length }})</text> |
|
|
|
|
|
<text class="popup-clear" @tap="onClear">清空</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<scroll-view class="popup-body" scroll-y> |
|
|
|
|
|
<view v-for="item in items" :key="item.product.id" class="cart-item"> |
|
|
|
|
|
<text class="cart-item-emoji">{{ item.product.emoji }}</text> |
|
|
|
|
|
<view class="cart-item-info"> |
|
|
|
|
|
<text class="cart-item-name">{{ item.product.name }}</text> |
|
|
|
|
|
<text class="cart-item-alc" v-if="item.product.alc > 0">{{ item.product.alc }}%</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="cart-item-qty"> |
|
|
|
|
|
<text class="qty-btn" @tap="onQty(item.product.id, -1)">−</text> |
|
|
|
|
|
<text class="qty-num">{{ item.qty }}</text> |
|
|
|
|
|
<text class="qty-btn" @tap="onQty(item.product.id, 1)">+</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</scroll-view> |
|
|
|
|
|
<view class="popup-footer"> |
|
|
|
|
|
<text class="popup-total">共 {{ cart.totalCount }} 件</text> |
|
|
|
|
|
<button class="popup-submit" @tap="onSubmit" :disabled="items.length===0">去呼唤调酒师</button> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
import { useCartStore } from '@/stores/cart' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
|
name: 'CartPopup', |
|
|
|
|
|
props: { visible: { type: Boolean, default: false }, items: { type: Array, default: () => [] } }, |
|
|
|
|
|
emits: ['close', 'submit'], |
|
|
|
|
|
setup(props, { emit }) { |
|
|
|
|
|
const cart = useCartStore() |
|
|
|
|
|
function onQty(id, d) { cart.updateQty(id, (cart.items.find(i=>i.product.id===id)||{}).qty + d) } |
|
|
|
|
|
function onClear() { cart.clearCart() } |
|
|
|
|
|
function onSubmit() { emit('submit') } |
|
|
|
|
|
return { cart, onQty, onClear, onSubmit } |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
.cart-popup{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);border-radius:32rpx 32rpx 0 0;z-index:200;transform:translateY(100%);transition:transform .3s;max-height:60vh;display:flex;flex-direction:column} |
|
|
|
|
|
.cart-popup.show{transform:translateY(0)} |
|
|
|
|
|
.popup-header{display:flex;justify-content:space-between;padding:24rpx 28rpx;border-bottom:1px solid var(--border)} |
|
|
|
|
|
.popup-title{font-size:30rpx;font-weight:700;color:var(--text)} |
|
|
|
|
|
.popup-clear{font-size:24rpx;color:var(--red)} |
|
|
|
|
|
.popup-body{flex:1;padding:0 28rpx;max-height:400rpx} |
|
|
|
|
|
.cart-item{display:flex;align-items:center;padding:20rpx 0;border-bottom:1px solid var(--border);gap:16rpx} |
|
|
|
|
|
.cart-item-emoji{font-size:44rpx} |
|
|
|
|
|
.cart-item-info{flex:1} |
|
|
|
|
|
.cart-item-name{font-size:28rpx;font-weight:600;color:var(--text);display:block} |
|
|
|
|
|
.cart-item-alc{font-size:22rpx;color:var(--gold-light)} |
|
|
|
|
|
.cart-item-qty{display:flex;align-items:center;gap:20rpx} |
|
|
|
|
|
.qty-btn{width:48rpx;height:48rpx;border-radius:50%;background:var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:32rpx;font-weight:700} |
|
|
|
|
|
.qty-num{font-size:28rpx;color:var(--text);min-width:40rpx;text-align:center} |
|
|
|
|
|
.popup-footer{display:flex;align-items:center;padding:20rpx 28rpx;padding-bottom:calc(20rpx + var(--safe-b));border-top:1px solid var(--border);gap:20rpx} |
|
|
|
|
|
.popup-total{font-size:28rpx;color:var(--text-dim)} |
|
|
|
|
|
.popup-submit{flex:1;height:80rpx;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;border:none;font-size:28rpx;font-weight:700} |
|
|
|
|
|
</style> |
|
|
|