NotificationPopup

src/layouts/components/notification-popup/NotificationPopup.vue
Overlay Medium 1 uso

Popup de notificações do sistema exibido na entrada do usuário quando há notificações não-lidas. Usa Swiper (vue-awesome-swiper) para navegação entre notificações em slides. Cada slide: título em primário + texto HTML + vídeo opcional (iframe YouTube). Botões de navegação externos ao swiper (.button-next / .button-prev). Último slide: botão "Marcar como lida(s)" que marca todas via loop. v-if condicional — não renderiza se não há notificações. Zero props, zero eventos — totalmente gerenciado pelo módulo Vuex userNotification.

1 Notificação

Com apenas 1 notificação: botão "Marcar como lida" visível imediatamente. Botão "Continuar" oculto. Layout: vs-col=2 (chevron esq.) + vs-col=8 (card+swiper) + vs-col=2 (chevron dir.).

Bem-vindo ao Pedbot!

Estamos felizes em ter você aqui! Confira as novidades desta versão e aproveite todas as funcionalidades disponíveis no sistema.

Acesse o menu lateral para navegar entre os módulos.

Real src/layouts/main/Main.vue:78 
<!-- Registrado em Main.vue junto com os outros popups de sistema -->
<notification-popup/>
<contract-popup/>
<update-password-popup/>

Múltiplas Notificações

Com N notificações: slides intermediários mostram "Continuar", último slide exibe "Marcar como lida(s)". Bullets de paginação abaixo do conteúdo indicam posição atual.

Slide intermediário
Nova funcionalidade: Relatórios

Agora você pode exportar relatórios de atendimento em PDF e Excel diretamente pela tela de análise.

Último slide
Atualização de segurança

Recomendamos trocar sua senha periodicamente. Acesse Meu Perfil → Segurança para atualizar.

Sintético comportamento interno 
<!-- Estados de botão são controlados internamente por índice de slide (Swiper) -->
<!-- Slide intermediário: isLast = false → v-show="!isLast" -->
<vs-button v-show="!isLast" @click="nextSlide">Continuar</vs-button>

<!-- Último slide: isLast = true → v-show="isLast" -->
<vs-button v-show="isLast" @click="readAllNotifications">
  Marcar como lida(s)
</vs-button>

Slide com Vídeo

Quando notification.video_url está preenchido, o slide exibe um iframe YouTube de 300px de altura. O iframe só é renderizado com v-if="openPopUp" — evita autoplay ao fechar o popup. Este comportamento é determinado pelos dados da notificação no backend, não por props.

Tutorial: Como usar o Pedbot

Assista ao vídeo abaixo para conhecer as principais funcionalidades.

iframe YouTube — 300px altura renderizado apenas quando openPopUp=true
Sintético comportamento interno 
<!-- iframe só existe quando o popup está aberto (openPopUp=true) -->
<!-- Isso evita que o YouTube faça autoplay quando o popup reabre -->
<iframe
  v-if="openPopUp && notification.video_url"
  :src="notification.video_url"
  frameborder="0"
  allowfullscreen
  style="width:100%; height:300px;"
/>

Fluxo de Ciclo de Vida

O componente abre automaticamente via Vuex — sem interação do usuário necessária. O módulo userNotification é registrado dinamicamente em mounted().

mounted() — registra módulo userNotification se não existir
↓
dispatch('userNotification/fetch', AppActiveUser.id)
↓
notifications.length > 0 ? openPopUp = true : componente não renderiza (v-if false)
↓
Usuário navega slides via Swiper (botões externos .button-prev / .button-next)
↓
No último slide: clica "Marcar como lida(s)"
↓
readAllNotifications(): openPopUp=false → loop dispatch('userNotification/read', id) para cada item
↓
Popup fechado. Notificações removidas da store.

API

Resumo
PropsNenhuma
Eventos emitidosNenhum
PadrãoSingleton Vuex — auto-gerenciado

Estado interno (data)

PropriedadeTipoDescrição
openPopUp Boolean Controla visibilidade do vs-popup. Setado true quando há notificações não-lidas.
swiperOption Object Config do Swiper: pagination clickable (bullets), navigation via botões externos (.button-next/.button-prev).
isLast Boolean (computed) True quando slide ativo é o último. Controla visibilidade de "Continuar" vs "Marcar como lida".

Dependências

TipoDependênciaDescrição
Vuesax vs-popup, vs-row, vs-col, vs-button Layout e popup base
Custom vx-card Wrapper do swiper com slot no-body
Externo vue-awesome-swiper Componentes swiper e swiperSlide para navegação em slides
Store userNotification (módulo dinâmico) Registrado via registerModule em mounted(). Actions: fetch, read. Getter: notificações do usuário.
Store AppActiveUser.id ID do usuário ativo — passado ao fetch de notificações
HTTP userNotification.fetch Busca notificações não-lidas do usuário via API

CSS tokens internos

Classe/VariávelValorDescrição
.text-headercolor: $PRIMARY_COLORTítulo de cada slide em cor primária
.text-bodywhite-space: pre-linePreserva quebras de linha no corpo HTML
altura do swiper420pxAltura fixa do container swiper
slide min-height70vhAltura mínima de cada slide
.button-prev / .button-next—Elementos externos ao swiper que controlam navegação

Onde é usado

ArquivoNota
src/layouts/main/Main.vue:78 Único uso. Registrado no bloco de popups de sistema junto com ContractPopup e UpdatePasswordPopup.