This commit is contained in:
MeysamMoghaddam
2025-10-09 22:32:06 +03:30
parent 3e30b6c1f6
commit 8fc4878c44
3 changed files with 83 additions and 79 deletions

View File

@@ -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>

View File

@@ -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()

View File

@@ -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>