优化印度AI支付-修改H5页面、修改hmd服务中回调接口

sikey-hmd-business/.gitignore

@@ -52,7 +52,6 @@ npm-debug.log*
 yarn-error.log
 
 /coverage
-.idea
 yarn.lock
 package-lock.json
 *bak
@@ -77,7 +76,6 @@ sessionStore
 # 忽略所有的图片文件类型
 *.jpg
 *.jpeg
-*.png
 *.gif
 *.bmp
 *.tiff

sikey-hmd-business/sikey-hmd-business-biz/src/main/java/cn/sikey/hmd/controller/app/index/PaymentIndexController.java

@@ -20,11 +20,13 @@ import jakarta.servlet.http.HttpServletRequest;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
+import java.net.URI;
 import java.util.LinkedHashMap;
 import java.util.Map;
 import java.util.Objects;
@@ -173,11 +175,18 @@ public class PaymentIndexController {
     }
 
     @GetMapping("/razorpayIndex")
-    public String razorpayIndex(String imei, String languageType) {
+    public ResponseEntity<Void> razorpayIndex(String imei, String languageType) {
+        String publicDomain = "https://pay.tecanswer.com/h5/hmd/payment"; // 配置为公网域名
         if (StringUtils.isBlank(languageType) || StringUtils.equalsAnyIgnoreCase(languageType, "3")) {
-            return "redirect:razorpayIndiaIndex?imei=" + imei;
+            String redirectUrl = publicDomain + "/razorpayIndiaIndex?imei=" + imei;
+            return ResponseEntity.status(HttpStatus.SC_MOVED_TEMPORARILY)
+                    .location(URI.create(redirectUrl))
+                    .build();
         } else {
-            return "redirect:razorpayEnglishIndex?imei=" + imei;
+            String redirectUrl = publicDomain + "/razorpayEnglishIndex?imei=" + imei;
+            return ResponseEntity.status(HttpStatus.SC_MOVED_TEMPORARILY)
+                    .location(URI.create(redirectUrl))
+                    .build();
         }
 
     }
@@ -190,12 +199,14 @@ public class PaymentIndexController {
             price = PriceUtil.convertFenToYuan(plansRespVO.getPrice());
         }
         model.addAttribute("imei", imei);
-        model.addAttribute("serviceInfo", languageDictionaryService.getLanguageDictionary("3"));
+        //model.addAttribute("serviceInfo", languageDictionaryService.getLanguageDictionary("3"));
         //  model.addAttribute("pricingPlans", getAvailablePlans());
 
         model.addAttribute("yearPrice", price);
         // 年套餐
         model.addAttribute("validity", 1);
+        model.addAttribute("razorPayKey", "rzp_test_bwL1qbvhAdCZqw");
+
         // model.addAttribute("featureList", getFeatureComparison());
         // model.addAttribute("paymentMethods", Arrays.asList(new PaymentMethod("alipay", "支付宝", true), new PaymentMethod("wechat", "微信支付", false)));
 
@@ -218,12 +229,13 @@ public class PaymentIndexController {
             price = PriceUtil.convertFenToYuan(plansRespVO.getPrice());
         }
         model.addAttribute("imei", imei);
-        model.addAttribute("serviceInfo", languageDictionaryService.getLanguageDictionary("2"));
+        //model.addAttribute("serviceInfo", languageDictionaryService.getLanguageDictionary("2"));
         //  model.addAttribute("pricingPlans", getAvailablePlans());
 
         model.addAttribute("yearPrice", price);
         // 年套餐
         model.addAttribute("validity", 1);
+        model.addAttribute("razorPayKey", "rzp_test_bwL1qbvhAdCZqw");
         // model.addAttribute("featureList", getFeatureComparison());
         // model.addAttribute("paymentMethods", Arrays.asList(new PaymentMethod("alipay", "支付宝", true), new PaymentMethod("wechat", "微信支付", false)));
 

sikey-hmd-business/sikey-hmd-business-biz/src/main/java/cn/sikey/hmd/controller/app/razorpay/RazorpayPaymentCallBackController.java

@@ -8,9 +8,14 @@ import jakarta.servlet.http.HttpServletRequest;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.http.HttpStatus;
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
+import java.util.Map;
+import java.util.stream.Collectors;
+
 
 /**
  * @Author: nelson
@@ -18,7 +23,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
  * @Description: 网关
  */
 @Controller
-@RequestMapping("/pay/razorpay")
+@RequestMapping("/app-api/hmd/razorpay/call")
 @Slf4j
 public class RazorpayPaymentCallBackController {
 
@@ -33,12 +38,14 @@ public class RazorpayPaymentCallBackController {
      */
     @PostMapping("/tradeWapPayGateway")
     public String tradeWapPayGateway(HttpServletRequest request) {
-        CommonResult<Void> tradeWapPayGateway = razorpayApi.tradeWapPayGateway(request);
+        Map<String, String> paramsMap = request.getParameterMap().entrySet().stream().collect(Collectors.toMap(Map.Entry::getKey, entry -> String.join(",", entry.getValue())));
+        log.info("回调 进入 paramsMap:{}", paramsMap);
+        CommonResult<Void> tradeWapPayGateway = razorpayApi.tradeWapPayGateway(paramsMap);
         if (!tradeWapPayGateway.getCode().equals(HttpStatus.SC_OK)) {
             log.warn("[手机网站支付-razorpay]调用razorpay支付服务失败");
             throw new ServiceException(HttpStatus.SC_INTERNAL_SERVER_ERROR, "调用支付服务失败");
         }
-
+        log.info("回调 返回");
         return "razorpayResult";
     }
 

sikey-hmd-business/sikey-hmd-business-biz/src/main/resources/templates/index-bak.html

@@ -0,0 +1,1119 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title th:text="思奇智能AI助手">思奇智能AI助手</title>
+    <style>
+        :root {
+            --primary-color: #FF6B28;
+            --vip-color: #F5A623;
+            --border-color: #e0e0e0;
+        }
+
+        body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: url('/images/ai-background.png') no-repeat center;
+            background-size: cover;
+            background-position: center;
+            margin: 0;
+            line-height: 1.6;
+            position: relative; /* 为绝对定位子元素提供参照 */
+            /*z-index: 1000;*/
+            height: 610px;
+        }
+
+        /* 容器样式 */
+        .container {
+            /*max-width: 600px;*/
+            /*margin: -20% auto;*/
+            background: #F5F5F5;
+            border-radius: 15px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            /* overflow: hidden;*/
+            position: absolute;
+            top: 15%;
+            width: 100%;
+            height: 50%;
+            margin-top: 80%;
+        }
+
+        /* 页头区域 */
+        .header {
+            position: absolute;
+            /* width: 350px; */
+            /* height: 95px; */
+            /* top: 80px; */
+            /* left: 16px; */
+            border-radius: 13px 13px 4px 4px;
+            background: linear-gradient(135deg, #5689AF, #025E8E);
+            /* padding: 1.2rem; */
+            /* z-index: -10; */
+            /* box-sizing: border-box; */
+            /* margin-top: -160px; */
+        }
+
+
+        /* 渐变边框实现 */
+        .header::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            background: linear-gradient(135deg, #5689AF, #025E8E);
+            border-radius: inherit;
+            z-index: -1;
+        }
+
+        .branding {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            gap: 15px;
+        }
+
+        .robot-logo {
+            width: 100px;
+            height: 125px;
+            /*animation: float 3s ease-in-out infinite;*/
+            flex-shrink: 0;
+        }
+
+        .header-text {
+            margin-left: 1rem;
+            color: #FEDCC8;
+            text-align: left;
+        }
+
+        .header-text h1 {
+            font-size: 1.4rem;
+            margin: 0 0 0.3rem;
+            line-height: 1.2;
+        }
+
+        .header-text p {
+            font-size: 0.9rem;
+            margin: 0;
+            opacity: 0.9;
+        }
+
+        /* 价格对比模块 */
+        .price-cards {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 0.6rem;
+            padding: 1.0rem;
+            margin-top: -2%;
+            position: absolute;
+        }
+
+        .price-card {
+            position: relative;
+            padding: 0.8rem;
+            border-radius: 10px;
+            background: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            width: 140px;
+            height: 50px;
+            cursor: pointer;
+        }
+
+        .price-card.selected {
+            border: 2px solid #d96b32;
+            background-color: #ffe8e1;
+        }
+
+        .price-card .name {
+            font-weight: bold;
+            color: #333;
+        }
+
+        .price-card .price {
+            font-size: 1.2em;
+            color: #333;
+        }
+
+        /* 选中状态：名称和价格均橙色 */
+        .price-card.selected .name,
+        .price-card.selected .price {
+            color: #d96b32; /* 覆盖为橙色 */
+        }
+
+        .vip-badge {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            width: 40px;
+            height: 40px;
+        }
+
+        .redpacket-icon {
+            width: 30px;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        /* 功能对比表 */
+        .feature-grid {
+            display: grid;
+            /*grid-template-columns: 2fr repeat(3, 1fr);*/
+            /* gap: 1px; */
+            background: #FFFFFF;
+            margin: 0.6rem;
+            position: relative;
+            /* margin-top: -1%;
+            border-radius: 10px;
+             border: 1px solid #ccc;*/
+        }
+
+        .feature-grid_out {
+            display: grid;
+            grid-template-columns: 2fr repeat(2, 1fr);
+            gap: 1px;
+            background: #FFFFFF;
+            margin: 0.8rem;
+            position: relative;
+            margin-top: 28%;
+            border-radius: inherit;
+            height: 50%;
+        }
+
+        .grid-item {
+            /*padding: 1rem;*/
+            background: white;
+            /*display: flex;*/
+            align-items: center;
+            min-height: 50px;
+        }
+
+        .col-header {
+            font-weight: 600;
+            /*background: #f8f9fa;*/
+            border: none; /* 隐藏边框 */
+            box-shadow: none; /* 隐藏可能的盒子阴影 */
+            outline: none; /* 隐藏可能的轮廓线 */
+        }
+
+
+        .isHighlight {
+            color: #D1530B !important;
+            font-weight: 600;
+            position: relative;
+        }
+
+
+        /*.isHighlight::after {
+            content: none; !* 删除左侧指示条 *!
+        }*/
+
+        /* 支付方式 */
+        .payment-section {
+            padding: 0.6rem;
+            position: absolute;
+            height: -webkit-fill-available;
+            margin-top: 3%;
+        }
+
+        .payment-section-pay {
+            display: flex;
+            align-items: center;
+        }
+
+        /*.payment-logo {
+            width: 24px;
+            height: 24px;
+            transition: transform 0.3s ease;
+        }*/
+
+        .payment-logo:hover {
+            transform: scale(1.1);
+        }
+
+        /* 购买按钮 */
+        .buy-button {
+            /*display: block;
+            margin: 2rem auto;
+            width: 80%;
+            max-width: 300px;
+            transition: opacity 0.3s ease;*/
+            margin-left: 5%;
+        }
+
+        .buy-button img {
+            width: 100%;
+        }
+
+        .buy-button:hover {
+            opacity: 0.9;
+        }
+
+        .middle {
+            margin-top: -140px;
+            position: relative;
+        }
+
+        .middle_picture {
+            width: -webkit-fill-available;
+        }
+
+        .payment-section_div {
+            position: absolute;
+            display: grid;
+        }
+
+        .payment-section_picture {
+            margin-left: 2%;
+            margin-top: -2%;
+        }
+
+        .middle_red_envelope {
+            position: absolute;
+            bottom: 16px;
+            left: 10px; /* 可根据需要调整水平位置 */
+            z-index: 1; /* 确保红包图片位于背景图片上方 */
+        }
+
+        .text {
+            color: #c16c3f;
+            font-size: 16px;
+            position: absolute;
+            top: 8px;
+            left: 35px;
+            z-index: 1;
+        }
+
+        .price-card .name {
+            width: 72px;
+            height: 25px;
+            font-size: 18px;
+        }
+
+        .price-card .price {
+            font-weight: 500; /* 字重（中等） */
+            font-size: 18px; /* 字号 */
+            line-height: 1; /* 行高 = 100%（1倍字号） */
+            letter-spacing: 0; /* 字符间距 */
+        }
+
+        /* 动画效果 */
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        /* 支付方式选项样式 */
+        .pay-radio {
+            margin-bottom: 2px; /* 选项间距 */
+        }
+
+        .pay-radio span {
+            margin-left: 2%;
+        }
+
+        /* 单个支付选项 */
+        .pay-radio label {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            padding: 16px 24px;
+            /*border: 2px solid #e9ecef;*/
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: white;
+            width: -webkit-fill-available;
+        }
+
+        /* 图片尺寸控制 */
+        .payment-logo {
+            width: 7%;
+            height: 7%;
+            object-fit: contain;
+        }
+
+        /* 文字样式 */
+        /*.pay-radio input[type='radio'] {
+            display: none;
+        }*/
+
+        /* 交互状态 */
+        .pay-radio label:hover {
+            border-color: #1890ff;
+            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+        }
+
+        .pay-radio input:checked + label {
+            border-color: #1890ff;
+            background-color: #e6f4ff;
+        }
+
+        .payment-methods {
+            /*display: grid;*/
+            grid-template-columns: 2fr repeat(3, 1fr);
+            gap: 1px;
+            /*background: #FFFFFF;*/
+            /*margin: 0.8rem;*/
+            /*position: relative;
+            */
+
+            margin: 0.2rem;
+            width: 151%;
+            position: relative;
+            border-radius: inherit;
+        }
+
+        /*.payment-buy {
+            margin-top: 5%;
+            width: 90%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }*/
+
+        .container_agreement {
+            display: flex;
+            align-items: center;
+        }
+
+        .checkbox-container {
+            display: inline-flex;
+            vertical-align: middle; /* 固定垂直对齐方式 */
+            position: relative;
+            margin-right: 8px;
+        }
+
+        /* 自定义复选框视觉样式 */
+        .custom-checkbox {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%); /* 垂直居中 */
+            width: 16px;
+            height: 16px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            background: white;
+            transition: all 0.3s;
+        }
+
+        .checkbox {
+            margin-right: 10px;
+            position: relative;
+        }
+
+        .checkbox-container input[type="checkbox"] {
+            display: none;
+        }
+
+        .checkbox-container input[type="checkbox"] + .checked-label:before {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 1px solid #ccc;
+            border-radius: 3px;
+            margin-right: 5px;
+            position: relative;
+        }
+
+        .checkbox-container input[type="checkbox"]:checked + .checked-label:before {
+            content: "✔";
+            font-size: 14px;
+            color: #1E90FF;
+            text-align: center;
+            line-height: 16px;
+        }
+
+        .text_agreement {
+            color: #1E90FF; /* 蓝色字体 */
+        }
+
+        .container_agreement_font {
+            font-size: 10px;
+            font-family: Arial, sans-serif;
+            /*margin-left: auto;*/
+        }
+
+        .price-display {
+            flex: 1;
+            text-align: left;
+            font-size: 18px;
+            font-weight: bold;
+            color: white;
+            margin-left: -200px;
+            position: absolute;
+        }
+
+        .background-container {
+            /* 你可以根据需要设置背景图片或其他背景样式 */
+            /* 例如：background-image: url('your-background-image.jpg'); */
+            background-color: #005580;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            border-radius: 50px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 130%;
+            height: 20px;
+        }
+
+        .purchase-button {
+            background-color: #87CDFF;
+            border: none;
+            border-radius: 30px;
+            padding: 15px 25px;
+            font-size: 16px;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-right: -70%;
+        }
+
+        .pay-div {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            /*background-color: #f5f5f5;*/
+            padding: 10px;
+            border-radius: 8px;
+            margin-left: auto;
+        }
+
+        /*协议复选框*/
+        .container_agreement {
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin: 8px 0 8px 20%;
+        }
+
+        .checkbox-container {
+            margin-right: 10px;
+        }
+
+        .text_agreement {
+            color: #1890ff;
+            cursor: pointer;
+        }
+
+        /* 提示信息样式 */
+        .error-tip {
+            position: absolute;
+            bottom: -20px;
+            left: 30px;
+            color: #ff4d4f;
+            font-size: 12px;
+            display: none;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        /* 新增错误提示样式 */
+        .error-tip {
+            position: absolute;
+            bottom: 150px; /* 调整提示位置到协议上方 */
+            left: 0;
+            color: #ff4d4f;
+            font-size: 12px;
+            width: 210px;
+            white-space: pre-line; /* 允许换行显示多行错误 */
+            display: none;
+        }
+
+        .show-tip {
+            display: block;
+            animation: fadeIn 0.3s;
+        }
+
+        /* 新增价格样式 */
+        .price-display .price-number {
+            font-size: 22px; /* 价格字体大小 */
+            font-weight: bold;
+            color: white;
+        }
+
+        /* 新增价格样式 */
+        .price-card .price-number {
+            font-size: 22px; /* 价格字体大小 */
+            font-weight: bold;
+        }
+
+        /*.price-display .price-unit {
+            font-size: 14px;  !* 单位字体大小 *!
+            color: #666;
+        }*/
+
+
+        /* 新增动画效果 */
+        @keyframes modalSlideIn {
+            from {
+                transform: translateY(60px) scale(0.96);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+        }
+
+        .modal-content {
+            animation: modalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
+        }
+
+        /* 悬停效果 */
+        #copy-email:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(135, 205, 255, 0.4);
+        }
+
+        #copy-email {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #87CDFF, #5A8FEB);
+        }
+
+        #copy-email.copied {
+            background: #4CAF50 !important;
+        }
+
+        #copy-email.error {
+            background: #ff4444 !important;
+        }
+    </style>
+</head>
+<script src="/js/axios/axios.min.js"></script>
+<body>
+<div class="container" th:fragment="main">
+    <!-- 页头动态数据绑定 -->
+    <header class="header">
+        <!--<div class="branding">
+            <div class="header-text">
+                <h1 th:text="${serviceInfo.title}"></h1>
+                <p th:text="${serviceInfo.subtitle}"></p>
+            </div>
+            <img th:src="@{/images/助手机器人.png}" alt="AI助手" class="robot-logo">
+        </div>-->
+    </header>
+
+    <!--<div class="middle">
+        <img th:src="@{/images/开通终身服务超级划算背景.png}" alt="AI助手" class="middle_picture">
+        <div>
+            <img th:src="@{/images/红包.png}" alt="AI助手" class="middle_red_envelope">
+        </div>
+        <div class="text">开通终身服务超级划算</div>
+    </div>-->
+
+    <!-- 年套餐价格 -->
+    <input type="hidden" class="yearPrice" th:value="${yearPrice}"/>
+
+    <!--<section class="price-cards">
+        <div th:each="plan : ${pricingPlans}" class="price-card" onclick="selectPlan(this)">
+            <p>
+                <input type="hidden" class="priceCard" th:value="${plan.type}"/>
+                <span th:text="${plan.name}" class="name"></span>
+                <span th:text="${plan.price}" class="price price-number"></span>元
+            </p>
+        </div>
+    </section>-->
+
+    <!-- 功能对比表动态生成 -->
+    <!--<section class="feature-grid_out">
+        <th:block th:each="col : ${featureList}">
+            <div class="feature-grid">
+                <div class="grid-item col-header" th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
+                     th:text="${col.name}"></div>
+                <div th:each="detail : ${col.details}"
+                     class="grid-item"
+                     th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
+                     th:text="${detail.value}"></div>
+            </div>
+        </th:block>
+    </section>-->
+
+    <!--支付方式-->
+    <section class="payment-section">
+        <div class="payment-section-pay">
+            <div>
+                <img th:src="@{/images/付费方式前面的标志.png}" alt="AI助手">
+            </div>
+            <div class="payment-section_picture">付费方式</div>
+        </div>
+
+        <div class="payment-methods">
+            <div class="alipay-methods">
+                <div class="pay-radio">
+                    <label>
+                        <img th:src="@{/images/alipay-logo.png}"
+                             alt="支付方式"
+                             class="payment-logo">
+                        <span>支付宝支付</span>
+                        <div class="pay-div">
+                            <input type="radio" name="payment"
+                                   th:value="alipay"
+                                   th:checked="true">
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+            <!--<div>
+                <div class="pay-radio">
+                    <label>
+                        <img th:src="@{/images/wechat-logo.png}"
+                             alt="支付方式"
+                             class="payment-logo">
+                        <span>微信支付</span>
+                        <div class="pay-div">
+                            <input type="radio" name="payment"
+                                   th:value="wechat">
+                        </div>
+                    </label>
+                </div>
+            </div>-->
+
+            <div class="container_agreement">
+                <div class="checkbox-container">
+                    <input type="checkbox" id="agreement" class="checkbox">
+                    <label for="agreement" class="checked-label"></label>
+                </div>
+                <div class="container_agreement_font">我已阅读并同意<span
+                        class="text_agreement">《付费升级服务免责声明》</span></div>
+                <!-- 统一错误提示容器 -->
+                <div class="error-tip" id="errorTip"></div>
+            </div>
+        </div>
+
+        <!--<div class="payment-buy">
+            <div class="price-display">9.9元/年</div>
+            <div>
+                <a th:href="@{/order/create}" class="buy-button">
+                    <img th:src="@{/images/立即购买背景.png}"
+                         alt="立即购买">
+                </a>
+            </div>
+        </div>-->
+        <div class="background-container">
+            <div class="price-display"><span class="price-number"></span>元/年</div>
+            <button class="purchase-button" id="purchase-button">立即购买</button>
+        </div>
+        <input class="validity" type="hidden" th:value="${validity}"/>
+
+        <!-- 在background-container下方添加联系客服链接 -->
+        <div class="contact-service"
+             style="text-align: center; font-size: 10px;font-family: Arial, sans-serif;margin-left: 50%;margin-top: 1%;">
+            点击这里<a href="javascript:void(0)" id="contact-customer-service"
+                       style="color: #1E90FF; font-size: 10px;font-family: Arial, sans-serif;margin-top: 15px; text-decoration: underline;">联系客服</a>
+        </div>
+    </section>
+</div>
+
+
+<!-- 客服弹窗模态框 -->
+<div id="customer-service-modal" class="modal"
+     style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
+    <div class="modal-content"
+         style="background-color: #fff; margin: 15% auto; padding: 0; width: 340px; border-radius: 16px; overflow: hidden; position: relative;">
+        <!-- 顶部背景 -->
+        <div style="position: relative; height: 180px; margin-top: -40px; margin-bottom: -20px;z-index: 1;overflow: visible; ">
+            <img th:src="@{/images/child.png}" alt="背景" style="width: 50%;
+    height: 100px;
+    object-fit: contain;
+    position: relative;
+    z-index: 2;
+    margin-top: 15%;
+    margin-left: 26%;">
+            <!--<div class="stars" style="position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        pointer-events: none;">
+                <img th:src="@{/images/child.png}" alt="星星" style="width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.8;">
+            </div>-->
+        </div>
+
+        <!-- 内容区 -->
+        <div style="padding: 24px; margin-top: -20px; position: relative; z-index: 2;">
+            <div style="text-align: center; margin-bottom: 24px;">
+                <div style="color: #1876FD; font-size: 18px; font-weight: 500; margin-bottom: 8px;">
+                    service@sikey.com.cn
+                </div>
+                <div style="color: #474747; font-size: 12px;">请联系我们的客服邮箱</div>
+            </div>
+
+            <div style="display: flex; justify-content: center; position: relative; padding-bottom: 50px;">
+                <button id="copy-email" style="
+                    background: linear-gradient(135deg, #87CDFF, #5A8FEB);
+                    border: none;
+                    padding: 10px 32px;
+                    border-radius: 24px;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    box-shadow: 0 4px 12px rgba(135,205,255,0.3);
+                ">
+                    <!--<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8 4V16H18V4H8Z" stroke="white" stroke-width="2"/>
+                        <path d="M6 20H16V8H6V20Z" stroke="white" stroke-width="2"/>
+                    </svg>-->
+                    复制邮箱
+                </button>
+
+                <!-- 关闭按钮移动到复制按钮底部 -->
+                <div class="close-container" style="
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    margin-top: 20px;
+                ">
+                    <div style="
+                        background: #FFFFFF;
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                        cursor: pointer;
+                    ">
+                        <span class="close" style="
+                            color: #666;
+                            font-size: 24px;
+                            line-height: 1;
+                            margin-bottom: 4px;
+                        ">×</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 公共模板片段 -->
+<!--<div th:fragment="css-resource" th:remove="tag">
+    <link rel="stylesheet" th:href="@{/css/theme-${theme}.css}">
+</div>-->
+
+<!--<div th:fragment="scripts" th:remove="tag">
+    <script th:src="@{/js/payment-validation.js}"></script>
+</div>-->
+</body>
+
+<script>
+    // 获取选择的套餐
+    /*function selectPlan(clickedElement) {
+        // 1. 移除所有卡片的选中样式（通过删除 CSS 类名）
+        const allCards = document.querySelectorAll('.price-card');
+        allCards.forEach(card => card.classList.remove('selected'));
+
+        // 2. 为当前点击的卡片添加选中样式（通过添加 CSS 类名）
+        clickedElement.classList.add('selected');
+
+        // 3. 动态获取价格和服务类型，更新到价格显示区域
+        const price = clickedElement.querySelector('.price').textContent;
+        const serviceType = clickedElement.querySelector('.priceCard').value;
+
+        const priceInput = document.querySelector('.price-display-price');
+        priceInput.value = serviceType
+
+        const unit = serviceType == 1 ? '元/年' : '元/终身';
+        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
+        // priceDisplay.textContent = `${price}${unit}`;  // 使用 textContent 修改内容
+
+        // 使用模板字符串构建带样式的HTML
+        priceDisplay.innerHTML = `
+    <span class="price-number">${price}</span>
+    <span class="price-unit">${unit}</span>`;
+    }*/
+
+    // 定义获取付费方式的函数
+    function getSelectedPayment() {
+        const radios = document.getElementsByName('payment');
+        for (const radio of radios) {
+            if (radio.checked) {
+                return radio.value;
+            }
+        }
+        return null;
+    }
+
+    // 确保DOM加载完成
+    document.addEventListener("DOMContentLoaded", function () {
+        const purchaseButton = document.getElementById('purchase-button');
+        const errorTip = document.getElementById('errorTip');
+
+        const yearPrice = document.querySelector('.yearPrice').value;
+        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
+        // priceDisplay.textContent = `${yearPrice}`;  // 使用 textContent 修改内容
+        // 使用模板字符串构建带样式的HTML
+        priceDisplay.innerHTML = `
+    <span class="price-number">${yearPrice}</span>
+    <span class="price-unit">元/年</span>`;
+
+        // 表单验证函数
+        function validateForm() {
+            let errors = [];
+
+            // 1. 校验套餐选择
+            /*const selectedPlan = document.querySelector('.price-card.selected');
+            if (!selectedPlan) {
+                errors.push("请选择套餐类型（包年或终身服务）");
+            }*/
+
+            // 2. 校验支付方式
+            const paymentSelected = document.querySelector('input[name="payment"]:checked');
+            if (!paymentSelected) {
+                errors.push("请选择支付方式（支付宝或微信）");
+            }
+
+            // 3. 校验协议勾选
+            const agreementChecked = document.getElementById('agreement').checked;
+            if (!agreementChecked) {
+                errors.push("请阅读并同意《付费升级服务免责声明》");
+            }
+
+            // 显示/隐藏错误提示
+            if (errors.length > 0) {
+                errorTip.innerHTML = errors.join("\n"); // 用换行符分隔错误
+                errorTip.classList.add('show-tip');
+                return false;
+            } else {
+                errorTip.classList.remove('show-tip');
+                return true;
+            }
+        }
+
+
+        function handlePurchaseButtonClick(e) {
+            e.preventDefault(); // 阻止默认提交
+            if (!validateForm()) return;
+
+            const paymentMethod = getSelectedPayment();
+            if (paymentMethod) {
+                let path;
+
+                // 获取当前页面的完整 URL
+                const currentUrl = window.location.href;
+                // 创建 URL 对象
+                const urlObj = new URL(currentUrl);
+
+                // 获取查询参数对象
+                const params = new URLSearchParams(urlObj.search);
+                // 获取单个参数
+                const imei = params.get('imei');
+
+                const validity = document.querySelector('.validity').value;
+
+                if (paymentMethod === 'alipay') {
+                    path = "/app-api/hmd/alipay/alipayTradeWapPay";
+                    const pathWithDomain = urlObj.origin + path;
+                    const responseHtml = axios.get(pathWithDomain, {
+                        params: {
+                            validity: validity,
+                            deviceId: imei,
+                            subject: '思奇智能AI助手',
+                            merchantProjectApplication: '1:hmd:1'
+                        }
+                    }).then(response => {
+                        if (response.data.code !== 200) {
+                            const errorTip = document.getElementById('errorTip');
+                            errorTip.innerHTML = response.data.msg;
+                            errorTip.classList.add('show-tip');
+                            // 终身会员
+                            if (response.data.code == 9999) {
+                                window.location.reload();
+                            }
+                            return false;
+                        }
+                        const tempDiv = document.createElement('div');
+                        document.body.appendChild(tempDiv); // 先插入 DOM
+                        tempDiv.innerHTML = response.data.data;
+                        const form = tempDiv.querySelector('form');
+                        form.submit();
+                    }).catch(error => {
+                        // 处理请求错误
+                        console.error('请求出错:', error);
+                    });
+                } else if (paymentMethod === 'wechat') {
+                    path = "/app-api/hmd/wechat/payTransactionsH5";
+                    const pathWithDomain = urlObj.origin + path;
+                    const responseHtml = axios.get(pathWithDomain, {
+                        params: {
+                            validity: validity,
+                            deviceId: imei,
+                            description: '思奇智能AI助手',
+                            merchantProjectApplication: '1:hmd:2'
+                        }
+                    }).then(response => {
+                        if (response.data.code !== 200) {
+                            const errorTip = document.getElementById('errorTip');
+                            errorTip.innerHTML = response.data.msg;
+                            errorTip.classList.add('show-tip');
+                            // 终身会员
+                            if (response.data.code == 9999) {
+                                window.location.reload();
+                            }
+                            return false;
+                        }
+                        window.location.href = response.data.data
+                    }).catch(error => {
+                        // 处理请求错误
+                        console.error('请求出错:', error);
+                    });
+                }
+            } else {
+                alert('请先选择支付方式！');
+            }
+        }
+
+        if (purchaseButton) {
+            purchaseButton.addEventListener('click', handlePurchaseButtonClick);
+        }
+    });
+
+    /*协议复选框*/
+    /*const checkbox = document.getElementById('agreement');
+    const errorTip = document.getElementById('errorTip');*/
+
+    // 实时监听复选框状态
+    /*checkbox.addEventListener('change', function () {
+        toggleErrorTip(this.checked);
+    });*/
+
+    // 切换提示显示状态
+    /*function toggleErrorTip(isChecked) {
+        if (isChecked) {
+            errorTip.classList.remove('show-tip');
+        } else {
+            errorTip.classList.add('show-tip');
+        }
+    }*/
+
+    // 点击协议文字时自动勾选
+    document.querySelector('.text_agreement').addEventListener('click', function () {
+        const checkbox = document.getElementById('agreement');
+        checkbox.checked = !checkbox.checked;
+        checkbox.dispatchEvent(new Event('change')); // 触发校验
+
+        // 获取当前页面的完整 URL
+        const currentUrl = window.location.href;
+        // 创建 URL 对象
+        const urlObj = new URL(currentUrl);
+        window.location.href = urlObj.origin + "/h5/hmd/payment/agreement";
+    });
+
+    // 添加联系客服弹窗逻辑
+    const modal = document.getElementById('customer-service-modal');
+    const contactLink = document.getElementById('contact-customer-service');
+    const closeBtn = document.querySelector('.close');
+    const copyBtn = document.getElementById('copy-email');
+
+    // 打开弹窗
+    contactLink.onclick = function () {
+        modal.style.display = 'block';
+    }
+
+    // 关闭弹窗
+    closeBtn.onclick = function () {
+        modal.style.display = 'none';
+    }
+
+    // 点击外部区域关闭
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    }
+
+    // 复制功能
+    document.getElementById('copy-email').addEventListener('click', function () {
+        const email = 'service@sikey.com.cn';
+
+        // 现代浏览器方案
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(email)
+                .then(() => showCopyFeedback('✓ 已复制'))
+                .catch(() => fallbackCopy(email));
+        }
+        // 兼容旧版浏览器方案
+        else {
+            fallbackCopy(email);
+        }
+    });
+
+    // 显示复制反馈
+    function showCopyFeedback(message) {
+        const btn = document.getElementById('copy-email');
+        const originalHTML = btn.innerHTML;
+
+        btn.innerHTML = message;
+        btn.style.backgroundColor = '#4CAF50'; // 成功颜色
+
+        setTimeout(() => {
+            btn.innerHTML = originalHTML;
+            btn.style.backgroundColor = ''; // 恢复原色
+        }, 2000);
+    }
+
+    // 兼容旧浏览器的复制方案
+    function fallbackCopy(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';  // 避免滚动跳转
+        document.body.appendChild(textArea);
+        textArea.select();
+
+        try {
+            const successful = document.execCommand('copy');
+            if (successful) {
+                showCopyFeedback('✓ 已复制');
+            } else {
+                showErrorFeedback();
+            }
+        } catch (err) {
+            showErrorFeedback();
+        } finally {
+            document.body.removeChild(textArea);
+        }
+    }
+
+    // 显示错误提示
+    function showErrorFeedback() {
+        const btn = document.getElementById('copy-email');
+        btn.innerHTML = '⚠ 复制失败';
+        btn.style.backgroundColor = '#ff4444';
+
+        setTimeout(() => {
+            btn.innerHTML = `<svg...>复制邮箱</>`; // 恢复原始内容
+            btn.style.backgroundColor = '';
+        }, 2000);
+    }
+
+</script>
+</html>

sikey-hmd-business/sikey-hmd-business-biz/src/main/resources/templates/razorpayEnglishIndex-bak.html

@@ -0,0 +1,1302 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></title>
+    <style>
+        :root {
+            --primary-color: #FF6B28;
+            --vip-color: #F5A623;
+            --border-color: #e0e0e0;
+        }
+
+        body {
+            background: url(/images/indianPaymentBackground.png) no-repeat center;
+            background-size: cover;
+            background-position: center;
+            margin: 0;
+            line-height: 1.6;
+            position: relative;
+            /* z-index: 1000; */
+            height: 610px;
+        }
+
+        /* 容器样式 */
+        .container {
+            /* max-width: 600px; */
+            /* margin: -20% auto; */
+            background: #F5F5F5;
+            border-radius: 15px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            position: absolute;
+            top: 15%;
+            width: 380px;
+            height: 300px;
+            margin-top: 80%;
+        }
+
+        /* 页头区域 */
+        .header {
+            position: absolute;
+            /* width: 350px; */
+            /* height: 95px; */
+            /* top: 80px; */
+            /* left: 16px; */
+            border-radius: 13px 13px 4px 4px;
+            background: linear-gradient(135deg, #5689AF, #025E8E);
+            /* padding: 1.2rem; */
+            /* z-index: -10; */
+            /* box-sizing: border-box; */
+            /* margin-top: -160px; */
+        }
+
+
+        /* 渐变边框实现 */
+        .header::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            background: linear-gradient(135deg, #5689AF, #025E8E);
+            border-radius: inherit;
+            z-index: -1;
+        }
+
+        .branding {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            gap: 15px;
+        }
+
+        .robot-logo {
+            width: 100px;
+            height: 125px;
+            /*animation: float 3s ease-in-out infinite;*/
+            flex-shrink: 0;
+        }
+
+        .header-text {
+            margin-left: 1rem;
+            color: #FEDCC8;
+            text-align: left;
+        }
+
+        .header-text h1 {
+            font-size: 1.4rem;
+            margin: 0 0 0.3rem;
+            line-height: 1.2;
+        }
+
+        .header-text p {
+            font-size: 0.9rem;
+            margin: 0;
+            opacity: 0.9;
+        }
+
+        /* 价格对比模块 */
+        .price-cards {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 0.6rem;
+            padding: 1.0rem;
+            margin-top: -2%;
+            position: absolute;
+        }
+
+        .price-card {
+            position: relative;
+            padding: 0.8rem;
+            border-radius: 10px;
+            background: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            width: 140px;
+            height: 50px;
+            cursor: pointer;
+        }
+
+        .price-card.selected {
+            border: 2px solid #d96b32;
+            background-color: #ffe8e1;
+        }
+
+        .price-card .name {
+            font-weight: bold;
+            color: #333;
+        }
+
+        .price-card .price {
+            font-size: 1.2em;
+            color: #333;
+        }
+
+        /* 选中状态：名称和价格均橙色 */
+        .price-card.selected .name,
+        .price-card.selected .price {
+            color: #d96b32; /* 覆盖为橙色 */
+        }
+
+        .vip-badge {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            width: 40px;
+            height: 40px;
+        }
+
+        .redpacket-icon {
+            width: 30px;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        /* 功能对比表 */
+        .feature-grid {
+            display: grid;
+            /*grid-template-columns: 2fr repeat(3, 1fr);*/
+            /* gap: 1px; */
+            background: #FFFFFF;
+            margin: 0.6rem;
+            position: relative;
+            /* margin-top: -1%;
+            border-radius: 10px;
+             border: 1px solid #ccc;*/
+        }
+
+        .feature-grid_out {
+            display: grid;
+            grid-template-columns: 2fr repeat(2, 1fr);
+            gap: 1px;
+            background: #FFFFFF;
+            margin: 0.8rem;
+            position: relative;
+            margin-top: 28%;
+            border-radius: inherit;
+            height: 50%;
+        }
+
+        .grid-item {
+            /*padding: 1rem;*/
+            background: white;
+            /*display: flex;*/
+            align-items: center;
+            min-height: 50px;
+        }
+
+        .col-header {
+            font-weight: 600;
+            /*background: #f8f9fa;*/
+            border: none; /* 隐藏边框 */
+            box-shadow: none; /* 隐藏可能的盒子阴影 */
+            outline: none; /* 隐藏可能的轮廓线 */
+        }
+
+
+        .isHighlight {
+            color: #D1530B !important;
+            font-weight: 600;
+            position: relative;
+        }
+
+
+        /*.isHighlight::after {
+            content: none; !* 删除左侧指示条 *!
+        }*/
+
+        /* 支付方式 */
+        .payment-section {
+            padding: 0.6rem;
+            position: absolute;
+            height: -webkit-fill-available;
+            margin-top: 3%;
+        }
+
+        .payment-section-pay {
+            display: flex;
+            align-items: center;
+        }
+
+        /*.payment-logo {
+            width: 24px;
+            height: 24px;
+            transition: transform 0.3s ease;
+        }*/
+
+        .payment-logo:hover {
+            transform: scale(1.1);
+        }
+
+        /* 购买按钮 */
+        .buy-button {
+            /*display: block;
+            margin: 2rem auto;
+            width: 80%;
+            max-width: 300px;
+            transition: opacity 0.3s ease;*/
+            margin-left: 5%;
+        }
+
+        .buy-button img {
+            width: 100%;
+        }
+
+        .buy-button:hover {
+            opacity: 0.9;
+        }
+
+        .middle {
+            margin-top: -140px;
+            position: relative;
+        }
+
+        .middle_picture {
+            width: -webkit-fill-available;
+        }
+
+        .payment-section_div {
+            position: absolute;
+            display: grid;
+        }
+
+        .payment-section_picture {
+            margin-left: 2%;
+            margin-top: -2%;
+            color: #474747;
+            font-size: larger;
+        }
+
+        .middle_red_envelope {
+            position: absolute;
+            bottom: 16px;
+            left: 10px; /* 可根据需要调整水平位置 */
+            z-index: 1; /* 确保红包图片位于背景图片上方 */
+        }
+
+        .text {
+            color: #c16c3f;
+            font-size: 16px;
+            position: absolute;
+            top: 8px;
+            left: 35px;
+            z-index: 1;
+        }
+
+        .price-card .name {
+            width: 72px;
+            height: 25px;
+            font-size: 18px;
+        }
+
+        .price-card .price {
+            font-weight: 500; /* 字重（中等） */
+            font-size: 18px; /* 字号 */
+            line-height: 1; /* 行高 = 100%（1倍字号） */
+            letter-spacing: 0; /* 字符间距 */
+        }
+
+        /* 动画效果 */
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        /* 支付方式选项样式 */
+        .pay-radio {
+            margin-bottom: 2px; /* 选项间距 */
+        }
+
+        .pay-radio span {
+            margin-left: 2%;
+        }
+
+        /* 单个支付选项 */
+        .pay-radio label {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            padding: 16px 24px;
+            /*border: 2px solid #e9ecef;*/
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: white;
+            width: -webkit-fill-available;
+        }
+
+        /* 图片尺寸控制 */
+        .payment-logo {
+            width: 155px;
+            height: 33px;
+            object-fit: contain;
+        }
+
+        /* 文字样式 */
+        /*.pay-radio input[type='radio'] {
+            display: none;
+        }*/
+
+        /* 交互状态 */
+        .pay-radio label:hover {
+            border-color: #1890ff;
+            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+        }
+
+        .pay-radio input:checked + label {
+            border-color: #1890ff;
+            background-color: #e6f4ff;
+        }
+
+        .payment-methods {
+            /*display: grid;*/
+            grid-template-columns: 2fr repeat(3, 1fr);
+            gap: 1px;
+            /*background: #FFFFFF;*/
+            /*margin: 0.8rem;*/
+            /*position: relative;
+            */
+
+            margin: 0.2rem;
+            width: 151%;
+            position: relative;
+            border-radius: inherit;
+        }
+
+        /*.payment-buy {
+            margin-top: 5%;
+            width: 90%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }*/
+
+        .container_agreement {
+            display: flex;
+            align-items: center;
+        }
+
+        .checkbox-container {
+            display: inline-flex;
+            vertical-align: middle; /* 固定垂直对齐方式 */
+            position: relative;
+            margin-right: 8px;
+        }
+
+        /* 自定义复选框视觉样式 */
+        .custom-checkbox {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%); /* 垂直居中 */
+            width: 16px;
+            height: 16px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            background: white;
+            transition: all 0.3s;
+        }
+
+        .checkbox {
+            margin-right: 10px;
+            position: relative;
+        }
+
+        .checkbox-container input[type="checkbox"] {
+            display: none;
+        }
+
+        .checkbox-container input[type="checkbox"] + .checked-label:before {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 1px solid #ccc;
+            border-radius: 3px;
+            margin-right: 5px;
+            position: relative;
+        }
+
+        .checkbox-container input[type="checkbox"]:checked + .checked-label:before {
+            content: "✔";
+            font-size: 14px;
+            color: #1E90FF;
+            text-align: center;
+            line-height: 16px;
+        }
+
+        .text_agreement {
+            color: #1E90FF; /* 蓝色字体 */
+        }
+
+        .container_agreement_font {
+            font-size: 10px;
+            font-family: Arial, sans-serif;
+            /*margin-left: auto;*/
+        }
+
+        .price-display {
+            flex: 1;
+            text-align: left;
+            font-size: 18px;
+            font-weight: bold;
+            color: white;
+            margin-left: -200px;
+            position: absolute;
+        }
+
+        .background-container {
+            background-color: #005580;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            border-radius: 50px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 310px;
+            height: 20px;
+            margin-top: 20px;
+            margin-left: 5px;
+        }
+
+        .purchase-button {
+            background-color: #87CDFF;
+            border: none;
+            border-radius: 30px;
+            padding: 15px 25px;
+            font-size: 16px;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-right: -70%;
+        }
+
+        .pay-div {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            /*background-color: #f5f5f5;*/
+            padding: 10px;
+            border-radius: 8px;
+            margin-left: auto;
+        }
+
+        /*协议复选框*/
+        .container_agreement {
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin: 8px 0 8px 20%;
+        }
+
+        .checkbox-container {
+            margin-right: 10px;
+        }
+
+        .text_agreement {
+            color: #1890ff;
+            cursor: pointer;
+        }
+
+        /* 提示信息样式 */
+        .error-tip {
+            position: absolute;
+            bottom: -20px;
+            left: 30px;
+            color: #ff4d4f;
+            font-size: 12px;
+            display: none;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        /* 新增错误提示样式 */
+        .error-tip {
+            position: absolute;
+            bottom: 150px;
+            left: 0;
+            color: red;
+            font-size: 12px;
+            width: 210px;
+            white-space: pre-line;
+            display: none;
+            margin-left: 150px;
+            margin-bottom: 130px;
+        }
+
+        .show-tip {
+            display: block;
+            animation: fadeIn 0.3s;
+        }
+
+        /* 新增价格样式 */
+        .price-display .price-number {
+            font-size: 22px; /* 价格字体大小 */
+            font-weight: bold;
+            color: white;
+        }
+
+        /* 新增价格样式 */
+        .price-card .price-number {
+            font-size: 22px; /* 价格字体大小 */
+            font-weight: bold;
+        }
+
+        .price-display .price-unit {
+            font-size: 14px;
+            color: #666;
+        }
+
+
+        /* 新增动画效果 */
+        @keyframes modalSlideIn {
+            from {
+                transform: translateY(60px) scale(0.96);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+        }
+
+        .modal-content {
+            animation: modalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
+        }
+
+        /* 悬停效果 */
+        #copy-email:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(135, 205, 255, 0.4);
+        }
+
+        #copy-email {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #87CDFF, #5A8FEB);
+        }
+
+        #copy-email.copied {
+            background: #4CAF50 !important;
+        }
+
+        #copy-email.error {
+            background: #ff4444 !important;
+        }
+
+        /* Flexbox方案 */
+        .benefit-item {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 85px;
+            margin-top: 50px;
+            margin-left: 26px;
+        }
+
+        .benefit-item2 {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 85px;
+            margin-top: 50px;
+            margin-left: 105px;
+        }
+
+        .benefit-item3 {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 85px;
+            margin-top: 50px;
+            margin-left: 202px;
+        }
+
+        /* 文字样式 */
+        .benefit-main {
+            font-size: 10px;
+            font-weight: 700;
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+
+        .benefit-sub {
+            font-size: 8px; /* 缩小副标题文字 */
+            color: #7f8c8d;
+            line-height: 1.5;
+        }
+
+        .benefit-icon img {
+            width: 36px; /* 缩小图片尺寸 */
+            height: 36px; /* 缩小图片尺寸 */
+            object-fit: contain;
+        }
+
+        .benefit-content{
+            margin-left: 10px;
+        }
+    </style>
+</head>
+<script src="/js/axios/axios.min.js"></script>
+
+<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
+
+<body>
+<!-- 页头动态数据绑定 -->
+<div style="position: absolute">
+    <div style="width: 220px;margin-top: 30px;margin-left: 23px;color: #699DF8;font-size: 20px;font-weight: bold;background: linear-gradient(90deg, #00aaff, #0066ff, #00aaff);-webkit-background-clip: text;background-clip: text;text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);"
+         th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></div>
+    <div style="width: 250px;
+    margin-left: 8px;
+    color: #699DF8;
+    font-size: 16px;
+    font-weight: bold;"
+         th:text="${serviceInfo.get('now_connected_to_deepseek_large_model')}"></div>
+</div>
+<div style="
+    position: absolute;
+    top: 220px;
+    left: 186px;
+    width: 300px;
+    height: 200px;
+    background-color: #025E8E;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    z-index: 50;
+    margin-top: -120px;
+    margin-left: -175px;
+    display: block;
+    "></div>
+<div style="
+    position: absolute;
+    height: 10px;
+    color: #699DF8;
+    font-size: 16px;
+    color: #f8f9fa;
+    font-weight: bold;
+    z-index: 100;
+    margin-top: 110px;
+    margin-left: 36px;" th:text="${serviceInfo.get('annual_service_vip')}">
+</div>
+<div style="position: absolute;
+    z-index: 100;
+    margin-top: 8%;
+    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt=""/>
+</div>
+<div style="
+    position: absolute;
+    z-index: 100;
+    margin-top: 140px;
+    margin-left: 30px;
+    background-color: #FFFFFF;
+    border-radius: 10px;
+    width: 319px;
+    height: 190px;
+    ">
+    <div style="position: absolute;display: flex;"><img style="
+    position: absolute;
+    width: 300px;
+    height: 176px;
+    border-radius: 10px;
+    background-clip: padding-box;
+    background-color: #ffffff;
+    border: 1px solid #9FB7CC;
+    margin-left: 10px;
+    margin-top: 7px;
+    " th:src="@{/images/rectangle20.png}" alt=""/>
+        <img style="
+    position: absolute;
+    width: 270px;
+    height: 32px;
+    margin-left: 30px;" th:src="@{/images/rectangle18.png}" alt=""/>
+    </div>
+    <div style="
+    position: absolute;
+    height: 10px;
+    font-size: 16px;
+    color: #FFFFFF;
+    font-weight: bold;
+    z-index: 100;
+    margin-top: 5px;
+    margin-left: 70px;
+    " th:text="${serviceInfo.get('enjoy_three_premium_benefits')}">
+    </div>
+    <!-- 语音调用 -->
+    <div class="benefit-item">
+        <div class="benefit-icon">
+            <img style="margin-left: -10px" th:src="@{/images/group1.png}" alt=""/>
+        </div>
+        <div class="benefit-content">
+            <div class="benefit-main" th:text="${serviceInfo.get('voice_call')}"></div>
+            <div class="benefit-sub" th:text="${serviceInfo.get('global_voice_scheduling')}"></div>
+        </div>
+    </div>
+    <!-- 智能服务 -->
+    <div class="benefit-item2">
+        <div class="benefit-icon">
+            <img style="margin-left: -20px" th:src="@{/images/group2.png}" alt=""/>
+        </div>
+        <div class="benefit-content">
+            <div class="benefit-main" th:text="${serviceInfo.get('smart_service')}"></div>
+            <div class="benefit-sub" th:text="${serviceInfo.get('worry_free_accurate_recognition')}"></div>
+        </div>
+    </div>
+    <!-- AI会话 -->
+    <div class="benefit-item3">
+        <div style="margin-right: 30px;" class="benefit-icon">
+            <img th:src="@{/images/group3.png}" alt=""/>
+        </div>
+        <div class="benefit-content">
+            <div style="margin-left:15px;" class="benefit-main" th:text="${serviceInfo.get('ai_session')}"></div>
+            <div style="width: 111px;" class="benefit-sub"
+                 th:text="${serviceInfo.get('powerful_computing_support')}"></div>
+        </div>
+    </div>
+</div>
+
+<div class="container" th:fragment="main">
+    <!--<div class="middle">
+        <img th:src="@{/images/开通终身服务超级划算背景.png}" alt="AI助手" class="middle_picture">
+        <div>
+            <img th:src="@{/images/红包.png}" alt="AI助手" class="middle_red_envelope">
+        </div>
+        <div class="text">开通终身服务超级划算</div>
+    </div>-->
+
+    <!-- 年套餐价格 -->
+    <input type="hidden" class="yearPrice" th:value="${yearPrice}"/>
+
+    <!--<section class="price-cards">
+        <div th:each="plan : ${pricingPlans}" class="price-card" onclick="selectPlan(this)">
+            <p>
+                <input type="hidden" class="priceCard" th:value="${plan.type}"/>
+                <span th:text="${plan.name}" class="name"></span>
+                <span th:text="${plan.price}" class="price price-number"></span>元
+            </p>
+        </div>
+    </section>-->
+
+    <!-- 功能对比表动态生成 -->
+    <!--<section class="feature-grid_out">
+        <th:block th:each="col : ${featureList}">
+            <div class="feature-grid">
+                <div class="grid-item col-header" th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
+                     th:text="${col.name}"></div>
+                <div th:each="detail : ${col.details}"
+                     class="grid-item"
+                     th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
+                     th:text="${detail.value}"></div>
+            </div>
+        </th:block>
+    </section>-->
+
+    <div class="error-tip" id="errorTip"></div>
+
+    <!--支付方式-->
+    <section class="payment-section">
+        <div class="payment-section-pay">
+            <div>
+                <img th:src="@{/images/付费方式前面的标志.png}" alt="">
+            </div>
+            <div class="payment-section_picture" th:text="${serviceInfo.get('pay')}"></div>
+        </div>
+
+        <div class="payment-methods">
+            <div class="alipay-methods">
+                <div class="pay-radio">
+                    <label>
+                        <img th:src="@{/images/razorpay.png}"
+                             alt="pay type"
+                             class="payment-logo">
+                        <!--<span>razorpay</span>-->
+                        <div class="pay-div">
+                            <input type="radio" name="payment"
+                                   th:value="razorpay"
+                                   th:checked="true">
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+            <!--<div class="payment-methods">
+                <div class="alipay-methods">
+                    <div class="pay-radio">
+                        <label>
+                            <img th:src="@{/images/alipay-logo.png}"
+                                 alt="支付方式"
+                                 class="payment-logo">
+                            <span>支付宝支付</span>
+                            <div class="pay-div">
+                                <input type="radio" name="payment"
+                                       th:value="alipay"
+                                       th:checked="true">
+                            </div>
+                        </label>
+                    </div>
+                </div>-->
+
+            <!--<div>
+                <div class="pay-radio">
+                    <label>
+                        <img th:src="@{/images/wechat-logo.png}"
+                             alt="支付方式"
+                             class="payment-logo">
+                        <span>微信支付</span>
+                        <div class="pay-div">
+                            <input type="radio" name="payment"
+                                   th:value="wechat">
+                        </div>
+                    </label>
+                </div>
+            </div>-->
+
+            <!--<div class="container_agreement">
+                <div class="checkbox-container">
+                    <input type="checkbox" id="agreement" class="checkbox">
+                    <label for="agreement" class="checked-label"></label>
+                </div>
+                <div class="container_agreement_font"  th:text="'我已阅读并同意'+${'《付费升级服务免责声明》'}"></div>
+                <div class="error-tip" id="errorTip"></div>
+            </div>-->
+
+        </div>
+
+        <!--<div class="payment-buy">
+            <div class="price-display">9.9元/年</div>
+            <div>
+                <a th:href="@{/order/create}" class="buy-button">
+                    <img th:src="@{/images/立即购买背景.png}"
+                         alt="立即购买">
+                </a>
+            </div>
+        </div>-->
+        <div class="background-container">
+            <div class="price-display"><span class="price-number" th:text="${yearPrice}"></span><span class="price-unit"
+                                                                                                      th:text="${serviceInfo.get('unit')}"></span>
+            </div>
+            <button class="purchase-button" id="purchase-button" th:text="${serviceInfo.get('buy_now')}"></button>
+        </div>
+        <input class="validity" type="hidden" th:value="${validity}"/>
+        <input class="siqi_smart_ai_assistant" type="hidden" th:value="${serviceInfo.get('siqi_smart_ai_assistant')}"/>
+
+        <!-- 在background-container下方添加联系客服链接 -->
+        <!--<div class="contact-service"
+             style="text-align: center; font-size: 10px;font-family: Arial, sans-serif;margin-left: 50%;margin-top: 1%;">
+            点击这里<a href="javascript:void(0)" id="contact-customer-service"
+                       style="color: #1E90FF; font-size: 10px;font-family: Arial, sans-serif;margin-top: 15px; text-decoration: underline;">联系客服</a>
+        </div>-->
+    </section>
+</div>
+
+
+<!-- 客服弹窗模态框 -->
+<div id="customer-service-modal" class="modal"
+     style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
+    <div class="modal-content"
+         style="background-color: #fff; margin: 15% auto; padding: 0; width: 340px; border-radius: 16px; overflow: hidden; position: relative;">
+        <!-- 顶部背景 -->
+        <div style="position: relative; height: 180px; margin-top: -40px; margin-bottom: -20px;z-index: 1;overflow: visible; ">
+            <img th:src="@{/images/child.png}" alt="背景" style="width: 50%;
+    height: 100px;
+    object-fit: contain;
+    position: relative;
+    z-index: 2;
+    margin-top: 15%;
+    margin-left: 26%;">
+            <!--<div class="stars" style="position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        pointer-events: none;">
+                <img th:src="@{/images/child.png}" alt="星星" style="width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.8;">
+            </div>-->
+        </div>
+
+        <!-- 内容区 -->
+        <div style="padding: 24px; margin-top: -20px; position: relative; z-index: 2;">
+            <div style="text-align: center; margin-bottom: 24px;">
+                <div style="color: #1876FD; font-size: 18px; font-weight: 500; margin-bottom: 8px;">
+                    service@sikey.com.cn
+                </div>
+                <div style="color: #474747; font-size: 12px;">请联系我们的客服邮箱</div>
+            </div>
+
+            <div style="display: flex; justify-content: center; position: relative; padding-bottom: 50px;">
+                <button id="copy-email" style="
+                    background: linear-gradient(135deg, #87CDFF, #5A8FEB);
+                    border: none;
+                    padding: 10px 32px;
+                    border-radius: 24px;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    box-shadow: 0 4px 12px rgba(135,205,255,0.3);
+                ">
+                    <!--<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8 4V16H18V4H8Z" stroke="white" stroke-width="2"/>
+                        <path d="M6 20H16V8H6V20Z" stroke="white" stroke-width="2"/>
+                    </svg>-->
+                    复制邮箱
+                </button>
+
+                <!-- 关闭按钮移动到复制按钮底部 -->
+                <div class="close-container" style="
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    margin-top: 20px;
+                ">
+                    <div style="
+                        background: #FFFFFF;
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                        cursor: pointer;
+                    ">
+                        <span class="close" style="
+                            color: #666;
+                            font-size: 24px;
+                            line-height: 1;
+                            margin-bottom: 4px;
+                        ">×</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 公共模板片段 -->
+<!--<div th:fragment="css-resource" th:remove="tag">
+    <link rel="stylesheet" th:href="@{/css/theme-${theme}.css}">
+</div>-->
+
+<!--<div th:fragment="scripts" th:remove="tag">
+    <script th:src="@{/js/payment-validation.js}"></script>
+</div>-->
+</body>
+
+<script>
+    // 获取选择的套餐
+    /*function selectPlan(clickedElement) {
+        // 1. 移除所有卡片的选中样式（通过删除 CSS 类名）
+        const allCards = document.querySelectorAll('.price-card');
+        allCards.forEach(card => card.classList.remove('selected'));
+
+        // 2. 为当前点击的卡片添加选中样式（通过添加 CSS 类名）
+        clickedElement.classList.add('selected');
+
+        // 3. 动态获取价格和服务类型，更新到价格显示区域
+        const price = clickedElement.querySelector('.price').textContent;
+        const serviceType = clickedElement.querySelector('.priceCard').value;
+
+        const priceInput = document.querySelector('.price-display-price');
+        priceInput.value = serviceType
+
+        const unit = serviceType == 1 ? '元/年' : '元/终身';
+        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
+        // priceDisplay.textContent = `${price}${unit}`;  // 使用 textContent 修改内容
+
+        // 使用模板字符串构建带样式的HTML
+        priceDisplay.innerHTML = `
+    <span class="price-number">${price}</span>
+    <span class="price-unit">${unit}</span>`;
+    }*/
+
+    // 定义获取付费方式的函数
+    function getSelectedPayment() {
+        const radios = document.getElementsByName('payment');
+        for (const radio of radios) {
+            if (radio.checked) {
+                return radio.value;
+            }
+        }
+        return null;
+    }
+
+    // 确保DOM加载完成
+    document.addEventListener("DOMContentLoaded", function () {
+        const purchaseButton = document.getElementById('purchase-button');
+        const errorTip = document.getElementById('errorTip');
+
+        /*const yearPrice = document.querySelector('.yearPrice').value;
+        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
+        // priceDisplay.textContent = `${yearPrice}`;  // 使用 textContent 修改内容
+        // 使用模板字符串构建带样式的HTML
+        priceDisplay.innerHTML = `
+    <span class="price-number" th:text="${yearPrice}"></span>
+    <span class="price-unit" th:text="${serviceInfo.get("unit")}"></span>`;*/
+
+        // 表单验证函数
+        function validateForm() {
+            let errors = [];
+
+            // 1. 校验套餐选择
+            /*const selectedPlan = document.querySelector('.price-card.selected');
+            if (!selectedPlan) {
+                errors.push("请选择套餐类型（包年或终身服务）");
+            }*/
+
+            // 2. 校验支付方式
+            /*const paymentSelected = document.querySelector('input[name="payment"]:checked');
+            if (!paymentSelected) {
+                errors.push("请选择支付方式（支付宝或微信）");
+            }
+
+            // 3. 校验协议勾选
+            const agreementChecked = document.getElementById('agreement').checked;
+            if (!agreementChecked) {
+                errors.push("请阅读并同意《付费升级服务免责声明》");
+            }*/
+
+            // 显示/隐藏错误提示
+            if (errors.length > 0) {
+                errorTip.innerHTML = errors.join("\n"); // 用换行符分隔错误
+                errorTip.classList.add('show-tip');
+                return false;
+            } else {
+                errorTip.classList.remove('show-tip');
+                return true;
+            }
+        }
+
+
+        function handlePurchaseButtonClick(e) {
+            /*e.preventDefault(); // 阻止默认提交
+            if (!validateForm()) return;*/
+
+            const paymentMethod = getSelectedPayment();
+            if (paymentMethod) {
+                let path;
+
+                // 获取当前页面的完整 URL
+                const currentUrl = window.location.href;
+                // 创建 URL 对象
+                const urlObj = new URL(currentUrl);
+
+                // 获取查询参数对象
+                const params = new URLSearchParams(urlObj.search);
+                // 获取单个参数
+                const imei = params.get('imei');
+
+                const validity = document.querySelector('.validity').value;
+                const siqiSmartAiAssistant = document.querySelector('.siqi_smart_ai_assistant').value;
+
+                if (paymentMethod === 'razorpay') {
+                    path = "/app-api/hmd/razorpay/razorpayTradeWapPay";
+                    const pathWithDomain = urlObj.origin + path;
+                    const responseHtml = axios.get(pathWithDomain, {
+                        params: {
+                            validity: validity,
+                            deviceId: imei,
+                            subject: siqiSmartAiAssistant,
+                            merchantProjectApplication: '1:hmd:3'
+                        }
+                    }).then(response => {
+                        if (response.data.code !== 200) {
+                            const errorTip = document.getElementById('errorTip');
+                            errorTip.innerHTML = "Unknow Error";
+                            errorTip.classList.add('show-tip');
+                            return false;
+                        }
+
+                        // razorpay
+                        var options = {
+                            "key": "rzp_test_bwL1qbvhAdCZqw", // Enter the Key ID generated from the Dashboard
+                            "amount": response.data.data.amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
+                            "currency": "INR",
+                            "name": siqiSmartAiAssistant, //your business name
+                            "description": "Test Transaction",
+                            "image": "https://example.com/your_logo",
+                            "order_id": response.data.data.outTradeNo, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
+                            "callback_url": "https://pay.tecanswer.com/app-api/pay/razorpay/tradeWapPayGateway",
+                            "redirect": true,
+                            "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
+                                "name": "Gaurav Kumar", //your customer's name
+                                "email": "gaurav.kumar@example.com",
+                                "contact": "9000090000" //Provide the customer's phone number for better conversion rates
+                            },
+                            "notes": {
+                                "address": "Razorpay Corporate Office"
+                            },
+                            "theme": {
+                                "color": "#3399cc"
+                            }
+                        };
+
+                        var rzp1 = new Razorpay(options);
+                        rzp1.open();
+                        e.preventDefault();
+
+                        /*const tempDiv = document.createElement('div');
+                        document.body.appendChild(tempDiv); // 先插入 DOM
+                        tempDiv.innerHTML = response.data.data;
+                        const form = tempDiv.querySelector('form');
+                        form.submit();*/
+                    }).catch(error => {
+                        // 处理请求错误
+                        console.error('请求出错:', error);
+                    });
+                }
+            } else {
+                alert('请先选择支付方式！');
+            }
+        }
+
+        if (purchaseButton) {
+            purchaseButton.addEventListener('click', handlePurchaseButtonClick);
+        }
+    });
+
+    /*协议复选框*/
+    /*const checkbox = document.getElementById('agreement');
+    const errorTip = document.getElementById('errorTip');*/
+
+    // 实时监听复选框状态
+    /*checkbox.addEventListener('change', function () {
+        toggleErrorTip(this.checked);
+    });*/
+
+    // 切换提示显示状态
+    /*function toggleErrorTip(isChecked) {
+        if (isChecked) {
+            errorTip.classList.remove('show-tip');
+        } else {
+            errorTip.classList.add('show-tip');
+        }
+    }*/
+
+    // 点击协议文字时自动勾选
+    /*document.querySelector('.text_agreement').addEventListener('click', function () {
+        const checkbox = document.getElementById('agreement');
+        checkbox.checked = !checkbox.checked;
+        checkbox.dispatchEvent(new Event('change')); // 触发校验
+
+        // 获取当前页面的完整 URL
+        const currentUrl = window.location.href;
+        // 创建 URL 对象
+        const urlObj = new URL(currentUrl);
+        window.location.href = urlObj.origin + "/h5/hmd/payment/agreement";
+    });*/
+
+    // 添加联系客服弹窗逻辑
+    const modal = document.getElementById('customer-service-modal');
+    const contactLink = document.getElementById('contact-customer-service');
+    const closeBtn = document.querySelector('.close');
+    const copyBtn = document.getElementById('copy-email');
+
+    // 打开弹窗
+    /*contactLink.onclick = function () {
+        modal.style.display = 'block';
+    }*/
+
+    // 关闭弹窗
+    /*closeBtn.onclick = function () {
+        modal.style.display = 'none';
+    }*/
+
+    // 点击外部区域关闭
+    /*window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    }*/
+
+    // 复制功能
+    /*document.getElementById('copy-email').addEventListener('click', function () {
+        const email = 'service@sikey.com.cn';
+
+        // 现代浏览器方案
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(email)
+                .then(() => showCopyFeedback('✓ 已复制'))
+                .catch(() => fallbackCopy(email));
+        }
+        // 兼容旧版浏览器方案
+        else {
+            fallbackCopy(email);
+        }
+    });*/
+
+    // 显示复制反馈
+    function showCopyFeedback(message) {
+        const btn = document.getElementById('copy-email');
+        const originalHTML = btn.innerHTML;
+
+        btn.innerHTML = message;
+        btn.style.backgroundColor = '#4CAF50'; // 成功颜色
+
+        setTimeout(() => {
+            btn.innerHTML = originalHTML;
+            btn.style.backgroundColor = ''; // 恢复原色
+        }, 2000);
+    }
+
+    // 兼容旧浏览器的复制方案
+    function fallbackCopy(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';  // 避免滚动跳转
+        document.body.appendChild(textArea);
+        textArea.select();
+
+        try {
+            const successful = document.execCommand('copy');
+            if (successful) {
+                showCopyFeedback('✓ 已复制');
+            } else {
+                showErrorFeedback();
+            }
+        } catch (err) {
+            showErrorFeedback();
+        } finally {
+            document.body.removeChild(textArea);
+        }
+    }
+
+    // 显示错误提示
+    function showErrorFeedback() {
+        const btn = document.getElementById('copy-email');
+        btn.innerHTML = '⚠ 复制失败';
+        btn.style.backgroundColor = '#ff4444';
+
+        setTimeout(() => {
+            btn.innerHTML = `<svg...>复制邮箱</>`; // 恢复原始内容
+            btn.style.backgroundColor = '';
+        }, 2000);
+    }
+</script>
+</html>

sikey-hmd-business/sikey-hmd-business-biz/src/main/resources/templates/razorpayEnglishIndex.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title>Sikey AI Assistant</title>
     <style>
         :root {
             --primary-color: #FF6B28;
@@ -12,29 +12,30 @@
         }
 
         body {
-            background: url(/images/indianPaymentBackground.png) no-repeat center;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: url('/images/englishPaymentBackground.png') no-repeat center;
             background-size: cover;
             background-position: center;
             margin: 0;
             line-height: 1.6;
-            position: relative;
-            /* z-index: 1000; */
+            position: relative; /* 为绝对定位子元素提供参照 */
+            /*z-index: 1000;*/
             height: 610px;
         }
 
         /* 容器样式 */
         .container {
-            /* max-width: 600px; */
-            /* margin: -20% auto; */
+            /*max-width: 600px;*/
+            /*margin: -20% auto;*/
             background: #F5F5F5;
             border-radius: 15px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
+            /* overflow: hidden;*/
             position: absolute;
             top: 15%;
-            width: 380px;
-            height: 300px;
-            margin-top: 80%;
+            width: 100%;
+            height: 50%;
+            margin-top: 22.3rem;
         }
 
         /* 页头区域 */
@@ -73,13 +74,6 @@
             gap: 15px;
         }
 
-        .robot-logo {
-            width: 100px;
-            height: 125px;
-            /*animation: float 3s ease-in-out infinite;*/
-            flex-shrink: 0;
-        }
-
         .header-text {
             margin-left: 1rem;
             color: #FEDCC8;
@@ -269,6 +263,11 @@
             font-size: larger;
         }
 
+        .payment-language-selector {
+            margin-top: -2%;
+            margin-left: auto;
+        }
+
         .middle_red_envelope {
             position: absolute;
             bottom: 16px;
@@ -333,8 +332,8 @@
 
         /* 图片尺寸控制 */
         .payment-logo {
-            width: 155px;
-            height: 33px;
+            width: 25%;
+            height: 25%;
             object-fit: contain;
         }
 
@@ -364,9 +363,10 @@
             */
 
             margin: 0.2rem;
-            width: 151%;
+            width: 100%;
             position: relative;
             border-radius: inherit;
+            margin-top: 0.85rem;
         }
 
         /*.payment-buy {
@@ -455,6 +455,8 @@
         }
 
         .background-container {
+            /* 你可以根据需要设置背景图片或其他背景样式 */
+            /* 例如：background-image: url('your-background-image.jpg'); */
             background-color: #005580;
             display: flex;
             justify-content: center;
@@ -462,10 +464,9 @@
             padding: 20px;
             border-radius: 50px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            width: 310px;
+            width: 90%;
             height: 20px;
-            margin-top: 20px;
-            margin-left: 5px;
+            margin-top: 1.7rem;
         }
 
         .purchase-button {
@@ -560,7 +561,7 @@
 
         .price-display .price-unit {
             font-size: 14px;
-            color: #666;
+            color: #FFFFFF;
         }
 
 
@@ -599,61 +600,6 @@
         #copy-email.error {
             background: #ff4444 !important;
         }
-
-        /* Flexbox方案 */
-        .benefit-item {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 85px;
-            margin-top: 50px;
-            margin-left: 26px;
-        }
-
-        .benefit-item2 {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 85px;
-            margin-top: 50px;
-            margin-left: 105px;
-        }
-
-        .benefit-item3 {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 85px;
-            margin-top: 50px;
-            margin-left: 202px;
-        }
-
-        /* 文字样式 */
-        .benefit-main {
-            font-size: 10px;
-            font-weight: 700;
-            color: #2c3e50;
-            margin-bottom: 8px;
-        }
-
-        .benefit-sub {
-            font-size: 8px; /* 缩小副标题文字 */
-            color: #7f8c8d;
-            line-height: 1.5;
-        }
-
-        .benefit-icon img {
-            width: 36px; /* 缩小图片尺寸 */
-            height: 36px; /* 缩小图片尺寸 */
-            object-fit: contain;
-        }
-
-        .benefit-content{
-            margin-left: 10px;
-        }
     </style>
 </head>
 <script src="/js/axios/axios.min.js"></script>
@@ -661,154 +607,13 @@
 <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
 
 <body>
-<!-- 页头动态数据绑定 -->
-<div style="position: absolute">
-    <div style="width: 220px;margin-top: 30px;margin-left: 23px;color: #699DF8;font-size: 20px;font-weight: bold;background: linear-gradient(90deg, #00aaff, #0066ff, #00aaff);-webkit-background-clip: text;background-clip: text;text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);"
-         th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></div>
-    <div style="width: 250px;
-    margin-left: 8px;
-    color: #699DF8;
-    font-size: 16px;
-    font-weight: bold;"
-         th:text="${serviceInfo.get('now_connected_to_deepseek_large_model')}"></div>
-</div>
-<div style="
-    position: absolute;
-    top: 220px;
-    left: 186px;
-    width: 300px;
-    height: 200px;
-    background-color: #025E8E;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    padding: 20px;
-    z-index: 50;
-    margin-top: -120px;
-    margin-left: -175px;
-    display: block;
-    "></div>
-<div style="
-    position: absolute;
-    height: 10px;
-    color: #699DF8;
-    font-size: 16px;
-    color: #f8f9fa;
-    font-weight: bold;
-    z-index: 100;
-    margin-top: 110px;
-    margin-left: 36px;" th:text="${serviceInfo.get('annual_service_vip')}">
-</div>
-<div style="position: absolute;
-    z-index: 100;
-    margin-top: 8%;
-    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt=""/>
-</div>
-<div style="
-    position: absolute;
-    z-index: 100;
-    margin-top: 140px;
-    margin-left: 30px;
-    background-color: #FFFFFF;
-    border-radius: 10px;
-    width: 319px;
-    height: 190px;
-    ">
-    <div style="position: absolute;display: flex;"><img style="
-    position: absolute;
-    width: 300px;
-    height: 176px;
-    border-radius: 10px;
-    background-clip: padding-box;
-    background-color: #ffffff;
-    border: 1px solid #9FB7CC;
-    margin-left: 10px;
-    margin-top: 7px;
-    " th:src="@{/images/rectangle20.png}" alt=""/>
-        <img style="
-    position: absolute;
-    width: 270px;
-    height: 32px;
-    margin-left: 30px;" th:src="@{/images/rectangle18.png}" alt=""/>
-    </div>
-    <div style="
-    position: absolute;
-    height: 10px;
-    font-size: 16px;
-    color: #FFFFFF;
-    font-weight: bold;
-    z-index: 100;
-    margin-top: 5px;
-    margin-left: 70px;
-    " th:text="${serviceInfo.get('enjoy_three_premium_benefits')}">
-    </div>
-    <!-- 语音调用 -->
-    <div class="benefit-item">
-        <div class="benefit-icon">
-            <img style="margin-left: -10px" th:src="@{/images/group1.png}" alt=""/>
-        </div>
-        <div class="benefit-content">
-            <div class="benefit-main" th:text="${serviceInfo.get('voice_call')}"></div>
-            <div class="benefit-sub" th:text="${serviceInfo.get('global_voice_scheduling')}"></div>
-        </div>
-    </div>
-    <!-- 智能服务 -->
-    <div class="benefit-item2">
-        <div class="benefit-icon">
-            <img style="margin-left: -20px" th:src="@{/images/group2.png}" alt=""/>
-        </div>
-        <div class="benefit-content">
-            <div class="benefit-main" th:text="${serviceInfo.get('smart_service')}"></div>
-            <div class="benefit-sub" th:text="${serviceInfo.get('worry_free_accurate_recognition')}"></div>
-        </div>
-    </div>
-    <!-- AI会话 -->
-    <div class="benefit-item3">
-        <div style="margin-right: 30px;" class="benefit-icon">
-            <img th:src="@{/images/group3.png}" alt=""/>
-        </div>
-        <div class="benefit-content">
-            <div style="margin-left:15px;" class="benefit-main" th:text="${serviceInfo.get('ai_session')}"></div>
-            <div style="width: 111px;" class="benefit-sub"
-                 th:text="${serviceInfo.get('powerful_computing_support')}"></div>
-        </div>
-    </div>
-</div>
-
 <div class="container" th:fragment="main">
-    <!--<div class="middle">
-        <img th:src="@{/images/开通终身服务超级划算背景.png}" alt="AI助手" class="middle_picture">
-        <div>
-            <img th:src="@{/images/红包.png}" alt="AI助手" class="middle_red_envelope">
-        </div>
-        <div class="text">开通终身服务超级划算</div>
-    </div>-->
+    <!-- 页头动态数据绑定 -->
+    <header class="header">
+    </header>
 
     <!-- 年套餐价格 -->
-    <input type="hidden" class="yearPrice" th:value="${yearPrice}"/>
-
-    <!--<section class="price-cards">
-        <div th:each="plan : ${pricingPlans}" class="price-card" onclick="selectPlan(this)">
-            <p>
-                <input type="hidden" class="priceCard" th:value="${plan.type}"/>
-                <span th:text="${plan.name}" class="name"></span>
-                <span th:text="${plan.price}" class="price price-number"></span>元
-            </p>
-        </div>
-    </section>-->
-
-    <!-- 功能对比表动态生成 -->
-    <!--<section class="feature-grid_out">
-        <th:block th:each="col : ${featureList}">
-            <div class="feature-grid">
-                <div class="grid-item col-header" th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
-                     th:text="${col.name}"></div>
-                <div th:each="detail : ${col.details}"
-                     class="grid-item"
-                     th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
-                     th:text="${detail.value}"></div>
-            </div>
-        </th:block>
-    </section>-->
+    <input class="yearPrice" th:value="${yearPrice}" type="hidden"/>
 
     <div class="error-tip" id="errorTip"></div>
 
@@ -816,88 +621,41 @@
     <section class="payment-section">
         <div class="payment-section-pay">
             <div>
-                <img th:src="@{/images/付费方式前面的标志.png}" alt="">
+                <img alt="" th:src="@{/images/付费方式前面的标志.png}" width="6" height="18" >
+            </div>
+            <div class="payment-section_picture">Payment Methods</div>
+            <!-- 添加的下拉框 -->
+            <div class="payment-language-selector">
+                <select id="languageSelect" class="language-dropdown">
+                    <option value="2" selected>English</option>
+                    <option value="3">हिन्दी</option>
+                </select>
             </div>
-            <div class="payment-section_picture" th:text="${serviceInfo.get('pay')}"></div>
         </div>
 
         <div class="payment-methods">
             <div class="alipay-methods">
                 <div class="pay-radio">
                     <label>
-                        <img th:src="@{/images/razorpay.png}"
-                             alt="pay type"
-                             class="payment-logo">
+                        <img alt="pay type" class="payment-logo" th:src="@{/images/razorpay.png}">
                         <!--<span>razorpay</span>-->
                         <div class="pay-div">
-                            <input type="radio" name="payment"
-                                   th:value="razorpay"
-                                   th:checked="true">
+                            <input name="payment" th:checked="true" th:value="razorpay" type="radio">
                         </div>
                     </label>
                 </div>
             </div>
-
-            <!--<div class="payment-methods">
-                <div class="alipay-methods">
-                    <div class="pay-radio">
-                        <label>
-                            <img th:src="@{/images/alipay-logo.png}"
-                                 alt="支付方式"
-                                 class="payment-logo">
-                            <span>支付宝支付</span>
-                            <div class="pay-div">
-                                <input type="radio" name="payment"
-                                       th:value="alipay"
-                                       th:checked="true">
-                            </div>
-                        </label>
-                    </div>
-                </div>-->
-
-            <!--<div>
-                <div class="pay-radio">
-                    <label>
-                        <img th:src="@{/images/wechat-logo.png}"
-                             alt="支付方式"
-                             class="payment-logo">
-                        <span>微信支付</span>
-                        <div class="pay-div">
-                            <input type="radio" name="payment"
-                                   th:value="wechat">
-                        </div>
-                    </label>
-                </div>
-            </div>-->
-
-            <!--<div class="container_agreement">
-                <div class="checkbox-container">
-                    <input type="checkbox" id="agreement" class="checkbox">
-                    <label for="agreement" class="checked-label"></label>
-                </div>
-                <div class="container_agreement_font"  th:text="'我已阅读并同意'+${'《付费升级服务免责声明》'}"></div>
-                <div class="error-tip" id="errorTip"></div>
-            </div>-->
-
         </div>
-
-        <!--<div class="payment-buy">
-            <div class="price-display">9.9元/年</div>
-            <div>
-                <a th:href="@{/order/create}" class="buy-button">
-                    <img th:src="@{/images/立即购买背景.png}"
-                         alt="立即购买">
-                </a>
-            </div>
-        </div>-->
         <div class="background-container">
-            <div class="price-display"><span class="price-number" th:text="${yearPrice}"></span><span class="price-unit"
-                                                                                                      th:text="${serviceInfo.get('unit')}"></span>
+            <div class="price-display">
+                <span class="price-number" th:text="${yearPrice}"></span>
+                <span class="price-unit">$/year</span>
             </div>
-            <button class="purchase-button" id="purchase-button" th:text="${serviceInfo.get('buy_now')}"></button>
+            <button class="purchase-button" id="purchase-button">BUY NOW</button>
         </div>
-        <input class="validity" type="hidden" th:value="${validity}"/>
-        <input class="siqi_smart_ai_assistant" type="hidden" th:value="${serviceInfo.get('siqi_smart_ai_assistant')}"/>
+        <!-- 在 HTML 中定义隐藏字段 -->
+        <input class="validity" th:value="${validity}" type="hidden"/>
+        <input class="razorPayKey" th:value="${razorPayKey}"  type="hidden" />
 
         <!-- 在background-container下方添加联系客服链接 -->
         <!--<div class="contact-service"
@@ -910,31 +668,19 @@
 
 
 <!-- 客服弹窗模态框 -->
-<div id="customer-service-modal" class="modal"
+<div class="modal" id="customer-service-modal"
      style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
     <div class="modal-content"
          style="background-color: #fff; margin: 15% auto; padding: 0; width: 340px; border-radius: 16px; overflow: hidden; position: relative;">
         <!-- 顶部背景 -->
         <div style="position: relative; height: 180px; margin-top: -40px; margin-bottom: -20px;z-index: 1;overflow: visible; ">
-            <img th:src="@{/images/child.png}" alt="背景" style="width: 50%;
+            <img alt="背景" style="width: 50%;
     height: 100px;
     object-fit: contain;
     position: relative;
     z-index: 2;
     margin-top: 15%;
-    margin-left: 26%;">
-            <!--<div class="stars" style="position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        pointer-events: none;">
-                <img th:src="@{/images/child.png}" alt="星星" style="width: 100%;
-            height: 100%;
-            object-fit: cover;
-            opacity: 0.8;">
-            </div>-->
+    margin-left: 26%;" th:src="@{/images/child.png}">
         </div>
 
         <!-- 内容区 -->
@@ -1036,6 +782,38 @@
     <span class="price-unit">${unit}</span>`;
     }*/
 
+    document.getElementById('languageSelect').addEventListener('change', function() {
+        const language = this.value;
+        if (!language) return;
+
+        // 获取当前页面的完整 URL
+        const currentUrl = window.location.href;
+        // 创建 URL 对象
+        const urlObj = new URL(currentUrl);
+
+        // 获取查询参数对象
+        const params = new URLSearchParams(urlObj.search);
+        // 获取单个参数
+        const imei = params.get('imei');
+        // 直接修改 window.location 跳转（无需 Axios）
+        window.location.href = `${urlObj.origin}/h5/hmd/payment/razorpayIndex?imei=${imei}&languageType=${language}`;
+        // 使用Axios发送POST请求
+        // axios.get(urlObj.origin + '/h5/hmd/payment/razorpayIndex', {
+        //     params: {  // 自动拼接到 URL
+        //         imei: imei,
+        //         languageType: language
+        //     },
+        // })
+        // .then(function(response) {
+        //     // 服务器返回的redirect URL会自动被浏览器处理
+        //     // 不需要手动跳转
+        // })
+        // .catch(function(error) {
+        //     console.error('Error:', error);
+        //     alert('An error occurred. Please try again.');
+        // })
+    });
+
     // 定义获取付费方式的函数
     function getSelectedPayment() {
         const radios = document.getElementsByName('payment');
@@ -1113,7 +891,7 @@
                 const imei = params.get('imei');
 
                 const validity = document.querySelector('.validity').value;
-                const siqiSmartAiAssistant = document.querySelector('.siqi_smart_ai_assistant').value;
+                const razorPayKey = document.querySelector('.razorPayKey').value;
 
                 if (paymentMethod === 'razorpay') {
                     path = "/app-api/hmd/razorpay/razorpayTradeWapPay";
@@ -1122,7 +900,7 @@
                         params: {
                             validity: validity,
                             deviceId: imei,
-                            subject: siqiSmartAiAssistant,
+                            subject: "Sikey AI Assistant",
                             merchantProjectApplication: '1:hmd:3'
                         }
                     }).then(response => {
@@ -1135,14 +913,14 @@
 
                         // razorpay
                         var options = {
-                            "key": "rzp_test_bwL1qbvhAdCZqw", // Enter the Key ID generated from the Dashboard
+                            "key": razorPayKey, // Enter the Key ID generated from the Dashboard
                             "amount": response.data.data.amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                             "currency": "INR",
-                            "name": siqiSmartAiAssistant, //your business name
+                            "name": "Sikey AI Assistant", //your business name
                             "description": "Test Transaction",
                             "image": "https://example.com/your_logo",
                             "order_id": response.data.data.outTradeNo, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
-                            "callback_url": "https://pay.tecanswer.com/app-api/pay/razorpay/tradeWapPayGateway",
+                            "callback_url": "https://pay.tecanswer.com/app-api/hmd/razorpay/call/tradeWapPayGateway",
                             "redirect": true,
                             "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
                                 "name": "Gaurav Kumar", //your customer's name

sikey-hmd-business/sikey-hmd-business-biz/src/main/resources/templates/razorpayIndiaIndex-bak.html

@@ -0,0 +1,1295 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></title>
+    <style>
+        :root {
+            --primary-color: #FF6B28;
+            --vip-color: #F5A623;
+            --border-color: #e0e0e0;
+        }
+
+        body {
+            background: url(/images/indianPaymentBackground.png) no-repeat center;
+            background-size: cover;
+            background-position: center;
+            margin: 0;
+            line-height: 1.6;
+            position: relative;
+            /* z-index: 1000; */
+            height: 610px;
+        }
+
+        /* 容器样式 */
+        .container {
+            /* max-width: 600px; */
+            /* margin: -20% auto; */
+            background: #F5F5F5;
+            border-radius: 15px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            position: absolute;
+            top: 15%;
+            width: 380px;
+            height: 300px;
+            margin-top: 80%;
+        }
+
+        /* 页头区域 */
+        .header {
+            position: absolute;
+            /* width: 350px; */
+            /* height: 95px; */
+            /* top: 80px; */
+            /* left: 16px; */
+            border-radius: 13px 13px 4px 4px;
+            background: linear-gradient(135deg, #5689AF, #025E8E);
+            /* padding: 1.2rem; */
+            /* z-index: -10; */
+            /* box-sizing: border-box; */
+            /* margin-top: -160px; */
+        }
+
+
+        /* 渐变边框实现 */
+        .header::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            background: linear-gradient(135deg, #5689AF, #025E8E);
+            border-radius: inherit;
+            z-index: -1;
+        }
+
+        .branding {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            gap: 15px;
+        }
+
+        .robot-logo {
+            width: 100px;
+            height: 125px;
+            /*animation: float 3s ease-in-out infinite;*/
+            flex-shrink: 0;
+        }
+
+        .header-text {
+            margin-left: 1rem;
+            color: #FEDCC8;
+            text-align: left;
+        }
+
+        .header-text h1 {
+            font-size: 1.4rem;
+            margin: 0 0 0.3rem;
+            line-height: 1.2;
+        }
+
+        .header-text p {
+            font-size: 0.9rem;
+            margin: 0;
+            opacity: 0.9;
+        }
+
+        /* 价格对比模块 */
+        .price-cards {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 0.6rem;
+            padding: 1.0rem;
+            margin-top: -2%;
+            position: absolute;
+        }
+
+        .price-card {
+            position: relative;
+            padding: 0.8rem;
+            border-radius: 10px;
+            background: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            width: 140px;
+            height: 50px;
+            cursor: pointer;
+        }
+
+        .price-card.selected {
+            border: 2px solid #d96b32;
+            background-color: #ffe8e1;
+        }
+
+        .price-card .name {
+            font-weight: bold;
+            color: #333;
+        }
+
+        .price-card .price {
+            font-size: 1.2em;
+            color: #333;
+        }
+
+        /* 选中状态：名称和价格均橙色 */
+        .price-card.selected .name,
+        .price-card.selected .price {
+            color: #d96b32; /* 覆盖为橙色 */
+        }
+
+        .vip-badge {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            width: 40px;
+            height: 40px;
+        }
+
+        .redpacket-icon {
+            width: 30px;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        /* 功能对比表 */
+        .feature-grid {
+            display: grid;
+            /*grid-template-columns: 2fr repeat(3, 1fr);*/
+            /* gap: 1px; */
+            background: #FFFFFF;
+            margin: 0.6rem;
+            position: relative;
+            /* margin-top: -1%;
+            border-radius: 10px;
+             border: 1px solid #ccc;*/
+        }
+
+        .feature-grid_out {
+            display: grid;
+            grid-template-columns: 2fr repeat(2, 1fr);
+            gap: 1px;
+            background: #FFFFFF;
+            margin: 0.8rem;
+            position: relative;
+            margin-top: 28%;
+            border-radius: inherit;
+            height: 50%;
+        }
+
+        .grid-item {
+            /*padding: 1rem;*/
+            background: white;
+            /*display: flex;*/
+            align-items: center;
+            min-height: 50px;
+        }
+
+        .col-header {
+            font-weight: 600;
+            /*background: #f8f9fa;*/
+            border: none; /* 隐藏边框 */
+            box-shadow: none; /* 隐藏可能的盒子阴影 */
+            outline: none; /* 隐藏可能的轮廓线 */
+        }
+
+
+        .isHighlight {
+            color: #D1530B !important;
+            font-weight: 600;
+            position: relative;
+        }
+
+
+        /*.isHighlight::after {
+            content: none; !* 删除左侧指示条 *!
+        }*/
+
+        /* 支付方式 */
+        .payment-section {
+            padding: 0.6rem;
+            position: absolute;
+            height: -webkit-fill-available;
+            margin-top: 3%;
+        }
+
+        .payment-section-pay {
+            display: flex;
+            align-items: center;
+        }
+
+        /*.payment-logo {
+            width: 24px;
+            height: 24px;
+            transition: transform 0.3s ease;
+        }*/
+
+        .payment-logo:hover {
+            transform: scale(1.1);
+        }
+
+        /* 购买按钮 */
+        .buy-button {
+            /*display: block;
+            margin: 2rem auto;
+            width: 80%;
+            max-width: 300px;
+            transition: opacity 0.3s ease;*/
+            margin-left: 5%;
+        }
+
+        .buy-button img {
+            width: 100%;
+        }
+
+        .buy-button:hover {
+            opacity: 0.9;
+        }
+
+        .middle {
+            margin-top: -140px;
+            position: relative;
+        }
+
+        .middle_picture {
+            width: -webkit-fill-available;
+        }
+
+        .payment-section_div {
+            position: absolute;
+            display: grid;
+        }
+
+        .payment-section_picture {
+            margin-left: 2%;
+            margin-top: -2%;
+            color: #474747;
+            font-size: larger;
+        }
+
+        .middle_red_envelope {
+            position: absolute;
+            bottom: 16px;
+            left: 10px; /* 可根据需要调整水平位置 */
+            z-index: 1; /* 确保红包图片位于背景图片上方 */
+        }
+
+        .text {
+            color: #c16c3f;
+            font-size: 16px;
+            position: absolute;
+            top: 8px;
+            left: 35px;
+            z-index: 1;
+        }
+
+        .price-card .name {
+            width: 72px;
+            height: 25px;
+            font-size: 18px;
+        }
+
+        .price-card .price {
+            font-weight: 500; /* 字重（中等） */
+            font-size: 18px; /* 字号 */
+            line-height: 1; /* 行高 = 100%（1倍字号） */
+            letter-spacing: 0; /* 字符间距 */
+        }
+
+        /* 动画效果 */
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        /* 支付方式选项样式 */
+        .pay-radio {
+            margin-bottom: 2px; /* 选项间距 */
+        }
+
+        .pay-radio span {
+            margin-left: 2%;
+        }
+
+        /* 单个支付选项 */
+        .pay-radio label {
+            display: flex;
+            align-items: center;
+            gap: 2px;
+            padding: 16px 24px;
+            /*border: 2px solid #e9ecef;*/
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: white;
+            width: -webkit-fill-available;
+        }
+
+        /* 图片尺寸控制 */
+        .payment-logo {
+            width: 155px;
+            height: 33px;
+            object-fit: contain;
+        }
+
+        /* 文字样式 */
+        /*.pay-radio input[type='radio'] {
+            display: none;
+        }*/
+
+        /* 交互状态 */
+        .pay-radio label:hover {
+            border-color: #1890ff;
+            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+        }
+
+        .pay-radio input:checked + label {
+            border-color: #1890ff;
+            background-color: #e6f4ff;
+        }
+
+        .payment-methods {
+            /*display: grid;*/
+            grid-template-columns: 2fr repeat(3, 1fr);
+            gap: 1px;
+            /*background: #FFFFFF;*/
+            /*margin: 0.8rem;*/
+            /*position: relative;
+            */
+
+            margin: 0.2rem;
+            width: 151%;
+            position: relative;
+            border-radius: inherit;
+        }
+
+        /*.payment-buy {
+            margin-top: 5%;
+            width: 90%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }*/
+
+        .container_agreement {
+            display: flex;
+            align-items: center;
+        }
+
+        .checkbox-container {
+            display: inline-flex;
+            vertical-align: middle; /* 固定垂直对齐方式 */
+            position: relative;
+            margin-right: 8px;
+        }
+
+        /* 自定义复选框视觉样式 */
+        .custom-checkbox {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%); /* 垂直居中 */
+            width: 16px;
+            height: 16px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            background: white;
+            transition: all 0.3s;
+        }
+
+        .checkbox {
+            margin-right: 10px;
+            position: relative;
+        }
+
+        .checkbox-container input[type="checkbox"] {
+            display: none;
+        }
+
+        .checkbox-container input[type="checkbox"] + .checked-label:before {
+            content: "";
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 1px solid #ccc;
+            border-radius: 3px;
+            margin-right: 5px;
+            position: relative;
+        }
+
+        .checkbox-container input[type="checkbox"]:checked + .checked-label:before {
+            content: "✔";
+            font-size: 14px;
+            color: #1E90FF;
+            text-align: center;
+            line-height: 16px;
+        }
+
+        .text_agreement {
+            color: #1E90FF; /* 蓝色字体 */
+        }
+
+        .container_agreement_font {
+            font-size: 10px;
+            font-family: Arial, sans-serif;
+            /*margin-left: auto;*/
+        }
+
+        .price-display {
+            flex: 1;
+            text-align: left;
+            font-size: 18px;
+            font-weight: bold;
+            color: white;
+            margin-left: -200px;
+            position: absolute;
+        }
+
+        .background-container {
+            background-color: #005580;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            border-radius: 50px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 310px;
+            height: 20px;
+            margin-top: 20px;
+            margin-left: 5px;
+        }
+
+        .purchase-button {
+            background-color: #87CDFF;
+            border: none;
+            border-radius: 30px;
+            padding: 15px 25px;
+            font-size: 16px;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-right: -70%;
+        }
+
+        .pay-div {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            /*background-color: #f5f5f5;*/
+            padding: 10px;
+            border-radius: 8px;
+            margin-left: auto;
+        }
+
+        /*协议复选框*/
+        .container_agreement {
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin: 8px 0 8px 20%;
+        }
+
+        .checkbox-container {
+            margin-right: 10px;
+        }
+
+        .text_agreement {
+            color: #1890ff;
+            cursor: pointer;
+        }
+
+        /* 提示信息样式 */
+        .error-tip {
+            position: absolute;
+            bottom: -20px;
+            left: 30px;
+            color: #ff4d4f;
+            font-size: 12px;
+            display: none;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        /* 新增错误提示样式 */
+        .error-tip {
+            position: absolute;
+            bottom: 150px;
+            left: 0;
+            color: red;
+            font-size: 12px;
+            width: 210px;
+            white-space: pre-line;
+            display: none;
+            margin-left: 150px;
+            margin-bottom: 130px;
+        }
+
+        .show-tip {
+            display: block;
+            animation: fadeIn 0.3s;
+        }
+
+        /* 新增价格样式 */
+        .price-display .price-number {
+            font-size: 22px; /* 价格字体大小 */
+            font-weight: bold;
+            color: white;
+        }
+
+        /* 新增价格样式 */
+        .price-card .price-number {
+            font-size: 22px; /* 价格字体大小 */
+            font-weight: bold;
+        }
+
+        .price-display .price-unit {
+            font-size: 14px;
+            color: #666;
+        }
+
+
+        /* 新增动画效果 */
+        @keyframes modalSlideIn {
+            from {
+                transform: translateY(60px) scale(0.96);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0) scale(1);
+                opacity: 1;
+            }
+        }
+
+        .modal-content {
+            animation: modalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
+        }
+
+        /* 悬停效果 */
+        #copy-email:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(135, 205, 255, 0.4);
+        }
+
+        #copy-email {
+            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #87CDFF, #5A8FEB);
+        }
+
+        #copy-email.copied {
+            background: #4CAF50 !important;
+        }
+
+        #copy-email.error {
+            background: #ff4444 !important;
+        }
+
+        /* Flexbox方案 */
+        .benefit-item {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 85px;
+            margin-top: 50px;
+            margin-left: 26px;
+        }
+
+        .benefit-item2 {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 85px;
+            margin-top: 50px;
+            margin-left: 125px;
+        }
+
+        .benefit-item3 {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 85px;
+            margin-top: 50px;
+            margin-left: 220px;
+        }
+
+        /* 文字样式 */
+        .benefit-main {
+            font-size: 12px;
+            font-weight: 700;
+            color: #2c3e50;
+            margin-bottom: 8px;
+        }
+
+        .benefit-sub {
+            font-size: 14px; /* 缩小副标题文字 */
+            color: #7f8c8d;
+            line-height: 1.5;
+        }
+
+        .benefit-icon img {
+            width: 36px; /* 缩小图片尺寸 */
+            height: 36px; /* 缩小图片尺寸 */
+            object-fit: contain;
+        }
+    </style>
+</head>
+<script src="/js/axios/axios.min.js"></script>
+
+<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
+
+<body>
+<!-- 页头动态数据绑定 -->
+<div style="position: absolute">
+    <div style="width: 220px;margin-top: 30px;margin-left: 23px;color: #699DF8;font-size: 20px;font-weight: bold;background: linear-gradient(90deg, #00aaff, #0066ff, #00aaff);-webkit-background-clip: text;background-clip: text;text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);"
+         th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></div>
+    <div style="width: 260px;margin-left: 3px;color: #699DF8;font-size: 16px;font-weight: bold;"
+         th:text="${serviceInfo.get('now_connected_to_deepseek_large_model')}"></div>
+</div>
+<div style="
+    position: absolute;
+    top: 220px;
+    left: 186px;
+    width: 310px;
+    height: 210px;
+    background-color: #025E8E;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 20px;
+    z-index: 50;
+    margin-top: -120px;
+    margin-left: -175px;
+    display: block;
+    "></div>
+<div style="
+    position: absolute;
+    height: 10px;
+    color: #699DF8;
+    font-size: 16px;
+    color: #f8f9fa;
+    font-weight: bold;
+    z-index: 100;
+    margin-top: 110px;
+    margin-left: 36px;" th:text="${serviceInfo.get('annual_service_vip')}">
+</div>
+<div style="position: absolute;
+    z-index: 100;
+    margin-top: 8%;
+    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt=""/>
+</div>
+<div style="
+    position: absolute;
+    z-index: 100;
+    margin-top: 140px;
+    margin-left: 20px;
+    background-color: #FFFFFF;
+    border-radius: 10px;
+    width: 330px;
+    height: 190px;
+    ">
+    <div style="position: absolute;display: flex;"><img style="
+    position: absolute;
+    width: 313px;
+    height: 176px;
+    border-radius: 10px;
+    background-clip: padding-box;
+    background-color: #ffffff;
+    border: 1px solid #9FB7CC;
+    margin-left: 10px;
+    margin-top: 7px;
+    " th:src="@{/images/rectangle20.png}" alt=""/>
+        <img style="
+    position: absolute;
+    width: 250px;
+    height: 32px;
+    margin-left: 30px;
+    " th:src="@{/images/rectangle18.png}" alt=""/>
+    </div>
+    <div style="
+    position: absolute;
+    height: 10px;
+    font-size: 16px;
+    color: #FFFFFF;
+    font-weight: bold;
+    z-index: 100;
+    margin-top: 5px;
+    margin-left: 60px;
+    " th:text="${serviceInfo.get('enjoy_three_premium_benefits')}">
+    </div>
+    <!-- 语音调用 -->
+    <div class="benefit-item">
+        <div class="benefit-icon">
+            <img style="margin-left: -10px" th:src="@{/images/group1.png}" alt=""/>
+        </div>
+        <div class="benefit-content">
+            <div class="benefit-main" th:text="${serviceInfo.get('voice_call')}"></div>
+            <div class="benefit-sub" th:text="${serviceInfo.get('global_voice_scheduling')}"></div>
+        </div>
+    </div>
+    <!-- 智能服务 -->
+    <div class="benefit-item2">
+        <div class="benefit-icon">
+            <img style="margin-left: -20px" th:src="@{/images/group2.png}" alt=""/>
+        </div>
+        <div class="benefit-content">
+            <div class="benefit-main" th:text="${serviceInfo.get('smart_service')}"></div>
+            <div class="benefit-sub" th:text="${serviceInfo.get('worry_free_accurate_recognition')}"></div>
+        </div>
+    </div>
+    <!-- AI会话 -->
+    <div class="benefit-item3">
+        <div style="margin-right: 30px;" class="benefit-icon">
+            <img th:src="@{/images/group3.png}" alt=""/>
+        </div>
+        <div class="benefit-content">
+            <div class="benefit-main" th:text="${serviceInfo.get('ai_session')}"></div>
+            <div style="width: 111px;" class="benefit-sub"
+                 th:text="${serviceInfo.get('powerful_computing_support')}"></div>
+        </div>
+    </div>
+</div>
+
+<div class="container" th:fragment="main">
+    <!--<div class="middle">
+        <img th:src="@{/images/开通终身服务超级划算背景.png}" alt="AI助手" class="middle_picture">
+        <div>
+            <img th:src="@{/images/红包.png}" alt="AI助手" class="middle_red_envelope">
+        </div>
+        <div class="text">开通终身服务超级划算</div>
+    </div>-->
+
+    <!-- 年套餐价格 -->
+    <input type="hidden" class="yearPrice" th:value="${yearPrice}"/>
+
+    <!--<section class="price-cards">
+        <div th:each="plan : ${pricingPlans}" class="price-card" onclick="selectPlan(this)">
+            <p>
+                <input type="hidden" class="priceCard" th:value="${plan.type}"/>
+                <span th:text="${plan.name}" class="name"></span>
+                <span th:text="${plan.price}" class="price price-number"></span>元
+            </p>
+        </div>
+    </section>-->
+
+    <!-- 功能对比表动态生成 -->
+    <!--<section class="feature-grid_out">
+        <th:block th:each="col : ${featureList}">
+            <div class="feature-grid">
+                <div class="grid-item col-header" th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
+                     th:text="${col.name}"></div>
+                <div th:each="detail : ${col.details}"
+                     class="grid-item"
+                     th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
+                     th:text="${detail.value}"></div>
+            </div>
+        </th:block>
+    </section>-->
+
+    <div class="error-tip" id="errorTip"></div>
+
+    <!--支付方式-->
+    <section class="payment-section">
+        <div class="payment-section-pay">
+            <div>
+                <img th:src="@{/images/付费方式前面的标志.png}" alt="">
+            </div>
+            <div class="payment-section_picture" th:text="${serviceInfo.get('pay')}"></div>
+        </div>
+
+        <div class="payment-methods">
+            <div class="alipay-methods">
+                <div class="pay-radio">
+                    <label>
+                        <img th:src="@{/images/razorpay.png}"
+                             alt="pay type"
+                             class="payment-logo">
+                        <!--<span>razorpay</span>-->
+                        <div class="pay-div">
+                            <input type="radio" name="payment"
+                                   th:value="razorpay"
+                                   th:checked="true">
+                        </div>
+                    </label>
+                </div>
+            </div>
+
+            <!--<div class="payment-methods">
+                <div class="alipay-methods">
+                    <div class="pay-radio">
+                        <label>
+                            <img th:src="@{/images/alipay-logo.png}"
+                                 alt="支付方式"
+                                 class="payment-logo">
+                            <span>支付宝支付</span>
+                            <div class="pay-div">
+                                <input type="radio" name="payment"
+                                       th:value="alipay"
+                                       th:checked="true">
+                            </div>
+                        </label>
+                    </div>
+                </div>-->
+
+            <!--<div>
+                <div class="pay-radio">
+                    <label>
+                        <img th:src="@{/images/wechat-logo.png}"
+                             alt="支付方式"
+                             class="payment-logo">
+                        <span>微信支付</span>
+                        <div class="pay-div">
+                            <input type="radio" name="payment"
+                                   th:value="wechat">
+                        </div>
+                    </label>
+                </div>
+            </div>-->
+
+            <!--<div class="container_agreement">
+                <div class="checkbox-container">
+                    <input type="checkbox" id="agreement" class="checkbox">
+                    <label for="agreement" class="checked-label"></label>
+                </div>
+                <div class="container_agreement_font"  th:text="'我已阅读并同意'+${'《付费升级服务免责声明》'}"></div>
+                <div class="error-tip" id="errorTip"></div>
+            </div>-->
+
+        </div>
+
+        <!--<div class="payment-buy">
+            <div class="price-display">9.9元/年</div>
+            <div>
+                <a th:href="@{/order/create}" class="buy-button">
+                    <img th:src="@{/images/立即购买背景.png}"
+                         alt="立即购买">
+                </a>
+            </div>
+        </div>-->
+        <div class="background-container">
+            <div class="price-display"><span class="price-number" th:text="${yearPrice}"></span><span class="price-unit"
+                                                                                                      th:text="${serviceInfo.get('unit')}"></span>
+            </div>
+            <button class="purchase-button" id="purchase-button" th:text="${serviceInfo.get('buy_now')}"></button>
+        </div>
+        <input class="validity" type="hidden" th:value="${validity}"/>
+        <input class="siqi_smart_ai_assistant" type="hidden" th:value="${serviceInfo.get('siqi_smart_ai_assistant')}"/>
+
+        <!-- 在background-container下方添加联系客服链接 -->
+        <!--<div class="contact-service"
+             style="text-align: center; font-size: 10px;font-family: Arial, sans-serif;margin-left: 50%;margin-top: 1%;">
+            点击这里<a href="javascript:void(0)" id="contact-customer-service"
+                       style="color: #1E90FF; font-size: 10px;font-family: Arial, sans-serif;margin-top: 15px; text-decoration: underline;">联系客服</a>
+        </div>-->
+    </section>
+</div>
+
+
+<!-- 客服弹窗模态框 -->
+<div id="customer-service-modal" class="modal"
+     style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
+    <div class="modal-content"
+         style="background-color: #fff; margin: 15% auto; padding: 0; width: 340px; border-radius: 16px; overflow: hidden; position: relative;">
+        <!-- 顶部背景 -->
+        <div style="position: relative; height: 180px; margin-top: -40px; margin-bottom: -20px;z-index: 1;overflow: visible; ">
+            <img th:src="@{/images/child.png}" alt="背景" style="width: 50%;
+    height: 100px;
+    object-fit: contain;
+    position: relative;
+    z-index: 2;
+    margin-top: 15%;
+    margin-left: 26%;">
+            <!--<div class="stars" style="position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        pointer-events: none;">
+                <img th:src="@{/images/child.png}" alt="星星" style="width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.8;">
+            </div>-->
+        </div>
+
+        <!-- 内容区 -->
+        <div style="padding: 24px; margin-top: -20px; position: relative; z-index: 2;">
+            <div style="text-align: center; margin-bottom: 24px;">
+                <div style="color: #1876FD; font-size: 18px; font-weight: 500; margin-bottom: 8px;">
+                    service@sikey.com.cn
+                </div>
+                <div style="color: #474747; font-size: 12px;">请联系我们的客服邮箱</div>
+            </div>
+
+            <div style="display: flex; justify-content: center; position: relative; padding-bottom: 50px;">
+                <button id="copy-email" style="
+                    background: linear-gradient(135deg, #87CDFF, #5A8FEB);
+                    border: none;
+                    padding: 10px 32px;
+                    border-radius: 24px;
+                    color: #FFFFFF;
+                    font-size: 14px;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    box-shadow: 0 4px 12px rgba(135,205,255,0.3);
+                ">
+                    <!--<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8 4V16H18V4H8Z" stroke="white" stroke-width="2"/>
+                        <path d="M6 20H16V8H6V20Z" stroke="white" stroke-width="2"/>
+                    </svg>-->
+                    复制邮箱
+                </button>
+
+                <!-- 关闭按钮移动到复制按钮底部 -->
+                <div class="close-container" style="
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    margin-top: 20px;
+                ">
+                    <div style="
+                        background: #FFFFFF;
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                        cursor: pointer;
+                    ">
+                        <span class="close" style="
+                            color: #666;
+                            font-size: 24px;
+                            line-height: 1;
+                            margin-bottom: 4px;
+                        ">×</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 公共模板片段 -->
+<!--<div th:fragment="css-resource" th:remove="tag">
+    <link rel="stylesheet" th:href="@{/css/theme-${theme}.css}">
+</div>-->
+
+<!--<div th:fragment="scripts" th:remove="tag">
+    <script th:src="@{/js/payment-validation.js}"></script>
+</div>-->
+</body>
+
+<script>
+    // 获取选择的套餐
+    /*function selectPlan(clickedElement) {
+        // 1. 移除所有卡片的选中样式（通过删除 CSS 类名）
+        const allCards = document.querySelectorAll('.price-card');
+        allCards.forEach(card => card.classList.remove('selected'));
+
+        // 2. 为当前点击的卡片添加选中样式（通过添加 CSS 类名）
+        clickedElement.classList.add('selected');
+
+        // 3. 动态获取价格和服务类型，更新到价格显示区域
+        const price = clickedElement.querySelector('.price').textContent;
+        const serviceType = clickedElement.querySelector('.priceCard').value;
+
+        const priceInput = document.querySelector('.price-display-price');
+        priceInput.value = serviceType
+
+        const unit = serviceType == 1 ? '元/年' : '元/终身';
+        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
+        // priceDisplay.textContent = `${price}${unit}`;  // 使用 textContent 修改内容
+
+        // 使用模板字符串构建带样式的HTML
+        priceDisplay.innerHTML = `
+    <span class="price-number">${price}</span>
+    <span class="price-unit">${unit}</span>`;
+    }*/
+
+    // 定义获取付费方式的函数
+    function getSelectedPayment() {
+        const radios = document.getElementsByName('payment');
+        for (const radio of radios) {
+            if (radio.checked) {
+                return radio.value;
+            }
+        }
+        return null;
+    }
+
+    // 确保DOM加载完成
+    document.addEventListener("DOMContentLoaded", function () {
+        const purchaseButton = document.getElementById('purchase-button');
+        const errorTip = document.getElementById('errorTip');
+
+        /*const yearPrice = document.querySelector('.yearPrice').value;
+        const priceDisplay = document.querySelector('.price-display'); // 使用 querySelector 直接获取元素
+        // priceDisplay.textContent = `${yearPrice}`;  // 使用 textContent 修改内容
+        // 使用模板字符串构建带样式的HTML
+        priceDisplay.innerHTML = `
+    <span class="price-number" th:text="${yearPrice}"></span>
+    <span class="price-unit" th:text="${serviceInfo.get("unit")}"></span>`;*/
+
+        // 表单验证函数
+        function validateForm() {
+            let errors = [];
+
+            // 1. 校验套餐选择
+            /*const selectedPlan = document.querySelector('.price-card.selected');
+            if (!selectedPlan) {
+                errors.push("请选择套餐类型（包年或终身服务）");
+            }*/
+
+            // 2. 校验支付方式
+            /*const paymentSelected = document.querySelector('input[name="payment"]:checked');
+            if (!paymentSelected) {
+                errors.push("请选择支付方式（支付宝或微信）");
+            }
+
+            // 3. 校验协议勾选
+            const agreementChecked = document.getElementById('agreement').checked;
+            if (!agreementChecked) {
+                errors.push("请阅读并同意《付费升级服务免责声明》");
+            }*/
+
+            // 显示/隐藏错误提示
+            if (errors.length > 0) {
+                errorTip.innerHTML = errors.join("\n"); // 用换行符分隔错误
+                errorTip.classList.add('show-tip');
+                return false;
+            } else {
+                errorTip.classList.remove('show-tip');
+                return true;
+            }
+        }
+
+
+        function handlePurchaseButtonClick(e) {
+            /*e.preventDefault(); // 阻止默认提交
+            if (!validateForm()) return;*/
+
+            const paymentMethod = getSelectedPayment();
+            if (paymentMethod) {
+                let path;
+
+                // 获取当前页面的完整 URL
+                const currentUrl = window.location.href;
+                // 创建 URL 对象
+                const urlObj = new URL(currentUrl);
+
+                // 获取查询参数对象
+                const params = new URLSearchParams(urlObj.search);
+                // 获取单个参数
+                const imei = params.get('imei');
+
+                const validity = document.querySelector('.validity').value;
+                const siqiSmartAiAssistant = document.querySelector('.siqi_smart_ai_assistant').value;
+
+                if (paymentMethod === 'razorpay') {
+                    path = "/app-api/hmd/razorpay/razorpayTradeWapPay";
+                    const pathWithDomain = urlObj.origin + path;
+                    const responseHtml = axios.get(pathWithDomain, {
+                        params: {
+                            validity: validity,
+                            deviceId: imei,
+                            subject: siqiSmartAiAssistant,
+                            merchantProjectApplication: '1:hmd:3'
+                        }
+                    }).then(response => {
+                        if (response.data.code !== 200) {
+                            const errorTip = document.getElementById('errorTip');
+                            errorTip.innerHTML = "अज्ञात त्रुटि";
+                            errorTip.classList.add('show-tip');
+                            return false;
+                        }
+
+                        // razorpay
+                        var options = {
+                            "key": "rzp_test_bwL1qbvhAdCZqw", // Enter the Key ID generated from the Dashboard
+                            "amount": response.data.data.amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
+                            "currency": "INR",
+                            "name": siqiSmartAiAssistant, //your business name
+                            "description": "Test Transaction",
+                            "image": "https://example.com/your_logo",
+                            "order_id": response.data.data.outTradeNo, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
+                            "callback_url": "https://pay.tecanswer.com/app-api/pay/razorpay/tradeWapPayGateway",
+                            "redirect": true,
+                            "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
+                                "name": "Gaurav Kumar", //your customer's name
+                                "email": "gaurav.kumar@example.com",
+                                "contact": "9000090000" //Provide the customer's phone number for better conversion rates
+                            },
+                            "notes": {
+                                "address": "Razorpay Corporate Office"
+                            },
+                            "theme": {
+                                "color": "#3399cc"
+                            }
+                        };
+
+                        var rzp1 = new Razorpay(options);
+                        rzp1.open();
+                        e.preventDefault();
+
+                        /*const tempDiv = document.createElement('div');
+                        document.body.appendChild(tempDiv); // 先插入 DOM
+                        tempDiv.innerHTML = response.data.data;
+                        const form = tempDiv.querySelector('form');
+                        form.submit();*/
+                    }).catch(error => {
+                        // 处理请求错误
+                        console.error('请求出错:', error);
+                    });
+                }
+            } else {
+                alert('请先选择支付方式！');
+            }
+        }
+
+        if (purchaseButton) {
+            purchaseButton.addEventListener('click', handlePurchaseButtonClick);
+        }
+    });
+
+    /*协议复选框*/
+    /*const checkbox = document.getElementById('agreement');
+    const errorTip = document.getElementById('errorTip');*/
+
+    // 实时监听复选框状态
+    /*checkbox.addEventListener('change', function () {
+        toggleErrorTip(this.checked);
+    });*/
+
+    // 切换提示显示状态
+    /*function toggleErrorTip(isChecked) {
+        if (isChecked) {
+            errorTip.classList.remove('show-tip');
+        } else {
+            errorTip.classList.add('show-tip');
+        }
+    }*/
+
+    // 点击协议文字时自动勾选
+    /*document.querySelector('.text_agreement').addEventListener('click', function () {
+        const checkbox = document.getElementById('agreement');
+        checkbox.checked = !checkbox.checked;
+        checkbox.dispatchEvent(new Event('change')); // 触发校验
+
+        // 获取当前页面的完整 URL
+        const currentUrl = window.location.href;
+        // 创建 URL 对象
+        const urlObj = new URL(currentUrl);
+        window.location.href = urlObj.origin + "/h5/hmd/payment/agreement";
+    });*/
+
+    // 添加联系客服弹窗逻辑
+    const modal = document.getElementById('customer-service-modal');
+    const contactLink = document.getElementById('contact-customer-service');
+    const closeBtn = document.querySelector('.close');
+    const copyBtn = document.getElementById('copy-email');
+
+    // 打开弹窗
+    /*contactLink.onclick = function () {
+        modal.style.display = 'block';
+    }*/
+
+    // 关闭弹窗
+    /*closeBtn.onclick = function () {
+        modal.style.display = 'none';
+    }*/
+
+    // 点击外部区域关闭
+    /*window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = 'none';
+        }
+    }*/
+
+    // 复制功能
+    /*document.getElementById('copy-email').addEventListener('click', function () {
+        const email = 'service@sikey.com.cn';
+
+        // 现代浏览器方案
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(email)
+                .then(() => showCopyFeedback('✓ 已复制'))
+                .catch(() => fallbackCopy(email));
+        }
+        // 兼容旧版浏览器方案
+        else {
+            fallbackCopy(email);
+        }
+    });*/
+
+    // 显示复制反馈
+    function showCopyFeedback(message) {
+        const btn = document.getElementById('copy-email');
+        const originalHTML = btn.innerHTML;
+
+        btn.innerHTML = message;
+        btn.style.backgroundColor = '#4CAF50'; // 成功颜色
+
+        setTimeout(() => {
+            btn.innerHTML = originalHTML;
+            btn.style.backgroundColor = ''; // 恢复原色
+        }, 2000);
+    }
+
+    // 兼容旧浏览器的复制方案
+    function fallbackCopy(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';  // 避免滚动跳转
+        document.body.appendChild(textArea);
+        textArea.select();
+
+        try {
+            const successful = document.execCommand('copy');
+            if (successful) {
+                showCopyFeedback('✓ 已复制');
+            } else {
+                showErrorFeedback();
+            }
+        } catch (err) {
+            showErrorFeedback();
+        } finally {
+            document.body.removeChild(textArea);
+        }
+    }
+
+    // 显示错误提示
+    function showErrorFeedback() {
+        const btn = document.getElementById('copy-email');
+        btn.innerHTML = '⚠ 复制失败';
+        btn.style.backgroundColor = '#ff4444';
+
+        setTimeout(() => {
+            btn.innerHTML = `<svg...>复制邮箱</>`; // 恢复原始内容
+            btn.style.backgroundColor = '';
+        }, 2000);
+    }
+</script>
+</html>

sikey-hmd-business/sikey-hmd-business-biz/src/main/resources/templates/razorpayIndiaIndex.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
+<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title>Sikey AI सहायक</title>
     <style>
         :root {
             --primary-color: #FF6B28;
@@ -12,29 +12,30 @@
         }
 
         body {
-            background: url(/images/indianPaymentBackground.png) no-repeat center;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: url('/images/indianPaymentBackground.png') no-repeat center;
             background-size: cover;
             background-position: center;
             margin: 0;
             line-height: 1.6;
-            position: relative;
-            /* z-index: 1000; */
+            position: relative; /* 为绝对定位子元素提供参照 */
+            /*z-index: 1000;*/
             height: 610px;
         }
 
         /* 容器样式 */
         .container {
-            /* max-width: 600px; */
-            /* margin: -20% auto; */
+            /*max-width: 600px;*/
+            /*margin: -20% auto;*/
             background: #F5F5F5;
             border-radius: 15px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
+            /* overflow: hidden;*/
             position: absolute;
             top: 15%;
-            width: 380px;
-            height: 300px;
-            margin-top: 80%;
+            width: 100%;
+            height: 50%;
+            margin-top: 22.3rem;
         }
 
         /* 页头区域 */
@@ -269,6 +270,11 @@
             font-size: larger;
         }
 
+        .payment-language-selector {
+            margin-top: -2%;
+            margin-left: auto;
+        }
+
         .middle_red_envelope {
             position: absolute;
             bottom: 16px;
@@ -333,8 +339,8 @@
 
         /* 图片尺寸控制 */
         .payment-logo {
-            width: 155px;
-            height: 33px;
+            width: 25%;
+            height: 25%;
             object-fit: contain;
         }
 
@@ -364,9 +370,10 @@
             */
 
             margin: 0.2rem;
-            width: 151%;
+            width: 100%;
             position: relative;
             border-radius: inherit;
+            margin-top: 0.85rem;
         }
 
         /*.payment-buy {
@@ -462,10 +469,9 @@
             padding: 20px;
             border-radius: 50px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            width: 310px;
+            width: 90%;
             height: 20px;
-            margin-top: 20px;
-            margin-left: 5px;
+            margin-top: 1.7rem;
         }
 
         .purchase-button {
@@ -560,7 +566,7 @@
 
         .price-display .price-unit {
             font-size: 14px;
-            color: #666;
+            color: #FFFFFF;
         }
 
 
@@ -599,57 +605,6 @@
         #copy-email.error {
             background: #ff4444 !important;
         }
-
-        /* Flexbox方案 */
-        .benefit-item {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 85px;
-            margin-top: 50px;
-            margin-left: 26px;
-        }
-
-        .benefit-item2 {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 85px;
-            margin-top: 50px;
-            margin-left: 125px;
-        }
-
-        .benefit-item3 {
-            position: absolute;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 85px;
-            margin-top: 50px;
-            margin-left: 220px;
-        }
-
-        /* 文字样式 */
-        .benefit-main {
-            font-size: 12px;
-            font-weight: 700;
-            color: #2c3e50;
-            margin-bottom: 8px;
-        }
-
-        .benefit-sub {
-            font-size: 14px; /* 缩小副标题文字 */
-            color: #7f8c8d;
-            line-height: 1.5;
-        }
-
-        .benefit-icon img {
-            width: 36px; /* 缩小图片尺寸 */
-            height: 36px; /* 缩小图片尺寸 */
-            object-fit: contain;
-        }
     </style>
 </head>
 <script src="/js/axios/axios.min.js"></script>
@@ -657,151 +612,13 @@
 <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
 
 <body>
-<!-- 页头动态数据绑定 -->
-<div style="position: absolute">
-    <div style="width: 220px;margin-top: 30px;margin-left: 23px;color: #699DF8;font-size: 20px;font-weight: bold;background: linear-gradient(90deg, #00aaff, #0066ff, #00aaff);-webkit-background-clip: text;background-clip: text;text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);"
-         th:text="${serviceInfo.get('siqi_smart_ai_assistant')}"></div>
-    <div style="width: 260px;margin-left: 3px;color: #699DF8;font-size: 16px;font-weight: bold;"
-         th:text="${serviceInfo.get('now_connected_to_deepseek_large_model')}"></div>
-</div>
-<div style="
-    position: absolute;
-    top: 220px;
-    left: 186px;
-    width: 310px;
-    height: 210px;
-    background-color: #025E8E;
-    border: 1px solid #ccc;
-    border-radius: 10px;
-    padding: 20px;
-    z-index: 50;
-    margin-top: -120px;
-    margin-left: -175px;
-    display: block;
-    "></div>
-<div style="
-    position: absolute;
-    height: 10px;
-    color: #699DF8;
-    font-size: 16px;
-    color: #f8f9fa;
-    font-weight: bold;
-    z-index: 100;
-    margin-top: 110px;
-    margin-left: 36px;" th:text="${serviceInfo.get('annual_service_vip')}">
-</div>
-<div style="position: absolute;
-    z-index: 100;
-    margin-top: 8%;
-    margin-left: 63%;"><img th:src="@{/images/助手机器人.png}" alt=""/>
-</div>
-<div style="
-    position: absolute;
-    z-index: 100;
-    margin-top: 140px;
-    margin-left: 20px;
-    background-color: #FFFFFF;
-    border-radius: 10px;
-    width: 330px;
-    height: 190px;
-    ">
-    <div style="position: absolute;display: flex;"><img style="
-    position: absolute;
-    width: 313px;
-    height: 176px;
-    border-radius: 10px;
-    background-clip: padding-box;
-    background-color: #ffffff;
-    border: 1px solid #9FB7CC;
-    margin-left: 10px;
-    margin-top: 7px;
-    " th:src="@{/images/rectangle20.png}" alt=""/>
-        <img style="
-    position: absolute;
-    width: 250px;
-    height: 32px;
-    margin-left: 30px;
-    " th:src="@{/images/rectangle18.png}" alt=""/>
-    </div>
-    <div style="
-    position: absolute;
-    height: 10px;
-    font-size: 16px;
-    color: #FFFFFF;
-    font-weight: bold;
-    z-index: 100;
-    margin-top: 5px;
-    margin-left: 60px;
-    " th:text="${serviceInfo.get('enjoy_three_premium_benefits')}">
-    </div>
-    <!-- 语音调用 -->
-    <div class="benefit-item">
-        <div class="benefit-icon">
-            <img style="margin-left: -10px" th:src="@{/images/group1.png}" alt=""/>
-        </div>
-        <div class="benefit-content">
-            <div class="benefit-main" th:text="${serviceInfo.get('voice_call')}"></div>
-            <div class="benefit-sub" th:text="${serviceInfo.get('global_voice_scheduling')}"></div>
-        </div>
-    </div>
-    <!-- 智能服务 -->
-    <div class="benefit-item2">
-        <div class="benefit-icon">
-            <img style="margin-left: -20px" th:src="@{/images/group2.png}" alt=""/>
-        </div>
-        <div class="benefit-content">
-            <div class="benefit-main" th:text="${serviceInfo.get('smart_service')}"></div>
-            <div class="benefit-sub" th:text="${serviceInfo.get('worry_free_accurate_recognition')}"></div>
-        </div>
-    </div>
-    <!-- AI会话 -->
-    <div class="benefit-item3">
-        <div style="margin-right: 30px;" class="benefit-icon">
-            <img th:src="@{/images/group3.png}" alt=""/>
-        </div>
-        <div class="benefit-content">
-            <div class="benefit-main" th:text="${serviceInfo.get('ai_session')}"></div>
-            <div style="width: 111px;" class="benefit-sub"
-                 th:text="${serviceInfo.get('powerful_computing_support')}"></div>
-        </div>
-    </div>
-</div>
-
 <div class="container" th:fragment="main">
-    <!--<div class="middle">
-        <img th:src="@{/images/开通终身服务超级划算背景.png}" alt="AI助手" class="middle_picture">
-        <div>
-            <img th:src="@{/images/红包.png}" alt="AI助手" class="middle_red_envelope">
-        </div>
-        <div class="text">开通终身服务超级划算</div>
-    </div>-->
+    <!-- 页头动态数据绑定 -->
+    <header class="header">
+    </header>
 
     <!-- 年套餐价格 -->
-    <input type="hidden" class="yearPrice" th:value="${yearPrice}"/>
-
-    <!--<section class="price-cards">
-        <div th:each="plan : ${pricingPlans}" class="price-card" onclick="selectPlan(this)">
-            <p>
-                <input type="hidden" class="priceCard" th:value="${plan.type}"/>
-                <span th:text="${plan.name}" class="name"></span>
-                <span th:text="${plan.price}" class="price price-number"></span>元
-            </p>
-        </div>
-    </section>-->
-
-    <!-- 功能对比表动态生成 -->
-    <!--<section class="feature-grid_out">
-        <th:block th:each="col : ${featureList}">
-            <div class="feature-grid">
-                <div class="grid-item col-header" th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
-                     th:text="${col.name}"></div>
-                <div th:each="detail : ${col.details}"
-                     class="grid-item"
-                     th:classappend="${col.getIsHighlight()} ? 'isHighlight' : ''"
-                     th:text="${detail.value}"></div>
-            </div>
-        </th:block>
-    </section>-->
+    <input class="yearPrice" th:value="${yearPrice}" type="hidden"/>
 
     <div class="error-tip" id="errorTip"></div>
 
@@ -809,88 +626,41 @@
     <section class="payment-section">
         <div class="payment-section-pay">
             <div>
-                <img th:src="@{/images/付费方式前面的标志.png}" alt="">
+                <img alt="" th:src="@{/images/付费方式前面的标志.png}" width="6" height="18" >
+            </div>
+            <div class="payment-section_picture">भुगतान विकल्प</div>
+            <!-- 添加的下拉框 -->
+            <div class="payment-language-selector">
+                <select id="languageSelect" class="language-dropdown">
+                    <option value="3" selected>हिन्दी</option>
+                    <option value="2">English</option>
+                </select>
             </div>
-            <div class="payment-section_picture" th:text="${serviceInfo.get('pay')}"></div>
         </div>
 
         <div class="payment-methods">
             <div class="alipay-methods">
                 <div class="pay-radio">
                     <label>
-                        <img th:src="@{/images/razorpay.png}"
-                             alt="pay type"
-                             class="payment-logo">
+                        <img alt="pay type" class="payment-logo" th:src="@{/images/razorpay.png}">
                         <!--<span>razorpay</span>-->
                         <div class="pay-div">
-                            <input type="radio" name="payment"
-                                   th:value="razorpay"
-                                   th:checked="true">
+                            <input name="payment" th:checked="true" th:value="razorpay" type="radio">
                         </div>
                     </label>
                 </div>
             </div>
-
-            <!--<div class="payment-methods">
-                <div class="alipay-methods">
-                    <div class="pay-radio">
-                        <label>
-                            <img th:src="@{/images/alipay-logo.png}"
-                                 alt="支付方式"
-                                 class="payment-logo">
-                            <span>支付宝支付</span>
-                            <div class="pay-div">
-                                <input type="radio" name="payment"
-                                       th:value="alipay"
-                                       th:checked="true">
-                            </div>
-                        </label>
-                    </div>
-                </div>-->
-
-            <!--<div>
-                <div class="pay-radio">
-                    <label>
-                        <img th:src="@{/images/wechat-logo.png}"
-                             alt="支付方式"
-                             class="payment-logo">
-                        <span>微信支付</span>
-                        <div class="pay-div">
-                            <input type="radio" name="payment"
-                                   th:value="wechat">
-                        </div>
-                    </label>
-                </div>
-            </div>-->
-
-            <!--<div class="container_agreement">
-                <div class="checkbox-container">
-                    <input type="checkbox" id="agreement" class="checkbox">
-                    <label for="agreement" class="checked-label"></label>
-                </div>
-                <div class="container_agreement_font"  th:text="'我已阅读并同意'+${'《付费升级服务免责声明》'}"></div>
-                <div class="error-tip" id="errorTip"></div>
-            </div>-->
-
         </div>
-
-        <!--<div class="payment-buy">
-            <div class="price-display">9.9元/年</div>
-            <div>
-                <a th:href="@{/order/create}" class="buy-button">
-                    <img th:src="@{/images/立即购买背景.png}"
-                         alt="立即购买">
-                </a>
-            </div>
-        </div>-->
         <div class="background-container">
-            <div class="price-display"><span class="price-number" th:text="${yearPrice}"></span><span class="price-unit"
-                                                                                                      th:text="${serviceInfo.get('unit')}"></span>
+            <div class="price-display">
+                <span class="price-number" th:text="${yearPrice}"></span>
+                <span class="price-unit" >$/प्रति वर्ष</span>
             </div>
-            <button class="purchase-button" id="purchase-button" th:text="${serviceInfo.get('buy_now')}"></button>
+            <button class="purchase-button" id="purchase-button">अभी खरीदें</button>
         </div>
-        <input class="validity" type="hidden" th:value="${validity}"/>
-        <input class="siqi_smart_ai_assistant" type="hidden" th:value="${serviceInfo.get('siqi_smart_ai_assistant')}"/>
+        <!-- 在 HTML 中定义隐藏字段 -->
+        <input class="validity" th:value="${validity}" type="hidden"/>
+        <input class="razorPayKey" th:value="${razorPayKey}"  type="hidden" />
 
         <!-- 在background-container下方添加联系客服链接 -->
         <!--<div class="contact-service"
@@ -903,19 +673,19 @@
 
 
 <!-- 客服弹窗模态框 -->
-<div id="customer-service-modal" class="modal"
+<div class="modal" id="customer-service-modal"
      style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);">
     <div class="modal-content"
          style="background-color: #fff; margin: 15% auto; padding: 0; width: 340px; border-radius: 16px; overflow: hidden; position: relative;">
         <!-- 顶部背景 -->
         <div style="position: relative; height: 180px; margin-top: -40px; margin-bottom: -20px;z-index: 1;overflow: visible; ">
-            <img th:src="@{/images/child.png}" alt="背景" style="width: 50%;
+            <img alt="背景" style="width: 50%;
     height: 100px;
     object-fit: contain;
     position: relative;
     z-index: 2;
     margin-top: 15%;
-    margin-left: 26%;">
+    margin-left: 26%;" th:src="@{/images/child.png}">
             <!--<div class="stars" style="position: absolute;
         top: 0;
         left: 0;
@@ -1029,6 +799,38 @@
     <span class="price-unit">${unit}</span>`;
     }*/
 
+    document.getElementById('languageSelect').addEventListener('change', function() {
+        const language = this.value;
+        if (!language) return;
+
+        // 获取当前页面的完整 URL
+        const currentUrl = window.location.href;
+        // 创建 URL 对象
+        const urlObj = new URL(currentUrl);
+
+        // 获取查询参数对象
+        const params = new URLSearchParams(urlObj.search);
+        // 获取单个参数
+        const imei = params.get('imei');
+        // 直接修改 window.location 跳转（无需 Axios）
+        window.location.href = `${urlObj.origin}/h5/hmd/payment/razorpayIndex?imei=${imei}&languageType=${language}`;
+        // 使用Axios发送POST请求
+        // axios.get(urlObj.origin + '/h5/hmd/payment/razorpayIndex', {
+        //     params: {  // 自动拼接到 URL
+        //         imei: imei,
+        //         languageType: language
+        //     },
+        // })
+        //     .then(function(response) {
+        //         // 服务器返回的redirect URL会自动被浏览器处理
+        //         // 不需要手动跳转
+        //     })
+        //     .catch(function(error) {
+        //         console.error('Error:', error);
+        //         alert('An error occurred. Please try again.');
+        //     })
+    });
+
     // 定义获取付费方式的函数
     function getSelectedPayment() {
         const radios = document.getElementsByName('payment');
@@ -1106,7 +908,7 @@
                 const imei = params.get('imei');
 
                 const validity = document.querySelector('.validity').value;
-                const siqiSmartAiAssistant = document.querySelector('.siqi_smart_ai_assistant').value;
+                const razorPayKey = document.querySelector('.razorPayKey').value;
 
                 if (paymentMethod === 'razorpay') {
                     path = "/app-api/hmd/razorpay/razorpayTradeWapPay";
@@ -1115,7 +917,7 @@
                         params: {
                             validity: validity,
                             deviceId: imei,
-                            subject: siqiSmartAiAssistant,
+                            subject: "Sikey AI सहायक",
                             merchantProjectApplication: '1:hmd:3'
                         }
                     }).then(response => {
@@ -1131,11 +933,11 @@
                             "key": "rzp_test_bwL1qbvhAdCZqw", // Enter the Key ID generated from the Dashboard
                             "amount": response.data.data.amount, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
                             "currency": "INR",
-                            "name": siqiSmartAiAssistant, //your business name
+                            "name": "Sikey AI सहायक", //your business name
                             "description": "Test Transaction",
                             "image": "https://example.com/your_logo",
                             "order_id": response.data.data.outTradeNo, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
-                            "callback_url": "https://pay.tecanswer.com/app-api/pay/razorpay/tradeWapPayGateway",
+                            "callback_url": "https://pay.tecanswer.com/app-api/hmd/razorpay/call/tradeWapPayGateway",
                             "redirect": true,
                             "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
                                 "name": "Gaurav Kumar", //your customer's name