61 lines
1.8 KiB
HTML
61 lines
1.8 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-item-section style="flex-flow: row">
|
|
<q-btn color="red" size="xs" icon="remove" @click="remove(p.id)" />
|
|
<q-input
|
|
v-model.number="p.quantity"
|
|
@change="addQty(p.id, p.quantity)"
|
|
type="number"
|
|
dense
|
|
standout
|
|
:max="products.find(pr => pr.id == p.id).quantity"
|
|
></q-input>
|
|
|
|
<q-btn color="green" size="xs" icon="add" @click="add(p.id)" />
|
|
</q-item-section>
|
|
<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="removeProduct(p.id)"
|
|
/>
|
|
</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>
|