248 lines
10 KiB
Vue
248 lines
10 KiB
Vue
<script setup>
|
|
import axios from '@axios';
|
|
import { onMounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const router = useRouter()
|
|
const route = useRoute()// Assuming mobile width is less than or equal to 768px
|
|
const patient_id = localStorage.getItem('patient_id')
|
|
const access_token = localStorage.getItem('access_token');
|
|
const isLoadingVisible = ref(false)
|
|
const firstName = ref('')
|
|
const lastName = ref('')
|
|
const email = ref('')
|
|
const phone = ref('')
|
|
const planName = ref('')
|
|
const planAmount = ref('')
|
|
const planList = ref([])
|
|
const plansubTitle = ref('')
|
|
const currentPath = window.location.origin
|
|
onMounted(async () => {
|
|
await getPatientInfo()
|
|
await getPlanInfo()
|
|
})
|
|
|
|
const getPatientInfo = async () => {
|
|
|
|
console.log()
|
|
isLoadingVisible.value = true;
|
|
await axios.post('/api/get-patient-detail/' + patient_id, {
|
|
headers: {
|
|
'Authorization': `Bearer ${access_token}`,
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log('Response:', response.data);
|
|
if (response.data) {
|
|
var patientdata = response.data.patient
|
|
firstName.value = patientdata.first_name
|
|
lastName.value = patientdata.last_name
|
|
email.value = patientdata.email
|
|
phone.value = patientdata.phone_no
|
|
isLoadingVisible.value = false;
|
|
} else {
|
|
isLoadingVisible.value = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
isLoadingVisible.value = false;
|
|
console.log('Error:', error);
|
|
});
|
|
}
|
|
|
|
const getPlanInfo = async () => {
|
|
|
|
console.log()
|
|
isLoadingVisible.value = true;
|
|
await axios.post('/api/get-plan-by-patient/' + patient_id, {
|
|
headers: {
|
|
'Authorization': `Bearer ${access_token}`,
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log('Response:', response.data);
|
|
if (response.data) {
|
|
let planData = response.data
|
|
console.log('plan ', planData)
|
|
planList.value = planData
|
|
planName.value = planData.title
|
|
planAmount.value = planData.price
|
|
isLoadingVisible.value = false;
|
|
} else {
|
|
isLoadingVisible.value = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
isLoadingVisible.value = false;
|
|
console.log('Error:', error);
|
|
});
|
|
}
|
|
const imageSrc = (src) => {
|
|
console.log(`${currentPath}/product/${src}`)
|
|
return `${currentPath}/product/${src}`
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
<VRow>
|
|
|
|
<VCol cols="12" md="9" v-for="plan in planList" :key="plan.id">
|
|
<v-card class="mx-auto">
|
|
|
|
<v-img :src='imageSrc(plan.image_url)' height="200px" class="membershipImage" cover
|
|
style="width:auto"></v-img>
|
|
|
|
<v-card-subtitle class="mt-4">
|
|
{{ plan.title }} Status: Active
|
|
</v-card-subtitle>
|
|
<v-card-title>
|
|
{{ plan.list_sub_title }}
|
|
</v-card-title>
|
|
<VCardText class="ml-3">
|
|
<h3>{{ plan.list_one_title }}</h3>
|
|
<ul class="ml-5">
|
|
<li>{{ plan.list_two_title }}</li>
|
|
|
|
</ul>
|
|
</VCardText>
|
|
<VCardText>
|
|
<p> </p>
|
|
<p class="text-black">Your membership will start with your first medication purchase</p>
|
|
</VCardText>
|
|
|
|
</v-card>
|
|
</VCol>
|
|
<VCol cols="12" md="9" v-if="planName == 'Pro Plan'">
|
|
<v-card class="mx-auto">
|
|
<v-img :src="'/assets/images/pro_plan.jpg'" height="200px" cover></v-img>
|
|
<v-card-subtitle class="mt-4">
|
|
TRT Membership Status: Active
|
|
</v-card-subtitle>
|
|
<v-card-title>
|
|
Testosterone Replacement Therapy For Men
|
|
</v-card-title>
|
|
<VCardText class="ml-3">
|
|
<h3>Membership Benifits Overview</h3>
|
|
<ul class="ml-5">
|
|
<li>Customized treatment based on your specific needs and health status.</li>
|
|
<li>Ongoing monitoring and adjustments by your healthcare provider to ensure safety and
|
|
effectiveness.</li>
|
|
<li>Consistent supply of necessary medications.</li>
|
|
<li>Access to specialized testosterone formulations.</li>
|
|
<li>Coordinated care and clinical oversight from your provider.</li>
|
|
</ul>
|
|
</VCardText>
|
|
<VCardText>
|
|
<p>The main advantages of a Pro Plan are the personalized, supervised, and sustainable approach to
|
|
managing low testosterone, which can lead to better outcomes compared to self-management.</p>
|
|
<p class="text-black">Your membership will start with your first medication purchase</p>
|
|
</VCardText>
|
|
|
|
</v-card>
|
|
</VCol>
|
|
<VCol cols="12" md="9" v-if="planName == 'Basic Plan'">
|
|
<v-card class="mx-auto">
|
|
<v-img :src="'/assets/images/basic_plan.jpg'" height="200px" cover></v-img>
|
|
<v-card-subtitle class="mt-4">
|
|
Membership Status: Active
|
|
</v-card-subtitle>
|
|
<v-card-title>
|
|
Weight Loss
|
|
</v-card-title>
|
|
<VCardText class="ml-3">
|
|
<h3>Membership Benifits Overview</h3>
|
|
<ul class="ml-5">
|
|
<li>Exclusive Access to Medical Weight Loss Experts</li>
|
|
<li>As a member, you'll have direct access to our team of nationally-recognized weight loss
|
|
physicians and nutritionists. Get personalized treatment plans, prescription medication
|
|
management, and ongoing virtual coaching from true experts.</li>
|
|
<li>We take a comprehensive, individualized approach. Your membership includes a full medical
|
|
evaluation, metabolic testing, body composition analysis, and personal counseling to design
|
|
the ideal program for your goals and lifestyle.</li>
|
|
<li>Physician-prescribed weight loss medications, lipotropic injections, appetite suppressants,
|
|
metabolic boosters, and high-quality supplements are included based on your custom treatment
|
|
plan.</li>
|
|
<li>Forget dieting on your own. Your membership provides tailored meal plans from registered
|
|
dietitians, along with customized exercise regimens created by certified fitness coaches.
|
|
</li>
|
|
</ul>
|
|
</VCardText>
|
|
<VCardText>
|
|
<p>At HGH, we take an integrative approach to weight loss that combines advanced science with
|
|
personalized support. Our programs are designed by leading medical experts and tailored to your
|
|
specific needs.
|
|
|
|
We focus on promoting safe, sustainable weight loss by optimizing hormone levels, boosting
|
|
metabolism, curbing cravings, and building better habits.</p>
|
|
<p class="text-black">Your membership will start with your first medication purchase</p>
|
|
</VCardText>
|
|
|
|
</v-card>
|
|
</VCol>
|
|
<VCol cols="12" md="3" v-for="plan in planList" :key="plan.id">
|
|
<VCard class="auth-card pa-2 rounded-5">
|
|
<div class="col-lg mb-md-0 mb-4">
|
|
<v-card-title class="headline text-center">
|
|
<h3 class="text-center text-capitalize mb-1 card-title text-wrap">{{ plan.title }}</h3>
|
|
</v-card-title>
|
|
<div class="d-flex justify-center pt-3 pb-3">
|
|
<div class="text-body-1 align-self-start font-weight-medium"> $ </div>
|
|
<h4 class="text-h2 font-weight-medium text-primary"
|
|
style="color: rgb(var(--v-theme-yellow)) !important">{{
|
|
plan.price }}</h4>
|
|
<!-- <div class="text-body-1 font-weight-medium align-self-end"> /month </div> -->
|
|
</div>
|
|
<v-list lines="one">
|
|
|
|
<v-list-item color="primary" style="padding: 5px;">
|
|
<template v-slot:prepend>
|
|
<v-icon class="mb-0" color="rgb(var(--v-theme-yellow))" icon="mdi-check-circle"
|
|
size="20"></v-icon>
|
|
</template>
|
|
|
|
<v-list-item-title text="">
|
|
{{ plan.list_one_title }}
|
|
<div class="text-wrap">
|
|
<small>{{ plan.list_sub_title }}</small>
|
|
</div>
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item color="primary" style="padding: 5px;">
|
|
<template v-slot:prepend>
|
|
<v-icon class="mb-0" color="rgb(var(--v-theme-yellow))" icon="mdi-check-circle"
|
|
size="20"></v-icon>
|
|
</template>
|
|
|
|
<v-list-item-title class="text-wrap">{{ plan.list_two_title }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
|
|
<div class="text-center mb-2">
|
|
<v-btn class="btn btn-primary d-grid w-100 waves-effect waves-light" color="primary"
|
|
variant="flat">
|
|
Upgrade Plan
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
<style lang="scss">
|
|
.membershipImage {
|
|
background-image: url('@images/pages/membershipBanner.jpg');
|
|
background-size: cover;
|
|
}
|
|
|
|
img.v-img__img.v-img__img--cover {
|
|
width: auto;
|
|
}
|
|
</style>
|