yuming
114 lines
4.6 KiB
Plaintext
114 lines
4.6 KiB
Plaintext
<!--index.wxml-->
|
|
<view class="page">
|
|
|
|
<!-- 顶部 Header：纸感编辑风，排版替代色块 -->
|
|
<view class="header">
|
|
<text class="header-title">生日提醒</text>
|
|
<text class="header-date">{{todayText}}</text>
|
|
<view class="header-rule"></view>
|
|
<view class="stats-row">
|
|
<view class="stat-item">
|
|
<text class="stat-num">{{totalCount}}</text>
|
|
<text class="stat-label">位好友</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-num {{upcomingCount > 0 ? 'stat-num-urgent' : ''}}">{{upcomingCount}}</text>
|
|
<text class="stat-label">即将到来</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 额度风险提示卡片：谁的提醒可能发不出去，同时是补额度的主入口 -->
|
|
<view wx:if="{{atRiskText}}" class="quota-warn" bindtap="onTopUp">
|
|
<text class="quota-warn-icon">⚠️</text>
|
|
<text class="quota-warn-text">{{atRiskText}}的生日提醒可能发不出去，点这里补上</text>
|
|
</view>
|
|
|
|
<!-- 搜索栏 -->
|
|
<view class="search-wrap">
|
|
<view class="search-box">
|
|
<text class="search-icon">🔍</text>
|
|
<input
|
|
class="search-input"
|
|
placeholder="搜索姓名或昵称"
|
|
placeholder-class="search-placeholder"
|
|
value="{{searchKeyword}}"
|
|
bindinput="onSearchInput"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选栏 -->
|
|
<scroll-view class="filter-scroll" scroll-x enable-flex>
|
|
<view class="filter-bar">
|
|
<view class="filter-tab {{currentFilter === 'all' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="all">全部</view>
|
|
<view class="filter-tab {{currentFilter === 'birthday' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="birthday">🎂 生日</view>
|
|
<view class="filter-tab {{currentFilter === 'anniversary' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="anniversary">💍 纪念日</view>
|
|
<view class="filter-tab {{currentFilter === 'upcoming' ? 'tab-active' : ''}}" bindtap="onFilterTap" data-filter="upcoming">⏰ 即将到来</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 人员列表 -->
|
|
<scroll-view class="list" scroll-y>
|
|
|
|
<!-- 空状态 -->
|
|
<view wx:if="{{persons.length === 0}}" class="empty">
|
|
<text class="empty-icon">🌟</text>
|
|
<text class="empty-title">还没有添加任何人</text>
|
|
<text class="empty-hint">点击右下角 + 开始添加</text>
|
|
</view>
|
|
|
|
<!-- 人员卡片 -->
|
|
<view
|
|
wx:for="{{persons}}"
|
|
wx:key="id"
|
|
class="card {{item.nextAnniversary && item.nextAnniversary.daysUntil === 0 ? 'card-today' : item.nextAnniversary && item.nextAnniversary.daysUntil <= 7 ? 'card-urgent' : ''}}"
|
|
bindtap="onPersonTap"
|
|
data-id="{{item.id}}"
|
|
>
|
|
<!-- 左侧头像 -->
|
|
<view class="avatar-wrap">
|
|
<image wx:if="{{item.avatar}}" class="avatar-img" src="{{item.avatar}}" mode="aspectFill" />
|
|
<view wx:else class="avatar-placeholder">
|
|
<text class="avatar-initial">{{item.name[0]}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧内容 -->
|
|
<view class="card-body">
|
|
<view class="card-row-top">
|
|
<view class="name-group">
|
|
<text class="card-name">{{item.name}}</text>
|
|
<text wx:if="{{item.nickname}}" class="card-nickname">{{item.nickname}}</text>
|
|
</view>
|
|
<view
|
|
wx:if="{{item.nextAnniversary}}"
|
|
class="badge {{item.nextAnniversary.daysUntil === 0 ? 'badge-today' : item.nextAnniversary.daysUntil <= 3 ? 'badge-hot' : item.nextAnniversary.daysUntil <= 7 ? 'badge-soon' : item.nextAnniversary.daysUntil <= 30 ? 'badge-month' : 'badge-normal'}}"
|
|
>
|
|
<text class="badge-text">{{item.nextAnniversary.daysUntilText}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{item.nextAnniversary}}" class="card-row-ann">
|
|
<text class="ann-icon">
|
|
{{item.nextAnniversary.type === 'birthday' || item.nextAnniversary.type === 'lunar_birthday' ? '🎂' : item.nextAnniversary.type === 'wedding' ? '💍' : item.nextAnniversary.type === 'engagement' ? '💕' : '📅'}}
|
|
</text>
|
|
<text class="ann-info">{{item.nextAnniversary.typeName}} · {{item.nextAnniversary.dateText}}</text>
|
|
<text wx:if="{{item.anniversaryCount > 1}}" class="ann-more">+{{item.anniversaryCount - 1}}</text>
|
|
</view>
|
|
<view wx:else class="card-row-ann no-ann">
|
|
<text class="ann-info muted">暂无纪念日</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list-bottom"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 浮动添加按钮 -->
|
|
<view class="fab" bindtap="onAddTap">
|
|
<text class="fab-icon">+</text>
|
|
</view>
|
|
|
|
</view>
|