Compare commits
75 Commits
6c1084ef32
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b37bfcfd02 | ||
|
|
952acbbf1f | ||
|
|
1865b1cfcd | ||
|
|
edfa8a2d3a | ||
|
|
d28b083630 | ||
|
|
ff8d9836d5 | ||
|
|
f653e6659a | ||
|
|
9c4f0c5650 | ||
|
|
c2b889ac8f | ||
|
|
c624bc2d1d | ||
|
|
2d3cefa43e | ||
|
|
d8c5c3a919 | ||
|
|
14d8e0b349 | ||
|
|
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} 积分`,
|
title: `每日登录 +${res.points} 积分`,
|
||||||
icon: "none",
|
icon: "none",
|
||||||
});
|
});
|
||||||
|
}
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
await userStore.fetchUserAssets();
|
await userStore.fetchUserAssets();
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("userOpenApp error", e);
|
console.error("userOpenApp error", e);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,3 +14,10 @@ export const createCardShareToken = async (data) => {
|
|||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getGreetingSceneList = async (exclude) => {
|
||||||
|
return request({
|
||||||
|
url: `/api/blessing/greeting-scene/list?exclude=${exclude}`,
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
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({
|
return request({
|
||||||
url: "/api/blessing/card/template/list?page=" + page,
|
url,
|
||||||
method: "GET",
|
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({
|
return request({
|
||||||
url: "/api/blessing/card/template-content/list?page=" + page,
|
url,
|
||||||
method: "GET",
|
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({
|
return request({
|
||||||
url: "/api/blessing/card/template-title/list?page=" + page,
|
url,
|
||||||
method: "GET",
|
method: "GET",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import { request } from "@/utils/request.js";
|
import { request } from "@/utils/request.js";
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
export const abilityCheck = async (scene) => {
|
export const abilityCheck = async (scene) => {
|
||||||
return request({
|
return request({
|
||||||
url: "/api/blessing/ability/check?scene=" + scene,
|
url: "/api/ability/check?scene=" + scene,
|
||||||
method: "GET",
|
method: "GET",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -23,11 +25,16 @@ export const getPageDetail = async (shareToken) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const getShareReward = async (data) => {
|
export const getShareReward = async (data) => {
|
||||||
return request({
|
const res = await request({
|
||||||
url: "/api/blessing/share/reward",
|
url: "/api/reward/share",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
|
console.log("getShareReward res", res);
|
||||||
|
if (res && res.success) {
|
||||||
|
userStore.fetchUserAssets();
|
||||||
|
}
|
||||||
|
return res;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const saveRecord = async (data) => {
|
export const saveRecord = async (data) => {
|
||||||
@@ -53,6 +60,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) => {
|
export const msgCheckApi = async (content) => {
|
||||||
return request({
|
return request({
|
||||||
url: "/api/common/msg-check?content=" + content,
|
url: "/api/common/msg-check?content=" + content,
|
||||||
@@ -82,9 +110,25 @@ export const createTracking = async (data) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const watchAdReward = async () => {
|
export const watchAdReward = async (token, scene, type, resourceId) => {
|
||||||
return request({
|
return request({
|
||||||
url: "/api/blessing/ad/reward",
|
url: "/api/ad/reward",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
rewardToken: token,
|
||||||
|
scene,
|
||||||
|
type,
|
||||||
|
resourceId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const watchAdStart = async () => {
|
||||||
|
return request({
|
||||||
|
url: "/api/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",
|
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="lucky-card" id="lucky-card">
|
||||||
<!-- 头部渐变区 -->
|
<!-- 头部渐变区 -->
|
||||||
<view class="card-header">
|
<view class="card-header">
|
||||||
<view class="header-decor left">福</view>
|
<!-- Top Bar: User Info & Date -->
|
||||||
<view class="header-decor right">禧</view>
|
<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>
|
<text class="header-label">今日好运指数</text>
|
||||||
<view class="score-wrap">
|
<view class="score-wrap">
|
||||||
<text class="score">{{ resultData.score }}</text>
|
<text class="score">{{ resultData.score }}</text>
|
||||||
<text class="percent">%</text>
|
<text class="percent">%</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="lucky-word">{{ resultData.luckyWord }}</text>
|
<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>
|
</view>
|
||||||
|
|
||||||
<!-- 内容区 -->
|
<!-- 内容区 -->
|
||||||
@@ -113,7 +135,7 @@
|
|||||||
|
|
||||||
<!-- 画布用于生成图片 -->
|
<!-- 画布用于生成图片 -->
|
||||||
<canvas
|
<canvas
|
||||||
canvas-id="luckyCanvas"
|
type="2d"
|
||||||
id="luckyCanvas"
|
id="luckyCanvas"
|
||||||
class="lucky-canvas"
|
class="lucky-canvas"
|
||||||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||||||
@@ -122,10 +144,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, getCurrentInstance } from "vue";
|
import { ref, getCurrentInstance, computed } from "vue";
|
||||||
import calendar from "@/utils/lunar.js";
|
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 { proxy } = getCurrentInstance();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const userInfo = computed(() => userStore.userInfo);
|
||||||
const popup = ref(null);
|
const popup = ref(null);
|
||||||
const isAnimating = ref(true);
|
const isAnimating = ref(true);
|
||||||
const isFlipping = ref(false);
|
const isFlipping = ref(false);
|
||||||
@@ -135,7 +162,7 @@ const currentDateStr = ref("");
|
|||||||
|
|
||||||
// 画布相关
|
// 画布相关
|
||||||
const canvasWidth = ref(600);
|
const canvasWidth = ref(600);
|
||||||
const canvasHeight = ref(1000);
|
const canvasHeight = ref(1100);
|
||||||
|
|
||||||
const resultData = ref({
|
const resultData = ref({
|
||||||
score: 88,
|
score: 88,
|
||||||
@@ -150,11 +177,10 @@ const resultData = ref({
|
|||||||
|
|
||||||
const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
|
const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
|
||||||
|
|
||||||
const open = () => {
|
const open = (data = null, skipAnimation = false) => {
|
||||||
isAnimating.value = true;
|
if (data) {
|
||||||
isFlipping.value = false;
|
resultData.value = { ...resultData.value, ...data };
|
||||||
showLight.value = false;
|
}
|
||||||
loadingText.value = texts[0];
|
|
||||||
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const y = now.getFullYear();
|
const y = now.getFullYear();
|
||||||
@@ -165,7 +191,17 @@ const open = () => {
|
|||||||
|
|
||||||
popup.value.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();
|
startAnimation();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
@@ -195,86 +231,166 @@ const startAnimation = () => {
|
|||||||
}, 1800);
|
}, 1800);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSaveImage = () => {
|
const onSaveImage = async () => {
|
||||||
uni.showLoading({ title: "生成图片中..." });
|
uni.showLoading({ title: "生成图片中..." });
|
||||||
const ctx = uni.createCanvasContext("luckyCanvas", proxy);
|
|
||||||
const W = canvasWidth.value;
|
const query = uni.createSelectorQuery().in(proxy);
|
||||||
const H = canvasHeight.value;
|
query
|
||||||
const cardH = 850; // 卡片主体高度
|
.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. 绘制背景
|
// 1. 绘制背景
|
||||||
ctx.setFillStyle("#ffffff");
|
ctx.fillStyle = "#ffffff";
|
||||||
ctx.fillRect(0, 0, W, H);
|
ctx.fillRect(0, 0, W, H);
|
||||||
|
|
||||||
// 2. 绘制卡片头部渐变
|
// 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(0, "#d84315");
|
||||||
grd.addColorStop(1, "#ffca28");
|
grd.addColorStop(1, "#ffca28");
|
||||||
ctx.setFillStyle(grd);
|
ctx.fillStyle = grd;
|
||||||
ctx.fillRect(0, 0, W, 360);
|
ctx.fillRect(0, 0, W, headerH);
|
||||||
|
|
||||||
// 3. 头部装饰文字
|
// --- Top Bar ---
|
||||||
ctx.setFillStyle("rgba(255, 255, 255, 0.6)");
|
const topY = 40;
|
||||||
ctx.setFontSize(24);
|
const avatarSize = 64;
|
||||||
ctx.fillText("福", 30, 40);
|
|
||||||
ctx.fillText("禧", W - 50, 40);
|
|
||||||
|
|
||||||
// 4. 头部内容
|
// 绘制用户头像 (Top Left)
|
||||||
ctx.setTextAlign("center");
|
ctx.save();
|
||||||
ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
|
ctx.beginPath();
|
||||||
ctx.setFontSize(24);
|
ctx.arc(
|
||||||
ctx.fillText("今日好运指数", W / 2, 80);
|
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.textAlign = "left";
|
||||||
ctx.setFontSize(120);
|
ctx.fillStyle = "#ffffff";
|
||||||
ctx.font = "bold 120px sans-serif";
|
ctx.font = "bold 26px sans-serif";
|
||||||
ctx.fillText(resultData.value.score + "%", W / 2, 200);
|
ctx.fillText(
|
||||||
|
userInfo.value?.nickName || "好运用户",
|
||||||
|
40 + avatarSize + 16,
|
||||||
|
topY + 42,
|
||||||
|
);
|
||||||
|
|
||||||
// 幸运词
|
// 绘制日期 (Top Right)
|
||||||
ctx.setFontSize(48);
|
|
||||||
ctx.font = "bold 48px sans-serif";
|
|
||||||
ctx.fillText(resultData.value.luckyWord, W / 2, 280);
|
|
||||||
|
|
||||||
// 日期标签背景
|
|
||||||
const dateStr = currentDateStr.value || "2026 CNY SPECIAL";
|
const dateStr = currentDateStr.value || "2026 CNY SPECIAL";
|
||||||
ctx.setFillStyle("rgba(0, 0, 0, 0.15)");
|
ctx.font = "normal 22px sans-serif";
|
||||||
const dateWidth = ctx.measureText(dateStr).width + 40;
|
const dateWidth = ctx.measureText(dateStr).width + 30;
|
||||||
roundRect(ctx, W / 2 - dateWidth / 2, 310, dateWidth, 34, 17);
|
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();
|
ctx.fill();
|
||||||
|
// date text
|
||||||
|
ctx.fillStyle = "#ffffff";
|
||||||
|
ctx.fillText(dateStr, dateX + 15, dateY + 28);
|
||||||
|
|
||||||
// 日期文字
|
// --- Main Content (Centered) ---
|
||||||
ctx.setFillStyle("#ffffff");
|
const centerX = W / 2;
|
||||||
ctx.setFontSize(20);
|
|
||||||
ctx.fillText(dateStr, W / 2, 334);
|
// 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. 绘制内容区 (宜/忌)
|
// 5. 绘制内容区 (宜/忌)
|
||||||
const gridY = 400;
|
const gridY = 500;
|
||||||
const boxW = (W - 64 - 24) / 2; // (600 - padding*2 - gap)/2
|
const boxW = (W - 64 - 24) / 2;
|
||||||
const gridH = 140; // 增加高度防止内容溢出
|
const gridH = 140;
|
||||||
|
|
||||||
// 宜
|
// 宜
|
||||||
drawBox(ctx, 32, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
drawBox(ctx, 32, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
||||||
ctx.setTextAlign("left");
|
ctx.textAlign = "left";
|
||||||
ctx.setFontSize(24);
|
|
||||||
ctx.setFillStyle("#d81e06");
|
|
||||||
ctx.font = "bold 24px sans-serif";
|
ctx.font = "bold 24px sans-serif";
|
||||||
// 图标模拟
|
ctx.fillStyle = "#d81e06";
|
||||||
ctx.fillText("✔ 今日宜", 56, gridY + 44);
|
ctx.fillText("✔ 今日宜", 56, gridY + 44);
|
||||||
|
|
||||||
ctx.setFontSize(22);
|
|
||||||
ctx.setFillStyle("#666666");
|
|
||||||
ctx.font = "normal 22px sans-serif";
|
ctx.font = "normal 22px sans-serif";
|
||||||
|
ctx.fillStyle = "#666666";
|
||||||
wrapText(ctx, resultData.value.yi, 56, gridY + 80, boxW - 48, 30);
|
wrapText(ctx, resultData.value.yi, 56, gridY + 80, boxW - 48, 30);
|
||||||
|
|
||||||
// 忌
|
// 忌
|
||||||
drawBox(ctx, 32 + boxW + 24, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
drawBox(ctx, 32 + boxW + 24, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
||||||
ctx.setFontSize(24);
|
|
||||||
ctx.setFillStyle("#666666");
|
|
||||||
ctx.font = "bold 24px sans-serif";
|
ctx.font = "bold 24px sans-serif";
|
||||||
|
ctx.fillStyle = "#666666";
|
||||||
ctx.fillText("✖ 今日忌", 32 + boxW + 24 + 24, gridY + 44);
|
ctx.fillText("✖ 今日忌", 32 + boxW + 24 + 24, gridY + 44);
|
||||||
|
|
||||||
ctx.setFontSize(22);
|
|
||||||
ctx.font = "normal 22px sans-serif";
|
ctx.font = "normal 22px sans-serif";
|
||||||
wrapText(
|
wrapText(
|
||||||
ctx,
|
ctx,
|
||||||
@@ -286,62 +402,58 @@ const onSaveImage = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// 6. 幸运元素
|
// 6. 幸运元素
|
||||||
const elY = 570; // 下移,避免与上面重叠
|
const elY = 670;
|
||||||
const elH = 160; // 增加高度
|
const elH = 160;
|
||||||
drawBox(ctx, 32, elY, W - 64, elH, "#fbfbfb", "#f5f5f5");
|
drawBox(ctx, 32, elY, W - 64, elH, "#fbfbfb", "#f5f5f5");
|
||||||
|
|
||||||
// 标题
|
// 标题
|
||||||
ctx.setFontSize(26);
|
|
||||||
ctx.setFillStyle("#333333");
|
|
||||||
ctx.font = "bold 26px sans-serif";
|
ctx.font = "bold 26px sans-serif";
|
||||||
|
ctx.fillStyle = "#333333";
|
||||||
ctx.fillText("★ 幸运元素", 56, elY + 46);
|
ctx.fillText("★ 幸运元素", 56, elY + 46);
|
||||||
|
|
||||||
// 元素内容
|
// 元素内容
|
||||||
const contentW = W - 64; // 内容区域总宽度
|
const contentW = W - 64;
|
||||||
const colW = contentW / 3; // 三等分
|
const colW = contentW / 3;
|
||||||
const startX = 32; // 起始X坐标
|
const startX = 32;
|
||||||
|
|
||||||
// 调整Y坐标,确保不重叠
|
|
||||||
const labelY = elY + 90;
|
const labelY = elY + 90;
|
||||||
const valY = elY + 126;
|
const valY = elY + 126;
|
||||||
|
|
||||||
// 颜色 (第一列)
|
// 颜色
|
||||||
ctx.setTextAlign("center");
|
ctx.textAlign = "center";
|
||||||
ctx.setFontSize(20);
|
|
||||||
ctx.setFillStyle("#999999");
|
|
||||||
ctx.font = "normal 20px sans-serif";
|
ctx.font = "normal 20px sans-serif";
|
||||||
|
ctx.fillStyle = "#999999";
|
||||||
ctx.fillText("颜色", startX + colW * 0.5, labelY);
|
ctx.fillText("颜色", startX + colW * 0.5, labelY);
|
||||||
|
|
||||||
ctx.setFontSize(26);
|
|
||||||
ctx.setFillStyle("#d84315");
|
|
||||||
ctx.font = "bold 26px sans-serif";
|
ctx.font = "bold 26px sans-serif";
|
||||||
|
ctx.fillStyle = "#d84315";
|
||||||
ctx.fillText(resultData.value.luckyColor, startX + colW * 0.5, valY);
|
ctx.fillText(resultData.value.luckyColor, startX + colW * 0.5, valY);
|
||||||
|
|
||||||
// 数字 (第二列)
|
// 数字
|
||||||
ctx.setFontSize(20);
|
|
||||||
ctx.setFillStyle("#999999");
|
|
||||||
ctx.font = "normal 20px sans-serif";
|
ctx.font = "normal 20px sans-serif";
|
||||||
|
ctx.fillStyle = "#999999";
|
||||||
ctx.fillText("数字", startX + colW * 1.5, labelY);
|
ctx.fillText("数字", startX + colW * 1.5, labelY);
|
||||||
|
|
||||||
ctx.setFontSize(26);
|
|
||||||
ctx.setFillStyle("#333333");
|
|
||||||
ctx.font = "bold 26px sans-serif";
|
ctx.font = "bold 26px sans-serif";
|
||||||
|
ctx.fillStyle = "#333333";
|
||||||
ctx.fillText(resultData.value.luckyNumber, startX + colW * 1.5, valY);
|
ctx.fillText(resultData.value.luckyNumber, startX + colW * 1.5, valY);
|
||||||
|
|
||||||
// 方向 (第三列)
|
// 方向
|
||||||
ctx.setFontSize(20);
|
|
||||||
ctx.setFillStyle("#999999");
|
|
||||||
ctx.font = "normal 20px sans-serif";
|
ctx.font = "normal 20px sans-serif";
|
||||||
|
ctx.fillStyle = "#999999";
|
||||||
ctx.fillText("方向", startX + colW * 2.5, labelY);
|
ctx.fillText("方向", startX + colW * 2.5, labelY);
|
||||||
|
|
||||||
ctx.setFontSize(26);
|
|
||||||
ctx.setFillStyle("#333333");
|
|
||||||
ctx.font = "bold 26px sans-serif";
|
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.strokeStyle = "#eeeeee";
|
||||||
ctx.setLineWidth(2);
|
ctx.lineWidth = 2;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
const lineTop = elY + 70;
|
const lineTop = elY + 70;
|
||||||
const lineBottom = elY + 130;
|
const lineBottom = elY + 130;
|
||||||
@@ -349,54 +461,58 @@ const onSaveImage = () => {
|
|||||||
ctx.lineTo(startX + colW, lineBottom);
|
ctx.lineTo(startX + colW, lineBottom);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
// 分隔线 2
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(startX + colW * 2, lineTop);
|
ctx.moveTo(startX + colW * 2, lineTop);
|
||||||
ctx.lineTo(startX + colW * 2, lineBottom);
|
ctx.lineTo(startX + colW * 2, lineBottom);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
// 7. 语录
|
// 7. 语录
|
||||||
ctx.setTextAlign("center");
|
ctx.textAlign = "center";
|
||||||
ctx.setFontSize(22);
|
|
||||||
ctx.setFillStyle("#999999");
|
|
||||||
ctx.font = "italic 22px sans-serif";
|
ctx.font = "italic 22px sans-serif";
|
||||||
// 语录换行处理,下移坐标
|
ctx.fillStyle = "#999999";
|
||||||
wrapTextCentered(ctx, `“${resultData.value.quote}”`, W / 2, 780, W - 80, 30);
|
wrapTextCentered(
|
||||||
|
ctx,
|
||||||
|
`“${resultData.value.quote}”`,
|
||||||
|
W / 2,
|
||||||
|
880,
|
||||||
|
W - 80,
|
||||||
|
30,
|
||||||
|
);
|
||||||
|
|
||||||
// 8. 底部区域 (Footer)
|
// 8. 底部区域 (Footer)
|
||||||
const footerY = 850;
|
const footerY = 960;
|
||||||
|
|
||||||
// 分隔线
|
// 分隔线
|
||||||
ctx.setStrokeStyle("#f0f0f0");
|
ctx.strokeStyle = "#f0f0f0";
|
||||||
ctx.setLineWidth(1);
|
ctx.lineWidth = 1;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(40, footerY);
|
ctx.moveTo(40, footerY);
|
||||||
ctx.lineTo(W - 40, footerY);
|
ctx.lineTo(W - 40, footerY);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
// 底部左侧文字
|
// 底部左侧文字
|
||||||
ctx.setTextAlign("left");
|
ctx.textAlign = "left";
|
||||||
ctx.setFontSize(32);
|
ctx.font = "28px sans-serif";
|
||||||
ctx.setFillStyle("#333333");
|
ctx.fillStyle = "#333333";
|
||||||
ctx.font = "bold 32px sans-serif";
|
|
||||||
ctx.fillText("扫码开启今日好运", 40, footerY + 60);
|
ctx.fillText("扫码开启今日好运", 40, footerY + 60);
|
||||||
|
|
||||||
ctx.setFontSize(20);
|
|
||||||
ctx.setFillStyle("#999999");
|
|
||||||
ctx.font = "normal 20px sans-serif";
|
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
|
if (qrCodeImg) {
|
||||||
// 实际开发中应替换为小程序码
|
ctx.drawImage(qrCodeImg, W - 140, footerY + 25, 100, 100);
|
||||||
ctx.drawImage("/static/logo.png", W - 140, footerY + 25, 100, 100);
|
}
|
||||||
|
|
||||||
// 绘制
|
// 生成图片
|
||||||
ctx.draw(false, () => {
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
uni.canvasToTempFilePath(
|
uni.canvasToTempFilePath({
|
||||||
{
|
canvas: canvas,
|
||||||
canvasId: "luckyCanvas",
|
width: W,
|
||||||
|
height: H,
|
||||||
|
destWidth: W * dpr,
|
||||||
|
destHeight: H * dpr,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
uni.saveImageToPhotosAlbum({
|
uni.saveImageToPhotosAlbum({
|
||||||
filePath: res.tempFilePath,
|
filePath: res.tempFilePath,
|
||||||
@@ -415,10 +531,13 @@ const onSaveImage = () => {
|
|||||||
uni.showToast({ title: "生成图片失败", icon: "none" });
|
uni.showToast({ title: "生成图片失败", icon: "none" });
|
||||||
console.error(err);
|
console.error(err);
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
proxy,
|
|
||||||
);
|
|
||||||
}, 200);
|
}, 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) {
|
function drawBox(ctx, x, y, w, h, bg, border) {
|
||||||
ctx.setFillStyle(bg);
|
ctx.fillStyle = bg;
|
||||||
ctx.setStrokeStyle(border);
|
ctx.strokeStyle = border;
|
||||||
ctx.setLineWidth(2);
|
ctx.lineWidth = 2;
|
||||||
roundRect(ctx, x, y, w, h, 20);
|
roundRect(ctx, x, y, w, h, 20);
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
@@ -489,6 +608,22 @@ const onShareMoments = () => {
|
|||||||
uni.showToast({ title: "请点击右上角分享", icon: "none" });
|
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 });
|
defineExpose({ open, close });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -497,7 +632,7 @@ defineExpose({ open, close });
|
|||||||
/* 动画容器 */
|
/* 动画容器 */
|
||||||
.animation-container {
|
.animation-container {
|
||||||
width: 600rpx;
|
width: 600rpx;
|
||||||
height: 850rpx;
|
height: 920rpx; /* Updated height */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -607,39 +742,70 @@ defineExpose({ open, close });
|
|||||||
|
|
||||||
.lucky-card {
|
.lucky-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 850rpx;
|
height: 920rpx; /* Increased height */
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
height: 360rpx;
|
height: 460rpx; /* Increased height */
|
||||||
background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
|
background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
padding: 30rpx 40rpx;
|
||||||
justify-content: center;
|
box-sizing: border-box;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
.header-decor {
|
.header-top-bar {
|
||||||
position: absolute;
|
display: flex;
|
||||||
top: 20rpx;
|
justify-content: space-between;
|
||||||
font-size: 24rpx;
|
align-items: center;
|
||||||
opacity: 0.6;
|
width: 100%;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
&.left {
|
.user-info-row {
|
||||||
left: 30rpx;
|
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 {
|
.header-label {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 8rpx;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
letter-spacing: 2rpx;
|
letter-spacing: 2rpx;
|
||||||
}
|
}
|
||||||
@@ -651,32 +817,39 @@ defineExpose({ open, close });
|
|||||||
margin-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
.score {
|
.score {
|
||||||
font-size: 120rpx;
|
font-size: 140rpx; /* Bigger */
|
||||||
font-weight: bold;
|
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 {
|
.percent {
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
margin-left: 4rpx;
|
margin-left: 8rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lucky-word {
|
.lucky-word {
|
||||||
font-size: 48rpx;
|
font-size: 52rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
letter-spacing: 4rpx;
|
letter-spacing: 6rpx;
|
||||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
margin-bottom: 32rpx;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-year {
|
.header-decor {
|
||||||
background: rgba(0, 0, 0, 0.15);
|
position: absolute;
|
||||||
padding: 8rpx 24rpx;
|
bottom: 20rpx;
|
||||||
border-radius: 30rpx;
|
font-size: 24rpx;
|
||||||
font-size: 20rpx;
|
opacity: 0.4;
|
||||||
letter-spacing: 2rpx;
|
|
||||||
|
&.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>
|
||||||
38
pages.json
38
pages.json
@@ -3,12 +3,28 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "新春祝福",
|
"navigationBarTitleText": "祝福 壁纸 头像",
|
||||||
"enablePullDownRefresh": true,
|
"enablePullDownRefresh": true,
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"backgroundColor": "#FFFFFF"
|
"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",
|
"path": "pages/make/index",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -20,7 +36,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/mine/greeting",
|
"path": "pages/mine/greeting",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的新春祝福",
|
"navigationBarTitleText": "我的祝福",
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
@@ -28,7 +44,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/mine/wallpaper",
|
"path": "pages/mine/wallpaper",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的新春壁纸",
|
"navigationBarTitleText": "我的壁纸",
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
@@ -76,7 +92,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/avatar/index",
|
"path": "pages/avatar/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "新春头像挂饰",
|
"navigationBarTitleText": "头像挂饰",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
@@ -108,7 +124,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/detail/index",
|
"path": "pages/detail/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "新春祝福详情",
|
"navigationBarTitleText": "祝福详情",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
@@ -123,7 +139,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/fortune/index",
|
"path": "pages/fortune/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "新年运势",
|
"navigationBarTitleText": "每日好运",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
@@ -131,7 +147,7 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/fortune/detail",
|
"path": "pages/fortune/detail",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "新年运势",
|
"navigationBarTitleText": "每日好运",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
@@ -167,6 +183,14 @@
|
|||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/wallpaper/share",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "壁纸分享",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -15,9 +15,9 @@
|
|||||||
<text class="nickname">{{
|
<text class="nickname">{{
|
||||||
detailData.from?.nickname || "神秘用户"
|
detailData.from?.nickname || "神秘用户"
|
||||||
}}</text>
|
}}</text>
|
||||||
<view class="tag">马年专属</view>
|
<view class="tag">专属头像</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="action-text">换上了新春头像</text>
|
<text class="action-text">换上了专属头像</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- Decorative Elements -->
|
<!-- Decorative Elements -->
|
||||||
<view class="card-footer-text">
|
<view class="card-footer-text">
|
||||||
<text class="icon">🌸</text> 2026 丙午马年限定
|
<text class="icon">🌸</text> 专属限定
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<view class="bar"></view>
|
<view class="bar"></view>
|
||||||
<text class="title">热门新春头像</text>
|
<text class="title">热门头像</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="more" @tap="goToMake">查看全部</text>
|
<text class="more" @tap="goToMake">查看全部</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -69,10 +69,10 @@
|
|||||||
</view>
|
</view>
|
||||||
<text class="frame-name">{{
|
<text class="frame-name">{{
|
||||||
item.type === "decor"
|
item.type === "decor"
|
||||||
? "新春饰品"
|
? "精美饰品"
|
||||||
: item.type === "avatar"
|
: item.type === "avatar"
|
||||||
? "新春头像"
|
? "爆款头像"
|
||||||
: "新春相框"
|
: "热门相框"
|
||||||
}}</text>
|
}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -84,8 +84,8 @@
|
|||||||
<text>🏮</text>
|
<text>🏮</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-content">
|
<view class="banner-content">
|
||||||
<text class="banner-title">去抽取新年运势</text>
|
<text class="banner-title">去抽取今日运势</text>
|
||||||
<text class="banner-desc">每日一签,开启你的新年好运</text>
|
<text class="banner-desc">每日一签,开启你的今日好运</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-arrow">›</text>
|
<text class="banner-arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -94,8 +94,8 @@
|
|||||||
<text>🧧</text>
|
<text>🧧</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-content">
|
<view class="banner-content">
|
||||||
<text class="banner-title">去制作新年贺卡</text>
|
<text class="banner-title">制作一张祝福贺卡</text>
|
||||||
<text class="banner-desc">定制专属祝福,传递浓浓年味</text>
|
<text class="banner-desc">写下心意,把祝福送给重要的人</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-arrow">›</text>
|
<text class="banner-arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -104,8 +104,8 @@
|
|||||||
<text>🖼</text>
|
<text>🖼</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-content">
|
<view class="banner-content">
|
||||||
<text class="banner-title">去挑选新年壁纸</text>
|
<text class="banner-title">去挑选精美壁纸</text>
|
||||||
<text class="banner-desc">精选新年壁纸,让手机也过年</text>
|
<text class="banner-desc">换上精选壁纸,让手机也焕新</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-arrow">›</text>
|
<text class="banner-arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -114,19 +114,19 @@
|
|||||||
<view class="page-footer">
|
<view class="page-footer">
|
||||||
<view class="footer-line">
|
<view class="footer-line">
|
||||||
<text class="line"></text>
|
<text class="line"></text>
|
||||||
<text class="text">2026 HAPPY NEW YEAR</text>
|
<text class="text">LUCKY EVERY DAY</text>
|
||||||
<text class="line"></text>
|
<text class="line"></text>
|
||||||
</view>
|
</view>
|
||||||
<text class="footer-sub">新春祝福 · 传递温情</text>
|
<text class="footer-sub">专属头像</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue";
|
import { ref } from "vue";
|
||||||
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
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 { getAvatarRecommendList } from "@/api/avatar.js";
|
||||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
@@ -147,8 +147,9 @@ onLoad((options) => {
|
|||||||
|
|
||||||
onShareAppMessage(async () => {
|
onShareAppMessage(async () => {
|
||||||
const token = await getShareToken("avatar_download", detailData.value?.id);
|
const token = await getShareToken("avatar_download", detailData.value?.id);
|
||||||
|
getShareReward({ scene: "avatar_download" });
|
||||||
return {
|
return {
|
||||||
title: "快来看看我刚领到的新年专属头像 🎊",
|
title: "快来看看我刚领到的专属头像 🎊",
|
||||||
path: `/pages/avatar/detail?shareToken=${token}`,
|
path: `/pages/avatar/detail?shareToken=${token}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
detailData.value?.imageUrl ||
|
detailData.value?.imageUrl ||
|
||||||
@@ -159,7 +160,7 @@ onShareAppMessage(async () => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const token = await getShareToken("avatar_download", detailData.value?.id);
|
const token = await getShareToken("avatar_download", detailData.value?.id);
|
||||||
return {
|
return {
|
||||||
title: "快来看看我刚领到的新年专属头像 🎊",
|
title: "快来看看我刚领到的专属头像 🎊",
|
||||||
query: `shareToken=${token}`,
|
query: `shareToken=${token}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
detailData.value?.imageUrl ||
|
detailData.value?.imageUrl ||
|
||||||
|
|||||||
@@ -97,6 +97,7 @@
|
|||||||
@logind="handleLogind"
|
@logind="handleLogind"
|
||||||
:share-token="shareToken"
|
:share-token="shareToken"
|
||||||
/>
|
/>
|
||||||
|
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -115,14 +116,15 @@ import {
|
|||||||
saveViewRequest,
|
saveViewRequest,
|
||||||
} from "@/utils/common.js";
|
} from "@/utils/common.js";
|
||||||
import { onShareAppMessage, onShareTimeline, onLoad } from "@dcloudio/uni-app";
|
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 { useUserStore } from "@/stores/user";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||||
let videoAd = null;
|
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const loginPopupRef = ref(null);
|
const loginPopupRef = ref(null);
|
||||||
|
const rewardAdRef = ref(null);
|
||||||
|
|
||||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||||
const userPoints = computed(() => userStore.userInfo.points || 0);
|
const userPoints = computed(() => userStore.userInfo.points || 0);
|
||||||
@@ -141,7 +143,7 @@ onShareAppMessage(async (options) => {
|
|||||||
if (!isLoggedIn.value) {
|
if (!isLoggedIn.value) {
|
||||||
const shareToken = await getShareToken("avatar_download_index", "");
|
const shareToken = await getShareToken("avatar_download_index", "");
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -154,13 +156,13 @@ onShareAppMessage(async (options) => {
|
|||||||
options?.target?.dataset?.item?.id,
|
options?.target?.dataset?.item?.id,
|
||||||
);
|
);
|
||||||
return {
|
return {
|
||||||
title: "快来挑选喜欢的新春头像吧",
|
title: "快来挑选喜欢的专属头像吧",
|
||||||
path: `/pages/avatar/download?shareToken=${shareToken}`,
|
path: `/pages/avatar/download?shareToken=${shareToken}`,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("avatar_download_index", "");
|
const shareToken = await getShareToken("avatar_download_index", "");
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -171,7 +173,7 @@ onShareAppMessage(async (options) => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("avatar_timeline");
|
const shareToken = await getShareToken("avatar_timeline");
|
||||||
return {
|
return {
|
||||||
title: "精选新年头像,定制专属祝福 🧧",
|
title: "精选头像,定制专属祝福 🧧",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -188,29 +190,6 @@ onLoad((options) => {
|
|||||||
eventName: "avatar_download_page_visit",
|
eventName: "avatar_download_page_visit",
|
||||||
eventType: `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) => {
|
const getThumbUrl = (url) => {
|
||||||
@@ -308,26 +287,9 @@ const previewImage = (index) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const showRewardAd = () => {
|
const handleAdReward = async (token) => {
|
||||||
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 () => {
|
|
||||||
try {
|
try {
|
||||||
const res = await watchAdReward();
|
const res = await watchAdReward(token);
|
||||||
if (res) {
|
if (res) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "获得50积分",
|
title: "获得50积分",
|
||||||
@@ -352,41 +314,8 @@ const downloadAvatar = async (item) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use avatar specific ability check if exists, otherwise reuse generic or skip?
|
const canProceed = await checkAbilityAndHandle("avatar_download");
|
||||||
// Assuming 'avatar_download' ability check exists or similar
|
if (!canProceed) return;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
uni.showLoading({ title: "下载中..." });
|
uni.showLoading({ title: "下载中..." });
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
<text>分享或保存即可去除水印</text>
|
<text>分享或保存即可去除水印</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="preview-square">
|
<view class="preview-square">
|
||||||
<view class="watermark">年禧集.马年春节祝福</view>
|
<view class="watermark">精美头像壁纸祝福</view>
|
||||||
<image
|
<image
|
||||||
class="avatar-img"
|
class="avatar-img"
|
||||||
:src="currentAvatar?.imageUrl"
|
:src="currentAvatar?.imageUrl"
|
||||||
@@ -61,7 +61,16 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="action-buttons">
|
<view class="action-buttons">
|
||||||
<button class="btn secondary" @tap="saveAndUse">保存</button>
|
<view class="points-display" v-if="isLoggedIn">
|
||||||
|
<text class="label">当前积分:</text>
|
||||||
|
<text class="value">{{ userPoints }}</text>
|
||||||
|
</view>
|
||||||
|
<button class="btn secondary" @tap="saveAndUse">
|
||||||
|
<view class="btn-content">
|
||||||
|
<text>保存</text>
|
||||||
|
<text class="btn-sub">消耗 20 积分</text>
|
||||||
|
</view>
|
||||||
|
</button>
|
||||||
<button class="btn primary" open-type="share">分享给朋友</button>
|
<button class="btn primary" open-type="share">分享给朋友</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -82,7 +91,7 @@
|
|||||||
></uni-icons>
|
></uni-icons>
|
||||||
<view class="btn-texts">
|
<view class="btn-texts">
|
||||||
<text class="btn-title">上传我的照片</text>
|
<text class="btn-title">上传我的照片</text>
|
||||||
<text class="btn-sub">制作专属新年头像</text>
|
<text class="btn-sub">制作专属头像</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<uni-icons
|
<uni-icons
|
||||||
@@ -122,6 +131,18 @@
|
|||||||
>
|
>
|
||||||
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
|
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
|
||||||
<view v-if="selectedFrame?.id === item.id" class="check">✓</view>
|
<view v-if="selectedFrame?.id === item.id" class="check">✓</view>
|
||||||
|
<!-- Lock Overlay -->
|
||||||
|
<view v-if="!item.isUnlock && item.unlockType" class="lock-overlay">
|
||||||
|
<!-- Badge -->
|
||||||
|
<view class="unlock-badge" :class="item.unlockType">
|
||||||
|
{{ getUnlockLabel(item.unlockType) }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Center Lock -->
|
||||||
|
<view class="center-lock">
|
||||||
|
<uni-icons type="locked-filled" size="18" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="frameLoading" class="loading-more">加载中...</view>
|
<view v-if="frameLoading" class="loading-more">加载中...</view>
|
||||||
@@ -141,6 +162,18 @@
|
|||||||
>
|
>
|
||||||
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
|
<image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
|
||||||
<view v-if="selectedDecor?.id === item.id" class="check">✓</view>
|
<view v-if="selectedDecor?.id === item.id" class="check">✓</view>
|
||||||
|
<!-- Lock Overlay -->
|
||||||
|
<view v-if="!item.isUnlock && item.unlockType" class="lock-overlay">
|
||||||
|
<!-- Badge -->
|
||||||
|
<view class="unlock-badge" :class="item.unlockType">
|
||||||
|
{{ getUnlockLabel(item.unlockType) }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Center Lock -->
|
||||||
|
<view class="center-lock">
|
||||||
|
<uni-icons type="locked-filled" size="18" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="decorLoading" class="loading-more">加载中...</view>
|
<view v-if="decorLoading" class="loading-more">加载中...</view>
|
||||||
@@ -162,6 +195,7 @@
|
|||||||
@logind="handleLogind"
|
@logind="handleLogind"
|
||||||
:share-token="shareToken"
|
:share-token="shareToken"
|
||||||
/>
|
/>
|
||||||
|
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||||
|
|
||||||
<!-- More Avatar Popup -->
|
<!-- More Avatar Popup -->
|
||||||
<!-- <uni-popup ref="morePopup" type="bottom" background-color="#fff">
|
<!-- <uni-popup ref="morePopup" type="bottom" background-color="#fff">
|
||||||
@@ -204,13 +238,14 @@ import {
|
|||||||
onReachBottom,
|
onReachBottom,
|
||||||
} from "@dcloudio/uni-app";
|
} from "@dcloudio/uni-app";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { getShareReward, abilityCheck } from "@/api/system.js";
|
import { checkAbilityAndHandle, getUnlockLabel } from "@/utils/ability.js";
|
||||||
import {
|
import {
|
||||||
getAvatarSystemList,
|
getAvatarSystemList,
|
||||||
getAvatarFrameList,
|
getAvatarFrameList,
|
||||||
getAvatarDecorList,
|
getAvatarDecorList,
|
||||||
avatarCreateComplete,
|
avatarCreateComplete,
|
||||||
} from "@/api/avatar.js";
|
} from "@/api/avatar.js";
|
||||||
|
import { getShareReward, watchAdReward } from "@/api/system.js";
|
||||||
import {
|
import {
|
||||||
saveRecordRequest,
|
saveRecordRequest,
|
||||||
getShareToken,
|
getShareToken,
|
||||||
@@ -221,11 +256,15 @@ import {
|
|||||||
import { trackRecord } from "@/utils/common.js";
|
import { trackRecord } from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||||
|
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const loginPopupRef = ref(null);
|
const loginPopupRef = ref(null);
|
||||||
|
const rewardAdRef = ref(null);
|
||||||
|
const currentUnlockItem = ref(null);
|
||||||
|
|
||||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||||
|
const userPoints = computed(() => userStore.userInfo.points || 0);
|
||||||
|
|
||||||
const systemAvatars = ref([]);
|
const systemAvatars = ref([]);
|
||||||
const frames = ref([]);
|
const frames = ref([]);
|
||||||
@@ -305,6 +344,7 @@ const loadFrames = async () => {
|
|||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
frames.value.push(
|
frames.value.push(
|
||||||
...list.map((item) => ({
|
...list.map((item) => ({
|
||||||
|
...item,
|
||||||
id: item.id,
|
id: item.id,
|
||||||
imageUrl: item.imageUrl,
|
imageUrl: item.imageUrl,
|
||||||
})),
|
})),
|
||||||
@@ -332,6 +372,7 @@ const loadDecors = async () => {
|
|||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
decors.value.push(
|
decors.value.push(
|
||||||
...list.map((item) => ({
|
...list.map((item) => ({
|
||||||
|
...item,
|
||||||
id: item.id,
|
id: item.id,
|
||||||
imageUrl: item.imageUrl,
|
imageUrl: item.imageUrl,
|
||||||
})),
|
})),
|
||||||
@@ -412,6 +453,10 @@ const toggleAvatar = (avatar) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const toggleFrame = (frame) => {
|
const toggleFrame = (frame) => {
|
||||||
|
if (frame.unlockType && !frame.isUnlock) {
|
||||||
|
handleUnlock(frame);
|
||||||
|
return;
|
||||||
|
}
|
||||||
trackRecord({
|
trackRecord({
|
||||||
eventName: "avatar_frame_click",
|
eventName: "avatar_frame_click",
|
||||||
eventType: `select`,
|
eventType: `select`,
|
||||||
@@ -425,6 +470,10 @@ const toggleFrame = (frame) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const toggleDecor = (decor) => {
|
const toggleDecor = (decor) => {
|
||||||
|
if (decor.unlockType && !decor.isUnlock) {
|
||||||
|
handleUnlock(decor);
|
||||||
|
return;
|
||||||
|
}
|
||||||
trackRecord({
|
trackRecord({
|
||||||
eventName: "avatar_decor_click",
|
eventName: "avatar_decor_click",
|
||||||
eventType: `select`,
|
eventType: `select`,
|
||||||
@@ -437,6 +486,93 @@ const toggleDecor = (decor) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleUnlock = (item) => {
|
||||||
|
switch (item.unlockType) {
|
||||||
|
case "vip":
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/mine/vip",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "ad":
|
||||||
|
currentUnlockItem.value = item;
|
||||||
|
rewardAdRef.value.show();
|
||||||
|
break;
|
||||||
|
case "sing1":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到1天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "sing3":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到3天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "sing5":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到5天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "sing7":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到7天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
uni.showToast({
|
||||||
|
title: "未满足解锁条件",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdReward = async (token) => {
|
||||||
|
try {
|
||||||
|
const res = await watchAdReward(
|
||||||
|
token,
|
||||||
|
"unlock",
|
||||||
|
activeTool.value === "frame" ? "avatar_frame" : "avatar_decor",
|
||||||
|
currentUnlockItem.value.id,
|
||||||
|
);
|
||||||
|
if (res) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "解锁成功",
|
||||||
|
icon: "success",
|
||||||
|
});
|
||||||
|
// 解锁成功后,更新本地状态,允许使用
|
||||||
|
if (currentUnlockItem.value) {
|
||||||
|
currentUnlockItem.value.isUnlock = true;
|
||||||
|
|
||||||
|
if (activeTool.value === "frame") {
|
||||||
|
const index = frames.value.findIndex(
|
||||||
|
(t) => t.id === currentUnlockItem.value.id,
|
||||||
|
);
|
||||||
|
if (index !== -1) {
|
||||||
|
frames.value[index].isUnlock = true;
|
||||||
|
}
|
||||||
|
toggleFrame(currentUnlockItem.value);
|
||||||
|
} else if (activeTool.value === "decor") {
|
||||||
|
const index = decors.value.findIndex(
|
||||||
|
(t) => t.id === currentUnlockItem.value.id,
|
||||||
|
);
|
||||||
|
if (index !== -1) {
|
||||||
|
decors.value[index].isUnlock = true;
|
||||||
|
}
|
||||||
|
toggleDecor(currentUnlockItem.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
currentUnlockItem.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Reward claim failed", e);
|
||||||
|
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 挂饰状态
|
// 挂饰状态
|
||||||
const decorState = ref({
|
const decorState = ref({
|
||||||
x: 300, // 初始中心 X (rpx)
|
x: 300, // 初始中心 X (rpx)
|
||||||
@@ -674,29 +810,20 @@ const saveAndUse = async () => {
|
|||||||
loginPopupRef.value.open();
|
loginPopupRef.value.open();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const abilityRes = await abilityCheck("avatar_download");
|
|
||||||
if (!abilityRes.canUse) {
|
const canProceed = await checkAbilityAndHandle("avatar_download");
|
||||||
if (
|
if (!canProceed) return;
|
||||||
abilityRes?.blockType === "need_share" &&
|
|
||||||
abilityRes?.message === "分享可继续"
|
|
||||||
) {
|
|
||||||
uni.showToast({
|
|
||||||
title: "分享给好友可继续使用",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
uni.showToast({
|
|
||||||
title: "您今日头像下载次数已用完,明日再试",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const tempPath = await saveByCanvas(true);
|
const tempPath = await saveByCanvas(true);
|
||||||
const id = createAvatarId();
|
const id = createAvatarId();
|
||||||
saveRecordRequest(tempPath, id, "avatar_download");
|
saveRecordRequest(tempPath, id, "avatar_download");
|
||||||
completeCardInfo(id);
|
completeCardInfo(id);
|
||||||
|
|
||||||
|
if (userStore?.userInfo?.points >= 20) {
|
||||||
|
userStore.userInfo.points -= 20;
|
||||||
|
}
|
||||||
|
// userStore.fetchUserAssets();
|
||||||
|
|
||||||
return;
|
return;
|
||||||
// 调用avatarDownloadRecord API记录下载次数
|
// 调用avatarDownloadRecord API记录下载次数
|
||||||
// await avatarDownloadRecord({
|
// await avatarDownloadRecord({
|
||||||
@@ -759,7 +886,6 @@ const completeCardInfo = async (id) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onShareAppMessage(async (options) => {
|
onShareAppMessage(async (options) => {
|
||||||
getShareReward({ scene: "avatar_download" });
|
|
||||||
if (options.from === "button") {
|
if (options.from === "button") {
|
||||||
if (!isLoggedIn.value) {
|
if (!isLoggedIn.value) {
|
||||||
loginPopupRef.value.open();
|
loginPopupRef.value.open();
|
||||||
@@ -771,9 +897,10 @@ onShareAppMessage(async (options) => {
|
|||||||
getShareToken("avatar_download", id),
|
getShareToken("avatar_download", id),
|
||||||
completeCardInfo(id),
|
completeCardInfo(id),
|
||||||
]);
|
]);
|
||||||
|
getShareReward({ scene: "avatar_download" });
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
return {
|
return {
|
||||||
title: "3 秒生成新春专属头像,真的好看😆",
|
title: "3 秒生成专属头像,真的好看😆",
|
||||||
path: `/pages/avatar/detail?shareToken=${shareToken}`,
|
path: `/pages/avatar/detail?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
imageUrl +
|
imageUrl +
|
||||||
@@ -781,8 +908,9 @@ onShareAppMessage(async (options) => {
|
|||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("avatar_download_not_login", "");
|
const shareToken = await getShareToken("avatar_download_not_login", "");
|
||||||
|
getShareReward({ scene: "avatar_index" });
|
||||||
return {
|
return {
|
||||||
title: "3 秒生成新春专属头像,真的好看😆",
|
title: "3 秒生成专属头像,真的好看😆",
|
||||||
path: `/pages/avatar/index?shareToken=${shareToken}`,
|
path: `/pages/avatar/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -793,7 +921,7 @@ onShareAppMessage(async (options) => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("avatar_timeline");
|
const shareToken = await getShareToken("avatar_timeline");
|
||||||
return {
|
return {
|
||||||
title: "快来定制你的新年专属头像 🎊",
|
title: "快来定制你的专属头像 🎊",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -1025,17 +1153,56 @@ onShareTimeline(async () => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.points-display {
|
||||||
|
position: absolute;
|
||||||
|
top: -60rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff3b30;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 88rpx;
|
height: 96rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 44rpx;
|
border-radius: 48rpx;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
|
.btn-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
.btn-sub {
|
||||||
|
font-size: 20rpx;
|
||||||
|
opacity: 0.8;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background: #ff3b30;
|
background: #ff3b30;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -1106,6 +1273,69 @@ onShareTimeline(async () => {
|
|||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
padding: 4rpx 8rpx;
|
padding: 4rpx 8rpx;
|
||||||
border-radius: 0 0 0 16rpx;
|
border-radius: 0 0 0 16rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 锁定遮罩样式 */
|
||||||
|
.lock-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none; /* 让点击事件穿透到 grid-item */
|
||||||
|
}
|
||||||
|
|
||||||
|
.unlock-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#ff9a9e 0%,
|
||||||
|
#fecfef 99%,
|
||||||
|
#fecfef 100%
|
||||||
|
);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16rpx;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
border-radius: 0 0 0 12rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
|
&.vip {
|
||||||
|
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
|
||||||
|
}
|
||||||
|
&.ad {
|
||||||
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||||
|
}
|
||||||
|
&.sing1,
|
||||||
|
&.sing3,
|
||||||
|
&.sing5,
|
||||||
|
&.sing7 {
|
||||||
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-lock {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.upload-card {
|
&.upload-card {
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<text>灵感瞬间</text>
|
<text>灵感瞬间</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-title">今日推荐创作</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 class="go-btn">去制作</view>
|
||||||
</view>
|
</view>
|
||||||
<image
|
<image
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
<view class="icon-box card-bg">
|
<view class="icon-box card-bg">
|
||||||
<image src="/static/icon/celebrate.png" mode="aspectFit" />
|
<image src="/static/icon/celebrate.png" mode="aspectFit" />
|
||||||
</view>
|
</view>
|
||||||
<text>新春贺卡</text>
|
<text>祝福贺卡</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="quick-item" @tap="handleQuickAction('fortune')">
|
<view class="quick-item" @tap="handleQuickAction('fortune')">
|
||||||
<view class="icon-box fortune-bg">
|
<view class="icon-box fortune-bg">
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 按心情创作 -->
|
<!-- 按心情创作 -->
|
||||||
<view class="section">
|
<!-- <view class="section">
|
||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<text class="section-title">按心情创作</text>
|
<text class="section-title">按心情创作</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -84,13 +84,13 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view> -->
|
||||||
|
|
||||||
<!-- 编辑精选 -->
|
<!-- 编辑精选 -->
|
||||||
<view class="section">
|
<view class="section">
|
||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<text class="section-title">编辑精选</text>
|
<text class="section-title">编辑精选</text>
|
||||||
<text class="view-all" @tap="viewAll">查看全部</text>
|
<!-- <text class="view-all" @tap="viewAll">查看全部</text> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="featured-grid">
|
<view class="featured-grid">
|
||||||
<view
|
<view
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
/>
|
/>
|
||||||
<view class="user-meta">
|
<view class="user-meta">
|
||||||
<view class="user-name">{{ cardDetail?.blessingFrom }}</view>
|
<view class="user-name">{{ cardDetail?.blessingFrom }}</view>
|
||||||
<view class="user-msg">给你发来了一条新春祝福</view>
|
<view class="user-msg">给你发来了一条专属祝福</view>
|
||||||
<view class="year-tag">
|
<view class="year-tag">
|
||||||
<text class="fire-icon">🎉</text> {{ cardDetail?.year || 2026 }}
|
<text class="fire-icon">🎉</text> {{ cardDetail?.year || 2026 }}
|
||||||
{{ cardDetail?.festival || "丙午马年" }}
|
{{ cardDetail?.festival || "丙午马年" }}
|
||||||
@@ -83,8 +83,8 @@
|
|||||||
<text>🏮</text>
|
<text>🏮</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-content">
|
<view class="banner-content">
|
||||||
<text class="banner-title">去抽取新年运势</text>
|
<text class="banner-title">去抽取今日运势</text>
|
||||||
<text class="banner-desc">每日一签,开启你的新年好运</text>
|
<text class="banner-desc">每日一签,开启你的好运</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-arrow">›</text>
|
<text class="banner-arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -93,8 +93,8 @@
|
|||||||
<text>🧧</text>
|
<text>🧧</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-content">
|
<view class="banner-content">
|
||||||
<text class="banner-title">去制作新年头像</text>
|
<text class="banner-title">换个好看头像吧</text>
|
||||||
<text class="banner-desc">定制专属头像,传递浓浓年味</text>
|
<text class="banner-desc">精选头像合集,找到你的专属风格</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-arrow">›</text>
|
<text class="banner-arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -103,8 +103,8 @@
|
|||||||
<text>🖼</text>
|
<text>🖼</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="banner-content">
|
<view class="banner-content">
|
||||||
<text class="banner-title">去挑选新年壁纸</text>
|
<text class="banner-title">去挑选精美壁纸</text>
|
||||||
<text class="banner-desc">精选新年壁纸,让手机也过年</text>
|
<text class="banner-desc">换上精选壁纸,让手机也焕新</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="banner-arrow">›</text>
|
<text class="banner-arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -113,10 +113,10 @@
|
|||||||
<view class="page-footer">
|
<view class="page-footer">
|
||||||
<view class="footer-line">
|
<view class="footer-line">
|
||||||
<text class="line"></text>
|
<text class="line"></text>
|
||||||
<text class="text">2026 HAPPY NEW YEAR</text>
|
<text class="text">HAPPY EVERY DAY</text>
|
||||||
<text class="line"></text>
|
<text class="line"></text>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer-sub">新春祝福 · 传递温情</view>
|
<view class="footer-sub">专属祝福 · 传递温情</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@@ -132,7 +132,7 @@ import {
|
|||||||
onShareAppMessage,
|
onShareAppMessage,
|
||||||
onShareTimeline,
|
onShareTimeline,
|
||||||
} from "@dcloudio/uni-app";
|
} from "@dcloudio/uni-app";
|
||||||
import { getPageDetail } from "@/api/system.js";
|
import { getPageDetail, getShareReward } from "@/api/system";
|
||||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
|
||||||
@@ -194,8 +194,9 @@ onUnload(() => {
|
|||||||
|
|
||||||
onShareAppMessage(async () => {
|
onShareAppMessage(async () => {
|
||||||
const token = await getShareToken("card_generate", cardDetail.value?.id);
|
const token = await getShareToken("card_generate", cardDetail.value?.id);
|
||||||
|
getShareReward({ scene: "card_generate" });
|
||||||
return {
|
return {
|
||||||
title: "送你一张精美的新春祝福卡片 🎊",
|
title: "送你一张精美的专属祝福卡片 🎊",
|
||||||
path: `/pages/detail/index?shareToken=${token || ""}`,
|
path: `/pages/detail/index?shareToken=${token || ""}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
cardDetail.value?.imageUrl ||
|
cardDetail.value?.imageUrl ||
|
||||||
@@ -206,7 +207,7 @@ onShareAppMessage(async () => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const token = await getShareToken("card_generate", cardDetail.value?.id);
|
const token = await getShareToken("card_generate", cardDetail.value?.id);
|
||||||
return {
|
return {
|
||||||
title: "送你一张精美的新春祝福卡片 🎊",
|
title: "送你一张精美的专属祝福卡片 🎊",
|
||||||
query: `shareToken=${token}`,
|
query: `shareToken=${token}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
cardDetail.value?.imageUrl ||
|
cardDetail.value?.imageUrl ||
|
||||||
|
|||||||
@@ -16,9 +16,9 @@
|
|||||||
/>
|
/>
|
||||||
<text class="banner-icon" v-else-if="!inviterName">✨</text>
|
<text class="banner-icon" v-else-if="!inviterName">✨</text>
|
||||||
<text class="banner-text" v-if="inviterName"
|
<text class="banner-text" v-if="inviterName"
|
||||||
>你的好友 {{ inviterName }} 正在抽取2026新年运势</text
|
>你的好友 {{ inviterName }} 正在抽取今日运势</text
|
||||||
>
|
>
|
||||||
<text class="banner-text" v-else>2026 灵马贺岁 · 开启你的新年好运</text>
|
<text class="banner-text" v-else>今日运势 · 开启你的好运</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="mini-btn" @click="goTest">
|
<view class="mini-btn" @click="goTest">
|
||||||
我也要测 <text class="mini-arrow">↗</text>
|
我也要测 <text class="mini-arrow">↗</text>
|
||||||
@@ -78,7 +78,7 @@
|
|||||||
<!-- <view class="qr-box">
|
<!-- <view class="qr-box">
|
||||||
<view class="qr-placeholder"></view>
|
<view class="qr-placeholder"></view>
|
||||||
</view> -->
|
</view> -->
|
||||||
<view class="footer-text">2026 灵马贺岁 · 测出你的新年锦鲤关键词</view>
|
<view class="footer-text">2026 灵马贺岁 · 测出你的锦鲤关键词</view>
|
||||||
<view class="footer-sub">2026 HAPPY NEW YEAR</view>
|
<view class="footer-sub">2026 HAPPY NEW YEAR</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="fortune-page">
|
<view class="fortune-page">
|
||||||
<NavBar title="2026 新年运势" :transparent="true" color="#ffd700" />
|
<NavBar title="每日运势" :transparent="true" color="#ffd700" />
|
||||||
|
|
||||||
<!-- 初始状态:签筒 -->
|
<!-- 初始状态:签筒 -->
|
||||||
<view class="state-initial" v-if="status !== 'result'">
|
<view class="state-initial" v-if="status !== 'result'">
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
<text class="result-title">{{ currentFortune.title }}</text>
|
<text class="result-title">{{ currentFortune.title }}</text>
|
||||||
<view class="divider"></view>
|
<view class="divider"></view>
|
||||||
<text class="result-desc">{{ currentFortune.desc }}</text>
|
<text class="result-desc">{{ currentFortune.desc }}</text>
|
||||||
<text class="result-sub">旧岁千般皆如意,新年万事定称心。</text>
|
<text class="result-sub">过往千般皆如意,此后万事定称心。</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="card-footer">
|
<view class="card-footer">
|
||||||
<view class="footer-left">
|
<view class="footer-left">
|
||||||
@@ -125,19 +125,19 @@ import {
|
|||||||
onShareAppMessage,
|
onShareAppMessage,
|
||||||
onShareTimeline,
|
onShareTimeline,
|
||||||
} from "@dcloudio/uni-app";
|
} from "@dcloudio/uni-app";
|
||||||
import { abilityCheck } from "@/api/system.js";
|
|
||||||
import { drawFortune } from "@/api/fortune.js";
|
|
||||||
import { getShareReward } from "@/api/system.js";
|
|
||||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
|
||||||
import { useUserStore } from "@/stores/user";
|
|
||||||
import {
|
import {
|
||||||
getShareToken,
|
|
||||||
saveRemoteImageToLocal,
|
|
||||||
saveRecordRequest,
|
saveRecordRequest,
|
||||||
|
saveRemoteImageToLocal,
|
||||||
|
getShareToken,
|
||||||
saveViewRequest,
|
saveViewRequest,
|
||||||
trackRecord,
|
|
||||||
} from "@/utils/common.js";
|
} from "@/utils/common.js";
|
||||||
|
import { drawFortune } from "@/api/fortune.js";
|
||||||
|
import { abilityCheck } from "@/api/system.js";
|
||||||
|
import { checkAbilityAndHandle } from "@/utils/ability.js";
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
import { trackRecord } from "@/utils/common.js";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const loginPopupRef = ref(null);
|
const loginPopupRef = ref(null);
|
||||||
@@ -185,7 +185,7 @@ onShareAppMessage(async () => {
|
|||||||
const shareToken = await getShareToken("fortune_draw", cardId.value);
|
const shareToken = await getShareToken("fortune_draw", cardId.value);
|
||||||
getRewardByShare();
|
getRewardByShare();
|
||||||
return {
|
return {
|
||||||
title: "马年运势我已经抽过了,你的会是什么?",
|
title: "今日运势我已经抽过了,你的会是什么?",
|
||||||
path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareToken}` : `/pages/fortune/index?shareToken=${shareToken}`}`,
|
path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareToken}` : `/pages/fortune/index?shareToken=${shareToken}`}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -195,7 +195,7 @@ onShareAppMessage(async () => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("fortune_timeline");
|
const shareToken = await getShareToken("fortune_timeline");
|
||||||
return {
|
return {
|
||||||
title: "新春到,抽灵签!快来测测你的新年运势 🏮",
|
title: "好运到,抽灵签!快来测测你的今年运势 🏮",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -238,10 +238,8 @@ const startShake = async () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (remainingCount.value <= 0) {
|
const canProceed = await checkAbilityAndHandle("fortune_draw");
|
||||||
uni.showToast({ title: "今日次数已用完", icon: "none" });
|
if (!canProceed) return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
status.value = "shaking";
|
status.value = "shaking";
|
||||||
|
|
||||||
|
|||||||
792
pages/greeting/daily.vue
Normal file
792
pages/greeting/daily.vue
Normal file
@@ -0,0 +1,792 @@
|
|||||||
|
<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: 40rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 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: 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>
|
||||||
@@ -8,9 +8,9 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="hero-title">
|
<view class="hero-title">
|
||||||
<text class="year">2026</text>
|
<text class="year">2026</text>
|
||||||
<text class="main">新春祝福</text>
|
<text class="main">专属祝福</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="hero-sub">新年快乐,万事如意!</text>
|
<text class="hero-sub">送你一份好运祝福,万事如意!</text>
|
||||||
<!-- <image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" /> -->
|
<!-- <image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" /> -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -137,7 +137,12 @@ import {
|
|||||||
onShow,
|
onShow,
|
||||||
} from "@dcloudio/uni-app";
|
} from "@dcloudio/uni-app";
|
||||||
import { getBavBarHeight } from "@/utils/system";
|
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";
|
import { getShareToken, saveViewRequest, trackRecord } from "@/utils/common.js";
|
||||||
|
|
||||||
const countdownText = ref("");
|
const countdownText = ref("");
|
||||||
@@ -210,8 +215,9 @@ onLoad((options) => {
|
|||||||
|
|
||||||
onShareAppMessage(async () => {
|
onShareAppMessage(async () => {
|
||||||
const shareToken = await getShareToken("index");
|
const shareToken = await getShareToken("index");
|
||||||
|
getShareReward({ scene: "index" });
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -221,7 +227,7 @@ onShareAppMessage(async () => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("index_timeline");
|
const shareToken = await getShareToken("index_timeline");
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -270,20 +276,20 @@ const onNoticeTap = (tip) => {
|
|||||||
|
|
||||||
const features = ref([
|
const features = ref([
|
||||||
{
|
{
|
||||||
title: "新春祝福卡片",
|
title: "专属祝福卡片",
|
||||||
subtitle: "定制专属贺卡吧",
|
subtitle: "定制专属贺卡吧",
|
||||||
icon: "/static/icon/celebrate.png",
|
icon: "/static/icon/celebrate.png",
|
||||||
type: "card",
|
type: "card",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "新年运势",
|
title: "专属运势",
|
||||||
subtitle: "抽取新年关键词",
|
subtitle: "抽取专属关键词",
|
||||||
icon: "/static/icon/yunshi.png",
|
icon: "/static/icon/yunshi.png",
|
||||||
type: "fortune",
|
type: "fortune",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "新春头像",
|
title: "爆款头像",
|
||||||
subtitle: "焕上节日新饰",
|
subtitle: "焕上精美头像",
|
||||||
icon: "/static/icon/guashi.png",
|
icon: "/static/icon/guashi.png",
|
||||||
type: "avatar_decor",
|
type: "avatar_decor",
|
||||||
},
|
},
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
1135
pages/index/index_old.vue
Normal file
1135
pages/index/index_old.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -44,7 +44,7 @@
|
|||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
/>
|
/>
|
||||||
<view class="card-overlay">
|
<view class="card-overlay">
|
||||||
<view class="watermark">年禧集.马年春节祝福</view>
|
<view class="watermark">精美头像壁纸祝福</view>
|
||||||
<!-- 选中的标题图片 -->
|
<!-- 选中的标题图片 -->
|
||||||
<image
|
<image
|
||||||
v-if="currentTitle"
|
v-if="currentTitle"
|
||||||
@@ -169,6 +169,21 @@
|
|||||||
<view v-if="title?.id === currentTitle?.id" class="tpl-check"
|
<view v-if="title?.id === currentTitle?.id" class="tpl-check"
|
||||||
>✔</view
|
>✔</view
|
||||||
>
|
>
|
||||||
|
<!-- Lock Overlay -->
|
||||||
|
<view
|
||||||
|
v-if="!title.isUnlock && title.unlockType"
|
||||||
|
class="lock-overlay"
|
||||||
|
>
|
||||||
|
<!-- Badge -->
|
||||||
|
<view class="unlock-badge" :class="title.unlockType">
|
||||||
|
{{ getUnlockLabel(title.unlockType) }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Center Lock -->
|
||||||
|
<view class="center-lock">
|
||||||
|
<uni-icons type="locked-filled" size="18" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="loadingTitles" class="loading-more">加载中...</view>
|
<view v-if="loadingTitles" class="loading-more">加载中...</view>
|
||||||
@@ -203,6 +218,21 @@
|
|||||||
<view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
|
<view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
|
||||||
>✔</view
|
>✔</view
|
||||||
>
|
>
|
||||||
|
<!-- Lock Overlay -->
|
||||||
|
<view
|
||||||
|
v-if="!tpl.isUnlock && tpl.unlockType"
|
||||||
|
class="lock-overlay"
|
||||||
|
>
|
||||||
|
<!-- Badge -->
|
||||||
|
<view class="unlock-badge" :class="tpl.unlockType">
|
||||||
|
{{ getUnlockLabel(tpl.unlockType) }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Center Lock -->
|
||||||
|
<view class="center-lock">
|
||||||
|
<uni-icons type="locked-filled" size="18" color="#fff" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="loadingTemplates" class="loading-more"
|
<view v-if="loadingTemplates" class="loading-more"
|
||||||
@@ -485,6 +515,52 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-popup>
|
</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 }">
|
||||||
|
<image
|
||||||
|
v-if="scene.icon && scene.icon.includes('/')"
|
||||||
|
:src="scene.icon"
|
||||||
|
mode="aspectFit"
|
||||||
|
style="width: 52rpx; height: 52rpx"
|
||||||
|
/>
|
||||||
|
<uni-icons
|
||||||
|
v-else
|
||||||
|
:type="scene.icon || 'star-filled'"
|
||||||
|
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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -499,7 +575,9 @@ import {
|
|||||||
getCardTemplateTitleList,
|
getCardTemplateTitleList,
|
||||||
getCardMusicList,
|
getCardMusicList,
|
||||||
} from "@/api/make";
|
} from "@/api/make";
|
||||||
import { abilityCheck, getShareReward, msgCheckApi } from "@/api/system";
|
import { getGreetingSceneList } from "@/api/card";
|
||||||
|
import { getShareReward, msgCheckApi, watchAdReward } from "@/api/system";
|
||||||
|
import { checkAbilityAndHandle, getUnlockLabel } from "@/utils/ability.js";
|
||||||
import {
|
import {
|
||||||
onShareAppMessage,
|
onShareAppMessage,
|
||||||
onShareTimeline,
|
onShareTimeline,
|
||||||
@@ -515,8 +593,11 @@ import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
|||||||
import { saveRecordRequest, uploadImage, trackRecord } from "@/utils/common.js";
|
import { saveRecordRequest, uploadImage, trackRecord } from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
|
||||||
|
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const loginPopupRef = ref(null);
|
const loginPopupRef = ref(null);
|
||||||
|
const rewardAdRef = ref(null);
|
||||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||||
|
|
||||||
const DEFAULT_AVATAR =
|
const DEFAULT_AVATAR =
|
||||||
@@ -878,10 +959,6 @@ const userOffsetY = ref(0);
|
|||||||
const shareToken = ref("");
|
const shareToken = ref("");
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
getTemplateList();
|
|
||||||
getTemplateContentList();
|
|
||||||
getTemplateTitleList();
|
|
||||||
getMusicList();
|
|
||||||
if (options.shareToken) {
|
if (options.shareToken) {
|
||||||
shareToken.value = options.shareToken;
|
shareToken.value = options.shareToken;
|
||||||
}
|
}
|
||||||
@@ -889,8 +966,77 @@ onLoad((options) => {
|
|||||||
eventName: "make_page_visit",
|
eventName: "make_page_visit",
|
||||||
eventType: `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);
|
||||||
|
}
|
||||||
|
fetchSceneList();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const loadData = () => {
|
||||||
|
getTemplateList();
|
||||||
|
getTemplateContentList();
|
||||||
|
getTemplateTitleList();
|
||||||
|
getMusicList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentScene = ref("");
|
||||||
|
const scenePopup = ref(null);
|
||||||
|
const scenes = ref([]);
|
||||||
|
|
||||||
|
const SCENE_PALETTE = [
|
||||||
|
{ color: "#FF3B30", bgColor: "#FFF5F5" },
|
||||||
|
{ color: "#FF9500", bgColor: "#FFF8E5" },
|
||||||
|
{ color: "#FFCC00", bgColor: "#FFFBE6" },
|
||||||
|
{ color: "#FF2D55", bgColor: "#FFF0F5" },
|
||||||
|
{ color: "#FF5E3A", bgColor: "#FFF2F0" },
|
||||||
|
{ color: "#8B572A", bgColor: "#F9F0E6" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const fetchSceneList = async () => {
|
||||||
|
try {
|
||||||
|
const res = await getGreetingSceneList("daily");
|
||||||
|
if (res && Array.isArray(res)) {
|
||||||
|
scenes.value = res.map((item, index) => {
|
||||||
|
const style = SCENE_PALETTE[index % SCENE_PALETTE.length];
|
||||||
|
return {
|
||||||
|
name: item.sceneName,
|
||||||
|
value: item.scene,
|
||||||
|
icon: item.imageUrl,
|
||||||
|
color: style.color,
|
||||||
|
bgColor: style.bgColor,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("fetchSceneList error", e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectScene = (scene) => {
|
||||||
|
currentScene.value = scene.value;
|
||||||
|
scenePopup.value.close();
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const skipScene = () => {
|
||||||
|
currentScene.value = "";
|
||||||
|
scenePopup.value.close();
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
const syncUserInfo = (force = false) => {
|
const syncUserInfo = (force = false) => {
|
||||||
if (isLoggedIn.value) {
|
if (isLoggedIn.value) {
|
||||||
if (signatureName.value === "xxx" || !signatureName.value) {
|
if (signatureName.value === "xxx" || !signatureName.value) {
|
||||||
@@ -988,7 +1134,10 @@ const getTemplateList = async (isLoadMore = false) => {
|
|||||||
|
|
||||||
loadingTemplates.value = true;
|
loadingTemplates.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await getCardTemplateList(templatePage.value);
|
const res = await getCardTemplateList(
|
||||||
|
templatePage.value,
|
||||||
|
currentScene.value,
|
||||||
|
);
|
||||||
|
|
||||||
// 兼容数组或对象列表格式
|
// 兼容数组或对象列表格式
|
||||||
const list = Array.isArray(res) ? res : res.list || [];
|
const list = Array.isArray(res) ? res : res.list || [];
|
||||||
@@ -1052,7 +1201,10 @@ const getTemplateTitleList = async (isLoadMore = false) => {
|
|||||||
|
|
||||||
loadingTitles.value = true;
|
loadingTitles.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await getCardTemplateTitleList(titlePage.value);
|
const res = await getCardTemplateTitleList(
|
||||||
|
titlePage.value,
|
||||||
|
currentScene.value,
|
||||||
|
);
|
||||||
const list = Array.isArray(res) ? res : res.list || [];
|
const list = Array.isArray(res) ? res : res.list || [];
|
||||||
|
|
||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
@@ -1105,7 +1257,10 @@ const getTemplateContentList = async (isLoadMore = false) => {
|
|||||||
|
|
||||||
loadingBlessings.value = true;
|
loadingBlessings.value = true;
|
||||||
try {
|
try {
|
||||||
const res = await getCardTemplateContentList(blessingPage.value);
|
const res = await getCardTemplateContentList(
|
||||||
|
blessingPage.value,
|
||||||
|
currentScene.value,
|
||||||
|
);
|
||||||
const list = Array.isArray(res) ? res : res.list || [];
|
const list = Array.isArray(res) ? res : res.list || [];
|
||||||
|
|
||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
@@ -1177,7 +1332,7 @@ onShareAppMessage(async (options) => {
|
|||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("card_generate_index", "");
|
const shareToken = await getShareToken("card_generate_index", "");
|
||||||
return {
|
return {
|
||||||
title: "快来制作新春祝福卡片🎉",
|
title: "快来制作祝福卡片🎉",
|
||||||
path: `/pages/make/index?shareToken=${shareToken}`,
|
path: `/pages/make/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -1188,7 +1343,7 @@ onShareAppMessage(async (options) => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("card_timeline");
|
const shareToken = await getShareToken("card_timeline");
|
||||||
return {
|
return {
|
||||||
title: "送你一张精美的新春祝福卡片 🎊",
|
title: "送你一张精美的祝福卡片 🎊",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -1225,8 +1380,13 @@ const closePanel = () => {
|
|||||||
const templates = ref([]);
|
const templates = ref([]);
|
||||||
|
|
||||||
const currentTemplate = ref(templates.value[0]);
|
const currentTemplate = ref(templates.value[0]);
|
||||||
|
const currentUnlockTpl = ref(null);
|
||||||
|
|
||||||
const applyTemplate = (tpl) => {
|
const applyTemplate = (tpl) => {
|
||||||
|
if (tpl.unlockType && !tpl.isUnlock) {
|
||||||
|
handleUnlock(tpl);
|
||||||
|
return;
|
||||||
|
}
|
||||||
trackRecord({
|
trackRecord({
|
||||||
eventName: "card_tpl_choose",
|
eventName: "card_tpl_choose",
|
||||||
eventType: "click",
|
eventType: "click",
|
||||||
@@ -1236,7 +1396,94 @@ const applyTemplate = (tpl) => {
|
|||||||
closePanel();
|
closePanel();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleUnlock = (tpl) => {
|
||||||
|
switch (tpl.unlockType) {
|
||||||
|
case "vip":
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/mine/vip",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "ad":
|
||||||
|
currentUnlockTpl.value = tpl;
|
||||||
|
rewardAdRef.value.show();
|
||||||
|
break;
|
||||||
|
case "sing3":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到1天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "sing5":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到5天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "sing7":
|
||||||
|
uni.showToast({
|
||||||
|
title: "需要连续签到7天解锁",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
uni.showToast({
|
||||||
|
title: "未满足解锁条件",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdReward = async (token) => {
|
||||||
|
try {
|
||||||
|
const res = await watchAdReward(
|
||||||
|
token,
|
||||||
|
"unlock",
|
||||||
|
activeTool.value === "template" ? "card_template" : "card_title_template",
|
||||||
|
currentUnlockTpl.value.id,
|
||||||
|
);
|
||||||
|
if (res) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "解锁成功",
|
||||||
|
icon: "success",
|
||||||
|
});
|
||||||
|
// 解锁成功后,更新本地状态,允许使用
|
||||||
|
if (currentUnlockTpl.value) {
|
||||||
|
currentUnlockTpl.value.isUnlock = true;
|
||||||
|
|
||||||
|
if (activeTool.value === "template") {
|
||||||
|
// 同时更新列表中的状态
|
||||||
|
const index = templates.value.findIndex(
|
||||||
|
(t) => t.id === currentUnlockTpl.value.id,
|
||||||
|
);
|
||||||
|
if (index !== -1) {
|
||||||
|
templates.value[index].isUnlock = true;
|
||||||
|
}
|
||||||
|
applyTemplate(currentUnlockTpl.value);
|
||||||
|
} else if (activeTool.value === "title") {
|
||||||
|
// 同时更新列表中的状态
|
||||||
|
const index = titles.value.findIndex(
|
||||||
|
(t) => t.id === currentUnlockTpl.value.id,
|
||||||
|
);
|
||||||
|
if (index !== -1) {
|
||||||
|
titles.value[index].isUnlock = true;
|
||||||
|
}
|
||||||
|
selectTitle(currentUnlockTpl.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
currentUnlockTpl.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Reward claim failed", e);
|
||||||
|
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const selectTitle = (title) => {
|
const selectTitle = (title) => {
|
||||||
|
if (title.unlockType && !title.isUnlock) {
|
||||||
|
handleUnlock(title);
|
||||||
|
return;
|
||||||
|
}
|
||||||
trackRecord({
|
trackRecord({
|
||||||
eventName: "card_title_choose",
|
eventName: "card_title_choose",
|
||||||
eventType: "click",
|
eventType: "click",
|
||||||
@@ -1281,24 +1528,9 @@ const preview = async () => {
|
|||||||
loginPopupRef.value.open();
|
loginPopupRef.value.open();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const abilityRes = await abilityCheck("card_generate");
|
const canProceed = await checkAbilityAndHandle("card_generate");
|
||||||
if (!abilityRes.canUse) {
|
if (!canProceed) return;
|
||||||
if (
|
|
||||||
abilityRes?.blockType === "need_share" &&
|
|
||||||
abilityRes?.message === "分享可继续"
|
|
||||||
) {
|
|
||||||
uni.showToast({
|
|
||||||
title: "分享给好友可继续使用",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
uni.showToast({
|
|
||||||
title: "您今日祝福卡下载次数已用完,直接分享给好友或者明日再试",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const tempPath = await saveByCanvas(true);
|
const tempPath = await saveByCanvas(true);
|
||||||
const id = createCard();
|
const id = createCard();
|
||||||
shareOrSave(id);
|
shareOrSave(id);
|
||||||
@@ -1815,6 +2047,58 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
|||||||
.user-desc {
|
.user-desc {
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
opacity: 0.6;
|
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,
|
||||||
|
&.sing5,
|
||||||
|
&.sing7 {
|
||||||
|
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 +2299,60 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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,
|
||||||
|
&.sing5,
|
||||||
|
&.sing7 {
|
||||||
|
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 {
|
.tpl-check {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 6rpx;
|
right: 6rpx;
|
||||||
@@ -2415,4 +2752,104 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
|||||||
color: #666;
|
color: #666;
|
||||||
font-size: 28rpx;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -218,7 +218,7 @@ const formatDate = (dateStr) => {
|
|||||||
|
|
||||||
const getDefaultName = (item) => {
|
const getDefaultName = (item) => {
|
||||||
// Simple deterministic name generation based on ID char code sum
|
// Simple deterministic name generation based on ID char code sum
|
||||||
if (!item.id) return "新春头像";
|
if (!item.id) return "精美头像";
|
||||||
let sum = 0;
|
let sum = 0;
|
||||||
for (let i = 0; i < item.id.length; i++) {
|
for (let i = 0; i < item.id.length; i++) {
|
||||||
sum += item.id.charCodeAt(i);
|
sum += item.id.charCodeAt(i);
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="greeting-page">
|
<view class="greeting-page">
|
||||||
<NavBar title="我的新春祝福" background="transparent" />
|
<NavBar title="我的真挚祝福" background="transparent" />
|
||||||
|
|
||||||
<!-- Header Stats -->
|
<!-- Header Stats -->
|
||||||
<view class="header-stats">
|
<view class="header-stats">
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="divider"></view>
|
<view class="divider"></view>
|
||||||
<view class="stats-right">
|
<view class="stats-right">
|
||||||
<text class="label">马年运势</text>
|
<text class="label">今日运势</text>
|
||||||
<text class="value red-text">一马当先</text>
|
<text class="value red-text">一马当先</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -79,7 +79,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="footer-note" v-if="!loading && list.length > 0">
|
<view class="footer-note" v-if="!loading && list.length > 0">
|
||||||
<text>2026 丙午马年 · 祝福管理助手</text>
|
<text>2026 精美头像壁纸祝福</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -87,7 +87,7 @@
|
|||||||
<view class="fab-btn" @tap="onMake">
|
<view class="fab-btn" @tap="onMake">
|
||||||
<view class="fab-content">
|
<view class="fab-content">
|
||||||
<text class="fab-emoji">✍️</text>
|
<text class="fab-emoji">✍️</text>
|
||||||
<text>新春制作</text>
|
<text>快速制作</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -103,6 +103,7 @@ import {
|
|||||||
import { getMyCard } from "@/api/mine.js";
|
import { getMyCard } from "@/api/mine.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
import { getShareToken, trackRecord } from "@/utils/common.js";
|
import { getShareToken, trackRecord } from "@/utils/common.js";
|
||||||
|
import { getShareReward } from "@/api/system";
|
||||||
|
|
||||||
const list = ref([]);
|
const list = ref([]);
|
||||||
const page = ref(1);
|
const page = ref(1);
|
||||||
@@ -134,6 +135,7 @@ onShareAppMessage(async (options) => {
|
|||||||
"card_generate",
|
"card_generate",
|
||||||
options?.target?.dataset?.item?.id,
|
options?.target?.dataset?.item?.id,
|
||||||
);
|
);
|
||||||
|
getShareReward({ scene: "card_generate" });
|
||||||
return {
|
return {
|
||||||
title: "我刚做了一张祝福卡片,送给你",
|
title: "我刚做了一张祝福卡片,送给你",
|
||||||
path: "/pages/detail/index?shareToken=" + shareToken,
|
path: "/pages/detail/index?shareToken=" + shareToken,
|
||||||
@@ -142,8 +144,9 @@ onShareAppMessage(async (options) => {
|
|||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("greeting_page", "");
|
const shareToken = await getShareToken("greeting_page", "");
|
||||||
|
getShareReward({ scene: "greeting_page" });
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -194,12 +197,12 @@ const formatDate = (dateStr) => {
|
|||||||
|
|
||||||
const getTagText = (item) => {
|
const getTagText = (item) => {
|
||||||
// if (item.status === "draft") return "草稿";
|
// if (item.status === "draft") return "草稿";
|
||||||
return item?.title?.name || item.festival || "新春快乐";
|
return item?.title?.name || item.festival || "真挚祝福";
|
||||||
};
|
};
|
||||||
|
|
||||||
const getTitle = (item) => {
|
const getTitle = (item) => {
|
||||||
const title =
|
const title =
|
||||||
(item?.blessingTo || "祝您") + (item?.content?.content || "新春快乐");
|
(item?.blessingTo || "祝您") + (item?.content?.content || "万事如意");
|
||||||
return title.length > 10 ? title.substring(0, 10) + "..." : title;
|
return title.length > 10 ? title.substring(0, 10) + "..." : title;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -122,16 +122,16 @@
|
|||||||
<view class="footer">
|
<view class="footer">
|
||||||
<view class="footer-blessing">
|
<view class="footer-blessing">
|
||||||
<uni-icons type="vip-filled" size="14" color="#ff3b30" />
|
<uni-icons type="vip-filled" size="14" color="#ff3b30" />
|
||||||
<text>祝您2026新春大吉,万事如意</text>
|
<text>祝您 万事大吉,万事如意</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer-copy">2026 丙午马年 · 官方出品</view>
|
<view class="footer-copy">官方出品</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, onMounted } from "vue";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
import { trackRecord } from "@/utils/common.js";
|
import { trackRecord } from "@/utils/common.js";
|
||||||
|
|
||||||
@@ -193,6 +193,11 @@ const faqList = ref([
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const copyright = [
|
||||||
|
"如有疑问,请通过“我的-使用说明”联系客服处理。",
|
||||||
|
"最终解释权归 2026 助手团队所有。",
|
||||||
|
];
|
||||||
|
|
||||||
const toggleCategory = (index) => {
|
const toggleCategory = (index) => {
|
||||||
faqList.value[index].expanded = !faqList.value[index].expanded;
|
faqList.value[index].expanded = !faqList.value[index].expanded;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -65,22 +65,22 @@
|
|||||||
<view class="menu-group">
|
<view class="menu-group">
|
||||||
<view class="menu-item" @tap="navTo('greetings')">
|
<view class="menu-item" @tap="navTo('greetings')">
|
||||||
<view class="icon-box red-bg"><text>🧧</text></view>
|
<view class="icon-box red-bg"><text>🧧</text></view>
|
||||||
<text class="menu-text">我的新春祝福</text>
|
<text class="menu-text">我的美好祝福</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item" @tap="navTo('fortune-record')">
|
<view class="menu-item" @tap="navTo('fortune-record')">
|
||||||
<view class="icon-box orange-bg"><text>📹</text></view>
|
<view class="icon-box orange-bg"><text>📹</text></view>
|
||||||
<text class="menu-text">我的新年运势</text>
|
<text class="menu-text">我的每日运势</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item" @tap="navTo('avatar')">
|
<view class="menu-item" @tap="navTo('avatar')">
|
||||||
<view class="icon-box pink-bg"><text>☺</text></view>
|
<view class="icon-box pink-bg"><text>☺</text></view>
|
||||||
<text class="menu-text">我的新春头像</text>
|
<text class="menu-text">我的专属头像</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item" @tap="navTo('wallpaper')">
|
<view class="menu-item" @tap="navTo('wallpaper')">
|
||||||
<view class="icon-box yellow-bg"><text>🖼</text></view>
|
<view class="icon-box yellow-bg"><text>🖼</text></view>
|
||||||
<text class="menu-text">我的新春壁纸</text>
|
<text class="menu-text">我的精美壁纸</text>
|
||||||
<view class="new-badge">NEW</view>
|
<view class="new-badge">NEW</view>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -121,7 +121,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<view class="version-info">2026 丙午马年 · 新春助手 v1.0.2</view>
|
<!-- <view class="version-info">2026 丙午马年 · 精美助手 v1.0.2</view> -->
|
||||||
|
|
||||||
<!-- Bottom Spacer for TabBar -->
|
<!-- Bottom Spacer for TabBar -->
|
||||||
<view style="height: 120rpx"></view>
|
<view style="height: 120rpx"></view>
|
||||||
@@ -138,6 +138,7 @@ import { ref, computed, onMounted } from "vue";
|
|||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
import { onShareAppMessage } from "@dcloudio/uni-app";
|
import { onShareAppMessage } from "@dcloudio/uni-app";
|
||||||
import { getShareToken, trackRecord } from "@/utils/common";
|
import { getShareToken, trackRecord } from "@/utils/common";
|
||||||
|
import { getShareReward } from "@/api/system";
|
||||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
@@ -174,8 +175,9 @@ onMounted(() => {
|
|||||||
|
|
||||||
onShareAppMessage(async () => {
|
onShareAppMessage(async () => {
|
||||||
const shareToken = await getShareToken("mine");
|
const shareToken = await getShareToken("mine");
|
||||||
|
getShareReward({ scene: "mine" });
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
path: "/pages/index/index?shareToken=" + shareToken,
|
path: "/pages/index/index?shareToken=" + shareToken,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="profile-page" >
|
<view class="profile-page">
|
||||||
<NavBar title="个人信息" />
|
<NavBar title="个人信息" />
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
<!-- <view class="info-item" @click="handleEditManifesto">
|
<!-- <view class="info-item" @click="handleEditManifesto">
|
||||||
<text class="label">新春宣言</text>
|
<text class="label">个性宣言</text>
|
||||||
<view class="value-box">
|
<view class="value-box">
|
||||||
<text class="value red-text">{{ form.bio || "点击选择" }}</text>
|
<text class="value red-text">{{ form.bio || "点击选择" }}</text>
|
||||||
<uni-icons type="compose" size="16" color="#ccc" />
|
<uni-icons type="compose" size="16" color="#ccc" />
|
||||||
@@ -186,7 +186,7 @@ const handleSave = async () => {
|
|||||||
const originalForm = {
|
const originalForm = {
|
||||||
nickName: userInfo.value.nickName || "",
|
nickName: userInfo.value.nickName || "",
|
||||||
gender: userInfo.value.gender || 1,
|
gender: userInfo.value.gender || 1,
|
||||||
bio: userInfo.value.bio || "万事如意,岁岁平安"
|
bio: userInfo.value.bio || "万事如意,岁岁平安",
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -204,7 +204,7 @@ const handleSave = async () => {
|
|||||||
} else {
|
} else {
|
||||||
// 恢复之前的内容
|
// 恢复之前的内容
|
||||||
form.value = { ...originalForm };
|
form.value = { ...originalForm };
|
||||||
uni.showToast({ title: res.message || '修改失败', icon: "none" });
|
uni.showToast({ title: res.message || "修改失败", icon: "none" });
|
||||||
uni.hideLoading();
|
uni.hideLoading();
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
@@ -148,7 +148,7 @@ const notes = [
|
|||||||
"会员服务为虚拟产品,支付后立即生效,不支持退款。",
|
"会员服务为虚拟产品,支付后立即生效,不支持退款。",
|
||||||
"会员权益在有效期内全平台通用。",
|
"会员权益在有效期内全平台通用。",
|
||||||
"如有疑问,请通过“我的-使用说明”联系客服处理。",
|
"如有疑问,请通过“我的-使用说明”联系客服处理。",
|
||||||
"最终解释权归 2026 新春助手团队所有。",
|
"最终解释权归 本平台所有。",
|
||||||
];
|
];
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@@ -30,7 +30,11 @@
|
|||||||
class="grid-item"
|
class="grid-item"
|
||||||
@tap="onPreview(item)"
|
@tap="onPreview(item)"
|
||||||
>
|
>
|
||||||
<image :src="item.imageUrl" mode="aspectFill" class="wallpaper-img" />
|
<image
|
||||||
|
:src="getThumbUrl(item.imageUrl)"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="wallpaper-img"
|
||||||
|
/>
|
||||||
<view class="date-badge">
|
<view class="date-badge">
|
||||||
<text>{{ formatDate(item.createdAt) }}</text>
|
<text>{{ formatDate(item.createdAt) }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -81,6 +85,10 @@ onReachBottom(() => {
|
|||||||
loadMore();
|
loadMore();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const getThumbUrl = (url) => {
|
||||||
|
return `${url}?imageView2/1/w/340/h/600/q/80`;
|
||||||
|
};
|
||||||
|
|
||||||
const fetchList = async (reset = false) => {
|
const fetchList = async (reset = false) => {
|
||||||
if (loading.value) return;
|
if (loading.value) return;
|
||||||
if (reset) {
|
if (reset) {
|
||||||
|
|||||||
@@ -119,6 +119,7 @@ import {
|
|||||||
onShareTimeline,
|
onShareTimeline,
|
||||||
} from "@dcloudio/uni-app";
|
} from "@dcloudio/uni-app";
|
||||||
import { getBavBarHeight } from "@/utils/system";
|
import { getBavBarHeight } from "@/utils/system";
|
||||||
|
import { getShareReward } from "@/api/system";
|
||||||
import { getShareToken } from "@/utils/common";
|
import { getShareToken } from "@/utils/common";
|
||||||
|
|
||||||
const features = ref([
|
const features = ref([
|
||||||
@@ -141,7 +142,7 @@ const features = ref([
|
|||||||
type: "avatar_decor",
|
type: "avatar_decor",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "马年主题头像框",
|
title: "主题头像框",
|
||||||
subtitle: "2026限定",
|
subtitle: "2026限定",
|
||||||
icon: "https://file.lihailezzc.com/resource/9f80ab295b7e0a7a5f62c3b0f2d7a11c.png",
|
icon: "https://file.lihailezzc.com/resource/9f80ab295b7e0a7a5f62c3b0f2d7a11c.png",
|
||||||
type: "avatar_frame",
|
type: "avatar_frame",
|
||||||
@@ -230,10 +231,12 @@ const share = () => {
|
|||||||
uni.showShareMenu && uni.showShareMenu();
|
uni.showShareMenu && uni.showShareMenu();
|
||||||
};
|
};
|
||||||
|
|
||||||
onShareAppMessage(() => {
|
onShareAppMessage(async () => {
|
||||||
|
const shareToken = await getShareToken("spring_index");
|
||||||
|
getShareReward({ scene: "spring_index" });
|
||||||
return {
|
return {
|
||||||
title: "2026 丙午马年,送你一份新春祝福 🎊",
|
title: "送你一份美好祝福 🎊",
|
||||||
path: "/pages/spring/index",
|
path: `/pages/spring/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
};
|
};
|
||||||
@@ -242,7 +245,7 @@ onShareAppMessage(() => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("spring_timeline");
|
const shareToken = await getShareToken("spring_timeline");
|
||||||
return {
|
return {
|
||||||
title: "2026 丙午马年,送你一份新春祝福 🎊",
|
title: "送你一份美好祝福 🎊",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
|
|||||||
@@ -25,8 +25,8 @@
|
|||||||
<view class="nickname">{{
|
<view class="nickname">{{
|
||||||
detailData.from.nickname || "神秘好友"
|
detailData.from.nickname || "神秘好友"
|
||||||
}}</view>
|
}}</view>
|
||||||
<view class="action-text">给你分享了一张2026新春精美壁纸</view>
|
<view class="action-text">给你分享了一张精美壁纸</view>
|
||||||
<view class="sub-text">★ 2026 且马贺岁</view>
|
<view class="sub-text">★ 幸运每一天</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
<view class="preview-card">
|
<view class="preview-card">
|
||||||
<view class="preview-badge">PREVIEW</view>
|
<view class="preview-badge">PREVIEW</view>
|
||||||
<image
|
<image
|
||||||
:src="detailData.imageUrl"
|
:src="getThumbUrl(detailData.imageUrl)"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
class="main-image"
|
class="main-image"
|
||||||
@tap="previewImage"
|
@tap="previewImage"
|
||||||
@@ -43,16 +43,25 @@
|
|||||||
|
|
||||||
<!-- Action Buttons -->
|
<!-- Action Buttons -->
|
||||||
<view class="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 class="btn-icon">✨</text>
|
||||||
<text>我也要领同款壁纸</text>
|
<text>下载高清壁纸</text>
|
||||||
|
</view>
|
||||||
|
<text class="btn-sub">消耗 20 积分</text>
|
||||||
|
</view>
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- More Wallpapers -->
|
<!-- More Wallpapers -->
|
||||||
<view class="more-section">
|
<view class="more-section">
|
||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<text class="section-title">我也要领新春壁纸</text>
|
<text class="section-title">更多同款壁纸</text>
|
||||||
<view class="more-link" @tap="goToIndex">
|
<view class="more-link" @tap="goToIndex">
|
||||||
<text>查看更多</text>
|
<text>查看更多</text>
|
||||||
<text class="arrow">›</text>
|
<text class="arrow">›</text>
|
||||||
@@ -71,45 +80,12 @@
|
|||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
class="scroll-img"
|
class="scroll-img"
|
||||||
/>
|
/>
|
||||||
<text class="item-title">{{ item.title || "新春壁纸" }}</text>
|
<text class="item-title">{{ item.title || "精美壁纸" }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</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 -->
|
<!-- Footer -->
|
||||||
<view class="footer">
|
<view class="footer">
|
||||||
<view class="footer-divider">
|
<view class="footer-divider">
|
||||||
@@ -117,19 +93,38 @@
|
|||||||
<text class="footer-text">2026 HAPPY NEW YEAR</text>
|
<text class="footer-text">2026 HAPPY NEW YEAR</text>
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer-sub">新春祝福 · 传递温情</view>
|
<view class="footer-sub">精美壁纸 · 传递温情</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||||||
|
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
||||||
import { getBavBarHeight } from "@/utils/system";
|
import { getBavBarHeight } from "@/utils/system";
|
||||||
import { getPageDetail } from "@/api/system";
|
import { getPageDetail, getShareReward } from "@/api/system";
|
||||||
import { getWallpaperRecommendList } from "@/api/wallpaper";
|
import { getWallpaperSameList } from "@/api/wallpaper";
|
||||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
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 navHeight = getBavBarHeight();
|
||||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||||
@@ -139,19 +134,31 @@ const detailData = ref({
|
|||||||
});
|
});
|
||||||
const recommendList = ref([]);
|
const recommendList = ref([]);
|
||||||
const shareToken = ref("");
|
const shareToken = ref("");
|
||||||
|
const categoryId = ref("");
|
||||||
|
|
||||||
onLoad(async (options) => {
|
onLoad(async (options) => {
|
||||||
if (options.shareToken) {
|
if (options.shareToken) {
|
||||||
shareToken.value = options.shareToken;
|
shareToken.value = options.shareToken;
|
||||||
await fetchDetail();
|
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 () => {
|
onShareAppMessage(async () => {
|
||||||
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
||||||
|
getShareReward({ scene: "wallpaper_download" });
|
||||||
return {
|
return {
|
||||||
title: "快来看看我刚领到的新年精美壁纸 🖼",
|
title: "快来看看我刚领到的精美壁纸 🖼",
|
||||||
path: `/pages/wallpaper/detail?shareToken=${token || ""}`,
|
path: `/pages/wallpaper/detail?shareToken=${token || ""}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
detailData.value?.imageUrl ||
|
detailData.value?.imageUrl ||
|
||||||
@@ -162,7 +169,7 @@ onShareAppMessage(async () => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
const token = await getShareToken("wallpaper_download", detailData.value?.id);
|
||||||
return {
|
return {
|
||||||
title: "快来看看我刚领到的新年精美壁纸 🖼",
|
title: "快来看看我刚领到的精美壁纸 🖼",
|
||||||
query: `shareToken=${token}`,
|
query: `shareToken=${token}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
detailData.value?.imageUrl ||
|
detailData.value?.imageUrl ||
|
||||||
@@ -180,6 +187,7 @@ const fetchDetail = async () => {
|
|||||||
saveViewRequest(shareToken.value, "wallpaper_detail", res.id);
|
saveViewRequest(shareToken.value, "wallpaper_detail", res.id);
|
||||||
if (res) {
|
if (res) {
|
||||||
detailData.value = res;
|
detailData.value = res;
|
||||||
|
fetchRecommend(res.id);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("Failed to fetch detail", 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 {
|
try {
|
||||||
const res = await getWallpaperRecommendList();
|
const res = await getWallpaperSameList(id || detailData.value.id);
|
||||||
recommendList.value = res;
|
recommendList.value = res;
|
||||||
|
// categoryId.value = res[0]?.categoryId || "";
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("Failed to fetch recommendations", e);
|
console.error("Failed to fetch recommendations", e);
|
||||||
}
|
}
|
||||||
@@ -212,7 +222,7 @@ const goBack = () => {
|
|||||||
|
|
||||||
const goToIndex = () => {
|
const goToIndex = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: "/pages/wallpaper/index",
|
url: `/pages/wallpaper/index?categoryId=${categoryId.value}`,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -223,25 +233,88 @@ const goToFortune = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const previewImage = () => {
|
const previewImage = () => {
|
||||||
// if (detailData.value.imageUrl) {
|
if (detailData.value.imageUrl) {
|
||||||
// uni.previewImage({
|
uni.previewImage({
|
||||||
// urls: [detailData.value.imageUrl],
|
urls: [detailData.value.imageUrl],
|
||||||
// });
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
const onRecommendClick = () => {
|
|
||||||
goToIndex();
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToGreeting = () => {
|
|
||||||
uni.switchTab({ url: "/pages/make/index" });
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToAvatar = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: "/pages/avatar/index",
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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");
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
@@ -359,10 +432,12 @@ const goToAvatar = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-image {
|
.main-image {
|
||||||
width: 100%;
|
width: 460rpx;
|
||||||
|
margin: 0 auto;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #fafafa; // Placeholder color
|
background-color: #fafafa; // Placeholder color
|
||||||
|
box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -394,6 +469,7 @@ const goToAvatar = () => {
|
|||||||
background: linear-gradient(90deg, #ff3b30 0%, #ff6b6b 100%);
|
background: linear-gradient(90deg, #ff3b30 0%, #ff6b6b 100%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.15);
|
box-shadow: 0 8px 20px rgba(255, 59, 48, 0.15);
|
||||||
|
height: 64px; /* Increased height for two lines */
|
||||||
}
|
}
|
||||||
|
|
||||||
&.secondary-btn {
|
&.secondary-btn {
|
||||||
@@ -407,6 +483,43 @@ const goToAvatar = () => {
|
|||||||
opacity: 0.9;
|
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 {
|
.more-section {
|
||||||
|
|||||||
@@ -91,6 +91,7 @@
|
|||||||
@logind="handleLogind"
|
@logind="handleLogind"
|
||||||
:share-token="shareToken"
|
:share-token="shareToken"
|
||||||
/>
|
/>
|
||||||
|
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -103,16 +104,19 @@ import {
|
|||||||
getShareToken,
|
getShareToken,
|
||||||
} from "@/utils/common.js";
|
} from "@/utils/common.js";
|
||||||
import { onShareAppMessage, onShareTimeline, onLoad } from "@dcloudio/uni-app";
|
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 { useUserStore } from "@/stores/user";
|
||||||
import { saveViewRequest, trackRecord } from "@/utils/common.js";
|
import { saveViewRequest, trackRecord } from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
import RewardAd from "@/components/RewardAd/RewardAd.vue";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const loginPopupRef = ref(null);
|
const loginPopupRef = ref(null);
|
||||||
|
const rewardAdRef = ref(null);
|
||||||
|
|
||||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
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 downloadCost = ref(20);
|
||||||
|
|
||||||
const categories = ref([]);
|
const categories = ref([]);
|
||||||
@@ -128,7 +132,7 @@ onShareAppMessage(async (options) => {
|
|||||||
if (!isLoggedIn.value) {
|
if (!isLoggedIn.value) {
|
||||||
const shareToken = await getShareToken("wallpaper_download_index", "");
|
const shareToken = await getShareToken("wallpaper_download_index", "");
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "好运已送达 🎊|祝福卡·头像·壁纸",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -141,13 +145,13 @@ onShareAppMessage(async (options) => {
|
|||||||
options?.target?.dataset?.item?.id,
|
options?.target?.dataset?.item?.id,
|
||||||
);
|
);
|
||||||
return {
|
return {
|
||||||
title: "快来挑选喜欢的新春壁纸吧",
|
title: "快来挑选喜欢的壁纸吧",
|
||||||
path: `/pages/wallpaper/detail?shareToken=${shareToken}`,
|
path: `/pages/wallpaper/detail?shareToken=${shareToken}`,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
const shareToken = await getShareToken("wallpaper_download_index", "");
|
const shareToken = await getShareToken("wallpaper_download_index", "");
|
||||||
return {
|
return {
|
||||||
title: "新年好运已送达 🎊|祝福卡·头像·壁纸",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
path: `/pages/index/index?shareToken=${shareToken}`,
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -158,7 +162,7 @@ onShareAppMessage(async (options) => {
|
|||||||
onShareTimeline(async () => {
|
onShareTimeline(async () => {
|
||||||
const shareToken = await getShareToken("wallpaper_timeline");
|
const shareToken = await getShareToken("wallpaper_timeline");
|
||||||
return {
|
return {
|
||||||
title: "精选新年壁纸,让手机也过年 🖼",
|
title: "送你一份好运祝福 🎁|头像·壁纸·祝福卡",
|
||||||
query: `shareToken=${shareToken}`,
|
query: `shareToken=${shareToken}`,
|
||||||
imageUrl:
|
imageUrl:
|
||||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||||
@@ -171,6 +175,10 @@ onLoad((options) => {
|
|||||||
shareToken.value = options.shareToken;
|
shareToken.value = options.shareToken;
|
||||||
saveViewRequest(options.shareToken, "wallpaper_download");
|
saveViewRequest(options.shareToken, "wallpaper_download");
|
||||||
}
|
}
|
||||||
|
if (options.categoryId) {
|
||||||
|
currentCategoryId.value = options.categoryId;
|
||||||
|
}
|
||||||
|
fetchCategories();
|
||||||
trackRecord({
|
trackRecord({
|
||||||
eventName: "wallpaper_page_visit",
|
eventName: "wallpaper_page_visit",
|
||||||
eventType: `visit`,
|
eventType: `visit`,
|
||||||
@@ -187,7 +195,9 @@ const fetchCategories = async () => {
|
|||||||
const list = Array.isArray(res) ? res : res?.list || [];
|
const list = Array.isArray(res) ? res : res?.list || [];
|
||||||
if (list.length > 0) {
|
if (list.length > 0) {
|
||||||
categories.value = list;
|
categories.value = list;
|
||||||
|
if (!currentCategoryId.value) {
|
||||||
currentCategoryId.value = list[0].id;
|
currentCategoryId.value = list[0].id;
|
||||||
|
}
|
||||||
loadWallpapers(true);
|
loadWallpapers(true);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} 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) => {
|
const downloadWallpaper = async (item) => {
|
||||||
trackRecord({
|
trackRecord({
|
||||||
eventName: "wallpaper_download_click",
|
eventName: "wallpaper_download_click",
|
||||||
@@ -278,28 +304,28 @@ const downloadWallpaper = async (item) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const abilityRes = await abilityCheck("wallpaper_download");
|
const canProceed = await checkAbilityAndHandle("wallpaper_download");
|
||||||
if (!abilityRes.canUse) {
|
if (!canProceed) return;
|
||||||
if (
|
|
||||||
abilityRes?.blockType === "need_share" &&
|
|
||||||
abilityRes?.message === "分享可继续"
|
|
||||||
) {
|
|
||||||
uni.showToast({
|
|
||||||
title: "分享给好友即可下载",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
uni.showToast({
|
|
||||||
title: "您今日壁纸下载次数已用完,明日再试",
|
|
||||||
icon: "none",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
uni.showLoading({ title: "下载中..." });
|
uni.showLoading({ title: "下载中..." });
|
||||||
await saveRemoteImageToLocal(item.imageUrl);
|
try {
|
||||||
saveRecordRequest("", item.id, "wallpaper_download", item.imageUrl);
|
// 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) => {};
|
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">给你分享了一张精美壁纸</view>
|
||||||
|
<view class="sub-text">★ 幸运每一天</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,8 @@ export const useUserStore = defineStore("user", {
|
|||||||
},
|
},
|
||||||
async fetchUserAssets() {
|
async fetchUserAssets() {
|
||||||
try {
|
try {
|
||||||
|
console.log("fetchUserAssets userInfo", this.userInfo);
|
||||||
|
if (!this?.userInfo?.id) return;
|
||||||
const res = await getUserAsset();
|
const res = await getUserAsset();
|
||||||
if (res) {
|
if (res) {
|
||||||
const newInfo = { ...this.userInfo, ...res };
|
const newInfo = { ...this.userInfo, ...res };
|
||||||
|
|||||||
93
utils/ability.js
Normal file
93
utils/ability.js
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import { abilityCheck } from "@/api/system";
|
||||||
|
import adManager from "@/utils/adManager";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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").
|
||||||
|
* @returns {Promise<boolean>} - Returns true if the action can proceed, false otherwise.
|
||||||
|
*/
|
||||||
|
export const checkAbilityAndHandle = async (scene) => {
|
||||||
|
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) {
|
||||||
|
adManager.showVideoAd();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the display label for an unlock type.
|
||||||
|
* @param {string} unlockType - The unlock type identifier.
|
||||||
|
* @returns {string} - The display label.
|
||||||
|
*/
|
||||||
|
export const getUnlockLabel = (unlockType) => {
|
||||||
|
if (!unlockType) return "解锁";
|
||||||
|
switch (unlockType) {
|
||||||
|
case "sing3":
|
||||||
|
return "连续签到3天";
|
||||||
|
case "sing5":
|
||||||
|
return "连续签到5天";
|
||||||
|
case "sing7":
|
||||||
|
return "连续签到7天";
|
||||||
|
case "ad":
|
||||||
|
return "广告";
|
||||||
|
case "vip":
|
||||||
|
return "VIP";
|
||||||
|
default:
|
||||||
|
return "解锁";
|
||||||
|
}
|
||||||
|
};
|
||||||
107
utils/adManager.js
Normal file
107
utils/adManager.js
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import { watchAdStart, watchAdReward } from "@/api/system.js";
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
|
||||||
|
class AdManager {
|
||||||
|
constructor() {
|
||||||
|
this.videoAd = null;
|
||||||
|
this.rewardToken = "";
|
||||||
|
this.isLoaded = false;
|
||||||
|
this.adUnitId = "adunit-d7a28e0357d98947"; // Default ID from RewardAd.vue
|
||||||
|
this._init();
|
||||||
|
}
|
||||||
|
|
||||||
|
_init() {
|
||||||
|
if (uni.createRewardedVideoAd) {
|
||||||
|
this.videoAd = uni.createRewardedVideoAd({
|
||||||
|
adUnitId: this.adUnitId,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.videoAd.onLoad(() => {
|
||||||
|
console.log("Ad Manager: Ad Loaded");
|
||||||
|
this.isLoaded = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.videoAd.onError((err) => {
|
||||||
|
console.error("Ad Manager: Ad Load Error", err);
|
||||||
|
this.isLoaded = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the rewarded video ad.
|
||||||
|
* Handles the full flow: start session -> show ad -> verify completion -> claim reward -> refresh assets.
|
||||||
|
* @returns {Promise<boolean>} Resolves with true if reward was claimed, false otherwise.
|
||||||
|
*/
|
||||||
|
async showVideoAd() {
|
||||||
|
if (!this.videoAd) {
|
||||||
|
uni.showToast({ title: "当前环境不支持广告", icon: "none" });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Step 1: Start Ad Session
|
||||||
|
const startRes = await watchAdStart();
|
||||||
|
if (!startRes || !startRes.rewardToken) {
|
||||||
|
uni.showToast({ title: "广告启动失败,请稍后再试", icon: "none" });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.rewardToken = startRes.rewardToken;
|
||||||
|
|
||||||
|
// Step 2: Show Ad
|
||||||
|
try {
|
||||||
|
await this.videoAd.show();
|
||||||
|
} catch (e) {
|
||||||
|
// Retry load and show
|
||||||
|
await this.videoAd.load();
|
||||||
|
await this.videoAd.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 3: Wait for Close
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const onCloseHandler = async (res) => {
|
||||||
|
this.videoAd.offClose(onCloseHandler); // Clean up listener
|
||||||
|
|
||||||
|
if (res && res.isEnded) {
|
||||||
|
// Step 4: Claim Reward
|
||||||
|
await this._claimReward(this.rewardToken);
|
||||||
|
resolve(true);
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: "观看完整广告才能获取奖励哦", icon: "none" });
|
||||||
|
resolve(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.videoAd.onClose(onCloseHandler);
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Ad Manager: Show failed", e);
|
||||||
|
uni.showToast({ title: "广告加载失败,请稍后再试", icon: "none" });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async _claimReward(token) {
|
||||||
|
try {
|
||||||
|
uni.showLoading({ title: "发放奖励中..." });
|
||||||
|
const res = await watchAdReward(token);
|
||||||
|
if (res) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "获得50积分",
|
||||||
|
icon: "success",
|
||||||
|
});
|
||||||
|
// Refresh user assets
|
||||||
|
const userStore = useUserStore();
|
||||||
|
await userStore.fetchUserAssets();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Ad Manager: Reward claim failed", e);
|
||||||
|
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||||
|
} finally {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new AdManager();
|
||||||
@@ -70,6 +70,7 @@ export const saveViewRequest = async (shareToken, scene, targetId = "") => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const saveRemoteImageToLocal = (imageUrl) => {
|
export const saveRemoteImageToLocal = (imageUrl) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
uni.downloadFile({
|
uni.downloadFile({
|
||||||
url: imageUrl,
|
url: imageUrl,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
@@ -77,24 +78,23 @@ export const saveRemoteImageToLocal = (imageUrl) => {
|
|||||||
uni.saveImageToPhotosAlbum({
|
uni.saveImageToPhotosAlbum({
|
||||||
filePath: res.tempFilePath,
|
filePath: res.tempFilePath,
|
||||||
success: () => {
|
success: () => {
|
||||||
uni.hideLoading();
|
resolve(true);
|
||||||
uni.showToast({ title: "已保存到相册" });
|
|
||||||
},
|
},
|
||||||
fail: () => {
|
fail: (err) => {
|
||||||
uni.hideLoading();
|
reject(err);
|
||||||
uni.showToast({ title: "保存失败", icon: "none" });
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.hideLoading();
|
reject(
|
||||||
uni.showToast({ title: "下载失败", icon: "none" });
|
new Error("Download failed with status code: " + res.statusCode),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: () => {
|
fail: (err) => {
|
||||||
uni.hideLoading();
|
reject(err);
|
||||||
uni.showToast({ title: "下载失败", icon: "none" });
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getShareToken = async (scene, targetId = "") => {
|
export const getShareToken = async (scene, targetId = "") => {
|
||||||
|
|||||||
Reference in New Issue
Block a user