refactor(components): 重构饮酒卡片组件并优化日历交互体验
- 移除DrinkCard组件中的模板切换功能和多种布局模式 - 简化DrinkCard组件结构，统一使用琥珀流光样式 - 添加未来日期禁用功能，防止用户选择未来日期 - 优化卡片样式为现代化深色主题设计 - 调整日历单元格点击交互逻辑，过滤未来日期 - 更新Canvas导出尺寸适配新卡片高度 - 优化照片网格布局算法，支持响应式排列 - 简化页面操作按钮，移除冗余功能入口 - 移除情感状态显示，专注核心饮酒记录功能
This commit is contained in:
@@ -196,9 +196,10 @@ page {
|
||||
padding: $sp-md $sp-xl;
|
||||
border-radius: $radius-full;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.08);
|
||||
text-align: center;
|
||||
transition: all $duration-fast $ease-out;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:active {
|
||||
background-color: $bg-card-alt;
|
||||
transform: scale(0.97);
|
||||
|
||||
@@ -25,10 +25,11 @@
|
||||
:class="{
|
||||
'cal-cell-empty': !cell.day,
|
||||
'cal-cell-today': cell.isToday,
|
||||
'cal-cell-future': cell.day && isFuture(cell.date),
|
||||
'cal-cell-drank': getRecordMode(cell.date) === 'drank',
|
||||
'cal-cell-abstain': getRecordMode(cell.date) === 'abstain'
|
||||
}"
|
||||
@click="cell.day && onSelectDate(cell.date)"
|
||||
@click="cell.day && !isFuture(cell.date) && onSelectDate(cell.date)"
|
||||
>
|
||||
<text v-if="cell.day" class="cal-day-num">{{ cell.day }}</text>
|
||||
<view v-if="getRecordMode(cell.date) === 'drank'" class="cal-dot cal-dot-drank"></view>
|
||||
@@ -61,6 +62,13 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isFuture(date) {
|
||||
if (!date) return false
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
const d = new Date(date.replace(/-/g, '/'))
|
||||
return d > today
|
||||
},
|
||||
getRecordMode(date) {
|
||||
if (!date) return null
|
||||
const record = this.records.find(r => r.date === date)
|
||||
@@ -157,7 +165,7 @@ export default {
|
||||
border: 2rpx solid $amber;
|
||||
}
|
||||
|
||||
&:active:not(.cal-cell-empty) {
|
||||
&:active:not(.cal-cell-empty):not(.cal-cell-future) {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
@@ -186,6 +194,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* 未来日期置灰 */
|
||||
.cal-cell-future {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cal-cell-future .cal-day-num {
|
||||
color: $text-tertiary;
|
||||
}
|
||||
|
||||
/* 饮酒日高亮背景 */
|
||||
.cal-cell-drank {
|
||||
background: rgba(232, 168, 56, 0.08);
|
||||
|
||||
+195
-416
@@ -1,205 +1,75 @@
|
||||
<template>
|
||||
<view class="card-root" :class="['tpl-' + template, 'photos-' + photoLayout]">
|
||||
<!-- 装饰背景层 -->
|
||||
<view class="card-bg-deco">
|
||||
<view class="bg-circle bg-circle-1"></view>
|
||||
<view class="bg-circle bg-circle-2"></view>
|
||||
<view class="card-root">
|
||||
<!-- 顶部：日期 -->
|
||||
<view class="card-header">
|
||||
<text class="header-date">{{ record.date }}</text>
|
||||
</view>
|
||||
|
||||
<!-- ====== 0张: 纯文字排版 ====== -->
|
||||
<view v-if="photos.length === 0" class="card-no-photo">
|
||||
<view class="no-photo-header">
|
||||
<view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
|
||||
<view class="feeling-tag" v-if="record.feeling">
|
||||
<text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||
</view>
|
||||
<!-- 照片区域 -->
|
||||
<view v-if="photos.length > 0" class="card-photos">
|
||||
<!-- 1张: 大图 -->
|
||||
<view v-if="photos.length === 1" class="photo-single">
|
||||
<image :src="photos[0]" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="no-photo-hero">
|
||||
<view class="hero-drink-list">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
|
||||
<text class="hero-emoji">{{ getCatEmoji(drink.category) }}</text>
|
||||
<view class="hero-drink-info">
|
||||
<text class="hero-brand">{{ drink.brand }}</text>
|
||||
<text class="hero-product">{{ drink.product }} · {{ drink.amount }}{{ drink.unit }}</text>
|
||||
</view>
|
||||
<text class="hero-cups">{{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-photo-stats">
|
||||
<view class="stat-pill">
|
||||
<text class="stat-num">{{ record.standardCupsTotal }}</text>
|
||||
<text class="stat-label">标准杯</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-pill" v-if="record.food">
|
||||
<text class="stat-icon">🍲</text>
|
||||
<text class="stat-label">{{ getFoodName() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-photo-quote">
|
||||
<text class="quote-mark">"</text>
|
||||
<text class="quote-text">{{ quote }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ====== 1张: 全屏沉浸式 ====== -->
|
||||
<view v-else-if="photos.length === 1" class="card-one-photo">
|
||||
<image class="one-photo-bg" :src="photos[0]"></image>
|
||||
<view class="one-photo-overlay"></view>
|
||||
<view class="one-photo-top">
|
||||
<view class="date-badge light"><text class="date-text">{{ record.date }}</text></view>
|
||||
</view>
|
||||
<view class="one-photo-bottom">
|
||||
<view class="photo-drink-chips">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="drink-chip">
|
||||
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} {{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="photo-stats-row">
|
||||
<text class="photo-total-cups">{{ record.standardCupsTotal }} 标准杯</text>
|
||||
<text v-if="record.feeling" class="photo-feeling">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||
</view>
|
||||
<view class="photo-quote-line">
|
||||
<text class="quote-mark light">"</text>
|
||||
<text class="quote-text light">{{ quote }}</text>
|
||||
<!-- 2-6张: 网格 -->
|
||||
<view v-else class="photo-grid">
|
||||
<view
|
||||
v-for="(photo, i) in photos"
|
||||
:key="i"
|
||||
class="photo-cell"
|
||||
:class="{ 'photo-span': i === 0 && photos.length % 2 !== 0 }"
|
||||
>
|
||||
<image :src="photo" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ====== 多张: 拼贴布局 ====== -->
|
||||
<view v-else class="card-multi-photo">
|
||||
<view class="multi-top">
|
||||
<view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
|
||||
<view class="multi-cups-badge">
|
||||
<text class="cups-badge-num">{{ record.standardCupsTotal }}</text>
|
||||
<text class="cups-badge-label">标准杯</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2张: 左6右4 -->
|
||||
<view v-if="photos.length === 2" class="photo-grid grid-2">
|
||||
<view class="grid-item gi-large"><image :src="photos[0]" class="grid-img"></image></view>
|
||||
<view class="grid-item gi-medium"><image :src="photos[1]" class="grid-img"></image></view>
|
||||
</view>
|
||||
|
||||
<!-- 3张: 左大右两小 -->
|
||||
<view v-else-if="photos.length === 3" class="photo-grid grid-3">
|
||||
<view class="grid-item gi-hero-left"><image :src="photos[0]" class="grid-img"></image></view>
|
||||
<view class="gi-right-col">
|
||||
<view class="grid-item gi-half"><image :src="photos[1]" class="grid-img"></image></view>
|
||||
<view class="grid-item gi-half"><image :src="photos[2]" class="grid-img"></image></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 4张: 2×2 -->
|
||||
<view v-else-if="photos.length === 4" class="photo-grid grid-2x2">
|
||||
<view v-for="(p, i) in photos" :key="i" class="grid-item gi-quarter">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 5张: 上3下2 -->
|
||||
<view v-else-if="photos.length === 5" class="photo-grid grid-rows">
|
||||
<view class="grid-row grid-row-3">
|
||||
<view v-for="(p, i) in photos.slice(0, 3)" :key="i" class="grid-item gi-third">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-row grid-row-2">
|
||||
<view v-for="(p, i) in photos.slice(3, 5)" :key="i" class="grid-item gi-half-row">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 6张: 3+3 -->
|
||||
<view v-else-if="photos.length === 6" class="photo-grid grid-rows">
|
||||
<view class="grid-row grid-row-3">
|
||||
<view v-for="(p, i) in photos.slice(0, 3)" :key="i" class="grid-item gi-third">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-row grid-row-3">
|
||||
<view v-for="(p, i) in photos.slice(3, 6)" :key="i" class="grid-item gi-third">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 7张: 3+4 -->
|
||||
<view v-else-if="photos.length === 7" class="photo-grid grid-rows">
|
||||
<view class="grid-row grid-row-3">
|
||||
<view v-for="(p, i) in photos.slice(0, 3)" :key="i" class="grid-item gi-third">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-row grid-row-4">
|
||||
<view v-for="(p, i) in photos.slice(3, 7)" :key="i" class="grid-item gi-quarter-row">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 8张: 4+4 -->
|
||||
<view v-else-if="photos.length === 8" class="photo-grid grid-rows">
|
||||
<view class="grid-row grid-row-4">
|
||||
<view v-for="(p, i) in photos.slice(0, 4)" :key="i" class="grid-item gi-quarter-row">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-row grid-row-4">
|
||||
<view v-for="(p, i) in photos.slice(4, 8)" :key="i" class="grid-item gi-quarter-row">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 9张: 3×3 -->
|
||||
<view v-else class="photo-grid grid-3x3">
|
||||
<view v-for="(p, i) in photos.slice(0, 9)" :key="i" class="grid-item gi-ninth">
|
||||
<image :src="p" class="grid-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<view class="multi-bottom">
|
||||
<view class="multi-drinks-row">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="multi-drink-tag">
|
||||
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} · {{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="multi-meta-row">
|
||||
<text v-if="record.food" class="multi-meta-item">🍲 {{ getFoodName() }}</text>
|
||||
<text v-if="record.feeling" class="multi-meta-item">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||
</view>
|
||||
<view class="multi-quote">
|
||||
<text class="quote-mark">"</text>
|
||||
<text class="quote-text">{{ quote }}</text>
|
||||
</view>
|
||||
<!-- 无照片: emoji -->
|
||||
<view v-else class="card-hero">
|
||||
<view class="hero-emoji-wrap">
|
||||
<text class="hero-emoji">{{ mainEmoji }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统一底部品牌 + 二维码 -->
|
||||
<view class="card-brand-bar">
|
||||
<view class="brand-left">
|
||||
<text class="brand-name">🍻 喝了么</text>
|
||||
<!-- 酒水清单 -->
|
||||
<view class="drink-list">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="drink-row">
|
||||
<text class="drink-name">{{ getCatEmoji(drink.category) }} {{ drink.brand }}</text>
|
||||
<text class="drink-detail">{{ formatAmount(drink) }}·{{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
<view v-if="record.food" class="drink-row">
|
||||
<text class="drink-name">🍲 {{ getFoodName() }}</text>
|
||||
<text class="drink-detail"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 喝后心得（酒言酒语） -->
|
||||
<view class="card-footer">
|
||||
<text class="footer-label">喝后心得</text>
|
||||
<text class="footer-quote">"{{ quote }}"</text>
|
||||
</view>
|
||||
|
||||
<!-- 品牌 + 二维码 -->
|
||||
<view class="card-brand">
|
||||
<view class="brand-info">
|
||||
<text class="brand-text">🍻 喝了么</text>
|
||||
<text class="brand-slogan">记录每一杯的故事</text>
|
||||
</view>
|
||||
<view class="brand-qr">
|
||||
<text class="brand-qr-text">扫码</text>
|
||||
</view>
|
||||
<view class="brand-qr"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DRINK_CATEGORIES, FOOD_CATEGORIES, FEELINGS, DRINK_QUOTES } from '../common/constants'
|
||||
import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES } from '../common/constants'
|
||||
|
||||
const UNIT_NAMES = { ml: 'ml', liang: '两', bottle: '瓶', cup: '杯', can: '听', shot: 'shot' }
|
||||
|
||||
export default {
|
||||
props: {
|
||||
record: { type: Object, required: true },
|
||||
template: { type: String, default: 'amber' }
|
||||
record: { type: Object, required: true }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -210,12 +80,9 @@ export default {
|
||||
photos() {
|
||||
return (this.record && this.record.photos) || []
|
||||
},
|
||||
photoLayout() {
|
||||
const len = this.photos.length
|
||||
if (len === 0) return 'none'
|
||||
if (len === 1) return 'one'
|
||||
if (len <= 4) return 'few'
|
||||
return 'many'
|
||||
mainEmoji() {
|
||||
const first = (this.record.drinks || [])[0]
|
||||
return first ? this.getCatEmoji(first.category) : '🥃'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -225,268 +92,180 @@ export default {
|
||||
},
|
||||
getFoodName() {
|
||||
const food = FOOD_CATEGORIES.find(f => f.id === this.record.food?.category)
|
||||
if (!food) return ''
|
||||
if (!food) return this.record.food?.name || '美食'
|
||||
return this.record.food.name ? `${food.name}·${this.record.food.name}` : food.name
|
||||
},
|
||||
getFeelingEmoji() {
|
||||
const f = FEELINGS.find(f => f.id === this.record.feeling)
|
||||
return f ? f.emoji : ''
|
||||
},
|
||||
getFeelingName() {
|
||||
const f = FEELINGS.find(f => f.id === this.record.feeling)
|
||||
return f ? f.name : ''
|
||||
formatAmount(drink) {
|
||||
const unitName = UNIT_NAMES[drink.unit] || drink.unit
|
||||
return `${drink.amount}${unitName}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ========== 根容器 ========== */
|
||||
.card-root {
|
||||
position: relative;
|
||||
width: 650rpx;
|
||||
border-radius: $radius-xl;
|
||||
width: 620rpx;
|
||||
border-radius: 32rpx;
|
||||
overflow: hidden;
|
||||
padding: $sp-lg;
|
||||
min-height: 700rpx;
|
||||
background: linear-gradient(170deg, #1A1510 0%, #0D0B08 100%);
|
||||
border: 2rpx solid rgba(232, 168, 56, 0.15);
|
||||
box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.5), 0 0 60rpx rgba(232, 168, 56, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- 模板: 琥珀流光 --- */
|
||||
.tpl-amber {
|
||||
background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
|
||||
border: 2rpx solid rgba(232, 168, 56, 0.25);
|
||||
/* 顶部 */
|
||||
.card-header {
|
||||
padding: $sp-lg $sp-xl 0;
|
||||
}
|
||||
.tpl-amber .bg-circle-1 { background: radial-gradient(circle, rgba(232, 168, 56, 0.12), transparent 70%); }
|
||||
.tpl-amber .bg-circle-2 { background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%); }
|
||||
|
||||
/* --- 模板: 暗夜极光 --- */
|
||||
.tpl-aurora {
|
||||
background: linear-gradient(160deg, #0A0E1A 0%, #0B0B14 40%, #0E0A1A 100%);
|
||||
border: 2rpx solid rgba(139, 133, 184, 0.2);
|
||||
}
|
||||
.tpl-aurora .bg-circle-1 { background: radial-gradient(circle, rgba(94, 198, 160, 0.1), transparent 70%); }
|
||||
.tpl-aurora .bg-circle-2 { background: radial-gradient(circle, rgba(139, 133, 184, 0.1), transparent 70%); }
|
||||
.tpl-aurora .date-badge { background: rgba(139, 133, 184, 0.15); border-color: rgba(139, 133, 184, 0.2); }
|
||||
.tpl-aurora .stat-pill .stat-num,
|
||||
.tpl-aurora .cups-badge-num,
|
||||
.tpl-aurora .hero-cups,
|
||||
.tpl-aurora .photo-total-cups { color: $mint; }
|
||||
|
||||
/* --- 模板: 胶片记忆 --- */
|
||||
.tpl-film {
|
||||
background: linear-gradient(160deg, #141210 0%, #0D0C0A 40%, #141210 100%);
|
||||
border: 2rpx solid rgba(200, 180, 140, 0.15);
|
||||
}
|
||||
.tpl-film .bg-circle-1 { background: radial-gradient(circle, rgba(200, 180, 140, 0.08), transparent 70%); }
|
||||
.tpl-film .bg-circle-2 { background: radial-gradient(circle, rgba(180, 160, 120, 0.06), transparent 70%); }
|
||||
.tpl-film .date-badge { background: rgba(200, 180, 140, 0.1); border-color: rgba(200, 180, 140, 0.15); }
|
||||
|
||||
/* 装饰背景 */
|
||||
.card-bg-deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
|
||||
.bg-circle { position: absolute; border-radius: 50%; }
|
||||
.bg-circle-1 { width: 400rpx; height: 400rpx; top: -100rpx; right: -100rpx; }
|
||||
.bg-circle-2 { width: 300rpx; height: 300rpx; bottom: 100rpx; left: -80rpx; }
|
||||
|
||||
/* ========== 公共元素 ========== */
|
||||
.date-badge {
|
||||
display: inline-flex; align-items: center;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(232, 168, 56, 0.1);
|
||||
border: 1rpx solid rgba(232, 168, 56, 0.15);
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
.date-badge.light { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); }
|
||||
.date-text { font-size: $fs-xs; color: $text-secondary; font-family: $font-num; }
|
||||
.date-badge.light .date-text { color: rgba(255, 255, 255, 0.85); }
|
||||
|
||||
.feeling-tag {
|
||||
display: inline-flex; align-items: center;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: $radius-full;
|
||||
font-size: $fs-xs; color: $text-secondary;
|
||||
.header-date {
|
||||
font-size: $fs-sm;
|
||||
color: $text-tertiary;
|
||||
font-family: $font-num;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.quote-mark { font-size: $fs-3xl; color: $amber; opacity: 0.3; line-height: 1; margin-right: $sp-xs; }
|
||||
.quote-mark.light { color: rgba(255, 255, 255, 0.4); }
|
||||
.quote-text { font-size: $fs-sm; color: $text-secondary; font-style: italic; flex: 1; line-height: $lh-loose; }
|
||||
.quote-text.light { color: rgba(255, 255, 255, 0.7); }
|
||||
/* 照片区域 */
|
||||
.card-photos {
|
||||
padding: $sp-lg $sp-xl 0;
|
||||
}
|
||||
|
||||
/* 品牌底栏 */
|
||||
.card-brand-bar {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding-top: $sp-lg; margin-top: auto;
|
||||
border-top: 2rpx solid rgba(255, 255, 255, 0.04);
|
||||
/* 1张：大图 */
|
||||
.photo-single {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.brand-left {
|
||||
display: flex; flex-direction: column; gap: 4rpx;
|
||||
|
||||
/* 2-6张：网格 */
|
||||
.photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $sp-sm;
|
||||
}
|
||||
.brand-name { font-size: $fs-xs; color: $text-tertiary; font-weight: $fw-medium; }
|
||||
.brand-slogan { font-size: 18rpx; color: $text-tertiary; }
|
||||
.brand-qr {
|
||||
width: 80rpx; height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.08);
|
||||
.photo-cell {
|
||||
aspect-ratio: 1;
|
||||
border-radius: $radius-md;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
/* 奇数张时第一张占满两列 */
|
||||
.photo-span {
|
||||
grid-column: span 2;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
/* emoji占位 */
|
||||
.card-hero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $sp-xl $sp-xl $sp-lg;
|
||||
}
|
||||
.hero-emoji-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: $radius-full;
|
||||
background: rgba(232, 168, 56, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-emoji {
|
||||
font-size: 100rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 酒水清单 */
|
||||
.drink-list {
|
||||
padding: 0 $sp-xl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-md;
|
||||
}
|
||||
.drink-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.drink-name {
|
||||
font-size: $fs-base;
|
||||
color: $text-primary;
|
||||
font-weight: $fw-medium;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.brand-qr-text {
|
||||
font-size: 18rpx; color: $text-tertiary;
|
||||
.drink-detail {
|
||||
font-size: $fs-sm;
|
||||
color: $amber;
|
||||
font-family: $font-num;
|
||||
font-weight: $fw-bold;
|
||||
flex-shrink: 0;
|
||||
margin-left: $sp-md;
|
||||
}
|
||||
|
||||
/* ========== 0张: 纯文字 ========== */
|
||||
.card-no-photo {
|
||||
position: relative; z-index: 1; flex: 1;
|
||||
display: flex; flex-direction: column; gap: $sp-lg;
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
margin: $sp-lg $sp-xl;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, transparent, rgba(232, 168, 56, 0.15), transparent);
|
||||
}
|
||||
.no-photo-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.no-photo-hero { padding: $sp-md 0; }
|
||||
.hero-drink-list { display: flex; flex-direction: column; gap: $sp-md; }
|
||||
.hero-drink-item {
|
||||
display: flex; align-items: center; gap: $sp-md;
|
||||
padding: $sp-md;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: $radius-lg;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.hero-emoji { font-size: 56rpx; flex-shrink: 0; }
|
||||
.hero-drink-info { flex: 1; }
|
||||
.hero-brand { display: block; font-size: $fs-base; font-weight: $fw-bold; color: $text-primary; }
|
||||
.hero-product { display: block; font-size: $fs-xs; color: $text-secondary; margin-top: 4rpx; }
|
||||
.hero-cups { font-size: $fs-lg; font-weight: $fw-black; color: $amber; font-family: $font-num; flex-shrink: 0; }
|
||||
.no-photo-stats {
|
||||
display: flex; align-items: center; gap: $sp-lg;
|
||||
padding: $sp-md; background: rgba(255, 255, 255, 0.03); border-radius: $radius-lg;
|
||||
}
|
||||
.stat-pill { display: flex; align-items: center; gap: $sp-xs; }
|
||||
.stat-num { font-size: $fs-2xl; font-weight: $fw-black; color: $amber; font-family: $font-num; }
|
||||
.stat-label { font-size: $fs-xs; color: $text-secondary; }
|
||||
.stat-icon { font-size: $fs-base; }
|
||||
.stat-divider { width: 2rpx; height: 40rpx; background: rgba(255, 255, 255, 0.08); }
|
||||
.no-photo-quote { display: flex; align-items: flex-start; padding: $sp-sm 0; }
|
||||
|
||||
/* ========== 1张: 沉浸式 ========== */
|
||||
.card-one-photo {
|
||||
position: relative; z-index: 1; flex: 1;
|
||||
min-height: 600rpx; border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
margin: -#{$sp-lg};
|
||||
padding: $sp-lg; padding-bottom: 0;
|
||||
display: flex; flex-direction: column; justify-content: space-between;
|
||||
/* 底部 */
|
||||
.card-footer {
|
||||
padding: 0 $sp-xl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-sm;
|
||||
}
|
||||
.one-photo-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
|
||||
.one-photo-overlay {
|
||||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.75) 100%);
|
||||
z-index: 1;
|
||||
.footer-label {
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.one-photo-top { position: relative; z-index: 2; display: flex; justify-content: flex-start; padding-top: $sp-sm; }
|
||||
.one-photo-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; gap: $sp-md; padding-bottom: $sp-md; }
|
||||
.photo-drink-chips { display: flex; flex-wrap: wrap; gap: $sp-sm; }
|
||||
.drink-chip {
|
||||
display: inline-flex; align-items: center;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border-radius: $radius-full;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
font-size: $fs-xs; color: rgba(255, 255, 255, 0.9);
|
||||
.footer-quote {
|
||||
font-size: $fs-sm;
|
||||
color: $text-secondary;
|
||||
line-height: $lh-loose;
|
||||
font-style: italic;
|
||||
}
|
||||
.photo-stats-row { display: flex; align-items: center; gap: $sp-lg; }
|
||||
.photo-total-cups { font-size: $fs-xl; font-weight: $fw-black; color: $amber-light; font-family: $font-num; }
|
||||
.photo-feeling { font-size: $fs-sm; color: rgba(255, 255, 255, 0.7); }
|
||||
.photo-quote-line { display: flex; align-items: flex-start; }
|
||||
|
||||
/* ========== 多张: 公共 ========== */
|
||||
.card-multi-photo {
|
||||
position: relative; z-index: 1; flex: 1;
|
||||
display: flex; flex-direction: column; gap: $sp-lg;
|
||||
/* 品牌 + 二维码 */
|
||||
.card-brand {
|
||||
padding: $sp-lg $sp-xl $sp-xl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.multi-top { display: flex; justify-content: space-between; align-items: center; }
|
||||
.multi-cups-badge {
|
||||
display: flex; align-items: baseline; gap: $sp-xs;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(232, 168, 56, 0.1);
|
||||
border: 1rpx solid rgba(232, 168, 56, 0.2);
|
||||
border-radius: $radius-full;
|
||||
.brand-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
.cups-badge-num { font-size: $fs-lg; font-weight: $fw-black; color: $amber; font-family: $font-num; }
|
||||
.cups-badge-label { font-size: $fs-xs; color: $text-secondary; }
|
||||
|
||||
/* 照片网格公共 */
|
||||
.photo-grid { border-radius: $radius-lg; overflow: hidden; }
|
||||
.grid-item {
|
||||
overflow: hidden;
|
||||
.brand-text {
|
||||
font-size: $fs-sm;
|
||||
color: $text-tertiary;
|
||||
font-weight: $fw-bold;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.brand-slogan {
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
.brand-qr {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: $radius-sm;
|
||||
position: relative;
|
||||
border: 2rpx solid rgba(232, 168, 56, 0.15);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
.grid-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.grid-row { display: flex; gap: 6rpx; }
|
||||
|
||||
/* --- 2张: 左6右4 --- */
|
||||
.grid-2 {
|
||||
display: flex; gap: 8rpx; height: 420rpx;
|
||||
}
|
||||
.grid-2 .gi-large { flex: 6; }
|
||||
.grid-2 .gi-medium { flex: 4; }
|
||||
|
||||
/* --- 3张: 左大右两小 --- */
|
||||
.grid-3 {
|
||||
display: flex; gap: 8rpx; height: 440rpx;
|
||||
}
|
||||
.grid-3 .gi-hero-left { flex: 1; }
|
||||
.grid-3 .gi-right-col {
|
||||
width: 45%; display: flex; flex-direction: column; gap: 8rpx;
|
||||
}
|
||||
.grid-3 .gi-half { flex: 1; border-radius: $radius-md; }
|
||||
|
||||
/* --- 4张: 2×2 --- */
|
||||
.grid-2x2 {
|
||||
display: flex; flex-wrap: wrap; gap: 6rpx; height: 460rpx;
|
||||
}
|
||||
.grid-2x2 .gi-quarter {
|
||||
width: calc(50% - 3rpx); height: calc(50% - 3rpx);
|
||||
}
|
||||
|
||||
/* --- 行式网格 (5-8张) --- */
|
||||
.grid-rows {
|
||||
display: flex; flex-direction: column; gap: 6rpx;
|
||||
}
|
||||
.grid-row-3 { display: flex; gap: 6rpx; height: 210rpx; }
|
||||
.grid-row-2 { display: flex; gap: 6rpx; height: 210rpx; }
|
||||
.grid-row-4 { display: flex; gap: 6rpx; height: 170rpx; }
|
||||
|
||||
.gi-third { flex: 1; }
|
||||
.gi-half-row { flex: 1; }
|
||||
.gi-quarter-row { flex: 1; }
|
||||
|
||||
/* --- 9张: 3×3 --- */
|
||||
.grid-3x3 {
|
||||
display: flex; flex-wrap: wrap; gap: 6rpx;
|
||||
}
|
||||
.grid-3x3 .gi-ninth {
|
||||
width: calc(33.33% - 4rpx); height: 190rpx;
|
||||
}
|
||||
|
||||
/* 底部信息 */
|
||||
.multi-bottom { display: flex; flex-direction: column; gap: $sp-md; }
|
||||
.multi-drinks-row { display: flex; flex-wrap: wrap; gap: $sp-sm; }
|
||||
.multi-drink-tag {
|
||||
display: inline-flex; padding: $sp-xs $sp-md;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: $radius-full;
|
||||
font-size: $fs-xs; color: $text-secondary;
|
||||
}
|
||||
.multi-meta-row { display: flex; gap: $sp-lg; }
|
||||
.multi-meta-item { font-size: $fs-sm; color: $text-secondary; }
|
||||
.multi-quote { display: flex; align-items: flex-start; }
|
||||
</style>
|
||||
|
||||
+306
-310
@@ -4,68 +4,43 @@
|
||||
<view class="step-back" @click="goBack">
|
||||
<text class="step-back-arrow">‹</text>
|
||||
</view>
|
||||
<text class="card-nav-title">你的酒局卡片</text>
|
||||
</view>
|
||||
|
||||
<view class="photo-hint" v-if="record">
|
||||
<text class="photo-hint-text">{{ photoHintText }}</text>
|
||||
</view>
|
||||
|
||||
<view class="template-switcher">
|
||||
<view v-for="t in templates" :key="t.id" class="template-option"
|
||||
:class="{ 'template-active': currentTemplate === t.id }" @click="currentTemplate = t.id">
|
||||
<view class="template-swatch" :style="{ background: t.swatch }">
|
||||
<view class="swatch-dot" v-if="currentTemplate === t.id"></view>
|
||||
</view>
|
||||
<text class="template-label">{{ t.name }}</text>
|
||||
<text class="template-desc">{{ t.desc }}</text>
|
||||
</view>
|
||||
<text class="card-nav-title">酒局卡片</text>
|
||||
</view>
|
||||
|
||||
<!-- 大卡片预览 -->
|
||||
<view class="card-preview-area">
|
||||
<DrinkCard v-if="record" :record="record" :template="currentTemplate" />
|
||||
<DrinkCard v-if="record" :record="record" />
|
||||
<view v-else class="card-empty">暂无记录</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="card-actions">
|
||||
<button class="btn-cta" :loading="saving" :disabled="saving" @click="saveToAlbum">
|
||||
{{ saving ? '保存中...' : '💾 保存到相册' }}
|
||||
<button class="btn-cta save-btn" :loading="saving" :disabled="saving" @click="saveToAlbum">
|
||||
<text>{{ saving ? '保存中...' : '保存到相册' }}</text>
|
||||
</button>
|
||||
<button class="btn-secondary share-btn" @click="shareToFriend">
|
||||
<text>分享给好友</text>
|
||||
</button>
|
||||
<view class="action-row">
|
||||
<button class="btn-secondary action-btn" @click="shareToFriend">🔗 分享好友</button>
|
||||
<button class="btn-secondary action-btn" @click="goHome">🏠 返回首页</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<canvas canvas-id="shareCanvas" class="export-canvas" :style="{width:'750px',height:'1200px'}"></canvas>
|
||||
<canvas canvas-id="shareCanvas" class="export-canvas" :style="{width:'750px',height:'1600px'}"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DrinkCard from '../../components/DrinkCard.vue'
|
||||
import { getRecords } from '../../common/mock-data'
|
||||
import { DRINK_CATEGORIES, FOOD_CATEGORIES, FEELINGS, DRINK_QUOTES } from '../../common/constants'
|
||||
import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES } from '../../common/constants'
|
||||
|
||||
const UNIT_NAMES = { ml: 'ml', liang: '两', bottle: '瓶', cup: '杯', can: '听', shot: 'shot' }
|
||||
|
||||
export default {
|
||||
components: { DrinkCard },
|
||||
data() {
|
||||
return {
|
||||
currentTemplate: 'amber',
|
||||
record: null,
|
||||
saving: false,
|
||||
templates: [
|
||||
{ id: 'amber', name: '琥珀流光', desc: '温暖金色调', swatch: 'linear-gradient(135deg, #1A1308, #0F0B06)' },
|
||||
{ id: 'aurora', name: '暗夜极光', desc: '冷色氛围感', swatch: 'linear-gradient(135deg, #0A0E1A, #0E0A1A)' },
|
||||
{ id: 'film', name: '胶片记忆', desc: '复古胶片风', swatch: 'linear-gradient(135deg, #141210, #0D0C0A)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
photoHintText() {
|
||||
if (!this.record) return ''
|
||||
const p = this.record.photos || []
|
||||
if (p.length === 0) return '📷 无照片 · 纯文字排版'
|
||||
if (p.length === 1) return '📸 单张照片 · 沉浸式全屏'
|
||||
return `🖼️ ${p.length}张照片 · 拼贴布局`
|
||||
saved: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -90,6 +65,7 @@ export default {
|
||||
const contentH = await this.drawExportCard()
|
||||
const path = await this.exportImg(contentH)
|
||||
await this.saveImg(path)
|
||||
this.saved = true
|
||||
uni.showToast({ title: '已保存到相册', icon: 'success' })
|
||||
} catch (e) {
|
||||
console.error('保存失败:', e)
|
||||
@@ -97,7 +73,6 @@ export default {
|
||||
} finally { this.saving = false }
|
||||
},
|
||||
|
||||
// 加载图片
|
||||
loadImg(src) {
|
||||
return new Promise(r => {
|
||||
if (!src) return r(null)
|
||||
@@ -105,206 +80,227 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// ===== 海报导出绘制（优化版） =====
|
||||
// ===== 海报绘制 =====
|
||||
async drawExportCard() {
|
||||
const ctx = uni.createCanvasContext('shareCanvas', this)
|
||||
const W = 750, H = 1200
|
||||
const P = 56 // 全局padding增大
|
||||
const W = 750, H = 1600
|
||||
const rec = this.record
|
||||
const tpl = this.currentTemplate
|
||||
|
||||
// 模板配色体系
|
||||
const TH = {
|
||||
amber: { bg: '#111111', bgGrad: '#1A1510', line: '#2A2218', accent: '#E8A838', accentLight: '#F5C963', tagBg: '#1E1A14', tagBorder: '#3A3228' },
|
||||
aurora: { bg: '#0E0E16', bgGrad: '#141420', line: '#1E1E2E', accent: '#5EC6A0', accentLight: '#8EDCBE', tagBg: '#141420', tagBorder: '#2A2A3E' },
|
||||
film: { bg: '#100F0D', bgGrad: '#181610', line: '#252218', accent: '#C8B48C', accentLight: '#DED0B0', tagBg: '#1A1814', tagBorder: '#352E22' }
|
||||
}
|
||||
const c = TH[tpl] || TH.amber
|
||||
const WHITE = '#F2F2F2'
|
||||
const SUB = '#B0B0B0'
|
||||
const GRAY = '#888888'
|
||||
const DIM = '#5A5A5A'
|
||||
const SUB = '#7E7E96'
|
||||
const DIM = '#4A4A62'
|
||||
const AMBER = '#E8A838'
|
||||
const F = '-apple-system, PingFang SC, Helvetica Neue, sans-serif'
|
||||
|
||||
// ===== 背景绘制 =====
|
||||
ctx.setFillStyle(c.bg)
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
// 底部微渐变装饰
|
||||
ctx.setFillStyle(c.bgGrad)
|
||||
ctx.setGlobalAlpha(0.5)
|
||||
ctx.fillRect(0, H * 0.6, W, H * 0.4)
|
||||
ctx.setGlobalAlpha(1)
|
||||
// 顶部强调线条（加粗）
|
||||
ctx.setFillStyle(c.accent)
|
||||
ctx.fillRect(0, 0, W, 5)
|
||||
const cardW = W
|
||||
const cardX = 0
|
||||
const cardY = 0
|
||||
const R = 0
|
||||
const P = 48
|
||||
const maxW = cardW - 96
|
||||
const gap = 12
|
||||
const colW = (maxW - gap) / 2
|
||||
|
||||
let y = P + 16
|
||||
// 计算照片区域高度
|
||||
const photoCount = (rec.photos || []).length
|
||||
let photoAreaH = 0
|
||||
if (photoCount === 0) photoAreaH = 248 // emoji
|
||||
else if (photoCount === 1) photoAreaH = 320
|
||||
else if (photoCount === 2) photoAreaH = colW
|
||||
else if (photoCount === 3) photoAreaH = 240 + gap + colW
|
||||
else if (photoCount === 4) photoAreaH = 2 * colW + gap
|
||||
else if (photoCount === 5) photoAreaH = 240 + gap + 2 * (colW + gap) - gap
|
||||
else photoAreaH = 3 * colW + 2 * gap
|
||||
|
||||
// ===== 顶部行：日期药丸 + 标准杯 =====
|
||||
// 日期药丸样式
|
||||
const dateStr = rec.date || ''
|
||||
// 动态计算卡片高度
|
||||
const drinks = rec.drinks || []
|
||||
const drinkH = drinks.length * 52
|
||||
const foodH = rec.food ? 52 : 0
|
||||
const cardH = 48 + 56 + photoAreaH + 32 + drinkH + foodH + 16 + 40 + 36 + 56 + 80 + 40
|
||||
|
||||
// 卡片背景渐变（填满整个画布）
|
||||
const grad = ctx.createLinearGradient(0, 0, cardW, cardY + cardH)
|
||||
grad.addColorStop(0, '#1A1510')
|
||||
grad.addColorStop(1, '#0D0B08')
|
||||
ctx.setFillStyle(grad)
|
||||
ctx.fillRect(0, 0, W, cardH)
|
||||
|
||||
let y = cardY + 48
|
||||
|
||||
// 日期
|
||||
ctx.font = `500 22px ${F}`
|
||||
const dateW = ctx.measureText(dateStr).width + 28
|
||||
const pillH = 36, pillR = 18
|
||||
ctx.setFillStyle(c.tagBg)
|
||||
this.rr(ctx, P, y - 4, dateW, pillH, pillR, 'fill')
|
||||
ctx.setStrokeStyle(c.tagBorder)
|
||||
ctx.setLineWidth(1)
|
||||
this.rr(ctx, P, y - 4, dateW, pillH, pillR, 'stroke')
|
||||
ctx.font = `500 22px ${F}`
|
||||
ctx.setFillStyle(SUB)
|
||||
ctx.fillText(dateStr, P + 14, y + 18)
|
||||
ctx.setFillStyle(DIM)
|
||||
ctx.fillText(rec.date || '', P, y)
|
||||
y += 56
|
||||
|
||||
// 标准杯：数字+文字垂直堆叠（右对齐）
|
||||
const num = String(rec.standardCupsTotal)
|
||||
ctx.font = `800 44px ${F}`
|
||||
ctx.setFillStyle(c.accent)
|
||||
const nw = ctx.measureText(num).width
|
||||
ctx.font = `normal 18px ${F}`
|
||||
const lw = ctx.measureText('标准杯').width
|
||||
const cupBlockW = Math.max(nw, lw) + 4
|
||||
const cupX = W - P - cupBlockW
|
||||
ctx.font = `800 44px ${F}`
|
||||
ctx.setFillStyle(c.accent)
|
||||
ctx.fillText(num, cupX + (cupBlockW - nw) / 2, y + 16)
|
||||
ctx.font = `normal 18px ${F}`
|
||||
ctx.setFillStyle(GRAY)
|
||||
ctx.fillText('标准杯', cupX + (cupBlockW - lw) / 2, y + 34)
|
||||
y += 58
|
||||
|
||||
// ===== 照片区域 =====
|
||||
// 照片区域
|
||||
const photos = rec.photos || []
|
||||
if (photos.length > 0) {
|
||||
const loaded = await Promise.all(photos.slice(0, 9).map(p => this.loadImg(p)))
|
||||
const ph = this.drawPhotos(ctx, loaded, P, y, W - P * 2, c.accent)
|
||||
// 照片底部渐变蒙版
|
||||
const gradH = 80
|
||||
const grd = ctx.createLinearGradient(P, y + ph - gradH, P, y + ph)
|
||||
grd.addColorStop(0, 'rgba(0,0,0,0)')
|
||||
grd.addColorStop(1, 'rgba(0,0,0,0.45)')
|
||||
ctx.setFillStyle(grd)
|
||||
ctx.fillRect(P, y + ph - gradH, W - P * 2, gradH)
|
||||
y += ph + 28
|
||||
}
|
||||
// 预加载所有照片
|
||||
const imgs = await Promise.all(photos.map(p => this.loadImg(p)))
|
||||
|
||||
// ===== 酒水信息行 =====
|
||||
const drinks = rec.drinks || []
|
||||
if (drinks.length > 0) {
|
||||
ctx.font = `bold 30px ${F}`
|
||||
if (photos.length === 1) {
|
||||
// 1张：大图
|
||||
const heroH = 320
|
||||
ctx.save()
|
||||
this.rr(ctx, P, y, maxW, heroH, 16, 'fill')
|
||||
ctx.clip()
|
||||
if (imgs[0]) {
|
||||
try { ctx.drawImage(imgs[0], P, y, maxW, heroH) } catch (e) {}
|
||||
} else {
|
||||
ctx.setFillStyle('rgba(255,255,255,0.03)')
|
||||
ctx.fillRect(P, y, maxW, heroH)
|
||||
}
|
||||
ctx.restore()
|
||||
y += heroH + 32
|
||||
} else {
|
||||
// 2-6张：网格布局
|
||||
const positions = []
|
||||
|
||||
if (photos.length % 2 !== 0) {
|
||||
// 奇数张：第一张占满两列
|
||||
const heroH = 240
|
||||
positions.push({ x: P, y: y, w: maxW, h: heroH })
|
||||
const rowStart = y + heroH + gap
|
||||
for (let i = 1; i < photos.length; i += 2) {
|
||||
const row = Math.floor((i - 1) / 2)
|
||||
const rowY = rowStart + row * (colW + gap)
|
||||
positions.push({ x: P, y: rowY, w: colW, h: colW })
|
||||
if (i + 1 < photos.length) {
|
||||
positions.push({ x: P + colW + gap, y: rowY, w: colW, h: colW })
|
||||
}
|
||||
}
|
||||
const totalRows = Math.ceil((photos.length - 1) / 2)
|
||||
y = rowStart + totalRows * (colW + gap) - gap + 32
|
||||
} else {
|
||||
// 偶数张：全部两列
|
||||
for (let i = 0; i < photos.length; i += 2) {
|
||||
const row = i / 2
|
||||
const rowY = y + row * (colW + gap)
|
||||
positions.push({ x: P, y: rowY, w: colW, h: colW })
|
||||
positions.push({ x: P + colW + gap, y: rowY, w: colW, h: colW })
|
||||
}
|
||||
const totalRows = photos.length / 2
|
||||
y = y + totalRows * (colW + gap) - gap + 32
|
||||
}
|
||||
|
||||
// 绘制每张照片
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
const pos = positions[i]
|
||||
ctx.save()
|
||||
this.rr(ctx, pos.x, pos.y, pos.w, pos.h, 12, 'fill')
|
||||
ctx.clip()
|
||||
if (imgs[i]) {
|
||||
try { ctx.drawImage(imgs[i], pos.x, pos.y, pos.w, pos.h) } catch (e) {}
|
||||
} else {
|
||||
ctx.setFillStyle('rgba(255,255,255,0.03)')
|
||||
ctx.fillRect(pos.x, pos.y, pos.w, pos.h)
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// emoji 圆形
|
||||
const eR = 100
|
||||
const eCx = W / 2, eCy = y + eR
|
||||
ctx.setFillStyle('rgba(232,168,56,0.08)')
|
||||
ctx.beginPath()
|
||||
ctx.arc(eCx, eCy, eR, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
const firstDrink = (rec.drinks || [])[0]
|
||||
const cat = firstDrink ? DRINK_CATEGORIES.find(cc => cc.id === firstDrink.category) : null
|
||||
const emoji = cat ? cat.emoji : '🥃'
|
||||
ctx.font = `90px ${F}`
|
||||
ctx.setFillStyle(WHITE)
|
||||
let line = ''
|
||||
drinks.forEach(d => {
|
||||
const cat = DRINK_CATEGORIES.find(cc => cc.id === d.category)
|
||||
const nm = cat ? cat.name : '酒水'
|
||||
line += (line ? ' · ' : '') + `${nm} ${d.brand} · ${d.standardCups}杯`
|
||||
})
|
||||
ctx.fillText(line, P, y + 24)
|
||||
y += 48
|
||||
ctx.fillText(emoji, eCx - 45, eCy + 30)
|
||||
y += eR * 2 + 48
|
||||
}
|
||||
|
||||
// ===== 配餐 + 感受 胶囊标签 =====
|
||||
let tags = []
|
||||
let tagTypes = [] // 'food' | 'feeling'
|
||||
// 酒水清单
|
||||
drinks.forEach(d => {
|
||||
const cat = DRINK_CATEGORIES.find(cc => cc.id === d.category)
|
||||
const emoji = cat ? cat.emoji : '🥃'
|
||||
const name = `${emoji} ${d.brand}`
|
||||
const unitName = UNIT_NAMES[d.unit] || d.unit
|
||||
const detail = `${d.amount}${unitName}·${d.standardCups}杯`
|
||||
|
||||
ctx.font = `500 28px ${F}`
|
||||
ctx.setFillStyle(WHITE)
|
||||
ctx.fillText(name, P, y)
|
||||
|
||||
ctx.font = `bold 24px ${F}`
|
||||
ctx.setFillStyle(AMBER)
|
||||
const dw = ctx.measureText(detail).width
|
||||
ctx.fillText(detail, W - P - dw, y)
|
||||
|
||||
y += 52
|
||||
})
|
||||
|
||||
// 配餐
|
||||
if (rec.food) {
|
||||
const food = FOOD_CATEGORIES.find(f => f.id === rec.food.category)
|
||||
if (food) {
|
||||
tags.push(rec.food.name ? `${food.name} · ${rec.food.name}` : food.name)
|
||||
tagTypes.push('food')
|
||||
}
|
||||
}
|
||||
if (rec.feeling) {
|
||||
const f = FEELINGS.find(fe => fe.id === rec.feeling)
|
||||
if (f) { tags.push(f.name); tagTypes.push('feeling') }
|
||||
}
|
||||
if (tags.length > 0) {
|
||||
let tx = P
|
||||
ctx.font = `normal 22px ${F}`
|
||||
tags.forEach((tag, i) => {
|
||||
const tw = ctx.measureText(tag).width + 32
|
||||
const th = 36
|
||||
// 胶囊背景+边框
|
||||
ctx.setFillStyle(c.tagBg)
|
||||
this.rr(ctx, tx, y, tw, th, th / 2, 'fill')
|
||||
ctx.setStrokeStyle(tagTypes[i] === 'food' ? c.accent : c.accentLight)
|
||||
ctx.setLineWidth(1)
|
||||
this.rr(ctx, tx, y, tw, th, th / 2, 'stroke')
|
||||
// 标签文字（场景用强调色，感受用次要白）
|
||||
ctx.setFillStyle(tagTypes[i] === 'food' ? c.accentLight : SUB)
|
||||
ctx.fillText(tag, tx + 16, y + 24)
|
||||
tx += tw + 14
|
||||
})
|
||||
y += 56
|
||||
const name = `🍲 ${food ? food.name : '美食'}`
|
||||
ctx.font = `500 28px ${F}`
|
||||
ctx.setFillStyle(WHITE)
|
||||
ctx.fillText(name, P, y)
|
||||
y += 52
|
||||
}
|
||||
|
||||
// ===== 分隔线 =====
|
||||
ctx.setStrokeStyle(c.line)
|
||||
ctx.setLineWidth(1)
|
||||
// 分割线（渐变）
|
||||
y += 16
|
||||
const lineGrad = ctx.createLinearGradient(P, y, W - P, y)
|
||||
lineGrad.addColorStop(0, 'transparent')
|
||||
lineGrad.addColorStop(0.5, 'rgba(232,168,56,0.15)')
|
||||
lineGrad.addColorStop(1, 'transparent')
|
||||
ctx.setStrokeStyle(lineGrad)
|
||||
ctx.setLineWidth(2)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(P, y)
|
||||
ctx.lineTo(W - P, y)
|
||||
ctx.stroke()
|
||||
y += 28
|
||||
y += 40
|
||||
|
||||
// ===== 酒言酒语（优化装饰） =====
|
||||
const quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
|
||||
// 左侧装饰竖条（加宽、渐变感）
|
||||
ctx.setFillStyle(c.accent)
|
||||
this.rr(ctx, P, y + 2, 5, 48, 2.5, 'fill')
|
||||
// 装饰引号（大字、半透明）
|
||||
ctx.font = `bold 60px ${F}`
|
||||
ctx.setGlobalAlpha(0.15)
|
||||
ctx.setFillStyle(c.accentLight)
|
||||
ctx.fillText('\u201C', P + 16, y + 44)
|
||||
ctx.setGlobalAlpha(1)
|
||||
// 引文内容
|
||||
ctx.font = `italic 26px ${F}`
|
||||
ctx.setFillStyle(SUB)
|
||||
const maxQW = W - P * 2 - 40
|
||||
let dq = quote
|
||||
if (ctx.measureText(dq).width > maxQW) {
|
||||
while (dq.length > 0 && ctx.measureText(dq + '...').width > maxQW) dq = dq.slice(0, -1)
|
||||
dq += '...'
|
||||
}
|
||||
ctx.fillText(dq, P + 20, y + 32)
|
||||
y += 72
|
||||
|
||||
// ===== 底部品牌栏 =====
|
||||
ctx.setStrokeStyle(c.line)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(P, y)
|
||||
ctx.lineTo(W - P, y)
|
||||
ctx.stroke()
|
||||
y += 32
|
||||
|
||||
// 品牌名 + 副标语纵向排列
|
||||
ctx.font = `bold 28px ${F}`
|
||||
ctx.setFillStyle(WHITE)
|
||||
ctx.fillText('喝了么', P, y + 20)
|
||||
// 喝后心得
|
||||
ctx.font = `normal 20px ${F}`
|
||||
ctx.setFillStyle(DIM)
|
||||
ctx.fillText('记录每一杯的故事', P, y + 50)
|
||||
ctx.fillText('喝后心得', P, y)
|
||||
y += 36
|
||||
|
||||
// 二维码占位（优化样式）
|
||||
const qr = 80, qx = W - P - qr, qy = y + 2
|
||||
ctx.setFillStyle(c.tagBg)
|
||||
this.rr(ctx, qx, qy, qr, qr, 10, 'fill')
|
||||
ctx.setStrokeStyle(c.tagBorder)
|
||||
ctx.setLineWidth(1.5)
|
||||
this.rr(ctx, qx, qy, qr, qr, 10, 'stroke')
|
||||
ctx.font = `500 16px ${F}`
|
||||
ctx.setFillStyle(GRAY)
|
||||
const sw = ctx.measureText('扫码').width
|
||||
ctx.fillText('扫码', qx + (qr - sw) / 2, qy + qr / 2 + 6)
|
||||
const quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
|
||||
ctx.font = `italic 24px ${F}`
|
||||
ctx.setFillStyle(SUB)
|
||||
let dq = `"${quote}"`
|
||||
if (ctx.measureText(dq).width > maxW) {
|
||||
while (dq.length > 0 && ctx.measureText(dq + '..."').width > maxW) dq = dq.slice(0, -1)
|
||||
dq += '..."'
|
||||
}
|
||||
ctx.fillText(dq, P, y)
|
||||
y += 56
|
||||
|
||||
// 计算实际内容高度（用于动态裁剪导出）
|
||||
const contentH = qy + qr + P
|
||||
// 品牌 + 二维码
|
||||
ctx.font = `bold 22px ${F}`
|
||||
ctx.setFillStyle(DIM)
|
||||
ctx.fillText('🍻 喝了么', P, y + 16)
|
||||
y += 30
|
||||
ctx.font = `normal 18px ${F}`
|
||||
ctx.setFillStyle(DIM)
|
||||
ctx.fillText('记录每一杯的故事', P, y + 16)
|
||||
|
||||
// 二维码占位框
|
||||
const qrSize = 80
|
||||
const qrX = W - P - qrSize
|
||||
const qrY = y - 30
|
||||
ctx.setStrokeStyle('rgba(232,168,56,0.15)')
|
||||
ctx.setLineWidth(2)
|
||||
this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'stroke')
|
||||
ctx.setFillStyle('rgba(255,255,255,0.03)')
|
||||
this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'fill')
|
||||
|
||||
return new Promise(resolve => {
|
||||
ctx.draw(false, () => setTimeout(() => resolve(contentH), 600))
|
||||
ctx.draw(false, () => setTimeout(() => resolve(cardH), 600))
|
||||
})
|
||||
},
|
||||
|
||||
// 圆角矩形
|
||||
rr(ctx, x, y, w, h, r, act) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + r, y)
|
||||
@@ -317,77 +313,9 @@ export default {
|
||||
else ctx.fill()
|
||||
},
|
||||
|
||||
// 照片网格
|
||||
drawPhotos(ctx, photos, x, y, maxW, accent) {
|
||||
const gap = 8, r = 12
|
||||
const n = Math.min(photos.length, 9)
|
||||
let h = 0
|
||||
|
||||
if (n === 1) {
|
||||
h = 440
|
||||
this.ci(ctx, photos[0], x, y, maxW, h, r, accent)
|
||||
} else if (n === 2) {
|
||||
h = 360
|
||||
const w1 = maxW * 0.6 - gap / 2, w2 = maxW * 0.4 - gap / 2
|
||||
this.ci(ctx, photos[0], x, y, w1, h, r, accent)
|
||||
this.ci(ctx, photos[1], x + w1 + gap, y, w2, h, r, accent)
|
||||
} else if (n === 3) {
|
||||
h = 380
|
||||
const w1 = maxW * 0.55 - gap / 2, w2 = maxW * 0.45 - gap / 2
|
||||
const hh = (h - gap) / 2
|
||||
this.ci(ctx, photos[0], x, y, w1, h, r, accent)
|
||||
this.ci(ctx, photos[1], x + w1 + gap, y, w2, hh, r, accent)
|
||||
this.ci(ctx, photos[2], x + w1 + gap, y + hh + gap, w2, hh, r, accent)
|
||||
} else if (n === 4) {
|
||||
h = 400
|
||||
const hw = (maxW - gap) / 2, hh = (h - gap) / 2
|
||||
for (let i = 0; i < 4; i++) {
|
||||
this.ci(ctx, photos[i], x + (i % 2) * (hw + gap), y + Math.floor(i / 2) * (hh + gap), hw, hh, r, accent)
|
||||
}
|
||||
} else {
|
||||
h = 0
|
||||
const rows = this.getRows(n)
|
||||
const ih = n <= 6 ? 200 : 150
|
||||
rows.forEach((rc, ri) => {
|
||||
const iw = (maxW - gap * (rc - 1)) / rc
|
||||
for (let ci = 0; ci < rc; ci++) {
|
||||
const idx = rows.slice(0, ri).reduce((a, b) => a + b, 0) + ci
|
||||
if (idx < photos.length) this.ci(ctx, photos[idx], x + ci * (iw + gap), y + h, iw, ih, r, accent)
|
||||
}
|
||||
h += ih + gap
|
||||
})
|
||||
h -= gap
|
||||
}
|
||||
return h
|
||||
},
|
||||
|
||||
ci(ctx, src, x, y, w, h, r, accent) {
|
||||
ctx.save()
|
||||
this.rr(ctx, x, y, w, h, r)
|
||||
ctx.clip()
|
||||
if (src) {
|
||||
try { ctx.drawImage(src, x, y, w, h) } catch (e) {
|
||||
ctx.setFillStyle(accent); ctx.setGlobalAlpha(0.05)
|
||||
ctx.fillRect(x, y, w, h); ctx.setGlobalAlpha(1)
|
||||
}
|
||||
} else {
|
||||
ctx.setFillStyle('#1A1A1A'); ctx.fillRect(x, y, w, h)
|
||||
}
|
||||
ctx.restore()
|
||||
},
|
||||
|
||||
getRows(n) {
|
||||
if (n === 5) return [3, 2]
|
||||
if (n === 6) return [3, 3]
|
||||
if (n === 7) return [3, 4]
|
||||
if (n === 8) return [4, 4]
|
||||
return [3, 3, 3]
|
||||
},
|
||||
|
||||
// 导出（动态裁剪到实际内容区域）
|
||||
exportImg(contentH) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const cropH = Math.min(contentH || 1200, 1200)
|
||||
const cropH = Math.min(contentH || 1600, 1600)
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'shareCanvas', quality: 1,
|
||||
x: 0, y: 0, width: 750, height: cropH,
|
||||
@@ -398,7 +326,6 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// 保存
|
||||
saveImg(fp) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
@@ -417,56 +344,125 @@ export default {
|
||||
},
|
||||
|
||||
shareToFriend() { uni.showToast({ title: '点击右上角分享', icon: 'none' }) },
|
||||
goHome() { uni.switchTab({ url: '/pages/index/index' }) },
|
||||
goBack() { uni.navigateBack() }
|
||||
|
||||
goBack() {
|
||||
if (this.saved) {
|
||||
uni.navigateBack()
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '离开前保存海报？',
|
||||
content: '海报还未保存到相册，离开后需要重新生成。',
|
||||
confirmText: '保存并离开',
|
||||
cancelText: '直接离开',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await this.saveToAlbum()
|
||||
}
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return { title: '今晚的酒局记录 - 喝了么', path: '/pages/index/index' }
|
||||
},
|
||||
onBackPress() {
|
||||
this.goBack()
|
||||
return true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-page {
|
||||
padding: $sp-lg;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
|
||||
display: flex; flex-direction: column; min-height: 100vh;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: $bg-base;
|
||||
}
|
||||
|
||||
.card-nav {
|
||||
display: flex; align-items: center; gap: $sp-md; padding: $sp-md 0 $sp-lg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-md;
|
||||
padding: $sp-md $sp-lg;
|
||||
}
|
||||
|
||||
.step-back {
|
||||
width: 64rpx; height: 64rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: $radius-full; background: $bg-card;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius-full;
|
||||
background: $bg-card;
|
||||
}
|
||||
.step-back-arrow { font-size: $fs-xl; color: $text-secondary; font-weight: $fw-bold; }
|
||||
.card-nav-title { font-size: $fs-lg; font-weight: $fw-bold; }
|
||||
.photo-hint { text-align: center; margin-bottom: $sp-md; }
|
||||
.photo-hint-text { font-size: $fs-xs; color: $text-tertiary; }
|
||||
.template-switcher { display: flex; gap: $sp-md; margin-bottom: $sp-xl; justify-content: center; }
|
||||
.template-option {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: $sp-xs; padding: $sp-sm $sp-md; border-radius: $radius-lg;
|
||||
border: 2rpx solid rgba(255,255,255,0.05);
|
||||
background: rgba(255,255,255,0.02);
|
||||
transition: all $duration-fast $ease-out; flex: 1; max-width: 220rpx;
|
||||
&.template-active { border-color: $amber; background: rgba(232,168,56,0.05); }
|
||||
|
||||
.step-back-arrow {
|
||||
font-size: $fs-xl;
|
||||
color: $text-secondary;
|
||||
font-weight: $fw-bold;
|
||||
}
|
||||
.template-swatch {
|
||||
width: 64rpx; height: 80rpx; border-radius: $radius-md;
|
||||
border: 2rpx solid rgba(255,255,255,0.1); position: relative;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
|
||||
.card-nav-title {
|
||||
font-size: $fs-lg;
|
||||
font-weight: $fw-bold;
|
||||
color: $text-primary;
|
||||
}
|
||||
.swatch-dot { width: 12rpx; height: 12rpx; border-radius: $radius-full; background: $amber; }
|
||||
.template-label { font-size: $fs-xs; color: $text-primary; font-weight: $fw-medium; }
|
||||
.template-desc { font-size: 18rpx; color: $text-tertiary; }
|
||||
|
||||
/* 大卡片预览区 */
|
||||
.card-preview-area {
|
||||
flex: 1; display: flex; align-items: flex-start;
|
||||
justify-content: center; margin-bottom: $sp-xl; width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $sp-lg;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.card-empty {
|
||||
color: $text-tertiary;
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.card-actions {
|
||||
padding: $sp-lg;
|
||||
padding-bottom: calc($sp-lg + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-md;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
border-radius: $radius-full;
|
||||
font-size: $fs-lg;
|
||||
font-weight: $fw-bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
border-radius: $radius-full;
|
||||
font-size: $fs-base;
|
||||
background: transparent;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
||||
color: $text-secondary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.export-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
}
|
||||
.card-actions { padding-bottom: $sp-xl; }
|
||||
.action-row { display: flex; gap: $sp-md; margin-top: $sp-md; }
|
||||
.action-btn { flex: 1; }
|
||||
.export-canvas { position: fixed; left: -9999px; top: -9999px; }
|
||||
</style>
|
||||
|
||||
+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>
|
||||
|
||||
+39
-223
@@ -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>
|
||||
|
||||
@@ -257,13 +257,13 @@
|
||||
<text>✕</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="photos.length < 9" class="photo-add" @click="choosePhoto">
|
||||
<view v-if="photos.length < 6" class="photo-add" @click="choosePhoto">
|
||||
<text class="photo-add-icon">📷</text>
|
||||
<text class="photo-add-text">拍照/相册</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="photo-tip">
|
||||
<text class="text-caption">最多选择9张照片，记录今夜的精彩瞬间</text>
|
||||
<text class="text-caption">最多选择6张照片，记录今夜的精彩瞬间</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -472,7 +472,7 @@ export default {
|
||||
},
|
||||
choosePhoto() {
|
||||
uni.chooseImage({
|
||||
count: 9 - this.photos.length,
|
||||
count: 6 - this.photos.length,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
|
||||
Reference in New Issue
Block a user