fix: missing braces in JS, add backend QR code endpoint, use backend QR code instead of external API

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

cfc-backend/src/main/java/com/etotem/cfc/controller/guide/PaymentController.java

@@ -6,14 +6,23 @@ import com.etotem.cfc.common.Result;
 import com.etotem.cfc.entity.PackageOrder;
 import com.etotem.cfc.service.PaymentService;
 import com.etotem.cfc.service.WechatService;
+import com.google.zxing.BarcodeFormat;
+import com.google.zxing.EncodeHintType;
+import com.google.zxing.client.j2se.MatrixToImageWriter;
+import com.google.zxing.qrcode.QRCodeWriter;
+import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 
 import org.springframework.web.bind.annotation.*;
 
+import javax.imageio.ImageIO;
+import javax.servlet.http.HttpServletResponse;
+import java.awt.image.BufferedImage;
 import java.net.URLEncoder;
 import java.nio.charset.StandardCharsets;
 import java.util.HashMap;
+import java.util.Hashtable;
 import java.util.Map;
 
 /**
@@ -154,4 +163,22 @@ public class PaymentController {
         
         return Result.success(order);
     }
+
+    /**
+     * 生成支付二维码图片
+     */
+    @Operation(summary = "生成支付二维码")
+    @GetMapping("/qrcode")
+    public void generateQrCode(String text, HttpServletResponse response) throws Exception {
+        int size = 280;
+        Hashtable<EncodeHintType, Object> hints = new Hashtable<>();
+        hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);
+        hints.put(EncodeHintType.MARGIN, 1);
+        QRCodeWriter writer = new QRCodeWriter();
+        com.google.zxing.common.BitMatrix bitMatrix = writer.encode(text, BarcodeFormat.QR_CODE, size, size, hints);
+        BufferedImage image = MatrixToImageWriter.toBufferedImage(bitMatrix);
+        response.setContentType("image/png");
+        response.setHeader("Cache-Control", "public, max-age=3600");
+        ImageIO.write(image, "png", response.getOutputStream());
+    }
 }

web/product-intro/gut-testing.html

@@ -474,10 +474,10 @@ function fallbackNativePay(orderNo) {
           document.getElementById('orderForm').style.opacity = '0';
           showQrCode(data.data.codeUrl, orderNo);
         } else {
-      // 如果Native支付不可用，尝试H5支付
-      tryH5Pay(orderNo);
-    }
-  })
+          tryH5Pay(orderNo);
+        }
+      }
+    })
   .catch(function() {
     // 网络出错时尝试H5支付
     tryH5Pay(orderNo);
@@ -544,7 +544,7 @@ function showQrCode(codeUrl, orderNo) {
     '<h3 style="margin-bottom:0.5rem;font-size:1.1rem;">请使用微信扫码支付</h3>' +
     '<p style="font-size:0.85rem;color:#999;margin-bottom:1rem">订单号: ' + orderNo + '</p>' +
     '<div style="width:200px;height:200px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden">' +
-      '<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(codeUrl) + '" alt="支付二维码" style="width:200px;height:200px">' +
+      '<img src="/api/payment/qrcode?text=' + encodeURIComponent(codeUrl) + '" alt="支付二维码" style="width:200px;height:200px">' +
     '</div>' +
     '<p style="font-size:0.8rem;color:#999">打开微信「扫一扫」完成支付</p>' +
     '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer">关闭</button>' +
@@ -568,6 +568,7 @@ function showQrCode(codeUrl, orderNo) {
           '<p style="font-size:0.85rem;color:#999;margin-top:0.5rem">您的检测订单已提交，检测套件将在24小时内寄出</p>' +
           '<button onclick="this.closest(\'div[style]\').remove()" style="margin-top:1rem;padding:0.5rem 2rem;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;border:none;border-radius:8px;cursor:pointer">完成</button>' +
           '</div>';
+      }
     })
     .catch(function() {});
   }, 3000);