Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 1x 1x 3x 1x | <template>
<div class="row justify-content-center w-100 m-0">
<div class="col-10 mt-3">
<div class="d-flex w-100 mb-3 d-flex align-items-center">
<button v-on:click="$emit('closeCreateOrder')" class="mr-3">
<BIconArrowLeft />
</button>
<h6 class="m-0">Create order</h6>
</div>
<div>
<div class="block p-3 mb-3">
<h6>Products</h6>
<ProductsBlock v-on:setProducts="setProducts" />
</div>
<div class="block p-3 mb-3">
<h6>Bundles</h6>
<BundlesBlock v-on:setBundles="setBundles" />
</div>
<div class="d-flex flex-column">
<div class="block mb-3 d-flex flex-column p-3">
<h6>Customer</h6>
<p>{{ selected.email }}</p>
<p>{{ getCustomerName() }}</p>
<p>{{ selected.address1 && selected.address2 }}</p>
<p>{{ selected.state }}</p>
<p>{{ selected.cellphone }}</p>
</div>
</div>
<div class="block p-3 mb-3">
<h6>Payment</h6>
<div class="d-flex justify-content-between">
<p>Subtotal</p>
<p>$ {{ order.total | formatNumber }}</p>
</div>
<div class="d-flex justify-content-between">
<p>Total</p>
<p>$ {{ order.total | formatNumber }}</p>
</div>
</div>
</div>
<button class="btn btn-success w-100 mb-3" v-on:click="send">
Create order
</button>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import ProductsBlock from "~/components/Admin/common/ProductsBlock.vue";
import BundlesBlock from "~/components/Admin/common/BundlesBlock.vue";
export default {
name: "AddOrder",
components: { ProductsBlock, BundlesBlock },
data: () => ({
order: {
total: 0,
order_status: "1",
order_bundles: [],
order_items: [],
paid: false,
customer: null,
},
}),
computed: {
...mapGetters({
selected: "admin_customers/selected",
}),
},
methods: {
...mapActions({
createOrder: "admin_orders/createOrder",
}),
setProducts: function (data) {
this.order.order_items = data;
this.total = this.calcTotal();
},
setBundles: function (data) {
this.order.order_bundles = data;
this.total = this.calcTotal();
},
getCustomerName: function () {
const { firstName, lastName } = this.selected;
return `${firstName} ${lastName}`;
},
calcTotal: function () {
const totalProducts = this.order.order_items.reduce(
(acc, item) => (acc += item.total),
0
);
const totalBundles = this.order.order_bundles.reduce(
(acc, item) => (acc += item.bundle.price),
0
);
return totalProducts + totalBundles;
},
send: async function () {
await this.createOrder({ ...this.order, customer: this.selected.id });
},
},
};
</script>
<style scoped>
</style> |