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

docs(api): 更新API接口文档并调整应用配置

Browse Source 
- 添加完整的后端接口文档，包含用户、打卡记录、统计等模块
- 修复应用名称从"喝酒了么"统一更正为"喝了么"
- 重构App.vue中的启动逻辑，增加数据迁移和路由守卫功能
- 调整DrinkCalendar组件的UI间距和尺寸参数
- 优化DrinkCard组件的品牌展示文案
- 修改manifest.json中的应用描述和微信小程序配置
- 调整pages.json中的页面路径顺序和tabBar配置
- 更新全局样式文件中的应用名称标识
- 修改mock数据中的用户头像默认值
- 优化卡片导出功能的绘制逻辑和视觉效果
This commit is contained in:
cg
2026-07-14 23:27:23 +08:00
parent 93e19caa75
commit b95243c8f8
19 changed files with 1364 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/card/card.vue
+136 -87
View File
@@ -87,8 +87,8 @@ export default {
if (this.saving) return
this.saving = true
try {
await this.drawExportCard()
const path = await this.exportImg()
const contentH = await this.drawExportCard()
const path = await this.exportImg(contentH)
await this.saveImg(path)
uni.showToast({ title: '已保存到相册', icon: 'success' })
} catch (e) {
@@ -105,64 +105,92 @@ export default {
})
},
// ===== 简洁导出卡片绘制 =====
// ===== 海报导出绘制（优化版） =====
async drawExportCard() {
const ctx = uni.createCanvasContext('shareCanvas', this)
const W = 750, H = 1200
const P = 56 // 全局padding增大
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' }
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 = '#F0F0F0'
const GRAY = '#999999'
const DIM = '#666666'
const F = 'PingFang SC'
const WHITE = '#F2F2F2'
const SUB = '#B0B0B0'
const GRAY = '#888888'
const DIM = '#5A5A5A'
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, 4)
ctx.fillRect(0, 0, W, 5)
let y = P + 10
let y = P + 16
// === 日期行 ===
ctx.font = `normal 26px ${F}`
ctx.setFillStyle(GRAY)
ctx.fillText(rec.date || '', P, y + 20)
// ===== 顶部行：日期药丸 + 标准杯 =====
// 日期药丸样式
const dateStr = rec.date || ''
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.font = `bold 40px ${F}`
ctx.setFillStyle(c.accent)
// 标准杯：数字+文字垂直堆叠（右对齐）
const num = String(rec.standardCupsTotal)
ctx.font = `800 44px ${F}`
ctx.setFillStyle(c.accent)
const nw = ctx.measureText(num).width
ctx.fillText(num, W - P - nw - ctx.measureText(' 标准杯').width - 6, y + 24)
ctx.font = `normal 22px ${F}`
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(' 标准杯', W - P - ctx.measureText(' 标准杯').width, y + 22)
y += 50
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 drinks = rec.drinks || []
if (drinks.length > 0) {
ctx.font = `bold 28px ${F}`
ctx.font = `bold 30px ${F}`
ctx.setFillStyle(WHITE)
let line = ''
drinks.forEach(d => {
@@ -170,91 +198,109 @@ export default {
const nm = cat ? cat.name : '酒水'
line += (line ? ' · ' : '') + `${nm} ${d.brand} · ${d.standardCups}杯`
})
ctx.fillText(line, P, y + 22)
y += 42
ctx.fillText(line, P, y + 24)
y += 48
}
// === 配餐 + 感受 标签 ===
// ===== 配餐 + 感受 胶囊标签 =====
let tags = []
let tagTypes = [] // 'food' | 'feeling'
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 (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)
if (f) { tags.push(f.name); tagTypes.push('feeling') }
}
if (tags.length > 0) {
let tx = P
ctx.font = `normal 22px ${F}`
tags.forEach(tag => {
const tw = ctx.measureText(tag).width + 24
tags.forEach((tag, i) => {
const tw = ctx.measureText(tag).width + 32
const th = 36
// 胶囊背景+边框
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
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 += 48
y += 56
}
// === 分隔线 ===
// ===== 分隔线 =====
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}`
// ===== 酒言酒语（优化装饰） =====
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.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
// 二维码占位（优化样式）
const qr = 80, qx = W - P - qr, qy = y + 2
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)
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 + 7)
ctx.fillText('扫码', qx + (qr - sw) / 2, qy + qr / 2 + 6)
// 计算实际内容高度（用于动态裁剪导出）
const contentH = qy + qr + P
return new Promise(resolve => {
ctx.draw(false, () => setTimeout(resolve, 600))
ctx.draw(false, () => setTimeout(() => resolve(contentH), 600))
})
},
@@ -338,11 +384,14 @@ export default {
return [3, 3, 3]
},
// 导出
exportImg() {
// 导出（动态裁剪到实际内容区域）
exportImg(contentH) {
return new Promise((resolve, reject) => {
const cropH = Math.min(contentH || 1200, 1200)
uni.canvasToTempFilePath({
canvasId: 'shareCanvas', quality: 1,
x: 0, y: 0, width: 750, height: cropH,
destWidth: 750, destHeight: cropH,
success: res => resolve(res.tempFilePath),
fail: err => reject({ msg: '导出失败: ' + (err.errMsg || '') })
}, this)
@@ -368,11 +417,11 @@ export default {
},
shareToFriend() { uni.showToast({ title: '点击右上角分享', icon: 'none' }) },
goHome() { uni.reLaunch({ url: '/pages/index/index' }) },
goHome() { uni.switchTab({ url: '/pages/index/index' }) },
goBack() { uni.navigateBack() }
},
onShareAppMessage() {
return { title: '今晚的酒局记录 - 喝酒了么', path: '/pages/index/index' }
return { title: '今晚的酒局记录 - 喝了么', path: '/pages/index/index' }
}
}
</script>