Compare commits
62 Commits
6c1084ef32
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
210f913aed | ||
|
|
516063bb14 | ||
|
|
d15012841c | ||
|
|
b39ac7cb24 | ||
|
|
fee3b05c9e | ||
|
|
ab70f7e78f | ||
|
|
63a6ade0d4 | ||
|
|
d5012753c1 | ||
|
|
b9bec457a7 | ||
|
|
f11b48e50a | ||
|
|
033c70962c | ||
|
|
38843473c4 | ||
|
|
f4004da994 | ||
|
|
99cf4249db | ||
|
|
8110e209c7 | ||
|
|
a7cc9babac | ||
|
|
dd4129bb58 | ||
|
|
b302103c15 | ||
|
|
c62e12756b | ||
|
|
bc1b95210a | ||
|
|
dc2be76648 | ||
|
|
3f623ee6ee | ||
|
|
fd5bc9d12c | ||
|
|
3964d33e31 | ||
|
|
bd3185aac3 | ||
|
|
f40c33fa2e | ||
|
|
1d1b49d36e | ||
|
|
ae835bd213 | ||
|
|
5d735736ad | ||
|
|
916c383dd5 | ||
|
|
a883caf981 | ||
|
|
5738464cc8 | ||
|
|
2d178fa470 | ||
|
|
9137a3410b | ||
|
|
fe562ecec9 | ||
|
|
a1658ad0ea | ||
|
|
ff1ce034b4 | ||
|
|
e3c7450d18 | ||
|
|
09defb45e0 | ||
|
|
8c5d693b7a | ||
|
|
c32701abb4 | ||
|
|
51b2a322dc | ||
|
|
c4bbff1260 | ||
|
|
b393cfd67a | ||
|
|
18909f7ce2 | ||
|
|
d974987cff | ||
|
|
c7cd83f3e9 | ||
|
|
24c1cd53d5 | ||
|
|
d5353f4437 | ||
|
|
1bfcfd2dec | ||
|
|
fabc7547ed | ||
|
|
20978b05c6 | ||
|
|
88cd1c2e8f | ||
|
|
756a49bbf5 | ||
|
|
4c53fa9f65 | ||
|
|
5e0da973af | ||
|
|
8dfd7612b1 | ||
|
|
8d47d6d494 | ||
|
|
72eb440504 | ||
|
|
32457aa947 | ||
|
|
a6e9c1c9ce | ||
|
|
1fef1818d8 |
2
App.vue
2
App.vue
@@ -10,9 +10,9 @@ const openApp = async () => {
|
||||
title: `每日登录 +${res.points} 积分`,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
const userStore = useUserStore();
|
||||
await userStore.fetchUserAssets();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("userOpenApp error", e);
|
||||
}
|
||||
|
||||
23
api/daily.js
Normal file
23
api/daily.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const getDailyInfo = async () => {
|
||||
return request({
|
||||
url: "/api/blessing/daily-greeting/home",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getDailyRandomGreeting = async (sceneId) => {
|
||||
return request({
|
||||
url: `/api/blessing/daily-greeting/random?sceneId=${sceneId}`,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const saveDailyGreeting = async (data) => {
|
||||
return request({
|
||||
url: "/api/blessing/daily-greeting/send",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
24
api/make.js
24
api/make.js
@@ -16,16 +16,24 @@ export const updateCard = async (data) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getCardTemplateList = async (page = 1) => {
|
||||
export const getCardTemplateList = async (page = 1, scene = "") => {
|
||||
let url = "/api/blessing/card/template/list?page=" + page;
|
||||
if (scene) {
|
||||
url += "&scene=" + scene;
|
||||
}
|
||||
return request({
|
||||
url: "/api/blessing/card/template/list?page=" + page,
|
||||
url,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getCardTemplateContentList = async (page = 1) => {
|
||||
export const getCardTemplateContentList = async (page = 1, scene = "") => {
|
||||
let url = "/api/blessing/card/template-content/list?page=" + page;
|
||||
if (scene) {
|
||||
url += "&scene=" + scene;
|
||||
}
|
||||
return request({
|
||||
url: "/api/blessing/card/template-content/list?page=" + page,
|
||||
url,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
@@ -37,9 +45,13 @@ export const getCardMusicList = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getCardTemplateTitleList = async (page = 1) => {
|
||||
export const getCardTemplateTitleList = async (page = 1, scene = "") => {
|
||||
let url = "/api/blessing/card/template-title/list?page=" + page;
|
||||
if (scene) {
|
||||
url += "&scene=" + scene;
|
||||
}
|
||||
return request({
|
||||
url: "/api/blessing/card/template-title/list?page=" + page,
|
||||
url,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import { request } from "@/utils/request.js";
|
||||
|
||||
export const abilityCheck = async (scene) => {
|
||||
return request({
|
||||
url: "/api/blessing/ability/check?scene=" + scene,
|
||||
url: "/api/ability/check?scene=" + scene,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
@@ -24,7 +24,7 @@ export const getPageDetail = async (shareToken) => {
|
||||
|
||||
export const getShareReward = async (data) => {
|
||||
return request({
|
||||
url: "/api/blessing/share/reward",
|
||||
url: "/api/reward/share",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
@@ -53,6 +53,27 @@ export const getRecommendList = async (page = 1) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getRankList = async (scene) => {
|
||||
return request({
|
||||
url: `/api/blessing/rank/resource-list?scene=${scene}`,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getCardSpecialTopic = async () => {
|
||||
return request({
|
||||
url: `/api/blessing/card/special-topic`,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getRandomRecommendList = async (scene) => {
|
||||
return request({
|
||||
url: `/api/blessing/random/recommend/list?scene=${scene}`,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const msgCheckApi = async (content) => {
|
||||
return request({
|
||||
url: "/api/common/msg-check?content=" + content,
|
||||
@@ -82,9 +103,22 @@ export const createTracking = async (data) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const watchAdReward = async () => {
|
||||
export const watchAdReward = async (token) => {
|
||||
return request({
|
||||
url: "/api/blessing/ad/reward",
|
||||
method: "POST",
|
||||
data: {
|
||||
rewardToken: token,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const watchAdStart = async () => {
|
||||
return request({
|
||||
url: "/api/blessing/ad/start",
|
||||
method: "POST",
|
||||
data: {
|
||||
adPlacementId: "adunit-d7a28e0357d98947",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
22
api/user.js
Normal file
22
api/user.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const getUserSignInfo = async () => {
|
||||
return request({
|
||||
url: "/api/sign/info",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const userSignIn = async () => {
|
||||
return request({
|
||||
url: "/api/sign/in",
|
||||
method: "POST",
|
||||
});
|
||||
};
|
||||
|
||||
export const getUserLuckInfo = async () => {
|
||||
return request({
|
||||
url: "/api/blessing/user/luck-info",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
@@ -20,3 +20,10 @@ export const getWallpaperRecommendList = async () => {
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const getWallpaperSameList = async (id) => {
|
||||
return request({
|
||||
url: `/api/blessing/wallpaper/same/list?id=${id}`,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
@@ -23,17 +23,39 @@
|
||||
<view class="lucky-card" id="lucky-card">
|
||||
<!-- 头部渐变区 -->
|
||||
<view class="card-header">
|
||||
<view class="header-decor left">福</view>
|
||||
<view class="header-decor right">禧</view>
|
||||
<!-- Top Bar: User Info & Date -->
|
||||
<view class="header-top-bar">
|
||||
<view
|
||||
class="user-info-row"
|
||||
v-if="userInfo && (userInfo.avatarUrl || userInfo.nickName)"
|
||||
>
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="
|
||||
userInfo.avatarUrl || '/static/images/default-avatar.png'
|
||||
"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text class="user-name">{{
|
||||
userInfo.nickName || "好运用户"
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="date-tag">{{ currentDateStr }}</view>
|
||||
</view>
|
||||
|
||||
<!-- Main Content: Score & Word -->
|
||||
<view class="header-main">
|
||||
<text class="header-label">今日好运指数</text>
|
||||
<view class="score-wrap">
|
||||
<text class="score">{{ resultData.score }}</text>
|
||||
<text class="percent">%</text>
|
||||
</view>
|
||||
<text class="lucky-word">{{ resultData.luckyWord }}</text>
|
||||
</view>
|
||||
|
||||
<view class="tag-year">{{ currentDateStr }}</view>
|
||||
<!-- Decorators -->
|
||||
<view class="header-decor left-bottom">福</view>
|
||||
<view class="header-decor right-bottom">禧</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区 -->
|
||||
@@ -113,7 +135,7 @@
|
||||
|
||||
<!-- 画布用于生成图片 -->
|
||||
<canvas
|
||||
canvas-id="luckyCanvas"
|
||||
type="2d"
|
||||
id="luckyCanvas"
|
||||
class="lucky-canvas"
|
||||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||||
@@ -122,10 +144,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance } from "vue";
|
||||
import { ref, getCurrentInstance, computed } from "vue";
|
||||
import calendar from "@/utils/lunar.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||
import { getShareToken } from "@/utils/common.js";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const userStore = useUserStore();
|
||||
const userInfo = computed(() => userStore.userInfo);
|
||||
const popup = ref(null);
|
||||
const isAnimating = ref(true);
|
||||
const isFlipping = ref(false);
|
||||
@@ -135,7 +162,7 @@ const currentDateStr = ref("");
|
||||
|
||||
// 画布相关
|
||||
const canvasWidth = ref(600);
|
||||
const canvasHeight = ref(1000);
|
||||
const canvasHeight = ref(1100);
|
||||
|
||||
const resultData = ref({
|
||||
score: 88,
|
||||
@@ -150,11 +177,10 @@ const resultData = ref({
|
||||
|
||||
const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
|
||||
|
||||
const open = () => {
|
||||
isAnimating.value = true;
|
||||
isFlipping.value = false;
|
||||
showLight.value = false;
|
||||
loadingText.value = texts[0];
|
||||
const open = (data = null, skipAnimation = false) => {
|
||||
if (data) {
|
||||
resultData.value = { ...resultData.value, ...data };
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const y = now.getFullYear();
|
||||
@@ -165,7 +191,17 @@ const open = () => {
|
||||
|
||||
popup.value.open();
|
||||
|
||||
if (skipAnimation) {
|
||||
isAnimating.value = false;
|
||||
isFlipping.value = true; // Ensure flipped state if needed for consistency, though v-else handles view
|
||||
showLight.value = false;
|
||||
} else {
|
||||
isAnimating.value = true;
|
||||
isFlipping.value = false;
|
||||
showLight.value = false;
|
||||
loadingText.value = texts[0];
|
||||
startAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
@@ -195,86 +231,166 @@ const startAnimation = () => {
|
||||
}, 1800);
|
||||
};
|
||||
|
||||
const onSaveImage = () => {
|
||||
const onSaveImage = async () => {
|
||||
uni.showLoading({ title: "生成图片中..." });
|
||||
const ctx = uni.createCanvasContext("luckyCanvas", proxy);
|
||||
const W = canvasWidth.value;
|
||||
const H = canvasHeight.value;
|
||||
const cardH = 850; // 卡片主体高度
|
||||
|
||||
const query = uni.createSelectorQuery().in(proxy);
|
||||
query
|
||||
.select("#luckyCanvas")
|
||||
.fields({ node: true, size: true })
|
||||
.exec(async (res) => {
|
||||
if (!res[0] || !res[0].node) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "Canvas not found", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = res[0].node;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const dpr = uni.getSystemInfoSync().pixelRatio || 2;
|
||||
|
||||
// Set canvas size (physical pixels)
|
||||
canvas.width = res[0].width * dpr;
|
||||
canvas.height = res[0].height * dpr;
|
||||
|
||||
// Reset transform
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Scale context
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
const W = res[0].width;
|
||||
const H = res[0].height;
|
||||
|
||||
// Helper function to load image
|
||||
const loadCanvasImage = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = canvas.createImage();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = (e) => reject(e);
|
||||
img.src = url;
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
// Load images
|
||||
let avatarUrl = "/static/images/default-avatar.png";
|
||||
if (userInfo.value && userInfo.value.avatarUrl) {
|
||||
avatarUrl = userInfo.value.avatarUrl;
|
||||
}
|
||||
|
||||
const [avatarImg, qrCodeImg] = await Promise.all([
|
||||
loadCanvasImage(avatarUrl).catch(() =>
|
||||
loadCanvasImage("/static/images/default-avatar.png"),
|
||||
),
|
||||
loadCanvasImage("/static/images/qrcode.jpg").catch(() => null),
|
||||
]);
|
||||
|
||||
// 1. 绘制背景
|
||||
ctx.setFillStyle("#ffffff");
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
// 2. 绘制卡片头部渐变
|
||||
const grd = ctx.createLinearGradient(0, 0, 0, 360);
|
||||
const headerH = 460;
|
||||
const grd = ctx.createLinearGradient(0, 0, 0, headerH);
|
||||
grd.addColorStop(0, "#d84315");
|
||||
grd.addColorStop(1, "#ffca28");
|
||||
ctx.setFillStyle(grd);
|
||||
ctx.fillRect(0, 0, W, 360);
|
||||
ctx.fillStyle = grd;
|
||||
ctx.fillRect(0, 0, W, headerH);
|
||||
|
||||
// 3. 头部装饰文字
|
||||
ctx.setFillStyle("rgba(255, 255, 255, 0.6)");
|
||||
ctx.setFontSize(24);
|
||||
ctx.fillText("福", 30, 40);
|
||||
ctx.fillText("禧", W - 50, 40);
|
||||
// --- Top Bar ---
|
||||
const topY = 40;
|
||||
const avatarSize = 64;
|
||||
|
||||
// 4. 头部内容
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
|
||||
ctx.setFontSize(24);
|
||||
ctx.fillText("今日好运指数", W / 2, 80);
|
||||
// 绘制用户头像 (Top Left)
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
40 + avatarSize / 2,
|
||||
topY + avatarSize / 2,
|
||||
avatarSize / 2,
|
||||
0,
|
||||
2 * Math.PI,
|
||||
);
|
||||
ctx.clip();
|
||||
if (avatarImg) {
|
||||
ctx.drawImage(avatarImg, 40, topY, avatarSize, avatarSize);
|
||||
}
|
||||
ctx.restore();
|
||||
|
||||
// 分数
|
||||
ctx.setFillStyle("#ffffff");
|
||||
ctx.setFontSize(120);
|
||||
ctx.font = "bold 120px sans-serif";
|
||||
ctx.fillText(resultData.value.score + "%", W / 2, 200);
|
||||
// 绘制用户昵称
|
||||
ctx.textAlign = "left";
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "bold 26px sans-serif";
|
||||
ctx.fillText(
|
||||
userInfo.value?.nickName || "好运用户",
|
||||
40 + avatarSize + 16,
|
||||
topY + 42,
|
||||
);
|
||||
|
||||
// 幸运词
|
||||
ctx.setFontSize(48);
|
||||
ctx.font = "bold 48px sans-serif";
|
||||
ctx.fillText(resultData.value.luckyWord, W / 2, 280);
|
||||
|
||||
// 日期标签背景
|
||||
// 绘制日期 (Top Right)
|
||||
const dateStr = currentDateStr.value || "2026 CNY SPECIAL";
|
||||
ctx.setFillStyle("rgba(0, 0, 0, 0.15)");
|
||||
const dateWidth = ctx.measureText(dateStr).width + 40;
|
||||
roundRect(ctx, W / 2 - dateWidth / 2, 310, dateWidth, 34, 17);
|
||||
ctx.font = "normal 22px sans-serif";
|
||||
const dateWidth = ctx.measureText(dateStr).width + 30;
|
||||
const dateX = W - 40 - dateWidth;
|
||||
const dateY = topY + 12; // box top
|
||||
// date bg
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
|
||||
roundRect(ctx, dateX, dateY, dateWidth, 40, 20);
|
||||
ctx.fill();
|
||||
// date text
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillText(dateStr, dateX + 15, dateY + 28);
|
||||
|
||||
// 日期文字
|
||||
ctx.setFillStyle("#ffffff");
|
||||
ctx.setFontSize(20);
|
||||
ctx.fillText(dateStr, W / 2, 334);
|
||||
// --- Main Content (Centered) ---
|
||||
const centerX = W / 2;
|
||||
|
||||
// Label
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
|
||||
ctx.font = "normal 24px sans-serif";
|
||||
ctx.fillText("今日好运指数", centerX, 180);
|
||||
|
||||
// Score
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "bold 140px sans-serif";
|
||||
ctx.fillText(resultData.value.score + "%", centerX, 310);
|
||||
|
||||
// Lucky Word
|
||||
ctx.font = "bold 52px sans-serif";
|
||||
ctx.fillText(resultData.value.luckyWord, centerX, 390);
|
||||
|
||||
// Decorators (Bottom Corners)
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
|
||||
ctx.font = "normal 24px sans-serif";
|
||||
ctx.textAlign = "left";
|
||||
ctx.fillText("福", 40, headerH - 20);
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillText("禧", W - 40, headerH - 20);
|
||||
|
||||
// 5. 绘制内容区 (宜/忌)
|
||||
const gridY = 400;
|
||||
const boxW = (W - 64 - 24) / 2; // (600 - padding*2 - gap)/2
|
||||
const gridH = 140; // 增加高度防止内容溢出
|
||||
const gridY = 500;
|
||||
const boxW = (W - 64 - 24) / 2;
|
||||
const gridH = 140;
|
||||
|
||||
// 宜
|
||||
drawBox(ctx, 32, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
||||
ctx.setTextAlign("left");
|
||||
ctx.setFontSize(24);
|
||||
ctx.setFillStyle("#d81e06");
|
||||
ctx.textAlign = "left";
|
||||
ctx.font = "bold 24px sans-serif";
|
||||
// 图标模拟
|
||||
ctx.fillStyle = "#d81e06";
|
||||
ctx.fillText("✔ 今日宜", 56, gridY + 44);
|
||||
|
||||
ctx.setFontSize(22);
|
||||
ctx.setFillStyle("#666666");
|
||||
ctx.font = "normal 22px sans-serif";
|
||||
ctx.fillStyle = "#666666";
|
||||
wrapText(ctx, resultData.value.yi, 56, gridY + 80, boxW - 48, 30);
|
||||
|
||||
// 忌
|
||||
drawBox(ctx, 32 + boxW + 24, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
||||
ctx.setFontSize(24);
|
||||
ctx.setFillStyle("#666666");
|
||||
ctx.font = "bold 24px sans-serif";
|
||||
ctx.fillStyle = "#666666";
|
||||
ctx.fillText("✖ 今日忌", 32 + boxW + 24 + 24, gridY + 44);
|
||||
|
||||
ctx.setFontSize(22);
|
||||
ctx.font = "normal 22px sans-serif";
|
||||
wrapText(
|
||||
ctx,
|
||||
@@ -286,62 +402,58 @@ const onSaveImage = () => {
|
||||
);
|
||||
|
||||
// 6. 幸运元素
|
||||
const elY = 570; // 下移,避免与上面重叠
|
||||
const elH = 160; // 增加高度
|
||||
const elY = 670;
|
||||
const elH = 160;
|
||||
drawBox(ctx, 32, elY, W - 64, elH, "#fbfbfb", "#f5f5f5");
|
||||
|
||||
// 标题
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.font = "bold 26px sans-serif";
|
||||
ctx.fillStyle = "#333333";
|
||||
ctx.fillText("★ 幸运元素", 56, elY + 46);
|
||||
|
||||
// 元素内容
|
||||
const contentW = W - 64; // 内容区域总宽度
|
||||
const colW = contentW / 3; // 三等分
|
||||
const startX = 32; // 起始X坐标
|
||||
const contentW = W - 64;
|
||||
const colW = contentW / 3;
|
||||
const startX = 32;
|
||||
|
||||
// 调整Y坐标,确保不重叠
|
||||
const labelY = elY + 90;
|
||||
const valY = elY + 126;
|
||||
|
||||
// 颜色 (第一列)
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
// 颜色
|
||||
ctx.textAlign = "center";
|
||||
ctx.font = "normal 20px sans-serif";
|
||||
ctx.fillStyle = "#999999";
|
||||
ctx.fillText("颜色", startX + colW * 0.5, labelY);
|
||||
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#d84315");
|
||||
ctx.font = "bold 26px sans-serif";
|
||||
ctx.fillStyle = "#d84315";
|
||||
ctx.fillText(resultData.value.luckyColor, startX + colW * 0.5, valY);
|
||||
|
||||
// 数字 (第二列)
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
// 数字
|
||||
ctx.font = "normal 20px sans-serif";
|
||||
ctx.fillStyle = "#999999";
|
||||
ctx.fillText("数字", startX + colW * 1.5, labelY);
|
||||
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.font = "bold 26px sans-serif";
|
||||
ctx.fillStyle = "#333333";
|
||||
ctx.fillText(resultData.value.luckyNumber, startX + colW * 1.5, valY);
|
||||
|
||||
// 方向 (第三列)
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
// 方向
|
||||
ctx.font = "normal 20px sans-serif";
|
||||
ctx.fillStyle = "#999999";
|
||||
ctx.fillText("方向", startX + colW * 2.5, labelY);
|
||||
|
||||
ctx.setFontSize(26);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.font = "bold 26px sans-serif";
|
||||
ctx.fillText(resultData.value.luckyDirection, startX + colW * 2.5, valY);
|
||||
ctx.fillStyle = "#333333";
|
||||
ctx.fillText(
|
||||
resultData.value.luckyDirection,
|
||||
startX + colW * 2.5,
|
||||
valY,
|
||||
);
|
||||
|
||||
// 分隔线 1
|
||||
ctx.setStrokeStyle("#eeeeee");
|
||||
ctx.setLineWidth(2);
|
||||
// 分隔线
|
||||
ctx.strokeStyle = "#eeeeee";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
const lineTop = elY + 70;
|
||||
const lineBottom = elY + 130;
|
||||
@@ -349,54 +461,58 @@ const onSaveImage = () => {
|
||||
ctx.lineTo(startX + colW, lineBottom);
|
||||
ctx.stroke();
|
||||
|
||||
// 分隔线 2
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startX + colW * 2, lineTop);
|
||||
ctx.lineTo(startX + colW * 2, lineBottom);
|
||||
ctx.stroke();
|
||||
|
||||
// 7. 语录
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setFontSize(22);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.textAlign = "center";
|
||||
ctx.font = "italic 22px sans-serif";
|
||||
// 语录换行处理,下移坐标
|
||||
wrapTextCentered(ctx, `“${resultData.value.quote}”`, W / 2, 780, W - 80, 30);
|
||||
ctx.fillStyle = "#999999";
|
||||
wrapTextCentered(
|
||||
ctx,
|
||||
`“${resultData.value.quote}”`,
|
||||
W / 2,
|
||||
880,
|
||||
W - 80,
|
||||
30,
|
||||
);
|
||||
|
||||
// 8. 底部区域 (Footer)
|
||||
const footerY = 850;
|
||||
const footerY = 960;
|
||||
|
||||
// 分隔线
|
||||
ctx.setStrokeStyle("#f0f0f0");
|
||||
ctx.setLineWidth(1);
|
||||
ctx.strokeStyle = "#f0f0f0";
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(40, footerY);
|
||||
ctx.lineTo(W - 40, footerY);
|
||||
ctx.stroke();
|
||||
|
||||
// 底部左侧文字
|
||||
ctx.setTextAlign("left");
|
||||
ctx.setFontSize(32);
|
||||
ctx.setFillStyle("#333333");
|
||||
ctx.font = "bold 32px sans-serif";
|
||||
ctx.textAlign = "left";
|
||||
ctx.font = "28px sans-serif";
|
||||
ctx.fillStyle = "#333333";
|
||||
ctx.fillText("扫码开启今日好运", 40, footerY + 60);
|
||||
|
||||
ctx.setFontSize(20);
|
||||
ctx.setFillStyle("#999999");
|
||||
ctx.font = "normal 20px sans-serif";
|
||||
ctx.fillText("2026 CNY SPECIAL · 新春助手", 40, footerY + 100);
|
||||
ctx.fillStyle = "#999999";
|
||||
ctx.fillText("2026 LUCKY EVERY DAY · 幸运每一天", 40, footerY + 100);
|
||||
|
||||
// 底部右侧二维码 (占位图)
|
||||
// 假设二维码在 static/icon/yunshi.png 或 logo.png
|
||||
// 实际开发中应替换为小程序码
|
||||
ctx.drawImage("/static/logo.png", W - 140, footerY + 25, 100, 100);
|
||||
// 底部右侧二维码
|
||||
if (qrCodeImg) {
|
||||
ctx.drawImage(qrCodeImg, W - 140, footerY + 25, 100, 100);
|
||||
}
|
||||
|
||||
// 绘制
|
||||
ctx.draw(false, () => {
|
||||
// 生成图片
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: "luckyCanvas",
|
||||
uni.canvasToTempFilePath({
|
||||
canvas: canvas,
|
||||
width: W,
|
||||
height: H,
|
||||
destWidth: W * dpr,
|
||||
destHeight: H * dpr,
|
||||
success: (res) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
@@ -415,10 +531,13 @@ const onSaveImage = () => {
|
||||
uni.showToast({ title: "生成图片失败", icon: "none" });
|
||||
console.error(err);
|
||||
},
|
||||
},
|
||||
proxy,
|
||||
);
|
||||
});
|
||||
}, 200);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "生成图片失败", icon: "none" });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -439,9 +558,9 @@ function roundRect(ctx, x, y, w, h, r) {
|
||||
|
||||
// 辅助函数:绘制带背景边框的盒子
|
||||
function drawBox(ctx, x, y, w, h, bg, border) {
|
||||
ctx.setFillStyle(bg);
|
||||
ctx.setStrokeStyle(border);
|
||||
ctx.setLineWidth(2);
|
||||
ctx.fillStyle = bg;
|
||||
ctx.strokeStyle = border;
|
||||
ctx.lineWidth = 2;
|
||||
roundRect(ctx, x, y, w, h, 20);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
@@ -489,6 +608,22 @@ const onShareMoments = () => {
|
||||
uni.showToast({ title: "请点击右上角分享", icon: "none" });
|
||||
};
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("lucky_card");
|
||||
return {
|
||||
title: "开启你的每日好运!",
|
||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||
};
|
||||
});
|
||||
|
||||
onShareTimeline(async () => {
|
||||
const shareToken = await getShareToken("lucky_card_timeline");
|
||||
return {
|
||||
title: "开启你的每日好运!",
|
||||
query: `shareToken=${shareToken}`,
|
||||
};
|
||||
});
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
@@ -497,7 +632,7 @@ defineExpose({ open, close });
|
||||
/* 动画容器 */
|
||||
.animation-container {
|
||||
width: 600rpx;
|
||||
height: 850rpx;
|
||||
height: 920rpx; /* Updated height */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -607,39 +742,70 @@ defineExpose({ open, close });
|
||||
|
||||
.lucky-card {
|
||||
width: 100%;
|
||||
height: 850rpx;
|
||||
height: 920rpx; /* Increased height */
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.card-header {
|
||||
height: 360rpx;
|
||||
height: 460rpx; /* Increased height */
|
||||
background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
|
||||
.header-decor {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
opacity: 0.6;
|
||||
.header-top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&.left {
|
||||
left: 30rpx;
|
||||
.user-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
||||
margin-right: 16rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&.right {
|
||||
right: 30rpx;
|
||||
|
||||
.user-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.date-tag {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.header-label {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
opacity: 0.9;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
@@ -651,32 +817,39 @@ defineExpose({ open, close });
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.score {
|
||||
font-size: 120rpx;
|
||||
font-size: 140rpx; /* Bigger */
|
||||
font-weight: bold;
|
||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.percent {
|
||||
font-size: 40rpx;
|
||||
margin-left: 4rpx;
|
||||
margin-left: 8rpx;
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.lucky-word {
|
||||
font-size: 48rpx;
|
||||
font-size: 52rpx;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4rpx;
|
||||
letter-spacing: 6rpx;
|
||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-year {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 2rpx;
|
||||
.header-decor {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
opacity: 0.4;
|
||||
|
||||
&.left-bottom {
|
||||
left: 40rpx;
|
||||
}
|
||||
&.right-bottom {
|
||||
right: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
94
components/RewardAd/RewardAd.vue
Normal file
94
components/RewardAd/RewardAd.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
import { watchAdStart } from "@/api/system.js";
|
||||
|
||||
const props = defineProps({
|
||||
adUnitId: {
|
||||
type: String,
|
||||
default: "adunit-d7a28e0357d98947",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["onReward", "onError", "onClose"]);
|
||||
|
||||
let videoAd = null;
|
||||
let rewardToken = "";
|
||||
|
||||
const onLoadHandler = () => {
|
||||
console.log("Ad Loaded");
|
||||
};
|
||||
|
||||
const onErrorHandler = (err) => {
|
||||
console.error("Ad Load Error", err);
|
||||
emit("onError", err);
|
||||
};
|
||||
|
||||
const onCloseHandler = (res) => {
|
||||
if (res && res.isEnded) {
|
||||
emit("onReward", rewardToken);
|
||||
} else {
|
||||
uni.showToast({ title: "观看完整广告才能获取奖励哦", icon: "none" });
|
||||
emit("onClose");
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (uni.createRewardedVideoAd) {
|
||||
videoAd = uni.createRewardedVideoAd({
|
||||
adUnitId: props.adUnitId,
|
||||
});
|
||||
|
||||
videoAd.onLoad(onLoadHandler);
|
||||
videoAd.onError(onErrorHandler);
|
||||
videoAd.onClose(onCloseHandler);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (videoAd) {
|
||||
videoAd.offLoad(onLoadHandler);
|
||||
videoAd.offError(onErrorHandler);
|
||||
videoAd.offClose(onCloseHandler);
|
||||
}
|
||||
});
|
||||
|
||||
const show = async () => {
|
||||
try {
|
||||
// Step 1: Start Ad Session to get Token
|
||||
const res = await watchAdStart();
|
||||
if (res && res.rewardToken) {
|
||||
rewardToken = res.rewardToken;
|
||||
|
||||
// Step 2: Show Ad
|
||||
if (videoAd) {
|
||||
videoAd.show().catch(() => {
|
||||
videoAd
|
||||
.load()
|
||||
.then(() => videoAd.show())
|
||||
.catch((err) => {
|
||||
console.error("Ad show failed", err);
|
||||
uni.showToast({
|
||||
title: "广告加载失败,请稍后再试",
|
||||
icon: "none",
|
||||
});
|
||||
emit("onError", err);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: "当前环境不支持广告", icon: "none" });
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: "广告启动失败,请稍后再试", icon: "none" });
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("watchAdStart failed", e);
|
||||
uni.showToast({ title: "广告启动失败,请稍后再试", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ show });
|
||||
</script>
|
||||
24
pages.json
24
pages.json
@@ -9,6 +9,22 @@
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/greeting/daily",
|
||||
"style": {
|
||||
"navigationBarTitleText": "每日精选",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/greeting/share",
|
||||
"style": {
|
||||
"navigationBarTitleText": "问候分享",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/make/index",
|
||||
"style": {
|
||||
@@ -167,6 +183,14 @@
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/wallpaper/share",
|
||||
"style": {
|
||||
"navigationBarTitleText": "壁纸分享",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -124,9 +124,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||
import { getPageDetail } from "@/api/system.js";
|
||||
import { getPageDetail, getShareReward } from "@/api/system";
|
||||
import { getAvatarRecommendList } from "@/api/avatar.js";
|
||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
@@ -147,6 +147,7 @@ onLoad((options) => {
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const token = await getShareToken("avatar_download", detailData.value?.id);
|
||||
getShareReward({ scene: "avatar_download" });
|
||||
return {
|
||||
title: "快来看看我刚领到的新年专属头像 🎊",
|
||||
path: `/pages/avatar/detail?shareToken=${token}`,
|
||||
|
||||
@@ -97,6 +97,7 @@
|
||||
@logind="handleLogind"
|
||||
:share-token="shareToken"
|
||||
/>
|
||||
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -115,14 +116,15 @@ import {
|
||||
saveViewRequest,
|
||||
} from "@/utils/common.js";
|
||||
import { onShareAppMessage, onShareTimeline, onLoad } from "@dcloudio/uni-app";
|
||||
import { getShareReward, abilityCheck, watchAdReward } from "@/api/system.js";
|
||||
import { getShareReward, watchAdReward } from "@/api/system.js";
|
||||
import { checkAbilityAndHandle } from "@/utils/ability.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
let videoAd = null;
|
||||
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginPopupRef = ref(null);
|
||||
const rewardAdRef = ref(null);
|
||||
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
const userPoints = computed(() => userStore.userInfo.points || 0);
|
||||
@@ -188,29 +190,6 @@ onLoad((options) => {
|
||||
eventName: "avatar_download_page_visit",
|
||||
eventType: `visit`,
|
||||
});
|
||||
|
||||
// Initialize Rewarded Video Ad
|
||||
if (uni.createRewardedVideoAd) {
|
||||
videoAd = uni.createRewardedVideoAd({
|
||||
adUnitId: "adunit-d7a28e0357d98947",
|
||||
});
|
||||
videoAd.onLoad(() => {
|
||||
console.log("ad loaded");
|
||||
});
|
||||
videoAd.onError((err) => {
|
||||
console.error("ad load error", err);
|
||||
});
|
||||
videoAd.onClose((res) => {
|
||||
console.log(1212121212, res);
|
||||
|
||||
if (res && res.isEnded) {
|
||||
handleAdReward();
|
||||
} else {
|
||||
// Playback not completed
|
||||
uni.showToast({ title: "观看完整广告才能获取积分哦", icon: "none" });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const getThumbUrl = (url) => {
|
||||
@@ -308,26 +287,9 @@ const previewImage = (index) => {
|
||||
});
|
||||
};
|
||||
|
||||
const showRewardAd = () => {
|
||||
if (videoAd) {
|
||||
videoAd.show().catch(() => {
|
||||
// Failed to load, try loading again
|
||||
videoAd
|
||||
.load()
|
||||
.then(() => videoAd.show())
|
||||
.catch((err) => {
|
||||
console.error("Ad show failed", err);
|
||||
uni.showToast({ title: "广告加载失败,请稍后再试", icon: "none" });
|
||||
});
|
||||
});
|
||||
} else {
|
||||
uni.showToast({ title: "当前环境不支持广告", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdReward = async () => {
|
||||
const handleAdReward = async (token) => {
|
||||
try {
|
||||
const res = await watchAdReward();
|
||||
const res = await watchAdReward(token);
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "获得50积分",
|
||||
@@ -352,41 +314,11 @@ const downloadAvatar = async (item) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Use avatar specific ability check if exists, otherwise reuse generic or skip?
|
||||
// Assuming 'avatar_download' ability check exists or similar
|
||||
const abilityRes = await abilityCheck("avatar_download");
|
||||
if (!abilityRes.canUse) {
|
||||
if (
|
||||
abilityRes?.blockType === "need_share" &&
|
||||
abilityRes?.message === "分享可继续"
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "分享给好友即可下载",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
abilityRes?.blockType === "need_ad" &&
|
||||
abilityRes?.message === "观看广告可继续"
|
||||
) {
|
||||
uni.showModal({
|
||||
title: "积分不足",
|
||||
content: "观看广告可获得50积分,继续下载",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
showRewardAd();
|
||||
}
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: "您今日下载次数已用完,明日再试",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const canProceed = await checkAbilityAndHandle(
|
||||
"avatar_download",
|
||||
rewardAdRef,
|
||||
);
|
||||
if (!canProceed) return;
|
||||
|
||||
uni.showLoading({ title: "下载中..." });
|
||||
try {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<text>灵感瞬间</text>
|
||||
</view>
|
||||
<view class="banner-title">今日推荐创作</view>
|
||||
<view class="banner-main-title">开启你的第一份<br />新春祝福</view>
|
||||
<view class="banner-main-title">开启你今日的第一份<br />祝福</view>
|
||||
<view class="go-btn">去制作</view>
|
||||
</view>
|
||||
<image
|
||||
@@ -43,7 +43,7 @@
|
||||
<view class="icon-box card-bg">
|
||||
<image src="/static/icon/celebrate.png" mode="aspectFit" />
|
||||
</view>
|
||||
<text>新春贺卡</text>
|
||||
<text>祝福贺卡</text>
|
||||
</view>
|
||||
<view class="quick-item" @tap="handleQuickAction('fortune')">
|
||||
<view class="icon-box fortune-bg">
|
||||
@@ -67,7 +67,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 按心情创作 -->
|
||||
<view class="section">
|
||||
<!-- <view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">按心情创作</text>
|
||||
</view>
|
||||
@@ -84,13 +84,13 @@
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 编辑精选 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">编辑精选</text>
|
||||
<text class="view-all" @tap="viewAll">查看全部</text>
|
||||
<!-- <text class="view-all" @tap="viewAll">查看全部</text> -->
|
||||
</view>
|
||||
<view class="featured-grid">
|
||||
<view
|
||||
|
||||
@@ -132,7 +132,7 @@ import {
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
} from "@dcloudio/uni-app";
|
||||
import { getPageDetail } from "@/api/system.js";
|
||||
import { getPageDetail, getShareReward } from "@/api/system";
|
||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
@@ -194,6 +194,7 @@ onUnload(() => {
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const token = await getShareToken("card_generate", cardDetail.value?.id);
|
||||
getShareReward({ scene: "card_generate" });
|
||||
return {
|
||||
title: "送你一张精美的新春祝福卡片 🎊",
|
||||
path: `/pages/detail/index?shareToken=${token || ""}`,
|
||||
|
||||
791
pages/greeting/daily.vue
Normal file
791
pages/greeting/daily.vue
Normal file
@@ -0,0 +1,791 @@
|
||||
<template>
|
||||
<view class="daily-page">
|
||||
<NavBar title="每日精选" color="#333" />
|
||||
|
||||
<!-- Header -->
|
||||
<view class="page-header">
|
||||
<view class="header-left">
|
||||
<uni-icons type="sun-filled" size="24" color="#ff9800" />
|
||||
<text class="header-title">{{ greetingTitle }}</text>
|
||||
</view>
|
||||
<view class="streak-badge">
|
||||
<text>已连续问候</text>
|
||||
<text class="streak-count">{{ streakDays }}</text>
|
||||
<text>天</text>
|
||||
<text class="fire-icon">🔥</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Main Card -->
|
||||
<view class="main-card-container">
|
||||
<view
|
||||
class="quote-card"
|
||||
:style="
|
||||
currentQuote.backgroundUrl
|
||||
? {
|
||||
backgroundImage: `url(${currentQuote.backgroundUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}
|
||||
: {}
|
||||
"
|
||||
>
|
||||
<view class="quote-icon">❝</view>
|
||||
<view class="quote-content">
|
||||
<text class="quote-text">{{ currentQuote.text }}</text>
|
||||
<text class="quote-highlight" v-if="currentQuote.highlight">{{
|
||||
currentQuote.highlight
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="quote-divider"></view>
|
||||
<view class="quote-author" v-if="authorName">
|
||||
<text>—— {{ authorName }} 的专属问候</text>
|
||||
</view>
|
||||
|
||||
<view class="card-actions">
|
||||
<view class="refresh-btn" @tap="refreshQuote">
|
||||
<uni-icons type="loop" size="16" color="#666" />
|
||||
<text>换一句</text>
|
||||
</view>
|
||||
|
||||
<view class="author-edit-box">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
v-model="authorName"
|
||||
placeholder="输入名字生成专属问候"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Categories -->
|
||||
<view class="category-section">
|
||||
<view class="category-grid">
|
||||
<view
|
||||
v-for="(cat, index) in scenes"
|
||||
:key="index"
|
||||
class="category-item"
|
||||
@tap="selectCategory(cat.id)"
|
||||
>
|
||||
<view
|
||||
class="cat-icon-box"
|
||||
:class="{ active: currentCategory === cat.id }"
|
||||
:style="{ background: cat.bg }"
|
||||
>
|
||||
<text class="cat-emoji">{{ cat.icon }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="cat-name"
|
||||
:class="{ active: currentCategory === cat.id }"
|
||||
>{{ cat.name }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Hot List -->
|
||||
<view class="hot-list-section">
|
||||
<view class="section-title-row">
|
||||
<view class="title-bar"></view>
|
||||
<text class="section-title">今日最热榜单</text>
|
||||
<text class="section-subtitle">REAL-TIME DATA</text>
|
||||
</view>
|
||||
|
||||
<view class="hot-list">
|
||||
<view
|
||||
v-for="(item, index) in hotList"
|
||||
:key="index"
|
||||
class="hot-item"
|
||||
@tap="useHotItem(item)"
|
||||
>
|
||||
<view class="rank-icon">
|
||||
<uni-icons
|
||||
v-if="index === 0"
|
||||
type="vip-filled"
|
||||
size="24"
|
||||
color="#ffbc00"
|
||||
/>
|
||||
<uni-icons
|
||||
v-else-if="index === 1"
|
||||
type="vip-filled"
|
||||
size="24"
|
||||
color="#b0bec5"
|
||||
/>
|
||||
<uni-icons v-else type="vip-filled" size="24" color="#cd7f32" />
|
||||
</view>
|
||||
<view class="hot-content">
|
||||
<text class="hot-text">{{ item.text }}</text>
|
||||
<view class="hot-meta">
|
||||
<text class="fire">🔥</text>
|
||||
<text class="hot-count">{{ item.count }}w 人正在使用</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<view class="bottom-actions safe-area-bottom">
|
||||
<view class="action-btn-group">
|
||||
<button class="save-btn" @tap="saveCard">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="download" size="20" color="#333" />
|
||||
</view>
|
||||
<text class="btn-text">保存</text>
|
||||
</button>
|
||||
<button class="send-btn" open-type="share">
|
||||
<uni-icons type="paperplane-filled" size="20" color="#fff" />
|
||||
<text>立即发送今日问候</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录弹窗 -->
|
||||
<LoginPopup />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import {
|
||||
getDailyInfo,
|
||||
getDailyRandomGreeting,
|
||||
saveDailyGreeting,
|
||||
} from "@/api/daily";
|
||||
import {
|
||||
getShareToken,
|
||||
saveViewRequest,
|
||||
generateObjectId,
|
||||
} from "@/utils/common.js";
|
||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const streakDays = ref(0);
|
||||
|
||||
const greetingTitle = computed(() => {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 9) return "早安,今天也要好运";
|
||||
if (hour < 12) return "上午好,元气满满";
|
||||
if (hour < 14) return "午安,记得休息";
|
||||
if (hour < 18) return "下午好,继续加油";
|
||||
return "晚安,好梦相伴";
|
||||
});
|
||||
|
||||
const scenes = ref([]);
|
||||
const currentCategory = ref("");
|
||||
|
||||
const currentQuote = ref({
|
||||
text: "",
|
||||
highlight: "",
|
||||
author: "",
|
||||
backgroundUrl: "",
|
||||
id: "",
|
||||
});
|
||||
const authorName = ref("");
|
||||
|
||||
const loadDailyInfo = async () => {
|
||||
try {
|
||||
const res = await getDailyInfo();
|
||||
if (res) {
|
||||
streakDays.value = res.streakDays || 0;
|
||||
if (res.lastSignature && !authorName.value) {
|
||||
authorName.value = res.lastSignature;
|
||||
}
|
||||
|
||||
if (res.scenes && res.scenes.length > 0) {
|
||||
scenes.value = res.scenes;
|
||||
if (!currentCategory.value) {
|
||||
currentCategory.value = res.scenes[0].id;
|
||||
}
|
||||
}
|
||||
|
||||
if (res.mainHero) {
|
||||
const { greetingContent, backgroundUrl, greetingId, greetingScene } =
|
||||
res.mainHero;
|
||||
let text = "";
|
||||
let highlight = "";
|
||||
if (greetingContent) {
|
||||
const parts = greetingContent.split(" ");
|
||||
if (parts.length > 1) {
|
||||
highlight = parts.pop();
|
||||
text = parts.join("\n");
|
||||
} else {
|
||||
text = greetingContent;
|
||||
}
|
||||
}
|
||||
|
||||
currentQuote.value = {
|
||||
text,
|
||||
highlight,
|
||||
author: authorName.value, // Will be reactive in template via authorName ref
|
||||
backgroundUrl: backgroundUrl || "",
|
||||
id: greetingId,
|
||||
content: greetingContent,
|
||||
};
|
||||
|
||||
if (greetingScene) {
|
||||
currentCategory.value = greetingScene;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load daily info:", e);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadDailyInfo();
|
||||
});
|
||||
|
||||
const hotList = ref([
|
||||
{ text: "新的一年,愿灵马带走烦恼...", count: "2.4" },
|
||||
{ text: "事事顺意,岁岁平安。", count: "1.8" },
|
||||
]);
|
||||
|
||||
const selectCategory = (id) => {
|
||||
currentCategory.value = id;
|
||||
refreshQuote();
|
||||
};
|
||||
|
||||
const refreshQuote = async () => {
|
||||
try {
|
||||
const res = await getDailyRandomGreeting(currentCategory.value);
|
||||
if (res) {
|
||||
const { greetingContent, backgroundUrl, greetingId } = res;
|
||||
let text = "";
|
||||
let highlight = "";
|
||||
if (greetingContent) {
|
||||
const parts = greetingContent.split(" ");
|
||||
if (parts.length > 1) {
|
||||
highlight = parts.pop();
|
||||
text = parts.join("\n");
|
||||
} else {
|
||||
text = greetingContent;
|
||||
}
|
||||
}
|
||||
|
||||
currentQuote.value = {
|
||||
...currentQuote.value,
|
||||
text,
|
||||
highlight,
|
||||
backgroundUrl: backgroundUrl || "",
|
||||
id: greetingId,
|
||||
content: greetingContent,
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to refresh quote:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const useHotItem = (item) => {
|
||||
currentQuote.value = {
|
||||
...currentQuote.value,
|
||||
text: item.text,
|
||||
highlight: "",
|
||||
author: "热榜推荐",
|
||||
};
|
||||
};
|
||||
|
||||
const saveCard = () => {
|
||||
uni.showToast({ title: "保存功能开发中", icon: "none" });
|
||||
};
|
||||
|
||||
// const sendGreeting = () => {
|
||||
// // Use uni.navigateTo for normal flow if not open-type="share"
|
||||
// // But here we might want to trigger share directly or just navigate to make page as before
|
||||
// // Based on user request "share after friend opens page", it implies we need to handle share
|
||||
// // Let's keep the navigation to make page for "Sending" (which usually means making a card first)
|
||||
// // BUT also add onShareAppMessage so the top right menu share works
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/make/index?scene=daily&content=${encodeURIComponent(
|
||||
// currentQuote.value.text,
|
||||
// )}&author=${encodeURIComponent(authorName.value)}`,
|
||||
// });
|
||||
// };
|
||||
|
||||
onShareAppMessage(async (options) => {
|
||||
const id = createGreeting();
|
||||
const shareToken = await getShareToken("daily_greeting", id);
|
||||
|
||||
return {
|
||||
title: `${authorName.value}给你发来了一份今日问候`,
|
||||
path: "/pages/greeting/share?shareToken=" + shareToken,
|
||||
};
|
||||
|
||||
const fromUser = userStore.userInfo?.nickName || "神秘好友";
|
||||
const fromAvatar = userStore.userInfo?.avatarUrl || "";
|
||||
|
||||
// Log the share attempt and path
|
||||
console.log("Sharing daily greeting", {
|
||||
res,
|
||||
fromUser,
|
||||
content: currentQuote.value.text,
|
||||
});
|
||||
|
||||
const path = `/pages/greeting/share?content=${encodeURIComponent(
|
||||
currentQuote.value.text,
|
||||
)}&author=${encodeURIComponent(
|
||||
authorName.value || currentQuote.value.author,
|
||||
)}&fromUser=${encodeURIComponent(fromUser)}&fromAvatar=${encodeURIComponent(
|
||||
fromAvatar,
|
||||
)}`;
|
||||
|
||||
console.log("Share path:", path);
|
||||
|
||||
return {
|
||||
title: `${fromUser}给你发来了一份今日问候`,
|
||||
path: path,
|
||||
};
|
||||
});
|
||||
|
||||
const createGreeting = () => {
|
||||
const id = generateObjectId();
|
||||
saveDailyGreeting({
|
||||
id,
|
||||
greetingId: currentQuote.value.id,
|
||||
content: currentQuote.value.content,
|
||||
signature: authorName.value,
|
||||
imageUrl: currentQuote.value.backgroundUrl,
|
||||
sceneId: currentCategory.value,
|
||||
});
|
||||
return id;
|
||||
};
|
||||
|
||||
onShareTimeline(() => {
|
||||
const fromUser = userStore.userInfo?.nickName || "神秘好友";
|
||||
return {
|
||||
title: `${fromUser}给你发来了一份今日问候`,
|
||||
query: `content=${encodeURIComponent(
|
||||
currentQuote.value.text,
|
||||
)}&author=${encodeURIComponent(
|
||||
authorName.value || currentQuote.value.author,
|
||||
)}`,
|
||||
imageUrl: "", // Optional: add a custom image if needed
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.daily-page {
|
||||
min-height: 100vh;
|
||||
background: #fbfbf9;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.streak-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
border: 1rpx solid #eee;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.streak-count {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #ff3b30;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.fire-icon {
|
||||
margin-left: 4rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
padding: 0 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* Main Card */
|
||||
.main-card-container {
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
|
||||
border: 4rpx solid #f5e6d3; /* Gold-ish border */
|
||||
position: relative;
|
||||
min-height: 600rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* Inner Border Effect */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 12rpx;
|
||||
border: 2rpx solid #f9f3e8;
|
||||
border-radius: 32rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
font-size: 80rpx;
|
||||
color: #f5e6d3;
|
||||
margin-bottom: 40rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
text-align: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
font-size: 40rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
line-height: 1.6;
|
||||
font-family: "Songti SC", serif;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.quote-highlight {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
color: #d81e06;
|
||||
font-weight: 800;
|
||||
margin-top: 20rpx;
|
||||
font-family: "Songti SC", serif;
|
||||
}
|
||||
|
||||
.quote-divider {
|
||||
width: 80rpx;
|
||||
height: 2rpx;
|
||||
background: #eee;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 60rpx;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
background: #fff;
|
||||
border: 1rpx solid #eee;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.author-edit-box {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
background: #f9f9f9;
|
||||
border: 2rpx solid #eee;
|
||||
border-radius: 40rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active,
|
||||
&:focus-within {
|
||||
background: #fff;
|
||||
border-color: #ff9800;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.15);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-right: 12rpx;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* Categories */
|
||||
.category-section {
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.cat-icon-box {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&.active {
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.cat-emoji {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hot List */
|
||||
.hot-list-section {
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
background: #d4a017;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 20rpx;
|
||||
color: #ccc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
&:active {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-icon {
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 450rpx;
|
||||
}
|
||||
|
||||
.hot-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.fire {
|
||||
color: #ff3b30;
|
||||
margin-right: 4rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
/* Bottom Actions */
|
||||
.bottom-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff; /* Glass effect if supported */
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
padding: 20rpx 32rpx;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.action-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
width: 100rpx;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 20rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:active .icon-circle {
|
||||
background: #eee;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
background: #8e0000; /* Deep Red/Brown */
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #8e0000 0%, #600000 100%);
|
||||
box-shadow: 0 8rpx 24rpx rgba(142, 0, 0, 0.3);
|
||||
transition: all 0.2s;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 12rpx rgba(142, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
pages/greeting/share.vue
Normal file
285
pages/greeting/share.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<view class="share-page">
|
||||
<NavBar title="今日问候" :transparent="true" color="#333" />
|
||||
|
||||
<!-- Top User Info -->
|
||||
<view class="user-header" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="fromAvatar || defaultAvatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="user-info">
|
||||
<view class="user-name">
|
||||
<text>你的好友</text>
|
||||
<text class="highlight-name">{{
|
||||
author || fromUser || "神秘好友"
|
||||
}}</text>
|
||||
</view>
|
||||
<text class="user-desc">给你发来了一份今日问候</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Main Card -->
|
||||
<view class="main-card-container">
|
||||
<view
|
||||
class="quote-card"
|
||||
:style="
|
||||
backgroundUrl
|
||||
? {
|
||||
backgroundImage: `url(${backgroundUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}
|
||||
: {}
|
||||
"
|
||||
>
|
||||
<view class="quote-icon">❝</view>
|
||||
<view class="quote-content">
|
||||
<text class="quote-text">{{ content }}</text>
|
||||
<text class="quote-highlight" v-if="highlight">{{ highlight }}</text>
|
||||
</view>
|
||||
<view class="quote-divider"></view>
|
||||
<view class="quote-author">
|
||||
<text>—— {{ author ? ` ${author} 的专属问候` : "专属问候" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<view class="action-buttons">
|
||||
<button class="btn primary-btn" @tap="navToMake">
|
||||
<uni-icons type="paperplane-filled" size="20" color="#fff" />
|
||||
<text>我也要送问候</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="footer-tip safe-area-bottom">
|
||||
<text>愿每一天都充满阳光与希望</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import { getPageDetail } from "@/api/system";
|
||||
|
||||
const navBarHeight = getBavBarHeight();
|
||||
const defaultAvatar =
|
||||
"https://file.lihailezzc.com/resource/96023631c6ab9c3496b7620097af3d6f.png";
|
||||
|
||||
const fromUser = ref("");
|
||||
const fromAvatar = ref("");
|
||||
const content = ref("万事顺遂\n岁岁平安\n愿你的生活\n日日有小确幸");
|
||||
const author = ref("陈小明");
|
||||
const highlight = ref("");
|
||||
const backgroundUrl = ref("");
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.shareToken) {
|
||||
const detail = await getPageDetail(options.shareToken);
|
||||
if (detail) {
|
||||
if (detail.from) {
|
||||
fromUser.value = detail.from.nickname;
|
||||
fromAvatar.value = detail.from.avatar;
|
||||
}
|
||||
if (detail.content) {
|
||||
const parts = detail.content.split(" ");
|
||||
if (parts.length > 1) {
|
||||
highlight.value = parts.pop();
|
||||
content.value = parts.join("\n");
|
||||
} else {
|
||||
content.value = detail.content;
|
||||
highlight.value = "";
|
||||
}
|
||||
}
|
||||
author.value = detail.signature || "专属问候";
|
||||
backgroundUrl.value = detail.imageUrl || "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const navToMake = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/greeting/daily",
|
||||
});
|
||||
};
|
||||
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: `${fromUser.value || "好友"}给你发来了一份今日问候`,
|
||||
path: `/pages/greeting/share?content=${encodeURIComponent(content.value)}&author=${encodeURIComponent(author.value)}&fromUser=${encodeURIComponent(fromUser.value)}&fromAvatar=${encodeURIComponent(fromAvatar.value)}`,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-page {
|
||||
min-height: 100vh;
|
||||
background: #fbfbf9;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
padding: 20rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 4rpx;
|
||||
|
||||
.highlight-name {
|
||||
color: #d81e06;
|
||||
font-weight: bold;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Greeting Card - Adapted from daily.vue quote-card */
|
||||
.main-card-container {
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
|
||||
border: 4rpx solid #f5e6d3; /* Gold-ish border */
|
||||
position: relative;
|
||||
min-height: 700rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* Inner Border Effect */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 12rpx;
|
||||
border: 2rpx solid #f9f3e8;
|
||||
border-radius: 32rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
font-size: 80rpx;
|
||||
color: #f5e6d3;
|
||||
margin-bottom: 40rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
text-align: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
font-size: 40rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
line-height: 1.6;
|
||||
font-family: "Songti SC", serif;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.quote-highlight {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
color: #d81e06;
|
||||
font-weight: 800;
|
||||
margin-top: 20rpx;
|
||||
font-family: "Songti SC", serif;
|
||||
}
|
||||
|
||||
.quote-divider {
|
||||
width: 80rpx;
|
||||
height: 2rpx;
|
||||
background: #eee;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
font-family: "Songti SC", serif;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
padding: 0 60rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: linear-gradient(135deg, #8e0000 0%, #600000 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8rpx 24rpx rgba(142, 0, 0, 0.3);
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 4rpx 12rpx rgba(142, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -137,7 +137,12 @@ import {
|
||||
onShow,
|
||||
} from "@dcloudio/uni-app";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { getRecommendList, getRandomGreeting, getTipsList } from "@/api/system";
|
||||
import {
|
||||
getRecommendList,
|
||||
getRandomGreeting,
|
||||
getTipsList,
|
||||
getShareReward,
|
||||
} from "@/api/system";
|
||||
import { getShareToken, saveViewRequest, trackRecord } from "@/utils/common.js";
|
||||
|
||||
const countdownText = ref("");
|
||||
@@ -210,6 +215,7 @@ onLoad((options) => {
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("index");
|
||||
getShareReward({ scene: "index" });
|
||||
return {
|
||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1171
pages/index/index_old.vue
Normal file
1171
pages/index/index_old.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -203,6 +203,31 @@
|
||||
<view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
|
||||
>✔</view
|
||||
>
|
||||
<!-- Lock Overlay -->
|
||||
<view
|
||||
v-if="!tpl.isUnlock && tpl.unlockType"
|
||||
class="lock-overlay"
|
||||
>
|
||||
<!-- Badge -->
|
||||
<view class="unlock-badge" :class="tpl.unlockType">
|
||||
{{
|
||||
tpl.unlockType === "sing3"
|
||||
? "登录3天"
|
||||
: tpl.unlockType === "sing1"
|
||||
? "登录1天"
|
||||
: tpl.unlockType === "ad"
|
||||
? "广告"
|
||||
: tpl.unlockType === "vip"
|
||||
? "VIP"
|
||||
: "解锁"
|
||||
}}
|
||||
</view>
|
||||
|
||||
<!-- Center Lock -->
|
||||
<view class="center-lock">
|
||||
<uni-icons type="locked-filled" size="18" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loadingTemplates" class="loading-more"
|
||||
@@ -485,6 +510,45 @@
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- Scene Selection Popup -->
|
||||
<uni-popup ref="scenePopup" type="center" :is-mask-click="false">
|
||||
<view class="scene-popup">
|
||||
<view class="scene-header">
|
||||
<text class="scene-title">选择祝福场景</text>
|
||||
<text class="scene-subtitle">挑选一个场景,开启专属祝福</text>
|
||||
<view class="scene-divider">
|
||||
<view class="line"></view>
|
||||
<uni-icons
|
||||
type="cloud-upload-filled"
|
||||
size="16"
|
||||
color="#E6B800"
|
||||
></uni-icons>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scene-grid">
|
||||
<view
|
||||
class="scene-item"
|
||||
v-for="(scene, index) in scenes"
|
||||
:key="index"
|
||||
@tap="selectScene(scene)"
|
||||
>
|
||||
<view class="scene-icon-box" :style="{ background: scene.bgColor }">
|
||||
<uni-icons
|
||||
:type="scene.icon"
|
||||
size="26"
|
||||
:color="scene.color"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<text class="scene-name">{{ scene.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="skip-btn" @tap="skipScene">跳过,直接制作</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||||
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -499,7 +563,12 @@ import {
|
||||
getCardTemplateTitleList,
|
||||
getCardMusicList,
|
||||
} from "@/api/make";
|
||||
import { abilityCheck, getShareReward, msgCheckApi } from "@/api/system";
|
||||
import {
|
||||
abilityCheck,
|
||||
getShareReward,
|
||||
msgCheckApi,
|
||||
watchAdReward,
|
||||
} from "@/api/system";
|
||||
import {
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
@@ -515,8 +584,11 @@ import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||
import { saveRecordRequest, uploadImage, trackRecord } from "@/utils/common.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginPopupRef = ref(null);
|
||||
const rewardAdRef = ref(null);
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
|
||||
const DEFAULT_AVATAR =
|
||||
@@ -878,10 +950,6 @@ const userOffsetY = ref(0);
|
||||
const shareToken = ref("");
|
||||
|
||||
onLoad((options) => {
|
||||
getTemplateList();
|
||||
getTemplateContentList();
|
||||
getTemplateTitleList();
|
||||
getMusicList();
|
||||
if (options.shareToken) {
|
||||
shareToken.value = options.shareToken;
|
||||
}
|
||||
@@ -889,8 +957,90 @@ onLoad((options) => {
|
||||
eventName: "make_page_visit",
|
||||
eventType: `visit`,
|
||||
});
|
||||
|
||||
if (options.scene) {
|
||||
currentScene.value = options.scene;
|
||||
loadData();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
scenePopup.value.open();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
if (options.content) {
|
||||
blessingText.value = { content: decodeURIComponent(options.content) };
|
||||
}
|
||||
if (options.author) {
|
||||
signatureName.value = decodeURIComponent(options.author);
|
||||
}
|
||||
});
|
||||
|
||||
const loadData = () => {
|
||||
getTemplateList();
|
||||
getTemplateContentList();
|
||||
getTemplateTitleList();
|
||||
getMusicList();
|
||||
};
|
||||
|
||||
const currentScene = ref("");
|
||||
const scenePopup = ref(null);
|
||||
const scenes = [
|
||||
{
|
||||
name: "节日祝福",
|
||||
value: "holiday",
|
||||
icon: "notification-filled",
|
||||
color: "#FF3B30",
|
||||
bgColor: "#FFF5F5",
|
||||
},
|
||||
{
|
||||
name: "生日纪念",
|
||||
value: "birthday",
|
||||
icon: "calendar-filled",
|
||||
color: "#FF9500",
|
||||
bgColor: "#FFF8E5",
|
||||
},
|
||||
{
|
||||
name: "每日问候",
|
||||
value: "daily",
|
||||
icon: "star-filled",
|
||||
color: "#FFCC00",
|
||||
bgColor: "#FFFBE6",
|
||||
},
|
||||
{
|
||||
name: "情绪表达",
|
||||
value: "emotion",
|
||||
icon: "heart-filled",
|
||||
color: "#FF2D55",
|
||||
bgColor: "#FFF0F5",
|
||||
},
|
||||
{
|
||||
name: "人际关系",
|
||||
value: "relationship",
|
||||
icon: "gift-filled",
|
||||
color: "#FF5E3A",
|
||||
bgColor: "#FFF2F0",
|
||||
},
|
||||
{
|
||||
name: "职场祝福",
|
||||
value: "workplace",
|
||||
icon: "shop-filled",
|
||||
color: "#8B572A",
|
||||
bgColor: "#F9F0E6",
|
||||
},
|
||||
];
|
||||
|
||||
const selectScene = (scene) => {
|
||||
currentScene.value = scene.value;
|
||||
scenePopup.value.close();
|
||||
loadData();
|
||||
};
|
||||
|
||||
const skipScene = () => {
|
||||
currentScene.value = "";
|
||||
scenePopup.value.close();
|
||||
loadData();
|
||||
};
|
||||
|
||||
const syncUserInfo = (force = false) => {
|
||||
if (isLoggedIn.value) {
|
||||
if (signatureName.value === "xxx" || !signatureName.value) {
|
||||
@@ -988,7 +1138,10 @@ const getTemplateList = async (isLoadMore = false) => {
|
||||
|
||||
loadingTemplates.value = true;
|
||||
try {
|
||||
const res = await getCardTemplateList(templatePage.value);
|
||||
const res = await getCardTemplateList(
|
||||
templatePage.value,
|
||||
currentScene.value,
|
||||
);
|
||||
|
||||
// 兼容数组或对象列表格式
|
||||
const list = Array.isArray(res) ? res : res.list || [];
|
||||
@@ -1052,7 +1205,10 @@ const getTemplateTitleList = async (isLoadMore = false) => {
|
||||
|
||||
loadingTitles.value = true;
|
||||
try {
|
||||
const res = await getCardTemplateTitleList(titlePage.value);
|
||||
const res = await getCardTemplateTitleList(
|
||||
titlePage.value,
|
||||
currentScene.value,
|
||||
);
|
||||
const list = Array.isArray(res) ? res : res.list || [];
|
||||
|
||||
if (list.length > 0) {
|
||||
@@ -1105,7 +1261,10 @@ const getTemplateContentList = async (isLoadMore = false) => {
|
||||
|
||||
loadingBlessings.value = true;
|
||||
try {
|
||||
const res = await getCardTemplateContentList(blessingPage.value);
|
||||
const res = await getCardTemplateContentList(
|
||||
blessingPage.value,
|
||||
currentScene.value,
|
||||
);
|
||||
const list = Array.isArray(res) ? res : res.list || [];
|
||||
|
||||
if (list.length > 0) {
|
||||
@@ -1225,8 +1384,13 @@ const closePanel = () => {
|
||||
const templates = ref([]);
|
||||
|
||||
const currentTemplate = ref(templates.value[0]);
|
||||
const currentUnlockTpl = ref(null);
|
||||
|
||||
const applyTemplate = (tpl) => {
|
||||
if (tpl.isUnlock === false) {
|
||||
handleUnlock(tpl);
|
||||
return;
|
||||
}
|
||||
trackRecord({
|
||||
eventName: "card_tpl_choose",
|
||||
eventType: "click",
|
||||
@@ -1236,6 +1400,66 @@ const applyTemplate = (tpl) => {
|
||||
closePanel();
|
||||
};
|
||||
|
||||
const handleUnlock = (tpl) => {
|
||||
switch (tpl.unlockType) {
|
||||
case "vip":
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/vip",
|
||||
});
|
||||
break;
|
||||
case "ad":
|
||||
currentUnlockTpl.value = tpl;
|
||||
rewardAdRef.value.showAd();
|
||||
break;
|
||||
case "sing1":
|
||||
uni.showToast({
|
||||
title: "需要连续登录1天解锁",
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
case "sing3":
|
||||
uni.showToast({
|
||||
title: "需要连续登录3天解锁",
|
||||
icon: "none",
|
||||
});
|
||||
break;
|
||||
default:
|
||||
uni.showToast({
|
||||
title: "未满足解锁条件",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdReward = async (token) => {
|
||||
try {
|
||||
const res = await watchAdReward(token);
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "解锁成功",
|
||||
icon: "success",
|
||||
});
|
||||
// 解锁成功后,更新本地状态,允许使用
|
||||
if (currentUnlockTpl.value) {
|
||||
currentUnlockTpl.value.isUnlock = true;
|
||||
// 同时更新列表中的状态
|
||||
const index = templates.value.findIndex(
|
||||
(t) => t.id === currentUnlockTpl.value.id,
|
||||
);
|
||||
if (index !== -1) {
|
||||
templates.value[index].isUnlock = true;
|
||||
}
|
||||
|
||||
applyTemplate(currentUnlockTpl.value);
|
||||
currentUnlockTpl.value = null;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Reward claim failed", e);
|
||||
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const selectTitle = (title) => {
|
||||
trackRecord({
|
||||
eventName: "card_title_choose",
|
||||
@@ -1815,6 +2039,56 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
||||
.user-desc {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.6;
|
||||
/* Lock Overlay - Modern Style */
|
||||
.lock-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
background: rgba(0, 0, 0, 0.05); /* very subtle dim */
|
||||
}
|
||||
|
||||
.unlock-badge {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
&.vip {
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
|
||||
}
|
||||
&.ad {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
&.sing1,
|
||||
&.sing3 {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.center-lock {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部步骤条 */
|
||||
@@ -2015,7 +2289,58 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
}
|
||||
.tpl-card .lock-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
background: rgba(0, 0, 0, 0.05); /* very subtle dim */
|
||||
}
|
||||
|
||||
.tpl-card .unlock-badge {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
&.vip {
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
|
||||
}
|
||||
&.ad {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
&.sing1,
|
||||
&.sing3 {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.tpl-card .center-lock {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.tpl-check {
|
||||
position: absolute;
|
||||
right: 6rpx;
|
||||
@@ -2415,4 +2740,104 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 场景选择弹窗 */
|
||||
.scene-popup {
|
||||
width: 520rpx;
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 4rpx solid #f8e71c; /* 金色边框 */
|
||||
box-shadow: 0 0 40rpx rgba(248, 231, 28, 0.2);
|
||||
}
|
||||
|
||||
.scene-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.scene-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
color: #d0021b; /* 深红色 */
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.scene-subtitle {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.scene-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.scene-divider .line {
|
||||
width: 80rpx;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(230, 184, 0, 0),
|
||||
rgba(230, 184, 0, 0.5),
|
||||
rgba(230, 184, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.scene-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
width: 100%;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
background: #fff;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.scene-item:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.scene-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.skip-btn {
|
||||
font-size: 24rpx;
|
||||
color: #bbb;
|
||||
padding: 10rpx;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,6 +103,7 @@ import {
|
||||
import { getMyCard } from "@/api/mine.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import { getShareToken, trackRecord } from "@/utils/common.js";
|
||||
import { getShareReward } from "@/api/system";
|
||||
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
@@ -134,6 +135,7 @@ onShareAppMessage(async (options) => {
|
||||
"card_generate",
|
||||
options?.target?.dataset?.item?.id,
|
||||
);
|
||||
getShareReward({ scene: "card_generate" });
|
||||
return {
|
||||
title: "我刚做了一张祝福卡片,送给你",
|
||||
path: "/pages/detail/index?shareToken=" + shareToken,
|
||||
@@ -142,6 +144,7 @@ onShareAppMessage(async (options) => {
|
||||
};
|
||||
} else {
|
||||
const shareToken = await getShareToken("greeting_page", "");
|
||||
getShareReward({ scene: "greeting_page" });
|
||||
return {
|
||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import { trackRecord } from "@/utils/common.js";
|
||||
|
||||
|
||||
@@ -138,6 +138,7 @@ import { ref, computed, onMounted } from "vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { onShareAppMessage } from "@dcloudio/uni-app";
|
||||
import { getShareToken, trackRecord } from "@/utils/common";
|
||||
import { getShareReward } from "@/api/system";
|
||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
@@ -174,6 +175,7 @@ onMounted(() => {
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("mine");
|
||||
getShareReward({ scene: "mine" });
|
||||
return {
|
||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
||||
path: "/pages/index/index?shareToken=" + shareToken,
|
||||
|
||||
@@ -119,6 +119,7 @@ import {
|
||||
onShareTimeline,
|
||||
} from "@dcloudio/uni-app";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { getShareReward } from "@/api/system";
|
||||
import { getShareToken } from "@/utils/common";
|
||||
|
||||
const features = ref([
|
||||
@@ -230,10 +231,12 @@ const share = () => {
|
||||
uni.showShareMenu && uni.showShareMenu();
|
||||
};
|
||||
|
||||
onShareAppMessage(() => {
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("spring_index");
|
||||
getShareReward({ scene: "spring_index" });
|
||||
return {
|
||||
title: "2026 丙午马年,送你一份新春祝福 🎊",
|
||||
path: "/pages/spring/index",
|
||||
path: `/pages/spring/index?shareToken=${shareToken}`,
|
||||
imageUrl:
|
||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||
};
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<view class="preview-card">
|
||||
<view class="preview-badge">PREVIEW</view>
|
||||
<image
|
||||
:src="detailData.imageUrl"
|
||||
:src="getThumbUrl(detailData.imageUrl)"
|
||||
mode="widthFix"
|
||||
class="main-image"
|
||||
@tap="previewImage"
|
||||
@@ -43,16 +43,25 @@
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<view class="action-buttons">
|
||||
<button class="btn primary-btn" @tap="goToIndex">
|
||||
<view class="points-display" v-if="isLoggedIn">
|
||||
<text class="label">当前积分:</text>
|
||||
<text class="value">{{ userPoints }}</text>
|
||||
</view>
|
||||
<button class="btn primary-btn" @tap="downloadWallpaper">
|
||||
<view class="btn-content">
|
||||
<view class="btn-main">
|
||||
<text class="btn-icon">✨</text>
|
||||
<text>我也要领同款壁纸</text>
|
||||
<text>下载高清壁纸</text>
|
||||
</view>
|
||||
<text class="btn-sub">消耗 20 积分</text>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- More Wallpapers -->
|
||||
<view class="more-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">我也要领新春壁纸</text>
|
||||
<text class="section-title">更多同款壁纸</text>
|
||||
<view class="more-link" @tap="goToIndex">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">›</text>
|
||||
@@ -77,39 +86,6 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Fortune Banner -->
|
||||
<!-- Wallpaper Banner -->
|
||||
<view class="wallpaper-banner" @tap="goToFortune">
|
||||
<view class="banner-icon">
|
||||
<text>🏮</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去抽取新年运势</text>
|
||||
<text class="banner-desc">每日一签,开启你的新年好运</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
<view class="wallpaper-banner" @tap="goToGreeting">
|
||||
<view class="banner-icon">
|
||||
<text>🧧</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去制作新年贺卡</text>
|
||||
<text class="banner-desc">定制专属祝福,传递浓浓年味</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
<view class="wallpaper-banner" @tap="goToAvatar">
|
||||
<view class="banner-icon">
|
||||
<text>🖼</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去挑选新年头像</text>
|
||||
<text class="banner-desc">精选新年头像,让手机也过年</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-divider">
|
||||
@@ -120,16 +96,35 @@
|
||||
<view class="footer-sub">新春祝福 · 传递温情</view>
|
||||
</view>
|
||||
</view>
|
||||
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||||
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { getPageDetail } from "@/api/system";
|
||||
import { getWallpaperRecommendList } from "@/api/wallpaper";
|
||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||
import { getPageDetail, getShareReward } from "@/api/system";
|
||||
import { getWallpaperSameList } from "@/api/wallpaper";
|
||||
import {
|
||||
getShareToken,
|
||||
saveViewRequest,
|
||||
saveRemoteImageToLocal,
|
||||
saveRecordRequest,
|
||||
trackRecord,
|
||||
} from "@/utils/common.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { watchAdReward } from "@/api/system.js";
|
||||
import { checkAbilityAndHandle } from "@/utils/ability.js";
|
||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginPopupRef = ref(null);
|
||||
const rewardAdRef = ref(null);
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
const userPoints = computed(() => userStore.userInfo.points || 0);
|
||||
|
||||
const navHeight = getBavBarHeight();
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
@@ -139,17 +134,29 @@ const detailData = ref({
|
||||
});
|
||||
const recommendList = ref([]);
|
||||
const shareToken = ref("");
|
||||
const categoryId = ref("");
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.shareToken) {
|
||||
shareToken.value = options.shareToken;
|
||||
await fetchDetail();
|
||||
}
|
||||
fetchRecommend();
|
||||
if (options.id) {
|
||||
detailData.value.id = options.id;
|
||||
}
|
||||
if (options.imageUrl) {
|
||||
detailData.value.imageUrl = decodeURIComponent(options.imageUrl);
|
||||
}
|
||||
|
||||
if (options.categoryId) {
|
||||
categoryId.value = options.categoryId;
|
||||
}
|
||||
fetchRecommend(options.id);
|
||||
});
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
||||
getShareReward({ scene: "wallpaper_download" });
|
||||
return {
|
||||
title: "快来看看我刚领到的新年精美壁纸 🖼",
|
||||
path: `/pages/wallpaper/detail?shareToken=${token || ""}`,
|
||||
@@ -180,6 +187,7 @@ const fetchDetail = async () => {
|
||||
saveViewRequest(shareToken.value, "wallpaper_detail", res.id);
|
||||
if (res) {
|
||||
detailData.value = res;
|
||||
fetchRecommend(res.id);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch detail", e);
|
||||
@@ -190,10 +198,12 @@ const fetchDetail = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRecommend = async () => {
|
||||
const fetchRecommend = async (id) => {
|
||||
if (!id && !detailData.value.id) return;
|
||||
try {
|
||||
const res = await getWallpaperRecommendList();
|
||||
const res = await getWallpaperSameList(id || detailData.value.id);
|
||||
recommendList.value = res;
|
||||
// categoryId.value = res[0]?.categoryId || "";
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch recommendations", e);
|
||||
}
|
||||
@@ -212,7 +222,7 @@ const goBack = () => {
|
||||
|
||||
const goToIndex = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/wallpaper/index",
|
||||
url: `/pages/wallpaper/index?categoryId=${categoryId.value}`,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -223,25 +233,91 @@ const goToFortune = () => {
|
||||
};
|
||||
|
||||
const previewImage = () => {
|
||||
// if (detailData.value.imageUrl) {
|
||||
// uni.previewImage({
|
||||
// urls: [detailData.value.imageUrl],
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const onRecommendClick = () => {
|
||||
goToIndex();
|
||||
};
|
||||
|
||||
const goToGreeting = () => {
|
||||
uni.switchTab({ url: "/pages/make/index" });
|
||||
};
|
||||
|
||||
const goToAvatar = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/avatar/index",
|
||||
if (detailData.value.imageUrl) {
|
||||
uni.previewImage({
|
||||
urls: [detailData.value.imageUrl],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onRecommendClick = (item) => {
|
||||
// Update detailData with new item info
|
||||
detailData.value = {
|
||||
...detailData.value,
|
||||
id: item.id,
|
||||
imageUrl: item.imageUrl,
|
||||
title: item.title,
|
||||
};
|
||||
// Refresh recommendations for the new item
|
||||
fetchRecommend(item.id);
|
||||
// Scroll to top or just update view
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 300,
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogind = async () => {
|
||||
// Logic after successful login if needed
|
||||
};
|
||||
|
||||
const handleAdReward = async (token) => {
|
||||
try {
|
||||
const res = await watchAdReward(token);
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "获得50积分",
|
||||
icon: "success",
|
||||
});
|
||||
await userStore.fetchUserAssets();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Reward claim failed", e);
|
||||
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const downloadWallpaper = async () => {
|
||||
trackRecord({
|
||||
eventName: "wallpaper_download_click",
|
||||
eventType: `click`,
|
||||
elementId: detailData.value?.id || "",
|
||||
});
|
||||
if (!isLoggedIn.value) {
|
||||
loginPopupRef.value.open();
|
||||
return;
|
||||
}
|
||||
|
||||
const canProceed = await checkAbilityAndHandle(
|
||||
"wallpaper_download",
|
||||
rewardAdRef,
|
||||
);
|
||||
if (!canProceed) return;
|
||||
|
||||
uni.showLoading({ title: "下载中..." });
|
||||
try {
|
||||
// Parallelize save record and download
|
||||
// Wait for saveRecordRequest to ensure backend deducts points
|
||||
await Promise.all([
|
||||
saveRecordRequest(
|
||||
"",
|
||||
detailData.value?.id,
|
||||
"wallpaper_download",
|
||||
detailData.value?.imageUrl,
|
||||
),
|
||||
saveRemoteImageToLocal(detailData.value?.imageUrl),
|
||||
]);
|
||||
|
||||
// Refresh user assets to show updated points
|
||||
await userStore.fetchUserAssets();
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "保存成功 消耗 20 积分", icon: "success" });
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
console.error("Download failed", e);
|
||||
uni.showToast({ title: "下载失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -359,10 +435,12 @@ const goToAvatar = () => {
|
||||
}
|
||||
|
||||
.main-image {
|
||||
width: 100%;
|
||||
width: 460rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
background-color: #fafafa; // Placeholder color
|
||||
box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -394,6 +472,7 @@ const goToAvatar = () => {
|
||||
background: linear-gradient(90deg, #ff3b30 0%, #ff6b6b 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.15);
|
||||
height: 64px; /* Increased height for two lines */
|
||||
}
|
||||
|
||||
&.secondary-btn {
|
||||
@@ -407,6 +486,43 @@ const goToAvatar = () => {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.points-display {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.value {
|
||||
color: #ff5722;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
|
||||
.btn-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.btn-sub {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-section {
|
||||
|
||||
@@ -91,6 +91,7 @@
|
||||
@logind="handleLogind"
|
||||
:share-token="shareToken"
|
||||
/>
|
||||
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -103,16 +104,19 @@ import {
|
||||
getShareToken,
|
||||
} from "@/utils/common.js";
|
||||
import { onShareAppMessage, onShareTimeline, onLoad } from "@dcloudio/uni-app";
|
||||
import { getShareReward, abilityCheck } from "@/api/system.js";
|
||||
import { getShareReward, watchAdReward } from "@/api/system.js";
|
||||
import { checkAbilityAndHandle } from "@/utils/ability.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { saveViewRequest, trackRecord } from "@/utils/common.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginPopupRef = ref(null);
|
||||
const rewardAdRef = ref(null);
|
||||
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
const userScore = computed(() => userStore.userInfo.score || 0);
|
||||
const userScore = computed(() => userStore.userInfo.points || 0);
|
||||
const downloadCost = ref(20);
|
||||
|
||||
const categories = ref([]);
|
||||
@@ -171,6 +175,10 @@ onLoad((options) => {
|
||||
shareToken.value = options.shareToken;
|
||||
saveViewRequest(options.shareToken, "wallpaper_download");
|
||||
}
|
||||
if (options.categoryId) {
|
||||
currentCategoryId.value = options.categoryId;
|
||||
}
|
||||
fetchCategories();
|
||||
trackRecord({
|
||||
eventName: "wallpaper_page_visit",
|
||||
eventType: `visit`,
|
||||
@@ -187,7 +195,9 @@ const fetchCategories = async () => {
|
||||
const list = Array.isArray(res) ? res : res?.list || [];
|
||||
if (list.length > 0) {
|
||||
categories.value = list;
|
||||
if (!currentCategoryId.value) {
|
||||
currentCategoryId.value = list[0].id;
|
||||
}
|
||||
loadWallpapers(true);
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -267,6 +277,22 @@ const previewImage = (index) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAdReward = async (token) => {
|
||||
try {
|
||||
const res = await watchAdReward(token);
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "获得50积分",
|
||||
icon: "success",
|
||||
});
|
||||
await userStore.fetchUserAssets();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Reward claim failed", e);
|
||||
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const downloadWallpaper = async (item) => {
|
||||
trackRecord({
|
||||
eventName: "wallpaper_download_click",
|
||||
@@ -278,28 +304,31 @@ const downloadWallpaper = async (item) => {
|
||||
return;
|
||||
}
|
||||
|
||||
const abilityRes = await abilityCheck("wallpaper_download");
|
||||
if (!abilityRes.canUse) {
|
||||
if (
|
||||
abilityRes?.blockType === "need_share" &&
|
||||
abilityRes?.message === "分享可继续"
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "分享给好友即可下载",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: "您今日壁纸下载次数已用完,明日再试",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const canProceed = await checkAbilityAndHandle(
|
||||
"wallpaper_download",
|
||||
rewardAdRef,
|
||||
);
|
||||
if (!canProceed) return;
|
||||
|
||||
uni.showLoading({ title: "下载中..." });
|
||||
await saveRemoteImageToLocal(item.imageUrl);
|
||||
saveRecordRequest("", item.id, "wallpaper_download", item.imageUrl);
|
||||
try {
|
||||
// Parallelize save record and download
|
||||
// Wait for saveRecordRequest to ensure backend deducts points
|
||||
await Promise.all([
|
||||
saveRecordRequest("", item.id, "wallpaper_download", item.imageUrl),
|
||||
saveRemoteImageToLocal(item.imageUrl),
|
||||
]);
|
||||
|
||||
// Refresh user assets to show updated points
|
||||
await userStore.fetchUserAssets();
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "保存成功 消耗 20 积分", icon: "success" });
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
console.error("Download failed", e);
|
||||
uni.showToast({ title: "下载失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const shareWallpaper = (item) => {};
|
||||
|
||||
559
pages/wallpaper/share.vue
Normal file
559
pages/wallpaper/share.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<view class="share-page" :style="{ paddingTop: navHeight + 'px' }">
|
||||
<!-- Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view class="back" @tap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<text class="title">壁纸详情</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-container">
|
||||
<!-- Sharer Info -->
|
||||
<view class="sharer-info" v-if="detailData.from">
|
||||
<image
|
||||
:src="detailData.from.avatar || '/static/default-avatar.png'"
|
||||
class="avatar"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="info-text">
|
||||
<view class="nickname">{{
|
||||
detailData.from.nickname || "神秘好友"
|
||||
}}</view>
|
||||
<view class="action-text">给你分享了一张2026新春精美壁纸</view>
|
||||
<view class="sub-text">★ 2026 且马贺岁</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Wallpaper Preview -->
|
||||
<view class="preview-card">
|
||||
<view class="preview-badge">PREVIEW</view>
|
||||
<image
|
||||
:src="detailData.imageUrl"
|
||||
mode="widthFix"
|
||||
class="main-image"
|
||||
@tap="previewImage"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<view class="action-buttons">
|
||||
<button class="btn primary-btn" @tap="goToIndex">
|
||||
<text class="btn-icon">✨</text>
|
||||
<text>我也要领同款壁纸</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- More Wallpapers -->
|
||||
<view class="more-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">我也要领新春壁纸</text>
|
||||
<view class="more-link" @tap="goToIndex">
|
||||
<text>查看更多</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="more-scroll" :show-scrollbar="false">
|
||||
<view class="scroll-inner">
|
||||
<view
|
||||
v-for="(item, index) in recommendList"
|
||||
:key="index"
|
||||
class="scroll-item"
|
||||
@tap="onRecommendClick(item)"
|
||||
>
|
||||
<image
|
||||
:src="getThumbUrl(item.imageUrl)"
|
||||
mode="aspectFill"
|
||||
class="scroll-img"
|
||||
/>
|
||||
<text class="item-title">{{ item.title || "新春壁纸" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Fortune Banner -->
|
||||
<!-- Wallpaper Banner -->
|
||||
<view class="wallpaper-banner" @tap="goToFortune">
|
||||
<view class="banner-icon">
|
||||
<text>🏮</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去抽取新年运势</text>
|
||||
<text class="banner-desc">每日一签,开启你的新年好运</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
<view class="wallpaper-banner" @tap="goToGreeting">
|
||||
<view class="banner-icon">
|
||||
<text>🧧</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去制作新年贺卡</text>
|
||||
<text class="banner-desc">定制专属祝福,传递浓浓年味</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
<view class="wallpaper-banner" @tap="goToAvatar">
|
||||
<view class="banner-icon">
|
||||
<text>🖼</text>
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">去挑选新年头像</text>
|
||||
<text class="banner-desc">精选新年头像,让手机也过年</text>
|
||||
</view>
|
||||
<text class="banner-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-divider">
|
||||
<view class="line"></view>
|
||||
<text class="footer-text">2026 HAPPY NEW YEAR</text>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="footer-sub">新春祝福 · 传递温情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||
import { getBavBarHeight } from "@/utils/system";
|
||||
import { getPageDetail, getShareReward } from "@/api/system";
|
||||
import { getWallpaperRecommendList } from "@/api/wallpaper";
|
||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||
|
||||
const navHeight = getBavBarHeight();
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
const detailData = ref({
|
||||
imageUrl: "",
|
||||
from: null,
|
||||
});
|
||||
const recommendList = ref([]);
|
||||
const shareToken = ref("");
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.shareToken) {
|
||||
shareToken.value = options.shareToken;
|
||||
await fetchDetail();
|
||||
}
|
||||
fetchRecommend();
|
||||
});
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
||||
getShareReward({ scene: "wallpaper_download" });
|
||||
return {
|
||||
title: "快来看看我刚领到的新年精美壁纸 🖼",
|
||||
path: `/pages/wallpaper/detail?shareToken=${token || ""}`,
|
||||
imageUrl:
|
||||
detailData.value?.imageUrl ||
|
||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||
};
|
||||
});
|
||||
|
||||
onShareTimeline(async () => {
|
||||
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
||||
return {
|
||||
title: "快来看看我刚领到的新年精美壁纸 🖼",
|
||||
query: `shareToken=${token}`,
|
||||
imageUrl:
|
||||
detailData.value?.imageUrl ||
|
||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||
};
|
||||
});
|
||||
|
||||
const getThumbUrl = (url) => {
|
||||
return `${url}?imageView2/1/w/340/h/600/q/80`;
|
||||
};
|
||||
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
const res = await getPageDetail(shareToken.value);
|
||||
saveViewRequest(shareToken.value, "wallpaper_detail", res.id);
|
||||
if (res) {
|
||||
detailData.value = res;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch detail", e);
|
||||
uni.showToast({
|
||||
title: "获取详情失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRecommend = async () => {
|
||||
try {
|
||||
const res = await getWallpaperRecommendList();
|
||||
recommendList.value = res;
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch recommendations", e);
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const goToIndex = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/wallpaper/index",
|
||||
});
|
||||
};
|
||||
|
||||
const goToFortune = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/fortune/index",
|
||||
});
|
||||
};
|
||||
|
||||
const previewImage = () => {
|
||||
// if (detailData.value.imageUrl) {
|
||||
// uni.previewImage({
|
||||
// urls: [detailData.value.imageUrl],
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const onRecommendClick = () => {
|
||||
goToIndex();
|
||||
};
|
||||
|
||||
const goToGreeting = () => {
|
||||
uni.switchTab({ url: "/pages/make/index" });
|
||||
};
|
||||
|
||||
const goToAvatar = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/avatar/index",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-page {
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: #ffffff;
|
||||
|
||||
.nav-content {
|
||||
height: 44px; // Standard nav height
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
/* 增大点击区域 */
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
|
||||
.back-icon {
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx; /* Balance back button */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.sharer-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
.nickname {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 12px;
|
||||
color: #ff3b30;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #f5f5f5;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.preview-badge {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
background-color: #fafafa; // Placeholder color
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
border-radius: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.primary-btn {
|
||||
background: linear-gradient(90deg, #ff3b30 0%, #ff6b6b 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.15);
|
||||
}
|
||||
|
||||
&.secondary-btn {
|
||||
background: #f9f9f9;
|
||||
color: #333;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.more-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #ff3b30;
|
||||
|
||||
.arrow {
|
||||
margin-left: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll-inner {
|
||||
display: flex;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
.scroll-img {
|
||||
width: 100%;
|
||||
height: 355rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fortune-banner-wrap {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.wallpaper-banner {
|
||||
background: #fafafa;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
border: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.banner-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.banner-icon text {
|
||||
font-size: 40rpx;
|
||||
color: #ff3b30;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.banner-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.banner-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.footer-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.line {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-sub {
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/qrcode.jpg
Normal file
BIN
static/images/qrcode.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@@ -57,6 +57,7 @@ export const useUserStore = defineStore("user", {
|
||||
},
|
||||
async fetchUserAssets() {
|
||||
try {
|
||||
if (!this?.userInfo?.id) return;
|
||||
const res = await getUserAsset();
|
||||
if (res) {
|
||||
const newInfo = { ...this.userInfo, ...res };
|
||||
|
||||
82
utils/ability.js
Normal file
82
utils/ability.js
Normal file
@@ -0,0 +1,82 @@
|
||||
import { abilityCheck } from "@/api/system";
|
||||
|
||||
/**
|
||||
* Checks if a user has the ability to perform an action (e.g., download).
|
||||
* Handles common blocking scenarios like "need_share" or "need_ad".
|
||||
*
|
||||
* @param {string} scene - The scene identifier for the ability check (e.g., "wallpaper_download").
|
||||
* @param {Object} rewardAdRef - The ref to the RewardAd component (must have a .value.show() method or be the instance itself).
|
||||
* @returns {Promise<boolean>} - Returns true if the action can proceed, false otherwise.
|
||||
*/
|
||||
export const checkAbilityAndHandle = async (scene, rewardAdRef) => {
|
||||
try {
|
||||
const abilityRes = await abilityCheck(scene);
|
||||
if (abilityRes.canUse) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (
|
||||
abilityRes?.blockType === "need_share" &&
|
||||
abilityRes?.message === "分享可继续"
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "分享给好友即可下载",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
abilityRes?.blockType === "need_ad" &&
|
||||
abilityRes?.message === "观看广告可继续"
|
||||
) {
|
||||
uni.showModal({
|
||||
title: "积分不足",
|
||||
content: "观看广告可获得50积分,继续下载",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// Check if rewardAdRef is a ref (has .value) or the component instance itself
|
||||
if (
|
||||
rewardAdRef &&
|
||||
rewardAdRef.value &&
|
||||
typeof rewardAdRef.value.show === "function"
|
||||
) {
|
||||
rewardAdRef.value.show();
|
||||
} else if (rewardAdRef && typeof rewardAdRef.show === "function") {
|
||||
rewardAdRef.show();
|
||||
} else {
|
||||
console.error("RewardAd component reference is invalid");
|
||||
uni.showToast({ title: "广告加载失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (abilityRes?.blockType === "need_vip") {
|
||||
uni.showModal({
|
||||
title: "会员激活",
|
||||
content: "会员激活即可继续使用该功能,是否前往开通?",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/vip",
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: "您今日下载次数已用完,明日再试",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
} catch (e) {
|
||||
console.error("Ability check failed", e);
|
||||
uni.showToast({ title: "系统繁忙,请稍后重试", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
};
|
||||
@@ -70,6 +70,7 @@ export const saveViewRequest = async (shareToken, scene, targetId = "") => {
|
||||
};
|
||||
|
||||
export const saveRemoteImageToLocal = (imageUrl) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: imageUrl,
|
||||
success: (res) => {
|
||||
@@ -77,24 +78,23 @@ export const saveRemoteImageToLocal = (imageUrl) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "已保存到相册" });
|
||||
resolve(true);
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "保存失败", icon: "none" });
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "下载失败", icon: "none" });
|
||||
reject(
|
||||
new Error("Download failed with status code: " + res.statusCode),
|
||||
);
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "下载失败", icon: "none" });
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const getShareToken = async (scene, targetId = "") => {
|
||||
|
||||
Reference in New Issue
Block a user