121 lines
6.0 KiB
Vue
121 lines
6.0 KiB
Vue
<script setup>
|
|
import { onBeforeMount, onMounted, ref } from 'vue';
|
|
const products = JSON.parse(localStorage.getItem('cart_products'));
|
|
const labKits = JSON.parse(localStorage.getItem('labkits'));
|
|
const totalShipping = ref(0)
|
|
const totalAmount = ref(0)
|
|
const grandTotal = ref(0)
|
|
const prescreptionRequired = ref(false)
|
|
const isMobile = ref(window.innerWidth <= 768);
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
onBeforeMount(async () => {
|
|
|
|
// products.push({
|
|
// title: 'Doctor Visit',
|
|
// subscription: false,
|
|
// onetime: false,
|
|
// product_id: 1,
|
|
// qty: 1,
|
|
// price: labKits[0].amount,
|
|
// is_prescription_required: 0,
|
|
// shipping_cost: 0
|
|
|
|
// })
|
|
products.forEach(product => {
|
|
var price = 0
|
|
if (product.is_prescription_required == 1) {
|
|
|
|
prescreptionRequired.value = true
|
|
// if (labKits[0].amount)
|
|
// price = 0
|
|
price = product.price
|
|
product.title = product.title
|
|
product.price = productTotalPreReq(product.qty, product.price)
|
|
console.log('Prescreption Req Price', price)
|
|
} else {
|
|
|
|
prescreptionRequired.value = false
|
|
price = parseFloat(product.price);
|
|
product.price = productTotal(product)
|
|
|
|
console.log('Not Req Price', price)
|
|
}
|
|
const shippingPrice = parseFloat(product.shipping_cost);
|
|
totalShipping.value += product.qty * shippingPrice;
|
|
totalAmount.value += product.qty * price;
|
|
|
|
});
|
|
})
|
|
onMounted(async () => {
|
|
|
|
|
|
let options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 };
|
|
// grandTotal.value = new Intl.NumberFormat('en-US', options).format(parseFloat(totalAmount.value) + parseFloat(totalShipping.value));
|
|
grandTotal.value = new Intl.NumberFormat('en-US', options).format(parseFloat(labKits[0].amount));
|
|
totalAmount.value = new Intl.NumberFormat('en-US', options).format(totalAmount.value);
|
|
totalShipping.value = new Intl.NumberFormat('en-US', options).format(totalShipping.value);
|
|
window.addEventListener('resize', checkIfMobile);
|
|
});
|
|
const productTotalPreReq = (qty, price) => {
|
|
let options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 };
|
|
return new Intl.NumberFormat('en-US', options).format(qty * parseFloat(price));
|
|
};
|
|
const productTotal = (product) => {
|
|
let options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 };
|
|
return new Intl.NumberFormat('en-US', options).format(product.qty * parseFloat(product.price));
|
|
};
|
|
</script>
|
|
<template>
|
|
<VCard class="bg-transparent" :class="isMobile ? '' : 'auth-card pa-2 card-margin'" style="min-width: 90%;border: none;box-shadow: none;" color="">
|
|
<v-card-text style="padding-left: 30px;">
|
|
<h4 style="font-weight: 700;font-size: 20px;font-family: system-ui;color: black;">Order Details</h4>
|
|
<v-list class="bg-transparent text-yellow-theme-button">
|
|
<v-list-item-group>
|
|
<v-list-item v-for="product in products" :key="product.id" style="padding-left: 0px;">
|
|
<v-list-item-content>
|
|
<v-list-item-title style="font-size: 18px!important;font-family: sans-serif;">
|
|
{{ product.title }}
|
|
<span class="float-right ml-2">{{ product.price }}</span>
|
|
</v-list-item-title>
|
|
<!-- <v-list-item-subtitle class="text-yellow-theme-button">Qty: {{ product.qty
|
|
}}</v-list-item-subtitle> -->
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item style="padding-top: 10px;padding-bottom: 10px;padding-left: 0px;">
|
|
<v-list-item-content>
|
|
<v-list-item-title style="font-size: 18px!important;font-family: sans-serif;">
|
|
<span style="padding-top: 10px;padding-bottom: 10px;"><b>Total</b></span>
|
|
<span class="float-right ml-2" style="border-top: 1px solid silver;border-bottom: 1px solid silver;padding-top: 10px;padding-bottom: 10px;padding-left: 50px;"> <b>{{ grandTotal }}</b></span>
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list-item-group>
|
|
</v-list>
|
|
</v-card-text>
|
|
<!-- <v-divider></v-divider> -->
|
|
<v-card-text>
|
|
<v-row justify="end">
|
|
<v-col cols="auto">
|
|
<h4 class="text-yellow-theme-button total-font" style="display: none;"><span class="mr-2">Sub Total:</span> <span
|
|
class="float-right">{{
|
|
totalAmount }}</span>
|
|
</h4>
|
|
<h4 class="text-yellow-theme-button total-font" style="display: none;"><span class="mr-2">Shipping:</span> <span
|
|
class="float-right">{{
|
|
totalShipping
|
|
}}</span></h4>
|
|
<h4 class="text-yellow-theme-button total-font" style="display: none;"><span class="mr-2">Order Total:</span> <span
|
|
class="float-right">{{
|
|
grandTotal
|
|
}}</span></h4>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
<v-card-text class="mt-4" style="color: black;font-family: system-ui;">
|
|
<b>Note: At this time, you will only be charged for the doctor visit. After the consultation, once we receive the prescription, your order will be automatically processed, and your card will be charged for the cost of the medication.</b>
|
|
</v-card-text>
|
|
</VCard>
|
|
</template>
|