dev #14305 Изменение дизайна WPA Кофе-лайка: change loyality program page

This commit is contained in:
nikolay 2023-05-16 15:38:21 +04:00
parent ff9e04ecbd
commit 2fa05b391e
2 changed files with 50 additions and 38 deletions

View File

@ -1,17 +1,49 @@
<app-navbar title="Программа лояльности" (backEvent)="goBack()"></app-navbar>
<ng-container *ngIf="loyaltyProgram.currentLvlPeriod">
<div class="loyality-program">
<app-accordion header="Условия начисления бонусов">
<p>
Расчет начисления бонусов - 10% от суммы покупок за период с 11.01.2023г.
по 31.03.2023 г.
Ваш текущий уровень {{ loyaltyProgram.currentLvl }},
поэтому вам начисляется {{ loyaltyProgram.currentLvlPeriod.percent }}% от суммы покупки.
</p>
<p>
За период с 11.01.2023г. по 31.03.2023 г. сумма ваших покупок составила
3700 руб.
</p>
<p>Начисляемый бонус 10% от суммы покупок</p>
Смена уровня произойдет в начале следующего квартала,
{{ loyaltyProgram.purchaseData.currentPeriod[1]
.locale("ru")
.format("DD.MM.YY") }}.
</p>
</app-accordion>
<app-accordion header="Уровни бонусной программы">
<p>
Начисление Бонусных баллов происходит по дифференцированной шкале в
зависимости от уровня:
</p>
<ng-container
*ngFor="let item of lvlPeriods; let index = index; let last = last"
>
<ng-container *ngIf="!last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>
Сумма покупок за прошлый квартал {{ item.start }}-{{ item.end }}
руб.
</li>
<li>Начисляемый бонус {{ item.percent }}% от суммы покупки</li>
</ul>
<br />
</ng-container>
<ng-container *ngIf="last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>Сумма покупок за прошлый квартал — от {{ item.start }} руб.</li>
<li>Начисляемый бонус, в % от суммы покупки - {{ item.percent }}%</li>
</ul>
</ng-container>
</ng-container>
</app-accordion>
<app-accordion header="Условия «оплаты» покупки бонусами">
<p>
Участник может использовать Бонусы для «оплаты» до 100% стоимости любой
@ -67,35 +99,7 @@
</ul>
</app-accordion>
<app-accordion header="Узнать % начисляемых бонусов">
<p>
Начисление Бонусных баллов происходит по дифференцированной шкале в
зависимости от уровня:
</p>
<ng-container
*ngFor="let item of lvlPeriods; let index = index; let last = last"
>
<ng-container *ngIf="!last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>
Сумма покупок за предыдущий период {{ item.start }}-{{ item.end }}
руб.
</li>
<li>Начисляемый бонус {{ item.percent }}% от суммы покупки</li>
</ul>
<br />
</ng-container>
<ng-container *ngIf="last">
<ul>
<span [style]="{ color: item.color }">Уровень {{ index + 1 }}</span>
<li>Сумма покупок за предыдущий период — от {{ item.start }} руб.</li>
<li>Начисляемый бонус, в % от суммы покупки - {{ item.percent }}%</li>
</ul>
</ng-container>
</ng-container>
</app-accordion>
</div>
<app-footer></app-footer>
</ng-container>

View File

@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { lvlPeriod } from 'src/app/interface/data';
import { lvlPeriods } from 'src/app/app.constants';
import { LoyaltyProgramService } from 'src/app/services/loyalty-program.service';
@Component({
selector: 'loyality-program',
@ -9,13 +10,20 @@ import { lvlPeriods } from 'src/app/app.constants';
styleUrls: ['./loyality-program.component.scss'],
})
export class LoyalityProgramComponent implements OnInit {
constructor(private _location: Location) {}
constructor(
private _location: Location,
public loyaltyProgram: LoyaltyProgramService,
) {}
public lvlPeriods: lvlPeriod[] = lvlPeriods;
goBack() {
this._location.back();
}
ngOnInit(): void {}
ngOnInit(): void {
if(this.loyaltyProgram.currentLvlPeriod == null) {
this._location.back();
}
}
}