From 4b9c77a63062757b606e369709355cb8fbe674b7 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Tue, 26 Jul 2022 15:04:57 +0800
Subject: [PATCH] wip

---
 public/build/beike/admin/css/app.css          | 63 +++++++++++++++-
 public/build/beike/shop/default/css/app.css   | 74 +++++++++++++++++++
 resources/beike/admin/css/_global.scss        | 21 +++++-
 .../views/pages/products/form/form.blade.php  | 23 ++++--
 .../views/pages/products/index.blade.php      |  4 +-
 resources/beike/shop/default/css/global.scss  | 14 ++++
 themes/default/account/wishlist.blade.php     | 37 ++++++++--
 7 files changed, 217 insertions(+), 19 deletions(-)

diff --git a/public/build/beike/admin/css/app.css b/public/build/beike/admin/css/app.css
index f09c77a0..c7186da1 100644
--- a/public/build/beike/admin/css/app.css
+++ b/public/build/beike/admin/css/app.css
@@ -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 {
diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index 5f05ce13..bc2ced04 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -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;
diff --git a/resources/beike/admin/css/_global.scss b/resources/beike/admin/css/_global.scss
index a97e1d01..61d94408 100644
--- a/resources/beike/admin/css/_global.scss
+++ b/resources/beike/admin/css/_global.scss
@@ -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 {
diff --git a/resources/beike/admin/views/pages/products/form/form.blade.php b/resources/beike/admin/views/pages/products/form/form.blade.php
index 451d53c0..7e7cc440 100644
--- a/resources/beike/admin/views/pages/products/form/form.blade.php
+++ b/resources/beike/admin/views/pages/products/form/form.blade.php
@@ -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 ?? '')" />
diff --git a/resources/beike/admin/views/pages/products/index.blade.php b/resources/beike/admin/views/pages/products/index.blade.php
index 75de12cf..2ad86be0 100644
--- a/resources/beike/admin/views/pages/products/index.blade.php
+++ b/resources/beike/admin/views/pages/products/index.blade.php
@@ -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')),
       },
diff --git a/resources/beike/shop/default/css/global.scss b/resources/beike/shop/default/css/global.scss
index 243d3314..9c644557 100644
--- a/resources/beike/shop/default/css/global.scss
+++ b/resources/beike/shop/default/css/global.scss
@@ -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;
diff --git a/themes/default/account/wishlist.blade.php b/themes/default/account/wishlist.blade.php
index 2a05f0f7..f758b1e9 100644
--- a/themes/default/account/wishlist.blade.php
+++ b/themes/default/account/wishlist.blade.php
@@ -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
\ No newline at end of file