103 lines
3.7 KiB
Plaintext
103 lines
3.7 KiB
Plaintext
<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"
|
|
/>
|
|
|
|
<!-- 加载失败 -->
|
|
<empty-state
|
|
wx:elif="{{error}}"
|
|
icon="icon-sparkles"
|
|
title="运势加载失败"
|
|
desc="{{errorText}}"
|
|
buttonText="重试"
|
|
bind:action="onRetry"
|
|
/>
|
|
|
|
<!-- 运势内容 -->
|
|
<view wx:elif="{{horoscope}}" 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>
|