Initial Commit

pages/index/index.js

@@ -0,0 +1,165 @@
+// index.js
+const storage = require('../../utils/storage')
+const dateUtils = require('../../utils/date')
+
+Page({
+  data: {
+    persons: [],
+    originalPersons: [], // 原始数据备份
+    searchKeyword: '',
+    currentFilter: 'all'
+  },
+
+  onLoad() {
+    this.loadPersons()
+  },
+
+  onShow() {
+    // 每次显示页面时刷新数据
+    this.loadPersons()
+  },
+
+  /**
+   * 加载人员列表
+   */
+  loadPersons() {
+    const persons = storage.getPersons()
+    const anniversaries = storage.getAnniversaries()
+    
+    // 为每个人员添加纪念日信息
+    const personsWithAnniversaries = persons.map(person => {
+      const personAnniversaries = anniversaries.filter(a => a.personId === person.id)
+      
+      // 找到最近的纪念日
+      let nextAnniversary = null
+      if (personAnniversaries.length > 0) {
+        const today = new Date()
+        const upcoming = personAnniversaries
+          .map(a => {
+            // 如果是农历，需要特殊处理
+            const date = new Date(a.solarYear, a.solarMonth - 1, a.solarDay)
+            return {
+              ...a,
+              date,
+              daysUntil: dateUtils.getDaysUntil(date)
+            }
+          })
+          .filter(a => a.daysUntil >= 0)
+          .sort((a, b) => a.daysUntil - b.daysUntil)
+        
+        if (upcoming.length > 0) {
+          const next = upcoming[0]
+          nextAnniversary = {
+            type: next.type,
+            dateText: dateUtils.formatDate(next.date, 'MM月DD日'),
+            daysUntil: next.daysUntil,
+            daysUntilText: this.formatDaysUntil(next.daysUntil)
+          }
+        }
+      }
+
+      return {
+        ...person,
+        anniversaryCount: personAnniversaries.length,
+        nextAnniversary
+      }
+    })
+
+    // 按最近的纪念日排序
+    const sorted = personsWithAnniversaries.sort((a, b) => {
+      if (!a.nextAnniversary && !b.nextAnniversary) return 0
+      if (!a.nextAnniversary) return 1
+      if (!b.nextAnniversary) return -1
+      return a.nextAnniversary.daysUntil - b.nextAnniversary.daysUntil
+    })
+
+    this.setData({
+      persons: sorted,
+      originalPersons: sorted
+    })
+  },
+
+  /**
+   * 格式化剩余天数
+   */
+  formatDaysUntil(days) {
+    if (days === 0) return '今天'
+    if (days === 1) return '明天'
+    if (days < 7) return `${days}天后`
+    if (days < 30) return `还有${Math.floor(days / 7)}周`
+    return `还有${Math.floor(days / 30)}个月`
+  },
+
+  /**
+   * 搜索输入
+   */
+  onSearchInput(e) {
+    const keyword = e.detail.value
+    this.setData({ searchKeyword: keyword })
+    this.filterPersons()
+  },
+
+  /**
+   * 筛选切换
+   */
+  onFilterTap(e) {
+    const filter = e.currentTarget.dataset.filter
+    this.setData({ currentFilter: filter })
+    this.filterPersons()
+  },
+
+  /**
+   * 筛选人员
+   */
+  filterPersons() {
+    const { originalPersons, searchKeyword, currentFilter } = this.data
+    
+    let filtered = [...originalPersons]
+
+    // 关键词搜索
+    if (searchKeyword) {
+      filtered = filtered.filter(p => 
+        p.name.includes(searchKeyword) || 
+        (p.nickname && p.nickname.includes(searchKeyword))
+      )
+    }
+
+    // 类型筛选（暂时保留，后续可以实现更精确的筛选）
+    // if (currentFilter !== 'all') {
+    //   // 可以实现更精确的筛选逻辑
+    // }
+
+    this.setData({ persons: filtered })
+  },
+
+  /**
+   * 点击人员
+   */
+  onPersonTap(e) {
+    const id = e.currentTarget.dataset.id
+    wx.navigateTo({
+      url: `/pages/person-detail/person-detail?id=${id}`
+    })
+  },
+
+  /**
+   * 点击添加按钮
+   */
+  onAddTap() {
+    wx.showActionSheet({
+      itemList: ['添加人员', '添加纪念日'],
+      success: (res) => {
+        if (res.tapIndex === 0) {
+          wx.navigateTo({
+            url: '/pages/add-person/add-person'
+          })
+        } else if (res.tapIndex === 1) {
+          wx.navigateTo({
+            url: '/pages/add-anniversary/add-anniversary'
+          })
+        }
+      }
+    })
+  }
+})
+

pages/index/index.wxml

@@ -0,0 +1,56 @@
+<!--index.wxml-->
+<view class="container">
+  <!-- 搜索栏 -->
+  <view class="search-bar">
+    <input class="search-input" placeholder="搜索姓名" value="{{searchKeyword}}" bindinput="onSearchInput" />
+  </view>
+
+  <!-- 筛选栏 -->
+  <view class="filter-bar">
+    <text class="filter-label">筛选：</text>
+    <scroll-view class="filter-scroll" scroll-x>
+      <view class="filter-item {{currentFilter === 'all' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="all">全部</view>
+      <view class="filter-item {{currentFilter === 'birthday' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="birthday">生日</view>
+      <view class="filter-item {{currentFilter === 'anniversary' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="anniversary">纪念日</view>
+      <view class="filter-item {{currentFilter === 'upcoming' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="upcoming">即将到来</view>
+    </scroll-view>
+  </view>
+
+  <!-- 人员列表 -->
+  <scroll-view class="person-list" scroll-y>
+    <view wx:if="{{persons.length === 0}}" class="empty-state">
+      <text class="icon">📅</text>
+      <text class="text">还没有添加任何人</text>
+      <text class="hint">点击右下角 + 添加第一个</text>
+    </view>
+
+    <view wx:for="{{persons}}" wx:key="id" class="person-card" bindtap="onPersonTap" data-id="{{item.id}}">
+      <view class="person-header">
+        <image class="avatar" src="{{item.avatar || '/images/default-avatar.png'}}" mode="aspectFill" />
+        <view class="person-info">
+          <text class="person-name">{{item.name}}</text>
+          <text wx:if="{{item.nickname}}" class="person-nickname">{{item.nickname}}</text>
+        </view>
+        <view class="person-count">
+          <text wx:if="{{item.anniversaryCount}}" class="count-text">{{item.anniversaryCount}}</text>
+          <text class="count-label">个纪念日</text>
+        </view>
+      </view>
+      
+      <!-- 最近的纪念日 -->
+      <view wx:if="{{item.nextAnniversary}}" class="next-anniversary">
+        <text class="next-label">📌 </text>
+        <text class="next-text">{{item.nextAnniversary.type}}: {{item.nextAnniversary.dateText}}</text>
+        <text wx:if="{{item.nextAnniversary.daysUntil}}" class="days-text {{item.nextAnniversary.daysUntil <= 7 ? 'urgent' : ''}}">
+          {{item.nextAnniversary.daysUntilText}}
+        </text>
+      </view>
+    </view>
+  </scroll-view>
+
+  <!-- 浮动添加按钮 -->
+  <view class="fab" bindtap="onAddTap">
+    <text>+</text>
+  </view>
+</view>
+

pages/index/index.wxss

@@ -0,0 +1,193 @@
+/**index.wxss**/
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+/* 搜索栏 */
+.search-bar {
+  padding: 24rpx;
+  background-color: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-input {
+  background-color: #f5f5f5;
+  border-radius: 40rpx;
+  padding: 24rpx 32rpx;
+  font-size: 28rpx;
+}
+
+/* 筛选栏 */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  background-color: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.filter-label {
+  font-size: 26rpx;
+  color: #666;
+  margin-right: 16rpx;
+  white-space: nowrap;
+}
+
+.filter-scroll {
+  white-space: nowrap;
+}
+
+.filter-item {
+  display: inline-block;
+  padding: 12rpx 32rpx;
+  margin-right: 16rpx;
+  border-radius: 40rpx;
+  font-size: 26rpx;
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.filter-item.active {
+  background-color: #07c160;
+  color: #fff;
+}
+
+/* 人员列表 */
+.person-list {
+  height: calc(100vh - 200rpx);
+  padding: 24rpx;
+}
+
+.person-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+
+.person-header {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  margin-right: 24rpx;
+  background-color: #f0f0f0;
+}
+
+.person-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.person-name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.person-nickname {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.person-count {
+  text-align: right;
+}
+
+.count-text {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #07c160;
+  display: block;
+}
+
+.count-label {
+  font-size: 22rpx;
+  color: #999;
+}
+
+/* 最近的纪念日 */
+.next-anniversary {
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #666;
+}
+
+.next-label {
+  margin-right: 8rpx;
+}
+
+.next-text {
+  flex: 1;
+}
+
+.days-text {
+  color: #07c160;
+  font-weight: 500;
+}
+
+.days-text.urgent {
+  color: #ff5722;
+  font-weight: 600;
+}
+
+/* 空状态 */
+.empty-state {
+  padding: 160rpx 40rpx;
+  text-align: center;
+}
+
+.empty-state .icon {
+  font-size: 120rpx;
+  display: block;
+  margin-bottom: 32rpx;
+}
+
+.empty-state .text {
+  font-size: 28rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 16rpx;
+}
+
+.empty-state .hint {
+  font-size: 24rpx;
+  color: #bbb;
+  display: block;
+}
+
+/* 浮动按钮 */
+.fab {
+  position: fixed;
+  bottom: 120rpx;
+  right: 40rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 60rpx;
+  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+  z-index: 100;
+  transition: all 0.3s;
+}
+
+.fab:active {
+  transform: scale(0.95);
+}
+