@2kog/pkg-widget 0.1.17 → 0.1.19

package/package.json

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

package/src/App.vue

@@ -3,21 +3,27 @@
         <h1>IRuxu Pkg Widget</h1>
         <Logo></Logo>
 
-        <UploadImage :upload-fn="uploadImage" :domain="domain" :url="avatar"></UploadImage>
+        <UploadImage
+            :upload-fn="uploadImage"
+            :domain="domain"
+            :url="avatar"
+        ></UploadImage>
 
-        <langSelect :show-flag="false"
-                    :show-name="true"
-                    :optionsWithFlag="false"></langSelect>
+        <langSelect
+            :show-flag="false"
+            :show-name="true"
+            :optionsWithFlag="false"
+        ></langSelect>
         <pay></pay>
 
-        <payment ></payment>
+        <payment term-link="/doc/terms"></payment>
     </div>
 </template>
 
 <script>
 import Logo from "./components/common/logo.vue";
 import UploadImage from "./components/common/upload-image.vue";
-import {upload} from "./assets/data/upload";
+import { upload } from "./assets/data/upload";
 import langSelect from "./components/common/lang-select.vue";
 import pay from "./demo/pay-dialog-demo.vue";
 import payment from "./components/common/payment.vue";
@@ -28,7 +34,7 @@ export default {
         UploadImage,
         langSelect,
         pay,
-        payment
+        payment,
     },
     data() {
         return {
@@ -38,14 +44,14 @@ export default {
             domain: "https://cdn.iruxu.com/",
             avatar: "user/avatar/2024/11/27/81348085.jpeg",
 
-            show: true
+            show: true,
         };
     },
     methods: {
         uploadImage(file) {
-            return upload(file)
-        }
-    }
+            return upload(file);
+        },
+    },
 };
 </script>
 

package/src/components/common/payment.vue

@@ -8,14 +8,21 @@
         <div class="modal-main m-purchase-pay-main">
             <!-- 支付方式切换 -->
             <div class="payment-methods-grid">
-                <slot name="payment-methods" :methods="paymentMethods" :active="activeMethod" :switch="switchPay">
+                <slot
+                    name="payment-methods"
+                    :methods="paymentMethods"
+                    :active="activeMethod"
+                    :switch="switchPay"
+                >
                     <button
                         v-for="method in paymentMethods"
                         :key="method.value"
                         @click="switchPay(method.value)"
                         class="pay-method-btn"
                         :class="[
-                            activeMethod === method.value ? 'active ' + method.activeClass : '',
+                            activeMethod === method.value
+                                ? 'active ' + method.activeClass
+                                : '',
                             method.customClass || '',
                         ]"
                     >
@@ -33,7 +40,9 @@
                         <!-- Loading 状态 -->
                         <div v-if="loading" class="loading-overlay">
                             <slot name="loading">
-                                <i class="fas fa-spinner fa-spin loading-icon"></i>
+                                <i
+                                    class="fas fa-spinner fa-spin loading-icon"
+                                ></i>
                             </slot>
                         </div>
 
@@ -47,17 +56,28 @@
                         />
 
                         <!-- 默认图标 -->
-                        <slot v-else name="placeholder" :activeMethod="activeMethod">
+                        <slot
+                            v-else
+                            name="placeholder"
+                            :activeMethod="activeMethod"
+                        >
                             <i
                                 class="placeholder-icon"
-                                :class="currentPaymentMethod?.icon || 'fas fa-qrcode'"
+                                :class="
+                                    currentPaymentMethod?.icon ||
+                                    'fas fa-qrcode'
+                                "
                             ></i>
                         </slot>
                     </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 +90,18 @@
 
             <!-- 底部插槽 -->
             <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">
+                            {{ t("pay.agreement_prefix") }}
+                            <a class="u-link" :href="termLink">{{
+                                t("pay.agreement_link")
+                            }}</a>
+                            {{ t("pay.agreement_suffix") }}
+                        </span>
+                    </div>
+                </slot>
             </div>
         </div>
     </div>
@@ -84,13 +115,13 @@ import zhCn from "../../locale/zh-cn/payment";
 
 // 创建独立的 i18n 实例
 const getLocale = () => {
-    const storedLanguage = localStorage.getItem('lang');
+    const storedLanguage = localStorage.getItem("lang");
     if (!storedLanguage) {
         return navigator.language;
     } else {
         return storedLanguage;
     }
-}
+};
 
 const payI18n = createI18n({
     locale: getLocale(),
@@ -141,6 +172,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        termLink: {
+            type: String,
+            default: "/doc/terms",
+        },
     },
     data() {
         return {
@@ -209,11 +244,15 @@ export default {
     },
     computed: {
         isMobile() {
-            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                navigator.userAgent,
+            );
         },
 
         currentPaymentMethod() {
-            return this.paymentMethods.find((m) => m.value === this.activeMethod);
+            return this.paymentMethods.find(
+                (m) => m.value === this.activeMethod,
+            );
         },
 
         actualPayChannel() {
@@ -225,7 +264,9 @@ export default {
             }
 
             if (typeof method.channel === "object") {
-                return this.isMobile ? method.channel.mobile : method.channel.pc;
+                return this.isMobile
+                    ? method.channel.mobile
+                    : method.channel.pc;
             }
 
             return this.activeMethod;
@@ -311,13 +352,17 @@ export default {
                 try {
                     this.orderPollingRetries++;
 
-                    if (this.orderPollingRetries > this.pollingConfig.maxRetries) {
+                    if (
+                        this.orderPollingRetries > this.pollingConfig.maxRetries
+                    ) {
                         this.clearTimer("order");
                         this.handleError(this.texts.orderTimeout);
                         return;
                     }
 
-                    const response = await this.api.getOrderStatus(this.pendingOrderId);
+                    const response = await this.api.getOrderStatus(
+                        this.pendingOrderId,
+                    );
 
                     if (response && response.status === 2) {
                         this.clearTimer("order");
@@ -326,7 +371,9 @@ export default {
                         await this.getPaymentQrcode();
                     } else if (response && response.status === -1) {
                         this.clearTimer("order");
-                        this.handleError(response.message || this.texts.orderFailed);
+                        this.handleError(
+                            response.message || this.texts.orderFailed,
+                        );
                     }
                 } catch (err) {
                     console.error("Failed to poll order status:", err);
@@ -346,7 +393,11 @@ export default {
                     params.qr_pay_mode = QR_PAY_MODE_ALIPAY_PC;
                 }
 
-                const response = await this.api.getPaymentQRCode(this.paymentId, this.actualPayChannel, params);
+                const response = await this.api.getPaymentQRCode(
+                    this.paymentId,
+                    this.actualPayChannel,
+                    params,
+                );
 
                 if (response) {
                     this.qrcode = response.qrcode || response;
@@ -372,14 +423,19 @@ export default {
                 try {
                     this.paymentPollingRetries++;
 
-                    if (this.paymentPollingRetries > this.pollingConfig.maxRetries) {
+                    if (
+                        this.paymentPollingRetries >
+                        this.pollingConfig.maxRetries
+                    ) {
                         this.clearTimer("payment");
                         this.warningVisible = true;
                         this.handleError(this.texts.paymentTimeout);
                         return;
                     }
 
-                    const response = await this.api.queryPaymentStatus(this.paymentId);
+                    const response = await this.api.queryPaymentStatus(
+                        this.paymentId,
+                    );
 
                     if (response && response.status === 1) {
                         this.clearTimer("payment");
@@ -432,14 +488,46 @@ 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: #6777ef;
+                font-weight: 600;
+                cursor: pointer;
+                text-decoration: underline;
+                text-underline-offset: 2px;
+            }
+        }
+    }
 }
 
 .c-payment__header {
@@ -463,7 +551,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;
 
@@ -475,7 +563,6 @@ export default {
         font-size: 0.75rem;
         font-weight: 500;
     }
-
 }
 .wepay-icon {
     color: #10b981;
@@ -594,7 +681,11 @@ export default {
         content: "";
         position: absolute;
         inset: 0;
-        background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
+        background: linear-gradient(
+            180deg,
+            rgba(15, 23, 42, 0.85) 0%,
+            rgba(15, 23, 42, 0.95) 100%
+        );
         z-index: 1;
     }
 

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

@@ -3,12 +3,20 @@ 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_prefix: "Payment signifies agreement to the",
+        agreement_link: "Service Terms",
+        agreement_suffix:
+            ", 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,8 @@ export default {
         getQrcodeFailed: "获取支付二维码失败，请重试",
         paymentTimeout: "支付超时，如已支付请联系客服",
         paymentFailed: "支付失败，请重试",
+        agreement_prefix: "支付即视为同意",
+        agreement_link: "服务条款",
+        agreement_suffix: "，虚拟服务不支持7天无理由退款",
     },
-}
+};