126 lines
5.2 KiB
Vue
126 lines
5.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="your-order mb-30 ">
|
|||
|
|
<h3>Your order</h3>
|
|||
|
|
<div class="your-order-table table-responsive">
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th class="product-name">Product</th>
|
|||
|
|
<th class="product-total">Total</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr v-for="(item,i) in state.cart_products" :key="i" class="cart_item">
|
|||
|
|
<td class="product-name">
|
|||
|
|
{{item.title}} <strong class="product-quantity"> × {{item.orderQuantity}}</strong>
|
|||
|
|
</td>
|
|||
|
|
<td class="product-total">
|
|||
|
|
<span class="amount">${{item.price}}</span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
<tfoot>
|
|||
|
|
<tr class="cart-subtotal">
|
|||
|
|
<th>Cart Subtotal</th>
|
|||
|
|
<td><span class="amount">${{state.totalPriceQuantity.total.toFixed(2)}}</span></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="shipping">
|
|||
|
|
<th>Shipping</th>
|
|||
|
|
<td>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<input v-model="ship_cost" :value="7.00" id="flat-rate" name="ship-cost" type="radio" />
|
|||
|
|
<label for="flat-rate">
|
|||
|
|
Flat Rate: <span class="amount">$7.00</span>
|
|||
|
|
</label>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<input v-model="ship_cost" id="free" value="free" name="ship-cost" type="radio" />
|
|||
|
|
<label for="free">Free Shipping:</label>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="order-total">
|
|||
|
|
<th>Order Total</th>
|
|||
|
|
<td>
|
|||
|
|
<strong>
|
|||
|
|
<span class="amount">
|
|||
|
|
${{typeof ship_cost === 'number' && ship_cost > 0 ?
|
|||
|
|
(state.totalPriceQuantity.total + ship_cost).toFixed(2)
|
|||
|
|
: state.totalPriceQuantity.total.toFixed(2)}}
|
|||
|
|
</span>
|
|||
|
|
</strong>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tfoot>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="payment-method">
|
|||
|
|
<div class="accordion" id="accordionExample">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header" id="headingOne">
|
|||
|
|
<h5 class="mb-0">
|
|||
|
|
<button class="btn-link" type="button" data-bs-toggle="collapse"
|
|||
|
|
data-bs-target="#collapseOne" aria-expanded="true"
|
|||
|
|
aria-controls="collapseOne">
|
|||
|
|
Direct Bank Transfer
|
|||
|
|
</button>
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
|
|||
|
|
data-bs-parent="#accordionExample">
|
|||
|
|
<div class="card-body">
|
|||
|
|
Make your payment directly into our bank account. Please use your Order ID
|
|||
|
|
as the payment
|
|||
|
|
reference. Your order won’t be
|
|||
|
|
shipped until the funds have cleared in our account.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header" id="headingTwo">
|
|||
|
|
<h5 class="mb-0">
|
|||
|
|
<button class="btn-link collapsed" type="button" data-bs-toggle="collapse"
|
|||
|
|
data-bs-target="#collapseTwo" aria-expanded="false"
|
|||
|
|
aria-controls="collapseTwo">
|
|||
|
|
Cheque Payment
|
|||
|
|
</button>
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
|
|||
|
|
data-bs-parent="#accordionExample">
|
|||
|
|
<div class="card-body">
|
|||
|
|
Please send your cheque to Store Name, Store Street, Store Town, Store
|
|||
|
|
State / County, Store
|
|||
|
|
Postcode.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-button-payment mt-20">
|
|||
|
|
<button type="submit" class="os-btn os-btn-black">Place order</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent } from 'vue';
|
|||
|
|
import { useCartStore } from '~~/store/useCart';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
ship_cost:0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
setup () {
|
|||
|
|
const state = useCartStore()
|
|||
|
|
return {state}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|