u
This commit is contained in:
@@ -163,10 +163,13 @@
|
||||
<MudText Typo="Typo.h5" Class="mb-3">@(p.Title)</MudText>
|
||||
@((MarkupString)p.Body)
|
||||
</MudCardContent>
|
||||
<MudCardActions>
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
<MudCardActions Class="ma-2">
|
||||
<MudText Typo="Typo.h5"
|
||||
Color="Color.Success"
|
||||
Align="Align.End">@(p.Price.ToThousands().ToCurrencyUnitIRT())</MudText>
|
||||
<MudSpacer />
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
FullWidth="true"
|
||||
OnClick="@(() => NavigateToPackage(p.Id))">مشاهده جزئیات</MudButton>
|
||||
</MudCardActions>
|
||||
</MudCard>
|
||||
|
||||
@@ -26,10 +26,11 @@ public partial class Index
|
||||
if (response?.Models?.Any() == true)
|
||||
{
|
||||
_packs = response.Models.Select(p => new Pack(
|
||||
p.Id,
|
||||
p.Title,
|
||||
p.Description,
|
||||
Image: UrlUtility.DownloadUrl + p.ImagePath
|
||||
Id: p.Id,
|
||||
Title: p.Title,
|
||||
Body: p.Description,
|
||||
Image: UrlUtility.DownloadUrl + p.ImagePath,
|
||||
Price: p.Price
|
||||
)).ToList();
|
||||
}
|
||||
else
|
||||
@@ -64,7 +65,7 @@ public partial class Index
|
||||
Navigation.NavigateTo($"{RouteConstants.Package.Detail}/{packageId}");
|
||||
}
|
||||
|
||||
private record Pack(long Id,string Title, string Body, string Image);
|
||||
private record Pack(long Id, string Title, string Body, string Image, long Price);
|
||||
private record Plan(string Name, string Price, bool Highlight, IEnumerable<string> Features);
|
||||
private record QA(string Q, string A);
|
||||
private readonly List<QA> _faqs = new()
|
||||
|
||||
@@ -30,8 +30,78 @@ else
|
||||
<!-- Package Details -->
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="pb-8">
|
||||
<MudGrid Spacing="4">
|
||||
<!-- Sidebar (Mobile First) -->
|
||||
<MudItem xs="12" lg="4" Class="order-1 order-lg-2">
|
||||
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface sticky-top">
|
||||
<MudStack Class="mb-4">
|
||||
<!-- Package Image -->
|
||||
<MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
|
||||
<MudImage Src="@_package.Image"
|
||||
Alt="@_package.Title"
|
||||
Height="250"
|
||||
ObjectFit="ObjectFit.Cover"
|
||||
ObjectPosition="ObjectPosition.Center"
|
||||
Style="width:100%"
|
||||
Class="rounded-xl" />
|
||||
</MudPaper>
|
||||
|
||||
<MudText Typo="Typo.h4" Class="px-2">@(_package.Title)</MudText>
|
||||
</MudStack>
|
||||
|
||||
|
||||
<!-- Pricing -->
|
||||
<MudStack Spacing="3">
|
||||
@if (_package.Pricing.HasDiscount)
|
||||
{
|
||||
<div>
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudText Typo="Typo.h5" Class="text-decoration-line-through mud-text-secondary">@_package.Pricing.OriginalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
<MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">@_package.Pricing.DiscountPercent% تخفیف</MudChip>
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.h4" Color="Color.Success" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText Typo="Typo.h4" Color="Color.Primary" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
}
|
||||
|
||||
<!-- Purchase Button -->
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
FullWidth="true"
|
||||
Size="Size.Large"
|
||||
OnClick="PurchasePackage"
|
||||
Disabled="_isPurchasing">
|
||||
@(_isPurchasing ? "در حال پردازش..." : "خرید پکیج")
|
||||
</MudButton>
|
||||
|
||||
<!-- Package Features -->
|
||||
<div>
|
||||
<MudText Typo="Typo.subtitle2" Class="mb-2 fw-600">شامل:</MudText>
|
||||
<MudStack Spacing="1">
|
||||
@foreach (var feature in _package.Features)
|
||||
{
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Success" Class="mt-1" />
|
||||
<MudText Typo="Typo.body2">@feature</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
</MudStack>
|
||||
</div>
|
||||
|
||||
<!-- Support Info -->
|
||||
<MudDivider Class="my-2" />
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Support" Size="Size.Small" Color="Color.Info" />
|
||||
<MudText Typo="Typo.body2">پشتیبانی ۲۴ ساعته</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<!-- Main Content -->
|
||||
<MudItem xs="12" lg="8">
|
||||
<MudItem xs="12" lg="8" Class="order-2 order-lg-1">
|
||||
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<!-- Package Header -->
|
||||
<MudStack Spacing="4">
|
||||
@@ -144,76 +214,6 @@ else
|
||||
}
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<MudItem xs="12" lg="4">
|
||||
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface sticky-top">
|
||||
<MudStack Class="mb-4">
|
||||
<!-- Package Image -->
|
||||
<MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
|
||||
<MudImage Src="@_package.Image"
|
||||
Alt="@_package.Title"
|
||||
Height="250"
|
||||
ObjectFit="ObjectFit.Cover"
|
||||
ObjectPosition="ObjectPosition.Center"
|
||||
Style="width:100%"
|
||||
Class="rounded-xl" />
|
||||
</MudPaper>
|
||||
|
||||
<MudText Typo="Typo.h4" Class="px-2">@(_package.Title)</MudText>
|
||||
</MudStack>
|
||||
|
||||
|
||||
<!-- Pricing -->
|
||||
<MudStack Spacing="3">
|
||||
@if (_package.Pricing.HasDiscount)
|
||||
{
|
||||
<div>
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudText Typo="Typo.h5" Class="text-decoration-line-through mud-text-secondary">@_package.Pricing.OriginalPrice.ToString("N0") تومان</MudText>
|
||||
<MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">@_package.Pricing.DiscountPercent% تخفیف</MudChip>
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.h4" Color="Color.Success" Class="fw-700">@_package.Pricing.FinalPrice.ToString("N0") تومان</MudText>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText Typo="Typo.h4" Color="Color.Primary" Class="fw-700">@_package.Pricing.FinalPrice.ToString("N0") تومان</MudText>
|
||||
}
|
||||
|
||||
<!-- Purchase Button -->
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
FullWidth="true"
|
||||
Size="Size.Large"
|
||||
OnClick="PurchasePackage"
|
||||
Disabled="_isPurchasing">
|
||||
@(_isPurchasing ? "در حال پردازش..." : "خرید پکیج")
|
||||
</MudButton>
|
||||
|
||||
<!-- Package Features -->
|
||||
<div>
|
||||
<MudText Typo="Typo.subtitle2" Class="mb-2 fw-600">شامل:</MudText>
|
||||
<MudStack Spacing="1">
|
||||
@foreach (var feature in _package.Features)
|
||||
{
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Success" Class="mt-1" />
|
||||
<MudText Typo="Typo.body2">@feature</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
</MudStack>
|
||||
</div>
|
||||
|
||||
<!-- Support Info -->
|
||||
<MudDivider Class="my-2" />
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Support" Size="Size.Small" Color="Color.Info" />
|
||||
<MudText Typo="Typo.body2">پشتیبانی ۲۴ ساعته</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user