cg/hejiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构饮酒卡片组件并优化日历交互体验

Browse Source 
- 移除DrinkCard组件中的模板切换功能和多种布局模式
- 简化DrinkCard组件结构，统一使用琥珀流光样式
- 添加未来日期禁用功能，防止用户选择未来日期
- 优化卡片样式为现代化深色主题设计
- 调整日历单元格点击交互逻辑，过滤未来日期
- 更新Canvas导出尺寸适配新卡片高度
- 优化照片网格布局算法，支持响应式排列
- 简化页面操作按钮，移除冗余功能入口
- 移除情感状态显示，专注核心饮酒记录功能
This commit is contained in:
cg
2026-07-15 23:12:13 +08:00
parent b95243c8f8
commit 145976f221
7 changed files with 610 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/login/login.vue
+39 -223
View File
@@ -88,51 +88,6 @@
</view>
</view>
<!-- 饮酒偏好(登录后显示) -->
<view v-if="showPreferences" class="pref-overlay">
<view class="pref-card card-elevated">
<view class="pref-header">
<text class="text-h2">你的饮酒偏好</text>
<text class="text-caption">选择你常喝的酒类（可多选）</text>
</view>
<view class="pref-section">
<text class="pref-label">常喝的酒类</text>
<view class="pref-tags">
<view
v-for="cat in drinkCategories"
:key="cat.id"
class="tag"
:class="{ 'tag-active': selectedCategories.includes(cat.id) }"
@click="toggleCategory(cat.id)"
>
<text>{{ cat.emoji }} {{ cat.name }}</text>
</view>
</view>
</view>
<view class="pref-section">
<text class="pref-label">饮酒频率</text>
<view class="pref-options">
<view
v-for="freq in frequencies"
:key="freq.id"
class="freq-option"
:class="{ 'freq-active': selectedFrequency === freq.id }"
@click="selectedFrequency = freq.id"
>
<text>{{ freq.name }}</text>
</view>
</view>
</view>
<view class="pref-actions">
<button class="btn-text" @click="skipPreferences">跳过</button>
<button class="btn-primary" :loading="prefSaving" @click="savePreferences">{{ selectedCategories.length > 0 || selectedFrequency ? '保存并进入' : '进入首页' }}</button>
</view>
</view>
</view>
<!-- 底部协议（非登录状态时显示） -->
<view v-if="showNotice" class="agreement">
<text class="text-tiny">登录即代表同意</text>
@@ -144,27 +99,14 @@
</template>
<script>
import { DRINK_CATEGORIES } from '../../common/constants'
export default {
data() {
return {
showNotice: true,
showPreferences: false,
loginLoading: false,
prefSaving: false,
agreed: false,
avatarUrl: '',
nickname: '',
drinkCategories: DRINK_CATEGORIES,
selectedCategories: [],
selectedFrequency: '',
frequencies: [
{ id: 'daily', name: '几乎每天' },
{ id: 'often', name: '经常喝' },
{ id: 'sometimes', name: '偶尔喝' },
{ id: 'rarely', name: '很少喝' }
]
nickname: ''
}
},
methods: {
@@ -207,10 +149,8 @@ export default {
joinedAt: new Date().toISOString().slice(0, 10),
preferences: null
}
// 暂存用户信息，登录完成标记延迟到 finishLogin
uni.setStorageSync('user_info', JSON.stringify(userInfo))
// 显示偏好设置（此时不算正式登录）
this.showPreferences = true
this.finishLogin()
} catch (e) {
console.warn('登录失败，降级为本地登录:', e)
const userInfo = {
@@ -220,9 +160,8 @@ export default {
joinedAt: new Date().toISOString().slice(0, 10),
preferences: null
}
// 暂存用户信息，登录完成标记延迟到 finishLogin
uni.setStorageSync('user_info', JSON.stringify(userInfo))
this.showPreferences = true
this.finishLogin()
} finally {
this.loginLoading = false
}
@@ -258,37 +197,6 @@ export default {
uni.switchTab({ url: '/pages/index/index' })
},
// ===== 偏好选择 =====
toggleCategory(id) {
const idx = this.selectedCategories.indexOf(id)
if (idx > -1) {
this.selectedCategories.splice(idx, 1)
} else {
this.selectedCategories.push(id)
}
},
skipPreferences() {
this.finishLogin()
},
async savePreferences() {
if (this.prefSaving) return
this.prefSaving = true
try {
const user = JSON.parse(uni.getStorageSync('user_info') || '{}')
user.preferences = {
favoriteCategories: this.selectedCategories,
frequency: this.selectedFrequency
}
uni.setStorageSync('user_info', JSON.stringify(user))
await new Promise(r => setTimeout(r, 300)) // 短暂反馈
this.finishLogin()
} finally {
this.prefSaving = false
}
},
finishLogin() {
uni.setStorageSync('is_logged_in', 'true')
uni.setStorageSync('is_first_launch', 'false')
@@ -308,24 +216,24 @@ export default {
.login-page {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: $sp-xl;
height: 100vh;
padding: $sp-lg;
}
.brand-area {
flex: 1;
flex: 0.6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding-top: 120rpx;
padding-top: 60rpx;
}
.brand-glow {
position: absolute;
width: 400rpx;
height: 400rpx;
width: 300rpx;
height: 300rpx;
background: radial-gradient(circle, rgba(232,168,56,0.15) 0%, transparent 70%);
border-radius: 50%;
top: 50%;
@@ -335,70 +243,70 @@ export default {
}
.brand-icon {
width: 200rpx;
height: 200rpx;
width: 140rpx;
height: 140rpx;
background: $bg-card;
border-radius: $radius-xl;
border-radius: $radius-lg;
display: flex;
align-items: center;
justify-content: center;
box-shadow: $shadow-md;
margin-bottom: $sp-xl;
margin-bottom: $sp-md;
position: relative;
z-index: 2;
}
.brand-emoji {
font-size: 96rpx;
font-size: 64rpx;
}
.brand-name {
font-size: $fs-hero;
font-size: $fs-3xl;
font-weight: $fw-black;
color: $text-primary;
letter-spacing: -4rpx;
margin-bottom: $sp-sm;
letter-spacing: -2rpx;
margin-bottom: $sp-xs;
}
.brand-slogan {
font-size: $fs-md;
font-size: $fs-sm;
color: $text-secondary;
}
.login-area {
padding-bottom: $sp-3xl;
padding-bottom: $sp-lg;
}
/* 理性饮酒须知 */
.notice-card {
padding: $sp-xl;
padding: $sp-lg;
}
.notice-header {
display: flex;
align-items: center;
gap: $sp-sm;
margin-bottom: $sp-lg;
margin-bottom: $sp-md;
}
.notice-icon {
font-size: $fs-xl;
font-size: $fs-lg;
}
.notice-title {
font-size: $fs-lg;
font-size: $fs-base;
font-weight: $fw-bold;
}
.notice-content {
margin-bottom: $sp-lg;
margin-bottom: $sp-md;
}
.notice-item {
display: block;
font-size: $fs-sm;
font-size: $fs-xs;
color: $text-secondary;
line-height: $lh-loose;
line-height: $lh-normal;
}
.notice-btn {
@@ -407,16 +315,16 @@ export default {
/* 资料表单 */
.profile-form {
padding: $sp-xl;
padding: $sp-lg;
margin-bottom: 0;
}
.form-title-row {
margin-bottom: $sp-lg;
margin-bottom: $sp-md;
}
.form-title {
font-size: $fs-lg;
font-size: $fs-base;
font-weight: $fw-bold;
color: $text-primary;
}
@@ -425,7 +333,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
padding: $sp-md 0;
padding: $sp-sm 0;
border-bottom: 2rpx solid rgba(255,255,255,0.04);
}
@@ -442,16 +350,16 @@ export default {
}
.avatar-preview {
width: 96rpx;
height: 96rpx;
width: 80rpx;
height: 80rpx;
border-radius: $radius-full;
border: 3rpx solid $amber;
flex-shrink: 0;
}
.avatar-placeholder {
width: 96rpx;
height: 96rpx;
width: 80rpx;
height: 80rpx;
border-radius: $radius-full;
border: 3rpx dashed rgba(232,168,56,0.4);
background: $bg-elevated;
@@ -462,7 +370,7 @@ export default {
}
.avatar-placeholder-icon {
font-size: 48rpx;
font-size: 40rpx;
opacity: 0.5;
}
@@ -475,7 +383,7 @@ export default {
display: flex;
align-items: center;
gap: $sp-lg;
padding: $sp-md 0;
padding: $sp-sm 0;
}
.form-label {
@@ -496,7 +404,7 @@ export default {
.login-actions {
display: flex;
flex-direction: column;
gap: $sp-lg;
gap: $sp-md;
}
.login-btn {
@@ -511,7 +419,7 @@ export default {
}
.login-btn-text {
font-size: $fs-xl;
font-size: $fs-lg;
font-weight: $fw-bold;
}
@@ -569,104 +477,12 @@ export default {
color: $text-tertiary;
}
/* 偏好设置弹层 */
.pref-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: flex-end;
z-index: 100;
padding: $sp-lg;
animation: fadeIn $duration-base $ease-out;
}
.pref-card {
width: 100%;
padding: $sp-xl;
border-radius: $radius-xl $radius-xl 0 0;
animation: slideUp $duration-base $ease-out;
}
.pref-header {
margin-bottom: $sp-xl;
.text-h2 {
display: block;
margin-bottom: $sp-xs;
}
}
.pref-section {
margin-bottom: $sp-xl;
}
.pref-label {
display: block;
font-size: $fs-sm;
font-weight: $fw-medium;
color: $text-secondary;
margin-bottom: $sp-md;
}
.pref-tags {
display: flex;
flex-wrap: wrap;
gap: $sp-sm;
}
.pref-options {
display: flex;
gap: $sp-sm;
}
.freq-option {
flex: 1;
text-align: center;
padding: $sp-md $sp-sm;
border-radius: $radius-md;
background: $bg-card;
font-size: $fs-sm;
color: $text-secondary;
border: 2rpx solid transparent;
transition: all $duration-fast $ease-out;
&.freq-active {
background: $amber-glow;
color: $amber;
border-color: rgba(232,168,56,0.3);
}
}
.pref-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: $sp-lg;
.btn-primary {
flex: 1;
}
}
/* 底部协议 */
.agreement {
display: flex;
justify-content: center;
gap: $sp-xs;
padding: $sp-lg 0;
padding: $sp-sm 0;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
</style>