feat: 优化字帖功能

2026-02-11 16:03:39 +08:00
parent 943250b34a
commit cbf07faf27
11 changed files with 474 additions and 280 deletions
@@ -0,0 +1,254 @@
+/**
+ * 下载打印通用工具
+ * 支持下载次数限制和激励广告
+ */
+
+import { checkAndSaveImage } from './saveImage';
+import tracker from './tracker';
+
+// 存储键名
+const STORAGE_KEY_DOWNLOAD_COUNT = 'downloadCount';
+const STORAGE_KEY_DOWNLOAD_DATE = 'downloadDate';
+const STORAGE_KEY_WATCHED_AD_TODAY = 'watchedAdToday';
+
+// 免费下载次数限制
+const FREE_DOWNLOAD_LIMIT = 5;
+
+// 激励视频广告单元ID
+const AD_UNIT_ID = 'adunit-eff5626f8b68c2e0';
+
+/**
+ * 获取今天的日期字符串（YYYY-MM-DD格式）
+ */
+function getTodayDateString(): string {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+/**
+ * 获取今日下载次数
+ */
+function getTodayDownloadCount(): number {
+    const today = getTodayDateString();
+    const downloadDate = wx.getStorageSync(STORAGE_KEY_DOWNLOAD_DATE);
+    
+    // 如果不是今天，重置计数
+    if (downloadDate !== today) {
+        wx.setStorageSync(STORAGE_KEY_DOWNLOAD_COUNT, 0);
+        wx.setStorageSync(STORAGE_KEY_DOWNLOAD_DATE, today);
+        wx.setStorageSync(STORAGE_KEY_WATCHED_AD_TODAY, false);
+        return 0;
+    }
+    
+    return wx.getStorageSync(STORAGE_KEY_DOWNLOAD_COUNT) || 0;
+}
+
+/**
+ * 增加今日下载次数
+ */
+function incrementDownloadCount(): void {
+    const today = getTodayDateString();
+    const count = getTodayDownloadCount();
+    wx.setStorageSync(STORAGE_KEY_DOWNLOAD_COUNT, count + 1);
+    wx.setStorageSync(STORAGE_KEY_DOWNLOAD_DATE, today);
+}
+
+/**
+ * 检查今日是否已观看广告
+ */
+function hasWatchedAdToday(): boolean {
+    const today = getTodayDateString();
+    const watchedDate = wx.getStorageSync(STORAGE_KEY_WATCHED_AD_TODAY);
+    return watchedDate === today;
+}
+
+/**
+ * 标记今日已观看广告
+ */
+function markWatchedAdToday(): void {
+    const today = getTodayDateString();
+    wx.setStorageSync(STORAGE_KEY_WATCHED_AD_TODAY, today);
+}
+
+/**
+ * 创建激励视频广告实例
+ */
+function createVideoAd() {
+    if (!wx.createRewardedVideoAd) {
+        return null;
+    }
+    
+    const videoAd = wx.createRewardedVideoAd({
+        adUnitId: AD_UNIT_ID,
+    });
+    
+    videoAd.onLoad(() => {
+        console.log('激励视频广告加载成功');
+    });
+    
+    videoAd.onError((err) => {
+        console.error('激励视频广告加载失败', err);
+    });
+    
+    return videoAd;
+}
+
+/**
+ * 显示激励视频广告
+ */
+function showVideoAd(): Promise<boolean> {
+    return new Promise((resolve) => {
+        const videoAd = createVideoAd();
+        
+        if (!videoAd) {
+            wx.showToast({
+                title: '当前环境不支持激励广告',
+                icon: 'none',
+            });
+            resolve(false);
+            return;
+        }
+        
+        // 显示 loading
+        wx.showLoading({
+            title: '加载中...',
+            mask: true,
+        });
+        
+        // 监听广告关闭事件
+        videoAd.onClose((res) => {
+            // 隐藏 loading（如果还在显示）
+            wx.hideLoading();
+            
+            if (res && res.isEnded) {
+                // 用户完整观看了广告
+                markWatchedAdToday();
+                resolve(true);
+            } else {
+                // 用户提前关闭了广告
+                resolve(false);
+            }
+        });
+        
+        // 显示广告
+        videoAd
+            .show()
+            .then(() => {
+                // 广告显示成功，隐藏 loading
+                wx.hideLoading();
+            })
+            .catch(() => {
+                // 失败重试，保持 loading 显示
+                videoAd
+                    .load()
+                    .then(() => {
+                        // 加载成功，继续显示广告
+                        return videoAd.show();
+                    })
+                    .then(() => {
+                        // 广告显示成功，隐藏 loading
+                        wx.hideLoading();
+                    })
+                    .catch((err) => {
+                        // 最终失败，隐藏 loading 并提示
+                        wx.hideLoading();
+                        console.error('激励视频广告显示失败', err);
+                        wx.showToast({
+                            title: '广告加载失败，请稍后重试',
+                            icon: 'none',
+                        });
+                        resolve(false);
+                    });
+            });
+    });
+}
+
+/**
+ * 执行下载
+ */
+function doDownload(
+    canvas: Canvas,
+    options: {
+        successToast?: string;
+        errorToast?: string;
+        trackerName?: string;
+        trackerMode?: string;
+    },
+) {
+    // 上报下载埋点
+    if (options.trackerName) {
+        if (options.trackerMode) {
+            tracker.reportDownload(options.trackerName, options.trackerMode);
+        } else {
+            tracker.reportDownload(options.trackerName);
+        }
+    }
+    
+    // 增加下载次数
+    incrementDownloadCount();
+    
+    // 执行下载（checkAndSaveImage 内部已有成功提示，这里不需要额外处理）
+    checkAndSaveImage(canvas);
+}
+
+/**
+ * 下载打印（通用方法）
+ * @param canvas Canvas 实例
+ * @param options 配置选项
+ * @param options.successToast 成功提示（可选，默认：'保存成功，请在相册中查看'）
+ * @param options.errorToast 错误提示（可选，默认：'请先生成内容'）
+ * @param options.trackerName 埋点名称（可选）
+ * @param options.trackerMode 埋点模式（可选）
+ */
+export async function downloadPrint(
+    canvas: Canvas | null,
+    options: {
+        successToast?: string;
+        errorToast?: string;
+        trackerName?: string;
+        trackerMode?: string;
+    } = {},
+): Promise<void> {
+    // 检查 canvas 是否存在
+    if (!canvas) {
+        wx.showToast({
+            title: options.errorToast || '请先生成内容',
+            icon: 'none',
+        });
+        return;
+    }
+    
+    // 获取今日下载次数
+    const downloadCount = getTodayDownloadCount();
+    const hasWatchedAd = hasWatchedAdToday();
+    
+    // 如果已观看广告，直接下载
+    if (hasWatchedAd) {
+        doDownload(canvas, options);
+        return;
+    }
+    
+    // 如果未超过免费次数，直接下载
+    if (downloadCount < FREE_DOWNLOAD_LIMIT) {
+        doDownload(canvas, options);
+        return;
+    }
+    
+    // 超过免费次数，需要观看广告
+    const watched = await showVideoAd();
+    if (watched) {
+        // 观看完成，可以下载
+        doDownload(canvas, options);
+    }
+    /* else {
+        // 未观看完成，提示用户
+        wx.showToast({
+            title: '需要完整观看广告才能下载',
+            icon: 'none',
+            duration: 2000,
+        });
+    } */
+}
@@ -8,7 +8,8 @@ const CACHE_CONFIG = {
    expireDays: 7, // 缓存过期天数
    // url: 'https://cdn.joeyone.cn/doodle/words-svg-all.json' // 远程数据地址
    // url: 'https://cdn.joeyone.cn/doodle/words-svg-3000.json' // 远程数据地址
-    url: 'https://cdn.joeyone.cn/doodle/char_svg_3500.json' // 远程数据地址
+    // url: 'https://cdn.joeyone.cn/doodle/char_svg_3500.json' // 远程数据地址
+    url: 'https://cdn.joeyone.cn/doodle/char_common_stroke.json', // 远程数据地址
 };

 /**
@@ -28,7 +29,7 @@ interface CacheData {
 function isCacheExpired(timestamp: number): boolean {
    const now = Date.now();
    const expireTime = CACHE_CONFIG.expireDays * 24 * 60 * 60 * 1000; // 7天的毫秒数
-    return (now - timestamp) > expireTime;
+    return now - timestamp > expireTime;
 }

 /**
@@ -52,7 +53,10 @@ function getCacheData(): CacheData | null {
            return null;
        }

-        console.log('使用本地缓存的SVG汉字数据，缓存时间:', new Date(cacheData.timestamp).toLocaleString());
+        console.log(
+            '使用本地缓存的SVG汉字数据，缓存时间:',
+            new Date(cacheData.timestamp).toLocaleString(),
+        );
        return cacheData;
    } catch (error) {
        console.error('读取SVG汉字数据缓存失败:', error);
@@ -69,7 +73,7 @@ function saveCacheData(data: Record<string, string[]>): void {
        const cacheData: CacheData = {
            data,
            timestamp: Date.now(),
-            version: '1.0' // 可以用于后续版本控制
+            version: '1.0', // 可以用于后续版本控制
        };

        wx.setStorageSync(CACHE_CONFIG.key, JSON.stringify(cacheData));
@@ -91,13 +95,17 @@ async function fetchRemoteData(): Promise<Record<string, string[]>> {
        {
            timeout: 15000, // 15秒超时
            header: {
-                'Accept': 'application/json',
-                'Cache-Control': 'no-cache'
-            }
-        }
+                Accept: 'application/json',
+                'Cache-Control': 'no-cache',
+            },
+        },
    );

-    console.log('远程SVG汉字数据获取成功，共', Object.keys(svgWordsData).length, '个汉字');
+    console.log(
+        '远程SVG汉字数据获取成功，共',
+        Object.keys(svgWordsData).length,
+        '个汉字',
+    );
    return svgWordsData;
 }

@@ -143,7 +151,12 @@ export function clearWordsSvgCache(): void {
 * 获取缓存信息
 * @returns 缓存信息对象
 */
-export function getCacheInfo(): { exists: boolean; timestamp?: number; isExpired?: boolean; daysLeft?: number } {
+export function getCacheInfo(): {
+    exists: boolean;
+    timestamp?: number;
+    isExpired?: boolean;
+    daysLeft?: number;
+} {
    try {
        const cacheStr = wx.getStorageSync(CACHE_CONFIG.key);
        if (!cacheStr) {
@@ -152,13 +165,19 @@ export function getCacheInfo(): { exists: boolean; timestamp?: number; isExpired

        const cacheData: CacheData = JSON.parse(cacheStr);
        const isExpired = isCacheExpired(cacheData.timestamp);
-        const daysLeft = isExpired ? 0 : Math.ceil((CACHE_CONFIG.expireDays * 24 * 60 * 60 * 1000 - (Date.now() - cacheData.timestamp)) / (24 * 60 * 60 * 1000));
+        const daysLeft = isExpired
+            ? 0
+            : Math.ceil(
+                  (CACHE_CONFIG.expireDays * 24 * 60 * 60 * 1000 -
+                      (Date.now() - cacheData.timestamp)) /
+                      (24 * 60 * 60 * 1000),
+              );

        return {
            exists: true,
            timestamp: cacheData.timestamp,
            isExpired,
-            daysLeft
+            daysLeft,
        };
    } catch (error) {
        console.error('获取缓存信息失败:', error);
@@ -1,5 +1,3 @@
-import { recordDownloadSuccess } from './shareGuide';
-
 const doSaveImage = (canvas: Canvas) => {
    wx.canvasToTempFilePath({
        canvas: canvas,
@@ -9,8 +7,7 @@ const doSaveImage = (canvas: Canvas) => {
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
-                    // 记录下载成功
-                    recordDownloadSuccess();
+                    // 下载成功提示（下载次数记录在 downloadPrint.ts 中处理）
                    wx.showToast({
                        title: '保存成功，请在相册中查看',
                        icon: 'success',