From 969399525cd79b34e3f8b0913591ec823d9c65d4 Mon Sep 17 00:00:00 2001
From: pushuo <pushuo@guangda.work>
Date: Thu, 5 Jan 2023 16:24:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20checkout=20=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/views/pages/orders/form.blade.php   |  10 +
 .../default/account/order_success.blade.php   |   2 +
 themes/default/checkout.blade.php             | 329 ++----------------
 themes/default/checkout/_address.blade.php    | 289 +++++++++++++++
 4 files changed, 322 insertions(+), 308 deletions(-)
 create mode 100644 themes/default/checkout/_address.blade.php

diff --git a/resources/beike/admin/views/pages/orders/form.blade.php b/resources/beike/admin/views/pages/orders/form.blade.php
index 645ab940..62382004 100644
--- a/resources/beike/admin/views/pages/orders/form.blade.php
+++ b/resources/beike/admin/views/pages/orders/form.blade.php
@@ -43,6 +43,16 @@
             </tbody>
           </table>
         </div>
+        <div class="col-lg-4 col-12">
+          <table class="table table-borderless">
+            <tbody>
+              <tr>
+                <td style="width: 20%">{{ __('common.email') }}：</td>
+                <td>{{ $order->email }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
diff --git a/themes/default/account/order_success.blade.php b/themes/default/account/order_success.blade.php
index 52dc561b..bc41b5f5 100644
--- a/themes/default/account/order_success.blade.php
+++ b/themes/default/account/order_success.blade.php
@@ -28,7 +28,9 @@
                   </tr>
                   <tr>
                     <td>{{ __('shop/account.order.order_success.payment_method') }}：<span class="fw-bold">{{ $order['payment_method_name'] }}</span></td>
+                    @if (current_customer())
                     <td><a href="{{ shop_route('account.order.show', ['number' => $order->number]) }}">{{ __('shop/account.order.order_success.view_order') }}</a></td>
+                    @endif
                   </tr>
                   <tr>
                     <td><a href="{{ shop_route('orders.pay', [$order['number']]) }}" class="btn btn-primary btn-sm">{{ __('shop/account.order.order_success.pay_now') }}</a></td>
diff --git a/themes/default/checkout.blade.php b/themes/default/checkout.blade.php
index 52891335..d245bb1c 100644
--- a/themes/default/checkout.blade.php
+++ b/themes/default/checkout.blade.php
@@ -9,7 +9,7 @@
 @endpush
 
 @section('content')
-  <div class="container" id="checkout-app" v-cloak>
+  <div class="container">
 
     <x-shop-breadcrumb type="static" value="checkout.index" />
 
@@ -21,154 +21,7 @@
       <div class="col-12 col-md-8 left-column">
         <div class="card shadow-sm">
           <div class="card-body p-lg-4">
-            <div id="checkout-app" v-cloak>
-              <div class="checkout-black">
-                <div class="checkout-title">
-                  <div class="d-flex">
-                    <h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
-                    <el-checkbox v-model="same_as_shipping_address" v-if="source.addresses.length || source.guest_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
-                    </el-checkbox>
-                  </div>
-                  <button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
-                      class="bi bi-x-lg"></i></button>
-                </div>
-                <div class="addresses-wrap">
-                  <div class="row">
-                    <template v-if="source.isLogin">
-                      <div class="col-6" v-for="address, index in source.addresses" :key="index"
-                        v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
-                        <div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
-                          @click="updateCheckout(address.id, 'shipping_address_id')">
-                          <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 }} @{{ address.zone }} @{{ address.city }}
-                            @{{ address.address_1 }}</div>
-                          <div class="address-bottom">
-                            <div>
-                              <span class="badge bg-success"
-                                v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
-                            </div>
-                            <a href="javascript:void(0)" class=""
-                              @click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="col-6" v-if="!isAllAddress">
-                        <div class="item address-right">
-                          <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
-                            @click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
-                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
-                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                        </div>
-                      </div>
-                    </template>
-                    <template v-else>
-                      <div class="col-6" v-if="source.guest_shipping_address">
-                        <div class="item active">
-                          <div class="name-wrap">
-                            <span class="name">@{{ source.guest_shipping_address.name }}</span>
-                            <span class="phone">@{{ source.guest_shipping_address.phone }}</span>
-                          </div>
-                          <div class="zipcode">
-                            <span>@{{ source.guest_shipping_address.zipcode }}</span>
-                            <span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
-                          </div>
-                          <div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
-                            @{{ source.guest_shipping_address.address_1 }}</div>
-                          <div class="address-bottom">
-                            <div>
-                              <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
-                            </div>
-                            <a class="javascript:void(0)"
-                              @click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="col-6" v-if="!source.guest_shipping_address">
-                        <div class="item address-right">
-                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
-                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-
-              <div class="checkout-black" v-if='!same_as_shipping_address'>
-                <div class="checkout-title">
-                  <div class="d-flex">
-                    <h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
-                  </div>
-                  <button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
-                      class="bi bi-x-lg"></i></button>
-                </div>
-                <div class="addresses-wrap">
-                  <div class="row">
-                    <template v-if="source.isLogin">
-                      <div class="col-6" v-for="address, index in source.addresses" :key="index"
-                        v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
-                        <div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
-                          @click="updateCheckout(address.id, 'payment_address_id')">
-                          <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 }} @{{ address.zone }} @{{ address.city }}
-                            @{{ address.address_1 }}</div>
-                          <div class="address-bottom">
-                            <div>
-                              <span class="badge bg-success"
-                                v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
-                            </div>
-                            <a class="javascript:void(0)"
-                              @click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="col-6" v-if="!isAllAddressPayment">
-                        <div class="item address-right">
-                          <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
-                            @click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
-                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
-                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                        </div>
-                      </div>
-                    </template>
-                    <template v-else>
-                      <div class="col-6" v-if="source.guest_payment_address">
-                        <div class="item active">
-                          <div class="name-wrap">
-                            <span class="name">@{{ source.guest_payment_address.name }}</span>
-                            <span class="phone">@{{ source.guest_payment_address.phone }}</span>
-                          </div>
-                          <div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
-                          <div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
-                            @{{ source.guest_payment_address.address_1 }}</div>
-                          <div class="address-bottom">
-                            <div>
-                              <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
-                            </div>
-                            <a class="javascript:void(0)"
-                              @click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="col-6" v-if="!source.guest_payment_address">
-                        <div class="item address-right">
-                          <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
-                              class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </div>
+            @include('checkout._address')
 
             <div class="checkout-black">
               <h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
@@ -177,7 +30,6 @@
                   <div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
                     <div class="left">
                       <span class="radio"></span>
-                      {{-- <input name="payment" type="radio" {{ $payment['code'] == $current['payment_method_code'] ? 'checked' : ''  }} value="{{ $payment['code'] }}" class="form-check-input"> --}}
                       <img src="{{ $payment['icon'] }}" class="img-fluid">
                     </div>
                     <div class="right ms-3">
@@ -196,7 +48,6 @@
                   @foreach ($methods['quotes'] as $shipping)
                   <div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
                     <div class="left">
-                      {{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : ''  }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
                       <span class="radio"></span>
                       <img src="{{ $shipping['icon'] }}" class="img-fluid">
                     </div>
@@ -265,184 +116,46 @@
         </div>
       </div>
     </div>
-
-    <address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
   </div>
   @endsection
 
 @push('add-scripts')
-@include('shared.address-form')
 <script>
   $(document).ready(function() {
     $('.radio-line-item').click(function(event) {
       const key = $(this).data('key');
       const value = $(this).data('value');
+      let html = '';
 
       $http.put('/checkout', {[key]: value}).then((res) => {
         $(this).addClass('active').siblings().removeClass('active')
+        res.totals.forEach((item) => {
+          html += `<li><span>${item.title}</span><span>${item.amount_format}</span></li>`
+        })
+
+        $('ul.totals').html(html);
       })
     });
 
     $('#submit-checkout').click(function(event) {
-      app.checkedBtnCheckoutConfirm();
+      if (!config.isLogin && checkoutAddressApp.source.guest_shipping_address === null) {
+        layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
+        return;
+      }
+
+      if (config.isLogin && !checkoutAddressApp.form.payment_address_id) {
+        layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
+        return;
+      }
+
+      $http.post('/checkout/confirm').then((res) => {
+        location = 'orders/' + res.number + '/success?type=create'
+      })
     });
 
     $('.guest-checkout-login').click(function(event) {
       bk.openLogin();
     });
   });
-
-  var app = new Vue({
-    el: '#checkout-app',
-
-    data: {
-      form: {
-        shipping_address_id: @json($current['shipping_address_id']),
-        payment_address_id: @json($current['payment_address_id']),
-      },
-
-      isAllAddress: false,
-      isAllAddressPayment: false,
-
-      source: {
-        addresses: @json($addresses ?? []),
-        guest_shipping_address: @json($current['guest_shipping_address'] ?? null),
-        guest_payment_address: @json($current['guest_payment_address'] ?? null),
-        isLogin: config.isLogin,
-      },
-
-      dialogAddress: {
-        index: null,
-        type: 'shipping_address_id',
-      },
-    },
-
-    computed: {
-      same_as_shipping_address: {
-        get() {
-          if (!this.source.isLogin) {
-            return JSON.stringify(this.source.guest_shipping_address) === JSON.stringify(this.source.guest_payment_address);
-          }
-
-          return this.form.shipping_address_id === this.form.payment_address_id
-        },
-
-        set(e) {
-          if (e) {
-            if (!this.source.isLogin) {
-              $http.put('/checkout', {guest_payment_address: this.source.guest_shipping_address}).then((res) => {
-                this.source.guest_payment_address = res.current.guest_payment_address;
-              })
-            } else {
-              this.form.payment_address_id = this.form.shipping_address_id
-              this.updateCheckout(this.form.payment_address_id, 'same_as_shipping_address')
-            }
-          } else {
-            this.form.payment_address_id = '';
-            this.source.guest_payment_address = null
-          }
-        },
-      },
-    },
-
-    methods: {
-      editAddress(index, type) {
-        let addresses = null
-
-        if (typeof index == 'number') {
-          this.dialogAddress.index = index;
-          addresses = JSON.parse(JSON.stringify(this.source.addresses[index]))
-        }
-
-        // 游客结账
-        if ((type == 'guest_shipping_address' || type == 'guest_payment_address') && this.source[type]) {
-          addresses = JSON.parse(JSON.stringify(this.source[type]))
-        }
-
-        this.dialogAddress.type = type
-        this.$refs['address-dialog'].editAddress(addresses, this.dialogAddress.type)
-      },
-
-      onAddressDialogChange(form) {
-        const type = form.id ? 'put' : 'post';
-        const url = `/account/addresses${type == 'put' ? '/' + form.id : ''}`;
-
-        if (!this.source.isLogin) {
-          let data = {[this.dialogAddress.type]: form}
-
-          if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
-            data = {
-              guest_shipping_address: form,
-              guest_payment_address: form
-            }
-          }
-
-          $http.put('/checkout', data).then((res) => {
-            if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
-              this.source.guest_shipping_address = res.current.guest_shipping_address;
-              this.source.guest_payment_address = res.current.guest_payment_address;
-            } else {
-              this.source[this.dialogAddress.type] = res.current[this.dialogAddress.type];
-            }
-            this.$message.success('{{ __('common.edit_success') }}');
-            this.$refs['address-dialog'].closeAddressDialog()
-          })
-        } else {
-          $http[type](url, form).then((res) => {
-            this.$message.success(res.message);
-            if (this.source.addresses.find(e => e.id == res.data.id)) {
-              this.source.addresses[this.dialogAddress.index] = res.data
-            } else {
-              this.source.addresses.push(res.data)
-              this.updateCheckout(res.data.id, this.dialogAddress.type)
-              this.form[this.dialogAddress.type] = res.data.id
-            }
-
-            this.dialogAddress.index = null;
-            this.$forceUpdate()
-            this.$refs['address-dialog'].closeAddressDialog()
-          })
-        }
-      },
-
-      updateCheckout(id, key) {
-        if (this.form[key] === id && key != 'same_as_shipping_address') {
-          return
-        }
-
-        if (key == 'shipping_address_id' && this.same_as_shipping_address) {
-          this.form.payment_address_id = id
-        }
-
-        this.form[key] = id
-
-        $http.put('/checkout', this.form).then((res) => {
-          this.form = res.current
-          this.source.totals = res.totals
-
-          this.isAllAddress = false
-          this.isAllAddressPayment = false
-        })
-      },
-
-      checkedBtnCheckoutConfirm() {
-        if (!this.source.isLogin) {
-          if (this.source.guest_shipping_address === null) {
-            layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
-            return;
-          }
-        } else {
-          if (!this.form.payment_address_id) {
-            layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
-            return;
-          }
-        }
-
-        $http.post('/checkout/confirm').then((res) => {
-          location = 'orders/' + res.number + '/success?type=create'
-        })
-      }
-    }
-  })
 </script>
 @endpush
diff --git a/themes/default/checkout/_address.blade.php b/themes/default/checkout/_address.blade.php
new file mode 100644
index 00000000..95ed6c4d
--- /dev/null
+++ b/themes/default/checkout/_address.blade.php
@@ -0,0 +1,289 @@
+<div id="checkout-address-app" v-cloak>
+  <div class="checkout-black">
+    <div class="checkout-title">
+      <div class="d-flex">
+        <h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
+        <el-checkbox v-model="same_as_shipping_address" v-if="source.addresses.length || source.guest_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
+        </el-checkbox>
+      </div>
+      <button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
+          class="bi bi-x-lg"></i></button>
+    </div>
+    <div class="addresses-wrap">
+      <div class="row">
+        <template v-if="source.isLogin">
+          <div class="col-6" v-for="address, index in source.addresses" :key="index"
+            v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
+            <div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
+              @click="updateCheckout(address.id, 'shipping_address_id')">
+              <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 }} @{{ address.zone }} @{{ address.city }}
+                @{{ address.address_1 }}</div>
+              <div class="address-bottom">
+                <div>
+                  <span class="badge bg-success"
+                    v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
+                </div>
+                <a href="javascript:void(0)" class=""
+                  @click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
+              </div>
+            </div>
+          </div>
+          <div class="col-6" v-if="!isAllAddress">
+            <div class="item address-right">
+              <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
+                @click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
+              <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
+                  class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="col-6" v-if="source.guest_shipping_address">
+            <div class="item active">
+              <div class="name-wrap">
+                <span class="name">@{{ source.guest_shipping_address.name }}</span>
+                <span class="phone">@{{ source.guest_shipping_address.phone }}</span>
+              </div>
+              <div class="zipcode">
+                <span>@{{ source.guest_shipping_address.zipcode }}</span>
+                <span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
+              </div>
+              <div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
+                @{{ source.guest_shipping_address.address_1 }}</div>
+              <div class="address-bottom">
+                <div>
+                  <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
+                </div>
+                <a class="javascript:void(0)"
+                  @click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
+              </div>
+            </div>
+          </div>
+          <div class="col-6" v-if="!source.guest_shipping_address">
+            <div class="item address-right">
+              <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
+                  class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <div class="checkout-black" v-if='!same_as_shipping_address'>
+    <div class="checkout-title">
+      <div class="d-flex">
+        <h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
+      </div>
+      <button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
+          class="bi bi-x-lg"></i></button>
+    </div>
+    <div class="addresses-wrap">
+      <div class="row">
+        <template v-if="source.isLogin">
+          <div class="col-6" v-for="address, index in source.addresses" :key="index"
+            v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
+            <div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
+              @click="updateCheckout(address.id, 'payment_address_id')">
+              <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 }} @{{ address.zone }} @{{ address.city }}
+                @{{ address.address_1 }}</div>
+              <div class="address-bottom">
+                <div>
+                  <span class="badge bg-success"
+                    v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
+                </div>
+                <a class="javascript:void(0)"
+                  @click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
+              </div>
+            </div>
+          </div>
+          <div class="col-6" v-if="!isAllAddressPayment">
+            <div class="item address-right">
+              <button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
+                @click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
+              <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
+                  class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="col-6" v-if="source.guest_payment_address">
+            <div class="item active">
+              <div class="name-wrap">
+                <span class="name">@{{ source.guest_payment_address.name }}</span>
+                <span class="phone">@{{ source.guest_payment_address.phone }}</span>
+              </div>
+              <div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
+              <div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
+                @{{ source.guest_payment_address.address_1 }}</div>
+              <div class="address-bottom">
+                <div>
+                  <span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
+                </div>
+                <a class="javascript:void(0)"
+                  @click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
+              </div>
+            </div>
+          </div>
+          <div class="col-6" v-if="!source.guest_payment_address">
+            <div class="item address-right">
+              <button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
+                  class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+
+  <address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
+</div>
+@push('add-scripts')
+@include('shared.address-form')
+<script>
+  var checkoutAddressApp = new Vue({
+    el: '#checkout-address-app',
+
+    data: {
+      form: {
+        shipping_address_id: @json($current['shipping_address_id']),
+        payment_address_id: @json($current['payment_address_id']),
+      },
+
+      isAllAddress: false,
+      isAllAddressPayment: false,
+
+      source: {
+        addresses: @json($addresses ?? []),
+        guest_shipping_address: @json($current['guest_shipping_address'] ?? null),
+        guest_payment_address: @json($current['guest_payment_address'] ?? null),
+        isLogin: config.isLogin,
+      },
+
+      dialogAddress: {
+        index: null,
+        type: 'shipping_address_id',
+      },
+    },
+
+    computed: {
+      same_as_shipping_address: {
+        get() {
+          if (!this.source.isLogin) {
+            return JSON.stringify(this.source.guest_shipping_address) === JSON.stringify(this.source.guest_payment_address);
+          }
+
+          return this.form.shipping_address_id === this.form.payment_address_id
+        },
+
+        set(e) {
+          if (e) {
+            if (!this.source.isLogin) {
+              $http.put('/checkout', {guest_payment_address: this.source.guest_shipping_address}).then((res) => {
+                this.source.guest_payment_address = res.current.guest_payment_address;
+              })
+            } else {
+              this.form.payment_address_id = this.form.shipping_address_id
+              this.updateCheckout(this.form.payment_address_id, 'same_as_shipping_address')
+            }
+          } else {
+            this.form.payment_address_id = '';
+            this.source.guest_payment_address = null
+          }
+        },
+      },
+    },
+
+    methods: {
+      editAddress(index, type) {
+        let addresses = null
+
+        if (typeof index == 'number') {
+          this.dialogAddress.index = index;
+          addresses = JSON.parse(JSON.stringify(this.source.addresses[index]))
+        }
+
+        // 游客结账
+        if ((type == 'guest_shipping_address' || type == 'guest_payment_address') && this.source[type]) {
+          addresses = JSON.parse(JSON.stringify(this.source[type]))
+        }
+
+        this.dialogAddress.type = type
+        this.$refs['address-dialog'].editAddress(addresses, this.dialogAddress.type)
+      },
+
+      onAddressDialogChange(form) {
+        const type = form.id ? 'put' : 'post';
+        const url = `/account/addresses${type == 'put' ? '/' + form.id : ''}`;
+
+        if (!this.source.isLogin) {
+          let data = {[this.dialogAddress.type]: form}
+
+          if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
+            data = {
+              guest_shipping_address: form,
+              guest_payment_address: form
+            }
+          }
+
+          $http.put('/checkout', data).then((res) => {
+            if (this.source.guest_payment_address === null && this.source.guest_shipping_address === null) {
+              this.source.guest_shipping_address = res.current.guest_shipping_address;
+              this.source.guest_payment_address = res.current.guest_payment_address;
+            } else {
+              this.source[this.dialogAddress.type] = res.current[this.dialogAddress.type];
+            }
+            this.$message.success('{{ __('common.edit_success') }}');
+            this.$refs['address-dialog'].closeAddressDialog()
+          })
+        } else {
+          $http[type](url, form).then((res) => {
+            this.$message.success(res.message);
+            if (this.source.addresses.find(e => e.id == res.data.id)) {
+              this.source.addresses[this.dialogAddress.index] = res.data
+            } else {
+              this.source.addresses.push(res.data)
+              this.updateCheckout(res.data.id, this.dialogAddress.type)
+              this.form[this.dialogAddress.type] = res.data.id
+            }
+
+            this.dialogAddress.index = null;
+            this.$forceUpdate()
+            this.$refs['address-dialog'].closeAddressDialog()
+          })
+        }
+      },
+
+      updateCheckout(id, key) {
+        if (this.form[key] === id && key != 'same_as_shipping_address') {
+          return
+        }
+
+        if (key == 'shipping_address_id' && this.same_as_shipping_address) {
+          this.form.payment_address_id = id
+        }
+
+        this.form[key] = id
+
+        $http.put('/checkout', this.form).then((res) => {
+          this.form = res.current
+          this.source.totals = res.totals
+
+          this.isAllAddress = false
+          this.isAllAddressPayment = false
+        })
+      },
+    }
+  })
+</script>
+@endpush