From 2e577bbd8ca8c8c22f6b08cfd4ea3573f3f3821c Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Thu, 7 Jul 2022 11:33:58 +0800
Subject: [PATCH] wip

---
 beike/Shop/Services/PaymentService.php        |   2 +-
 public/build/beike/shop/default/css/app.css   | 205 ++++++++-------
 .../beike/shop/default/css/bootstrap.css      |   9 +-
 resources/beike/shop/default/css/app.scss     |   1 +
 .../shop/default/css/bootstrap/bootstrap.scss |   6 +-
 .../shop/default/css/page-bk-stripe.scss      |   8 +
 .../beike/shop/default/css/page-checkout.scss | 247 +++++++++---------
 .../default/account/order_success.blade.php   |   5 +-
 .../checkout/payment/bk_stripe.blade.php      | 135 +++++++++-
 themes/default/shared/steps.blade.php         |  10 +-
 10 files changed, 396 insertions(+), 232 deletions(-)
 create mode 100644 resources/beike/shop/default/css/page-bk-stripe.scss

diff --git a/beike/Shop/Services/PaymentService.php b/beike/Shop/Services/PaymentService.php
index afac5f4d..e74e253b 100644
--- a/beike/Shop/Services/PaymentService.php
+++ b/beike/Shop/Services/PaymentService.php
@@ -59,7 +59,7 @@ class PaymentService
             ]);
              **/
 
-            return view("checkout.payment.{$this->paymentMethodCode}");
+            return view("checkout.payment.{$this->paymentMethodCode}", ['order' => $this->order]);
             // echo $charge['id'];
         }
     }
diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index 80f19435..d81c37b4 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -499,107 +499,6 @@ body.page-cart .total-wrap .list-group li .total-price {
   font-weight: bold;
 }
 
-body.page-checkout .checkout-black {
-  margin-bottom: 2.6rem;
-}
-body.page-checkout .right-column {
-  position: relative;
-}
-@media (min-width: 992px) {
-  body.page-checkout .right-column {
-    padding-left: 2rem;
-  }
-}
-body.page-checkout .checkout-title {
-  border-bottom: 1px solid #e5e5e5;
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  position: relative;
-  padding-left: 10px;
-}
-body.page-checkout .checkout-title:before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 0;
-  background-color: #fd560f;
-  width: 3px;
-  height: 16px;
-}
-body.page-checkout .total-wrap {
-  padding: 1.4rem;
-  border: 3px solid #efefef;
-}
-body.page-checkout .total-wrap .card-body {
-  padding: 0;
-}
-body.page-checkout .total-wrap .card-header {
-  background-color: #fff;
-  padding: 0 0 0.8rem;
-  margin-bottom: 1rem;
-  border-color: #E6E6E6;
-}
-body.page-checkout .total-wrap .card-header h5 {
-  font-weight: bold;
-}
-body.page-checkout .total-wrap .card-header span {
-  line-height: 24px;
-  min-width: 24px;
-  color: #fff;
-  text-align: center;
-}
-body.page-checkout .total-wrap .products-wrap {
-  border-bottom: 1px solid #E6E6E6;
-  margin-bottom: 1.3rem;
-  padding-bottom: 0.3rem;
-  max-height: 380px;
-  overflow-y: auto;
-}
-body.page-checkout .total-wrap .products-wrap .item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.8rem;
-}
-body.page-checkout .total-wrap .products-wrap .item .image {
-  display: flex;
-  align-items: center;
-  padding-right: 4px;
-}
-body.page-checkout .total-wrap .products-wrap .item .image img {
-  width: 40px;
-  margin-right: 10px;
-}
-body.page-checkout .total-wrap .products-wrap .item .image .quantity {
-  margin-left: 3px;
-  color: #7a7a7a;
-}
-body.page-checkout .total-wrap .products-wrap .item .price {
-  color: #7a7a7a;
-}
-body.page-checkout .total-wrap .totals {
-  padding-left: 0;
-  list-style: none;
-  padding-bottom: 0.3rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid #E6E6E6;
-}
-body.page-checkout .total-wrap .totals > li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 14px;
-}
-body.page-checkout .total-wrap .totals > li > span {
-  font-weight: bold;
-}
-body.page-checkout .total-wrap .totals > li > span:first-of-type {
-  font-size: 0.8rem;
-  color: #3f3f3f;
-}
-body.page-checkout .total-wrap .totals > li > span:last-of-type {
-  color: #dc3545;
-}
 body.page-checkout .addresses-wrap .item {
   position: relative;
   padding: 14px 14px 14px 18px;
@@ -688,6 +587,106 @@ body.page-checkout .radio-line-wrap .radio-line-item .right .title {
   margin-bottom: 10px;
 }
 
+body.page-checkout .checkout-black, body.page-bk-stripe .checkout-black {
+  margin-bottom: 2.6rem;
+}
+body.page-checkout .right-column, body.page-bk-stripe .right-column {
+  position: relative;
+}
+@media (min-width: 992px) {
+  body.page-checkout .right-column, body.page-bk-stripe .right-column {
+    padding-left: 2rem;
+  }
+}
+body.page-checkout .checkout-title, body.page-bk-stripe .checkout-title {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  position: relative;
+  padding-left: 10px;
+}
+body.page-checkout .checkout-title:before, body.page-bk-stripe .checkout-title:before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 0;
+  background-color: #fd560f;
+  width: 3px;
+  height: 16px;
+}
+body.page-checkout .total-wrap, body.page-bk-stripe .total-wrap {
+  padding: 1.4rem;
+  border: 3px solid #efefef;
+}
+body.page-checkout .total-wrap .card-body, body.page-bk-stripe .total-wrap .card-body {
+  padding: 0;
+}
+body.page-checkout .total-wrap .card-header, body.page-bk-stripe .total-wrap .card-header {
+  background-color: #fff;
+  padding: 0 0 0.8rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #E6E6E6;
+}
+body.page-checkout .total-wrap .card-header h5, body.page-bk-stripe .total-wrap .card-header h5 {
+  font-weight: bold;
+}
+body.page-checkout .total-wrap .card-header span, body.page-bk-stripe .total-wrap .card-header span {
+  line-height: 24px;
+  min-width: 24px;
+  color: #fff;
+  text-align: center;
+}
+body.page-checkout .total-wrap .products-wrap, body.page-bk-stripe .total-wrap .products-wrap {
+  border-bottom: 1px solid #E6E6E6;
+  margin-bottom: 1.3rem;
+  padding-bottom: 0.3rem;
+  max-height: 380px;
+  overflow-y: auto;
+}
+body.page-checkout .total-wrap .products-wrap .item, body.page-bk-stripe .total-wrap .products-wrap .item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.8rem;
+}
+body.page-checkout .total-wrap .products-wrap .item .image, body.page-bk-stripe .total-wrap .products-wrap .item .image {
+  display: flex;
+  align-items: center;
+  padding-right: 4px;
+}
+body.page-checkout .total-wrap .products-wrap .item .image img, body.page-bk-stripe .total-wrap .products-wrap .item .image img {
+  width: 40px;
+  margin-right: 10px;
+}
+body.page-checkout .total-wrap .products-wrap .item .image .quantity, body.page-bk-stripe .total-wrap .products-wrap .item .image .quantity {
+  margin-left: 3px;
+  color: #7a7a7a;
+}
+body.page-checkout .total-wrap .products-wrap .item .price, body.page-bk-stripe .total-wrap .products-wrap .item .price {
+  color: #7a7a7a;
+}
+body.page-checkout .total-wrap .totals, body.page-bk-stripe .total-wrap .totals {
+  padding-left: 0;
+  list-style: none;
+  padding-bottom: 0.3rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid #E6E6E6;
+}
+body.page-checkout .total-wrap .totals > li, body.page-bk-stripe .total-wrap .totals > li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+body.page-checkout .total-wrap .totals > li:last-of-type, body.page-bk-stripe .total-wrap .totals > li:last-of-type {
+  font-weight: bold;
+}
+body.page-checkout .total-wrap .totals > li:last-of-type > span:last-of-type, body.page-bk-stripe .total-wrap .totals > li:last-of-type > span:last-of-type {
+  color: #dc3545;
+}
+body.page-checkout .total-wrap .totals > li > span:first-of-type, body.page-bk-stripe .total-wrap .totals > li > span:first-of-type {
+  font-size: 0.8rem;
+}
 .el-input__inner {
   border-radius: 0 !important;
 }
@@ -792,3 +791,7 @@ body.page-account-order-info .product-list .right .name {
 body.page-account-order-info .product-list .right .price {
   font-weight: bold;
 }
+
+body.page-bk-stripe .form-wrap {
+  max-width: 400px;
+}
diff --git a/public/build/beike/shop/default/css/bootstrap.css b/public/build/beike/shop/default/css/bootstrap.css
index 6e8f9eea..d357dcc5 100644
--- a/public/build/beike/shop/default/css/bootstrap.css
+++ b/public/build/beike/shop/default/css/bootstrap.css
@@ -11252,7 +11252,7 @@ textarea.form-control-lg {
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
-  border: 1px solid rgba(0, 0, 0, 0.125);
+  border: 0 solid rgba(0, 0, 0, 0.125);
   border-radius: 0;
 }
 .card > hr {
@@ -11304,7 +11304,7 @@ textarea.form-control-lg {
   padding: 0.5rem 1rem;
   margin-bottom: 0;
   background-color: rgba(0, 0, 0, 0.03);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  border-bottom: 0 solid rgba(0, 0, 0, 0.125);
 }
 .card-header:first-child {
   border-radius: 0 0 0 0;
@@ -11313,7 +11313,7 @@ textarea.form-control-lg {
 .card-footer {
   padding: 0.5rem 1rem;
   background-color: rgba(0, 0, 0, 0.03);
-  border-top: 1px solid rgba(0, 0, 0, 0.125);
+  border-top: 0 solid rgba(0, 0, 0, 0.125);
 }
 .card-footer:last-child {
   border-radius: 0 0 0 0;
@@ -18037,9 +18037,6 @@ textarea.form-control-lg {
   border-top: none;
 }
 
-.card {
-  border: none;
-}
 .card .card-header {
   padding: 1rem 1rem 0.3rem;
   background-color: #fff;
diff --git a/resources/beike/shop/default/css/app.scss b/resources/beike/shop/default/css/app.scss
index 0161ce0e..4160ef01 100644
--- a/resources/beike/shop/default/css/app.scss
+++ b/resources/beike/shop/default/css/app.scss
@@ -19,3 +19,4 @@ $primary: #fd560f;
 @import './element-ui';
 @import './order-success';
 @import './page-account-order';
+@import './page-bk-stripe';
diff --git a/resources/beike/shop/default/css/bootstrap/bootstrap.scss b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
index bf217f39..e92a884e 100644
--- a/resources/beike/shop/default/css/bootstrap/bootstrap.scss
+++ b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
@@ -50,6 +50,10 @@ $form-floating-height:        50px;
 
 $dropdown-border-color: rgba(0, 0, 0, 0.1);
 $dropdown-item-padding-y: .4rem;
+
+
+$card-border-width: 0;
+
 // $dropdown-divider-bg:               rgba(0, 0, 0, 0.1);
 @import './bootstrap-icons';
 @import 'node_modules/bootstrap-5.1.3/scss/bootstrap';
@@ -77,7 +81,7 @@ $dropdown-item-padding-y: .4rem;
 
 .card {
   // box-shadow: rgba(0, 0, 0, .1) 0px 1px 4px 0px;
-  border: none;
+  // border: none;
 
   .card-header {
     padding: 1rem 1rem .3rem;
diff --git a/resources/beike/shop/default/css/page-bk-stripe.scss b/resources/beike/shop/default/css/page-bk-stripe.scss
new file mode 100644
index 00000000..76f2ac85
--- /dev/null
+++ b/resources/beike/shop/default/css/page-bk-stripe.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+body.page-bk-stripe {
+  .form-wrap {
+    // border: 1px solid #eee;
+    max-width: 400px;
+  }
+}
diff --git a/resources/beike/shop/default/css/page-checkout.scss b/resources/beike/shop/default/css/page-checkout.scss
index 1a78b4c1..4a6d4f2c 100644
--- a/resources/beike/shop/default/css/page-checkout.scss
+++ b/resources/beike/shop/default/css/page-checkout.scss
@@ -1,124 +1,6 @@
 @charset "UTF-8";
 
 body.page-checkout {
-  .checkout-black {
-    margin-bottom: 2.6rem;
-  }
-
-  .right-column {
-    position: relative;
-    @media (min-width: 992px) {
-      padding-left: 2rem;
-    }
-  }
-
-  .checkout-title {
-    border-bottom: 1px solid #e5e5e5;
-    padding-bottom: 16px;
-    margin-bottom: 16px;
-    position: relative;
-    padding-left: 10px;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      left: 0;
-      background-color: $primary;
-      width: 3px;
-      height: 16px;
-    }
-  }
-
-  .total-wrap {
-    padding: 1.4rem;
-    border: 3px solid #efefef;
-
-    .card-body {
-      padding: 0;
-    }
-
-    .card-header {
-      background-color: #fff;
-      padding: 0 0 .8rem;
-      margin-bottom: 1rem;
-      border-color: #E6E6E6;
-      h5 {
-        font-weight: bold;
-      }
-
-      span {
-        line-height: 24px;
-        min-width: 24px;
-        color: #fff;
-        text-align: center;
-      }
-    }
-
-    .products-wrap {
-      border-bottom: 1px solid #E6E6E6;
-      margin-bottom: 1.3rem;
-      padding-bottom: .3rem;
-      max-height: 380px;
-      overflow-y: auto;
-
-      .item {
-        display: flex;
-        align-items: center; // flex-start | center
-        justify-content: space-between; // flex-end | center | space-between
-        margin-bottom: .8rem;
-
-        .image {
-          display: flex;
-          align-items: center; // flex-start | center
-          padding-right: 4px;
-
-          img {
-            width: 40px;
-            margin-right: 10px;
-          }
-
-          .quantity {
-            margin-left: 3px;
-            color: #7a7a7a;
-          }
-        }
-
-        .price {
-          color: #7a7a7a;
-        }
-      }
-    }
-
-    .totals {
-      padding-left: 0;
-      list-style: none;
-      padding-bottom: .3rem;
-      margin-bottom: 1.5rem;
-      border-bottom: 1px solid #E6E6E6;
-
-      > li {
-        display: flex;
-        align-items: center; // flex-start | center
-        justify-content: space-between; // flex-end | center | space-between
-        margin-bottom: 14px;
-        // flex-wrap: wrap;
-        > span {
-          font-weight: bold;
-
-          &:first-of-type {
-            font-size: .8rem;
-            color: #3f3f3f;
-          }
-
-          &:last-of-type {
-            color: #dc3545;
-          }
-        }
-      }
-    }
-  }
-
   .addresses-wrap {
     .item {
       position: relative;
@@ -236,4 +118,133 @@ body.page-checkout {
       }
     }
   }
+}
+
+body.page-checkout, body.page-bk-stripe {
+  .checkout-black {
+    margin-bottom: 2.6rem;
+  }
+
+  .right-column {
+    position: relative;
+    @media (min-width: 992px) {
+      padding-left: 2rem;
+    }
+  }
+
+  .checkout-title {
+    border-bottom: 1px solid #e5e5e5;
+    padding-bottom: 16px;
+    margin-bottom: 16px;
+    position: relative;
+    padding-left: 10px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 0;
+      background-color: $primary;
+      width: 3px;
+      height: 16px;
+    }
+  }
+
+  .total-wrap {
+    padding: 1.4rem;
+    border: 3px solid #efefef;
+
+    .card-body {
+      padding: 0;
+    }
+
+    .card-header {
+      background-color: #fff;
+      padding: 0 0 .8rem;
+      margin-bottom: 1rem;
+      border-bottom: 1px solid #E6E6E6;
+      h5 {
+        font-weight: bold;
+      }
+
+      span {
+        line-height: 24px;
+        min-width: 24px;
+        color: #fff;
+        text-align: center;
+      }
+    }
+
+    .products-wrap {
+      border-bottom: 1px solid #E6E6E6;
+      margin-bottom: 1.3rem;
+      padding-bottom: .3rem;
+      max-height: 380px;
+      overflow-y: auto;
+
+      .item {
+        display: flex;
+        align-items: center; // flex-start | center
+        justify-content: space-between; // flex-end | center | space-between
+        margin-bottom: .8rem;
+
+        .image {
+          display: flex;
+          align-items: center; // flex-start | center
+          padding-right: 4px;
+
+          img {
+            width: 40px;
+            margin-right: 10px;
+          }
+
+          .quantity {
+            margin-left: 3px;
+            color: #7a7a7a;
+          }
+        }
+
+        .price {
+          color: #7a7a7a;
+        }
+      }
+    }
+
+    .totals {
+      padding-left: 0;
+      list-style: none;
+      padding-bottom: .3rem;
+      margin-bottom: 1.5rem;
+      border-bottom: 1px solid #E6E6E6;
+
+      > li {
+        display: flex;
+        align-items: center; // flex-start | center
+        justify-content: space-between; // flex-end | center | space-between
+        margin-bottom: 14px;
+        // flex-wrap: wrap;
+        &:last-of-type {
+          font-weight: bold;
+
+          > span {
+            &:last-of-type {
+              color: #dc3545;
+            }
+          }
+        }
+        > span {
+          // font-weight: bold;
+
+          &:first-of-type {
+            font-size: .8rem;
+            // color: #3f3f3f;
+          }
+
+          &:last-of-type {
+            // color: #dc3545;
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/themes/default/account/order_success.blade.php b/themes/default/account/order_success.blade.php
index f2afa568..1c472e3b 100644
--- a/themes/default/account/order_success.blade.php
+++ b/themes/default/account/order_success.blade.php
@@ -15,7 +15,7 @@
       <div class="col-12 col-md-9">@include('shared.steps', ['steps' => 3])</div>
     </div>
 
-    <div class="card order-wrap">
+    <div class="card order-wrap border">
       <div class="card-body">
         <div class="order-top">
           <div class="left">
@@ -34,6 +34,9 @@
                     <td>支付方式：<span class="fw-bold">{{ $order['payment_method_name'] }}</span></td>
                     <td><a href="/">查看订单详情</a></td>
                   </tr>
+                  <tr>
+                    <td><a href="{{ shop_route('orders.pay', [$order['number']]) }}" class="btn btn-primary btn-sm">立即支付</a></td>
+                  </tr>
                 </tbody>
               </table>
             </div>
diff --git a/themes/default/checkout/payment/bk_stripe.blade.php b/themes/default/checkout/payment/bk_stripe.blade.php
index f03f6945..75dd6453 100644
--- a/themes/default/checkout/payment/bk_stripe.blade.php
+++ b/themes/default/checkout/payment/bk_stripe.blade.php
@@ -1 +1,134 @@
-dd
+@extends('layout.master')
+
+@section('body-class', 'page-bk-stripe')
+
+@push('header')
+  <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
+  <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
+  <link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
+@endpush
+
+@section('content')
+  <div class="container" id="bk-stripe-app" v-cloak>
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="#">Home</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Library</li>
+      </ol>
+    </nav>
+
+    <div class="row justify-content-center">
+      <div class="col-12 col-md-9">@include('shared.steps', ['steps' => 4])</div>
+    </div>
+
+    <div class="row mt-5">
+      <div class="col-12 col-md-8">
+        <div class="checkout-black">
+          <h5 class="checkout-title">卡信息</h5>
+          <div class="border px-3 py-2">
+            <el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap">
+              <el-form-item label="卡号" prop="cardnum">
+                <el-input v-model="form.cardnum"></el-input>
+              </el-form-item>
+              <el-form-item label="截止日期" required>
+                <div class="d-flex align-items-center">
+                  <el-form-item prop="year">
+                    <el-date-picker
+                      class="w-auto me-2"
+                      v-model="form.year"
+                      format="yyyy"
+                      value-format="yyyy"
+                      type="year"
+                      placeholder="选择年">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item prop="month">
+                    <el-date-picker
+                      v-model="form.month"
+                      class="w-auto"
+                      format="MM"
+                      value-format="MM"
+                      type="month"
+                      placeholder="选择月">
+                    </el-date-picker>
+                  </el-form-item>
+                </div>
+              </el-form-item>
+              <el-form-item label="安全码" prop="cvv">
+                <el-input v-model="form.cvv"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-checkbox v-model="form.remenber">記住這張卡以備將來使用</el-checkbox>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-md-4 right-column">
+        <div class="card total-wrap">
+          <div class="card-header d-flex align-items-center justify-content-between">
+            <h5 class="mb-0">订单结账</h5>
+            <span class="rounded-circle bg-primary"></span>
+          </div>
+          <div class="card-body">
+            <ul class="totals">
+              <li><span>订单号</span><span>@{{ source.order.number }}</span></li>
+              <li><span>运费</span><span>15</span></li>
+              <li><span>应付总金额</span><span v-text="source.order.total"></span></li>
+            </ul>
+            <div class="d-grid gap-2 mt-3">
+              <button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
+@push('add-scripts')
+  <script>
+    new Vue({
+      el: '#bk-stripe-app',
+
+      data: {
+        form: {
+          cardnum: '',
+          year: '',
+          month: '',
+          cvv: '',
+          remenber: false,
+        },
+
+        source: {
+          order: @json($order ?? null),
+        },
+
+        rules: {
+          cardnum: [{required: true, message: '请输入卡号', trigger: 'blur'}, ],
+          cvv: [{required: true, message: '请输入安全码', trigger: 'blur'}, ],
+          year: [{required: true, message: '请选择年', trigger: 'blur'}, ],
+          month: [{required: true, message: '请选择月', trigger: 'blur'}, ],
+        }
+      },
+
+      beforeMount () {
+      },
+
+      methods: {
+        checkedBtnCheckoutConfirm(form) {
+          this.$refs[form].validate((valid) => {
+            if (!valid) {
+              this.$message.error('请检查表单是否填写正确');
+              return;
+            }
+
+            $http.post(`orders/${this.source.order.number}/pay`, this.form).then((res) => {
+              console.log(res)
+            })
+          });
+        }
+      }
+    })
+  </script>
+@endpush
\ No newline at end of file
diff --git a/themes/default/shared/steps.blade.php b/themes/default/shared/steps.blade.php
index 3a417514..63b65ad5 100644
--- a/themes/default/shared/steps.blade.php
+++ b/themes/default/shared/steps.blade.php
@@ -1,14 +1,18 @@
 <div class="steps-wrap">
-  <div class="{{ $steps == 1 || $steps == 2 || $steps == 3 ? 'active':'' }}">
+  <div class="{{ $steps == 1 || $steps == 2 || $steps == 3 || $steps == 4 ? 'active':'' }}">
     <div class="number-wrap"><span class="number">1</span></div>
     <span class="title">购物车</span>
   </div>
-  <div class="{{ $steps == 2 || $steps == 3 ? 'active':'' }}">
+  <div class="{{ $steps == 2 || $steps == 3 || $steps == 4 ? 'active':'' }}">
     <div class="number-wrap"><span class="number">2</span></div>
     <span class="title">结账</span>
   </div>
-  <div class="{{ $steps == 3 ? 'active':'' }}">
+  <div class="{{ $steps == 3 || $steps == 4 ? 'active':'' }}">
     <div class="number-wrap"><span class="number">3</span></div>
     <span class="title">提交成功</span>
   </div>
+  <div class="{{ $steps == 4 ? 'active':'' }}">
+    <div class="number-wrap"><span class="number">4</span></div>
+    <span class="title">付款</span>
+  </div>
 </div>
\ No newline at end of file