zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize: fortune page share reward

Browse Source
This commit is contained in:
zzc
2026-01-27 21:21:46 +08:00
parent 115562de53
commit eb72b5556b
3 changed files with 111 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/fortune/detail.vue
View File

@@ -93,6 +93,7 @@
import { ref } from "vue"; import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app"; import { onLoad } from "@dcloudio/uni-app";
import { getPageDetail } from "@/api/system.js"; import { getPageDetail } from "@/api/system.js";
import { saveViewRequest } from "@/utils/common.js";
const inviterName = ref(""); const inviterName = ref("");
const inviterAvatar = ref(""); const inviterAvatar = ref("");
@@ -122,6 +123,7 @@ const loadPageDetail = async (shareToken) => {
fortuneData.value = data; fortuneData.value = data;
inviterName.value = data?.from?.nickname || ""; inviterName.value = data?.from?.nickname || "";
inviterAvatar.value = data?.from?.avatar || ""; inviterAvatar.value = data?.from?.avatar || "";
saveViewRequest(shareToken, "fortune_draw", data.fortuneId);
}; };
const goHome = () => { const goHome = () => {

169
pages/fortune/index.vue
View File

@@ -38,7 +38,7 @@
{{ status === "shaking" ? "抽取中..." : "立即抽取" }} {{ status === "shaking" ? "抽取中..." : "立即抽取" }}
</button> </button>
<view class="footer-info"> <view v-if="isLoggedIn" class="footer-info">
<text class="info-icon">ⓘ</text> <text class="info-icon">ⓘ</text>
<text v-if="allowShareCount - useShareCount > 0"> <text v-if="allowShareCount - useShareCount > 0">
今日还有 {{ remainingCount }} 次抽取机会，分享可增加次数 今日还有 {{ remainingCount }} 次抽取机会，分享可增加次数
@@ -107,11 +107,11 @@
</view> </view>
<!-- Canvas 用于生成图片 (隐藏) --> <!-- Canvas 用于生成图片 (隐藏) -->
<canvas <!-- <canvas
canvas-id="shareCanvas" canvas-id="shareCanvas"
class="share-canvas" class="share-canvas"
style="width: 300px; height: 500px; position: fixed; left: 9999px" style="width: 300px; height: 500px; position: fixed; left: 9999px"
></canvas> ></canvas> -->
<LoginPopup ref="loginPopupRef" @logind="handleLogind" /> <LoginPopup ref="loginPopupRef" @logind="handleLogind" />
</view> </view>
@@ -126,6 +126,7 @@ import { drawFortune } from "@/api/fortune.js";
import { createShareToken, getShareReward } from "@/api/system.js"; import { createShareToken, getShareReward } from "@/api/system.js";
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue"; import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import { saveRemoteImageToLocal, saveRecordRequest } from "@/utils/common.js";
const userStore = useUserStore(); const userStore = useUserStore();
const loginPopupRef = ref(null); const loginPopupRef = ref(null);
@@ -190,11 +191,9 @@ const checkDrawStatus = async () => {
if (!isLoggedIn.value) return; if (!isLoggedIn.value) return;
const res = await abilityCheck("fortune_draw"); const res = await abilityCheck("fortune_draw");
if (res.canUse) { remainingCount.value = res.remain || 0;
remainingCount.value = res.remain;
allowShareCount.value = res.allowShareCount || 0; allowShareCount.value = res.allowShareCount || 0;
useShareCount.value = res.useShareCount || 0; useShareCount.value = res.useShareCount || 0;
}
}; };
const currentFortune = ref({}); const currentFortune = ref({});
@@ -262,107 +261,89 @@ const reset = () => {
const saveCard = () => { const saveCard = () => {
if (currentFortune.value.imageUrl) { if (currentFortune.value.imageUrl) {
uni.showLoading({ title: "保存中..." }); uni.showLoading({ title: "保存中..." });
uni.downloadFile({ saveRemoteImageToLocal(currentFortune.value.imageUrl);
url: currentFortune.value.imageUrl, saveRecordRequest(
success: (res) => { "",
if (res.statusCode === 200) { cardId.value,
uni.saveImageToPhotosAlbum({ "fortune_draw",
filePath: res.tempFilePath, currentFortune.value.imageUrl,
success: () => { );
uni.hideLoading();
uni.showToast({ title: "已保存到相册" });
},
fail: () => {
uni.hideLoading();
uni.showToast({ title: "保存失败", icon: "none" });
},
});
} else {
uni.hideLoading();
uni.showToast({ title: "下载失败", icon: "none" });
}
},
fail: () => {
uni.hideLoading();
uni.showToast({ title: "下载失败", icon: "none" });
},
});
return; return;
} }
uni.showLoading({ title: "生成中..." }); // uni.showLoading({ title: "生成中..." });
const ctx = uni.createCanvasContext("shareCanvas"); // const ctx = uni.createCanvasContext("shareCanvas");
// 绘制背景 // // 绘制背景
ctx.setFillStyle("#FFFBF0"); // ctx.setFillStyle("#FFFBF0");
ctx.fillRect(0, 0, 300, 500); // ctx.fillRect(0, 0, 300, 500);
// 绘制外边框 // // 绘制外边框
ctx.setStrokeStyle("#E6CAA0"); // ctx.setStrokeStyle("#E6CAA0");
ctx.setLineWidth(1); // ctx.setLineWidth(1);
ctx.strokeRect(0, 0, 300, 500); // ctx.strokeRect(0, 0, 300, 500);
// 绘制内装饰边框 // // 绘制内装饰边框
ctx.setStrokeStyle("#D4AF37"); // ctx.setStrokeStyle("#D4AF37");
ctx.setLineWidth(2); // ctx.setLineWidth(2);
ctx.strokeRect(10, 10, 280, 480); // ctx.strokeRect(10, 10, 280, 480);
// 绘制年份标签 // // 绘制年份标签
ctx.setFillStyle("#E63946"); // ctx.setFillStyle("#E63946");
// 圆角矩形模拟(简化) // // 圆角矩形模拟(简化)
ctx.fillRect(100, 40, 100, 24); // ctx.fillRect(100, 40, 100, 24);
ctx.setFillStyle("#FFFFFF"); // ctx.setFillStyle("#FFFFFF");
ctx.setFontSize(14); // ctx.setFontSize(14);
ctx.setTextAlign("center"); // ctx.setTextAlign("center");
ctx.fillText("2026 乙巳年", 150, 57); // ctx.fillText("2026 乙巳年", 150, 57);
// 绘制标题 // // 绘制标题
ctx.setFillStyle("#C0392B"); // ctx.setFillStyle("#C0392B");
ctx.setFontSize(32); // ctx.setFontSize(32);
ctx.font = "bold 32px serif"; // ctx.font = "bold 32px serif";
ctx.fillText(currentFortune.value.title, 150, 120); // ctx.fillText(currentFortune.value.title, 150, 120);
// 绘制分隔线 // // 绘制分隔线
ctx.setStrokeStyle("#D4AF37"); // ctx.setStrokeStyle("#D4AF37");
ctx.beginPath(); // ctx.beginPath();
ctx.moveTo(130, 140); // ctx.moveTo(130, 140);
ctx.lineTo(170, 140); // ctx.lineTo(170, 140);
ctx.stroke(); // ctx.stroke();
// 绘制描述 // // 绘制描述
ctx.setFillStyle("#333333"); // ctx.setFillStyle("#333333");
ctx.setFontSize(16); // ctx.setFontSize(16);
// 简单换行处理(假设文字不长) // // 简单换行处理(假设文字不长)
ctx.fillText(currentFortune.value.desc, 150, 180); // ctx.fillText(currentFortune.value.desc, 150, 180);
// 绘制底部文字 // // 绘制底部文字
ctx.setFillStyle("#888888"); // ctx.setFillStyle("#888888");
ctx.setFontSize(12); // ctx.setFontSize(12);
ctx.fillText("旧岁千般皆如意，新年万事定称心。", 150, 220); // ctx.fillText("旧岁千般皆如意，新年万事定称心。", 150, 220);
ctx.draw(false, () => { // ctx.draw(false, () => {
uni.canvasToTempFilePath({ // uni.canvasToTempFilePath({
canvasId: "shareCanvas", // canvasId: "shareCanvas",
success: (res) => { // success: (res) => {
uni.saveImageToPhotosAlbum({ // uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath, // filePath: res.tempFilePath,
success: () => { // success: () => {
uni.hideLoading(); // uni.hideLoading();
uni.showToast({ title: "已保存到相册" }); // uni.showToast({ title: "已保存到相册" });
}, // },
fail: () => { // fail: () => {
uni.hideLoading(); // uni.hideLoading();
uni.showToast({ title: "保存失败", icon: "none" }); // uni.showToast({ title: "保存失败", icon: "none" });
}, // },
}); // });
}, // },
fail: (err) => { // fail: (err) => {
uni.hideLoading(); // uni.hideLoading();
console.error(err); // console.error(err);
}, // },
}); // });
}); // });
}; };
</script> </script>

34
utils/common.js
View File

@@ -37,8 +37,10 @@ export const uploadImage = (filePath) => {
}); });
}; };
export const saveRecordRequest = async (path, targetId, scene) => { export const saveRecordRequest = async (path, targetId, scene, imageUrl) => {
const imageUrl = await uploadImage(path); if (!imageUrl) {
imageUrl = await uploadImage(path);
}
const deviceInfo = getDeviceInfo(); const deviceInfo = getDeviceInfo();
saveRecord({ saveRecord({
scene, scene,
@@ -57,3 +59,31 @@ export const saveViewRequest = async (shareToken, scene, targetId) => {
deviceInfo, deviceInfo,
}); });
}; };
export const saveRemoteImageToLocal = (imageUrl) => {
uni.downloadFile({
url: imageUrl,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.hideLoading();
uni.showToast({ title: "已保存到相册" });
},
fail: () => {
uni.hideLoading();
uni.showToast({ title: "保存失败", icon: "none" });
},
});
} else {
uni.hideLoading();
uni.showToast({ title: "下载失败", icon: "none" });
}
},
fail: () => {
uni.hideLoading();
uni.showToast({ title: "下载失败", icon: "none" });
},
});
};