feat: 加载套餐信息

.env.development

@@ -3,4 +3,4 @@ VITE_APP_ENV="development"
 VITE_DEV_PORT=8848
 
 VITE_API_BASE_URL="/dev/api/v1"
-VITE_DEV_PROXY_TARGET_API_BASE_URL="https://testactivity.jumpjump.io/api/v1"
+VITE_DEV_PROXY_TARGET_API_BASE_URL="https://nomo-api.clickto.dev/api/v1"

src/config/request/encryptionInterceptors.ts

@@ -1,3 +1,5 @@
+import isNil from 'ramda/es/isNil';
+
 import globalConfig from '@/config';
 import { bytesBase64decode } from '@/utils/crypto';
 import {
@@ -32,7 +34,23 @@ export const requestEncryptionInterceptor: IRequestInterceptorAxios = async (con
         return config;
     }
 
-    if (['post', 'put'].includes(config.method?.toLowerCase() || '') && config.data) {
+    // 指定接口数据压缩方式
+    config.headers = config.headers ?? {};
+    config.headers['X-NL-Content-Encoding'] = compressMethod;
+
+    // 设置 X-Request-Timestamp
+    const existingTs = config.headers['X-Request-Timestamp'];
+    let timestamp: number;
+    if (!isNil(existingTs) && existingTs !== '') {
+        timestamp = Number(existingTs);
+        if (Number.isNaN(timestamp)) timestamp = currentUnixTimestamp();
+    } else {
+        timestamp = currentUnixTimestamp();
+        config.headers['X-Request-Timestamp'] = timestamp;
+    }
+
+    if (['post', 'put'].includes(config.method?.toLowerCase() || '') && isNil(config.data)) {
+        console.log('[requestEncryptionInterceptor] config:', config);
         // 指定后端返回二进制数据
         config.responseType = 'arraybuffer';
 
@@ -40,20 +58,6 @@ export const requestEncryptionInterceptor: IRequestInterceptorAxios = async (con
         config.headers = config.headers ?? {};
         config.headers['Content-Type'] = 'application/octet-stream';
 
-        // 指定接口数据压缩方式
-        config.headers['X-NL-Content-Encoding'] = compressMethod;
-
-        // 设置 X-Request-Timestamp
-        const existingTs = config.headers['X-Request-Timestamp'];
-        let timestamp: number;
-        if (existingTs != null && existingTs !== '') {
-            timestamp = Number(existingTs);
-            if (Number.isNaN(timestamp)) timestamp = currentUnixTimestamp();
-        } else {
-            timestamp = currentUnixTimestamp();
-            config.headers['X-Request-Timestamp'] = timestamp;
-        }
-
         // 加密请求体
         const keyBytes = bytesBase64decode(encryptionKey);
         const dataBytes = new TextEncoder().encode(JSON.stringify(config.data));

src/pages/pricing/useService.ts

@@ -1,8 +1,8 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { PlanTagType, PayMethodType } from '@/defines';
 import { userConfigModel } from '@/models/userConfigModel';
-import { fetchGetUserConfig } from '@/services/config';
+import { fetchGetUserConfig, fetchPlanList } from '@/services/config';
 import { getToken, setToken } from '@/utils/authUtils';
 import { currentUnixTimestamp } from '@/utils/timeUtils';
 
@@ -24,6 +24,8 @@ export interface UseServiceReturn {
 export function useService(): UseServiceReturn {
     const { setUserConfig } = userConfigModel.useModel();
 
+    const [plans, setPlans] = useState<Plan[]>([]);
+
     useEffect(() => {
         const userinfo = getToken();
         const expired = (userinfo?.accessExpires ?? 0) - currentUnixTimestamp() <= 0;
@@ -39,60 +41,27 @@ export function useService(): UseServiceReturn {
             .catch(() => {});
     }, [setUserConfig]);
 
-    const plans = useMemo<Plan[]>(
-        () => [
-            {
-                id: 1,
-                title: '12个月',
-                subTitle: 'USD 53.99',
-                introduce: '折合 USD 0.15/天',
-                tag: '0.6折优惠',
-                tagType: PlanTagType.MOST_POPULAR,
-                price: 53.99,
-            },
-            {
-                id: 2,
-                title: '3个月',
-                subTitle: 'USD 15.99',
-                introduce: '折合 USD 0.18/天',
-                tag: '0.8折优惠',
-                tagType: PlanTagType.LIMITED_TIME,
-                price: 15.99,
-            },
-            {
-                id: 3,
-                title: '1个月',
-                subTitle: 'USD 2.99',
-                introduce: '折合 USD 0.22/天',
-                tag: '0.9折优惠',
-                tagType: PlanTagType.NONE,
-                price: 2.99,
-            },
-            // {
-            //     id: 4,
-            //     title: '7天',
-            //     subTitle: 'USD 1.99',
-            //     introduce: '折合 USD 0.28/天',
-            //     tag: '无优惠',
-            //     tagType: PlanTagType.NONE,
-            //     price: 1.99,
-            // },
-            // {
-            //     id: 5,
-            //     title: '7天',
-            //     subTitle: 'USD 1.99',
-            //     introduce: '折合 USD 0.28/天',
-            //     tag: '无优惠',
-            //     tagType: PlanTagType.NONE,  
-            //     price: 1.99,
-            // },
-        ],
-        []
-    );
+    useEffect(() => {
+        fetchPlanList({})
+            .then((res) => {
+                const list = res?.data?.list ?? [];
+                const mapped: Plan[] = list.map((item, index) => ({
+                    id: item.ServiceChannelPlanId ?? index,
+                    title: item.title ?? '',
+                    subTitle: item.subTitle ?? '',
+                    introduce: item.introduce ?? '',
+                    tag: item.tag,
+                    tagType: item.tagType ?? PlanTagType.NONE,
+                    price: item.price ?? 0,
+                }));
+                setPlans(mapped);
+            })
+            .catch(() => {});
+    }, []);
 
     const payMethods = useMemo<PayMethodType[]>(
         () => [
-            PayMethodType.APPLE_PAY, 
+            PayMethodType.APPLE_PAY,
             PayMethodType.GOOGLE_PAY,
             // PayMethodType.PAYPAL,
             // PayMethodType.WECHAT,

src/services/config/index.ts

@@ -6,3 +6,11 @@ export async function fetchGetUserConfig(_: API.Empty, options?: { [key: string]
         ...(options || {}),
     });
 }
+
+export async function fetchPlanList(_: API.Empty, options?: { [key: string]: any }) {
+    return request<API.Result<API.PlanList>>('/user/owChannelPlanList', {
+        method: 'POST',
+        ...(options || {}),
+        requireToken: false,
+    });
+}

src/services/config/typings.d.ts

@@ -0,0 +1,31 @@
+type PlanTagType = import('@/defines').PlanTagType;
+
+declare namespace API {
+    type Plan = {
+        channelItemId?: string;
+        title?: string;
+        subTitle?: string;
+        introduce?: string;
+        orgPrice?: number;
+        price?: number;
+        tag?: string;
+        tagType?: PlanTagType;
+        currency?: number;
+        recommend?: boolean;
+        isDefault?: boolean;
+        sort?: number;
+        deviceLimit?: number;
+        isSubscribe?: boolean;
+        subscribeType?: number;
+        subscribePeriodValue?: number;
+        payoutType?: string;
+        payoutData?: string;
+        ServicePlanId?: number;
+        ServiceChannelPlanId?: number;
+    };
+
+    type PlanList = {
+        total: number;
+        list: Plan[];
+    }
+}