u
This commit is contained in:
MeysamMoghaddam
@@ -163,10 +163,13 @@
|
|||||||
<MudText Typo="Typo.h5" Class="mb-3">@(p.Title)</MudText>
|
<MudText Typo="Typo.h5" Class="mb-3">@(p.Title)</MudText>
|
||||||
@((MarkupString)p.Body)
|
@((MarkupString)p.Body)
|
||||||
</MudCardContent>
|
</MudCardContent>
|
||||||
<MudCardActions>
|
<MudCardActions Class="ma-2">
|
||||||
<MudButton Variant="Variant.Outlined"
|
<MudText Typo="Typo.h5"
|
||||||
|
Color="Color.Success"
|
||||||
|
Align="Align.End">@(p.Price.ToThousands().ToCurrencyUnitIRT())</MudText>
|
||||||
|
<MudSpacer />
|
||||||
|
<MudButton Variant="Variant.Filled"
|
||||||
Color="Color.Primary"
|
Color="Color.Primary"
|
||||||
FullWidth="true"
|
|
||||||
OnClick="@(() => NavigateToPackage(p.Id))">مشاهده جزئیات</MudButton>
|
OnClick="@(() => NavigateToPackage(p.Id))">مشاهده جزئیات</MudButton>
|
||||||
</MudCardActions>
|
</MudCardActions>
|
||||||
</MudCard>
|
</MudCard>
|
||||||
|
|||||||
@@ -26,10 +26,11 @@ public partial class Index
|
|||||||
if (response?.Models?.Any() == true)
|
if (response?.Models?.Any() == true)
|
||||||
{
|
{
|
||||||
_packs = response.Models.Select(p => new Pack(
|
_packs = response.Models.Select(p => new Pack(
|
||||||
p.Id,
|
Id: p.Id,
|
||||||
p.Title,
|
Title: p.Title,
|
||||||
p.Description,
|
Body: p.Description,
|
||||||
Image: UrlUtility.DownloadUrl + p.ImagePath
|
Image: UrlUtility.DownloadUrl + p.ImagePath,
|
||||||
|
Price: p.Price
|
||||||
)).ToList();
|
)).ToList();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
@@ -64,7 +65,7 @@ public partial class Index
|
|||||||
Navigation.NavigateTo($"{RouteConstants.Package.Detail}/{packageId}");
|
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 Plan(string Name, string Price, bool Highlight, IEnumerable<string> Features);
|
||||||
private record QA(string Q, string A);
|
private record QA(string Q, string A);
|
||||||
private readonly List<QA> _faqs = new()
|
private readonly List<QA> _faqs = new()
|
||||||
|
|||||||
@@ -30,8 +30,78 @@ else
|
|||||||
<!-- Package Details -->
|
<!-- Package Details -->
|
||||||
<MudContainer MaxWidth="MaxWidth.Large" Class="pb-8">
|
<MudContainer MaxWidth="MaxWidth.Large" Class="pb-8">
|
||||||
<MudGrid Spacing="4">
|
<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 -->
|
<!-- 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">
|
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||||
<!-- Package Header -->
|
<!-- Package Header -->
|
||||||
<MudStack Spacing="4">
|
<MudStack Spacing="4">
|
||||||
@@ -144,76 +214,6 @@ else
|
|||||||
}
|
}
|
||||||
</MudPaper>
|
</MudPaper>
|
||||||
</MudItem>
|
</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>
|
</MudGrid>
|
||||||
</MudContainer>
|
</MudContainer>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user