nostrmarket/static/components/shopping-cart/shopping-cart.html
2023-03-23 16:34:26 +00:00

53 lines
1.6 KiB
HTML

<q-btn dense round flat icon="shopping_cart">
<q-badge v-if="cart.size" color="red" class="text-bold" floating>
{{ cart.size }}
</q-badge>
<q-menu v-if="cart.size">
<q-list style="min-width: 100px">
<q-item :id="p.id" :key="p.id" v-for="p in cartMenu">
<q-btn color="red" size="xs" icon="remove" @click="remove(p.id)" />
<q-item-section>
<span class="text-center q-ma-xs">{{p.quantity}} x </span>
</q-item-section>
<q-btn color="green" size="xs" icon="add" @click="add(p.id)" />
<q-item-section avatar v-if="p.image">
<q-avatar color="primary">
<img :src="p.image" />
</q-avatar>
</q-item-section>
<q-item-section top class="q-mx-sm">
<q-item-label>{{ p.name }}</q-item-label>
</q-item-section>
<q-item-section side>
<span>
{{p.currency != 'sat' ? p.formatedPrice : p.price + 'sats'}}
<q-btn
class="q-ml-md"
round
color="red"
size="xs"
icon="close"
@click="$emit('remove-from-cart', p)"
/>
</span>
</q-item-section>
</q-item>
<q-separator />
</q-list>
<div class="row q-pa-md q-gutter-md">
<q-btn
color="primary"
icon-right="checkout"
label="Checkout"
@click="$emit('open-checkout')"
></q-btn>
<q-btn
class="q-ml-auto"
flat
color="primary"
label="Reset"
@click="$emit('reset-cart')"
></q-btn></div></q-menu
></q-btn>