refactor(components): 重构饮酒卡片组件的多照片布局和样式结构
- 将多照片布局从拼贴模式改为网格系统，支持2-9张照片的不同排列 - 优化卡片宽度为650rpx并调整整体布局结构 - 更新品牌底栏为左右分栏布局并添加二维码区域 - 简化模板数量计算逻辑，合并少照片情况的处理 - 为单照片模式添加object-fit: cover确保图片填充效果 - 移除多余的换行和注释，精简代码结构 - 调整CSS样式以适应新的网格布局系统
This commit is contained in:
+1
-1
@@ -113,7 +113,7 @@ export function generateMockRecords() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 初始化并缓存Mock数据
|
// 初始化并缓存Mock数据
|
||||||
export function initMockData() {
|
export function initMockData() {自己看
|
||||||
const records = generateMockRecords()
|
const records = generateMockRecords()
|
||||||
uni.setStorageSync('drink_records', JSON.stringify(records))
|
uni.setStorageSync('drink_records', JSON.stringify(records))
|
||||||
uni.setStorageSync('user_info', JSON.stringify(MOCK_USER))
|
uni.setStorageSync('user_info', JSON.stringify(MOCK_USER))
|
||||||
|
|||||||
+239
-514
@@ -6,17 +6,14 @@
|
|||||||
<view class="bg-circle bg-circle-2"></view>
|
<view class="bg-circle bg-circle-2"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- ====== 无照片: 纯文字排版 ====== -->
|
<!-- ====== 0张: 纯文字排版 ====== -->
|
||||||
<view v-if="photos.length === 0" class="card-no-photo">
|
<view v-if="photos.length === 0" class="card-no-photo">
|
||||||
<view class="no-photo-header">
|
<view class="no-photo-header">
|
||||||
<view class="date-badge">
|
<view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
|
||||||
<text class="date-text">{{ record.date }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="feeling-tag" v-if="record.feeling">
|
<view class="feeling-tag" v-if="record.feeling">
|
||||||
<text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
<text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="no-photo-hero">
|
<view class="no-photo-hero">
|
||||||
<view class="hero-drink-list">
|
<view class="hero-drink-list">
|
||||||
<view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
|
<view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
|
||||||
@@ -29,7 +26,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="no-photo-stats">
|
<view class="no-photo-stats">
|
||||||
<view class="stat-pill">
|
<view class="stat-pill">
|
||||||
<text class="stat-num">{{ record.standardCupsTotal }}</text>
|
<text class="stat-num">{{ record.standardCupsTotal }}</text>
|
||||||
@@ -41,36 +37,29 @@
|
|||||||
<text class="stat-label">{{ getFoodName() }}</text>
|
<text class="stat-label">{{ getFoodName() }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="no-photo-quote">
|
<view class="no-photo-quote">
|
||||||
<text class="quote-mark">"</text>
|
<text class="quote-mark">"</text>
|
||||||
<text class="quote-text">{{ quote }}</text>
|
<text class="quote-text">{{ quote }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- ====== 1张照片: 全屏沉浸式 ====== -->
|
<!-- ====== 1张: 全屏沉浸式 ====== -->
|
||||||
<view v-else-if="photos.length === 1" class="card-one-photo">
|
<view v-else-if="photos.length === 1" class="card-one-photo">
|
||||||
<image class="one-photo-bg" :src="photos[0]" mode="aspectFill"></image>
|
<image class="one-photo-bg" :src="photos[0]"></image>
|
||||||
<view class="one-photo-overlay"></view>
|
<view class="one-photo-overlay"></view>
|
||||||
|
|
||||||
<view class="one-photo-top">
|
<view class="one-photo-top">
|
||||||
<view class="date-badge light">
|
<view class="date-badge light"><text class="date-text">{{ record.date }}</text></view>
|
||||||
<text class="date-text">{{ record.date }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="one-photo-bottom">
|
<view class="one-photo-bottom">
|
||||||
<view class="photo-drink-chips">
|
<view class="photo-drink-chips">
|
||||||
<view v-for="(drink, i) in record.drinks" :key="i" class="drink-chip">
|
<view v-for="(drink, i) in record.drinks" :key="i" class="drink-chip">
|
||||||
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} {{ drink.standardCups }}杯</text>
|
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} {{ drink.standardCups }}杯</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="photo-stats-row">
|
<view class="photo-stats-row">
|
||||||
<text class="photo-total-cups">{{ record.standardCupsTotal }} 标准杯</text>
|
<text class="photo-total-cups">{{ record.standardCupsTotal }} 标准杯</text>
|
||||||
<text v-if="record.feeling" class="photo-feeling">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
<text v-if="record.feeling" class="photo-feeling">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="photo-quote-line">
|
<view class="photo-quote-line">
|
||||||
<text class="quote-mark light">"</text>
|
<text class="quote-mark light">"</text>
|
||||||
<text class="quote-text light">{{ quote }}</text>
|
<text class="quote-text light">{{ quote }}</text>
|
||||||
@@ -78,82 +67,112 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- ====== 多张照片: 拼贴布局 ====== -->
|
<!-- ====== 多张: 拼贴布局 ====== -->
|
||||||
<view v-else class="card-multi-photo">
|
<view v-else class="card-multi-photo">
|
||||||
<!-- 顶部信息条 -->
|
|
||||||
<view class="multi-top">
|
<view class="multi-top">
|
||||||
<view class="date-badge">
|
<view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
|
||||||
<text class="date-text">{{ record.date }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="multi-cups-badge">
|
<view class="multi-cups-badge">
|
||||||
<text class="cups-badge-num">{{ record.standardCupsTotal }}</text>
|
<text class="cups-badge-num">{{ record.standardCupsTotal }}</text>
|
||||||
<text class="cups-badge-label">标准杯</text>
|
<text class="cups-badge-label">标准杯</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 照片拼贴区域 -->
|
<!-- 2张: 左6右4 -->
|
||||||
<view class="photo-collage" :class="'collage-' + photoLayout">
|
<view v-if="photos.length === 2" class="photo-grid grid-2">
|
||||||
<!-- 2张: 左大右小 -->
|
<view class="grid-item gi-large"><image :src="photos[0]" class="grid-img"></image></view>
|
||||||
<template v-if="photos.length === 2">
|
<view class="grid-item gi-medium"><image :src="photos[1]" class="grid-img"></image></view>
|
||||||
<view class="collage-item collage-large">
|
|
||||||
<image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="collage-item collage-small">
|
|
||||||
<image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 3张: 左大右两小 -->
|
<!-- 3张: 左大右两小 -->
|
||||||
<template v-else-if="photos.length === 3">
|
<view v-else-if="photos.length === 3" class="photo-grid grid-3">
|
||||||
<view class="collage-item c3-left">
|
<view class="grid-item gi-hero-left"><image :src="photos[0]" class="grid-img"></image></view>
|
||||||
<image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
|
<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>
|
||||||
<view class="c3-right">
|
|
||||||
<view class="collage-item c3-right-top">
|
|
||||||
<image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
|
||||||
<view class="collage-item c3-right-bottom">
|
|
||||||
<image :src="photos[2]" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 4张: 田字格 -->
|
|
||||||
<template v-else-if="photos.length === 4">
|
|
||||||
<view v-for="(p, i) in photos.slice(0, 4)" :key="i" class="collage-item collage-quarter">
|
|
||||||
<image :src="p" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 5+张: 瀑布流 -->
|
|
||||||
<template v-else>
|
|
||||||
<view class="collage-item collage-hero">
|
|
||||||
<image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
|
||||||
<view class="collage-strip">
|
|
||||||
<view v-for="(p, i) in photos.slice(1, 5)" :key="i" class="collage-item collage-strip-item">
|
|
||||||
<image :src="p" mode="aspectFill" class="collage-img"></image>
|
|
||||||
</view>
|
|
||||||
<view v-if="photos.length > 5" class="collage-more">
|
|
||||||
<text>+{{ photos.length - 5 }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</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-bottom">
|
||||||
<view class="multi-drinks-row">
|
<view class="multi-drinks-row">
|
||||||
<view v-for="(drink, i) in record.drinks" :key="i" class="multi-drink-tag">
|
<view v-for="(drink, i) in record.drinks" :key="i" class="multi-drink-tag">
|
||||||
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} · {{ drink.standardCups }}杯</text>
|
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} · {{ drink.standardCups }}杯</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="multi-meta-row">
|
<view class="multi-meta-row">
|
||||||
<text v-if="record.food" class="multi-meta-item">🍲 {{ getFoodName() }}</text>
|
<text v-if="record.food" class="multi-meta-item">🍲 {{ getFoodName() }}</text>
|
||||||
<text v-if="record.feeling" class="multi-meta-item">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
<text v-if="record.feeling" class="multi-meta-item">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="multi-quote">
|
<view class="multi-quote">
|
||||||
<text class="quote-mark">"</text>
|
<text class="quote-mark">"</text>
|
||||||
<text class="quote-text">{{ quote }}</text>
|
<text class="quote-text">{{ quote }}</text>
|
||||||
@@ -161,12 +180,16 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 统一底部品牌 -->
|
<!-- 统一底部品牌 + 二维码 -->
|
||||||
<view class="card-brand-bar">
|
<view class="card-brand-bar">
|
||||||
|
<view class="brand-left">
|
||||||
<text class="brand-name">🍻 喝酒了么</text>
|
<text class="brand-name">🍻 喝酒了么</text>
|
||||||
<view class="brand-dot"></view>
|
|
||||||
<text class="brand-slogan">记录每一杯的故事</text>
|
<text class="brand-slogan">记录每一杯的故事</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="brand-qr">
|
||||||
|
<text class="brand-qr-text">扫码</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -191,9 +214,7 @@ export default {
|
|||||||
const len = this.photos.length
|
const len = this.photos.length
|
||||||
if (len === 0) return 'none'
|
if (len === 0) return 'none'
|
||||||
if (len === 1) return 'one'
|
if (len === 1) return 'one'
|
||||||
if (len === 2) return 'two'
|
if (len <= 4) return 'few'
|
||||||
if (len === 3) return 'three'
|
|
||||||
if (len === 4) return 'four'
|
|
||||||
return 'many'
|
return 'many'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -223,7 +244,7 @@ export default {
|
|||||||
/* ========== 根容器 ========== */
|
/* ========== 根容器 ========== */
|
||||||
.card-root {
|
.card-root {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 650rpx;
|
||||||
border-radius: $radius-xl;
|
border-radius: $radius-xl;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: $sp-lg;
|
padding: $sp-lg;
|
||||||
@@ -237,531 +258,235 @@ export default {
|
|||||||
background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
|
background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
|
||||||
border: 2rpx solid rgba(232, 168, 56, 0.25);
|
border: 2rpx solid rgba(232, 168, 56, 0.25);
|
||||||
}
|
}
|
||||||
.tpl-amber .bg-circle-1 {
|
.tpl-amber .bg-circle-1 { background: radial-gradient(circle, rgba(232, 168, 56, 0.12), transparent 70%); }
|
||||||
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-amber .bg-circle-2 {
|
|
||||||
background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 模板: 暗夜极光 --- */
|
/* --- 模板: 暗夜极光 --- */
|
||||||
.tpl-aurora {
|
.tpl-aurora {
|
||||||
background: linear-gradient(160deg, #0A0E1A 0%, #0B0B14 40%, #0E0A1A 100%);
|
background: linear-gradient(160deg, #0A0E1A 0%, #0B0B14 40%, #0E0A1A 100%);
|
||||||
border: 2rpx solid rgba(139, 133, 184, 0.2);
|
border: 2rpx solid rgba(139, 133, 184, 0.2);
|
||||||
}
|
}
|
||||||
.tpl-aurora .bg-circle-1 {
|
.tpl-aurora .bg-circle-1 { background: radial-gradient(circle, rgba(94, 198, 160, 0.1), transparent 70%); }
|
||||||
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 .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 .stat-pill .stat-num,
|
||||||
.tpl-aurora .cups-badge-num,
|
.tpl-aurora .cups-badge-num,
|
||||||
.tpl-aurora .hero-cups,
|
.tpl-aurora .hero-cups,
|
||||||
.tpl-aurora .photo-total-cups {
|
.tpl-aurora .photo-total-cups { color: $mint; }
|
||||||
color: $mint;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 模板: 胶片记忆 --- */
|
/* --- 模板: 胶片记忆 --- */
|
||||||
.tpl-film {
|
.tpl-film {
|
||||||
background: linear-gradient(160deg, #141210 0%, #0D0C0A 40%, #141210 100%);
|
background: linear-gradient(160deg, #141210 0%, #0D0C0A 40%, #141210 100%);
|
||||||
border: 2rpx solid rgba(200, 180, 140, 0.15);
|
border: 2rpx solid rgba(200, 180, 140, 0.15);
|
||||||
}
|
}
|
||||||
.tpl-film .bg-circle-1 {
|
.tpl-film .bg-circle-1 { background: radial-gradient(circle, rgba(200, 180, 140, 0.08), transparent 70%); }
|
||||||
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); }
|
||||||
.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 {
|
.card-bg-deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
|
||||||
position: absolute;
|
.bg-circle { position: absolute; border-radius: 50%; }
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
.bg-circle-1 { width: 400rpx; height: 400rpx; top: -100rpx; right: -100rpx; }
|
||||||
pointer-events: none;
|
.bg-circle-2 { width: 300rpx; height: 300rpx; bottom: 100rpx; left: -80rpx; }
|
||||||
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 {
|
.date-badge {
|
||||||
display: inline-flex;
|
display: inline-flex; align-items: center;
|
||||||
align-items: center;
|
|
||||||
padding: $sp-xs $sp-md;
|
padding: $sp-xs $sp-md;
|
||||||
background: rgba(232, 168, 56, 0.1);
|
background: rgba(232, 168, 56, 0.1);
|
||||||
border: 1rpx solid rgba(232, 168, 56, 0.15);
|
border: 1rpx solid rgba(232, 168, 56, 0.15);
|
||||||
border-radius: $radius-full;
|
border-radius: $radius-full;
|
||||||
}
|
}
|
||||||
.date-badge.light {
|
.date-badge.light { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); }
|
||||||
background: rgba(255, 255, 255, 0.15);
|
.date-text { font-size: $fs-xs; color: $text-secondary; font-family: $font-num; }
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
.date-badge.light .date-text { color: rgba(255, 255, 255, 0.85); }
|
||||||
}
|
|
||||||
.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 {
|
.feeling-tag {
|
||||||
display: inline-flex;
|
display: inline-flex; align-items: center;
|
||||||
align-items: center;
|
|
||||||
padding: $sp-xs $sp-md;
|
padding: $sp-xs $sp-md;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
border-radius: $radius-full;
|
border-radius: $radius-full;
|
||||||
font-size: $fs-xs;
|
font-size: $fs-xs; color: $text-secondary;
|
||||||
color: $text-secondary;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quote-mark {
|
.quote-mark { font-size: $fs-3xl; color: $amber; opacity: 0.3; line-height: 1; margin-right: $sp-xs; }
|
||||||
font-size: $fs-3xl;
|
.quote-mark.light { color: rgba(255, 255, 255, 0.4); }
|
||||||
color: $amber;
|
.quote-text { font-size: $fs-sm; color: $text-secondary; font-style: italic; flex: 1; line-height: $lh-loose; }
|
||||||
opacity: 0.3;
|
.quote-text.light { color: rgba(255, 255, 255, 0.7); }
|
||||||
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-brand-bar {
|
.card-brand-bar {
|
||||||
position: relative;
|
position: relative; z-index: 1;
|
||||||
z-index: 1;
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
display: flex;
|
padding-top: $sp-lg; margin-top: auto;
|
||||||
align-items: center;
|
border-top: 2rpx solid rgba(255, 255, 255, 0.04);
|
||||||
justify-content: center;
|
|
||||||
gap: $sp-sm;
|
|
||||||
padding-top: $sp-lg;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
}
|
||||||
.brand-name {
|
.brand-left {
|
||||||
font-size: $fs-xs;
|
display: flex; flex-direction: column; gap: 4rpx;
|
||||||
color: $text-tertiary;
|
|
||||||
}
|
}
|
||||||
.brand-dot {
|
.brand-name { font-size: $fs-xs; color: $text-tertiary; font-weight: $fw-medium; }
|
||||||
width: 4rpx;
|
.brand-slogan { font-size: 18rpx; color: $text-tertiary; }
|
||||||
height: 4rpx;
|
.brand-qr {
|
||||||
border-radius: $radius-full;
|
width: 80rpx; height: 80rpx;
|
||||||
background: $text-tertiary;
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 2rpx solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: $radius-md;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.brand-slogan {
|
.brand-qr-text {
|
||||||
font-size: $fs-xs;
|
font-size: 18rpx; color: $text-tertiary;
|
||||||
color: $text-tertiary;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 无照片布局 ========== */
|
/* ========== 0张: 纯文字 ========== */
|
||||||
.card-no-photo {
|
.card-no-photo {
|
||||||
position: relative;
|
position: relative; z-index: 1; flex: 1;
|
||||||
z-index: 1;
|
display: flex; flex-direction: column; gap: $sp-lg;
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $sp-lg;
|
|
||||||
}
|
}
|
||||||
|
.no-photo-header { display: flex; justify-content: space-between; align-items: center; }
|
||||||
.no-photo-header {
|
.no-photo-hero { padding: $sp-md 0; }
|
||||||
display: flex;
|
.hero-drink-list { display: flex; flex-direction: column; gap: $sp-md; }
|
||||||
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 {
|
.hero-drink-item {
|
||||||
display: flex;
|
display: flex; align-items: center; gap: $sp-md;
|
||||||
align-items: center;
|
|
||||||
gap: $sp-md;
|
|
||||||
padding: $sp-md;
|
padding: $sp-md;
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: rgba(255, 255, 255, 0.03);
|
||||||
border-radius: $radius-lg;
|
border-radius: $radius-lg;
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.04);
|
border: 1rpx solid rgba(255, 255, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
.hero-emoji { font-size: 56rpx; flex-shrink: 0; }
|
||||||
.hero-emoji {
|
.hero-drink-info { flex: 1; }
|
||||||
font-size: 56rpx;
|
.hero-brand { display: block; font-size: $fs-base; font-weight: $fw-bold; color: $text-primary; }
|
||||||
flex-shrink: 0;
|
.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; }
|
||||||
|
|
||||||
.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 {
|
.no-photo-stats {
|
||||||
display: flex;
|
display: flex; align-items: center; gap: $sp-lg;
|
||||||
align-items: center;
|
padding: $sp-md; background: rgba(255, 255, 255, 0.03); border-radius: $radius-lg;
|
||||||
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; }
|
||||||
|
|
||||||
.stat-pill {
|
/* ========== 1张: 沉浸式 ========== */
|
||||||
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 {
|
.card-one-photo {
|
||||||
position: relative;
|
position: relative; z-index: 1; flex: 1;
|
||||||
z-index: 1;
|
min-height: 600rpx; border-radius: $radius-lg;
|
||||||
flex: 1;
|
|
||||||
min-height: 600rpx;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: -#{$sp-lg};
|
margin: -#{$sp-lg};
|
||||||
/* 把 padding 加回来让品牌栏有空间 */
|
padding: $sp-lg; padding-bottom: 0;
|
||||||
padding: $sp-lg;
|
display: flex; flex-direction: column; justify-content: space-between;
|
||||||
padding-bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
|
.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-bg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.one-photo-overlay {
|
.one-photo-overlay {
|
||||||
position: absolute;
|
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||||
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%);
|
||||||
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;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
.one-photo-top { position: relative; z-index: 2; display: flex; justify-content: flex-start; padding-top: $sp-sm; }
|
||||||
.one-photo-top {
|
.one-photo-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; gap: $sp-md; padding-bottom: $sp-md; }
|
||||||
position: relative;
|
.photo-drink-chips { display: flex; flex-wrap: wrap; gap: $sp-sm; }
|
||||||
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 {
|
.drink-chip {
|
||||||
display: inline-flex;
|
display: inline-flex; align-items: center;
|
||||||
align-items: center;
|
|
||||||
padding: $sp-xs $sp-md;
|
padding: $sp-xs $sp-md;
|
||||||
background: rgba(0, 0, 0, 0.45);
|
background: rgba(0, 0, 0, 0.45);
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: $radius-full;
|
border-radius: $radius-full;
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||||
font-size: $fs-xs;
|
font-size: $fs-xs; color: rgba(255, 255, 255, 0.9);
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
}
|
||||||
|
.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; }
|
||||||
|
|
||||||
.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 {
|
.card-multi-photo {
|
||||||
position: relative;
|
position: relative; z-index: 1; flex: 1;
|
||||||
z-index: 1;
|
display: flex; flex-direction: column; gap: $sp-lg;
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $sp-lg;
|
|
||||||
}
|
}
|
||||||
|
.multi-top { display: flex; justify-content: space-between; align-items: center; }
|
||||||
.multi-top {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multi-cups-badge {
|
.multi-cups-badge {
|
||||||
display: flex;
|
display: flex; align-items: baseline; gap: $sp-xs;
|
||||||
align-items: baseline;
|
|
||||||
gap: $sp-xs;
|
|
||||||
padding: $sp-xs $sp-md;
|
padding: $sp-xs $sp-md;
|
||||||
background: rgba(232, 168, 56, 0.1);
|
background: rgba(232, 168, 56, 0.1);
|
||||||
border: 1rpx solid rgba(232, 168, 56, 0.2);
|
border: 1rpx solid rgba(232, 168, 56, 0.2);
|
||||||
border-radius: $radius-full;
|
border-radius: $radius-full;
|
||||||
}
|
}
|
||||||
|
.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; }
|
||||||
|
|
||||||
.cups-badge-num {
|
/* 照片网格公共 */
|
||||||
font-size: $fs-lg;
|
.photo-grid { border-radius: $radius-lg; overflow: hidden; }
|
||||||
font-weight: $fw-black;
|
.grid-item {
|
||||||
color: $amber;
|
|
||||||
font-family: $font-num;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cups-badge-label {
|
|
||||||
font-size: $fs-xs;
|
|
||||||
color: $text-secondary;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 照片拼贴 */
|
|
||||||
.photo-collage {
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2张: 左大右小 */
|
|
||||||
.collage-two {
|
|
||||||
display: flex;
|
|
||||||
gap: 6rpx;
|
|
||||||
height: 420rpx;
|
|
||||||
}
|
|
||||||
.collage-two .collage-large {
|
|
||||||
flex: 3;
|
|
||||||
}
|
|
||||||
.collage-two .collage-small {
|
|
||||||
flex: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3张: 左大右两小 */
|
|
||||||
.collage-three {
|
|
||||||
display: flex;
|
|
||||||
gap: 8rpx;
|
|
||||||
height: 440rpx;
|
|
||||||
}
|
|
||||||
.collage-three .c3-left {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: $radius-md;
|
|
||||||
}
|
|
||||||
.collage-three .c3-right {
|
|
||||||
width: 45%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8rpx;
|
|
||||||
}
|
|
||||||
.collage-three .c3-right-top,
|
|
||||||
.collage-three .c3-right-bottom {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: $radius-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 4张: 田字格 */
|
|
||||||
.collage-four {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 6rpx;
|
|
||||||
height: 460rpx;
|
|
||||||
}
|
|
||||||
.collage-four .collage-quarter {
|
|
||||||
width: calc(50% - 3rpx);
|
|
||||||
height: calc(50% - 3rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 5+张: 瀑布流 */
|
|
||||||
.collage-many {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6rpx;
|
|
||||||
}
|
|
||||||
.collage-many .collage-hero {
|
|
||||||
height: 320rpx;
|
|
||||||
border-radius: $radius-md;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.collage-strip {
|
|
||||||
display: flex;
|
|
||||||
gap: 6rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
}
|
|
||||||
.collage-strip-item {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.collage-more {
|
|
||||||
width: 100rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: $radius-sm;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: $fs-sm;
|
|
||||||
color: $text-secondary;
|
|
||||||
font-weight: $fw-bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collage-item {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: $radius-sm;
|
border-radius: $radius-sm;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.grid-img {
|
||||||
.collage-img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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 {
|
.multi-bottom { display: flex; flex-direction: column; gap: $sp-md; }
|
||||||
display: flex;
|
.multi-drinks-row { display: flex; flex-wrap: wrap; gap: $sp-sm; }
|
||||||
flex-direction: column;
|
|
||||||
gap: $sp-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multi-drinks-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: $sp-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.multi-drink-tag {
|
.multi-drink-tag {
|
||||||
display: inline-flex;
|
display: inline-flex; padding: $sp-xs $sp-md;
|
||||||
padding: $sp-xs $sp-md;
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
background: rgba(255, 255, 255, 0.04);
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.06);
|
border: 1rpx solid rgba(255, 255, 255, 0.06);
|
||||||
border-radius: $radius-full;
|
border-radius: $radius-full;
|
||||||
font-size: $fs-xs;
|
font-size: $fs-xs; color: $text-secondary;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
+334
-202
@@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page-container card-page">
|
<view class="page-container card-page">
|
||||||
<!-- 顶部导航 -->
|
|
||||||
<view class="card-nav">
|
<view class="card-nav">
|
||||||
<view class="step-back" @click="goBack">
|
<view class="step-back" @click="goBack">
|
||||||
<text class="step-back-arrow">‹</text>
|
<text class="step-back-arrow">‹</text>
|
||||||
@@ -8,22 +7,13 @@
|
|||||||
<text class="card-nav-title">你的酒局卡片</text>
|
<text class="card-nav-title">你的酒局卡片</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 照片提示 -->
|
|
||||||
<view class="photo-hint" v-if="record">
|
<view class="photo-hint" v-if="record">
|
||||||
<text class="photo-hint-text">
|
<text class="photo-hint-text">{{ photoHintText }}</text>
|
||||||
{{ photoHintText }}
|
|
||||||
</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 模板切换 -->
|
|
||||||
<view class="template-switcher">
|
<view class="template-switcher">
|
||||||
<view
|
<view v-for="t in templates" :key="t.id" class="template-option"
|
||||||
v-for="t in templates"
|
:class="{ 'template-active': currentTemplate === t.id }" @click="currentTemplate = t.id">
|
||||||
: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="template-swatch" :style="{ background: t.swatch }">
|
||||||
<view class="swatch-dot" v-if="currentTemplate === t.id"></view>
|
<view class="swatch-dot" v-if="currentTemplate === t.id"></view>
|
||||||
</view>
|
</view>
|
||||||
@@ -32,36 +22,28 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 卡片预览 -->
|
|
||||||
<view class="card-preview-area">
|
<view class="card-preview-area">
|
||||||
<DrinkCard v-if="record" :record="record" :template="currentTemplate" />
|
<DrinkCard v-if="record" :record="record" :template="currentTemplate" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<view class="card-actions">
|
<view class="card-actions">
|
||||||
<button class="btn-cta" @click="saveToAlbum">
|
<button class="btn-cta" :loading="saving" :disabled="saving" @click="saveToAlbum">
|
||||||
💾 保存到相册
|
{{ saving ? '保存中...' : '💾 保存到相册' }}
|
||||||
</button>
|
</button>
|
||||||
<view class="action-row">
|
<view class="action-row">
|
||||||
<button class="btn-secondary action-btn" @click="shareToFriend">
|
<button class="btn-secondary action-btn" @click="shareToFriend">🔗 分享好友</button>
|
||||||
🔗 分享好友
|
<button class="btn-secondary action-btn" @click="goHome">🏠 返回首页</button>
|
||||||
</button>
|
|
||||||
<button class="btn-secondary action-btn" @click="goHome">
|
|
||||||
🏠 返回首页
|
|
||||||
</button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 成功提示 -->
|
<canvas canvas-id="shareCanvas" class="export-canvas" :style="{width:'750px',height:'1200px'}"></canvas>
|
||||||
<view v-if="showSuccess" class="success-toast">
|
|
||||||
<text>✅ 已保存到相册</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DrinkCard from '../../components/DrinkCard.vue'
|
import DrinkCard from '../../components/DrinkCard.vue'
|
||||||
import { getRecords } from '../../common/mock-data'
|
import { getRecords } from '../../common/mock-data'
|
||||||
|
import { DRINK_CATEGORIES, FOOD_CATEGORIES, FEELINGS, DRINK_QUOTES } from '../../common/constants'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { DrinkCard },
|
components: { DrinkCard },
|
||||||
@@ -69,79 +51,328 @@ export default {
|
|||||||
return {
|
return {
|
||||||
currentTemplate: 'amber',
|
currentTemplate: 'amber',
|
||||||
record: null,
|
record: null,
|
||||||
showSuccess: false,
|
saving: false,
|
||||||
templates: [
|
templates: [
|
||||||
{
|
{ id: 'amber', name: '琥珀流光', desc: '温暖金色调', swatch: 'linear-gradient(135deg, #1A1308, #0F0B06)' },
|
||||||
id: 'amber',
|
{ id: 'aurora', name: '暗夜极光', desc: '冷色氛围感', swatch: 'linear-gradient(135deg, #0A0E1A, #0E0A1A)' },
|
||||||
name: '琥珀流光',
|
{ id: 'film', name: '胶片记忆', desc: '复古胶片风', swatch: 'linear-gradient(135deg, #141210, #0D0C0A)' }
|
||||||
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: {
|
computed: {
|
||||||
photoHintText() {
|
photoHintText() {
|
||||||
if (!this.record) return ''
|
if (!this.record) return ''
|
||||||
const photos = this.record.photos || []
|
const p = this.record.photos || []
|
||||||
if (photos.length === 0) return '📷 无照片 · 纯文字排版'
|
if (p.length === 0) return '📷 无照片 · 纯文字排版'
|
||||||
if (photos.length === 1) return '📸 单张照片 · 沉浸式全屏'
|
if (p.length === 1) return '📸 单张照片 · 沉浸式全屏'
|
||||||
return `🖼️ ${photos.length}张照片 · 拼贴布局`
|
return `🖼️ ${p.length}张照片 · 拼贴布局`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const records = getRecords()
|
const records = getRecords()
|
||||||
if (options && options.recordId) {
|
if (options && options.recordId) this.record = records.find(r => r.id === options.recordId)
|
||||||
this.record = records.find(r => r.id === options.recordId)
|
if (!this.record) this.record = records.find(r => r.mode === 'drank') || this.fallback()
|
||||||
}
|
|
||||||
if (!this.record) {
|
|
||||||
this.record = records.find(r => r.mode === 'drank') || this.getFallbackRecord()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getFallbackRecord() {
|
fallback() {
|
||||||
return {
|
return {
|
||||||
date: new Date().toISOString().slice(0, 10),
|
date: new Date().toISOString().slice(0, 10), mode: 'drank',
|
||||||
mode: 'drank',
|
|
||||||
drinks: [{ category: 'beer', brand: '青岛啤酒', product: '经典', amount: 2, unit: 'bottle', degree: 4.3, standardCups: 3.4 }],
|
drinks: [{ category: 'beer', brand: '青岛啤酒', product: '经典', amount: 2, unit: 'bottle', degree: 4.3, standardCups: 3.4 }],
|
||||||
food: { category: 'bbq', name: '烤串' },
|
food: { category: 'bbq', name: '烤串' }, feeling: 'tipsy', photos: [], standardCupsTotal: 3.4
|
||||||
feeling: 'tipsy',
|
|
||||||
photos: [],
|
|
||||||
standardCupsTotal: 3.4
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
saveToAlbum() {
|
|
||||||
this.showSuccess = true
|
// ===== 保存流程 =====
|
||||||
|
async saveToAlbum() {
|
||||||
|
if (this.saving) return
|
||||||
|
this.saving = true
|
||||||
|
try {
|
||||||
|
await this.drawExportCard()
|
||||||
|
const path = await this.exportImg()
|
||||||
|
await this.saveImg(path)
|
||||||
uni.showToast({ title: '已保存到相册', icon: 'success' })
|
uni.showToast({ title: '已保存到相册', icon: 'success' })
|
||||||
setTimeout(() => { this.showSuccess = false }, 2000)
|
} catch (e) {
|
||||||
|
console.error('保存失败:', e)
|
||||||
|
uni.showToast({ title: e.message || e.msg || '保存失败', icon: 'none', duration: 3000 })
|
||||||
|
} finally { this.saving = false }
|
||||||
},
|
},
|
||||||
shareToFriend() {
|
|
||||||
uni.showToast({ title: '点击右上角分享', icon: 'none' })
|
// 加载图片
|
||||||
|
loadImg(src) {
|
||||||
|
return new Promise(r => {
|
||||||
|
if (!src) return r(null)
|
||||||
|
uni.getImageInfo({ src, success: res => r(res.path), fail: () => r(null) })
|
||||||
|
})
|
||||||
},
|
},
|
||||||
goHome() {
|
|
||||||
uni.reLaunch({ url: '/pages/index/index' })
|
// ===== 简洁导出卡片绘制 =====
|
||||||
},
|
async drawExportCard() {
|
||||||
goBack() {
|
const ctx = uni.createCanvasContext('shareCanvas', this)
|
||||||
uni.navigateBack()
|
const W = 750, H = 1200
|
||||||
|
const rec = this.record
|
||||||
|
const P = 50 // padding
|
||||||
|
const tpl = this.currentTemplate
|
||||||
|
|
||||||
|
// 配色
|
||||||
|
const TH = {
|
||||||
|
amber: { bg: '#111111', line: '#2A2218', accent: '#E8A838', tagBg: '#1E1A14' },
|
||||||
|
aurora: { bg: '#0E0E16', line: '#1E1E2E', accent: '#5EC6A0', tagBg: '#141420' },
|
||||||
|
film: { bg: '#100F0D', line: '#252218', accent: '#C8B48C', tagBg: '#1A1814' }
|
||||||
}
|
}
|
||||||
|
const c = TH[tpl] || TH.amber
|
||||||
|
const WHITE = '#F0F0F0'
|
||||||
|
const GRAY = '#999999'
|
||||||
|
const DIM = '#666666'
|
||||||
|
const F = 'PingFang SC'
|
||||||
|
|
||||||
|
// 背景
|
||||||
|
ctx.setFillStyle(c.bg)
|
||||||
|
ctx.fillRect(0, 0, W, H)
|
||||||
|
|
||||||
|
// 顶部细线装饰
|
||||||
|
ctx.setFillStyle(c.accent)
|
||||||
|
ctx.fillRect(0, 0, W, 4)
|
||||||
|
|
||||||
|
let y = P + 10
|
||||||
|
|
||||||
|
// === 日期行 ===
|
||||||
|
ctx.font = `normal 26px ${F}`
|
||||||
|
ctx.setFillStyle(GRAY)
|
||||||
|
ctx.fillText(rec.date || '', P, y + 20)
|
||||||
|
|
||||||
|
// 标准杯（右对齐）
|
||||||
|
ctx.font = `bold 40px ${F}`
|
||||||
|
ctx.setFillStyle(c.accent)
|
||||||
|
const num = String(rec.standardCupsTotal)
|
||||||
|
const nw = ctx.measureText(num).width
|
||||||
|
ctx.fillText(num, W - P - nw - ctx.measureText(' 标准杯').width - 6, y + 24)
|
||||||
|
ctx.font = `normal 22px ${F}`
|
||||||
|
ctx.setFillStyle(GRAY)
|
||||||
|
ctx.fillText(' 标准杯', W - P - ctx.measureText(' 标准杯').width, y + 22)
|
||||||
|
y += 50
|
||||||
|
|
||||||
|
// === 照片 ===
|
||||||
|
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)
|
||||||
|
y += ph + 28
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 酒水信息行 ===
|
||||||
|
const drinks = rec.drinks || []
|
||||||
|
if (drinks.length > 0) {
|
||||||
|
ctx.font = `bold 28px ${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 + 22)
|
||||||
|
y += 42
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 配餐 + 感受 标签 ===
|
||||||
|
let tags = []
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
if (rec.feeling) {
|
||||||
|
const f = FEELINGS.find(fe => fe.id === rec.feeling)
|
||||||
|
if (f) tags.push(f.name)
|
||||||
|
}
|
||||||
|
if (tags.length > 0) {
|
||||||
|
let tx = P
|
||||||
|
ctx.font = `normal 22px ${F}`
|
||||||
|
tags.forEach(tag => {
|
||||||
|
const tw = ctx.measureText(tag).width + 24
|
||||||
|
ctx.setFillStyle(c.tagBg)
|
||||||
|
this.rr(ctx, tx, y, tw, 32, 6, 'fill')
|
||||||
|
ctx.setFillStyle(GRAY)
|
||||||
|
ctx.fillText(tag, tx + 12, y + 22)
|
||||||
|
tx += tw + 10
|
||||||
|
})
|
||||||
|
y += 48
|
||||||
|
}
|
||||||
|
|
||||||
|
// === 分隔线 ===
|
||||||
|
ctx.setStrokeStyle(c.line)
|
||||||
|
ctx.setLineWidth(1)
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.moveTo(P, y)
|
||||||
|
ctx.lineTo(W - P, y)
|
||||||
|
ctx.stroke()
|
||||||
|
y += 24
|
||||||
|
|
||||||
|
// === 酒言酒语 ===
|
||||||
|
const quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
|
||||||
|
// 左侧装饰竖线
|
||||||
|
ctx.setFillStyle(c.accent)
|
||||||
|
this.rr(ctx, P, y, 4, 40, 2, 'fill')
|
||||||
|
// 引号
|
||||||
|
ctx.font = `bold 48px ${F}`
|
||||||
|
ctx.setGlobalAlpha(0.2)
|
||||||
|
ctx.fillText('"', P + 14, y + 38)
|
||||||
|
ctx.setGlobalAlpha(1)
|
||||||
|
// 引文
|
||||||
|
ctx.font = `normal 26px ${F}`
|
||||||
|
ctx.setFillStyle(GRAY)
|
||||||
|
const dq = quote.length > 14 ? quote.substring(0, 14) + '...' : quote
|
||||||
|
ctx.fillText(dq, P + 16, y + 28)
|
||||||
|
y += 60
|
||||||
|
|
||||||
|
// === 底部品牌栏 ===
|
||||||
|
ctx.setStrokeStyle(c.line)
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.moveTo(P, y)
|
||||||
|
ctx.lineTo(W - P, y)
|
||||||
|
ctx.stroke()
|
||||||
|
y += 28
|
||||||
|
|
||||||
|
// 品牌名
|
||||||
|
ctx.font = `bold 26px ${F}`
|
||||||
|
ctx.setFillStyle(WHITE)
|
||||||
|
ctx.fillText('喝酒了么', P, y + 20)
|
||||||
|
// 副标语
|
||||||
|
ctx.font = `normal 20px ${F}`
|
||||||
|
ctx.setFillStyle(DIM)
|
||||||
|
ctx.fillText('记录每一杯的故事', P, y + 50)
|
||||||
|
|
||||||
|
// 二维码占位
|
||||||
|
const qr = 80, qx = W - P - qr, qy = y
|
||||||
|
ctx.setFillStyle(c.tagBg)
|
||||||
|
this.rr(ctx, qx, qy, qr, qr, 8, 'fill')
|
||||||
|
ctx.setStrokeStyle(c.line)
|
||||||
|
ctx.setLineWidth(1)
|
||||||
|
this.rr(ctx, qx, qy, qr, qr, 8, 'stroke')
|
||||||
|
ctx.font = `normal 18px ${F}`
|
||||||
|
ctx.setFillStyle(DIM)
|
||||||
|
const sw = ctx.measureText('扫码').width
|
||||||
|
ctx.fillText('扫码', qx + (qr - sw) / 2, qy + qr / 2 + 7)
|
||||||
|
|
||||||
|
return new Promise(resolve => {
|
||||||
|
ctx.draw(false, () => setTimeout(resolve, 600))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 圆角矩形
|
||||||
|
rr(ctx, x, y, w, h, r, act) {
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.moveTo(x + r, y)
|
||||||
|
ctx.arcTo(x + w, y, x + w, y + h, r)
|
||||||
|
ctx.arcTo(x + w, y + h, x, y + h, r)
|
||||||
|
ctx.arcTo(x, y + h, x, y, r)
|
||||||
|
ctx.arcTo(x, y, x + w, y, r)
|
||||||
|
ctx.closePath()
|
||||||
|
if (act === 'stroke') ctx.stroke()
|
||||||
|
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() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'shareCanvas', quality: 1,
|
||||||
|
success: res => resolve(res.tempFilePath),
|
||||||
|
fail: err => reject({ msg: '导出失败: ' + (err.errMsg || '') })
|
||||||
|
}, this)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存
|
||||||
|
saveImg(fp) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: fp, success: () => resolve(),
|
||||||
|
fail: err => {
|
||||||
|
if (err.errMsg && err.errMsg.includes('auth deny')) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示', content: '需要授权保存相册',
|
||||||
|
confirmText: '去设置', success: r => { if (r.confirm) uni.openSetting() }
|
||||||
|
})
|
||||||
|
reject({ msg: '请授权相册' })
|
||||||
|
} else reject({ msg: '保存失败' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
shareToFriend() { uni.showToast({ title: '点击右上角分享', icon: 'none' }) },
|
||||||
|
goHome() { uni.reLaunch({ url: '/pages/index/index' }) },
|
||||||
|
goBack() { uni.navigateBack() }
|
||||||
},
|
},
|
||||||
onShareAppMessage() {
|
onShareAppMessage() {
|
||||||
return {
|
return { title: '今晚的酒局记录 - 喝酒了么', path: '/pages/index/index' }
|
||||||
title: '今晚的酒局记录 - 喝酒了么',
|
|
||||||
path: '/pages/index/index'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -150,142 +381,43 @@ export default {
|
|||||||
.card-page {
|
.card-page {
|
||||||
padding: $sp-lg;
|
padding: $sp-lg;
|
||||||
padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
|
padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
|
||||||
display: flex;
|
display: flex; flex-direction: column; min-height: 100vh;
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 导航 */
|
|
||||||
.card-nav {
|
.card-nav {
|
||||||
display: flex;
|
display: flex; align-items: center; gap: $sp-md; padding: $sp-md 0 $sp-lg;
|
||||||
align-items: center;
|
|
||||||
gap: $sp-md;
|
|
||||||
padding: $sp-md 0 $sp-lg;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-back {
|
.step-back {
|
||||||
width: 64rpx;
|
width: 64rpx; height: 64rpx;
|
||||||
height: 64rpx;
|
display: flex; align-items: center; justify-content: center;
|
||||||
display: flex;
|
border-radius: $radius-full; background: $bg-card;
|
||||||
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; }
|
||||||
.step-back-arrow {
|
.card-nav-title { font-size: $fs-lg; font-weight: $fw-bold; }
|
||||||
font-size: $fs-xl;
|
.photo-hint { text-align: center; margin-bottom: $sp-md; }
|
||||||
color: $text-secondary;
|
.photo-hint-text { font-size: $fs-xs; color: $text-tertiary; }
|
||||||
font-weight: $fw-bold;
|
.template-switcher { display: flex; gap: $sp-md; margin-bottom: $sp-xl; justify-content: center; }
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
.template-option {
|
||||||
display: flex;
|
display: flex; flex-direction: column; align-items: center;
|
||||||
flex-direction: column;
|
gap: $sp-xs; padding: $sp-sm $sp-md; border-radius: $radius-lg;
|
||||||
align-items: center;
|
|
||||||
gap: $sp-xs;
|
|
||||||
padding: $sp-sm $sp-md;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
border: 2rpx solid rgba(255,255,255,0.05);
|
border: 2rpx solid rgba(255,255,255,0.05);
|
||||||
background: rgba(255,255,255,0.02);
|
background: rgba(255,255,255,0.02);
|
||||||
transition: all $duration-fast $ease-out;
|
transition: all $duration-fast $ease-out; flex: 1; max-width: 220rpx;
|
||||||
flex: 1;
|
&.template-active { border-color: $amber; background: rgba(232,168,56,0.05); }
|
||||||
max-width: 220rpx;
|
|
||||||
|
|
||||||
&.template-active {
|
|
||||||
border-color: $amber;
|
|
||||||
background: rgba(232, 168, 56, 0.05);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.template-swatch {
|
.template-swatch {
|
||||||
width: 64rpx;
|
width: 64rpx; height: 80rpx; border-radius: $radius-md;
|
||||||
height: 80rpx;
|
border: 2rpx solid rgba(255,255,255,0.1); position: relative;
|
||||||
border-radius: $radius-md;
|
display: flex; align-items: center; justify-content: center;
|
||||||
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
.swatch-dot { width: 12rpx; height: 12rpx; border-radius: $radius-full; background: $amber; }
|
||||||
.swatch-dot {
|
.template-label { font-size: $fs-xs; color: $text-primary; font-weight: $fw-medium; }
|
||||||
width: 12rpx;
|
.template-desc { font-size: 18rpx; color: $text-tertiary; }
|
||||||
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 {
|
.card-preview-area {
|
||||||
flex: 1;
|
flex: 1; display: flex; align-items: flex-start;
|
||||||
display: flex;
|
justify-content: center; margin-bottom: $sp-xl; width: 100%;
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: $sp-xl;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 操作按钮 */
|
|
||||||
.card-actions {
|
|
||||||
padding-bottom: $sp-xl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-row {
|
|
||||||
display: flex;
|
|
||||||
gap: $sp-md;
|
|
||||||
margin-top: $sp-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-toast {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
color: #fff;
|
|
||||||
padding: $sp-lg $sp-xl;
|
|
||||||
border-radius: $radius-lg;
|
|
||||||
font-size: $fs-base;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
}
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
@@ -420,6 +420,23 @@ export default {
|
|||||||
this.backfillDate = options.date
|
this.backfillDate = options.date
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onBackPress() {
|
||||||
|
if (this.currentStep > 1 || this.hasFormData()) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '放弃记录？',
|
||||||
|
content: '当前填写的内容将不会保存',
|
||||||
|
confirmText: '继续填写',
|
||||||
|
cancelText: '放弃',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.cancel) {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return true // 阻止默认返回
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectCategory(cat) {
|
selectCategory(cat) {
|
||||||
this.currentDrink.category = cat.id
|
this.currentDrink.category = cat.id
|
||||||
@@ -484,10 +501,30 @@ export default {
|
|||||||
handleBack() {
|
handleBack() {
|
||||||
if (this.currentStep > 1) {
|
if (this.currentStep > 1) {
|
||||||
this.prevStep()
|
this.prevStep()
|
||||||
|
} else if (this.hasFormData()) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '放弃记录？',
|
||||||
|
content: '当前填写的内容将不会保存',
|
||||||
|
confirmText: '继续填写',
|
||||||
|
cancelText: '放弃',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.cancel) {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
hasFormData() {
|
||||||
|
return this.drinks.length > 0 ||
|
||||||
|
this.currentDrink.brand ||
|
||||||
|
this.currentDrink.category ||
|
||||||
|
this.selectedFood ||
|
||||||
|
this.selectedFeeling ||
|
||||||
|
this.photos.length > 0
|
||||||
|
},
|
||||||
prevStep() {
|
prevStep() {
|
||||||
if (this.currentStep > 1) this.currentStep--
|
if (this.currentStep > 1) this.currentStep--
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user