改进 支付页面

resources/views/balances/pay.blade.php

@@ -4,20 +4,17 @@
 
 @section('content')
 
-    <h1>莱云 支付处理器</h1>
-    <p>此页面正在进行充值交易。</p>
+    <style>
+        .success-icon {
+            font-size: 10rem;
+            color: #096dff
+        }
+    </style>
 
+
+    <div class="d-flex justify-content-center align-items-center h-screen" style="height: 60vh">
+        <div class="text-center">
             <div id="pay">
-        <p>您将要给 {{ $balance->user->name }} 充值 {{ $balance->amount }} 元。
-            @if ($balance->user_id == auth('web')->id())
-                这是您自己的账号。
-            @else
-                但是请看仔细，<span class="text-danger">这不是您自己的账号。</span>
-            @endif
-
-        </p>
-
-        <p>如果您已知晓情况，请
                 @php
                     if ($balance->payment === 'alipay') {
                         $payment = '支付宝';
@@ -26,25 +23,38 @@
                     } else {
                         $payment = '相应的软件';
                     }
-
                 @endphp
-            使用"{{ $payment }}"扫描二维码。
-        </p>
+
+                <h3>请使用 "{{ $payment }}" 扫描二维码。</h3>
 
 
+                <div class="mt-3">
                     {{ $qr_code }}
                 </div>
 
-    <h3 class="text-success d-none" id="pay-success">您已成功完成支付。@auth
-            我们将稍后带您去余额界面。
+                <h3 class="mt-2"> {{ $balance->amount }} 元</h3>
+            </div>
+
+            <div class="d-none" id="pay-success">
+                <div class="success-icon">
+                    <i class="bi bi-check2-all"></i>
+                </div>
+
+                <h2>您已支付</h2>
+                @auth
+                    <p>我们收到了您的支付，谢谢！</p>
                 @else
-            您可以关闭此网页去通知 {{ $balance->user->name }} 了。
-        @endauth</h3>
-    <h3 class="text-danger d-none" id="pay-error">此支付出现了问题。@auth
+                    <p>您可以关闭此网页去通知 {{ $balance->user->name }} 了。</p>
+                @endauth
+            </div>
+            <div class="text-danger d-none" id="pay-error">此支付出现了问题。@auth
                     我们将稍后带您去余额界面。稍后请尽快联系我们。
                 @else
                     您可以让 {{ $balance->user->name }} 联系我们，或者您可以点击上方的"联系我们"按钮。
-        @endauth</h3>
+                @endauth
+            </div>
+        </div>
+    </div>
 
 
     <script>