111 lines
3.6 KiB
Vue
111 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<section class="max-w-lg w-full text-center">
|
||
|
|
<!-- Контактная информация -->
|
||
|
|
<div class="flex items-start bg-gray-100 border rounded-lg p-4">
|
||
|
|
<!-- Аватарка Gravatar -->
|
||
|
|
<div v-if="contactInfo.email" class="flex-shrink-0 mr-4">
|
||
|
|
<img
|
||
|
|
:src="gravatarUrl"
|
||
|
|
alt="Аватар"
|
||
|
|
class="w-16 h-16 rounded-full"
|
||
|
|
title="Аватар владельца"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Контакты -->
|
||
|
|
<div class="text-left flex-grow">
|
||
|
|
<p v-if="contactInfo.name" class="text-lg font-semibold">{{ contactInfo.name }}</p>
|
||
|
|
|
||
|
|
<p v-if="contactInfo.phone" class="text-gray-700">
|
||
|
|
Телефон:
|
||
|
|
<a :href="`tel:${formattedPhone}`" class="underline text-blue-600">
|
||
|
|
{{ contactInfo.phone }}
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p v-if="contactInfo.email" class="text-gray-700">
|
||
|
|
Email:
|
||
|
|
<a :href="`mailto:${contactInfo.email}`" class="underline text-blue-600">
|
||
|
|
{{ contactInfo.email }}
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
v-if="hasContactInfo"
|
||
|
|
label="Добавить в адресную книгу"
|
||
|
|
icon="pi pi-user-plus"
|
||
|
|
class="p-button-sm mt-4 p-button-outlined"
|
||
|
|
@click="addToAddressBook"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p v-if="success" class="text-green-500 mt-4">Контакт успешно добавлен в адресную книгу!</p>
|
||
|
|
<p v-if="error" class="text-red-500 mt-4">Ошибка добавления контакта: {{ error }}</p>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import md5 from 'md5'
|
||
|
|
|
||
|
|
const { contactInfo } = defineProps<{
|
||
|
|
contactInfo: { name?: string; phone?: string; email?: string }
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const success = ref(false)
|
||
|
|
const error = ref<string | null>(null)
|
||
|
|
|
||
|
|
// Форматирование номера телефона для протокола `tel:`
|
||
|
|
const formattedPhone = computed(() => {
|
||
|
|
if (!contactInfo.phone) return ''
|
||
|
|
return contactInfo.phone.replace(/[^0-9+]/g, '') // Удаляем все, кроме цифр и "+"
|
||
|
|
})
|
||
|
|
|
||
|
|
// Проверка наличия контактной информации
|
||
|
|
const hasContactInfo = computed(() => {
|
||
|
|
return !!contactInfo.name || !!contactInfo.phone || !!contactInfo.email
|
||
|
|
})
|
||
|
|
|
||
|
|
// Ссылка на аватар Gravatar
|
||
|
|
const gravatarUrl = computed(() => {
|
||
|
|
if (!contactInfo.email) return ''
|
||
|
|
const hash = md5(contactInfo.email.trim().toLowerCase())
|
||
|
|
return `https://www.gravatar.com/avatar/${hash}?d=identicon&s=128`
|
||
|
|
})
|
||
|
|
|
||
|
|
// Добавление в адресную книгу
|
||
|
|
function addToAddressBook() {
|
||
|
|
try {
|
||
|
|
const vCard = [
|
||
|
|
'BEGIN:VCARD',
|
||
|
|
'VERSION:3.0',
|
||
|
|
contactInfo.name ? `FN:${contactInfo.name}` : '',
|
||
|
|
contactInfo.phone ? `TEL;TYPE=VOICE:${formattedPhone.value}` : '',
|
||
|
|
contactInfo.email ? `EMAIL:${contactInfo.email}` : '',
|
||
|
|
'END:VCARD',
|
||
|
|
]
|
||
|
|
.filter(Boolean) // Убираем пустые строки
|
||
|
|
.join('\n')
|
||
|
|
|
||
|
|
const blob = new Blob([vCard], { type: 'text/vcard;charset=utf-8' })
|
||
|
|
const link = document.createElement('a')
|
||
|
|
|
||
|
|
const sanitized = contactInfo.name
|
||
|
|
?.replace(/[<>:"/\\|?*\x00-\x1F]/g, '') // Убираем запрещённые символы
|
||
|
|
.replace(/\s+/g, '_') // Заменяем пробелы на подчёркивания
|
||
|
|
.trim()
|
||
|
|
|
||
|
|
link.href = URL.createObjectURL(blob)
|
||
|
|
link.download = `${sanitized || 'contact'}.vcf`
|
||
|
|
link.click()
|
||
|
|
|
||
|
|
success.value = true
|
||
|
|
error.value = null
|
||
|
|
} catch {
|
||
|
|
error.value = 'Ошибка при создании vCard'
|
||
|
|
success.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|