This commit is contained in:
pushuo 2022-07-26 15:04:57 +08:00
parent ea0e4296cd
commit 4b9c77a630
7 changed files with 217 additions and 19 deletions

View File

@ -190,6 +190,61 @@ body {
height: 1000px;
}
.wh-10 {
height: 10px;
width: 10px;
}
.wh-20 {
height: 20px;
width: 20px;
}
.wh-30 {
height: 30px;
width: 30px;
}
.wh-40 {
height: 40px;
width: 40px;
}
.wh-50 {
height: 50px;
width: 50px;
}
.wh-60 {
height: 60px;
width: 60px;
}
.wh-70 {
height: 70px;
width: 70px;
}
.wh-80 {
height: 80px;
width: 80px;
}
.wh-90 {
height: 90px;
width: 90px;
}
.wh-100 {
height: 100px;
width: 100px;
}
.help-text {
color: #B2B2B2;
font-size: 12px;
}
.font-size-12 {
font-size: 12px;
}
@ -212,11 +267,15 @@ body {
.set-product-img {
width: 80px;
height: 80px;
background-color: #f5f5f5;
border: 1px solid #eee;
background-color: #f8f8f8;
border: 1px dashed #e2e2e2;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.set-product-img:hover {
background-color: #f1f1f1;
}
.main-content {

View File

@ -25,6 +25,30 @@ body[class^=page-account-] {
min-height: 500px;
}
.min-h1 {
min-height: 100px;
}
.min-h2 {
min-height: 200px;
}
.min-h3 {
min-height: 300px;
}
.min-h4 {
min-height: 400px;
}
.min-h5 {
min-height: 500px;
}
.min-h6 {
min-height: 600px;
}
.wp-100 {
width: 100px;
}
@ -185,6 +209,56 @@ body[class^=page-account-] {
height: 1000px;
}
.wh-10 {
height: 10px;
width: 10px;
}
.wh-20 {
height: 20px;
width: 20px;
}
.wh-30 {
height: 30px;
width: 30px;
}
.wh-40 {
height: 40px;
width: 40px;
}
.wh-50 {
height: 50px;
width: 50px;
}
.wh-60 {
height: 60px;
width: 60px;
}
.wh-70 {
height: 70px;
width: 70px;
}
.wh-80 {
height: 80px;
width: 80px;
}
.wh-90 {
height: 90px;
width: 90px;
}
.wh-100 {
height: 100px;
width: 100px;
}
.module-title {
font-size: 1.5rem;
text-align: center;

View File

@ -50,6 +50,19 @@ body {
}
}
// 生成 10 20 30 ... 90 的高宽
@for $i from 1 through 10 {
.wh-#{$i}0 {
height: #{$i}0px;
width: #{$i}0px;
}
}
.help-text {
color: #B2B2B2;
font-size: 12px;
}
.font-size-12 {
font-size: 12px;
}
@ -75,11 +88,15 @@ body {
.set-product-img {
width: 80px;
height: 80px;
background-color: #f5f5f5;
border: 1px solid #eee;
background-color: #f8f8f8;
border: 1px dashed #e2e2e2;
display: flex;
align-items: center; // flex-start | center
justify-content: center; // flex-end | center | space-between
transition: all .2s ease;
&:hover {
background-color: #f1f1f1;
}
}
.main-content {

View File

@ -23,7 +23,7 @@
@endforeach
<x-admin-form-input-locale name="descriptions.*.name" title="名称" :value="$descriptions" required />
<x-admin-form-input name="image" title="主图" :value="old('image', $product->image ?? '')" />
{{-- <x-admin-form-input name="image" title="主图" :value="old('image', $product->image ?? '')" /> --}}
<x-admin-form-input name="video" title="视频" :value="old('video', $product->video ?? '')" />
<x-admin-form-input name="position" title="排序" :value="old('position', $product->position ?? '')" />
<x-admin-form-switch name="active" title="状态" :value="old('active', $product->active ?? 1)" />
@ -47,7 +47,7 @@
<el-switch v-model="editing.isVariable"></el-switch>
</x-admin::form.row>
<input v-if="form.skus.length" type="hidden" name="variables" :value="JSON.stringify(form.variables)">
<input type="hidden" name="variables" :value="JSON.stringify(form.variables)">
<div class="row g-3 mb-3" v-if="editing.isVariable">
<label for="" class="wp-200 col-form-label text-end"></label>
@ -162,15 +162,28 @@
</div>
<template v-if="!editing.isVariable">
<x-admin::form.row title="图片">
{{-- <x-admin::form.row title="图片">
<div class="open-file-manager set-product-img">
<div>
{{-- <img :src="thumbnail(form.skus[0].image)" class="img-fluid"> --}}
{{-- <img src="{{ 'catalog/' . old('skus.0.image', $product->skus[0]->image ?? '') }}" class="img-fluid"> --}}
<img src="{{ 'catalog/' . old('skus.0.image', $product->skus[0]->image ?? '') }}" class="img-fluid">
<img src="{{ old('skus.0.image', $product->skus[0]->image ?? '') }}" class="img-fluid">
</div>
</div>
<input type="hidden" value="{{ old('skus.0.image', $product->skus[0]->image ?? '') }}" name="skus[0][image]">
</x-admin::form.row> --}}
<x-admin::form.row title="图片">
<div class="open-file-manager set-product-img">
@if ($product->image)
<div>
<img src="{{ old('skus.0.image', $product->skus[0]->image ?? '') }}" class="img-fluid">
</div>
@else
<i class="bi bi-plus fs-1 text-muted"></i>
@endif
</div>
<input type="hidden" value="{{ old('skus.0.image', $product->skus[0]->image ?? '') }}" name="skus[0][image]">
{{-- <span class="help-text">第一张图片将作为商品主图,支持同时上传多张图片,多张图片之间可随意调整位置;</span> --}}
</x-admin::form.row>
<x-admin-form-input name="skus[0][model]" title="model" :value="old('skus.0.model', $product->skus[0]->model ?? '')" />
<x-admin-form-input name="skus[0][sku]" title="sku" :value="old('skus.0.sku', $product->skus[0]->sku ?? '')" />

View File

@ -100,7 +100,7 @@
<input type="checkbox" :value="item.id" v-model="selected" />
</td>
<td>@{{ item.id }}</td>
<td><img :src="item.image" style="max-width: 100px;" alt="" srcset=""></td>
<td><div class="wh-70"><img :src="item.image" class="img-fluid"></div></td>
<td>@{{ item.name || '无名称' }}</td>
<td>@{{ item.price_formatted }}</td>
<td>@{{ item.created_at }}</td>
@ -141,7 +141,7 @@
selected: [],
page: @json((int) request('page') ?? 1),
totals: 0,
perPage: @json((int) (request('per_page') ?? 10)),
perPage: @json((int) (request('per_page') ?? 20)),
loading: false,
orderBy: @json(request('order_by', 'products.id:desc')),
},

View File

@ -12,6 +12,12 @@ body[class^="page-account-"] {
min-height: 500px;
}
@for $i from 1 through 6 {
.min-h#{$i} {
min-height: #{$i}00px;
}
}
// 生成 100 200 300 ... 1000 的宽度
@for $i from 1 through 10 {
.wp-#{$i}00 {
@ -39,6 +45,14 @@ body[class^="page-account-"] {
}
}
// 生成 10 20 30 ... 90 的高宽
@for $i from 1 through 10 {
.wh-#{$i}0 {
height: #{$i}0px;
width: #{$i}0px;
}
}
.module-title {
font-size: 1.5rem;
text-align: center;

View File

@ -15,15 +15,15 @@
<x-shop-sidebar/>
<div class="col-12 col-md-9">
<div class="card mb-4 account-card">
<div class="card mb-4 h-min-600">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="card-title">我的收藏</h5>
</div>
<div class="card-body">
<table class="table ">
<table class="table align-middle">
<thead>
<tr>
<th width="120px"></th>
<th width="90px"></th>
<th>产品</th>
<th>价格</th>
<th class="text-end"></th>
@ -31,14 +31,14 @@
</thead>
<tbody>
@foreach ($wishlist as $item)
<tr>
<td><div class="wp-100 hp-100"><img src="{{ $item['image'] }}" class="img-fluid"></div></td>
<tr data-id="{{ $item['id'] }}">
<td><div class="wh-70"><img src="{{ $item['image'] }}" class="img-fluid"></div></td>
<td>{{ $item['product_name'] }}</td>
<td>{{ $item['price'] }}</td>
<td class="text-end">
<div class="">
<button class="btn btn-dark btn-sm">加购物车</button>
<button class="btn btn-danger btn-sm"><i class="bi bi-x-lg"></i></button>
<button class="btn btn-dark btn-sm add-cart">查看详情</button>
<button class="btn btn-danger btn-sm remove-wishlist"><i class="bi bi-x-lg"></i></button>
</div>
</td>
</tr>
@ -47,8 +47,29 @@
</table>
</div>
</div>
</div>
{{-- {{ $wishlist->links('shared/pagination/bootstrap-4') }} --}}
</div>
</div>
</div>
@endsection
@push('add-scripts')
<script>
$(document).ready(function() {
$('.remove-wishlist').click(function() {
const product_id = $(this).closest('tr').data('id');
$http.delete('account/wishlist/' + product_id).then((res) => {
if (res.status == 'success') {
$(this).closest('tr').fadeOut(function() {
$(this).remove();
if ($('.remove-wishlist').length == 0) {
location.reload();
}
});
}
})
});
});
</script>
@endpush