refactor(components): 重构饮酒卡片组件并优化日历交互体验
- 移除DrinkCard组件中的模板切换功能和多种布局模式 - 简化DrinkCard组件结构,统一使用琥珀流光样式 - 添加未来日期禁用功能,防止用户选择未来日期 - 优化卡片样式为现代化深色主题设计 - 调整日历单元格点击交互逻辑,过滤未来日期 - 更新Canvas导出尺寸适配新卡片高度 - 优化照片网格布局算法,支持响应式排列 - 简化页面操作按钮,移除冗余功能入口 - 移除情感状态显示,专注核心饮酒记录功能
This commit is contained in:
+45
-40
@@ -27,15 +27,15 @@
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<view class="stats-row">
|
||||
<view class="stat-card card" @click="goProfile">
|
||||
<view class="stat-card card">
|
||||
<text class="stat-value text-num text-amber">{{ stats.monthDrinkCount }}</text>
|
||||
<text class="stat-label">本月饮酒</text>
|
||||
</view>
|
||||
<view class="stat-card card" @click="goProfile">
|
||||
<view class="stat-card card">
|
||||
<text class="stat-value text-num">{{ stats.monthCups }}</text>
|
||||
<text class="stat-label">标准杯</text>
|
||||
</view>
|
||||
<view class="stat-card card" @click="goProfile">
|
||||
<view class="stat-card card">
|
||||
<text class="stat-value text-num" :class="stats.streakType === 'drank' ? 'text-amber' : 'text-mint'">
|
||||
{{ stats.streak }}
|
||||
</text>
|
||||
@@ -84,11 +84,6 @@
|
||||
<text>过量饮酒有害健康 · 请理性记录</text>
|
||||
</view>
|
||||
|
||||
<!-- 悬浮记录按钮 -->
|
||||
<view class="fab-record" @click="goRecord">
|
||||
<text class="fab-icon">+</text>
|
||||
</view>
|
||||
|
||||
<!-- 日期记录弹窗 -->
|
||||
<view v-if="showDayDetail" class="day-overlay" @click="showDayDetail = false">
|
||||
<view class="day-detail card-elevated" @click.stop>
|
||||
@@ -107,10 +102,12 @@
|
||||
<text class="text-caption">{{ getFeelingName(selectedRecord.feeling) }}</text>
|
||||
<text class="text-caption text-amber text-num">{{ selectedRecord.standardCupsTotal }} 标准杯</text>
|
||||
</view>
|
||||
<button class="btn-ghost day-toggle-btn" @click="toggleToAbstain">改为未饮酒</button>
|
||||
</view>
|
||||
<view v-else class="day-abstain">
|
||||
<text class="day-abstain-emoji">🚫</text>
|
||||
<text class="text-caption">今日未饮酒,好样的</text>
|
||||
<button class="btn-ghost day-toggle-btn" @click="toggleToDrank">改为饮酒</button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="day-empty">
|
||||
@@ -197,12 +194,40 @@ export default {
|
||||
url: `/pages/record/record?date=${this.selectedDate}&mode=backfill`
|
||||
})
|
||||
},
|
||||
// 改为未饮酒
|
||||
toggleToAbstain() {
|
||||
uni.showModal({
|
||||
title: '确认修改',
|
||||
content: '确定将这天改为未饮酒吗?饮酒记录将被清除。',
|
||||
success: (res) => {
|
||||
if (!res.confirm) return
|
||||
const idx = this.records.findIndex(r => r.date === this.selectedDate)
|
||||
if (idx === -1) return
|
||||
this.records[idx].mode = 'abstain'
|
||||
this.records[idx].drinks = []
|
||||
this.records[idx].food = null
|
||||
this.records[idx].feeling = null
|
||||
this.records[idx].standardCupsTotal = 0
|
||||
this.selectedRecord = this.records[idx]
|
||||
this.saveRecords()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 改为饮酒(跳转到补录页)
|
||||
toggleToDrank() {
|
||||
this.showDayDetail = false
|
||||
uni.navigateTo({
|
||||
url: `/pages/record/record?date=${this.selectedDate}&mode=backfill`
|
||||
})
|
||||
},
|
||||
// 保存记录到本地存储
|
||||
saveRecords() {
|
||||
uni.setStorageSync('drink_records', JSON.stringify(this.records))
|
||||
},
|
||||
goRecord() {
|
||||
uni.navigateTo({ url: '/pages/record/record' })
|
||||
},
|
||||
goProfile() {
|
||||
uni.switchTab({ url: '/pages/profile/profile' })
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -222,7 +247,7 @@ export default {
|
||||
|
||||
.greeting-text {
|
||||
display: block;
|
||||
font-size: $fs-lg;
|
||||
font-size:38rpx;
|
||||
font-weight: $fw-bold;
|
||||
}
|
||||
|
||||
@@ -283,7 +308,6 @@ export default {
|
||||
}
|
||||
|
||||
.week-summary {
|
||||
margin-bottom: $sp-md;
|
||||
padding: $sp-md;
|
||||
}
|
||||
|
||||
@@ -422,38 +446,11 @@ export default {
|
||||
.bottom-health-tip {
|
||||
text-align: center;
|
||||
padding: $sp-sm 0;
|
||||
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* 悬浮记录按钮 */
|
||||
.fab-record {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, $amber-light, $amber-deep);
|
||||
border-radius: $radius-full;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: $shadow-amber;
|
||||
z-index: 50;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
font-size: $fs-2xl;
|
||||
font-weight: $fw-bold;
|
||||
color: $text-on-amber;
|
||||
}
|
||||
|
||||
/* 日期弹窗 */
|
||||
.day-overlay {
|
||||
position: fixed;
|
||||
@@ -507,4 +504,12 @@ export default {
|
||||
margin-top: $sp-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.day-toggle-btn {
|
||||
margin-top: $sp-lg;
|
||||
width: 100%;
|
||||
font-size: $fs-sm;
|
||||
color: $text-secondary;
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user