添加 前后台订单详情页和结账页插件 html 代码插入点、优化地址管理弹窗

beike/Shop/Http/Resources/ProductSimple.php

@@ -41,7 +41,7 @@ class ProductSimple extends JsonResource
             'id' => $this->id,
             'sku_id' => $masterSku->id,
             'name' => $name,
-            'name_format' => sub_string($name, 36),
+            'name_format' => $name,
             'url' => shop_route('products.show', ['product' => $this]),
             'price' => $masterSku->price,
             'origin_price' => $masterSku->origin_price,

resources/beike/admin/views/pages/orders/form.blade.php

@@ -89,6 +89,10 @@
     </div>
   </div>
 
+  @foreach ($html_items as $item)
+    {!! $item !!}
+  @endforeach
+
   @can('orders_update_status')
   <div class="card mb-4">
     <div class="card-header"><h6 class="card-title">{{ __('order.order_status') }}</h6></div>

resources/beike/shop/default/css/page-checkout.scss

@@ -15,17 +15,45 @@ body.page-checkout {
       align-items: center;
       cursor: pointer;
       padding: 20px;
+      border: 1px solid transparent;
 
       &:not(:last-of-type) {
         margin-bottom: 1rem;
       }
 
       &:hover {
+        border-color: #e5e5e5;
+      }
 
+      &:active {
+        background-color: #f7f7f7;
       }
 
       &.active {
-        border: 1px solid #e5e5e5;
+        border-color: #e5e5e5;
+
+        .radio {
+          border-color: $primary;
+
+          &:before {
+            content: '';
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background-color: $primary;
+            left: 2px;
+            top: 2px;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .radio {
+        position: relative;
+        width: 18px;
+        height: 18px;
+        border: 1px solid #d4d4d4;
+        border-radius: 50%;
       }
 
       .left {

resources/beike/shop/default/css/product-style.scss

@@ -51,10 +51,12 @@
   }
 
   .product-name {
-    margin-bottom: 6px;
+    height: 39px;
+    margin-bottom: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
+    color: #3d3d3d;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
@@ -62,6 +64,7 @@
   .product-price {
     .price-new {
       color: $primary;
+      font-size: 1.1rem;
       font-weight: bold;
     }
 

themes/default/account/address.blade.php

@@ -40,7 +40,7 @@
                           v-if="address.default">{{ __('shop/account.addresses.default_address') }}</span></div>
                       <div>
                         <a class="me-2" @click.stop="deleteAddress(index)">{{ __('shop/account.addresses.delete') }}</a>
-                        <a @click.stop="editAddress(index)">{{ __('shop/account.addresses.edit') }}</a>
+                        <a href="javascript:void(0)" @click.stop="editAddress(index)">{{ __('shop/account.addresses.edit') }}</a>
                       </div>
                     </div>
                   </div>
@@ -57,88 +57,35 @@
       </div>
     </div>
 
-    @include('shared.address-form', [
+    <address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
-        'address_form_key' => 'form',
-        'address_form_show' => 'editShow',
-        'address_form_rules' => 'rules',
-    ])
   </div>
 @endsection
 
 @push('add-scripts')
+  @include('shared.address-form')
   <script>
     new Vue({
       el: '#address-app',
 
       data: {
         editIndex: null,
-
-        editShow: false,
-
-        form: {
-          name: '',
-          phone: '',
-          country_id: @json((int) system_setting('base.country_id')),
-          zipcode: '',
-          zone_id: @json((int) system_setting('base.zone_id')),
-          city: '',
-          address_1: '',
-          address_2: '',
-          default: false,
-        },
-
         addresses: @json($addresses ?? []),
-
-        source: {
-          countries: @json($countries ?? []),
-          zones: []
-        },
-
-        rules: {
-          name: [{
-            required: true,
-            message: '{{ __('shop/account.addresses.enter_name') }}',
-            trigger: 'blur'
-          }, ],
-          phone: [{
-            required: true,
-            message: '{{ __('shop/account.addresses.enter_phone') }}',
-            trigger: 'blur'
-          }, ],
-          address_1: [{
-            required: true,
-            message: ' {{ __('shop/account.addresses.enter_address') }}',
-            trigger: 'blur'
-          }, ],
-          zone_id: [{
-            required: true,
-            message: '{{ __('shop/account.addresses.select_province') }}',
-            trigger: 'blur'
-          }, ],
-          city: [{
-            required: true,
-            message: '{{ __('shop/account.addresses.enter_city') }}',
-            trigger: 'blur'
-          }, ],
-        }
       },
 
       // 实例被挂载后调用
       mounted() {},
 
-      beforeMount() {
-        this.countryChange(this.form.country_id);
-      },
-
       methods: {
         editAddress(index) {
+          let addresses = null
+
           if (typeof index == 'number') {
             this.editIndex = index;
-            this.form = JSON.parse(JSON.stringify(this.addresses[index]))
+
+            addresses = JSON.parse(JSON.stringify(this.addresses[index]))
           }
 
-          this.countryChange(this.form.country_id);
+          this.$refs['address-dialog'].editAddress(addresses)
-          this.editShow = true
         },
 
         deleteAddress(index) {
@@ -155,57 +102,18 @@
           }).catch(() => {})
         },
 
-        addressFormSubmit(form) {
+        onAddressDialogChange(form) {
-          const self = this;
+          if (form.default) {
-
-          this.$refs[form].validate((valid) => {
-            if (!valid) {
-              this.$message.error('{{ __('shop/account.addresses.check_form') }}');
-              return;
-            }
-
-            const type = this.form.id ? 'put' : 'post';
-            const url = `/account/addresses${type == 'put' ? '/' + this.form.id : ''}`;
-
-            $http[type](url, this.form).then((res) => {
-              if (res.data.default) {
             this.addresses.map(e => e.default = false)
           }
 
-              if (type == 'post') {
+          if (this.addresses.find(e => e.id == form.id)) {
-                this.addresses.push(res.data)
+            this.addresses[this.editIndex] = form
           } else {
-                this.addresses[this.editIndex] = res.data
+            this.addresses.push(form)
           }
-              this.$message.success(res.message);
-              this.$refs[form].resetFields();
-              this.editShow = false
           this.editIndex = null;
-            })
+          this.$forceUpdate()
-          });
-        },
-
-        closeAddressDialog(form) {
-          this.$refs[form].resetFields();
-          this.editShow = false
-          this.editIndex = null;
-
-          Object.keys(this.form).forEach(key => this.form[key] = '')
-          this.form.country_id = @json((int) system_setting('base.country_id'))
-        },
-
-        countryChange(e) {
-          const self = this;
-
-          $http.get(`/countries/${e}/zones`, null, {
-            hload: true
-          }).then((res) => {
-            this.source.zones = res.data.zones;
-
-            if (!res.data.zones.some(e => e.id == this.form.zone_id)) {
-              this.form.zone_id = '';
-            }
-          })
         },
       }
     })

themes/default/account/order_info.blade.php

@@ -139,6 +139,10 @@
           </div>
         </div>
 
+        @foreach ($html_items as $item)
+          {!! $item !!}
+        @endforeach
+
         @if (0)
           <div class="card mb-4">
             <div class="card-header">
@@ -150,7 +154,7 @@
           </div>
         @endif
 
-        @if ($order->orderShipments)
+        @if ($order->orderShipments->count())
           <div class="card mb-4">
             <div class="card-header"><h6 class="card-title">{{ __('order.order_shipments') }}</h6></div>
             <div class="card-body">

themes/default/checkout.blade.php

@@ -19,6 +19,7 @@
 
     <div class="row mt-5">
       <div class="col-12 col-md-8 left-column">
+        <div id="checkout-app" v-cloak>
           <div class="checkout-black">
             <div class="checkout-title">
               <div class="d-flex">
@@ -47,7 +48,7 @@
                         <span class="badge bg-success"
                           v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
                       </div>
-                    <a class=""
+                      <a href="javascript:void(0)" class=""
                         @click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
                     </div>
                   </div>
@@ -106,44 +107,46 @@
               </div>
             </div>
           </div>
+        </div>
 
         <div class="checkout-black">
           <h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
           <div class="radio-line-wrap">
-            <div :class="['radio-line-item', payment.code == form.payment_method_code ? 'active' : '']"
+            @foreach ($payment_methods as $payment)
-              v-for="payment, index in source.payment_methods" :key="index"
+              <div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
-              @click="updateCheckout(payment.code, 'payment_method_code')">
                 <div class="left">
-                <input name="payment" type="radio" v-model="form.payment_method_code" :value="payment.code"
+                  <span class="radio"></span>
-                  :id="'payment-method-' + index" class="form-check-input">
+                  {{-- <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">
+                  <img src="{{ $payment['icon'] }}" class="img-fluid">
                 </div>
                 <div class="right ms-3">
-                <div class="title">@{{ payment.name }}</div>
+                  <div class="title">{{ $payment['name'] }}</div>
-                <div class="sub-title" v-html="payment.description"></div>
+                  <div class="sub-title">{!! $payment['description'] !!}</div>
                 </div>
               </div>
+            @endforeach
           </div>
         </div>
 
         <div class="checkout-black">
           <h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
-          <div class="radio-line-wrap" v-if="source.shipping_methods.length">
+          <div class="radio-line-wrap">
-            <div v-for="methods, index in source.shipping_methods" :key="index">
+            @foreach ($shipping_methods as $methods)
-              <div :class="['radio-line-item', shipping.code == form.shipping_method_code ? 'active' : '']"
+              @foreach ($methods['quotes'] as $shipping)
-                v-for="shipping, s_index in methods.quotes" :key="index + '-' + s_index"
+              <div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
-                @click="updateCheckout(shipping.code, 'shipping_method_code')">
                 <div class="left">
-                  <input name="shipping" type="radio" v-model="form.shipping_method_code" :value="shipping.code"
+                  {{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : ''  }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
-                    :id="'shipping-method-' + index" class="form-check-input">
+                  <span class="radio"></span>
-                  <img :src="shipping.icon" class="img-fluid" v-if="shipping.icon">
+                  <img src="{{ $shipping['icon'] }}" class="img-fluid">
                 </div>
                 <div class="right ms-3">
-                  <div class="title">@{{ shipping.name }}</div>
+                  <div class="title">{{ $shipping['name'] }}</div>
-                  <div class="sub-title" v-html="shipping.description"></div>
+                  <div class="sub-title">{!! $shipping['description'] !!}</div>
-                </div>
+                  <div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
                 </div>
               </div>
+              @endforeach
+            @endforeach
           </div>
         </div>
       </div>
@@ -152,114 +155,92 @@
         <div class="card total-wrap fixed-top-line">
           <div class="card-header d-flex align-items-center justify-content-between">
             <h5 class="mb-0">{{ __('shop/checkout.cart_totals') }}</h5>
-            <span class="rounded-circle bg-primary">@{{ source.carts.quantity }}</span>
+            <span class="rounded-circle bg-primary">{{ $carts['quantity'] }}</span>
           </div>
           <div class="card-body">
             <div class="products-wrap">
-              <div class="item" v-for="cart, index in source.carts.carts" :key="index">
+              @foreach ($carts['carts'] as $cart)
+                <div class="item">
                   <div class="image">
-                  <img :src="cart.image" class="img-fluid">
+                    <img src="{{ $cart['image'] }}" class="img-fluid">
                     <div class="name">
-                    <div :title="cart.name" v-text="cart.name" class="text-truncate-2"></div>
+                      <div title="{{ $cart['name'] }}" class="text-truncate-2">{{ $cart['name'] }}</div>
-                    <div v-if="cart.variant_labels" v-text="cart.variant_labels" class="text-muted mt-1"></div>
+                      @if ($cart['variant_labels'])
+                        <div class="text-muted mt-1">{{ $cart['variant_labels'] }}</div>
+                      @endif
                     </div>
                   </div>
                   <div class="price text-end">
-                  <div>@{{ cart.price_format }}</div>
+                    <div>{{ $cart['price_format'] }}</div>
-                  <div class="quantity">x @{{ cart.quantity }}</div>
+                    <div class="quantity">x {{ $cart['quantity'] }}</div>
                   </div>
                 </div>
+              @endforeach
             </div>
             <ul class="totals">
-              <li v-for="total, index in source.totals" :key="index"><span>@{{ total.title }}</span><span>@{{ total.amount_format }}</span></li>
+              @foreach ($totals as $total)
+                <li><span>{{ $total['title'] }}</span><span>{{ $total['amount_format'] }}</span></li>
+              @endforeach
             </ul>
             <div class="d-grid gap-2 mt-3">
-              <button class="btn btn-primary" type="button" :disabled="!isSubmit"
+              <button class="btn btn-primary" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
-                @click="checkedBtnCheckoutConfirm">{{ __('shop/checkout.submit_order') }}</button>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    @include('shared.address-form')
+    <address-dialog ref="address-dialog" @change="onAddressDialogChange"></address-dialog>
   </div>
-@endsection
+  @endsection
+
 @push('add-scripts')
-  <script>
+@include('shared.address-form')
-    new Vue({
+<script>
+  $(document).ready(function() {
+    $('.radio-line-item').click(function(event) {
+      const key = $(this).data('key');
+      const value = $(this).data('value');
+
+      $http.put('/checkout', {[key]: value}).then((res) => {
+        $(this).addClass('active').siblings().removeClass('active')
+      })
+    });
+
+    $('#submit-checkout').click(function(event) {
+      if (!app.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'
+      })
+    });
+  });
+
+  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']),
-          payment_method_code: @json($current['payment_method_code']),
-          shipping_method_code: @json($current['shipping_method_code']),
       },
 
-        // same_as_shipping_address: @json($current['same_as_shipping_address'] ?? true),
-
       isAllAddress: false,
       isAllAddressPayment: false,
 
       source: {
         addresses: @json($addresses ?? []),
-          countries: @json($countries ?? []),
-          shipping_methods: @json($shipping_methods ?? []),
-          payment_methods: @json($payment_methods ?? []),
-          carts: @json($carts ?? null),
-          totals: @json($totals ?? []),
-          zones: []
       },
 
       dialogAddress: {
-          show: false,
         index: null,
         type: 'shipping_address_id',
-          form: {
+      },
-            name: '',
-            phone: '',
-            country_id: @json($country_id),
-            zipcode: '',
-            zone_id: @json((int) system_setting('base.zone_id')),
-            city: '',
-            address_1: '',
-            address_2: '',
-            default: false,
-          }
     },
 
-        addressRules: {
-          name: [{
-            required: true,
-            message: '{{ __('shop/checkout.enter_name') }}',
-            trigger: 'blur'
-          }, ],
-          phone: [{
-            required: true,
-            message: '{{ __('shop/checkout.enter_phone') }}',
-            trigger: 'blur'
-          }, ],
-          address_1: [{
-            required: true,
-            message: '{{ __('shop/checkout.enter_address') }}',
-            trigger: 'blur'
-          }, ],
-          zone_id: [{
-            required: true,
-            message: '{{ __('shop/checkout.select_province') }}',
-            trigger: 'blur'
-          }, ],
-          city: [{
-            required: true,
-            message: '{{ __('shop/checkout.enter_city') }}',
-            trigger: 'blur'
-          }, ],
-        }
-      },
-
-      // 计算属性
     computed: {
       same_as_shipping_address: {
         get() {
@@ -275,88 +256,33 @@
           }
         }
       },
-
-        isSubmit() {
-          // source.addresses.length > 0 && source.payment_methods.length > 0 && source.shipping_methods.length > 0
-          return this.source.addresses.length > 0 && this.source.payment_methods.length > 0 && this.source
-            .shipping_methods.length > 0;
-        },
-        // isAddress: {
-        //   this.form.shipping_address_id ==
-        // }
-      },
-
-      beforeMount() {
-        this.countryChange(this.dialogAddress.form.country_id);
     },
 
     methods: {
       editAddress(index, type) {
+        let addresses = null
+
         if (typeof index == 'number') {
           this.dialogAddress.index = index;
 
-            this.$nextTick(() => {
+          addresses = JSON.parse(JSON.stringify(this.source.addresses[index]))
-              this.dialogAddress.form = JSON.parse(JSON.stringify(this.source.addresses[index]))
-              this.countryChange(this.dialogAddress.form.country_id);
-            })
         }
 
         this.dialogAddress.type = type
-          this.dialogAddress.show = true
+        this.$refs['address-dialog'].editAddress(addresses)
       },
 
-        // shippingPaymentAddressChange() {
+      onAddressDialogChange(form) {
-
+        if (this.source.addresses.find(e => e.id == form.id)) {
-        // },
+          this.source.addresses[this.dialogAddress.index] = form
-
-        addressFormSubmit(form) {
-          const self = this;
-
-          this.$refs[form].validate((valid) => {
-            if (!valid) {
-              this.$message.error('{{ __('shop/checkout.check_form') }}');
-              return;
-            }
-
-            const type = this.dialogAddress.form.id ? 'put' : 'post';
-            const url = `/account/addresses${type == 'put' ? '/' + this.dialogAddress.form.id : ''}`;
-
-            $http[type](url, this.dialogAddress.form).then((res) => {
-              if (type == 'post') {
-                this.source.addresses.push(res.data)
-                this.updateCheckout(res.data.id, this.dialogAddress.type)
-                this.form[this.dialogAddress.type] = res.data.id
-
         } else {
-                this.source.addresses[this.dialogAddress.index] = res.data
+          this.source.addresses.push(form)
+          this.updateCheckout(form.id, this.dialogAddress.type)
+          this.form[this.dialogAddress.type] = form.id
         }
-              this.$message.success(res.message);
+
-              this.$refs[form].resetFields();
-              this.dialogAddress.show = false
         this.dialogAddress.index = null;
-            })
+        this.$forceUpdate()
-          });
-        },
-
-        closeAddressDialog(form) {
-          this.$refs[form].resetFields();
-          this.dialogAddress.show = false
-          this.dialogAddress.index = null;
-
-          Object.keys(this.dialogAddress.form).forEach(key => this.dialogAddress.form[key] = '')
-          this.dialogAddress.form.country_id = @json($country_id)
-        },
-
-        countryChange(e) {
-          const self = this;
-
-          $http.get(`/countries/${e}/zones`).then((res) => {
-            this.source.zones = res.data.zones;
-
-            if (!res.data.zones.some(e => e.id == this.dialogAddress.form.zone_id)) {
-              this.dialogAddress.form.zone_id = '';
-            }
-          })
       },
 
       updateCheckout(id, key) {
@@ -378,18 +304,7 @@
           this.isAllAddressPayment = false
         })
       },
-
-        checkedBtnCheckoutConfirm() {
-          if (!this.form.payment_address_id) {
-            layer.msg('{{ __('shop/checkout.error_payment_address') }}', ()=>{})
-            return;
-          }
-
-          $http.post('/checkout/confirm', this.form).then((res) => {
-            location = 'orders/' + res.number + '/success?type=create'
-          })
-        }
     }
   })
-  </script>
+</script>
 @endpush

themes/default/layout/header.blade.php

@@ -81,7 +81,7 @@
                   <h6 class="mb-0">{{ current_customer()->name }}</h6>
                 </li>
                 <li>
-                  <hr class="dropdown-divider">
+                  <hr class="dropdown-divider opacity-100">
                 </li>
                 <li><a href="{{ shop_route('account.index') }}" class="dropdown-item"><i class="bi bi-person me-1"></i>
                   {{ __('shop/account.index') }}</a></li>
@@ -90,7 +90,7 @@
                 <li><a href="{{ shop_route('account.wishlist.index') }}" class="dropdown-item"><i
                       class="bi bi-heart me-1"></i> {{ __('shop/account.wishlist.index') }}</a></li>
                 <li>
-                  <hr class="dropdown-divider">
+                  <hr class="dropdown-divider opacity-100">
                 </li>
                 <li><a href="{{ shop_route('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-left me-1"></i>
                     {{ __('common.sign_out') }}</a></li>

themes/default/shared/address-form.blade.php

@@ -1,22 +1,18 @@
-@php
+<template id="address-dialog">
-  $address_form_show = $address_form_show ?? 'dialogAddress.show';
+  <div>
-  $address_form_key = $address_form_key ?? 'dialogAddress.form';
+    <el-dialog custom-class="mobileWidth" title="{{ __('address.index') }}" :visible.sync="editShow" @close="closeAddressDialog('addressForm')" :close-on-click-modal="false">
-  $address_form_rules = $address_form_rules ?? 'addressRules';
+      <el-form ref="addressForm" :rules="rules" :model="form" label-width="100px">
-@endphp
-
-<el-dialog custom-class="mobileWidth" title="{{ __('address.index') }}" :visible.sync="{{ $address_form_show }}" @close="closeAddressDialog('addressForm')" :close-on-click-modal="false">
-  <el-form ref="addressForm" :rules="{{ $address_form_rules }}" :model="{{ $address_form_key }}" label-width="100px">
         <el-form-item label="{{ __('address.name') }}" prop="name">
-      <el-input v-model="{{ $address_form_key }}.name"></el-input>
+          <el-input v-model="form.name"></el-input>
         </el-form-item>
         <el-form-item label="{{ __('address.phone') }}" prop="phone">
-      <el-input maxlength="11" v-model="{{ $address_form_key }}.phone" type="number"></el-input>
+          <el-input maxlength="11" v-model="form.phone" type="number"></el-input>
         </el-form-item>
         <el-form-item label="{{ __('address.address') }}" required>
           <div class="row dialog-address">
             <div class="col-4">
               <el-form-item>
-            <el-select v-model="{{ $address_form_key }}.country_id" filterable placeholder="{{ __('address.country_id') }}" @change="countryChange">
+                <el-select v-model="form.country_id" filterable placeholder="{{ __('address.country_id') }}" @change="countryChange">
                   <el-option v-for="item in source.countries" :key="item.id" :label="item.name"
                     :value="item.id">
                   </el-option>
@@ -25,7 +21,7 @@
             </div>
             <div class="col-4 mt-2 mt-sm-0">
               <el-form-item prop="zone_id">
-            <el-select v-model="{{ $address_form_key }}.zone_id" filterable placeholder="{{ __('address.zone') }}">
+                <el-select v-model="form.zone_id" filterable placeholder="{{ __('address.zone') }}">
                   <el-option v-for="item in source.zones" :key="item.id" :label="item.name"
                     :value="item.id">
                   </el-option>
@@ -34,23 +30,23 @@
             </div>
             <div class="col-4 mt-2 mt-sm-0">
               <el-form-item prop="city">
-            <el-input v-model="{{ $address_form_key }}.city" placeholder="{{ __('shop/account.addresses.enter_city') }}"></el-input>
+                <el-input v-model="form.city" placeholder="{{ __('shop/account.addresses.enter_city') }}"></el-input>
               </el-form-item>
             </div>
           </div>
         </el-form-item>
         <el-form-item label="{{ __('address.post_code') }}" prop="zipcode">
-      <el-input v-model="{{ $address_form_key }}.zipcode"></el-input>
+          <el-input v-model="form.zipcode"></el-input>
         </el-form-item>
         <el-form-item label="{{ __('address.address_1') }}" prop="address_1">
-      <el-input v-model="{{ $address_form_key }}.address_1"></el-input>
+          <el-input v-model="form.address_1"></el-input>
         </el-form-item>
         <el-form-item label="{{ __('address.address_2') }}">
-      <el-input v-model="{{ $address_form_key }}.address_2"></el-input>
+          <el-input v-model="form.address_2"></el-input>
         </el-form-item>
         <el-form-item label="{{ __('address.default') }}">
           <el-switch
-        v-model="{{ $address_form_key }}.default"
+            v-model="form.default"
             >
           </el-switch>
         </el-form-item>
@@ -59,4 +55,129 @@
           <el-button @click="closeAddressDialog('addressForm')">{{ __('common.cancel') }}</el-button>
         </el-form-item>
       </el-form>
-</el-dialog>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  Vue.component('address-dialog', {
+  template: '#address-dialog',
+  props: {
+    value: {
+      default: null
+    },
+  },
+
+  data: function () {
+    return {
+      editShow: false,
+      index: null,
+      type: 'shipping_address_id',
+      form: {
+        name: '',
+        phone: '',
+        country_id: @json((int) system_setting('base.country_id')),
+        zipcode: '',
+        zone_id: @json((int) system_setting('base.zone_id')),
+        city: '',
+        address_1: '',
+        address_2: '',
+        default: false,
+      },
+
+      rules: {
+        name: [{
+          required: true,
+          message: '{{ __('shop/account.addresses.enter_name') }}',
+          trigger: 'blur'
+        }, ],
+        phone: [{
+          required: true,
+          message: '{{ __('shop/account.addresses.enter_phone') }}',
+          trigger: 'blur'
+        }, ],
+        address_1: [{
+          required: true,
+          message: ' {{ __('shop/account.addresses.enter_address') }}',
+          trigger: 'blur'
+        }, ],
+        zone_id: [{
+          required: true,
+          message: '{{ __('shop/account.addresses.select_province') }}',
+          trigger: 'blur'
+        }, ],
+        city: [{
+          required: true,
+          message: '{{ __('shop/account.addresses.enter_city') }}',
+          trigger: 'blur'
+        }, ],
+      },
+
+      source: {
+        countries: @json($countries ?? []),
+        zones: []
+      },
+    }
+  },
+
+  computed: {
+  },
+
+  beforeMount() {
+    this.countryChange(this.form.country_id);
+  },
+
+  methods: {
+    editAddress(addresses) {
+      if (addresses) {
+        this.form = addresses
+      }
+
+      this.countryChange(this.form.country_id);
+      this.editShow = true
+    },
+
+    addressFormSubmit(form) {
+      this.$refs[form].validate((valid) => {
+        if (!valid) {
+          this.$message.error('{{ __('shop/checkout.check_form') }}');
+          return;
+        }
+
+        const type = this.form.id ? 'put' : 'post';
+
+        const url = `/account/addresses${type == 'put' ? '/' + this.form.id : ''}`;
+
+        $http[type](url, this.form).then((res) => {
+          this.$message.success(res.message);
+          this.$emit('change', res.data)
+          this.editShow = false
+        })
+      });
+    },
+
+    closeAddressDialog(form) {
+      this.$refs[form].resetFields();
+      this.editShow = false
+
+      Object.keys(this.form).forEach(key => this.form[key] = '')
+      this.form.country_id = @json((int) system_setting('base.country_id'));
+      this.form.default = false;
+    },
+
+    countryChange(e) {
+      const self = this;
+
+      $http.get(`/countries/${e}/zones`, null, {
+        hload: true
+      }).then((res) => {
+        this.source.zones = res.data.zones;
+
+        if (!res.data.zones.some(e => e.id == this.form.zone_id)) {
+          this.form.zone_id = '';
+        }
+      })
+    },
+  }
+});
+</script>