优化

pagesMy/practiceRecord.vue

@@ -165,7 +165,6 @@
 		});
 	};
 	
-	// 主下载处理函数
 	// 主下载处理函数
 	const handleDownload = async () => {
 	    if (isLoading.value) return;
@@ -262,30 +261,37 @@
 	        
 	        // 绘制memo
 	        ctx.setFontSize(rpxToPx(20));
-	        ctx.setFillStyle('#252525');
-	        // Canvas无法识别<span>，需要分段绘制或在JS中处理颜色
-	        const memoText1 = `您累计参与了 `;
-	        const memoText2 = `${certificateData.value.welfareCount}`;
-	        const memoText3 = ` 场活动，捐赠了 `;
-	        const memoText4 = `${certificateData.value.loveValue}`;
-	        const memoText5 = ` 爱心值。向您践行志愿精神，为社会进步奉献力量致以最崇高的敬意。`;
 	        const memoY = currentY + rpxToPx(500);
-	        const memoX = rpxToPx(80);
+	        const memoLineHeight = rpxToPx(31);
+	        const memoStartX = rpxToPx(80);
+	        const memoMaxWidth = proveWidth - rpxToPx(160); // 左右边距各80rpx
 	        
-	        ctx.fillText(memoText1, memoX, memoY);
-	        let currentX = memoX + ctx.measureText(memoText1).width;
-	        ctx.setFillStyle('#C9A771'); // 设置高亮颜色
-	        ctx.fillText(memoText2, currentX, memoY);
-	        currentX += ctx.measureText(memoText2).width;
-	        ctx.setFillStyle('#252525'); // 恢复默认颜色
-	        ctx.fillText(memoText3, currentX, memoY);
-	        currentX += ctx.measureText(memoText3).width;
-	        ctx.setFillStyle('#C9A771'); // 设置高亮颜色
-	        ctx.fillText(memoText4, currentX, memoY);
-	        currentX += ctx.measureText(memoText4).width;
-	        ctx.setFillStyle('#252525'); // 恢复默认颜色
-	        // 后续文本太长，需要换行处理，这里简化为直接绘制，实际可能需要drawWrappedText
-	        drawWrappedText(ctx, memoText5, currentX, memoY, proveWidth - rpxToPx(160) - (currentX-memoX), rpxToPx(31));
+	        const memoSegments = [
+	            { text: `您累计参与了 `, color: '#252525' },
+	            { text: `${certificateData.value.welfareCount}`, color: '#C9A771' },
+	            { text: ` 场活动，捐赠了 `, color: '#252525' },
+	            { text: `${certificateData.value.loveValue}`, color: '#C9A771' },
+	            { text: ` 爱心值。向您践行志愿精神，为社会进步奉献力量致以最崇高的敬意。`, color: '#252525' }
+	        ];
+	        
+	        let currentMemoX = memoStartX;
+	        let currentMemoY = memoY;
+	        ctx.setTextAlign('left'); // 确保对齐方式正确
+	        
+	        for (const segment of memoSegments) {
+	            ctx.setFillStyle(segment.color);
+	            const chars = segment.text.split('');
+	            for (const char of chars) {
+	                const charWidth = ctx.measureText(char).width;
+	                // 如果当前字符加上后会超出最大宽度，则换行
+	                if (currentMemoX + charWidth > memoStartX + memoMaxWidth) {
+	                    currentMemoX = memoStartX; // X坐标重置
+	                    currentMemoY += memoLineHeight; // Y坐标下移一行
+	                }
+	                ctx.fillText(char, currentMemoX, currentMemoY);
+	                currentMemoX += charWidth; // 更新X坐标
+	            }
+	        }
 	
 	        ctx.fillText('特发此证！', rpxToPx(80), currentY + rpxToPx(600));
 	
@@ -548,7 +554,7 @@
 					font-weight: bold;
 					font-size: 32rpx;
 					color: #252525;
-					line-height: 32rpx;
+					// line-height: 32rpx;
 				}
 				.content{
 					margin-top: 30rpx;