nitrobon
/
pipicar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nim_style

pull/13/head
nimtaurel 2025-05-15 18:24:19 +05:00
parent d6d39a08ad
commit dd2d17c124
5 changed files with 288 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
modules/main/Components/Main.php
View File

@ -26,22 +26,27 @@ class Main extends Component
$ended_at = Request::input('ended_at') ?? null;
$bodywork_filters = Request::input('bodywork_filters') ?? null;
// $request = new \Illuminate\Http\Request([
// 'started_at' => Carbon::now()->toDateString(),
// 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
// ]);
//
// $response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
// $this->params['cars'] = collect($response->getData(true));
$request = new \Illuminate\Http\Request([
'started_at' => Carbon::now()->toDateString(),
'ended_at' => Carbon::now()->addDays(3)->toDateString(),
]);
$response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
$this->params['cars'] = collect($response->getData(true))->filter(function ($item) {
return !empty($item['tariffs']);
})->values();
// dd($class_filters, $started_at, $ended_at, $bodywork_filters);
$response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
'started_at' => $started_at ?? Carbon::now()->toDateString(),
'ended_at' => $ended_at ?? Carbon::now()->addDays(3)->toDateString(),
'class' => $class_filters ?? null,
'bodywork' => $bodywork_filters ?? null,
]);
$this->params['cars'] = collect($response->json());
// $response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
// 'started_at' => $started_at ?? Carbon::now()->toDateString(),
// 'ended_at' => $ended_at ?? Carbon::now()->addDays(3)->toDateString(),
// 'class' => $class_filters ?? null,
// 'bodywork' => $bodywork_filters ?? null,
// ]);
//
// $this->params['cars'] = collect($response->json())->filter(function ($item) {
// return !empty($item['tariffs']);
// })->values();
}
}

147
modules/main/views/main.blade.php
View File

@ -127,9 +127,28 @@
<div class="car-card-footer">
<div class="cost">
<small>Базовая ставка</small>
<p class="m-0">@isset($car['tariffs'][0]['price']){{ $car['tariffs'][0]['price'] }} ₸@endisset</p>
@php
$tariffWithMin1 = collect($car['tariffs'])->firstWhere('min', 1);
@endphp
<p class="m-0">
@if($tariffWithMin1)
{{ $tariffWithMin1['price'] }} ₸
@endif
</p>
</div>
<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#rentModal">Арендовать</a>
<a href="#" class="btn btn-primary open-rent-modal"
data-bs-toggle="modal"
data-bs-target="#rentModal"
data-photo="{{ $car['photo'] ?? asset('img/default.png') }}"
data-brand="{{ $car['brand'] }}"
data-mark="{{ $car['mark'] }}"
data-year="{{ $car['year'] }}"
data-fuel="{{ $car['fuel_type'] }}"
data-people="{{ $car['people'] }}"
data-id="{{ $car['id'] ?? '' }}">
@lang('Арендовать')
</a>
</div>
</div>
</div>
@ -141,17 +160,27 @@
</div>
<div class="modal fade" id="rentModal" tabindex="-1" aria-labelledby="rentModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-lg" style="min-width: 75vw">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="rentModalLabel">Форма аренды</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post">
<input hidden="" name="mark_id" id="mark_id" value="1">
<input hidden="" name="color" id="color" value="808080">
<div class="card mb-4" style="overflow: visible;">
<div class="row justify-content-center align-items-start">
<form method="post" class="col-12 col-md-7">
<input hidden="" name="mark_id" id="mark_id" value="">
<input hidden="" name="color" id="color" value="">
<div class="car-card d-flex flex-grow-1 flex-row mb-4">
<img id="modalCarImage" class="img-fluid" src="" alt="Car Image" style="width: 50%; margin-right: 2rem;">
<div>
<div class="title" id="modalCarTitle"></div>
<div class="subtitle">@lang('или аналогичный')</div>
<div class="title-small mt-4 mb-2">@lang('Особенности автомобиля')</div>
<div class="card-car-chars">
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p>&nbsp;@lang('Кондиционер')</p></div>
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p id="modalFuel">&nbsp;</p></div>
<div class="add-li"><i class="material-symbols-outlined">groups</i><p id="modalPeople">&nbsp;</p></div>
</div>
</div>
</div>
<div class="card m-0 mb-4" style="overflow: visible;">
<div class="card-body">
<div class="mb-3">
<div class="row justify-content-center align-items-end">
@ -161,7 +190,7 @@
</div>
<div class="col-12 col-md-6">
<div class="form-text">
Чем больше срок аредны, тем ниже базовая ставка.
Чем больше срок аренды, тем ниже базовая ставка.
<div class="popup-custom">
<span>Условия скидок&nbsp; <i class="material-symbols-outlined">help</i></span>
<div class="popup-block">
@ -173,7 +202,7 @@
<li><b>6-15 дня:</b> 14500 ₸</li>
<li><b>30+ дня:</b> 7800 ₸</li>
</ul>
<p>@lang('Расчет итоговой суммы к оплате расcчитывается (кол-во дней * базовую ставку)')</p>
<p>@lang('Расчет итоговой суммы к оплате рассчитывается (кол-во дней * базовую ставку)')</p>
</div>
</div>
</div>
@ -182,7 +211,7 @@
</div>
</div>
</div>
<div class="card mb-4">
<div class="card m-0 mb-4">
<div class="card-body">
<div class="mb-3">
<label class="form-label">Место и время получения <b>*</b></label>
@ -216,6 +245,45 @@
<p class="add-text2">Бесплатная отмена в любое время</p>
</div>
</form>
<div class="col-12 col-md-4 right-content">
<div class="card mb-4 card-type-2 price-info" style="border-radius: 8px;">
<div class="card-body">
<div class="title-small mb-3">Базовая ставка</div>
<div class="li-bl">
<div class="li-sp">Без скидки</div>
<div class="li-sp" id="base-without">32000 ₸</div>
</div>
<div class="li-bl">
<div class="li-sp">Со скидки</div>
<div class="li-sp" id="base-with">25 000 ₸</div>
</div>
<hr>
<div class="title-small mb-3">Общая цена</div>
<div class="li-bl">
<div class="li-sp">Аренда без скидки</div>
<div class="li-sp" id="summ-without">224 000 ₸</div>
</div>
<div class="li-bl">
<div class="li-sp">Аренда со скидки</div>
<div class="li-sp" id="sunn-with">175 000 ₸</div>
</div>
<hr>
<div class="li-bl">
<div class="title">Итого</div>
<div class="title" id="total">175 000 ₸</div>
</div>
</div>
</div>
<div class="card card-type-2" style="border-radius: 8px;">
<div class="card-body">
<div class="muted-card-text">
Общая стоимость, включая установленные законом налоги. <br><br>
Обратите внимание, что на изображении и в технических характеристиках автомобиля представлена только примерная иллюстрация категории автомобиля (за исключением ошибок). Бронирование производится только для категории транспортного средства, но не для конкретного транспортного средства. <br><br>
Вся информация о размерах, весе и т.д. основана на наименьшей доступной категории модели. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -266,6 +334,57 @@
localStorage.setItem('filterOpened', isExpanded);
});
const pickUpDateInput = document.getElementById('pick-up-date');
const returnDateInput = document.getElementById('return-date');
const daysInput = document.getElementById('days');
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
const todayStr = `${yyyy}-${mm}-${dd}`;
pickUpDateInput.value = todayStr;
pickUpDateInput.setAttribute('min', todayStr);
function updateReturnDate() {
const pickUpDate = new Date(pickUpDateInput.value);
const rentalDays = parseInt(daysInput.value, 10);
if (!isNaN(rentalDays)) {
pickUpDate.setDate(pickUpDate.getDate() + rentalDays);
const returnYyyy = pickUpDate.getFullYear();
const returnMm = String(pickUpDate.getMonth() + 1).padStart(2, '0');
const returnDd = String(pickUpDate.getDate()).padStart(2, '0');
returnDateInput.value = `${returnYyyy}-${returnMm}-${returnDd}`;
}
}
updateReturnDate();
daysInput.addEventListener('input', updateReturnDate);
pickUpDateInput.addEventListener('change', updateReturnDate);
const modal = document.getElementById('rentModal');
document.querySelectorAll('.open-rent-modal').forEach(button => {
button.addEventListener('click', function () {
const photo = this.getAttribute('data-photo');
const brand = this.getAttribute('data-brand');
const mark = this.getAttribute('data-mark');
const year = this.getAttribute('data-year');
const fuel = this.getAttribute('data-fuel');
const people = this.getAttribute('data-people');
const id = this.getAttribute('data-id');
document.getElementById('modalCarImage').src = photo;
document.getElementById('modalCarTitle').innerText = `${brand} ${mark} - ${year}`;
document.getElementById('modalFuel').innerHTML = `&nbsp;${fuel}`;
document.getElementById('modalPeople').innerHTML = `&nbsp;${people} мест`;
document.getElementById('mark_id').value = id;
});
});
});
document.querySelectorAll('input[name="class_filters[]"]').forEach(checkbox => {

2
public/css/app.css
View File

File diff suppressed because one or more lines are too long

2
public/css/app.css.map
View File

File diff suppressed because one or more lines are too long

83
resources/assets/sass/components/card.scss
View File

@ -57,7 +57,7 @@ iframe {
.row.custom-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; // Можно center, если хочешь выравнивать
justify-content: flex-start;
.car-card {
width: 100%;
@ -391,18 +391,45 @@ iframe {
}
}
#rentModal {
.price-info {
.title {
font-size: 24px;
font-weight: 700;
}
.li-bl {
display: flex;
align-items: center;
justify-content: space-between;
.li-sp {
color: #7a7a7a;
margin-bottom: 10px;
font-size: 16px;
}
}
}
.card-type-2 {
padding: 1rem;
}
.form-text {
position: relative;
font-size: .875em;
color: $gray-color;
.popup-custom {
display: inline-block;
position: relative;
span {
color: $primary-color;
display: inline-flex;
align-items: center;
}
.popup-block {
position: absolute;
top: 0;
@ -419,18 +446,69 @@ iframe {
transition: .3s all ease;
}
}
.popup-custom:hover .popup-block {
visibility: visible;
opacity: 1;
z-index: 10;
}
}
.muted-card-text {
font-size: 14px;
color: #7a7a7a;
}
.lst-btn .add-text2 {
color: green;
margin-top: 10px;
}
}
.car-card {
width: 100%;
transition: .3s all ease;
padding: 25px 20px;
img {
width: 100%;
object-fit: contain;
}
.title {
font-size: 24px;
font-weight: 700;
margin-bottom: 9px;
}
.subtitle {
font-size: 18px;
color: #7e7e7e;
}
.add-li {
display: flex;
align-content: center;
color: #a8a8a8;
margin-bottom: 5px;
font-size: 16px;
transition: .3s all ease;
p {
color: #1e1e1e;
margin-bottom: 0;
}
}
i {
color: $primary-color;
}
}
.title-small {
font-size: 18px;
font-weight: 700;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.profile-info {
.card-body {
@ -447,4 +525,3 @@ iframe {
}
}
}