fix: index page
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user