159 lines
5.7 KiB
Plaintext
159 lines
5.7 KiB
Plaintext
<view class="page page-flex">
|
|
<navigation-bar title="每日运势" back="{{false}}" scrolled="{{navScrolled}}">
|
|
<view wx:if="{{guest}}" slot="right" class="nav-action" bindtap="onGuestLogin">登录</view>
|
|
<view wx:else slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
|
|
</navigation-bar>
|
|
|
|
<scroll-view scroll-y class="scroll-body pb-tab" bindscroll="onNavScroll">
|
|
<!-- 大标题页头 -->
|
|
<view class="head">
|
|
<view class="eyebrow">Daily Fortune</view>
|
|
<view class="display">每日运势</view>
|
|
</view>
|
|
|
|
<!-- 游客态提示条：未登录也可先浏览，登录由用户自行选择 -->
|
|
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
|
|
<view class="icon icon-lock"></view>
|
|
<text class="gb-t">浏览模式 · 以下为示例运势</text>
|
|
<text class="gb-a">登录</text>
|
|
<view class="icon icon-chevron-right"></view>
|
|
</view>
|
|
|
|
<!-- 骨架屏 -->
|
|
<view wx:if="{{loading}}" class="hs-skel">
|
|
<view class="sk sk-ln" style="width: 38%; height: 28rpx;"></view>
|
|
<view class="sk hs-skel-num"></view>
|
|
<view class="sk sk-ln" style="width: 100%;"></view>
|
|
<view class="sk sk-ln" style="width: 100%;"></view>
|
|
<view class="sk sk-ln" style="width: 92%;"></view>
|
|
<view class="sk sk-ln" style="width: 84%;"></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"
|
|
/>
|
|
|
|
<!-- 运势内容：杂志内页排版 -->
|
|
<block wx:elif="{{horoscope}}">
|
|
<view class="hs-hero">
|
|
<view class="hs-zodiac">
|
|
<view class="icon icon-sparkles"></view>
|
|
<text class="t-xl">{{horoscope.zodiac}}</text>
|
|
<text wx:if="{{guest}}" class="pill">示例</text>
|
|
</view>
|
|
<text class="hs-date num">{{statDate}}</text>
|
|
</view>
|
|
|
|
<view class="hs-score">
|
|
<view class="hs-score-main">
|
|
<view class="eyebrow">综合运势</view>
|
|
<view class="hs-num num">{{horoscope.overall_score}}.0</view>
|
|
</view>
|
|
<view class="hs-stars">
|
|
<view
|
|
wx:for="{{[1, 2, 3, 4, 5]}}"
|
|
wx:key="*this"
|
|
class="icon {{index < horoscope.overall_score ? 'icon-star-fill' : 'icon-star'}}"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 三项评分：横向发丝线刻度尺 -->
|
|
<view class="hs-scales">
|
|
<view class="hs-scale">
|
|
<view class="hs-st">
|
|
<text class="k">爱情运势</text>
|
|
<text class="v num">{{horoscope.love_score}}/5</text>
|
|
</view>
|
|
<view class="scale">
|
|
<view class="scale-ticks">
|
|
<view class="tk" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this"></view>
|
|
</view>
|
|
<view class="scale-line"></view>
|
|
<view class="scale-fill" style="width: {{horoscope.love_score * 20}}%;"></view>
|
|
<view class="scale-pip" style="left: {{horoscope.love_score * 20}}%;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hs-scale">
|
|
<view class="hs-st">
|
|
<text class="k">工作运势</text>
|
|
<text class="v num">{{horoscope.career_score}}/5</text>
|
|
</view>
|
|
<view class="scale">
|
|
<view class="scale-ticks">
|
|
<view class="tk" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this"></view>
|
|
</view>
|
|
<view class="scale-line"></view>
|
|
<view class="scale-fill" style="width: {{horoscope.career_score * 20}}%;"></view>
|
|
<view class="scale-pip" style="left: {{horoscope.career_score * 20}}%;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hs-scale">
|
|
<view class="hs-st">
|
|
<text class="k">财富运势</text>
|
|
<text class="v num">{{horoscope.wealth_score}}/5</text>
|
|
</view>
|
|
<view class="scale">
|
|
<view class="scale-ticks">
|
|
<view class="tk" wx:for="{{[1, 2, 3, 4]}}" wx:key="*this"></view>
|
|
</view>
|
|
<view class="scale-line"></view>
|
|
<view class="scale-fill" style="width: {{horoscope.wealth_score * 20}}%;"></view>
|
|
<view class="scale-pip" style="left: {{horoscope.wealth_score * 20}}%;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 今日运势：衬线引文排版 -->
|
|
<view class="hs-quote">
|
|
<view class="eyebrow">Today</view>
|
|
<view class="t-quote">{{horoscope.daily_text}}</view>
|
|
</view>
|
|
|
|
<!-- 幸运色 / 幸运数字：两栏发丝线小格 -->
|
|
<view class="hs-lucky">
|
|
<view class="hs-lucky-cell">
|
|
<view class="lk">幸运色</view>
|
|
<view class="lv">
|
|
<view class="dot" style="background: {{luckyColorHex}};"></view>
|
|
<text>{{horoscope.lucky_color}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="hs-lucky-cell">
|
|
<view class="lk">幸运数字</view>
|
|
<view class="lv num">{{horoscope.lucky_number}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hs-foot">
|
|
<view class="btn btn--ghost btn--block" bindtap="onGenerate">生成今日推荐穿搭</view>
|
|
</view>
|
|
|
|
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
|
|
<text>登录并设置生日，查看你的专属运势</text>
|
|
<text class="gf-a">去登录</text>
|
|
</view>
|
|
</block>
|
|
|
|
<view class="gap-64"></view>
|
|
</scroll-view>
|
|
</view>
|