You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
3.2 KiB
63 lines
3.2 KiB
<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>
|