fix: index page

This commit is contained in:
zzc
2026-02-28 09:34:11 +08:00
parent f40c33fa2e
commit bd3185aac3
3 changed files with 159 additions and 9 deletions

View File

@@ -23,7 +23,7 @@
<text>灵感瞬间</text>
</view>
<view class="banner-title">今日推荐创作</view>
<view class="banner-main-title">开启你的第一份<br />新春祝福</view>
<view class="banner-main-title">开启你今日的第一份<br />祝福</view>
<view class="go-btn">去制作</view>
</view>
<image
@@ -43,7 +43,7 @@
<view class="icon-box card-bg">
<image src="/static/icon/celebrate.png" mode="aspectFit" />
</view>
<text>新春贺卡</text>
<text>祝福贺卡</text>
</view>
<view class="quick-item" @tap="handleQuickAction('fortune')">
<view class="icon-box fortune-bg">
@@ -67,7 +67,7 @@
</view>
<!-- 按心情创作 -->
<view class="section">
<!-- <view class="section">
<view class="section-header">
<text class="section-title">按心情创作</text>
</view>
@@ -84,13 +84,13 @@
</view>
</view>
</scroll-view>
</view>
</view> -->
<!-- 编辑精选 -->
<view class="section">
<view class="section-header">
<text class="section-title">编辑精选</text>
<text class="view-all" @tap="viewAll">查看全部</text>
<!-- <text class="view-all" @tap="viewAll">查看全部</text> -->
</view>
<view class="featured-grid">
<view

View File

@@ -67,7 +67,9 @@
color="#fff"
style="margin-right: 4rpx"
/>
<text>{{ signInfo.isSignedToday ? "已开启" : "抽取好运" }}</text>
<text>{{
signInfo.isSignedToday ? "已开启今日好运" : "签到抽取好运"
}}</text>
</button>
</block>
@@ -111,6 +113,29 @@
</block>
</view>
<!-- Special Topic Card -->
<view class="special-topic-card" v-if="specialTopic">
<view class="topic-left">
<text class="topic-title">{{ specialTopic.sceneName }}</text>
<text class="topic-subtitle">{{ specialTopic.sceneDesc }}</text>
<text class="topic-blessing">{{ specialTopic.sceneBlessing }}</text>
<button class="topic-btn" @tap="navToSpecial">
{{ specialTopic.btnText }}
<uni-icons type="right" size="12" color="#fff" />
</button>
</view>
<view class="topic-right">
<image
class="topic-img"
:src="specialTopic.imageUrl"
mode="aspectFit"
/>
<!-- Decor circles -->
<view class="decor-circle circle-1"></view>
<view class="decor-circle circle-2"></view>
</view>
</view>
<!-- Make Card Scenes -->
<view class="section-container">
<view class="section-header">
@@ -227,9 +252,9 @@ import {
} from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import {
getRankList,
watchAdReward,
getRandomRecommendList,
getCardSpecialTopic,
} from "@/api/system";
import { getUserSignInfo, userSignIn } from "@/api/user";
import calendar from "@/utils/lunar";
@@ -361,18 +386,44 @@ const avatarList = ref([]);
onMounted(() => {
fetchUserSingInfo(); // 获取用户签到信息
fetchHomeData();
fetchSpecialTopic();
});
onShow(() => {
fetchHomeData();
fetchUserSingInfo();
fetchSpecialTopic();
});
onPullDownRefresh(() => {
fetchHomeData();
fetchUserSingInfo();
fetchSpecialTopic();
});
const specialTopic = ref(null);
const fetchSpecialTopic = async () => {
try {
const res = await getCardSpecialTopic();
if (res && res.sceneName) {
specialTopic.value = res;
} else {
specialTopic.value = null;
}
} catch (e) {
console.error("fetchSpecialTopic error", e);
}
};
const navToSpecial = () => {
if (specialTopic.value && specialTopic.value.scene) {
uni.navigateTo({
url: `/pages/make/index?scene=${specialTopic.value.scene}`,
});
}
};
const fetchUserSingInfo = async () => {
if (!isLoggedIn.value) return;
const res = await getUserSignInfo();
@@ -431,7 +482,6 @@ const onOpenLucky = async () => {
return;
}
uni.showLoading({ title: "开启好运...", mask: true });
try {
const res = await userSignIn();
if (res && res.success) {
@@ -443,6 +493,7 @@ const onOpenLucky = async () => {
fetchUserSingInfo();
userStore.fetchUserAssets();
luckyPopupRef.value?.open();
uni.showToast({ title: "获取40积分", icon: "none" });
} else {
uni.showToast({ title: "签到失败", icon: "none" });
}
@@ -675,7 +726,7 @@ onShareTimeline(() => {
}
.lucky-btn {
width: 180rpx;
width: 210rpx;
height: 72rpx;
background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%);
border-radius: 36rpx;
@@ -781,6 +832,98 @@ onShareTimeline(() => {
}
}
/* Special Topic Card */
.special-topic-card {
width: 100%;
height: 220rpx;
background: linear-gradient(135deg, #fff9f0 0%, #fff3e0 100%);
border-radius: 32rpx;
padding: 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 48rpx;
box-shadow: 0 12rpx 32rpx rgba(255, 152, 0, 0.08);
position: relative;
overflow: hidden;
.topic-left {
display: flex;
flex-direction: column;
z-index: 2;
.topic-title {
font-size: 36rpx;
font-weight: 800;
color: #d81e06;
margin-bottom: 8rpx;
}
.topic-subtitle {
font-size: 24rpx;
color: #d81e06;
font-weight: bold;
margin-bottom: 12rpx;
}
.topic-blessing {
font-size: 22rpx;
color: #888;
margin-bottom: 24rpx;
}
.topic-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #d81e06;
color: #fff;
font-size: 22rpx;
padding: 10rpx 24rpx;
border-radius: 24rpx;
margin: 0;
line-height: 1.2;
box-shadow: 0 4rpx 12rpx rgba(216, 30, 6, 0.2);
}
}
.topic-right {
position: relative;
width: 200rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.topic-img {
width: 160rpx;
height: 160rpx;
z-index: 2;
}
.decor-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
}
.circle-1 {
width: 120rpx;
height: 120rpx;
right: 20rpx;
top: 10rpx;
}
.circle-2 {
width: 80rpx;
height: 80rpx;
right: 80rpx;
bottom: 20rpx;
}
}
}
/* 通用 Section 样式 */
.section-container {
margin-bottom: 28rpx;