gabrielb
5a7f4ba07a
- Vue 3.5 + Vite 8 + PrimeVue 4 (Aura) + TailwindCSS 4 + DM Sans - Sistema de tenant multi-prefeitura: bootstrap, prefeituraStore, getTenant - Tema dinâmico por município via applyTemplate (9 paletas) - Logo e foto de fundo resolvidos a partir do VITE_API_URL + path relativo - HomeView: hero split com foto/gradiente, carousel de avisos, cards de serviços - LoginView: fluxo 2 etapas (documento na home → senha em /login) - Roteamento completo: público (/), serviços (/servicos/*), portal autenticado (/portal/*) - authStore + authService estruturados para Keycloak PKCE (integração pendente) - Placeholders para todas as telas da área logada Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
355 lines
18 KiB
Vue
355 lines
18 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { usePrefeituraStore } from '@/stores/prefeituraStore'
|
|
import DocumentoInput from '@/components/auth/DocumentoInput.vue'
|
|
import ServiceCard from '@/components/common/ServiceCard.vue'
|
|
|
|
import bgTutoia from '@/assets/images/bg-tutoia.jpeg'
|
|
|
|
const router = useRouter()
|
|
const prefeitura = usePrefeituraStore()
|
|
|
|
const documento = ref('')
|
|
const erro = ref('')
|
|
|
|
// ─── Hero background ─────────────────────────────────────────────────────────
|
|
// Mapa template → imagem estática (Vite resolve na build).
|
|
// Para adicionar novo município: importar a foto e adicionar a chave abaixo.
|
|
const heroBgMap = {
|
|
tutoia: bgTutoia,
|
|
}
|
|
|
|
const heroBgUrl = computed(() => heroBgMap[prefeitura.template] ?? null)
|
|
|
|
const heroBgStyle = computed(() => {
|
|
const url = heroBgUrl.value
|
|
if (!url) return {}
|
|
return {
|
|
backgroundImage: `linear-gradient(to bottom right, rgba(15,23,42,0.70), rgba(15,23,42,0.50)), url(${url})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}
|
|
})
|
|
|
|
const heroHasPhoto = computed(() => !!heroBgUrl.value)
|
|
|
|
// ─── Avisos (carousel) ──────────────────────────────────────────────────────
|
|
// Dados mockados — conectar ao endpoint /api/v1/publico/avisos/{dominio} futuramente
|
|
const avisos = ref([
|
|
{
|
|
id: 1,
|
|
tipo: 'prazo',
|
|
icone: 'pi-calendar',
|
|
titulo: 'IPTU 2025 — Parcela única com desconto',
|
|
descricao: 'Pague até 31/07 e ganhe 10% de desconto. Emita seu boleto agora mesmo.',
|
|
cor: 'amber',
|
|
acao: { label: 'Emitir boleto', to: { name: 'iptu' } },
|
|
},
|
|
{
|
|
id: 2,
|
|
tipo: 'novidade',
|
|
icone: 'pi-star',
|
|
titulo: 'Novo serviço: Certidão Online Instantânea',
|
|
descricao: 'Emita certidões negativas em segundos, sem sair de casa e com validade legal.',
|
|
cor: 'green',
|
|
acao: { label: 'Emitir agora', to: { name: 'certidao' } },
|
|
},
|
|
{
|
|
id: 3,
|
|
tipo: 'info',
|
|
icone: 'pi-info-circle',
|
|
titulo: 'Atualização cadastral obrigatória',
|
|
descricao: 'Contribuintes com dados desatualizados devem regularizar até 30/08 para evitar multas.',
|
|
cor: 'blue',
|
|
acao: null,
|
|
},
|
|
])
|
|
|
|
const corAviso = {
|
|
amber: { bg: 'bg-amber-50', borda: 'border-amber-200', icone: 'text-amber-600', tag: 'bg-amber-100 text-amber-700' },
|
|
green: { bg: 'bg-emerald-50', borda: 'border-emerald-200', icone: 'text-emerald-600', tag: 'bg-emerald-100 text-emerald-700' },
|
|
blue: { bg: 'bg-blue-50', borda: 'border-blue-200', icone: 'text-blue-600', tag: 'bg-blue-100 text-blue-700' },
|
|
}
|
|
|
|
// ─── Serviços ────────────────────────────────────────────────────────────────
|
|
const servicosPublicos = [
|
|
{ icon: 'pi-file-check', titulo: 'Emissão de Certidão', descricao: 'Certidão negativa, positiva e situação fiscal.', to: { name: 'certidao' } },
|
|
{ icon: 'pi-home', titulo: 'IPTU — Débitos e Carnê', descricao: 'Consulte débitos e imprima o carnê de pagamento.', to: { name: 'iptu' } },
|
|
{ icon: 'pi-verified', titulo: 'Validar Documento', descricao: 'Verifique a autenticidade de certidões emitidas.', to: { name: 'servicos' } },
|
|
]
|
|
|
|
const servicosAutenticados = [
|
|
{ icon: 'pi-receipt', titulo: 'Débitos e Guias', descricao: 'Emita guias de pagamento de todos os seus tributos.', to: { name: 'debitos' } },
|
|
{ icon: 'pi-file-edit', titulo: 'Certidões Ativas', descricao: 'Acesse e reemita certidões emitidas anteriormente.', to: { name: 'certidoes-portal' } },
|
|
{ icon: 'pi-briefcase', titulo: 'Alvarás', descricao: 'Acompanhe processos e solicite novos alvarás.', to: { name: 'alvaras' } },
|
|
{ icon: 'pi-credit-card', titulo: 'Pagamentos', descricao: 'Histórico completo com comprovantes para download.', to: { name: 'pagamentos' } },
|
|
{ icon: 'pi-user', titulo: 'Dados Cadastrais', descricao: 'Visualize e mantenha seus dados sempre atualizados.', to: { name: 'dados' } },
|
|
]
|
|
|
|
function continuar() {
|
|
if (documento.value.replace(/\D/g, '').length < 11) {
|
|
erro.value = 'Informe um CPF (11 dígitos) ou CNPJ (14 dígitos) válido.'
|
|
return
|
|
}
|
|
erro.value = ''
|
|
router.push({ name: 'login', query: { doc: documento.value } })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
|
|
<!-- ─── HERO ─────────────────────────────────────────────────────── -->
|
|
<section
|
|
class="text-white relative overflow-hidden"
|
|
:class="heroHasPhoto ? '' : 'bg-gradient-to-br from-slate-900 via-primary-900 to-slate-800'"
|
|
:style="heroBgStyle"
|
|
>
|
|
<!-- Padrão geométrico sutil (visível só sem foto) -->
|
|
<div
|
|
v-if="!heroHasPhoto"
|
|
class="absolute inset-0 opacity-5 pointer-events-none"
|
|
style="background-image: radial-gradient(circle at 25px 25px, white 2px, transparent 0); background-size: 50px 50px;"
|
|
/>
|
|
|
|
<!-- Gradiente lateral esquerdo — garante legibilidade dos textos
|
|
independente do conteúdo da foto de fundo -->
|
|
<div
|
|
v-if="heroHasPhoto"
|
|
class="absolute inset-0 pointer-events-none"
|
|
style="background: linear-gradient(to right, rgba(15,23,42,0.88) 0%, rgba(15,23,42,0.65) 55%, rgba(15,23,42,0.15) 100%);"
|
|
/>
|
|
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
|
|
<!-- Esquerda -->
|
|
<div>
|
|
<!-- Identidade do município -->
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<img
|
|
v-if="prefeitura.pathLogo"
|
|
:src="prefeitura.pathLogo"
|
|
alt="Logo"
|
|
class="h-12 w-auto object-contain drop-shadow-md"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="w-12 h-12 bg-white/15 backdrop-blur-sm rounded-xl flex items-center justify-center"
|
|
>
|
|
<i class="pi pi-building text-white text-xl" />
|
|
</div>
|
|
<div>
|
|
<p class="text-white/60 text-xs uppercase tracking-widest font-medium">Portal do Contribuinte</p>
|
|
<p class="text-white font-bold text-lg leading-tight">
|
|
{{ prefeitura.nomePrefeitura || 'Prefeitura Municipal' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-3xl lg:text-[2.6rem] font-bold leading-tight mb-4 tracking-tight">
|
|
Serviços municipais<br />
|
|
<span class="text-white/80">na palma da mão</span>
|
|
</h1>
|
|
<p class="text-white/65 text-base mb-8 leading-relaxed max-w-md">
|
|
Emita certidões, consulte débitos e acesse todos os serviços
|
|
da prefeitura sem precisar sair de casa.
|
|
</p>
|
|
|
|
<!-- Lista de serviços públicos -->
|
|
<ul class="space-y-3 mb-8">
|
|
<li
|
|
v-for="s in servicosPublicos"
|
|
:key="s.titulo"
|
|
class="flex items-center gap-3 group cursor-pointer"
|
|
@click="router.push(s.to)"
|
|
>
|
|
<div class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-white/20 transition-colors">
|
|
<i :class="['pi', s.icon, 'text-white text-sm']" />
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold text-white group-hover:text-white/80 transition-colors">{{ s.titulo }}</p>
|
|
<p class="text-xs text-white/50">{{ s.descricao }}</p>
|
|
</div>
|
|
<i class="pi pi-chevron-right text-white/30 text-xs ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</li>
|
|
</ul>
|
|
|
|
<RouterLink
|
|
:to="{ name: 'servicos' }"
|
|
class="inline-flex items-center gap-2 text-sm text-white/60 hover:text-white transition-colors font-medium"
|
|
>
|
|
Ver todos os serviços disponíveis
|
|
<i class="pi pi-arrow-right text-xs" />
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<!-- Direita — Card de acesso -->
|
|
<div class="flex justify-center lg:justify-end">
|
|
<div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-sm backdrop-blur-sm">
|
|
|
|
<!-- Cabeçalho do card -->
|
|
<div class="flex items-center gap-3 mb-7">
|
|
<div class="w-11 h-11 bg-primary rounded-xl flex items-center justify-center shadow-sm">
|
|
<i class="pi pi-lock-open text-white text-lg" />
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-slate-800 text-base">Área do Contribuinte</p>
|
|
<p class="text-xs text-slate-500">Acesso seguro ao portal</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Formulário -->
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1.5">
|
|
CPF ou CNPJ
|
|
</label>
|
|
<DocumentoInput
|
|
v-model="documento"
|
|
@keyup.enter="continuar"
|
|
/>
|
|
<p v-if="erro" class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
|
|
<i class="pi pi-exclamation-circle text-xs" />
|
|
{{ erro }}
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
label="Continuar"
|
|
icon="pi pi-arrow-right"
|
|
icon-pos="right"
|
|
class="w-full"
|
|
size="large"
|
|
@click="continuar"
|
|
/>
|
|
</div>
|
|
|
|
<Divider>
|
|
<span class="text-xs text-slate-400 font-normal">Primeiro acesso?</span>
|
|
</Divider>
|
|
|
|
<div class="space-y-2.5 text-center">
|
|
<RouterLink
|
|
:to="{ name: 'primeiro-acesso' }"
|
|
class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-colors font-medium"
|
|
>
|
|
<i class="pi pi-key text-slate-500 text-sm" />
|
|
Criar minha senha
|
|
</RouterLink>
|
|
<RouterLink
|
|
:to="{ name: 'credenciamento' }"
|
|
class="block text-xs text-slate-400 hover:text-slate-600 transition-colors"
|
|
>
|
|
Ainda não cadastrado? <span class="text-primary font-semibold">Credenciar-se</span>
|
|
</RouterLink>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── CAROUSEL DE AVISOS ────────────────────────────────────────── -->
|
|
<section class="bg-white border-b border-slate-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<Carousel
|
|
:value="avisos"
|
|
:num-visible="1"
|
|
:num-scroll="1"
|
|
:autoplay-interval="6000"
|
|
circular
|
|
class="aviso-carousel"
|
|
>
|
|
<template #item="{ data: aviso }">
|
|
<div
|
|
:class="[
|
|
'mx-2 rounded-xl border p-4 flex items-start gap-4',
|
|
corAviso[aviso.cor].bg,
|
|
corAviso[aviso.cor].borda,
|
|
]"
|
|
>
|
|
<div
|
|
:class="[
|
|
'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-white shadow-sm',
|
|
]"
|
|
>
|
|
<i :class="['pi', aviso.icone, 'text-lg', corAviso[aviso.cor].icone]" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="font-semibold text-slate-800 text-sm">{{ aviso.titulo }}</p>
|
|
<p class="text-xs text-slate-600 mt-0.5 leading-relaxed">{{ aviso.descricao }}</p>
|
|
</div>
|
|
<RouterLink
|
|
v-if="aviso.acao"
|
|
:to="aviso.acao.to"
|
|
class="flex-shrink-0"
|
|
>
|
|
<Button
|
|
:label="aviso.acao.label"
|
|
size="small"
|
|
outlined
|
|
class="whitespace-nowrap"
|
|
/>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Carousel>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── SERVIÇOS AUTENTICADOS ─────────────────────────────────────── -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-800">Área logada</h2>
|
|
<p class="text-sm text-slate-500 mt-0.5">Serviços disponíveis após login</p>
|
|
</div>
|
|
<span class="hidden sm:flex items-center gap-1.5 bg-primary/8 text-primary text-xs font-semibold px-3 py-1.5 rounded-full border border-primary/15">
|
|
<i class="pi pi-lock text-xs" />
|
|
Requer login
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
|
|
<ServiceCard
|
|
v-for="s in servicosAutenticados"
|
|
:key="s.titulo"
|
|
v-bind="s"
|
|
:require-auth="true"
|
|
/>
|
|
</div>
|
|
|
|
<!-- CTA credenciamento -->
|
|
<div class="mt-10 bg-gradient-to-r from-primary/5 to-primary/10 border border-primary/15 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-5">
|
|
<div>
|
|
<p class="font-bold text-slate-800 text-base">Ainda não tem acesso ao portal?</p>
|
|
<p class="text-sm text-slate-500 mt-1 max-w-md">
|
|
Solicite seu credenciamento e passe a gerenciar todos os seus tributos municipais de forma online.
|
|
</p>
|
|
</div>
|
|
<RouterLink :to="{ name: 'credenciamento' }">
|
|
<Button label="Solicitar Credenciamento" icon="pi pi-user-plus" class="whitespace-nowrap" />
|
|
</RouterLink>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Remove as setas de navegação padrão do Carousel no contexto dos avisos */
|
|
.aviso-carousel :deep(.p-carousel-prev),
|
|
.aviso-carousel :deep(.p-carousel-next) {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
}
|
|
</style>
|