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

fix: page

Browse Source
This commit is contained in:
zzc
2026-02-24 17:32:45 +08:00
parent 66e483c315
commit 28f0f83531
3 changed files with 557 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

530
components/LuckyPopup/LuckyPopup.vue Normal file
View File

@@ -0,0 +1,530 @@
<template>
<view class="lucky-popup-container">
<uni-popup ref="popup" type="center" :mask-click="false">
<!-- 动画阶段 -->
<view v-if="isAnimating" class="animation-container">
<view class="card-flip-wrapper" :class="{ flipped: isFlipping }">
<view class="card-front">
<view class="loading-circle">
<view class="particle p1"></view>
<view class="particle p2"></view>
<view class="particle p3"></view>
<view class="particle p4"></view>
</view>
<text class="loading-text">{{ loadingText }}</text>
</view>
<view class="card-back"></view>
</view>
<view class="light-effect" v-if="showLight"></view>
</view>
<!-- 结果阶段 -->
<view v-else class="result-container">
<view class="lucky-card">
<!-- 头部渐变区 -->
<view class="card-header">
<view class="header-decor left">福</view>
<view class="header-decor right">禧</view>
<text class="header-label">今日好运指数</text>
<view class="score-wrap">
<text class="score">{{ resultData.score }}</text>
<text class="percent">%</text>
</view>
<text class="lucky-word">{{ resultData.luckyWord }}</text>
<view class="tag-year">2026 CNY SPECIAL</view>
</view>
<!-- 内容区 -->
<view class="card-body">
<!-- 宜忌 -->
<view class="yi-ji-grid">
<view class="grid-item yi">
<view class="item-title">
<uni-icons type="checkmarkempty" size="16" color="#d81e06" />
<text>今日宜</text>
</view>
<text class="item-content">{{ resultData.yi }}</text>
</view>
<view class="grid-item ji">
<view class="item-title">
<uni-icons type="closeempty" size="16" color="#666" />
<text>今日忌</text>
</view>
<text class="item-content">{{ resultData.ji }}</text>
</view>
</view>
<!-- 幸运元素 -->
<view class="lucky-elements">
<view class="elements-title">
<uni-icons type="star-filled" size="16" color="#ffca28" />
<text>幸运元素</text>
</view>
<view class="elements-row">
<view class="el-item">
<text class="label">颜色</text>
<text class="value color-val">{{ resultData.luckyColor }}</text>
</view>
<view class="divider"></view>
<view class="el-item">
<text class="label">数字</text>
<text class="value">{{ resultData.luckyNumber }}</text>
</view>
<view class="divider"></view>
<view class="el-item">
<text class="label">方向</text>
<text class="value">{{ resultData.luckyDirection }}</text>
</view>
</view>
</view>
<view class="quote-text">“{{ resultData.quote }}”</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="action-buttons">
<button class="share-btn" open-type="share">
<uni-icons type="redo" size="18" color="#fff" style="margin-right: 8rpx;" />
<text>分享我的今日好运</text>
</button>
<button class="reward-btn" @tap="onGetReward">
<view class="btn-content">
<view class="main-row">
<uni-icons type="gift" size="18" color="#fff" style="margin-right: 8rpx;" />
<text>领取今日好运奖励</text>
</view>
<text class="sub-text">已解锁免费头像模板等奖励</text>
</view>
</button>
</view>
<!-- 关闭按钮 -->
<view class="close-btn" @tap="close">
<uni-icons type="closeempty" size="24" color="#fff" />
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { ref } from 'vue';
const popup = ref(null);
const isAnimating = ref(true);
const isFlipping = ref(false);
const showLight = ref(false);
const loadingText = ref('好运加载中...');
const resultData = ref({
score: 88,
luckyWord: '鸿运当头',
yi: '沟通合作、尝试新事物',
ji: '熬夜、冲动消费',
luckyColor: '如意金',
luckyNumber: '6',
luckyDirection: '东南',
quote: '今天适合向前一步，好运正在回应你的努力。'
});
const texts = [
'好运加载中...',
'今日能量汇集中 ✨',
'正在计算你的幸运指数...'
];
const open = () => {
isAnimating.value = true;
isFlipping.value = false;
showLight.value = false;
loadingText.value = texts[0];
popup.value.open();
startAnimation();
};
const close = () => {
popup.value.close();
};
const startAnimation = () => {
// 文字轮播
let step = 0;
const timer = setInterval(() => {
step++;
if (step < texts.length) {
loadingText.value = texts[step];
}
}, 600);
// 1.5s 后翻转
setTimeout(() => {
clearInterval(timer);
isFlipping.value = true;
showLight.value = true;
// 动画结束后显示结果
setTimeout(() => {
isAnimating.value = false;
}, 600);
}, 1800);
};
const onGetReward = () => {
uni.showToast({ title: '奖励已领取', icon: 'success' });
// 这里可以跳转到任务中心或直接发放奖励
};
defineExpose({ open, close });
</script>
<style lang="scss" scoped>
.lucky-popup-container {
/* 动画容器 */
.animation-container {
width: 600rpx;
height: 800rpx;
display: flex;
justify-content: center;
align-items: center;
position: relative;
perspective: 1000px;
}
.card-flip-wrapper {
width: 400rpx;
height: 560rpx;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
&.flipped {
transform: rotateY(180deg);
}
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 32rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.3);
}
.card-front {
background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
z-index: 2;
.loading-circle {
width: 120rpx;
height: 120rpx;
position: relative;
margin-bottom: 40rpx;
.particle {
position: absolute;
width: 20rpx;
height: 20rpx;
background: #ffd700;
border-radius: 50%;
animation: orbit 1.5s linear infinite;
&.p1 { animation-delay: 0s; }
&.p2 { animation-delay: -0.375s; }
&.p3 { animation-delay: -0.75s; }
&.p4 { animation-delay: -1.125s; }
}
}
.loading-text {
color: #ffd700;
font-size: 28rpx;
letter-spacing: 2rpx;
}
}
.card-back {
background: #fff;
transform: rotateY(180deg);
}
.light-effect {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
opacity: 0;
animation: flash 0.6s ease-out forwards;
pointer-events: none;
}
/* 结果展示 */
.result-container {
width: 600rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lucky-card {
width: 100%;
background: #fff;
border-radius: 40rpx;
overflow: hidden;
margin-bottom: 40rpx;
.card-header {
height: 360rpx;
background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
.header-decor {
position: absolute;
top: 20rpx;
font-size: 24rpx;
opacity: 0.6;
&.left { left: 30rpx; }
&.right { right: 30rpx; }
}
.header-label {
font-size: 24rpx;
margin-bottom: 16rpx;
opacity: 0.9;
letter-spacing: 2rpx;
}
.score-wrap {
display: flex;
align-items: baseline;
line-height: 1;
margin-bottom: 16rpx;
.score {
font-size: 120rpx;
font-weight: bold;
text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.percent {
font-size: 40rpx;
margin-left: 4rpx;
font-weight: 500;
}
}
.lucky-word {
font-size: 48rpx;
font-weight: bold;
letter-spacing: 4rpx;
text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
margin-bottom: 32rpx;
}
.tag-year {
background: rgba(0,0,0,0.15);
padding: 8rpx 24rpx;
border-radius: 30rpx;
font-size: 20rpx;
letter-spacing: 2rpx;
}
}
.card-body {
padding: 40rpx 32rpx;
.yi-ji-grid {
display: flex;
gap: 24rpx;
margin-bottom: 32rpx;
.grid-item {
flex: 1;
background: #fbfbfb;
border-radius: 20rpx;
padding: 24rpx;
border: 2rpx solid #f5f5f5;
.item-title {
display: flex;
align-items: center;
margin-bottom: 12rpx;
text {
font-size: 24rpx;
font-weight: bold;
color: #333;
margin-left: 8rpx;
}
}
.item-content {
font-size: 22rpx;
color: #666;
line-height: 1.4;
}
}
}
.lucky-elements {
background: #fbfbfb;
border-radius: 20rpx;
padding: 24rpx;
border: 2rpx solid #f5f5f5;
margin-bottom: 32rpx;
.elements-title {
display: flex;
align-items: center;
margin-bottom: 20rpx;
text {
font-size: 26rpx;
font-weight: bold;
color: #333;
margin-left: 8rpx;
}
}
.elements-row {
display: flex;
justify-content: space-between;
align-items: center;
.el-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
.label {
font-size: 20rpx;
color: #999;
margin-bottom: 8rpx;
}
.value {
font-size: 26rpx;
color: #333;
font-weight: 600;
&.color-val {
color: #d84315;
}
}
}
.divider {
width: 2rpx;
height: 40rpx;
background: #eee;
}
}
}
.quote-text {
text-align: center;
font-size: 22rpx;
color: #999;
font-style: italic;
}
}
}
.action-buttons {
width: 100%;
margin-bottom: 40rpx;
.share-btn {
background: rgba(255, 255, 255, 0.2);
border: 2rpx solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 30rpx;
font-weight: 600;
height: 96rpx;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
backdrop-filter: blur(10rpx);
&::after { border: none; }
}
.reward-btn {
background: rgba(255, 255, 255, 0.2);
border: 2rpx solid rgba(255, 255, 255, 0.3);
height: 120rpx;
border-radius: 60rpx;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10rpx);
padding: 0;
&::after { border: none; }
.btn-content {
display: flex;
flex-direction: column;
align-items: center;
.main-row {
display: flex;
align-items: center;
margin-bottom: 4rpx;
text {
color: #fff;
font-size: 30rpx;
font-weight: 600;
}
}
.sub-text {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.8);
}
}
}
}
.close-btn {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 2rpx solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
}
}
@keyframes orbit {
0% { transform: rotate(0deg) translateX(40rpx) rotate(0deg); }
100% { transform: rotate(360deg) translateX(40rpx) rotate(-360deg); }
}
@keyframes flash {
0% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
100% { opacity: 0; transform: scale(1.5); }
}
</style>