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

fix: make index

Browse Source
This commit is contained in:
zzc
2026-03-01 22:18:00 +08:00
parent dd4129bb58
commit a7cc9babac
1 changed files with 202 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
pages/make/index.vue
View File

@@ -203,6 +203,31 @@
<view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
>✔</view
>
<!-- Lock Overlay -->
<view
v-if="!tpl.isUnlock && tpl.unlockType"
class="lock-overlay"
>
<!-- Badge -->
<view class="unlock-badge" :class="tpl.unlockType">
{{
tpl.unlockType === "sing3"
? "登录3天"
: tpl.unlockType === "sing1"
? "登录1天"
: tpl.unlockType === "ad"
? "广告"
: tpl.unlockType === "vip"
? "VIP"
: "解锁"
}}
</view>
<!-- Center Lock -->
<view class="center-lock">
<uni-icons type="locked-filled" size="18" color="#fff" />
</view>
</view>
</view>
</view>
<view v-if="loadingTemplates" class="loading-more"
@@ -522,6 +547,8 @@
<view class="skip-btn" @tap="skipScene">跳过，直接制作</view>
</view>
</uni-popup>
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
<RewardAd ref="rewardAdRef" @onReward="handleAdReward" />
</view>
</template>
@@ -536,7 +563,12 @@ import {
getCardTemplateTitleList,
getCardMusicList,
} from "@/api/make";
import { abilityCheck, getShareReward, msgCheckApi } from "@/api/system";
import {
abilityCheck,
getShareReward,
msgCheckApi,
watchAdReward,
} from "@/api/system";
import {
onShareAppMessage,
onShareTimeline,
@@ -552,8 +584,11 @@ import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
import { saveRecordRequest, uploadImage, trackRecord } from "@/utils/common.js";
import NavBar from "@/components/NavBar/NavBar.vue";
import RewardAd from "@/components/RewardAd/RewardAd.vue";
const userStore = useUserStore();
const loginPopupRef = ref(null);
const rewardAdRef = ref(null);
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
const DEFAULT_AVATAR =
@@ -1342,8 +1377,13 @@ const closePanel = () => {
const templates = ref([]);
const currentTemplate = ref(templates.value[0]);
const currentUnlockTpl = ref(null);
const applyTemplate = (tpl) => {
if (tpl.isUnlock === false) {
handleUnlock(tpl);
return;
}
trackRecord({
eventName: "card_tpl_choose",
eventType: "click",
@@ -1353,6 +1393,66 @@ const applyTemplate = (tpl) => {
closePanel();
};
const handleUnlock = (tpl) => {
switch (tpl.unlockType) {
case "vip":
uni.navigateTo({
url: "/pages/mine/vip",
});
break;
case "ad":
currentUnlockTpl.value = tpl;
rewardAdRef.value.showAd();
break;
case "sing1":
uni.showToast({
title: "需要连续登录1天解锁",
icon: "none",
});
break;
case "sing3":
uni.showToast({
title: "需要连续登录3天解锁",
icon: "none",
});
break;
default:
uni.showToast({
title: "未满足解锁条件",
icon: "none",
});
}
};
const handleAdReward = async (token) => {
try {
const res = await watchAdReward(token);
if (res) {
uni.showToast({
title: "解锁成功",
icon: "success",
});
// 解锁成功后，更新本地状态，允许使用
if (currentUnlockTpl.value) {
currentUnlockTpl.value.isUnlock = true;
// 同时更新列表中的状态
const index = templates.value.findIndex(
(t) => t.id === currentUnlockTpl.value.id,
);
if (index !== -1) {
templates.value[index].isUnlock = true;
}
applyTemplate(currentUnlockTpl.value);
currentUnlockTpl.value = null;
}
}
} catch (e) {
console.error("Reward claim failed", e);
uni.showToast({ title: "奖励发放失败", icon: "none" });
}
};
const selectTitle = (title) => {
trackRecord({
eventName: "card_title_choose",
@@ -1932,6 +2032,56 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
.user-desc {
font-size: 20rpx;
opacity: 0.6;
/* Lock Overlay - Modern Style */
.lock-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12rpx;
z-index: 5;
background: rgba(0, 0, 0, 0.05); /* very subtle dim */
}
.unlock-badge {
position: absolute;
top: 12rpx;
right: 12rpx;
padding: 4rpx 12rpx;
border-radius: 20rpx;
font-size: 18rpx;
color: #fff;
font-weight: bold;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
&.vip {
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
}
&.ad {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
&.sing1,
&.sing3 {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
}
.center-lock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56rpx;
height: 56rpx;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
}
/* 顶部步骤条 */
@@ -2132,7 +2282,58 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
}
.tpl-card .lock-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12rpx;
z-index: 5;
background: rgba(0, 0, 0, 0.05); /* very subtle dim */
}
.tpl-card .unlock-badge {
position: absolute;
top: 12rpx;
right: 12rpx;
padding: 4rpx 12rpx;
border-radius: 20rpx;
font-size: 18rpx;
color: #fff;
font-weight: bold;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
&.vip {
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
}
&.ad {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
&.sing1,
&.sing3 {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
}
.tpl-card .center-lock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56rpx;
height: 56rpx;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tpl-check {
position: absolute;
right: 6rpx;