413 lines
12 KiB
Vue
413 lines
12 KiB
Vue
<template>
|
||
<div class="report-view">
|
||
<!-- 加载中 -->
|
||
<div v-if="loading" class="loading-wrap">
|
||
<view class="loading-spinner"></view>
|
||
<span>加载报告中...</span>
|
||
</div>
|
||
|
||
<!-- 未找到 -->
|
||
<div v-else-if="notFound" class="not-found">
|
||
<view class="empty"><text>报告不存在或链接已失效</text></view>
|
||
</div>
|
||
|
||
<!-- 报告内容 -->
|
||
<div v-else-if="reportData" class="report-content">
|
||
<!-- 品牌头部 -->
|
||
<div class="brand-header" :style="brandHeaderSafeStyle">
|
||
<div class="header-actions">
|
||
<view class="header-btn" @click="goHome">
|
||
<AppIcon name="home" :size="15" color="#ffffff" />
|
||
</view>
|
||
<view class="header-placeholder"></view>
|
||
</div>
|
||
<div class="brand-logo">{{ reportData.store?.name || '宠伴生活馆' }}</div>
|
||
<div class="brand-sub">宠物服务，让爱更专业</div>
|
||
<div class="brand-contact">
|
||
<span v-if="reportData.store?.phone">电话：{{ reportData.store.phone }}</span>
|
||
<span v-if="reportData.store?.address">地址：{{ reportData.store.address }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 报告标题 -->
|
||
<div class="report-title-wrap">
|
||
<div class="report-title">服务报告</div>
|
||
<div class="report-time">{{ formatTime(reportData.appointmentTime) }}</div>
|
||
</div>
|
||
|
||
<!-- 服务信息 -->
|
||
<view class="van-cell-group service-info">
|
||
<view class="van-cell">
|
||
<view class="van-cell__title">宠物名字</view>
|
||
<view class="van-cell__value">{{ reportData.petName }}</view>
|
||
</view>
|
||
<view class="van-cell">
|
||
<view class="van-cell__title">服务项目</view>
|
||
<view class="van-cell__value">{{ reportData.serviceType }}</view>
|
||
</view>
|
||
<view class="van-cell">
|
||
<view class="van-cell__title">服务时间</view>
|
||
<view class="van-cell__value">{{ formatTime(reportData.appointmentTime) }}</view>
|
||
</view>
|
||
<view class="van-cell">
|
||
<view class="van-cell__title">服务技师</view>
|
||
<view class="van-cell__value">{{ reportData.staffName || '-' }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 照片对比 -->
|
||
<div class="photo-section section-card">
|
||
<div class="section-label">服务前后对比</div>
|
||
<div class="photo-grid">
|
||
<image
|
||
v-if="reportData.beforePhoto"
|
||
:src="imgUrl(reportData.beforePhoto)"
|
||
class="photo-image"
|
||
mode="aspectFill"
|
||
/>
|
||
<view v-else class="photo-empty">暂无照片</view>
|
||
<image
|
||
v-if="reportData.afterPhoto"
|
||
:src="imgUrl(reportData.afterPhoto)"
|
||
class="photo-image"
|
||
mode="aspectFill"
|
||
/>
|
||
<view v-else class="photo-empty">暂无照片</view>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 备注 -->
|
||
<div class="remark-section section-card">
|
||
<div class="section-label">备注</div>
|
||
<div class="remark-content">
|
||
{{ reportData.remark || '暂无备注' }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 下次服务提醒（留资钩子 A） -->
|
||
<ReminderCard
|
||
:token="reportData.reportToken || routeToken"
|
||
:pet-name="reportData.petName"
|
||
/>
|
||
|
||
<!-- 生成海报按钮 -->
|
||
<div class="action-section">
|
||
<button class="van-button van-button--primary van-button--round van-button--block" @click="generatePoster">生成图片分享朋友圈</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Canvas海报（隐藏，仅 H5） -->
|
||
<!-- #ifdef H5 -->
|
||
<canvas ref="posterCanvas" style="position:fixed;top:-9999px;left:-9999px;" />
|
||
<!-- #endif -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { getReportByToken, imgUrl } from '../api/index.js'
|
||
import { formatDateTimeYMDHM } from '../utils/datetime.js'
|
||
import AppIcon from '../components/AppIcon.vue'
|
||
import ReminderCard from '../components/report/ReminderCard.vue'
|
||
import { navigateTo } from '../utils/globalState.js'
|
||
|
||
const loading = ref(true)
|
||
const notFound = ref(false)
|
||
const reportData = ref(null)
|
||
const posterCanvas = ref(null)
|
||
const routeToken = ref('')
|
||
const brandHeaderSafeStyle = (() => {
|
||
const statusBarHeight = uni.getSystemInfoSync?.().statusBarHeight || 20
|
||
return `padding-top:${statusBarHeight + 10}px;`
|
||
})()
|
||
|
||
const formatTime = (time) => formatDateTimeYMDHM(time)
|
||
|
||
const loadReport = async () => {
|
||
let token = routeToken.value
|
||
// #ifdef H5
|
||
token = new URLSearchParams(window.location.search).get('token')
|
||
// #endif
|
||
if (!token) { notFound.value = true; loading.value = false; return }
|
||
|
||
uni.showLoading({ title: '加载中...' })
|
||
const res = await getReportByToken(token)
|
||
uni.hideLoading()
|
||
loading.value = false
|
||
if (res.code === 200) {
|
||
reportData.value = res.data
|
||
} else {
|
||
notFound.value = true
|
||
}
|
||
}
|
||
|
||
const goHome = () => {
|
||
navigateTo('home')
|
||
}
|
||
|
||
// #ifdef H5
|
||
const loadImage = (src) => {
|
||
return new Promise((resolve) => {
|
||
const img = new Image()
|
||
img.crossOrigin = 'anonymous'
|
||
img.onload = () => resolve(img)
|
||
img.onerror = () => resolve(null)
|
||
img.src = src
|
||
})
|
||
}
|
||
|
||
const generatePoster = async () => {
|
||
if (!reportData.value) return
|
||
uni.showToast({ title: '正在生成海报...', icon: 'none' })
|
||
const r = reportData.value
|
||
const canvas = posterCanvas.value
|
||
const ctx = canvas.getContext('2d')
|
||
canvas.width = 750
|
||
canvas.height = 1100
|
||
|
||
ctx.fillStyle = '#ffffff'
|
||
ctx.fillRect(0, 0, 750, 1100)
|
||
|
||
const gradient = ctx.createLinearGradient(0, 0, 750, 300)
|
||
gradient.addColorStop(0, '#07c160')
|
||
gradient.addColorStop(1, '#10b76f')
|
||
ctx.fillStyle = gradient
|
||
ctx.fillRect(0, 0, 750, 300)
|
||
|
||
const storeName = r.store?.name || '宠伴生活馆'
|
||
const storePhone = r.store?.phone || ''
|
||
const storeAddr = r.store?.address || ''
|
||
|
||
ctx.fillStyle = '#ffffff'
|
||
ctx.font = 'bold 36px sans-serif'
|
||
ctx.textAlign = 'center'
|
||
ctx.fillText(storeName, 375, 70)
|
||
ctx.font = '20px sans-serif'
|
||
ctx.globalAlpha = 0.7
|
||
ctx.fillText('宠物服务，让爱更专业', 375, 105)
|
||
ctx.globalAlpha = 1
|
||
|
||
if (storePhone || storeAddr) {
|
||
ctx.font = '18px sans-serif'
|
||
ctx.globalAlpha = 0.85
|
||
const contactLine = [storePhone, storeAddr].filter(Boolean).join(' | ')
|
||
ctx.fillText(contactLine, 375, 138)
|
||
ctx.globalAlpha = 1
|
||
}
|
||
|
||
ctx.fillStyle = '#333333'
|
||
ctx.font = 'bold 36px sans-serif'
|
||
ctx.fillText('服务报告', 375, 220)
|
||
|
||
ctx.fillStyle = '#f8f6f3'
|
||
ctx.beginPath()
|
||
roundRect(ctx, 40, 260, 670, 220, 20)
|
||
ctx.fill()
|
||
|
||
const infoItems = [
|
||
['宠物名字', r.petName || '-'],
|
||
['服务项目', r.serviceType || '-'],
|
||
['服务时间', formatTime(r.appointmentTime) || '-'],
|
||
['服务技师', r.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(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('服务前后对比', 375, 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 (r.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'
|
||
const remark = r.remark
|
||
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 = '#07c160'
|
||
ctx.font = 'bold 22px sans-serif'
|
||
ctx.textAlign = 'center'
|
||
ctx.fillText(`— ${storeName} —`, 375, 1050)
|
||
|
||
const beforeImgSrc = r.beforePhoto ? imgUrl(r.beforePhoto) : null
|
||
const afterImgSrc = r.afterPhoto ? imgUrl(r.afterPhoto) : null
|
||
const [beforeImg, afterImg] = await Promise.all([
|
||
beforeImgSrc ? loadImage(beforeImgSrc) : Promise.resolve(null),
|
||
afterImgSrc ? loadImage(afterImgSrc) : Promise.resolve(null)
|
||
])
|
||
|
||
if (beforeImg) {
|
||
ctx.save()
|
||
ctx.beginPath()
|
||
roundRect(ctx, 60, imgY, imgW, imgH, 16)
|
||
ctx.clip()
|
||
ctx.drawImage(beforeImg, 60, imgY, imgW, imgH)
|
||
ctx.restore()
|
||
}
|
||
if (afterImg) {
|
||
ctx.save()
|
||
ctx.beginPath()
|
||
roundRect(ctx, 390, imgY, imgW, imgH, 16)
|
||
ctx.clip()
|
||
ctx.drawImage(afterImg, 390, imgY, imgW, imgH)
|
||
ctx.restore()
|
||
}
|
||
|
||
const link = document.createElement('a')
|
||
link.download = `服务报告_${r.petName || '宠物'}.png`
|
||
link.href = canvas.toDataURL('image/png')
|
||
link.click()
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
const generatePoster = () => {
|
||
uni.showToast({ title: '请在微信中长按保存海报', icon: 'none' })
|
||
}
|
||
// #endif
|
||
|
||
function roundRect(ctx, x, y, w, h, r) {
|
||
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.closePath()
|
||
}
|
||
|
||
onLoad((options) => {
|
||
routeToken.value = options?.token || ''
|
||
})
|
||
|
||
onMounted(() => loadReport())
|
||
</script>
|
||
|
||
<style scoped>
|
||
.report-view { background: #f5f7fb; min-height: 100vh; }
|
||
.loading-wrap {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
min-height: 100vh; gap: 16px; color: #999;
|
||
}
|
||
.loading-spinner {
|
||
width: 32px; height: 32px;
|
||
border: 3px solid #e0e0e0;
|
||
border-top-color: #07c160;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.not-found { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
|
||
.report-content { max-width: 430px; margin: 0 auto; background: #f8fafc; min-height: 100vh; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
|
||
.brand-header {
|
||
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||
padding: 20px 20px 18px;
|
||
text-align: center; color: #fff;
|
||
border-radius: 0 0 16px 16px;
|
||
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.24);
|
||
position: relative;
|
||
}
|
||
.header-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.header-btn {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||
background: rgba(255, 255, 255, 0.2);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.header-placeholder {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.brand-logo { font-size: 20px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
|
||
.brand-sub { font-size: 12px; opacity: 0.7; margin-bottom: 12px; }
|
||
.brand-contact { font-size: 12px; opacity: 0.85; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
|
||
.report-title-wrap { text-align: center; padding: 20px 20px 14px; }
|
||
.report-title { font-size: 22px; font-weight: 700; color: #333; }
|
||
.report-time { font-size: 13px; color: #999; margin-top: 6px; }
|
||
.service-info { margin: 0 16px 12px; border-radius: 14px !important; }
|
||
.section-card {
|
||
margin: 0 16px 12px;
|
||
background: #fff;
|
||
border: 1px solid #e8edf4;
|
||
border-radius: 14px;
|
||
padding: 12px;
|
||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
|
||
}
|
||
.section-label { font-size: 15px; font-weight: 700; color: #1f2937; margin-bottom: 10px; }
|
||
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.photo-image {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 12px;
|
||
border: 1px solid #e5e7eb;
|
||
}
|
||
.photo-empty {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
background: #f1f5f9;
|
||
border: 1px dashed #d1d9e6;
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 13px;
|
||
}
|
||
.remark-content { background: #f8fafc; border: 1px solid #e8edf4; border-radius: 12px; padding: 14px; font-size: 14px; color: #64748b; line-height: 1.6; min-height: 60px; }
|
||
.action-section { margin: 0 16px 24px; }
|
||
</style>
|