- 新增 server/：Node + Express + SQLite + node-cron 实现登录、纪念日 CRUD 和定时订阅消息推送 - 新增 .gitea/workflows/deploy.yml：推送即触发群晖 Docker 部署，监听 15002 - utils/api.js：自动按 envVersion 切换本地/线上 BASE_URL - app.js 与 add-anniversary.js 移除 wx.cloud 调用，改走自建后端 - cloudfunctions/ 暂保留以便回滚 - 一并提交此前未入库的首页 / 设置页 / 日历 / 万年历等改造 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yuming
@@ -1,6 +1,7 @@
|
||||
// add-anniversary.js
|
||||
const storage = require('../../utils/storage')
|
||||
const dateUtils = require('../../utils/date')
|
||||
const api = require('../../utils/api')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
@@ -188,11 +189,32 @@ Page({
|
||||
*/
|
||||
onRemindDaysChange(e) {
|
||||
const index = parseInt(e.detail.value)
|
||||
const days = [3, 7, 14, 30, 7][index]
|
||||
this.setData({
|
||||
remindDaysIndex: index,
|
||||
'formData.remindDays': days
|
||||
})
|
||||
this.setData({ remindDaysIndex: index })
|
||||
if (index === 4) {
|
||||
// 自定义天数
|
||||
wx.showModal({
|
||||
title: '自定义提前天数',
|
||||
editable: true,
|
||||
placeholderText: '请输入天数（1-365）',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const days = parseInt(res.content)
|
||||
if (!days || days < 1 || days > 365) {
|
||||
wx.showToast({ title: '请输入1-365之间的天数', icon: 'none' })
|
||||
this.setData({ remindDaysIndex: 1, 'formData.remindDays': 7 })
|
||||
return
|
||||
}
|
||||
this.setData({ 'formData.remindDays': days })
|
||||
} else {
|
||||
// 取消则回到默认7天
|
||||
this.setData({ remindDaysIndex: 1, 'formData.remindDays': 7 })
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const days = [3, 7, 14, 30][index]
|
||||
this.setData({ 'formData.remindDays': days })
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -214,8 +236,8 @@ Page({
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
onSubmit() {
|
||||
const { formData, personId, anniversaryId } = this.data
|
||||
async onSubmit() {
|
||||
const { formData, personId, anniversaryId, personList } = this.data
|
||||
|
||||
// 验证关联人员
|
||||
if (!personId) {
|
||||
@@ -235,14 +257,36 @@ Page({
|
||||
return
|
||||
}
|
||||
|
||||
// 如果开启了提醒，请求订阅消息授权
|
||||
if (formData.remindEnabled) {
|
||||
try {
|
||||
await this.requestSubscribe()
|
||||
} catch (err) {
|
||||
console.log('用户拒绝订阅消息')
|
||||
// 继续保存，即使用户拒绝订阅
|
||||
}
|
||||
}
|
||||
|
||||
// 获取人员名称
|
||||
const person = personList.find(p => p.id === personId)
|
||||
const personName = person ? person.name : ''
|
||||
|
||||
if (anniversaryId) {
|
||||
// 编辑模式
|
||||
const success = storage.updateAnniversary(anniversaryId, {
|
||||
personId,
|
||||
personName,
|
||||
...formData
|
||||
})
|
||||
|
||||
if (success) {
|
||||
// 同步到云端
|
||||
this.syncToCloud(anniversaryId, {
|
||||
personId,
|
||||
personName,
|
||||
...formData
|
||||
}, 'update')
|
||||
|
||||
wx.showToast({ title: '保存成功', icon: 'success' })
|
||||
setTimeout(() => wx.navigateBack(), 1500)
|
||||
}
|
||||
@@ -250,14 +294,55 @@ Page({
|
||||
// 新增模式
|
||||
const newAnniversary = storage.addAnniversary({
|
||||
personId,
|
||||
personName,
|
||||
...formData
|
||||
})
|
||||
|
||||
if (newAnniversary) {
|
||||
// 同步到云端
|
||||
this.syncToCloud(newAnniversary.id, newAnniversary, 'add')
|
||||
|
||||
wx.showToast({ title: '添加成功', icon: 'success' })
|
||||
setTimeout(() => wx.navigateBack(), 1500)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 请求订阅消息授权
|
||||
*/
|
||||
requestSubscribe() {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.requestSubscribeMessage({
|
||||
tmplIds: ['6J7Stt-lu7DKU6jblJ0nZGq_D81z5glnksf7qWfy5Yw'],
|
||||
success: (res) => {
|
||||
console.log('订阅消息授权结果:', res)
|
||||
resolve(res)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('订阅消息授权失败:', err)
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 同步到自建后端
|
||||
*/
|
||||
async syncToCloud(id, data, action) {
|
||||
try {
|
||||
const openid = wx.getStorageSync('openid')
|
||||
if (!openid) {
|
||||
console.log('未获取到openid，跳过云端同步')
|
||||
return
|
||||
}
|
||||
const res = await api.anniversary(action, { id, ...data })
|
||||
console.log('云端同步成功:', res)
|
||||
} catch (err) {
|
||||
console.error('云端同步失败:', err)
|
||||
// 不影响本地保存
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: 32rpx;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
@@ -15,6 +15,11 @@
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-item:first-child {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -100,36 +105,57 @@
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
min-height: 160rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #f5f5f5;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
|
||||
color: #666;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.btn-cancel:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-submit:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-cancel::after,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**add-person.wxss**/
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
background: linear-gradient(180deg, rgba(102, 126, 234, 0.08) 0%, transparent 30%);
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
@@ -10,16 +10,21 @@
|
||||
}
|
||||
|
||||
.form-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.12);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
@@ -27,6 +32,7 @@
|
||||
.label.required::after {
|
||||
content: ' *';
|
||||
color: #ff5722;
|
||||
-webkit-text-fill-color: #ff5722;
|
||||
}
|
||||
|
||||
/* 头像上传 */
|
||||
@@ -38,7 +44,9 @@
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f0f0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
@@ -46,69 +54,107 @@
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
background-color: #f5f5f5;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px dashed #ddd;
|
||||
border: 4rpx dashed rgba(102, 126, 234, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.avatar-placeholder:active {
|
||||
transform: scale(0.95);
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
|
||||
}
|
||||
|
||||
.avatar-placeholder .icon {
|
||||
font-size: 60rpx;
|
||||
font-size: 64rpx;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.avatar-placeholder .text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
background-color: #fff;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
min-height: 160rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.textarea:focus {
|
||||
background-color: #fff;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 16rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background-color: #f5f5f5;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
|
||||
color: #666;
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.btn-cancel:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-cancel::after {
|
||||
border: none;
|
||||
.btn-submit:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.btn-cancel::after,
|
||||
.btn-submit::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
+37
-75
@@ -1,11 +1,12 @@
|
||||
// calendar.js
|
||||
const storage = require('../../utils/storage')
|
||||
const dateUtils = require('../../utils/date')
|
||||
const { TYPE_NAMES, TYPE_ICONS, IMPORTANCE_COLORS } = require('../../utils/constants')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
currentYear: 2024,
|
||||
currentMonth: 1,
|
||||
currentYear: new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth() + 1,
|
||||
calendarDays: [],
|
||||
monthEvents: []
|
||||
},
|
||||
@@ -20,100 +21,75 @@ Page({
|
||||
this.loadMonthEvents()
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建当月事件索引 { "day": [anniversary, ...] }
|
||||
*/
|
||||
buildEventIndex(anniversaries, year, month) {
|
||||
const index = {}
|
||||
for (const a of anniversaries) {
|
||||
if (a.solarYear === year && a.solarMonth === month) {
|
||||
const key = String(a.solarDay)
|
||||
if (!index[key]) index[key] = []
|
||||
index[key].push(a)
|
||||
}
|
||||
}
|
||||
return index
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染日历
|
||||
*/
|
||||
renderCalendar() {
|
||||
const { currentYear, currentMonth } = this.data
|
||||
const anniversaries = storage.getAnniversaries()
|
||||
|
||||
// 获取本月第一天是星期几
|
||||
|
||||
// 预建事件索引，避免 O(n×m) 过滤
|
||||
const eventIndex = this.buildEventIndex(anniversaries, currentYear, currentMonth)
|
||||
|
||||
const firstDay = new Date(currentYear, currentMonth - 1, 1)
|
||||
const startWeekday = firstDay.getDay()
|
||||
|
||||
// 获取本月天数
|
||||
const daysInMonth = new Date(currentYear, currentMonth, 0).getDate()
|
||||
|
||||
// 获取上个月的天数
|
||||
const prevMonthDays = new Date(currentYear, currentMonth - 1, 0).getDate()
|
||||
|
||||
// 构建日历天数数组
|
||||
|
||||
const calendarDays = []
|
||||
const today = new Date()
|
||||
|
||||
|
||||
// 填充上个月的日期
|
||||
for (let i = startWeekday - 1; i >= 0; i--) {
|
||||
const day = prevMonthDays - i
|
||||
calendarDays.push({
|
||||
day,
|
||||
date: new Date(currentYear, currentMonth - 2, day),
|
||||
isToday: false,
|
||||
isOtherMonth: true,
|
||||
events: [],
|
||||
hasMore: false
|
||||
})
|
||||
calendarDays.push({ day, isToday: false, isOtherMonth: true, events: [], hasMore: false })
|
||||
}
|
||||
|
||||
|
||||
// 填充本月的日期
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = new Date(currentYear, currentMonth - 1, day)
|
||||
const isToday = dateUtils.isToday(date)
|
||||
|
||||
// 查找该日期的纪念日
|
||||
const events = anniversaries
|
||||
.filter(a => this.isAnniversaryOnDate(a, date))
|
||||
.map(a => ({
|
||||
id: a.id,
|
||||
color: this.getEventColor(a)
|
||||
}))
|
||||
.slice(0, 3)
|
||||
|
||||
const allEvents = eventIndex[String(day)] || []
|
||||
const events = allEvents.slice(0, 3).map(a => ({ id: a.id, color: this.getEventColor(a) }))
|
||||
|
||||
calendarDays.push({
|
||||
day,
|
||||
date,
|
||||
isToday,
|
||||
isOtherMonth: false,
|
||||
events,
|
||||
hasMore: events.length > 2,
|
||||
moreCount: anniversaries.filter(a => this.isAnniversaryOnDate(a, date)).length - 2
|
||||
hasMore: allEvents.length > 3,
|
||||
moreCount: allEvents.length - 3
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 填充下个月的日期（补全6行）
|
||||
const remainingDays = 42 - calendarDays.length
|
||||
for (let day = 1; day <= remainingDays; day++) {
|
||||
calendarDays.push({
|
||||
day,
|
||||
date: new Date(currentYear, currentMonth, day),
|
||||
isToday: false,
|
||||
isOtherMonth: true,
|
||||
events: [],
|
||||
hasMore: false
|
||||
})
|
||||
calendarDays.push({ day, isToday: false, isOtherMonth: true, events: [], hasMore: false })
|
||||
}
|
||||
|
||||
this.setData({ calendarDays })
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断纪念日是否在某日期
|
||||
*/
|
||||
isAnniversaryOnDate(anniversary, date) {
|
||||
return anniversary.solarYear === date.getFullYear() &&
|
||||
anniversary.solarMonth === date.getMonth() + 1 &&
|
||||
anniversary.solarDay === date.getDate()
|
||||
this.setData({ calendarDays })
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取事件颜色
|
||||
*/
|
||||
getEventColor(anniversary) {
|
||||
const colors = {
|
||||
high: '#ff5722',
|
||||
medium: '#ff9800',
|
||||
low: '#07c160'
|
||||
}
|
||||
return colors[anniversary.importance] || '#07c160'
|
||||
return IMPORTANCE_COLORS[anniversary.importance] || '#07c160'
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -150,28 +126,14 @@ Page({
|
||||
* 获取类型图标
|
||||
*/
|
||||
getTypeIcon(type) {
|
||||
const icons = {
|
||||
birthday: '🎂',
|
||||
lunar_birthday: '🌙',
|
||||
wedding: '💍',
|
||||
engagement: '💕',
|
||||
other: '📅'
|
||||
}
|
||||
return icons[type] || '📅'
|
||||
return TYPE_ICONS[type] || '📅'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取类型名称
|
||||
*/
|
||||
getTypeName(type) {
|
||||
const names = {
|
||||
birthday: '公历生日',
|
||||
lunar_birthday: '农历生日',
|
||||
wedding: '结婚纪念日',
|
||||
engagement: '订婚纪念日',
|
||||
other: '其他纪念日'
|
||||
}
|
||||
return names[type] || '其他'
|
||||
return TYPE_NAMES[type] || '其他'
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
|
||||
<!-- 星期标题 -->
|
||||
<view class="week-header">
|
||||
<view wx:for="{{['日', '一', '二', '三', '四', '五', '六']}}" wx:key="*this" class="week-title">{{item}}</view>
|
||||
<view wx:for="{{['日', '一', '二', '三', '四', '五', '六']}}" wx:key="*this" class="week-title">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历内容 -->
|
||||
|
||||
+118
-51
@@ -5,43 +5,61 @@
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
background-color: #fff;
|
||||
padding: 32rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 40rpx 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.month-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
font-size: 48rpx;
|
||||
color: #07c160;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
min-width: 240rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.today-btn {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
padding: 14rpx 32rpx;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.today-btn:active {
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.today-btn::after {
|
||||
@@ -49,96 +67,137 @@
|
||||
}
|
||||
|
||||
.week-header {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
background: linear-gradient(to bottom, #fff 0%, #fafafa 100%);
|
||||
padding: 20rpx 24rpx 12rpx 24rpx;
|
||||
gap: 12rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.week-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.week-title text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calendar-content {
|
||||
height: calc(100vh - 200rpx);
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
background-color: #fff;
|
||||
background-color: #f5f5f5;
|
||||
padding: 16rpx 24rpx 16rpx 24rpx;
|
||||
gap: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
min-height: 120rpx;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 8rpx;
|
||||
min-height: 100rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calendar-cell.other-month {
|
||||
background-color: #fafafa;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.calendar-cell.today {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 8rpx 16rpx rgba(102, 126, 234, 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.calendar-cell.today .date-num {
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-num {
|
||||
font-size: 28rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.calendar-cell.other-month .date-num {
|
||||
color: #ccc;
|
||||
color: #d0d0d0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.events {
|
||||
display: flex;
|
||||
gap: 4rpx;
|
||||
gap: 6rpx;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.event-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.calendar-cell.today .event-dot {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.more-text {
|
||||
font-size: 20rpx;
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.calendar-cell.today .more-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 事件列表 */
|
||||
.events-list {
|
||||
padding: 32rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 16rpx;
|
||||
border-left: 6rpx solid #667eea;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 120rpx 40rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
@@ -150,14 +209,17 @@
|
||||
.empty-state .text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
background-color: #fff;
|
||||
background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
border: 2rpx solid rgba(102, 126, 234, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.event-header {
|
||||
@@ -190,26 +252,31 @@
|
||||
}
|
||||
|
||||
.lunar-badge {
|
||||
padding: 4rpx 12rpx;
|
||||
background-color: #e3f2fd;
|
||||
padding: 6rpx 16rpx;
|
||||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||||
color: #1976d2;
|
||||
border-radius: 4rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.15);
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status.urgent {
|
||||
background-color: #fff3f0;
|
||||
background: linear-gradient(135deg, #ffe0db 0%, #ffccbc 100%);
|
||||
color: #ff5722;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 87, 34, 0.15);
|
||||
}
|
||||
|
||||
.status.warning {
|
||||
background-color: #fff8e6;
|
||||
background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
|
||||
color: #ff9800;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
+69
-34
@@ -1,13 +1,17 @@
|
||||
// index.js
|
||||
const storage = require('../../utils/storage')
|
||||
const dateUtils = require('../../utils/date')
|
||||
const { TYPE_NAMES } = require('../../utils/constants')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
persons: [],
|
||||
originalPersons: [], // 原始数据备份
|
||||
originalPersons: [],
|
||||
searchKeyword: '',
|
||||
currentFilter: 'all'
|
||||
currentFilter: 'all',
|
||||
totalCount: 0,
|
||||
upcomingCount: 0,
|
||||
todayText: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
@@ -15,7 +19,6 @@ Page({
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 每次显示页面时刷新数据
|
||||
this.loadPersons()
|
||||
},
|
||||
|
||||
@@ -25,32 +28,24 @@ Page({
|
||||
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)
|
||||
}
|
||||
const { date, daysUntil } = dateUtils.getNextOccurrence(a.solarMonth, a.solarDay)
|
||||
return { ...a, date, daysUntil }
|
||||
})
|
||||
.filter(a => a.daysUntil >= 0)
|
||||
.sort((a, b) => a.daysUntil - b.daysUntil)
|
||||
|
||||
|
||||
if (upcoming.length > 0) {
|
||||
const next = upcoming[0]
|
||||
nextAnniversary = {
|
||||
type: next.type,
|
||||
typeName: this.getTypeName(next.type, next.customTypeName),
|
||||
dateText: dateUtils.formatDate(next.date, 'MM月DD日'),
|
||||
daysUntil: next.daysUntil,
|
||||
daysUntilText: this.formatDaysUntil(next.daysUntil)
|
||||
@@ -58,14 +53,9 @@ Page({
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...person,
|
||||
anniversaryCount: personAnniversaries.length,
|
||||
nextAnniversary
|
||||
}
|
||||
return { ...person, anniversaryCount: personAnniversaries.length, nextAnniversary }
|
||||
})
|
||||
|
||||
// 按最近的纪念日排序
|
||||
const sorted = personsWithAnniversaries.sort((a, b) => {
|
||||
if (!a.nextAnniversary && !b.nextAnniversary) return 0
|
||||
if (!a.nextAnniversary) return 1
|
||||
@@ -73,10 +63,18 @@ Page({
|
||||
return a.nextAnniversary.daysUntil - b.nextAnniversary.daysUntil
|
||||
})
|
||||
|
||||
this.setData({
|
||||
persons: sorted,
|
||||
originalPersons: sorted
|
||||
})
|
||||
const today = new Date()
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const todayText = `${today.getMonth() + 1}月${today.getDate()}日 周${weekdays[today.getDay()]}`
|
||||
const upcomingCount = sorted.filter(p => p.nextAnniversary && p.nextAnniversary.daysUntil <= 7).length
|
||||
|
||||
this.setData({ originalPersons: sorted, totalCount: sorted.length, upcomingCount, todayText })
|
||||
|
||||
if (this.data.currentFilter === 'all' && !this.data.searchKeyword) {
|
||||
this.setData({ persons: sorted })
|
||||
} else {
|
||||
this.filterPersons()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -90,6 +88,14 @@ Page({
|
||||
return `还有${Math.floor(days / 30)}个月`
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取类型名称
|
||||
*/
|
||||
getTypeName(type, customName) {
|
||||
if (type === 'other' && customName) return customName
|
||||
return TYPE_NAMES[type] || '纪念日'
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索输入
|
||||
*/
|
||||
@@ -104,8 +110,9 @@ Page({
|
||||
*/
|
||||
onFilterTap(e) {
|
||||
const filter = e.currentTarget.dataset.filter
|
||||
this.setData({ currentFilter: filter })
|
||||
this.filterPersons()
|
||||
this.setData({ currentFilter: filter }, () => {
|
||||
this.filterPersons()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -113,6 +120,7 @@ Page({
|
||||
*/
|
||||
filterPersons() {
|
||||
const { originalPersons, searchKeyword, currentFilter } = this.data
|
||||
const anniversaries = storage.getAnniversaries()
|
||||
|
||||
let filtered = [...originalPersons]
|
||||
|
||||
@@ -124,12 +132,39 @@ Page({
|
||||
)
|
||||
}
|
||||
|
||||
// 类型筛选（暂时保留，后续可以实现更精确的筛选）
|
||||
// if (currentFilter !== 'all') {
|
||||
// // 可以实现更精确的筛选逻辑
|
||||
// }
|
||||
// 类型筛选
|
||||
if (currentFilter !== 'all') {
|
||||
filtered = filtered.filter(person => {
|
||||
const personAnniversaries = anniversaries.filter(a => a.personId === person.id)
|
||||
|
||||
if (currentFilter === 'birthday') {
|
||||
// 生日筛选：只显示有生日类型的人（公历生日或农历生日）
|
||||
return personAnniversaries.some(a =>
|
||||
a.type === 'birthday' || a.type === 'lunar_birthday'
|
||||
)
|
||||
} else if (currentFilter === 'anniversary') {
|
||||
// 纪念日筛选：只显示有纪念日类型的人（结婚、订婚、其他）
|
||||
return personAnniversaries.some(a =>
|
||||
a.type === 'wedding' || a.type === 'engagement' || a.type === 'other'
|
||||
)
|
||||
} else if (currentFilter === 'upcoming') {
|
||||
// 即将到来：只显示7天内有纪念日的人
|
||||
return person.nextAnniversary && person.nextAnniversary.daysUntil <= 7
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
this.setData({ persons: filtered })
|
||||
// 排序：与 loadPersons() 保持一致，按最近的纪念日排序
|
||||
const sorted = filtered.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 })
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
+93
-37
@@ -1,56 +1,112 @@
|
||||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<view class="page">
|
||||
|
||||
<!-- 顶部 Header -->
|
||||
<view class="header">
|
||||
<view class="header-top">
|
||||
<view class="header-left">
|
||||
<text class="header-title">生日提醒</text>
|
||||
<text class="header-date">{{todayText}}</text>
|
||||
</view>
|
||||
<view class="header-icon">🎂</view>
|
||||
</view>
|
||||
<view class="stats-row">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{totalCount}}</text>
|
||||
<text class="stat-label">位好友</text>
|
||||
</view>
|
||||
<view class="stat-sep"></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 class="search-bar">
|
||||
<input class="search-input" placeholder="搜索姓名" value="{{searchKeyword}}" bindinput="onSearchInput" />
|
||||
<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>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<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="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="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>
|
||||
<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="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
|
||||
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 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 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>+</text>
|
||||
<text class="fab-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
+353
-136
@@ -1,193 +1,410 @@
|
||||
/**index.wxss**/
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
/* index.wxss */
|
||||
|
||||
page {
|
||||
background: #f1f4f9;
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.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 {
|
||||
.page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f1f4f9;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-right: 16rpx;
|
||||
white-space: nowrap;
|
||||
/* ───── Header ───── */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
padding: 48rpx 36rpx 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 24rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.person-info {
|
||||
flex: 1;
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.person-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
.header-title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.person-nickname {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
.header-date {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.person-count {
|
||||
text-align: right;
|
||||
.header-icon {
|
||||
font-size: 64rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.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;
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
backdrop-filter: blur(8rpx);
|
||||
}
|
||||
|
||||
.next-label {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.next-text {
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.days-text {
|
||||
color: #07c160;
|
||||
font-weight: 500;
|
||||
.stat-num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.days-text.urgent {
|
||||
color: #ff5722;
|
||||
.stat-num-urgent {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.stat-sep {
|
||||
width: 2rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ───── Search ───── */
|
||||
.search-wrap {
|
||||
padding: 24rpx 24rpx 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 48rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #1e293b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* ───── Filter ───── */
|
||||
.filter-scroll {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
padding: 16rpx 24rpx 20rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 14rpx 28rpx;
|
||||
border-radius: 48rpx;
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
/* ───── List ───── */
|
||||
.list {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
/* ───── Card ───── */
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 28rpx 28rpx 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
border-left: 6rpx solid #e2e8f0;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:active {
|
||||
transform: scale(0.985);
|
||||
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-urgent {
|
||||
border-left-color: #f97316;
|
||||
}
|
||||
|
||||
.card-today {
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
/* ───── Avatar ───── */
|
||||
.avatar-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-initial {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ───── Card body ───── */
|
||||
.card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-row-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.name-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
padding: 160rpx 40rpx;
|
||||
text-align: center;
|
||||
.card-nickname {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
background: #f1f5f9;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
/* ───── Badge ───── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-today {
|
||||
background: #fee2e2;
|
||||
}
|
||||
.badge-today .badge-text {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.badge-hot {
|
||||
background: #ffedd5;
|
||||
}
|
||||
.badge-hot .badge-text {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.badge-soon {
|
||||
background: #fef9c3;
|
||||
}
|
||||
.badge-soon .badge-text {
|
||||
color: #ca8a04;
|
||||
}
|
||||
|
||||
.badge-month {
|
||||
background: #ede9fe;
|
||||
}
|
||||
.badge-month .badge-text {
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.badge-normal {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.badge-normal .badge-text {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* ───── Anniversary row ───── */
|
||||
.card-row-ann {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.ann-icon {
|
||||
font-size: 26rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ann-info {
|
||||
font-size: 26rpx;
|
||||
color: #475569;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.ann-more {
|
||||
font-size: 22rpx;
|
||||
color: #6366f1;
|
||||
background: #ede9fe;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ───── Empty state ───── */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 160rpx 40rpx 80rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
display: block;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-state .text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-state .hint {
|
||||
font-size: 24rpx;
|
||||
color: #bbb;
|
||||
display: block;
|
||||
.empty-hint {
|
||||
font-size: 26rpx;
|
||||
color: #94a3b8;
|
||||
background: #fff;
|
||||
padding: 14rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 浮动按钮 */
|
||||
/* ───── List bottom padding ───── */
|
||||
.list-bottom {
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
/* ───── FAB ───── */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 120rpx;
|
||||
right: 40rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 60rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
|
||||
box-shadow: 0 12rpx 40rpx rgba(99, 102, 241, 0.5);
|
||||
z-index: 100;
|
||||
transition: all 0.3s;
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.fab:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0 6rpx 20rpx rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
font-size: 64rpx;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
margin-top: -4rpx;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// person-detail.js
|
||||
const storage = require('../../utils/storage')
|
||||
const dateUtils = require('../../utils/date')
|
||||
const { TYPE_NAMES, TYPE_ICONS, IMPORTANCE_TEXTS } = require('../../utils/constants')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
@@ -57,6 +58,7 @@ Page({
|
||||
date,
|
||||
dateText: dateUtils.formatDate(date, 'YYYY年MM月DD日'),
|
||||
daysUntil,
|
||||
daysUntilAbs: Math.abs(daysUntil), // 添加绝对值
|
||||
typeIcon: this.getTypeIcon(a.type),
|
||||
typeName: a.customTypeName || this.getTypeName(a.type),
|
||||
importanceText: this.getImportanceText(a.importance)
|
||||
@@ -73,40 +75,21 @@ Page({
|
||||
* 获取类型图标
|
||||
*/
|
||||
getTypeIcon(type) {
|
||||
const icons = {
|
||||
birthday: '🎂',
|
||||
lunar_birthday: '🌙',
|
||||
wedding: '💍',
|
||||
engagement: '💕',
|
||||
other: '📅'
|
||||
}
|
||||
return icons[type] || '📅'
|
||||
return TYPE_ICONS[type] || '📅'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取类型名称
|
||||
*/
|
||||
getTypeName(type) {
|
||||
const names = {
|
||||
birthday: '公历生日',
|
||||
lunar_birthday: '农历生日',
|
||||
wedding: '结婚纪念日',
|
||||
engagement: '订婚纪念日',
|
||||
other: '其他纪念日'
|
||||
}
|
||||
return names[type] || '其他'
|
||||
return TYPE_NAMES[type] || '其他'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取重要程度文本
|
||||
*/
|
||||
getImportanceText(importance) {
|
||||
const texts = {
|
||||
high: '非常重要',
|
||||
medium: '重要',
|
||||
low: '一般'
|
||||
}
|
||||
return texts[importance] || '一般'
|
||||
return IMPORTANCE_TEXTS[importance] || '一般'
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -127,17 +110,12 @@ Page({
|
||||
content: `确定要删除"${this.data.person.name}"吗？相关纪念日也将被删除。`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 先删除相关纪念日
|
||||
const anniversaries = storage.getAnniversariesByPersonId(this.data.personId)
|
||||
anniversaries.forEach(a => storage.deleteAnniversary(a.id))
|
||||
|
||||
// 再删除人员
|
||||
const success = storage.deletePerson(this.data.personId)
|
||||
const success = storage.deletePersonWithAnniversaries(this.data.personId)
|
||||
if (success) {
|
||||
wx.showToast({ title: '删除成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
wx.navigateBack()
|
||||
}, 1500)
|
||||
setTimeout(() => wx.navigateBack(), 1500)
|
||||
} else {
|
||||
wx.showToast({ title: '删除失败，请重试', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,9 +46,9 @@
|
||||
|
||||
<view wx:if="{{item.daysUntil !== undefined}}" class="days-info">
|
||||
<text wx:if="{{item.daysUntil === 0}}" class="days-text urgent">今天</text>
|
||||
<text wx:else-if="{{item.daysUntil === 1}}" class="days-text warning">明天</text>
|
||||
<text wx:else-if="{{item.daysUntil > 0}}" class="days-text">{{item.daysUntil}}天后</text>
|
||||
<text wx:else class="days-text past">已过{{Math.abs(item.daysUntil)}}天</text>
|
||||
<text wx:elif="{{item.daysUntil === 1}}" class="days-text warning">明天</text>
|
||||
<text wx:elif="{{item.daysUntil > 0}}" class="days-text">{{item.daysUntil}}天后</text>
|
||||
<text wx:else class="days-text past">已过{{item.daysUntilAbs}}天</text>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{item.remark}}" class="anniversary-remark">{{item.remark}}</view>
|
||||
|
||||
@@ -69,29 +69,16 @@ Page({
|
||||
success: (res) => {
|
||||
try {
|
||||
const data = JSON.parse(res.data)
|
||||
const success = storage.importData(data)
|
||||
|
||||
if (success) {
|
||||
wx.showToast({
|
||||
title: '导入成功',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
wx.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1500)
|
||||
const result = storage.importData(data)
|
||||
|
||||
if (result.success) {
|
||||
wx.showToast({ title: '导入成功', icon: 'success' })
|
||||
setTimeout(() => wx.reLaunch({ url: '/pages/index/index' }), 1500)
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '导入失败，请检查数据格式',
|
||||
icon: 'none'
|
||||
})
|
||||
wx.showToast({ title: result.error || '导入失败，请检查数据格式', icon: 'none' })
|
||||
}
|
||||
} catch (e) {
|
||||
wx.showToast({
|
||||
title: '数据格式错误',
|
||||
icon: 'none'
|
||||
})
|
||||
wx.showToast({ title: '数据格式错误', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
+106
-33
@@ -1,46 +1,119 @@
|
||||
<!--settings.wxml-->
|
||||
<view class="container">
|
||||
<view class="settings-list">
|
||||
<!-- 数据备份 -->
|
||||
<view class="setting-section">
|
||||
<text class="section-title">数据管理</text>
|
||||
|
||||
<view class="setting-item" bindtap="onExportData">
|
||||
<text class="item-label">📤 导出数据</text>
|
||||
<text class="item-arrow">›</text>
|
||||
<view class="page">
|
||||
|
||||
<!-- Header -->
|
||||
<view class="header">
|
||||
<view class="header-top">
|
||||
<view class="header-left">
|
||||
<text class="header-title">设置</text>
|
||||
<text class="header-sub">数据管理与关于</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" bindtap="onImportData">
|
||||
<text class="item-label">📥 导入数据</text>
|
||||
<text class="item-arrow">›</text>
|
||||
<view class="header-icon">⚙️</view>
|
||||
</view>
|
||||
<!-- 数据统计 -->
|
||||
<view class="stats-row">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{dataCount.persons}}</text>
|
||||
<text class="stat-label">位好友</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" bindtap="onClearData">
|
||||
<text class="item-label danger">🗑️ 清空所有数据</text>
|
||||
<text class="item-arrow">›</text>
|
||||
<view class="stat-sep"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-num">{{dataCount.anniversaries}}</text>
|
||||
<text class="stat-label">个纪念日</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="body" scroll-y>
|
||||
|
||||
<!-- 数据管理 -->
|
||||
<view class="section-label">数据管理</view>
|
||||
<view class="card-group">
|
||||
<view class="row" bindtap="onExportData">
|
||||
<view class="row-icon-wrap" style="background:#fff7ed;">
|
||||
<text class="row-icon">📤</text>
|
||||
</view>
|
||||
<view class="row-body">
|
||||
<text class="row-title">导出数据</text>
|
||||
<text class="row-desc">复制 JSON 到剪贴板</text>
|
||||
</view>
|
||||
<text class="row-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<view class="row" bindtap="onImportData">
|
||||
<view class="row-icon-wrap" style="background:#eff6ff;">
|
||||
<text class="row-icon">📥</text>
|
||||
</view>
|
||||
<view class="row-body">
|
||||
<text class="row-title">导入数据</text>
|
||||
<text class="row-desc">从剪贴板读取并导入</text>
|
||||
</view>
|
||||
<text class="row-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<view class="row" bindtap="onClearData">
|
||||
<view class="row-icon-wrap" style="background:#fff1f2;">
|
||||
<text class="row-icon">🗑️</text>
|
||||
</view>
|
||||
<view class="row-body">
|
||||
<text class="row-title danger">清空所有数据</text>
|
||||
<text class="row-desc danger">此操作不可恢复，请谨慎</text>
|
||||
</view>
|
||||
<text class="row-arrow danger">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关于 -->
|
||||
<view class="setting-section">
|
||||
<text class="section-title">关于</text>
|
||||
|
||||
<view class="setting-item">
|
||||
<text class="item-label">版本号</text>
|
||||
<text class="item-value">v1.0.0</text>
|
||||
<view class="section-label">关于</view>
|
||||
<view class="card-group">
|
||||
<view class="row">
|
||||
<view class="row-icon-wrap" style="background:#f0fdf4;">
|
||||
<text class="row-icon">📱</text>
|
||||
</view>
|
||||
<view class="row-body">
|
||||
<text class="row-title">版本号</text>
|
||||
</view>
|
||||
<text class="row-value">v1.0.0</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item">
|
||||
<text class="item-label">开发作者</text>
|
||||
<text class="item-value">生日提醒团队</text>
|
||||
|
||||
<view class="row-divider"></view>
|
||||
|
||||
<view class="row">
|
||||
<view class="row-icon-wrap" style="background:#faf5ff;">
|
||||
<text class="row-icon">👨💻</text>
|
||||
</view>
|
||||
<view class="row-body">
|
||||
<text class="row-title">开发作者</text>
|
||||
</view>
|
||||
<text class="row-value">生日提醒团队</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="info-box">
|
||||
<text class="info-title">💡 温馨提示</text>
|
||||
<text class="info-text">1. 建议定期导出数据备份\n2. 农历转换目前使用简化算法\n3. 提醒功能需要小程序权限</text>
|
||||
<!-- 提示 -->
|
||||
<view class="tips-card">
|
||||
<view class="tips-title">
|
||||
<text class="tips-icon">💡</text>
|
||||
<text class="tips-heading">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<text class="tips-dot">·</text>
|
||||
<text class="tips-text">建议定期导出数据备份</text>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<text class="tips-dot">·</text>
|
||||
<text class="tips-text">农历转换使用寿星万年历算法（1900–2100）</text>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<text class="tips-dot">·</text>
|
||||
<text class="tips-text">开启提醒需授权订阅消息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-pad"></view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
+207
-49
@@ -1,82 +1,240 @@
|
||||
/**settings.wxss**/
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
/* settings.wxss */
|
||||
|
||||
page {
|
||||
background: #f1f4f9;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
padding: 32rpx;
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f1f4f9;
|
||||
}
|
||||
|
||||
.setting-section {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
/* ───── Header ───── */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
padding: 48rpx 36rpx 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.header-sub {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 64rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.stat-sep {
|
||||
width: 2rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ───── Body ───── */
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ───── Section label ───── */
|
||||
.section-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 2rpx;
|
||||
padding: 32rpx 32rpx 12rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ───── Card group ───── */
|
||||
.card-group {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
padding: 24rpx 32rpx;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
/* ───── Row ───── */
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 28rpx 28rpx;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
.row:active {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
.row-icon-wrap {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-label.danger {
|
||||
color: #ff5722;
|
||||
.row-icon {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
.row-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
.row-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.row-title.danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.row-desc {
|
||||
font-size: 24rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.row-desc.danger {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.row-arrow {
|
||||
font-size: 40rpx;
|
||||
color: #ccc;
|
||||
color: #cbd5e1;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
.row-arrow.danger {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
.row-value {
|
||||
font-size: 28rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.row-divider {
|
||||
height: 1rpx;
|
||||
background: #f1f5f9;
|
||||
margin-left: 120rpx;
|
||||
}
|
||||
|
||||
/* ───── Tips card ───── */
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin: 8rpx 24rpx 0;
|
||||
padding: 28rpx 28rpx 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
border-left: 6rpx solid #6366f1;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.tips-heading {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
.tips-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.tips-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tips-dot {
|
||||
font-size: 28rpx;
|
||||
color: #6366f1;
|
||||
line-height: 1.8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 2;
|
||||
white-space: pre-line;
|
||||
display: block;
|
||||
color: #475569;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ───── Bottom padding ───── */
|
||||
.bottom-pad {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user