From e7b2124bade5e1e8130895c3a23625c3c3446775 Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Mon, 8 Aug 2022 15:27:54 +0800
Subject: [PATCH] wip

---
 plugins/Stripe/Static/css/demo.css            |  4 +-
 .../Stripe/Views/checkout/payment.blade.php   | 72 +++++++++----------
 public/build/beike/shop/default/css/app.css   | 19 +++--
 .../beike/shop/default/css/bootstrap.css      |  2 +-
 .../shop/default/css/bootstrap/bootstrap.scss |  1 +
 .../beike/shop/default/css/order-success.scss |  9 +--
 .../default/account/order_success.blade.php   |  4 +-
 themes/default/checkout/payment.blade.php     | 35 ++++++---
 8 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/plugins/Stripe/Static/css/demo.css b/plugins/Stripe/Static/css/demo.css
index dd144f10..72c7c933 100644
--- a/plugins/Stripe/Static/css/demo.css
+++ b/plugins/Stripe/Static/css/demo.css
@@ -9,6 +9,6 @@
 
 
 #bk-stripe-app .pay-iamges img {
-  max-width: 70px;
-  margin-right: 4px;
+  /* max-width: 70px; */
+  /* margin-right: 4px; */
 }
diff --git a/plugins/Stripe/Views/checkout/payment.blade.php b/plugins/Stripe/Views/checkout/payment.blade.php
index 8f7fa1f5..5cfc4773 100644
--- a/plugins/Stripe/Views/checkout/payment.blade.php
+++ b/plugins/Stripe/Views/checkout/payment.blade.php
@@ -4,46 +4,42 @@
 
 <script src="{{ asset('plugin/stripe/js/demo.js') }}"></script>
 <link rel="stylesheet" href="{{ asset('plugin/stripe/css/demo.css') }}">
-
 <div class="mt-5" id="bk-stripe-app" v-cloak>
-  <div class="card">
-    <div class="card-body">
-      <div class="checkout-black">
-        <h5 class="checkout-title">卡信息</h5>
-        <div class="">
-          <div class="pay-iamges">
-              <img src="{{ asset("plugin/stripe/image/pay-image.png") }}" class="img-fluid">
-          </div>
-          <el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
-            <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-item>
-              <button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
-            </el-form-item>
-          </el-form>
-        </div>
+  <hr class="mb-4">
+  <div class="checkout-black">
+    <h5 class="checkout-title">卡信息</h5>
+    <div class="">
+      <div class="pay-iamges mb-2">
+        <img src="{{ asset("plugin/stripe/image/pay-image.png") }}" class="img-fluid">
       </div>
+      <el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
+        <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-item>
+          <button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
+        </el-form-item>
+      </el-form>
     </div>
   </div>
 </div>
diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index 29eadb15..137ab57f 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -1106,42 +1106,41 @@ body.page-checkout .total-wrap .totals > li > span:first-of-type, body.page-bk-s
   border-radius: 0 !important;
 }
 
-body.page-order-success .order-wrap .card-body {
+body.page-order-success .order-wrap .card-body.main-body, body.page-payment .order-wrap .card-body.main-body {
   padding: 3rem;
   padding-left: 7rem;
 }
-body.page-order-success .order-wrap .card-body .order-top {
-  border-bottom: 1px solid #eee;
+body.page-order-success .order-wrap .card-body .order-top, body.page-payment .order-wrap .card-body .order-top {
   padding-bottom: 2.7rem;
   margin-bottom: 2.7rem;
   display: flex;
   justify-content: center;
 }
-body.page-order-success .order-wrap .card-body .order-top .left {
+body.page-order-success .order-wrap .card-body .order-top .left, body.page-payment .order-wrap .card-body .order-top .left {
   margin-top: -6px;
 }
-body.page-order-success .order-wrap .card-body .order-top .left i {
+body.page-order-success .order-wrap .card-body .order-top .left i, body.page-payment .order-wrap .card-body .order-top .left i {
   color: #4caf50;
   font-size: 80px;
   line-height: 1;
 }
-body.page-order-success .order-wrap .card-body .order-top .right {
+body.page-order-success .order-wrap .card-body .order-top .right, body.page-payment .order-wrap .card-body .order-top .right {
   flex: 1;
   margin-left: 2rem;
 }
-body.page-order-success .order-wrap .card-body .order-top .right .table {
+body.page-order-success .order-wrap .card-body .order-top .right .table, body.page-payment .order-wrap .card-body .order-top .right .table {
   margin-bottom: 0;
 }
-body.page-order-success .order-wrap .card-body .order-top .right .order-title {
+body.page-order-success .order-wrap .card-body .order-top .right .order-title, body.page-payment .order-wrap .card-body .order-top .right .order-title {
   margin-bottom: 1.2rem;
   font-weight: 400;
 }
-body.page-order-success .order-wrap .card-body .order-top .right .order-info {
+body.page-order-success .order-wrap .card-body .order-top .right .order-info, body.page-payment .order-wrap .card-body .order-top .right .order-info {
   padding: 0.7rem;
   background-color: #fffaf0;
   border: 1px solid #ffe1ad;
 }
-body.page-order-success .order-wrap .card-body .order-bottom {
+body.page-order-success .order-wrap .card-body .order-bottom, body.page-payment .order-wrap .card-body .order-bottom {
   margin-left: calc(2rem + 80px);
   line-height: 2;
 }
diff --git a/public/build/beike/shop/default/css/bootstrap.css b/public/build/beike/shop/default/css/bootstrap.css
index 781b0f3a..9160d047 100644
--- a/public/build/beike/shop/default/css/bootstrap.css
+++ b/public/build/beike/shop/default/css/bootstrap.css
@@ -6837,7 +6837,7 @@ body {
 
 hr {
   margin: 1rem 0;
-  color: inherit;
+  color: #bcbcbc;
   background-color: currentColor;
   border: 0;
   opacity: 0.25;
diff --git a/resources/beike/shop/default/css/bootstrap/bootstrap.scss b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
index 1a3ee658..395dd454 100644
--- a/resources/beike/shop/default/css/bootstrap/bootstrap.scss
+++ b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
@@ -16,6 +16,7 @@ $form-check-input-width: 1.2em;
 $form-check-input-border-radius: 0;
 
 $nav-link-color: #1f1f1f;
+$hr-color: #bcbcbc;
 
 // Breadcrumbs
 // scss-docs-start breadcrumb-variables
diff --git a/resources/beike/shop/default/css/order-success.scss b/resources/beike/shop/default/css/order-success.scss
index 071de7d3..7327cece 100644
--- a/resources/beike/shop/default/css/order-success.scss
+++ b/resources/beike/shop/default/css/order-success.scss
@@ -1,13 +1,14 @@
 @charset "UTF-8";
 
-body.page-order-success {
+body.page-order-success, body.page-payment {
   .order-wrap {
     .card-body {
-      padding: 3rem;
-      padding-left: 7rem;
+      &.main-body {
+        padding: 3rem;
+        padding-left: 7rem;
+      }
 
       .order-top {
-        border-bottom: 1px solid #eee;
         padding-bottom: 2.7rem;
         margin-bottom: 2.7rem;
         display: flex;
diff --git a/themes/default/account/order_success.blade.php b/themes/default/account/order_success.blade.php
index 216e3efe..ed6b1064 100644
--- a/themes/default/account/order_success.blade.php
+++ b/themes/default/account/order_success.blade.php
@@ -9,8 +9,8 @@
     </div>
 
     <div class="card order-wrap border">
-      <div class="card-body">
-        <div class="order-top">
+      <div class="card-body main-body">
+        <div class="order-top border-bottom">
           <div class="left">
             <i class="bi bi-check2-circle"></i>
           </div>
diff --git a/themes/default/checkout/payment.blade.php b/themes/default/checkout/payment.blade.php
index 2a30fc1a..5efc7c7c 100644
--- a/themes/default/checkout/payment.blade.php
+++ b/themes/default/checkout/payment.blade.php
@@ -1,6 +1,6 @@
 @extends('layout.master')
 
-@section('body-class', 'page-bk-stripe')
+@section('body-class', 'page-payment')
 
 @section('content')
   <div class="container">
@@ -8,17 +8,32 @@
       <div class="col-12 col-md-9">@include('shared.steps', ['steps' => 4])</div>
     </div>
 
-
     <div class="col-12">
-      <div class="card order-wrap border total-wrap">
-        <h5 class="checkout-title">订单结账</h5>
-        <div class="card-body">
-          <ul class="totals">
-            <li><span>订单号</span><span>{{ $order->number }}</span></li>
-            <li><span>应付总金额</span><span v-text="source.order.total">{{ $order->total }}</span></li>
-          </ul>
+      <div class="card order-wrap border">
+        <div class="card-body main-body">
+          <div class="order-top">
+            <div class="left">
+              <i class="bi bi-credit-card-2-back"></i>
+            </div>
+            <div class="right">
+              <h3 class="order-title">订单提交成功，请付款</h3>
+              <div class="order-info">
+                <table class="table table-borderless">
+                  <tbody>
+                    <tr>
+                      <td>订单编号：<span class="fw-bold">{{ $order['number'] }}</span></td>
+                      <td>应付金额：<span class="fw-bold">{{ $order['total'] }}</span></td>
+                    </tr>
+                    <tr>
+                      <td>支付方式：<span class="fw-bold">{{ $order['payment_method_name'] }}</span></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
 
-          {!! $payment !!}
+              {!! $payment !!}
+            </div>
+          </div>
         </div>
       </div>
     </div>