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 | 1x 1x 1x 3x 1x | <template>
<div v-if="order">
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center">
<a href="#" v-on:click.prevent="" class="mr-2">{{ order.id }}</a>
<div class="paid p-1 pl-2 pr-3 mr-2" :class="order.paid && 'active'">
<BIconDot scale="2" /> Paid
</div>
<div class="status p-1 pl-2 pr-3 mr-2">
<BIconDot scale="2" />
{{ order.order_status.title }}
</div>
</div>
<div>
<span class="text-nowrap font-weight-bold">
$ {{ order.total | formatNumber }}
</span>
</div>
</div>
<p v-if="order.order_date">
{{ order.order_date | formatDate }}
</p>
<p v-else>DRAFT created at {{ order.created_at | formatDate }}</p>
<div v-if="order.order_items.length">
<h6 class="mb-3">Products</h6>
<ul class="d-flex flex-column p-0">
<li v-for="order_item in order.order_items" :key="order_item.id">
<ProductCard
:product="order_item.product"
:quantity="order_item.quantity"
/>
</li>
</ul>
</div>
<div v-if="order.order_bundles.length">
<h6>Bundles</h6>
<ul class="d-flex flex-column p-0">
<li v-for="order_bundle in order.order_bundles" :key="order_bundle.id">
<BundleCard :bundle="order_bundle.bundle" />
</li>
</ul>
</div>
</div>
</template>
<script>
import "~/utils/filters";
import BundleCard from "~/components/Admin/common/BundleCard.vue";
import ProductCard from "~/components/Admin/common/ProductCard.vue";
export default {
name: "CustomerOrder",
props: {
order: [Object, null],
},
components: {
BundleCard,
ProductCard,
},
};
</script>
<style scoped>
.status,
.paid {
border-radius: 20px;
font-size: 15px;
background: #e4e5e7;
}
.status {
background: yellow;
}
.paid.active {
background: green;
}
</style> |