135 lines
No EOL
5.3 KiB
HTML
135 lines
No EOL
5.3 KiB
HTML
<div>
|
|
<q-card v-if="cart && stall" bordered class="q-mb-md">
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar>
|
|
<img v-if="cart.merchant?.profile?.picture" :src="cart.merchant?.profile?.picture">
|
|
<img v-else src="/nostrmarket/static/images/blank-avatar.webp">
|
|
</q-avatar>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<strong>
|
|
<span v-text="cart.products[0]?.stallName"></span>
|
|
</strong>
|
|
</q-item-label>
|
|
<q-item-label caption>
|
|
By <span v-text="cart.merchant?.profile?.name || cart.merchant?.publicKey"></span>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section horizontal>
|
|
<q-card-section class="col-7">
|
|
<div class="row q-mt-md">
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<strong>Subtotal:</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<strong>{{formatCurrency(cartTotal, stall.currency)}}</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row q-mt-md">
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<strong>Shipping:</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<strong v-if="shippingZone">{{formatCurrency(shippingZone.cost, stall.currency)}}</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<q-btn-dropdown unelevated color="secondary" rounded :label="shippingZoneLabel">
|
|
<q-item v-for="zone of stall.shipping" @click="selectShippingZone(zone)"
|
|
:key="zone.id" clickable v-close-popup>
|
|
<q-item-section>
|
|
<q-item-label><span v-text="zone.name"></span></q-item-label>
|
|
<q-item-label caption><span
|
|
v-text="zone.countries?.join(', ')"></span></q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
|
|
</div>
|
|
<q-separator class="q-mt-sm" />
|
|
<div class="row q-mt-md">
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<strong>Total:</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
<strong>{{formatCurrency(cartTotalWithShipping, stall.currency)}}</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</q-card-section>
|
|
|
|
<q-separator vertical />
|
|
|
|
<q-card-section>
|
|
<strong>Payment Method</strong>
|
|
<q-option-group v-model="paymentMethod" :options="paymentOptions" color="green" disable />
|
|
</q-card-section>
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
|
|
<q-card-section>
|
|
|
|
<div class="row q-mt-md q-ml-md q-pr-md">
|
|
<div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
|
|
<strong>Address:</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-8">
|
|
<q-input v-model.trim="contactData.address" outlined label="Required for physical shipping"></q-input>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-2">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-mt-md q-ml-md q-pr-md">
|
|
<div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
|
|
<strong>Email:</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-8">
|
|
<q-input v-model.trim="contactData.address" outlined label="Email (optional)"></q-input>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-2">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-mt-md q-ml-md q-pr-md">
|
|
<div class="col-xs-12 col-sm-12 col-md-2 q-mt-md">
|
|
<strong>Message:</strong>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-8">
|
|
<q-input v-model.trim="contactData.address" outlined type="textarea" rows="3" label="Message to Merchant (optional)"></q-input>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-2">
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator class="q-mt-md" />
|
|
|
|
<q-card-actions align="right">
|
|
|
|
<q-btn @click="requestInvoice(cart)" flat color="primary">
|
|
Place Order
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
|
|
|
|
</div> |