264 lines
11 KiB
Vue
264 lines
11 KiB
Vue
<script setup>
|
|
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
|
|
import axios from '@axios';
|
|
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
// import store from '../store.js';
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px
|
|
// const patient_id = localStorage.getItem('patient_id')
|
|
// const access_token = localStorage.getItem('access_token');
|
|
//import plans from '@/views/pages/products/peptied';
|
|
const currentPath = window.location.origin
|
|
const isTonalSnackbarVisible = ref(false)
|
|
const patientResponse = ref(false)
|
|
const isLoadingVisible = ref(false)
|
|
const infoVForm = ref()
|
|
const store = useStore()
|
|
const dialog = ref(false);
|
|
const selectedPlan = ref({});
|
|
const plans = ref([]);
|
|
const seetingPlanPage = ref({});
|
|
const seetingPlanPara = ref(null);
|
|
const seetingPlanLogo = ref();
|
|
const isConent = ref();
|
|
onBeforeMount(() => {
|
|
store.dispatch('updateCurrentPage', 'plans')
|
|
localStorage.setItem('currentPage', 'plans')
|
|
})
|
|
onMounted(async () => {
|
|
const baseUrl = window.location.hostname;
|
|
if (baseUrl === 'localhost') {
|
|
isConent.value = 'd-block';
|
|
} else {
|
|
isConent.value = 'd-none';
|
|
}
|
|
// if (baseUrl == )
|
|
console.log(route)
|
|
const id = route.query.id
|
|
const slug = route.query.slug
|
|
if (slug && id) {
|
|
let plansapi = await axios.post('/api/plans', {})
|
|
plans.value = plansapi.data
|
|
let getPlan = plans.value.find(plan => plan.id === parseInt(id) && plan.slug === slug)
|
|
console.log(getPlan)
|
|
localStorage.setItem('plan_name', getPlan.title)
|
|
localStorage.setItem('plan_price', getPlan.price)
|
|
localStorage.setItem('plan_id', getPlan.id)
|
|
localStorage.setItem('list_one_title', getPlan.list_one_title)
|
|
localStorage.setItem('list_sub_title', getPlan.list_sub_title)
|
|
localStorage.setItem('list_two_title', getPlan.list_two_title)
|
|
localStorage.setItem('plan_image', getPlan.image_url)
|
|
localStorage.setItem('prescription_required', getPlan.is_prescription_required)
|
|
localStorage.setItem('shipping_price', getPlan.shipping_cost)
|
|
router.push('/pre-register');
|
|
}
|
|
isLoadingVisible.value = true
|
|
console.log('Current Page', store.getters.getCurrentPage)
|
|
|
|
let plansapi = await axios.post('/api/plans', {})
|
|
|
|
plans.value = plansapi.data
|
|
console.log(plans.value)
|
|
let setting = await axios.post('/api/settings', {})
|
|
seetingPlanPage.value = setting.data
|
|
let para = seetingPlanPage.value.plan_description.replace(/\n/g, '<br>');
|
|
console.log(para)
|
|
seetingPlanPara.value = para
|
|
seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
|
|
console.log(seetingPlanLogo.value)
|
|
isLoadingVisible.value = false
|
|
window.addEventListener('resize', checkIfMobile);
|
|
})
|
|
// Detach event listener on component unmount
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', checkIfMobile);
|
|
});
|
|
|
|
const checkIfMobile = () => {
|
|
isMobile.value = window.innerWidth <= 768;
|
|
};
|
|
const openDialog = (plan) => {
|
|
selectedPlan.value = plan;
|
|
dialog.value = true;
|
|
};
|
|
const imageSrc = (src) => {
|
|
console.log(`${currentPath}/product/${src}`)
|
|
return `${currentPath}/product/${src}`
|
|
};
|
|
const choosePlan = async (plan, price, id) => {
|
|
isLoadingVisible.value = true
|
|
console.log('plan', plan)
|
|
store.dispatch('updatePatientPlan', {
|
|
plan_name: plan,
|
|
plan_amount: price,
|
|
plan_id: id
|
|
})
|
|
let getPlan = plans.value.find(plan => plan.id === parseInt(id))
|
|
console.log(getPlan)
|
|
localStorage.setItem('plan_name', plan)
|
|
localStorage.setItem('plan_price', price)
|
|
localStorage.setItem('plan_id', id)
|
|
localStorage.setItem('list_one_title', getPlan.list_one_title)
|
|
localStorage.setItem('list_sub_title', getPlan.list_sub_title)
|
|
localStorage.setItem('list_two_title', getPlan.list_two_title)
|
|
localStorage.setItem('plan_image', getPlan.image_url)
|
|
router.replace(route.query.to && route.query.to != '/plans' ? String(route.query.to) : '/pre-register')
|
|
|
|
}
|
|
const formattedDescription = computed(async () => {
|
|
|
|
return para
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<StartOverPupup :showPopup="store.getters.getShowStartOverPupup"></StartOverPupup>
|
|
<VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
|
|
<VCardText class="" style="color: white !important;">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
<div class="pb-sm-5 rounded-top" :class="isConent">
|
|
<VContainer>
|
|
|
|
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
|
<VCard class="auth-card pa-2 rounded-5" max-width="800">
|
|
<VCardItem class="justify-center">
|
|
<VCardTitle class="text-2xl font-weight-bold text-primary">
|
|
<VImg :src="seetingPlanLogo" width="250" height="50" />
|
|
</VCardTitle>
|
|
</VCardItem>
|
|
<VCardText>
|
|
<VRow class=" mx-0 gy-3 px-lg-5">
|
|
<VCol cols="12" md="12" class="pb-0">
|
|
<!-- 👉 Title and subtitle -->
|
|
<div class="text-center">
|
|
<h4 class="text-h5 pricing-title mb-1">
|
|
{{ seetingPlanPage.plan_main_title }}
|
|
</h4>
|
|
<p class="mb-3" v-html="seetingPlanPara"></p>
|
|
|
|
</div>
|
|
</VCol>
|
|
|
|
<v-row justify="center">
|
|
|
|
<v-col cols="12" md="10"
|
|
class="d-flex align-center justify-space-between py-4 pl-4 rounded-lg border border-gray-200 elevation-0 my-2"
|
|
v-for="plan in plans" :key="plan.id">
|
|
|
|
|
|
<div class="d-flex align-center">
|
|
<div class="align-self-flex-start">
|
|
<v-img :src='imageSrc(plan.image_url)' max-width="120" max-height="120"
|
|
class="thumbnail"
|
|
style="overflow: hidden; flex-shrink: 0; flex-grow: 0"></v-img>
|
|
|
|
</div>
|
|
|
|
<div class="ml-8">
|
|
|
|
<h3 class="text-h6 font-weight-semibold mb-0">{{ plan.title }}</h3>
|
|
<span class="text-subtitle-1 font-weight-medium">{{ plan.currency }} {{
|
|
plan.price
|
|
}} -
|
|
<a href="#" class="text-decoration-none text-primary"
|
|
@click.prevent="openDialog(plan)">More Info</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<v-btn color="primary" variant="outlined"
|
|
@click="choosePlan(plan.title, plan.price, plan.id)">
|
|
<v-icon left>mdi-plus</v-icon>
|
|
Book Now
|
|
</v-btn>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-dialog v-model="dialog" max-width="600px">
|
|
<v-card>
|
|
<v-card-title class="headline">{{ selectedPlan.title }}</v-card-title>
|
|
<v-card-text>
|
|
<p><strong>{{ selectedPlan.list_sub_title }}</strong></p>
|
|
<p>{{ selectedPlan.list_one_title }}</p>
|
|
<p>{{ selectedPlan.list_two_title }}</p>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
|
|
<!--
|
|
<VCol v-for="plan in plans.plans_list" :key="plan.title" cols="12" md="4">
|
|
<VCard class="auth-card rounded-5" style="margin-top: 10px;">
|
|
<div class="col-lg mb-md-0 mb-4">
|
|
<v-card-title class="headline text-center">
|
|
<h2 class="text-center text-capitalize mb-1 card-title">{{ plan.title }}</h2>
|
|
</v-card-title>
|
|
<div class="d-flex justify-center pt-3 pb-0">
|
|
<div class="text-body-1 align-self-start font-weight-medium">
|
|
{{ plan.currency }}
|
|
</div>
|
|
<h4 class="text-h2 font-weight-medium text-primary">{{ plan.price }}</h4>
|
|
</div>
|
|
<v-list lines="one">
|
|
<v-list-item :title="plan.list_one_title"
|
|
:subtitle="plan.list_sub_title"></v-list-item>
|
|
<v-list-item :title="plan.list_two_title"></v-list-item>
|
|
</v-list>
|
|
|
|
</div>
|
|
</VCard>
|
|
<div class="text-center mb-2 mt-5">
|
|
<v-btn class="btn btn-primary d-grid w-100 waves-effect waves-light" color="primary"
|
|
variant="flat" @click="choosePlan(plan.title, plan.price)">
|
|
Choose
|
|
</v-btn>
|
|
</div>
|
|
</VCol> -->
|
|
|
|
|
|
|
|
|
|
</VRow>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
|
|
</VContainer>
|
|
</div>
|
|
|
|
</template>
|
|
<style lang="scss">
|
|
.card-title {
|
|
font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
.v-list-item-title {
|
|
white-space: inherit !important;
|
|
;
|
|
}
|
|
|
|
.thumbnail {
|
|
object-fit: contain;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.v-list {
|
|
min-height: 220px;
|
|
}
|
|
</style>
|