改进 支付页面

resources/views/balances/pay.blade.php

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