107 lines
4.0 KiB
Plaintext
107 lines
4.0 KiB
Plaintext
<view class="checkin-container">
|
|
<!-- 顶部信息区 -->
|
|
<view class="header">
|
|
<view class="month-info">{{currentYear}}年{{currentMonth + 1}}月</view>
|
|
<view class="checkin-stats">
|
|
<view class="stat-item">
|
|
<view class="stat-value">{{continuousCheckinDays}}</view>
|
|
<view class="stat-label">连续签到</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-value">{{totalCheckinDays}}</view>
|
|
<view class="stat-label">本月签到</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 签到按钮区 -->
|
|
<view class="checkin-button-area">
|
|
<button
|
|
class="checkin-btn {{isCheckedToday ? 'checked' : ''}} {{isAnimating ? 'animating' : ''}}"
|
|
bindtap="handleCheckin"
|
|
disabled="{{isCheckedToday || isAnimating}}"
|
|
>
|
|
<view class="btn-content">
|
|
{{isCheckedToday ? '已签到' : '今日签到'}}
|
|
<image
|
|
class="check-icon"
|
|
src="/images/check.png"
|
|
mode="widthFix"
|
|
style="width: 40rpx; height: auto; display: {{isCheckedToday ? 'block' : 'none'}};"
|
|
></image>
|
|
</view>
|
|
</button>
|
|
<view class="checkin-tip">
|
|
{{isCheckedToday ? '今日已完成签到，明天继续哦～' : '点击按钮完成今日签到，领取奖励'}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日历签到区 -->
|
|
<view class="calendar-section">
|
|
<view class="section-title">签到日历</view>
|
|
<!-- 星期头部 -->
|
|
<view class="weekdays">
|
|
<view class="weekday">日</view>
|
|
<view class="weekday">一</view>
|
|
<view class="weekday">二</view>
|
|
<view class="weekday">三</view>
|
|
<view class="weekday">四</view>
|
|
<view class="weekday">五</view>
|
|
<view class="weekday">六</view>
|
|
</view>
|
|
<!-- 日历格子 -->
|
|
<view class="calendar-grid">
|
|
<block wx:for="{{calendarDays}}" wx:key="index">
|
|
<view
|
|
class="calendar-day {{item.type === 'empty' ? 'empty' : ''}} {{item.isChecked ? 'checked' : ''}} {{item.isToday ? 'today' : ''}}"
|
|
>
|
|
<view class="day-number">
|
|
{{item.type !== 'empty' ? item.day : ''}}
|
|
</view>
|
|
<!-- 签到对勾（仅已签到显示） -->
|
|
<image
|
|
class="check-mark"
|
|
src="/images/check.png"
|
|
mode="widthFix"
|
|
style="width: 24rpx; height: auto; display: {{item.isChecked ? 'block' : 'none'}};"
|
|
></image>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 奖励区 -->
|
|
<view class="rewards-section">
|
|
<view class="section-title">签到奖励</view>
|
|
<view class="rewards-list">
|
|
<view class="reward-item {{continuousCheckinDays >= 3 ? 'achieved' : ''}}">
|
|
<view class="reward-days">连续签到3天</view>
|
|
<view class="reward-separator">→</view>
|
|
<view class="reward-content">获得10积分</view>
|
|
<view class="reward-status" wx:if="{{continuousCheckinDays >= 3}}">
|
|
<image src="/images/check.png" mode="widthFix" style="width: 24rpx; height: auto;"></image>
|
|
已达成
|
|
</view>
|
|
</view>
|
|
<view class="reward-item {{continuousCheckinDays >= 7 ? 'achieved' : ''}}">
|
|
<view class="reward-days">连续签到7天</view>
|
|
<view class="reward-separator">→</view>
|
|
<view class="reward-content">获得30积分 + 优惠券</view>
|
|
<view class="reward-status" wx:if="{{continuousCheckinDays >= 7}}">
|
|
<image src="/images/check.png" mode="widthFix" style="width: 24rpx; height: auto;"></image>
|
|
已达成
|
|
</view>
|
|
</view>
|
|
<view class="reward-item {{continuousCheckinDays >= 15 ? 'achieved' : ''}}">
|
|
<view class="reward-days">连续签到15天</view>
|
|
<view class="reward-separator">→</view>
|
|
<view class="reward-content">获得50积分 + 专属权益</view>
|
|
<view class="reward-status" wx:if="{{continuousCheckinDays >= 15}}">
|
|
<image src="/images/check.png" mode="widthFix" style="width: 24rpx; height: auto;"></image>
|
|
已达成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|