108 lines
4.8 KiB
Vue
108 lines
4.8 KiB
Vue
<script setup>
|
|
import UiButton from '../../components/ui/UiButton.vue';
|
|
import { ref, computed } from 'vue';
|
|
import Dialog from 'primevue/dialog';
|
|
import ProgressBar from 'primevue/progressbar';
|
|
import RequestType from './fastRequest/RequestType.vue';
|
|
import RequestCase from './fastRequest/RequestCase.vue';
|
|
import RequestDetails from './fastRequest/RequestDetails.vue';
|
|
import RequestDoctor from './fastRequest/RequestDoctor.vue';
|
|
import RequestReview from './fastRequest/RequestReview.vue';
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
icon: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const step = ref(1);
|
|
const stepRef = ref(null);
|
|
|
|
const steps = ref({
|
|
1: RequestType,
|
|
2: RequestCase,
|
|
3: RequestDetails,
|
|
4: RequestDoctor,
|
|
5: RequestReview,
|
|
});
|
|
|
|
const currentStepComponent = computed(() => {
|
|
return steps.value[step.value] || RequestType
|
|
});
|
|
|
|
const handleNext = () => {
|
|
step.value++;
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '688px' , minHeight: '376px' }" :pt="{header : '!bg-client-primaryBlue'}">
|
|
<template #header>
|
|
<div class="w-full flex items-center justify-start">
|
|
<h2 class="text-[14px] font-[700] text-[#576989]">ثبت آنی درخواست</h2>
|
|
</div>
|
|
</template>
|
|
<div class="w-full h-[56px] flex items-center justify-between border-b border-[#EBEBEB] pb-3">
|
|
<div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
|
|
<div class="w-full h-[20px] flex items-center justify-center ">
|
|
<span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">1</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">نوع درخواست</span>
|
|
</div>
|
|
<ProgressBar :value="value1" :showValue="false" mode="determinate"></ProgressBar>
|
|
<div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
|
|
<div class="w-full h-[20px] flex items-center justify-center ">
|
|
<span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">2</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">انتخاب کیس</span>
|
|
</div>
|
|
<ProgressBar :value="value2" :showValue="false" mode="determinate"></ProgressBar>
|
|
<div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
|
|
<div class="w-full h-[20px] flex items-center justify-center ">
|
|
<span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">3</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">جزئیات درخواست</span>
|
|
</div>
|
|
<ProgressBar :value="value3" :showValue="false" mode="determinate"></ProgressBar>
|
|
<div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
|
|
<div class="w-full h-[20px] flex items-center justify-center ">
|
|
<span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">4</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">انتخاب پزشک</span>
|
|
</div>
|
|
<ProgressBar :value="value4" :showValue="false" mode="determinate"></ProgressBar>
|
|
<div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
|
|
<div class="w-full h-[20px] flex items-center justify-center ">
|
|
<span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">5</span>
|
|
</div>
|
|
<span class="text-[10px] font-[600] text-[#7188AD]">مرور نهایی</span>
|
|
</div>
|
|
</div>
|
|
<component :is="currentStepComponent" ref="stepRef" @validated="onValidated"/>
|
|
|
|
<div class="w-full pt-3 flex items-center justify-end border-t border-[#EBEBEB]">
|
|
<ui-button label="تایید و مرحله بعد" severity="success" size="small" @click="handleNext" />
|
|
</div>
|
|
|
|
</Dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.p-progressbar) {
|
|
min-width: 60px !important;
|
|
height: 4px;
|
|
}
|
|
|
|
:deep(.p-progressbar-value) {
|
|
background: #576989 !important;
|
|
}
|
|
</style>
|
|
|
|
|