From f42b378d78a6dd8c672bf2e62f3f7dca713d2306 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Thu, 30 Jun 2022 21:35:38 +0800
Subject: [PATCH] wip

---
 public/build/beike/shop/default/css/app.css   | 58 +++++++++++++++
 .../beike/shop/default/css/bootstrap.css      |  4 +
 .../views/pages/customers/form.blade.php      |  6 +-
 .../beike/shop/default/css/page-checkout.scss | 74 +++++++++++++++++++
 themes/default/checkout.blade.php             | 38 +++++++---
 5 files changed, 167 insertions(+), 13 deletions(-)

diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index a57f6c4a..b06f6768 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -546,3 +546,61 @@ body.page-checkout .total-wrap .totals > li > span:first-of-type {
 body.page-checkout .total-wrap .totals > li > span:last-of-type {
   color: #dc3545;
 }
+body.page-checkout .addresses-wrap {
+  margin-bottom: 2rem;
+}
+body.page-checkout .addresses-wrap .item {
+  position: relative;
+  padding: 20px 20px 30px;
+  margin-bottom: 10px;
+  border: 1px solid #e8e8e8;
+  height: 155px;
+  cursor: pointer;
+}
+body.page-checkout .addresses-wrap .item.add-addres {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1rem;
+  color: #666;
+}
+body.page-checkout .addresses-wrap .item.add-addres i {
+  font-size: 2rem;
+}
+body.page-checkout .addresses-wrap .item:hover {
+  border-color: #222;
+}
+body.page-checkout .addresses-wrap .item.active {
+  border-left: none;
+}
+body.page-checkout .addresses-wrap .item.active:before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 4px;
+  height: calc(100% + 2px);
+  background-color: #4991F4;
+  background: repeating-linear-gradient(-45deg, #d60404 0, #d60404 10px, #fff 10px, #fff 20px, #4991F4 20px, #4991F4 30px, #fff 30px, #fff 40px);
+}
+body.page-checkout .addresses-wrap .item .name-wrap {
+  margin-bottom: 0.5rem;
+}
+body.page-checkout .addresses-wrap .item .name-wrap .name {
+  font-size: 1rem;
+  font-weight: bold;
+}
+body.page-checkout .addresses-wrap .item .name-wrap .phone {
+  font-size: 0.8rem;
+  color: #666;
+}
+body.page-checkout .addresses-wrap .item .zipcode {
+  margin-bottom: 0.5rem;
+}
+body.page-checkout .addresses-wrap .item .address-info {
+  margin-bottom: 0.5rem;
+}
+body.page-checkout .addresses-wrap .item .address-bottom a {
+  color: #2d68a8;
+}
diff --git a/public/build/beike/shop/default/css/bootstrap.css b/public/build/beike/shop/default/css/bootstrap.css
index 5f058900..a86debce 100644
--- a/public/build/beike/shop/default/css/bootstrap.css
+++ b/public/build/beike/shop/default/css/bootstrap.css
@@ -18032,3 +18032,7 @@ textarea.form-control-lg {
   margin-right: 1rem;
   opacity: 0.1;
 }
+
+.table > :not(:first-child) {
+  border-top: none;
+}
diff --git a/resources/beike/admin/views/pages/customers/form.blade.php b/resources/beike/admin/views/pages/customers/form.blade.php
index 8cdc7537..6c6262fa 100644
--- a/resources/beike/admin/views/pages/customers/form.blade.php
+++ b/resources/beike/admin/views/pages/customers/form.blade.php
@@ -56,15 +56,13 @@
                   <td>
                     <button class="btn btn-outline-secondary btn-sm" type="button" @click="editAddress(index)">编辑</button>
                     <button class="btn btn-outline-danger btn-sm ml-1" type="button" @click="deleteAddress(address.id, index)">删除</button>
-                  </td>{{--
-                </tr> --}}
+                  </td>
               </tbody>
               <tbody v-else>
                 <tr>
                   <td colspan="6" class="text-center">
                     <span class="me-2">当前账号无地址</span> <el-link type="primary" @click="editAddress">新增地址</el-link>
-                  </td>{{--
-                </tr> --}}
+                  </td>
               </tbody>
             </table>
           </el-tab-pane>
diff --git a/resources/beike/shop/default/css/page-checkout.scss b/resources/beike/shop/default/css/page-checkout.scss
index e71cf8d2..74d4add7 100644
--- a/resources/beike/shop/default/css/page-checkout.scss
+++ b/resources/beike/shop/default/css/page-checkout.scss
@@ -93,4 +93,78 @@ body.page-checkout {
       }
     }
   }
+
+  .addresses-wrap {
+    margin-bottom: 2rem;
+
+    .item {
+      position: relative;
+      padding: 20px 20px 30px;
+      margin-bottom: 10px;
+      border: 1px solid #e8e8e8;
+      height: 155px;
+      cursor: pointer;
+
+      &.add-addres {
+        display: flex;
+        align-items: center; // flex-start | center
+        justify-content: center; // flex-end | center | space-between
+        flex-direction: column;
+        font-size: 1rem;
+        color: #666;
+
+        i {
+          font-size: 2rem;
+        }
+        // flex-wrap: wrap;
+      }
+
+      &:hover {
+        border-color: #222;
+      }
+
+      &.active {
+        border-left: none;
+
+        &:before {
+          content: '';
+          position: absolute;
+          top: -1px;
+          left: 0;
+          width: 4px;
+          height: calc(100% + 2px);
+          background-color: #4991F4;
+          background: repeating-linear-gradient(-45deg, #d60404 0, #d60404 10px, #fff 10px, #fff 20px, #4991F4 20px, #4991F4 30px, #fff 30px, #fff 40px);
+        }
+      }
+
+      .name-wrap {
+        margin-bottom: .5rem;
+
+        .name {
+          font-size: 1rem;
+          font-weight: bold;
+        }
+
+        .phone {
+          font-size: .8rem;
+          color: #666;
+        }
+      }
+
+      .zipcode {
+        margin-bottom: .5rem;
+      }
+
+      .address-info {
+        margin-bottom: .5rem;
+      }
+
+      .address-bottom {
+        a {
+          color: #2d68a8;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/themes/default/checkout.blade.php b/themes/default/checkout.blade.php
index cecbe32f..c3ccdc32 100644
--- a/themes/default/checkout.blade.php
+++ b/themes/default/checkout.blade.php
@@ -85,7 +85,7 @@
               </div>
             </div> --}}
 
-            <table class="table">
+{{--             <table class="table">
               <thead>
                 <tr>
                   <th>#</th>
@@ -96,8 +96,8 @@
                   <th>操作</th>
                 </tr>
               </thead>
-              <tbody v-if="source.address.length">
-                <tr v-for="address, index in source.address" :key="index">
+              <tbody v-if="source.addresses.length">
+                <tr v-for="address, index in source.addresses" :key="index">
                   <td>@{{ index }}</td>
                   <td>@{{ address.name }}</td>
                   <td>@{{ address.phone }}</td>
@@ -106,17 +106,36 @@
                   <td>
                     <button class="btn btn-outline-secondary btn-sm" type="button" @click="editAddress(index)">编辑</button>
                     <button class="btn btn-outline-danger btn-sm ml-1" type="button">删除</button>
-                  </td>{{--
-                </tr> --}}
+                  </td>
               </tbody>
               <tbody v-else>
                 <tr>
                   <td colspan="6" class="text-center">
                     <span class="me-2">当前账号无地址</span> <el-link type="primary" @click="editAddress">新增地址</el-link>
-                  </td>{{--
-                </tr> --}}
+                  </td>
               </tbody>
-            </table>
+            </table> --}}
+
+            <div class="addresses-wrap">
+              <div class="row">
+                <div class="col-4" v-for="address, index in source.addresses" :key="index" v-if="source.addresses.length">
+                  <div :class="['item', address.id == form.shipping_address_id ? 'active' : '']">
+                    <div class="name-wrap">
+                      <span class="name">@{{ address.name }}</span>
+                      <span class="phone">@{{ address.phone }}</span>
+                    </div>
+                    <div class="zipcode">@{{ address.zipcode }}</div>
+                    <div class="address-info">@{{ address.country_id }} @{{ address.zone_id }}</div>
+                    <div class="address-bottom">
+                      <a class="">编辑</a>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-4">
+                  <div class="item add-addres"><i class="bi bi-plus-square-dotted"></i> 添加新地址</div>
+                </div>
+              </div>
+            </div>
 
             <h4 class="title">支付方式</h4>
             <div class="row mb-3">
@@ -181,10 +200,11 @@
 
       data: {
         form: {
+          shipping_address_id: 7,
         },
 
         source: {
-          address: []
+          addresses: @json($addresses ?? []),
         },
 
         dialogAddress: {