admin/Backend-Api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change step4

Browse Source
This commit is contained in:
MahanCh
2025-05-18 17:52:33 +03:30
parent 3a6f87eaca
commit 6201492879
4 changed files with 292 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
ServiceHost/Pages/Register/_Partials/_Step4.cshtml
View File

@@ -6,12 +6,41 @@
<div class="row p-0 step4Container">
<div class="cardHeight p-0">
<div class="cardContainer p-2" id="cardSelected">
<div class="cardContainer p-3" id="cardSelected">
</div>
<div class="cardBox">
<div class="d-block d-lg-flex align-items-center justify-content-between">
<div class="d-block d-lg-flex align-items-center justify-content-start gap-1">
<div class="titleStep4Contract">شروع قرارداد:</div>
<div class="radioBtnStartEndContainer">
<input type="radio" id="contractStartCurrentMonthFa" value="contractStartCurrentMonthFa" name="radFinanceContract" class="radioOption"/>
<label for="contractStartCurrentMonthFa" class="radioLabelStartEndOption">ابتدای ماه جاری</label>
<input type="radio" id="contractStartNextMonthFa" value="contractStartNextMonthFa" name="radFinanceContract" class="radioOption"/>
<label for="contractStartNextMonthFa" class="radioLabelStartEndOption">ابتدای ماه بعد</label>
</div>
</div>
<div class="d-flex align-items-center justify-content-end gap-3 start-end-contract-section">
<div class="d-flex align-items-center position-relative contractSection">
<div class="startEndCon">شروع قرارداد </div>
<span class="startEndConSpan ss03" id="ContractStartMonthView"></span>
</div>
<div class="d-flex align-items-center position-relative contractSection">
<div class="startEndCon">پایان قرارداد </div>
<span class="startEndConSpan ss03" id="contractEndFa"></span>
</div>
<input type="hidden" id="ContractStartMonthGr" value=""/>
</div>
</div>
</div>
</div>
<div class="w-100 p-0" id="footerTap">
<div style="display: flex; margin: auto 20px 0 0;">
<div style="display: flex; margin: auto 20px 0 0;" class="disable" id="btnDisableDisable">
<button type="button" class="btnStep4Tab active" id="priceStatic">
پرداخت یکجا
</button>
@@ -21,17 +50,9 @@
</div>
<div class="footerStep4Container">
<div>
<div class="titleFooter">مدت قرارداد</div>
<div class="d-flex align-items-center gap-3 justify-content-between">
<div class="radioBtnFooterContainer">
<input type="radio" id="contractStartCurrentMonthFa" value="contractStartCurrentMonthFa" name="radFinanceContract" class="radioOption" checked="checked" />
<label for="contractStartCurrentMonthFa" class="radioLabelListOption">ابتدای ماه جاری</label>
<input type="radio" id="contractStartNextMonthFa" value="contractStartNextMonthFa" name="radFinanceContract" class="radioOption" />
<label for="contractStartNextMonthFa" class="radioLabelListOption">ابتدای ماه بعد</label>
</div>
<div class="disable" id="footerDisableDisable">
<div class="titleFooter mb-1">مدت قرارداد</div>
<div class="d-block text-center d-md-flex align-items-center gap-3 justify-content-center">
<div class="radioBtnFooterContainer">
<input type="radio" id="oneMonth" value="oneMonth" name="radMonth" class="radioOption" disabled="disabled"/>
<label for="oneMonth" class="radioLabelListOption disable">1 ماهه</label>
@@ -47,36 +68,36 @@
</div>
</div>
<div class="infoPricesContainerDiv mt-3" id="priceStepContainer" style="display: none">
<div class="infoPricesContainerDiv mt-1" id="priceStepContainer" style="visibility: hidden;">
<div class="infoPricesContainer" id="priceStepContainerHtml">
<div class="item">
<div class="col-4 text-start">سررسید : اول</div>
<div class="col-4 text-start">-</div>
<div class="col-4 textRightCenter">-</div>
<div class="col-4 text-end">- ریال</div>
</div>
<div class="item">
<div class="col-4 text-start">سررسید : دوم</div>
<div class="col-4 text-start">-</div>
<div class="col-4 textRightCenter">-</div>
<div class="col-4 text-end">- ریال</div>
</div>
<div class="item">
<div class="col-4 text-start">سررسید : سوم</div>
<div class="col-4 text-start">-</div>
<div class="col-4 textRightCenter">-</div>
<div class="col-4 text-end">- ریال</div>
</div>
<div class="item">
<div class="col-4 text-start">سررسید : چهارم</div>
<div class="col-4 text-start">-</div>
<div class="col-4 textRightCenter">-</div>
<div class="col-4 text-end">- ریال</div>
</div>
<div class="item">
<div class="col-4 text-start">سررسید : پنجم</div>
<div class="col-4 text-start">-</div>
<div class="col-4 textRightCenter">-</div>
<div class="col-4 text-end">- ریال</div>
</div>
<div class="item">
<div class="col-4 text-start">سررسید : ششم</div>
<div class="col-4 text-start">-</div>
<div class="col-4 textRightCenter">-</div>
<div class="col-4 text-end">- ریال</div>
</div>
</div>
@@ -86,12 +107,7 @@
<div class="">
<div class="lineRegisterStep4 px-2 my-2"></div>
<div class="d-block text-center d-md-flex justify-content-between align-items-center gap-5">
<div class="d-block text-start gap-2">
<div class="d-flex align-items-center" style="margin: 3px auto; font-size: 12px; color: #0B5959;"><div style="width:100px;">شروع قرارداد: </div> <span id="ContractStartMonthView"></span></div>
<div class="d-flex align-items-center" style="margin: 3px auto; font-size: 12px; color: #0B5959;"><div style="width:100px;">پایان قرارداد: </div> <span id="contractEndFa"></span></div>
<input type="hidden" id="ContractStartMonthGr" value="" />
</div>
<div class="d-block text-center d-md-flex justify-content-end align-items-center gap-5">
<div>
<div class="d-flex align-items-center justify-content-between px-1 px-lg-4 gap-5">
<div class="titlePriceStep4">مجموع مبالغ:</div>

44
ServiceHost/wwwroot/AssetsClient/css/style.css
View File

@@ -96,6 +96,12 @@
outline: none;
}
.ss03 {
-moz-font-feature-settings: "ss03";
-webkit-font-feature-settings: "ss03";
font-feature-settings: "ss03";
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 10px;
@@ -1058,6 +1064,24 @@ ul {
/* Buttons */
button.btn-pdf {
border: 1px solid transparent;
width: 30px;
height: 30px;
border-radius: 5px;
padding: 3px 1px;
color: #E83838;
margin: auto 0 auto 1px;
background-color: rgba(211, 8, 37, 0.2);
box-shadow: 0;
transition: ease .2s;
}
button.btn-pdf svg {
color: rgb(174, 0, 0);
fill: rgb(174, 0, 0);
}
button.btn-print {
border: 1px solid transparent;
width: 30px;
@@ -1071,18 +1095,18 @@ button.btn-print {
transition: ease .2s;
}
button.btn-print svg {
color: #1E293B;
}
button.btn-print svg {
color: #1E293B;
}
button.btn-print:hover {
color: #ffffff;
background-color: rgba(52, 209, 209, 0.50);
}
button.btn-print:hover {
color: #ffffff;
background-color: rgba(52, 209, 209, 0.50);
}
button.btn-print:hover svg {
color: #1E293B;
}
button.btn-print:hover svg {
color: #1E293B;
}
button.btn-edit,
a .btn-edit {

219
ServiceHost/wwwroot/AssetsClient/pages/Register/css/_Partials/_Step4.css
View File

@@ -11,10 +11,10 @@
color: #2B2F32;
font-size: 12px;
font-weight: 500;
background-color:#ffffff;
padding: 9px;
background-color: #ffffff;
padding: 5px 9px;
margin: auto 9px auto 6px;
border-radius:9px 9px 0 0;
border-radius: 9px 9px 0 0;
}
.btnStep4Tab:hover {
@@ -29,25 +29,41 @@
.cardHeight {
height: 30vh;
overflow: auto;
/*height: 30vh;
overflow: auto;*/
}
.cardContainer {
height: 18vh;
overflow: auto;
background-color: #ffffff;
border-radius: 20px;
border-radius: 15px;
padding: 10px;
display: grid;
gap: 9px;
overflow: auto;
gap: 19px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cardBox {
background-color: #ffffff;
border-radius: 15px;
padding: 10px;
/*display: flex;
justify-content: space-between;
align-items: center;*/
gap: 9px;
padding: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.cardGrid {
border: 1px solid #CACACA;
border-radius: 10px;
padding: 9px;
background-color: #ffffff;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.1);
}
.cardGrid .titleWpName {
font-size: 13px;
@@ -112,6 +128,20 @@
}
.titleStep4Contract {
color: #5C5C5C;
font-weight: 600;
font-size: 14px;
text-align: start;
}
.radioBtnStartEndContainer {
display: flex;
/*grid-template-columns: repeat(4, minmax(0, 1fr));*/
gap: 9px;
justify-content: center;
align-items: center;
}
.footerStep4Container {
background-color: #ffffff;
@@ -121,26 +151,77 @@
display: flex;
flex-direction: column;
gap: 9px;
height: 260px;
/* height: 260px; */
justify-content: space-between;
padding: 12px 9px;
}
.footerStep4Container .titleFooter {
color: #5C5C5C;
font-size:12px;
font-weight:500;
text-align:center;
}
.start-end-contract-section {
border: 1px solid #eee;
padding: 5px;
border-radius: 8px;
}
.contractSection {
background-color: #ECFFFF;
padding: 6px;
border-radius: 8px;
text-align: center;
margin: 0 75px 0 0;
}
.contractSection .startEndCon {
position: absolute;
right: -70px;
margin: auto 5px;
font-size: 12px;
font-weight: 500;
color: #5C5C5C;
white-space: nowrap;
}
.contractSection .startEndConSpan {
font-size: 16px;
font-weight: 600;
color: #0B5959;
}
.footerStep4Container .radioBtnFooterContainer {
display: flex;
/*grid-template-columns: repeat(4, minmax(0, 1fr));*/
gap: 9px;
justify-content: center;
align-items: center;
}
.radioLabelStartEndOption {
font-size: 12px;
font-weight: 500;
color: #0F8080;
background-color: #ffffff;
border: 1px solid #1D9D9D;
text-align: center;
padding: 6px 9px;
border-radius: 9px;
width: 130px;
transition: all 0.3s ease-in-out;
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radioOption:checked + .radioLabelStartEndOption {
color: #ffffff;
background-color: #1D9D9D;
}
.footerStep4Container .titleFooter {
color: #5C5C5C;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.footerStep4Container .radioOption {
display: none;
@@ -176,7 +257,7 @@
.infoPricesContainerDiv {
height: 70px;
height: 192px;
overflow: auto;
padding: 6px;
border: 1px solid #E7E7E7;
@@ -186,7 +267,8 @@
.infoPricesContainer {
display: grid;
gap: 6px;
gap: 3px;
column-gap: 12px;
grid-auto-flow: column;
grid-template-rows: repeat(6, minmax(0, 1fr));
align-content: start;
@@ -222,13 +304,22 @@
color: #1ABA3D;
font-size: 13px;
font-weight: 600;
width: 160px;
text-align: left;
}
.textRightCenter {
text-align: start;
}
@media (max-width:1366px) {
.step4Container {
height: 80vh;
}
.cardContainer {
grid-template-columns: repeat(2, minmax(0, 1fr));
display: none;
}
.footerStep4Container .radioLabelListOption {
@@ -239,29 +330,87 @@
font-size: 11px;
}
.startEndConSpan {
width: auto;
}
/*.cardHeight {
height: 260px;
}*/
}
@media (max-width:992px) {
.step4Container {
height: auto;
}
.cardBox {
padding: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.step4Container {
height: 74vh;
}
.infoPricesContainerDiv {
height: 110px;
}
.footerStep4Container .radioLabelListOption {
width: 100px;
}
.contractSection {
width: 100%;
margin: 0 0 0 0;
justify-content: center;
}
.contractSection .startEndCon {
position: relative;
right: auto;
font-weight: 800;
font-size: 10px;
}
.contractSection .startEndConSpan {
font-size: 12px;
font-weight: 800;
}
.infoPricesContainer {
grid-template-rows: repeat(1, minmax(0, 1fr));
height: 130px;
grid-template-rows: repeat(12, minmax(0, 1fr));
overflow: auto;
}
.infoPricesContainer .item {
font-size: 10px;
font-weight: 600;
}
/*.cardHeight {
height: 48vh;
}*/
.titleStep4Contract {
text-align: center;
}
.radioLabelStartEndOption {
width: 100%;
}
.radioBtnStartEndContainer {
margin: auto auto 10px;
}
.checkLabelListOption {
font-size: 10px;
}
.textRightCenter {
text-align: center;
}
}
@media (max-width:768px) {
@@ -269,10 +418,24 @@
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.btnStep4Tab {
width: 43%;
}
}
@media (max-height:768px) {
.infoPricesContainerDiv {
height: 100px;
}
}
@media (max-width:540px) {
.footerStep4Container .radioLabelListOption {
.footerStep4Container .radioBtnFooterContainer {
display: flex;
gap: 5px;
}
.footerStep4Container .radioBtnFooterContainer .radioLabelListOption {
width: 100%;
}
}

33
ServiceHost/wwwroot/AssetsClient/pages/Register/js/_Partials/_Step4.js
View File

@@ -8,9 +8,11 @@
$('input[name="radFinanceContract"]').on('change', function () {
totalPaymentAndWorkshopList();
$("#btnDisableDisable").removeClass("disable");
$("#footerDisableDisable").removeClass("disable");
});
$('input[name="radFinanceContract"]:checked').trigger('change');
//$('input[name="radFinanceContract"]:checked').trigger('change');
});
function autoScrollStep4() {
@@ -131,7 +133,7 @@ async function totalPaymentAndWorkshopList() {
//console.log(response.data);
if (hasPriceStatic) {
$(`#sumOfWorkshopsPaymentPayment`).text(response.data.oneTimeWithoutTaxPaymentStr + " ریال");
$(`#sumOfWorkshopsPaymentPayment`).html(response.data.oneTimeWithoutTaxPaymentStr + " ریال");
$(`#totalPaymentStr`).text(response.data.oneTimeTotalPaymentStr + " ریال");
} else {
@@ -155,12 +157,13 @@ async function totalPaymentAndWorkshopList() {
$('#priceStepContainerHtml').html('');
if (response.data.monthlyInstallments) {
response.data.monthlyInstallments?.forEach(function (item) {
response.data.monthlyInstallments?.forEach(function (item, index) {
var html = `
<div class="item">
<div class="col-4 text-start">${item.installmentCounter}</div>
<div class="col-4 text-start">${item.instalmentDate}</div>
<div class="col-4 text-end">${item.installmentAmountStr} ریال</div>
<div class="col-1 text-start ss03">${++index}</div>
<div class="col-5 text-start">${item.installmentCounter}</div>
<div class="col-3 textRightCenter ss03">${item.instalmentDate}</div>
<div class="col-3 text-end">${item.installmentAmountStr} ریال</div>
</div>
`;
$('#priceStepContainerHtml').append(html);
@@ -194,6 +197,18 @@ async function totalPaymentAndWorkshopList() {
//$(document).on('change', '.btnCheckContainer .checkOption', createOrUpdateCommand);
async function checkInputsStep4() {
//checkRequirementData();
if (!$('input[name="radFinanceContract"]:checked').length) {
validateField('.radioLabelStartEndOption', 'لطفاً شروع قرارداد را مشخص نمایید', 3500);
return false;
}
//if (!$("#priceStatic").hasClass("active") || !$("#priceStep").hasClass("active")) {
// validateField('#btnDisableDisable', 'لطفاً روش پرداخت را مشخص نمایید', 3500);
// return false;
//}
let btnDisable = $('.stepNext').addClass('disable');
let loading = $('.stepNext .loading').show();
@@ -274,7 +289,8 @@ async function step4Action() {
}
$('#priceStatic').on('click', function () {
$('#priceStepContainer').hide();
//$('#priceStepContainer').hide();
$('#priceStepContainer').css('visibility', 'hidden');
$('#priceStep').removeClass('active');
$(this).addClass('active');
@@ -282,7 +298,8 @@ $('#priceStatic').on('click', function () {
});
$('#priceStep').on('click', function () {
$('#priceStepContainer').fadeIn();
//$('#priceStepContainer').fadeIn();
$('#priceStepContainer').css('visibility', 'visible');
$('#priceStatic').removeClass('active');
$(this).addClass('active');