planos-vendas.component
import {
ChangeDetectionStrategy,
Component,
OnInit,
ViewEncapsulation,
} from "@angular/core";
import { PlanoVendaSite } from "../services/interfaces/planoVendaSIte";
import { PublicoService } from "../services/publico.service";
@Component({
selector: "planos-vendas",
templateUrl: "./planos-vendas.component.html",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlanoVendaComponent implements OnInit {
valorMensal: boolean = true;
valorTrimestral: boolean = false;
valorSemestral: boolean = false;
valorAnual: boolean = false;
valorBisanual: boolean = false;
planoVendas: PlanoVendaSite[];
constructor(private publicoService: PublicoService) {}
async ngOnInit(): Promise<void> {
this.planoVendas = [];
await this.publicoService
.getPlanoVendaAtivos()
.then((entidade) => (this.planoVendas = entidade));
}
clicarBotao(tipo: string): void {
this.valorMensal = false;
this.valorTrimestral = false;
this.valorSemestral = false;
this.valorAnual = false;
this.valorBisanual = false;
if (tipo === "MENSAL") {
this.valorMensal = true;
} else if (tipo === "TRIMESTRAL") {
this.valorTrimestral = true;
} else if (tipo === "SEMESTRAL") {
this.valorSemestral = true;
} else if (tipo === "ANUAL") {
this.valorAnual = true;
} else if (tipo === "BISANUAL") {
this.valorBisanual = true;
}
}
}
planos-vendas.component.html
<div class="relative flex flex-col flex-auto min-w-0 overflow-hidden">
<div
class="relative pt-8 pb-12 sm:pt-20 sm:pb-24 px-6 sm:px-16 overflow-hidden"
>
<svg
class="-z-1 absolute inset-0"
viewBox="0 0 960 540"
width="100%"
height="100%"
preserveAspectRatio="xMidYMax slice"
xmlns="http://www.w3.org/2000/svg"
>
<g
class="opacity-40 text-gray-200 dark:text-gray-800"
fill="none"
stroke="currentColor"
stroke-width="100"
>
<circle r="234" cx="196" cy="23"></circle>
<circle r="234" cx="790" cy="491"></circle>
</g>
</svg>
<div class="flex flex-col items-center">
<h2 class="text-xl font-semibold">Valores</h2>
<div
class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center"
>
Planos de vendas
</div>
<div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
<div class="">
Comece pequeno e gratuito, atualize à medida que avança.
</div>
<div class="">Assuma o controle de tudo.</div>
</div>
<div
class="flex items-center mt-8 sm:mt-16 p-0.5 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700"
>
<button
class="px-6"
[ngClass]="{
'bg-card pointer-events-non shadow': valorMensal,
'bg-transparent': !valorMensal
}"
mat-flat-button
(click)="clicarBotao('MENSAL')"
disableRipple
>
Valores mensais
</button>
<button
class="px-6"
[ngClass]="{
'bg-card pointer-events-none shadow': valorTrimestral,
'bg-transparent': !valorTrimestral
}"
mat-flat-button
(click)="clicarBotao('TRIMESTRAL')"
disableRipple
>
Valores trimestral
</button>
<button
class="px-6"
[ngClass]="{
'bg-card pointer-events-none shadow': valorSemestral,
'bg-transparent': !valorSemestral
}"
mat-flat-button
(click)="clicarBotao('SEMESTRAL')"
disableRipple
>
Valores semestrais
</button>
<button
class="px-6"
[ngClass]="{
'bg-card pointer-events-none shadow': valorAnual,
'bg-transparent': !valorAnual
}"
mat-flat-button
(click)="clicarBotao('ANUAL')"
disableRipple
>
Valores anuais
</button>
<button
class="px-6"
[ngClass]="{
'bg-card pointer-events-none shadow': valorBisanual,
'bg-transparent': !valorBisanual
}"
mat-flat-button
(click)="clicarBotao('BISANUAL')"
disableRipple
>
Valores bisanuais
</button>
</div>
</div>
<div class="flex justify-center mt-10 sm:mt-20">
<div class="w-full max-w-sm md:max-w-7xl">
<div
class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-y-6 lg:gap-y-0 md:gap-x-6"
>
<div *ngFor="let planoVenda of planoVendas">
<fuse-card
class="flex-col max-w-sm md:max-w-none p-6 sm:py-12 sm:px-10"
>
<div class="text-4xl font-bold tracking-tight leading-tight">
{{ planoVenda.nome }}
</div>
<div
class="mt-2 text-lg font-medium tracking-tight text-secondary"
>
{{ planoVenda.descricao }}
</div>
<div class="w-8 h-1 my-10 rounded bg-accent"></div>
<div class="flex items-baseline whitespace-nowrap">
<div class="mr-2 text-2xl">R$</div>
<div
class="text-6xl font-semibold leading-tight tracking-tight"
>
<ng-container *ngIf="valorMensal">
{{ planoVenda.valor | currency }}</ng-container
>
<ng-container *ngIf="valorTrimestral">
{{ planoVenda.valores[0].total | currency }}</ng-container
>
<ng-container *ngIf="valorSemestral">
{{ planoVenda.valores[1].total | currency }}</ng-container
>
<ng-container *ngIf="valorAnual">
{{ planoVenda.valores[2].total | currency }}</ng-container
>
<ng-container *ngIf="valorBisanual">
{{ planoVenda.valores[3].total | currency }}</ng-container
>
</div>
</div>
<div class="flex flex-col mt-2 text-secondary">
<div class="mr-2 text-2xl">Cobrança R$</div>
<ng-container>
<div>
<b>R$ {{ planoVenda.valor | currency }}</b> mensal
</div>
<div>
<b>R$ {{ planoVenda.valores[0].totalTempo | currency }}</b>
trimestral
</div>
<div>
<b>R$ {{ planoVenda.valores[1].totalTempo | currency }}</b>
semestral
</div>
<div>
<b>R$ {{ planoVenda.valores[2].totalTempo | currency }}</b>
anual
</div>
<div>
<b>R$ {{ planoVenda.valores[3].totalTempo | currency }}</b>
bisanual
</div>
</ng-container>
</div>
<button
class="fuse-mat-button-large mt-10"
mat-stroked-button
[color]="'primary'"
*ngIf="planoVenda.planoTipo === 'GERENCIAL'"
>
Comece seu teste de 15 dias
</button>
<button
class="fuse-mat-button-large mt-10"
mat-stroked-button
[color]="'primary'"
*ngIf="planoVenda.planoTipo !== 'GERENCIAL'"
>
Assine
</button>
</fuse-card>
</div>
</div>
</div>
</div>
</div>
</div>
publico.service.ts
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { environment } from "environments/environment";
import { PlanoVendaSite } from "./interfaces/planoVendaSIte";
@Injectable({
providedIn: "root",
})
export class PublicoService {
private servico: String = "publico/";
constructor(private http: HttpClient) {}
async getPlanoVendaAtivos(): Promise<PlanoVendaSite[]> {
return this.http
.get<PlanoVendaSite[]>(`${environment.SITE}${this.servico}planos-vendas/`)
.toPromise();
}
}
Quando entra na página o serviço é chamado, mas não mostra nada em tela
Só quando eu clico em qualquer botão
O que pode ser ?