@@ -71,6 +71,15 @@ import { getAppointmentStatusText, getAppointmentTagType } from '../../utils/app
const emit = defineEmits(['change-page'])
const userInfo = getUserSession()
const currentUserId = userInfo.id
+const goBackToMine = () => {
+ const pages = getCurrentPages()
+ if (pages.length > 1) {
+ uni.navigateBack()
+ return
+ }
+ navigateTo('mine')
+}
+
const navSafeStyle = (() => {
const statusBarHeight = uni.getSystemInfoSync?.().statusBarHeight || 20
let navHeight = statusBarHeight + 44
@@ -146,6 +155,11 @@ const cancelService = async (item) => {
})
}
+const goAppointmentDetail = (item) => {
+ if (!item?.id) return
+ uni.navigateTo({ url: `/pages/appointment/AppointmentDetail?id=${item.id}` })
+}
+
const goReport = (item) => {
uni.setStorageSync('petstore_report_prefill', JSON.stringify({
appointmentId: item.id, petName: item.petName, serviceType: item.serviceType, appointmentTime: item.appointmentTime
@@ -176,7 +190,7 @@ onMounted(() => fetchOrders())
}
.nav-back { font-size: 20px; color: #fff; }
.nav-title { font-size: 18px; font-weight: 700; color: #fff; }
-.order-item { background: #fff; margin-bottom: 12px; border-radius: 14px; padding: 16px; border: 1px solid #e8edf4; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); }
+.order-item { background: #fff; margin-bottom: 12px; border-radius: 14px; padding: 16px; border: 1px solid #e8edf4; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); cursor: pointer; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-title { font-size: 15px; font-weight: 700; color: #1f2937; margin-bottom: 6px; }
.order-desc { font-size: 13px; color: #6b7280; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
diff --git a/src/pages/mine/MyReports.vue b/src/pages/mine/MyReports.vue
index 4c427e4..31bdf89 100644
--- a/src/pages/mine/MyReports.vue
+++ b/src/pages/mine/MyReports.vue
@@ -2,7 +2,7 @@
-
+
我的报告
@@ -80,8 +80,13 @@ const loadReports = async () => {
if (res.code === 200) reportList.value = res.data
}
-const goHome = () => {
- navigateTo('home')
+const goBackToMine = () => {
+ const pages = getCurrentPages()
+ if (pages.length > 1) {
+ uni.navigateBack()
+ return
+ }
+ navigateTo('mine')
}
const viewReport = (r) => {
@@ -104,10 +109,6 @@ onMounted(() => loadReports())
diff --git a/src/pages/report/Report.vue b/src/pages/report/Report.vue
index a4a7628..e767d53 100644
--- a/src/pages/report/Report.vue
+++ b/src/pages/report/Report.vue
@@ -1,76 +1,85 @@
-
-
+
-
- 洗护美容报告
-
+
+ 填写报告
+
-
-
-
-
-
- 提交中...
+
-
diff --git a/src/utils/globalState.js b/src/utils/globalState.js
index d288adb..85a6606 100644
--- a/src/utils/globalState.js
+++ b/src/utils/globalState.js
@@ -14,7 +14,10 @@ const SUB_ROUTE_MAP = {
myOrders: '/pages/mine/MyOrders'
}
-export const navigateTo = (page) => {
+/**
+ * 应用内路由跳转（勿与 uni.navigateTo 混淆：此处按 page 名映射）
+ */
+export const openAppPage = (page) => {
const rootUrl = ROOT_ROUTE_MAP[page]
if (rootUrl) {
uni.reLaunch({ url: rootUrl })
@@ -26,3 +29,6 @@ export const navigateTo = (page) => {
uni.navigateTo({ url: subUrl })
}
}
+
+/** @deprecated 与微信 API 同名易混，请优先使用 openAppPage */
+export const navigateTo = openAppPage
diff --git a/src/utils/reportPosterDraw.js b/src/utils/reportPosterDraw.js
index 179702c..e674574 100644
--- a/src/utils/reportPosterDraw.js
+++ b/src/utils/reportPosterDraw.js
@@ -1,173 +1,255 @@
-/** 洗美报告分享海报绘制（H5 / 小程序 canvas 2d 共用逻辑） */
+/**
+ * 洗美报告分享海报 — 简约风格 v2
+ * H5 / 小程序 canvas 2d 共用
+ */
export const POSTER_W = 750
-export const POSTER_H = 1100
+export const POSTER_H = 1200
-export function roundRect(ctx, x, y, w, h, r) {
+const FONT = '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
+
+function roundRect(ctx, x, y, w, h, r) {
+ const rr = Math.min(r, w / 2, h / 2)
ctx.beginPath()
- ctx.moveTo(x + r, y)
- ctx.lineTo(x + w - r, y)
- ctx.quadraticCurveTo(x + w, y, x + w, y + r)
- ctx.lineTo(x + w, y + h - r)
- ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
- ctx.lineTo(x + r, y + h)
- ctx.quadraticCurveTo(x, y + h, x, y + h - r)
- ctx.lineTo(x, y + r)
- ctx.quadraticCurveTo(x, y, x + r, y)
+ ctx.moveTo(x + rr, y)
+ ctx.arcTo(x + w, y, x + w, y + h, rr)
+ ctx.arcTo(x + w, y + h, x, y + h, rr)
+ ctx.arcTo(x, y + h, x, y, rr)
+ ctx.arcTo(x, y, x + w, y, rr)
ctx.closePath()
}
+function fillRR(ctx, x, y, w, h, r, fill) {
+ ctx.fillStyle = fill
+ roundRect(ctx, x, y, w, h, r)
+ ctx.fill()
+}
+
+function wrapText(ctx, text, x, y, maxW, lineH, maxLines) {
+ if (!text) return y
+ const chars = String(text).split('')
+ let line = ''
+ let cy = y
+ let n = 0
+ for (let i = 0; i < chars.length; i++) {
+ const test = line + chars[i]
+ if (ctx.measureText(test).width > maxW && line) {
+ n++
+ if (maxLines && n >= maxLines) {
+ ctx.fillText(line + '…', x, cy)
+ return cy + lineH
+ }
+ ctx.fillText(line, x, cy)
+ line = chars[i]
+ cy += lineH
+ } else {
+ line = test
+ }
+ }
+ if (line) { ctx.fillText(line, x, cy); cy += lineH }
+ return cy
+}
+
/**
* @param {CanvasRenderingContext2D} ctx
- * @param {{
- * storeName: string
- * storePhone: string
- * storeAddr: string
- * petName: string
- * serviceType: string
- * timeStr: string
- * staffName: string
- * remark: string
- * beforeImg: any | null
- * afterImg: any | null
- * }} data
*/
export function drawReportPoster(ctx, data) {
const {
- storeName,
- storePhone,
- storeAddr,
- petName,
- serviceType,
- timeStr,
- staffName,
- remark,
- beforeImg,
- afterImg
+ storeName, storePhone, storeAddr,
+ petName, serviceType, timeStr, staffName,
+ remark, beforeImg, afterImg, qrImg,
+ beforeCount, afterCount
} = data
- ctx.fillStyle = '#ffffff'
+ const name = storeName || '宠伴生活馆'
+ const PAD = 40
+
+ // ── 背景 ──
+ ctx.fillStyle = '#fafaf8'
ctx.fillRect(0, 0, POSTER_W, POSTER_H)
- const gradient = ctx.createLinearGradient(0, 0, POSTER_W, 300)
- gradient.addColorStop(0, '#07c160')
- gradient.addColorStop(1, '#10b76f')
- ctx.fillStyle = gradient
- ctx.fillRect(0, 0, POSTER_W, 300)
+ // ── 顶部品牌条 ──
+ const barH = 100
+ ctx.fillStyle = '#1a1a1a'
+ ctx.fillRect(0, 0, POSTER_W, barH)
- const name = storeName || '宠伴生活馆'
+ ctx.textAlign = 'center'
ctx.fillStyle = '#ffffff'
- ctx.font = 'bold 36px sans-serif'
- ctx.textAlign = 'center'
- ctx.fillText(name, POSTER_W / 2, 70)
- ctx.font = '20px sans-serif'
- ctx.globalAlpha = 0.7
- ctx.fillText('宠物服务，让爱更专业', POSTER_W / 2, 105)
- ctx.globalAlpha = 1
+ ctx.font = `bold 30px ${FONT}`
+ ctx.fillText(name, POSTER_W / 2, 60)
- if (storePhone || storeAddr) {
- ctx.font = '18px sans-serif'
- ctx.globalAlpha = 0.85
- const contactLine = [storePhone, storeAddr].filter(Boolean).join(' | ')
- ctx.fillText(contactLine, POSTER_W / 2, 138)
- ctx.globalAlpha = 1
- }
-
- ctx.fillStyle = '#333333'
- ctx.font = 'bold 36px sans-serif'
- ctx.fillText('服务报告', POSTER_W / 2, 220)
-
- ctx.fillStyle = '#f8f6f3'
- ctx.beginPath()
- roundRect(ctx, 40, 260, 670, 220, 20)
- ctx.fill()
-
- const infoItems = [
- ['宠物名字', petName || '-'],
- ['服务项目', serviceType || '-'],
- ['服务时间', timeStr || '-'],
- ['服务技师', staffName || '-']
- ]
- let y = 310
- ctx.textAlign = 'left'
- infoItems.forEach(([label, val]) => {
- ctx.fillStyle = '#999999'
- ctx.font = '22px sans-serif'
- ctx.fillText(label, 80, y)
- ctx.fillStyle = '#333333'
- ctx.font = 'bold 24px sans-serif'
- ctx.fillText(String(val), 220, y)
- y += 48
- })
-
- ctx.fillStyle = '#f8f6f3'
- ctx.beginPath()
- roundRect(ctx, 40, 500, 670, 360, 20)
- ctx.fill()
-
- ctx.fillStyle = '#333333'
- ctx.font = 'bold 24px sans-serif'
- ctx.textAlign = 'center'
- ctx.fillText('服务前后对比', POSTER_W / 2, 545)
-
- const imgY = 575
- const imgH = 260
- const imgW = 300
-
- ctx.fillStyle = '#e0e0e0'
- ctx.beginPath()
- roundRect(ctx, 60, imgY, imgW, imgH, 16)
- ctx.fill()
- ctx.fillStyle = '#999999'
- ctx.font = '20px sans-serif'
- ctx.fillText('服务前', 210, imgY + imgH / 2)
-
- ctx.fillStyle = '#e0e0e0'
- ctx.beginPath()
- roundRect(ctx, 390, imgY, imgW, imgH, 16)
- ctx.fill()
- ctx.fillStyle = '#999999'
- ctx.fillText('服务后', 540, imgY + imgH / 2)
-
- if (remark) {
- ctx.fillStyle = '#f8f6f3'
- ctx.beginPath()
- roundRect(ctx, 40, 880, 670, 100, 20)
- ctx.fill()
- ctx.fillStyle = '#666666'
- ctx.font = '22px sans-serif'
- ctx.textAlign = 'left'
- if (remark.length > 30) {
- ctx.fillText(remark.substring(0, 30), 70, 920)
- ctx.fillText(remark.substring(30), 70, 955)
- } else {
- ctx.fillText(remark, 70, 930)
- }
- }
-
- ctx.fillStyle = '#0f172a'
- ctx.font = '20px sans-serif'
- ctx.textAlign = 'center'
- ctx.fillText('长按识别小程序 · 欢迎再次预约', POSTER_W / 2, 1020)
-
- ctx.fillStyle = '#07c160'
- ctx.font = 'bold 22px sans-serif'
- ctx.fillText(`— ${name} —`, POSTER_W / 2, 1055)
+ // ── 照片对比区 ──
+ const photoY = barH
+ const photoH = 360
+ const halfW = POSTER_W / 2
if (beforeImg) {
ctx.save()
ctx.beginPath()
- roundRect(ctx, 60, imgY, imgW, imgH, 16)
+ ctx.rect(0, photoY, halfW - 1.5, photoH)
ctx.clip()
- ctx.drawImage(beforeImg, 60, imgY, imgW, imgH)
+ const bw = beforeImg.width || halfW
+ const bh = beforeImg.height || photoH
+ const scale = Math.max(halfW / bw, photoH / bh)
+ const dw = bw * scale
+ const dh = bh * scale
+ ctx.drawImage(beforeImg, (halfW - dw) / 2, photoY + (photoH - dh) / 2, dw, dh)
ctx.restore()
+ } else {
+ ctx.fillStyle = '#f0f0ee'
+ ctx.fillRect(0, photoY, halfW - 1.5, photoH)
+ ctx.fillStyle = '#bbbbb5'
+ ctx.font = `14px ${FONT}`
+ ctx.textAlign = 'center'
+ ctx.fillText('暂无照片', halfW / 2, photoY + photoH / 2 + 5)
}
+
if (afterImg) {
ctx.save()
ctx.beginPath()
- roundRect(ctx, 390, imgY, imgW, imgH, 16)
+ ctx.rect(halfW + 1.5, photoY, halfW - 1.5, photoH)
ctx.clip()
- ctx.drawImage(afterImg, 390, imgY, imgW, imgH)
+ const aw = afterImg.width || halfW
+ const ah = afterImg.height || photoH
+ const scale = Math.max(halfW / aw, photoH / ah)
+ const dw = aw * scale
+ const dh = ah * scale
+ ctx.drawImage(afterImg, halfW + 1.5 + (halfW - dw) / 2, photoY + (photoH - dh) / 2, dw, dh)
ctx.restore()
+ } else {
+ ctx.fillStyle = '#f0f0ee'
+ ctx.fillRect(halfW + 1.5, photoY, halfW - 1.5, photoH)
+ ctx.fillStyle = '#bbbbb5'
+ ctx.font = `14px ${FONT}`
+ ctx.textAlign = 'center'
+ ctx.fillText('暂无照片', halfW + halfW / 2, photoY + photoH / 2 + 5)
}
+
+ // 白色中间分隔
+ ctx.fillStyle = '#ffffff'
+ ctx.fillRect(halfW - 1.5, photoY, 3, photoH)
+
+ // Before / After 标签
+ const tagW = 90
+ const tagH = 28
+ const tagY = photoY + photoH - 12 - tagH
+
+ fillRR(ctx, 12, tagY, tagW, tagH, 6, 'rgba(245, 145, 62, 0.9)')
+ ctx.fillStyle = '#fff'
+ ctx.font = `bold 13px ${FONT}`
+ ctx.textAlign = 'center'
+ ctx.fillText('BEFORE', 12 + tagW / 2, tagY + 19)
+
+ fillRR(ctx, halfW + 12, tagY, tagW, tagH, 6, 'rgba(45, 185, 109, 0.9)')
+ ctx.fillStyle = '#fff'
+ ctx.fillText('AFTER', halfW + 12 + tagW / 2, tagY + 19)
+
+ // 中间对比提示
+ fillRR(ctx, POSTER_W / 2 - 38, photoY + photoH / 2 - 16, 76, 32, 16, 'rgba(26, 26, 26, 0.82)')
+ ctx.fillStyle = '#fff'
+ ctx.font = `bold 12px ${FONT}`
+ ctx.fillText('前后对比', POSTER_W / 2, photoY + photoH / 2 + 5)
+
+ // 数量信息
+ const metaY = photoY + photoH + 18
+ const metaW = (POSTER_W - PAD * 2 - 12) / 2
+ const metaRightX = PAD + metaW + 12
+ fillRR(ctx, PAD, metaY, metaW, 42, 12, '#fff7f0')
+ fillRR(ctx, metaRightX, metaY, metaW, 42, 12, '#f3fbf6')
+ ctx.font = `bold 14px ${FONT}`
+ ctx.fillStyle = '#f5913e'
+ ctx.fillText(`服务前 ${beforeCount || 0} 张`, PAD + metaW / 2, metaY + 27)
+ ctx.fillStyle = '#2db96d'
+ ctx.fillText(`服务后 ${afterCount || 0} 张`, metaRightX + metaW / 2, metaY + 27)
+
+ // ── 白色内容卡 ──
+ const cardY = metaY + 58
+ const cardX = PAD
+ const cardW = POSTER_W - PAD * 2
+ const cardH = POSTER_H - cardY - 100
+ fillRR(ctx, cardX, cardY, cardW, cardH, 20, '#ffffff')
+
+ // 标题与宠物信息
+ ctx.textAlign = 'left'
+ let cy = cardY + 36
+
+ ctx.fillStyle = '#1a1a1a'
+ ctx.font = `bold 32px ${FONT}`
+ ctx.fillText(petName || '—', cardX + 28, cy)
+ cy += 12
+
+ ctx.fillStyle = '#999993'
+ ctx.font = `14px ${FONT}`
+ ctx.fillText(serviceType || '', cardX + 28, cy + 20)
+ cy += 48
+
+ // 信息卡标题
+ ctx.fillStyle = '#999993'
+ ctx.font = `bold 12px ${FONT}`
+ ctx.fillText('服务详情', cardX + 28, cy - 6)
+
+ // 分隔线
+ ctx.fillStyle = '#f0f0ee'
+ ctx.fillRect(cardX + 28, cy, cardW - 56, 1)
+ cy += 20
+
+ // 信息行
+ const infoRows = [
+ ['时间', timeStr || '—'],
+ ['技师', staffName || '—']
+ ]
+ ctx.font = `14px ${FONT}`
+ infoRows.forEach(([k, v]) => {
+ ctx.fillStyle = '#bbbbb5'
+ ctx.fillText(k, cardX + 28, cy)
+ ctx.fillStyle = '#1a1a1a'
+ ctx.font = `bold 15px ${FONT}`
+ ctx.fillText(String(v), cardX + 100, cy)
+ ctx.font = `14px ${FONT}`
+ cy += 36
+ })
+
+ // 备注
+ if (remark && String(remark).trim()) {
+ cy += 8
+ ctx.fillStyle = '#f5f5f2'
+ roundRect(ctx, cardX + 20, cy - 6, cardW - 40, 80, 12)
+ ctx.fill()
+ ctx.fillStyle = '#666660'
+ ctx.font = `13px ${FONT}`
+ wrapText(ctx, String(remark).trim(), cardX + 34, cy + 16, cardW - 72, 20, 3)
+ cy += 92
+ }
+
+ // 二维码（可选）
+ if (qrImg) {
+ const qrSize = 120
+ const qx = POSTER_W / 2 - qrSize / 2
+ const qy = cy + 10
+ ctx.save()
+ roundRect(ctx, qx, qy, qrSize, qrSize, 10)
+ ctx.clip()
+ ctx.drawImage(qrImg, qx, qy, qrSize, qrSize)
+ ctx.restore()
+ cy = qy + qrSize + 10
+ ctx.fillStyle = '#bbbbb5'
+ ctx.font = `12px ${FONT}`
+ ctx.textAlign = 'center'
+ ctx.fillText('扫码查看报告详情', POSTER_W / 2, cy + 4)
+ }
+
+ // ── 底部品牌 ──
+ const footY = POSTER_H - 56
+ ctx.textAlign = 'center'
+
+ ctx.fillStyle = '#ebebea'
+ ctx.fillRect(POSTER_W / 2 - 16, footY, 32, 2)
+
+ ctx.fillStyle = '#1a1a1a'
+ ctx.font = `bold 16px ${FONT}`
+ ctx.fillText(name, POSTER_W / 2, footY + 26)
+
+ ctx.fillStyle = '#bbbbb5'
+ ctx.font = `11px ${FONT}`
+ ctx.fillText('宠物服务 · 让爱更专业', POSTER_W / 2, footY + 44)
}