71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<template>
|
|
<div class="sm:w-1/2 md:w-1/3 lg:w-1/4 pr-4">
|
|
<div class="employee-card p-4 rounded flex">
|
|
<div class="deal-employee-logo w-16 h-16 flex-shrink-0 rounded-full overflow-hidden">
|
|
<img class="w-full" v-if="employee.user_logo" :src="`${url}/photos/agency/${employee.user_logo}`" alt="">
|
|
</div>
|
|
<div class="ml-4 flex flex-col justify-between">
|
|
<div>
|
|
<div class="font-bold">{{ getFullName(employee) }}</div>
|
|
<div class="font-bold">{{ employee.role ? employee.role.name : 'Агент' }}</div>
|
|
<div class="deal-employee-phone">{{ employee.phone }}</div>
|
|
</div>
|
|
<div class="flex space-x-2 mt-2">
|
|
<a :href="'https://t.me/' + employee.phone" target="_blank">
|
|
<img src="@/shared/assets/icons/social/telegram.svg" alt="Telegram" class="w-6 h-6">
|
|
</a>
|
|
<a :href="'https://wa.me/' + employee.phone" target="_blank">
|
|
<img src="@/shared/assets/icons/social/whatsapp.svg" alt="WhatsApp" class="w-6 h-6">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button @click="$emit('remove', employee.id)" class="ml-auto mt-2 px-4 py-2 rounded">
|
|
<!-- <img src="@/shared/assets/icons/trash.svg" alt="Удалить" class="w-6 h-6">-->
|
|
<span class="simple-button delete" title="Удалить"><i class="jw-action-icon-delete"></i></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
employee: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
url: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
getFullName(employee) {
|
|
return employee.fio || `${employee.first_name} ${employee.last_name}`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.addDeal__form {
|
|
.employee-card {
|
|
background: linear-gradient(360deg, #F5F5F5 0%, #FFFFFF 100%);
|
|
border: 1px solid #E0E0E0;
|
|
border-radius: 5px;
|
|
|
|
.deal-employee-phone {
|
|
font-family: 'Lato', sans-serif;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
a {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|