first commit
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"empty-state": "/components/empty-state/empty-state"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { request } from '../../utils/request'
|
||||
import { HoroscopeData } from '../../types/models'
|
||||
|
||||
const COLOR_MAP: Record<string, string> = {
|
||||
红色: '#FF3B30',
|
||||
橙色: '#FF9500',
|
||||
黄色: '#FFCC00',
|
||||
绿色: '#34C759',
|
||||
蓝色: '#007AFF',
|
||||
紫色: '#5856D6',
|
||||
粉色: '#FF2D55',
|
||||
白色: '#FFFFFF',
|
||||
黑色: '#000000',
|
||||
灰色: '#8E8E93',
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
horoscope: null as HoroscopeData | null,
|
||||
statDate: '',
|
||||
luckyColorHex: '#007AFF',
|
||||
loading: true,
|
||||
noBirth: false,
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.syncTabBar()
|
||||
if (!this.data.horoscope) this.fetchHoroscope(0)
|
||||
},
|
||||
|
||||
syncTabBar() {
|
||||
const tabBar = (this as any).getTabBar && (this as any).getTabBar()
|
||||
if (tabBar) tabBar.setData({ selected: 2 })
|
||||
},
|
||||
|
||||
fetchHoroscope(retry: number) {
|
||||
this.setData({ loading: true })
|
||||
request<HoroscopeData>({ url: '/horoscope/today', showError: false })
|
||||
.then((res) => {
|
||||
this.setData({
|
||||
horoscope: res,
|
||||
statDate: this.formatStatDate(res.stat_date),
|
||||
luckyColorHex: COLOR_MAP[res.lucky_color] || '#007AFF',
|
||||
loading: false,
|
||||
noBirth: false,
|
||||
})
|
||||
})
|
||||
.catch((e: any) => {
|
||||
const code = e && e.code
|
||||
const details = (e && e.details) || []
|
||||
const noBirth = details.some((d: string) => d.indexOf('生日') >= 0)
|
||||
if (code === 10000 && noBirth) {
|
||||
this.setData({ noBirth: true, loading: false })
|
||||
} else if (code === 90300 && retry < 3) {
|
||||
wx.showToast({ title: '运势生成中，请稍后重试', icon: 'none' })
|
||||
setTimeout(() => this.fetchHoroscope(retry + 1), 4000)
|
||||
} else {
|
||||
this.setData({ loading: false })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
formatStatDate(d: number): string {
|
||||
const s = String(d)
|
||||
return `${s.slice(0, 4)}.${s.slice(4, 6)}.${s.slice(6, 8)}`
|
||||
},
|
||||
|
||||
onGoProfile() {
|
||||
wx.switchTab({ url: '/pages/profile/profile' })
|
||||
},
|
||||
|
||||
onGenerate() {
|
||||
wx.navigateTo({ url: '/pages/ai-recommend/ai-recommend' })
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,92 @@
|
||||
<view class="page page-flex">
|
||||
<navigation-bar title="每日运势" back="{{false}}">
|
||||
<view slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
|
||||
</navigation-bar>
|
||||
|
||||
<scroll-view scroll-y class="scroll-body">
|
||||
<!-- 骨架屏 -->
|
||||
<view wx:if="{{loading}}" class="sk-wrap">
|
||||
<view class="skeleton sk-big"></view>
|
||||
<view class="skeleton sk-mid"></view>
|
||||
<view class="skeleton sk-mid"></view>
|
||||
</view>
|
||||
|
||||
<!-- 未设置生日 -->
|
||||
<empty-state
|
||||
wx:elif="{{noBirth}}"
|
||||
icon="icon-calendar"
|
||||
title="还没有设置生日"
|
||||
desc="设置生日后即可查看你的星座运势"
|
||||
buttonText="去完善资料"
|
||||
bind:action="onGoProfile"
|
||||
/>
|
||||
|
||||
<!-- 运势内容 -->
|
||||
<view wx:else class="content">
|
||||
<!-- 星座大卡 -->
|
||||
<view class="card horo-card">
|
||||
<view class="horo-top">
|
||||
<view class="zodiac">
|
||||
<view class="icon icon-sparkles zodiac-icon"></view>
|
||||
<text class="zodiac-name">{{horoscope.zodiac}}</text>
|
||||
</view>
|
||||
<view class="horo-date">
|
||||
<text>{{statDate}}</text>
|
||||
<text class="nav-action" bindtap="onGoProfile">去设置生日</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="overall">
|
||||
<text class="overall-label">综合运势</text>
|
||||
<view class="overall-score">
|
||||
<text class="score-num">{{horoscope.overall_score}}.0</text>
|
||||
<view class="stars">
|
||||
<view
|
||||
class="icon star {{index < horoscope.overall_score ? 'icon-star-fill on' : 'icon-star'}}"
|
||||
wx:for="{{[1, 2, 3, 4, 5]}}"
|
||||
wx:key="*this"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 三项评分 -->
|
||||
<view class="scores">
|
||||
<view class="score-row">
|
||||
<text class="score-label">爱情运势</text>
|
||||
<view class="score-bar"><view class="score-fill" style="width: {{horoscope.love_score * 20}}%"></view></view>
|
||||
<text class="score-value">{{horoscope.love_score}}/5</text>
|
||||
</view>
|
||||
<view class="score-row">
|
||||
<text class="score-label">工作运势</text>
|
||||
<view class="score-bar"><view class="score-fill" style="width: {{horoscope.career_score * 20}}%"></view></view>
|
||||
<text class="score-value">{{horoscope.career_score}}/5</text>
|
||||
</view>
|
||||
<view class="score-row">
|
||||
<text class="score-label">财富运势</text>
|
||||
<view class="score-bar"><view class="score-fill" style="width: {{horoscope.wealth_score * 20}}%"></view></view>
|
||||
<text class="score-value">{{horoscope.wealth_score}}/5</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="daily-text">
|
||||
<text class="daily-label">今日运势</text>
|
||||
<text class="daily-content">{{horoscope.daily_text}}</text>
|
||||
</view>
|
||||
|
||||
<view class="lucky-row">
|
||||
<view class="lucky-card">
|
||||
<view class="lucky-dot" style="background: {{luckyColorHex}}"></view>
|
||||
<text class="lucky-label">幸运色 · {{horoscope.lucky_color}}</text>
|
||||
</view>
|
||||
<view class="lucky-card">
|
||||
<text class="lucky-number">{{horoscope.lucky_number}}</text>
|
||||
<text class="lucky-label">幸运数字</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="gen-btn btn btn-outline" bindtap="onGenerate">生成今日推荐穿搭</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -0,0 +1,212 @@
|
||||
.page-flex {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.nav-action {
|
||||
font-size: 26rpx;
|
||||
color: #007AFF;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
|
||||
.sk-wrap {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.sk-big {
|
||||
height: 560rpx;
|
||||
border-radius: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.sk-mid {
|
||||
height: 200rpx;
|
||||
border-radius: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.horo-card {
|
||||
background: #E8F2FF;
|
||||
}
|
||||
|
||||
.horo-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.zodiac {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zodiac-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
color: #007AFF;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.zodiac-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.horo-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
font-size: 24rpx;
|
||||
color: #8E8E93;
|
||||
}
|
||||
|
||||
.overall {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.overall-label {
|
||||
font-size: 26rpx;
|
||||
color: #8E8E93;
|
||||
}
|
||||
|
||||
.overall-score {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.score-num {
|
||||
font-size: 120rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
line-height: 1;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.star {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
color: #C7C7CC;
|
||||
}
|
||||
|
||||
.star.on {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.scores {
|
||||
margin-top: 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.score-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
width: 160rpx;
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.score-bar {
|
||||
flex: 1;
|
||||
height: 12rpx;
|
||||
background: #F2F2F7;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.score-fill {
|
||||
height: 100%;
|
||||
background: #007AFF;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
width: 80rpx;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #8E8E93;
|
||||
}
|
||||
|
||||
.daily-text {
|
||||
margin-top: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.daily-label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.daily-content {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #3C3C43;
|
||||
margin-top: 12rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.lucky-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.lucky-card {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lucky-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.lucky-number {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.lucky-label {
|
||||
font-size: 24rpx;
|
||||
color: #8E8E93;
|
||||
}
|
||||
|
||||
.gen-btn {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user