@2kog/pkg-widget 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@2kog/pkg-widget",
-    "version": "0.1.17",
+    "version": "0.1.18",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/src/App.vue

@@ -10,7 +10,7 @@
                     :optionsWithFlag="false"></langSelect>
         <pay></pay>
 
-        <payment ></payment>
+        <payment term-link="/link"></payment>
     </div>
 </template>
 

package/src/components/common/payment.vue

@@ -56,8 +56,8 @@
                     </div>
                 </div>
                 <div class="secure-badge">
-                    <i class="fas fa-lock secure-icon"></i>
-                    {{ t("pay.secureChannel") }}
+                    <i class="fas fa-qrcode"></i>
+                    <span>{{ t(`pay.${activeMethod === "wepay" ? "wechatScan" : "alipayScan"}`) }}</span>
                 </div>
 
                 <!-- 错误提示 -->
@@ -70,7 +70,12 @@
 
             <!-- 底部插槽 -->
             <div class="footer-slot">
-                <slot name="footer" :texts="texts"></slot>
+                <slot name="footer" :texts="texts">
+                    <div class="m-agreement">
+                        <i class="fas fa-shield-halved agreement-icon"></i>
+                        <span class="agreement-text" v-html="t('pay.agreement')"></span>
+                    </div>
+                </slot>
             </div>
         </div>
     </div>
@@ -141,6 +146,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        termLink: {
+            type: String,
+            default: "/link",
+        },
     },
     data() {
         return {
@@ -432,14 +441,50 @@ export default {
 <style lang="less">
 .c-payment-component {
     // max-width: 28rem;
-    flex: 1;
     width: 100%;
-    background-color: #12141a;
-    color: white;
+    background-color: #fff;
+    color: #333;
     // border-radius: 1rem;
     padding: 2rem;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     border: 1px solid rgb(31 41 55);
+
+    .m-agreement {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 0.6rem;
+        font-size: 0.75rem;
+        color: #94a3b8;
+        line-height: 1.5;
+        max-width: 80%;
+        margin: 0 auto;
+        padding: 0.8rem 1rem;
+        border-radius: 0.75rem;
+        transition: all 0.3s ease;
+
+        .agreement-icon {
+            margin-top: 0.15rem;
+            color: #64748b;
+            font-size: 0.875rem;
+        }
+
+        .agreement-text {
+            text-align: left;
+
+            .u-link {
+                color: #3b82f6;
+                font-weight: 600;
+                cursor: pointer;
+                text-decoration: underline;
+                text-underline-offset: 2px;
+
+                &:hover {
+                    color: #2563eb;
+                }
+            }
+        }
+    }
 }
 
 .c-payment__header {
@@ -463,7 +508,7 @@ export default {
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
-    border: 2px solid rgba(255, 255, 255, 0.05);
+    border: 2px solid rgba(0, 0, 0, 0.05);
     transition: all 0.3s;
     background: transparent;
 

package/src/locale/en-us/payment.js

@@ -3,12 +3,18 @@ export default {
         wechat: "WeChat Pay",
         alipay: "Alipay",
         secureChannel: "Official Encrypted Payment Channel, Active Immediately",
+        wechatScan: "Scan the QR code with WeChat to pay",
+        alipayScan: "Scan the QR code with Alipay to pay",
 
         createOrderFailed: "Failed to create order, please try again",
-        orderTimeout: "Order processing timed out, please refresh and try again",
+        orderTimeout:
+            "Order processing timed out, please refresh and try again",
         orderFailed: "Order processing failed, please try again",
         getQrcodeFailed: "Failed to get payment QR code, please try again",
-        paymentTimeout: "Payment timed out, please contact customer service if you have paid",
+        paymentTimeout:
+            "Payment timed out, please contact customer service if you have paid",
         paymentFailed: "Payment failed, please try again",
+        agreement:
+            "Payment signifies agreement to the <span class='u-link'>Terms of Service</span>. Virtual services are not eligible for 7-day unconditional refunds.",
     },
-}
+};

package/src/locale/zh-cn/payment.js

@@ -3,6 +3,8 @@ export default {
         wechat: "微信支付",
         alipay: "支付宝",
         secureChannel: "官方加密支付通道，即开即用",
+        wechatScan: "打开微信扫一扫即可支付",
+        alipayScan: "打开支付宝扫一扫即可支付",
 
         createOrderFailed: "创建订单失败，请重试",
         orderTimeout: "订单处理超时，请刷新重试",
@@ -10,5 +12,7 @@ export default {
         getQrcodeFailed: "获取支付二维码失败，请重试",
         paymentTimeout: "支付超时，如已支付请联系客服",
         paymentFailed: "支付失败，请重试",
+        agreement:
+            "支付即视为同意<a class='u-link' href={termLink}>《服务条款》</a>，虚拟服务不支持7天无理由退款",
     },
-}
+};