fix:添加收款码

.env.development

@@ -1,2 +1,3 @@
 # 开发环境
-VITE_API_BASE_URL=http://10.23.22.43:8099
+# VITE_API_BASE_URL=http://10.23.22.43:8099
+VITE_API_BASE_URL=https://robotclass.ngsk.tech:7001/backend/

src/assets/styles/main.css

@@ -377,7 +377,7 @@ html, body {
     padding: 12px;
   }
   .pay-card {
-    height: calc(100vh - 20px);
+    min-height: calc(100vh - 20px);
   }
   .custom-card {
     padding: 24px 16px;

src/views/client/PaymentPage.vue

@@ -60,13 +60,13 @@
             <el-icon><CreditCard /></el-icon>
             <span>扫码支付</span>
           </div>          
-          
+          <div class="qrcode-desc">支付时请备注姓名 + 手机号，以便我们快速确认您的报名</div>
           <div class="qrcode-grid">
             <!-- 微信支付 -->
             <div class="qrcode-item">
               <div class="qrcode-box">
                 <div class="qrcode-placeholder">
-                  <svg viewBox="0 0 200 200" class="qrcode-svg">
+                  <!-- <svg viewBox="0 0 200 200" class="qrcode-svg">
                     <rect x="20" y="20" width="160" height="160" fill="white" stroke="#07C160" stroke-width="2"/>
                     <rect x="40" y="40" width="40" height="40" fill="#07C160"/>
                     <rect x="90" y="40" width="30" height="30" fill="#07C160"/>
@@ -76,14 +76,15 @@
                     <rect x="40" y="130" width="20" height="20" fill="#07C160"/>
                     <rect x="70" y="130" width="30" height="30" fill="#07C160"/>
                     <rect x="120" y="130" width="40" height="40" fill="#07C160"/>
-                  </svg>
+                  </svg> -->
+                  <el-image class="qrcode-image" :src="payCode" :preview-src-list="[payCode]"></el-image>
                 </div>
                 <p class="qrcode-label">微信支付</p>
               </div>
             </div>
 
             <!-- 支付宝支付 -->
-            <div class="qrcode-item">
+            <!-- <div class="qrcode-item">
               <div class="qrcode-box">
                 <div class="qrcode-placeholder">
                   <svg viewBox="0 0 200 200" class="qrcode-svg alipay">
@@ -97,14 +98,13 @@
                 </div>
                 <p class="qrcode-label">支付宝支付</p>
               </div>
-            </div>
+            </div> -->
           </div>
 
           <!-- 支付提示 -->
           <div class="payment-tips">
             <el-icon><InfoFilled /></el-icon>
-            <!-- <span>支付时请备注 <strong>姓名 + 手机号</strong>，以便我们快速确认您的报名</span> -->
-             <span>说明：课程收费二维码目前更新中，费用具体缴纳方式将在报名成功后于学员微信群中说明</span>
+            <span>说明：报名缴费成功后，请持续关注官方培训微信群动态，谢谢！</span>
           </div>
         </div>
 
@@ -118,7 +118,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-
+import payCode from '@/assets/payCode.png'
 const route = useRoute()
 const router = useRouter()
 const registrationData = ref(null)
@@ -271,7 +271,11 @@ onMounted(() => {
   justify-content: center;
   gap: 8px;
 }
-
+.qrcode-desc{
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 22px;
+}
 .qrcode-grid {
   display: flex;
   justify-content: center;
@@ -297,13 +301,15 @@ onMounted(() => {
 }
 
 .qrcode-placeholder {
-  width: 160px;
-  height: 160px;
+  /* width: 160px;
+  height: 160px; */
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
+.qrcode-image{
+  width: 200px;
+}
 .qrcode-svg {
   width: 100%;
   height: 100%;
@@ -409,18 +415,23 @@ onMounted(() => {
 
   .qrcode-title {
     font-size: 14px;
-    margin-bottom: 16px;
+    margin-bottom: 5px;
+  }
+  .qrcode-desc{
+    font-size: 14px;
+    margin-bottom: 5px;
   }
-
   .qrcode-grid {
     gap: 10px;
   }
 
-  .qrcode-placeholder {
+  /* .qrcode-placeholder {
     width: 120px;
     height: 120px;
+  } */
+  .qrcode-image{
+    width: 120px;
   }
-
   .qrcode-box {
     padding: 12px;
   }

vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
   server: {
     host: '0.0.0.0',
     port: 4000,