每日运势小程序
This commit is contained in:
63
DailyFortuneGuide/pages/result/index.js
Normal file
63
DailyFortuneGuide/pages/result/index.js
Normal file
@@ -0,0 +1,63 @@
|
||||
const fortuneStore = require("../../store/fortuneStore");
|
||||
const { normalizeFortunePayload } = require("../../utils/fortuneFormatter");
|
||||
const { getPageSafeTop } = require("../../utils/safeArea");
|
||||
|
||||
function showToast(title) {
|
||||
if (typeof tt === "undefined" || !tt.showToast) {
|
||||
console.warn("Toast:", title);
|
||||
return;
|
||||
}
|
||||
tt.showToast({
|
||||
title,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
safeAreaTop: 64,
|
||||
fortuneDate: "",
|
||||
summary: "",
|
||||
narrative: "",
|
||||
dimensions: [],
|
||||
luckyGuide: null,
|
||||
profile: null,
|
||||
overallScore: 0
|
||||
},
|
||||
onLoad() {
|
||||
this.updateSafeAreaPadding();
|
||||
const { currentFortune } = fortuneStore.getState();
|
||||
if (!currentFortune) {
|
||||
showToast("暂无结果,请返回重新生成");
|
||||
setTimeout(() => {
|
||||
if (typeof tt !== "undefined" && tt.navigateBack) {
|
||||
tt.navigateBack();
|
||||
}
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
const normalized = normalizeFortunePayload(currentFortune);
|
||||
if (normalized) {
|
||||
this.setData(normalized);
|
||||
}
|
||||
},
|
||||
updateSafeAreaPadding() {
|
||||
const padding = getPageSafeTop();
|
||||
this.setData({ safeAreaTop: padding });
|
||||
},
|
||||
handleBack() {
|
||||
if (typeof tt !== "undefined" && tt.navigateBack) {
|
||||
tt.navigateBack();
|
||||
return;
|
||||
}
|
||||
if (typeof tt !== "undefined" && tt.redirectTo) {
|
||||
tt.redirectTo({ url: "/pages/home/index" });
|
||||
}
|
||||
},
|
||||
handleGoHistory() {
|
||||
if (typeof tt !== "undefined" && tt.navigateTo) {
|
||||
tt.navigateTo({ url: "/pages/history/index" });
|
||||
}
|
||||
}
|
||||
});
|
||||
3
DailyFortuneGuide/pages/result/index.json
Normal file
3
DailyFortuneGuide/pages/result/index.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
122
DailyFortuneGuide/pages/result/index.ttml
Normal file
122
DailyFortuneGuide/pages/result/index.ttml
Normal file
@@ -0,0 +1,122 @@
|
||||
<view class="page">
|
||||
<view class="glow-bg"></view>
|
||||
<scroll-view class="content" scroll-y="true" style="padding-top: {{safeAreaTop}}px;">
|
||||
<view class="summary-card">
|
||||
<view class="summary-header">
|
||||
<view>
|
||||
<text class="summary-title">今日整体指数</text>
|
||||
<text class="summary-date">{{fortuneDate || '今日'}}</text>
|
||||
</view>
|
||||
<text class="summary-score">{{overallScore}}</text>
|
||||
</view>
|
||||
<text class="summary-text" tt:if="{{summary}}">{{summary}}</text>
|
||||
</view>
|
||||
|
||||
<view class="lucky-card" tt:if="{{luckyGuide}}">
|
||||
<view class="card-title">
|
||||
<text>吉祥元素</text>
|
||||
<text class="element-tag">{{luckyGuide.element}}</text>
|
||||
</view>
|
||||
<view class="guide-row" tt:if="{{luckyGuide.colorText}}">
|
||||
<text class="guide-label">幸运色</text>
|
||||
<text class="guide-value">{{luckyGuide.colorText}}</text>
|
||||
</view>
|
||||
<view class="guide-row" tt:if="{{luckyGuide.directionText}}">
|
||||
<text class="guide-label">顺势方位</text>
|
||||
<text class="guide-value">{{luckyGuide.directionText}}</text>
|
||||
</view>
|
||||
<view class="guide-row" tt:if="{{luckyGuide.propsText}}">
|
||||
<text class="guide-label">随身物件</text>
|
||||
<text class="guide-value">{{luckyGuide.propsText}}</text>
|
||||
</view>
|
||||
<view class="guide-row" tt:if="{{luckyGuide.activitiesText}}">
|
||||
<text class="guide-label">行动建议</text>
|
||||
<text class="guide-value">{{luckyGuide.activitiesText}}</text>
|
||||
</view>
|
||||
<view class="time-slots" tt:if="{{luckyGuide.bestTimeSlots.length}}">
|
||||
<block tt:for="{{luckyGuide.bestTimeSlots}}" tt:key="label">
|
||||
<view class="time-slot">
|
||||
<text class="time-label">{{item.label}}</text>
|
||||
<text class="time-period">{{item.period}}</text>
|
||||
<text class="time-reason">{{item.reason}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="dimension-card" tt:if="{{dimensions.length}}">
|
||||
<view class="card-title">
|
||||
<text>六维运势</text>
|
||||
<text class="card-subtitle">结合趋势安排节奏</text>
|
||||
</view>
|
||||
<view class="dimension-grid">
|
||||
<block tt:for="{{dimensions}}" tt:key="key">
|
||||
<view class="dimension-item">
|
||||
<view class="dimension-header">
|
||||
<text class="dimension-icon">{{item.icon}}</text>
|
||||
<view>
|
||||
<text class="dimension-title">{{item.title}}</text>
|
||||
<text class="dimension-trend">{{item.trendText}}</text>
|
||||
</view>
|
||||
<text class="dimension-score">{{item.score}}</text>
|
||||
</view>
|
||||
<text class="dimension-insight">{{item.insight}}</text>
|
||||
<text class="dimension-suggestion">{{item.suggestion}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-card" tt:if="{{profile}}">
|
||||
<view class="card-title">
|
||||
<text>命盘摘要</text>
|
||||
<text class="card-subtitle">
|
||||
{{(profile.birthProvince ? profile.birthProvince + ' · ' : '') + profile.birthCity}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="profile-row">
|
||||
<text class="profile-label">出生信息</text>
|
||||
<text class="profile-value">{{profile.birthDateTime}}</text>
|
||||
</view>
|
||||
<view class="pillars">
|
||||
<block tt:for="{{profile.birthPillars}}" tt:key="label">
|
||||
<view class="pillar">
|
||||
<text class="pillar-label">{{item.label}}</text>
|
||||
<text class="pillar-value">{{item.value}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="pillars today" tt:if="{{profile.todayPillars.length}}">
|
||||
<block tt:for="{{profile.todayPillars}}" tt:key="label">
|
||||
<view class="pillar">
|
||||
<text class="pillar-label">{{item.label}}</text>
|
||||
<text class="pillar-value">{{item.value}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="elements" tt:if="{{profile.distribution.length}}">
|
||||
<block tt:for="{{profile.distribution}}" tt:key="element">
|
||||
<view class="element-bar">
|
||||
<text class="element-label">{{item.element}}</text>
|
||||
<view class="bar-track">
|
||||
<view class="bar-fill" style="width: {{item.width}};"></view>
|
||||
</view>
|
||||
<text class="element-percent">{{item.percent}}%</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="narrative-card" tt:if="{{narrative}}">
|
||||
<view class="card-title">
|
||||
<text>AI 深度解读</text>
|
||||
</view>
|
||||
<text class="narrative-text">{{narrative}}</text>
|
||||
</view>
|
||||
|
||||
<view class="actions">
|
||||
<button class="primary" bindtap="handleGoHistory">查看历史记录</button>
|
||||
<button class="secondary" bindtap="handleBack">返回上一页</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
284
DailyFortuneGuide/pages/result/index.ttss
Normal file
284
DailyFortuneGuide/pages/result/index.ttss
Normal file
@@ -0,0 +1,284 @@
|
||||
.page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.glow-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(120% 120% at 50% 0%, rgba(255, 106, 193, 0.2), transparent 70%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.lucky-card,
|
||||
.dimension-card,
|
||||
.profile-card,
|
||||
.narrative-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 28rpx;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.summary-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.summary-date {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.summary-score {
|
||||
font-size: 64rpx;
|
||||
font-weight: 700;
|
||||
color: #ffb85c;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
margin-top: 24rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 44rpx;
|
||||
color: #fff7e3;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #fff7e3;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.element-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 184, 92, 0.15);
|
||||
color: #ffb85c;
|
||||
}
|
||||
|
||||
.guide-row {
|
||||
display: flex;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.guide-label {
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.guide-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #fff7e3;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.time-slots {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
padding: 20rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 26rpx;
|
||||
color: #ffead1;
|
||||
}
|
||||
|
||||
.time-period {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.time-reason {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.dimension-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.dimension-item {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.dimension-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.dimension-icon {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.dimension-title {
|
||||
font-size: 28rpx;
|
||||
color: #fff7e3;
|
||||
}
|
||||
|
||||
.dimension-trend {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.dimension-score {
|
||||
margin-left: auto;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #ffb85c;
|
||||
}
|
||||
|
||||
.dimension-insight {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.dimension-suggestion {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.profile-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.profile-label {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.profile-value {
|
||||
font-size: 26rpx;
|
||||
color: #fff7e3;
|
||||
}
|
||||
|
||||
.pillars {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.pillars.today {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.pillar {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pillar-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.pillar-value {
|
||||
font-size: 28rpx;
|
||||
color: #fff7e3;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.elements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.element-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.element-label {
|
||||
width: 60rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.bar-track {
|
||||
flex: 1;
|
||||
height: 14rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(90deg, #ffb85c, #ff6ac1);
|
||||
}
|
||||
|
||||
.element-percent {
|
||||
width: 80rpx;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.narrative-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin: 40rpx 0 80rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user