36 lines
1.7 KiB
Vue
36 lines
1.7 KiB
Vue
<script setup>
|
||
import { useFastRequestStore } from '../../../store/FastRequest';
|
||
|
||
const fastRequestStore = useFastRequestStore();
|
||
|
||
const selectDoctor = (doctorId) => {
|
||
fastRequestStore.doctorId = doctorId;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full h-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 items-center justify-between py-4">
|
||
<button
|
||
type="button"
|
||
@click="selectDoctor(null)"
|
||
class="w-full bg-white h-[134px] flex flex-col items-center justify-center rounded-[12px] cursor-pointer"
|
||
:class="fastRequestStore.doctorId === null ? 'border-[2px] border-[#576989]' : 'border-[1px] border-[#DEE3EB]'"
|
||
>
|
||
<h3 class="text-[13px] font-[600] text-[#576989]">انتخاب خودکار</h3>
|
||
<p class="max-w-[190px] px-2 text-center text-[11px] font-[600] text-[#3E4C63]">انتخاب در دسترس ترین پزشک جهت بررسی سریع درخواست شما</p>
|
||
</button>
|
||
<button
|
||
v-for="doctor in fastRequestStore.doctors"
|
||
:key="doctor.id"
|
||
type="button"
|
||
@click="selectDoctor(doctor.id)"
|
||
class="w-full bg-white h-[134px] flex flex-col items-center justify-center rounded-[12px] cursor-pointer"
|
||
:class="fastRequestStore.doctorId === doctor.id ? 'border-[2px] border-[#576989]' : 'border-[1px] border-[#DEE3EB]'"
|
||
>
|
||
<img :src="doctor.profile_url || '/images/profile_default.png'" :alt="doctor.fullname" class="w-[65px] h-[65px] rounded-full object-cover">
|
||
<h3 class="text-[13px] font-[600] text-[#576989]">{{ doctor.fullname }}</h3>
|
||
<p class="text-center text-[11px] font-[600] text-[#7188AD]">{{ doctor.specialty }}</p>
|
||
</button>
|
||
</div>
|
||
</template>
|