From bb0908e7d304b8a7e0c368d0f418ab9e26270ed4 Mon Sep 17 00:00:00 2001
From: MaDaLei <madai@netease.com>
Date: Mon, 13 Apr 2026 14:29:21 +0800
Subject: [PATCH] feat: update API to https://api.s-good.com

---
 .env.production                      |   1 +
 src/pages/mine/MyOrders.vue          |  18 +-
 src/pages/report-view/reportView.vue | 369 +++++++++++++++------------
 3 files changed, 213 insertions(+), 175 deletions(-)
 create mode 100644 .env.production

diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..6819b97
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_API_ORIGIN=https://api.s-good.com
diff --git a/src/pages/mine/MyOrders.vue b/src/pages/mine/MyOrders.vue
index 4f84306..fd9e9aa 100644
--- a/src/pages/mine/MyOrders.vue
+++ b/src/pages/mine/MyOrders.vue
@@ -9,7 +9,8 @@
 
     <view class="page-section orders-hero">
       <view class="hero-title">服务进度一目了然</view>
-      <view class="hero-sub">按状态查看订单，待确认可快速开始服务，进行中可直接填写报告。</view>
+      <view v-if="userInfo.role === 'customer'" class="hero-sub">查看您的预约状态，随时掌握服务进度。</view>
+      <view v-else class="hero-sub">按状态查看订单，待确认可快速开始服务，进行中可直接填写报告。</view>
     </view>
 
     <!-- 状态 Tab -->
@@ -39,11 +40,18 @@
             <text>{{ item.time }}</text>
           </span>
         </div>
-        <div v-if="item.status === 'new'" class="action-btns">
-          <button class="van-button van-button--small van-button--primary" @click="startService(item)">开始服务</button>
-          <button class="van-button van-button--small" @click="cancelService(item)">取消</button>
+        <div v-if="userInfo.role !== 'customer'">
+          <div v-if="item.status === 'new'" class="action-btns">
+            <button class="van-button van-button--small van-button--primary" @click="startService(item)">开始服务</button>
+            <button class="van-button van-button--small" @click="cancelService(item)">取消</button>
+          </div>
+          <button v-else-if="item.status === 'doing'" class="van-button van-button--small btn-mt" @click="goReport(item)">填写报告</button>
+        </div>
+        <div v-else>
+          <div v-if="item.status === 'new'" class="action-btns">
+            <button class="van-button van-button--small" @click="cancelService(item)">取消预约</button>
+          </div>
         </div>
-        <button v-else-if="item.status === 'doing'" class="van-button van-button--small btn-mt" @click="goReport(item)">填写报告</button>
       </div>
     </view>
 
diff --git a/src/pages/report-view/reportView.vue b/src/pages/report-view/reportView.vue
index 8dd5eb5..5b66798 100644
--- a/src/pages/report-view/reportView.vue
+++ b/src/pages/report-view/reportView.vue
@@ -108,7 +108,7 @@
           <button open-type="share" class="van-button van-button--primary van-button--round van-button--block share-btn">
             <AppIcon name="profile" :size="16" color="#ffffff" style="margin-right: 6px;" /> 转发给宠主
           </button>
-          <button class="van-button van-button--block btn-ghost" @click="generatePoster">生成图片分享朋友圈</button>
+          <button class="van-button van-button--block btn-ghost" @click="generatePoster">生成海报 · 保存到相册</button>
         </template>
         
         <!-- 宠主视角 -->
@@ -122,20 +122,27 @@
       </div>
     </div>
 
-    <!-- Canvas海报（隐藏，仅 H5） -->
+    <!-- Canvas 海报（H5 DOM / 小程序 2d） -->
     <!-- #ifdef H5 -->
-    <canvas ref="posterCanvas" style="position:fixed;top:-9999px;left:-9999px;" />
+    <canvas ref="posterCanvas" class="poster-canvas-offscreen" />
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas
+      id="reportPosterCanvas"
+      type="2d"
+      class="poster-canvas-offscreen"
+    />
     <!-- #endif -->
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, getCurrentInstance } from 'vue'
 import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import { getReportByToken, imgUrl } from '../../api/index.js'
 import { formatDateTimeYMDHM } from '../../utils/datetime.js'
+import { drawReportPoster, POSTER_W, POSTER_H } from '../../utils/reportPosterDraw.js'
 import AppIcon from '../../components/AppIcon.vue'
-import { navigateTo } from '../../utils/globalState.js'
 import { isLoggedIn } from '../../utils/session.js'
 
 const loading = ref(true)
@@ -155,6 +162,23 @@ const afterPhotos = computed(() => {
   if (!reportData.value?.afterPhoto) return []
   return reportData.value.afterPhoto.split(',').filter(Boolean)
 })
+
+/** 转发标题：店名 + 宠物 + 服务，更易产生点击欲 */
+const shareTitle = computed(() => {
+  const r = reportData.value
+  if (!r) return '宠物洗护美容报告'
+  const store = r.store?.name || '宠伴生活馆'
+  const pet = r.petName || '爱宠'
+  const svc = r.serviceType || '洗护美容'
+  return `${store}｜${pet}的${svc}已完成，点击查看报告`
+})
+
+/** 分享封面：优先服务后首图（微信要求可访问 https 图床） */
+const shareCoverUrl = computed(() => {
+  if (afterPhotos.value.length > 0) return imgUrl(afterPhotos.value[0])
+  if (beforePhotos.value.length > 0) return imgUrl(beforePhotos.value[0])
+  return ''
+})
 const brandHeaderSafeStyle = (() => {
   const statusBarHeight = uni.getSystemInfoSync?.().statusBarHeight || 20
   return `padding-top:${statusBarHeight + 10}px;`
@@ -204,30 +228,25 @@ const navToStore = () => {
 }
 
 onShareAppMessage(() => {
-  const r = reportData.value
-  const title = r ? `【${r.petName}】的洗护美容报告出炉啦！` : '宠物洗护美容报告'
-  const imageUrl = afterPhotos.value.length > 0 
-    ? imgUrl(afterPhotos.value[0]) 
-    : (beforePhotos.value.length > 0 ? imgUrl(beforePhotos.value[0]) : '')
-  
+  const q = routeToken.value ? `token=${encodeURIComponent(routeToken.value)}` : ''
   return {
-    title,
-    path: `/pages/report-view/reportView?token=${routeToken.value}`,
-    imageUrl
+    title: shareTitle.value,
+    path: `/pages/report-view/reportView${q ? '?' + q : ''}`,
+    imageUrl: shareCoverUrl.value || undefined
   }
 })
 
 onShareTimeline(() => {
-  const r = reportData.value
-  const title = r ? `【${r.petName}】的洗护美容报告出炉啦！` : '宠物洗护美容报告'
+  const q = routeToken.value ? `token=${encodeURIComponent(routeToken.value)}` : ''
   return {
-    title,
-    query: `token=${routeToken.value}`
+    title: shareTitle.value,
+    query: q,
+    imageUrl: shareCoverUrl.value || undefined
   }
 })
 
 // #ifdef H5
-const loadImage = (src) => {
+const loadImageH5 = (src) => {
   return new Promise((resolve) => {
     const img = new Image()
     img.crossOrigin = 'anonymous'
@@ -239,171 +258,173 @@ const loadImage = (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
+  uni.showToast({ title: '正在生成海报...', icon: 'none' })
+  const beforeUrl = beforePhotos.value[0] ? imgUrl(beforePhotos.value[0]) : ''
+  const afterUrl = afterPhotos.value[0] ? imgUrl(afterPhotos.value[0]) : ''
   const [beforeImg, afterImg] = await Promise.all([
-    beforeImgSrc ? loadImage(beforeImgSrc) : Promise.resolve(null),
-    afterImgSrc ? loadImage(afterImgSrc) : Promise.resolve(null)
+    beforeUrl ? loadImageH5(beforeUrl) : Promise.resolve(null),
+    afterUrl ? loadImageH5(afterUrl) : 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 canvas = posterCanvas.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  canvas.width = POSTER_W
+  canvas.height = POSTER_H
+  drawReportPoster(ctx, {
+    storeName: r.store?.name || '',
+    storePhone: r.store?.phone || '',
+    storeAddr: r.store?.address || '',
+    petName: r.petName || '',
+    serviceType: r.serviceType || '',
+    timeStr: formatTime(r.appointmentTime) || '',
+    staffName: r.staffName || '',
+    remark: r.remark || '',
+    beforeImg,
+    afterImg
+  })
   const link = document.createElement('a')
   link.download = `服务报告_${r.petName || '宠物'}.png`
   link.href = canvas.toDataURL('image/png')
   link.click()
+  uni.showToast({ title: '已下载海报', icon: 'success' })
+}
+// #endif
+
+// #ifdef MP-WEIXIN
+function downloadToTemp(url) {
+  return new Promise((resolve) => {
+    if (!url) {
+      resolve(null)
+      return
+    }
+    uni.downloadFile({
+      url,
+      success: (res) => {
+        if (res.statusCode === 200) resolve(res.tempFilePath)
+        else resolve(null)
+      },
+      fail: () => resolve(null)
+    })
+  })
+}
+
+function loadCanvasImage(canvas, tempPath) {
+  return new Promise((resolve) => {
+    if (!tempPath) {
+      resolve(null)
+      return
+    }
+    const img = canvas.createImage()
+    img.onload = () => resolve(img)
+    img.onerror = () => resolve(null)
+    img.src = tempPath
+  })
+}
+
+const generatePoster = async () => {
+  if (!reportData.value) return
+  const r = reportData.value
+  uni.showLoading({ title: '生成海报中...', mask: true })
+  try {
+    const beforeUrl = beforePhotos.value[0] ? imgUrl(beforePhotos.value[0]) : ''
+    const afterUrl = afterPhotos.value[0] ? imgUrl(afterPhotos.value[0]) : ''
+    const [beforePath, afterPath] = await Promise.all([
+      downloadToTemp(beforeUrl),
+      downloadToTemp(afterUrl)
+    ])
+
+    const inst = getCurrentInstance()
+    const proxy = inst?.proxy
+
+    await new Promise((resolve) => {
+      uni.createSelectorQuery()
+        .in(proxy)
+        .select('#reportPosterCanvas')
+        .fields({ node: true, size: true })
+        .exec(async (res) => {
+          const canvas = res[0]?.node
+          if (!canvas) {
+            uni.showToast({ title: '画布未就绪，请重试', icon: 'none' })
+            resolve()
+            return
+          }
+          const ctx = canvas.getContext('2d')
+          const dpr = Math.min(uni.getSystemInfoSync().pixelRatio || 2, 3)
+          canvas.width = POSTER_W * dpr
+          canvas.height = POSTER_H * dpr
+          ctx.scale(dpr, dpr)
+
+          const beforeImg = await loadCanvasImage(canvas, beforePath)
+          const afterImg = await loadCanvasImage(canvas, afterPath)
+
+          drawReportPoster(ctx, {
+            storeName: r.store?.name || '',
+            storePhone: r.store?.phone || '',
+            storeAddr: r.store?.address || '',
+            petName: r.petName || '',
+            serviceType: r.serviceType || '',
+            timeStr: formatTime(r.appointmentTime) || '',
+            staffName: r.staffName || '',
+            remark: r.remark || '',
+            beforeImg,
+            afterImg
+          })
+
+          uni.canvasToTempFilePath(
+            {
+              canvas,
+              fileType: 'png',
+              quality: 1,
+              destWidth: POSTER_W,
+              destHeight: POSTER_H,
+              success: (out) => {
+                uni.saveImageToPhotosAlbum({
+                  filePath: out.tempFilePath,
+                  success: () => {
+                    uni.showToast({ title: '已保存到相册', icon: 'success' })
+                  },
+                  fail: (err) => {
+                    const msg = err.errMsg || ''
+                    if (msg.includes('auth deny') || msg.includes('authorize')) {
+                      uni.showModal({
+                        title: '需要相册权限',
+                        content: '保存海报需要授权保存到相册，请在设置中开启。',
+                        confirmText: '去设置',
+                        success: (m) => {
+                          if (m.confirm) uni.openSetting({})
+                        }
+                      })
+                    } else {
+                      uni.showToast({ title: '保存失败', icon: 'none' })
+                    }
+                  }
+                })
+              },
+              fail: () => {
+                uni.showToast({ title: '导出图片失败', icon: 'none' })
+              }
+            },
+            proxy
+          )
+          resolve()
+        })
+    })
+  } catch (_) {
+    uni.showToast({ title: '生成失败', icon: 'none' })
+  } finally {
+    uni.hideLoading()
+  }
 }
 // #endif
 
 // #ifndef H5
+// #ifndef MP-WEIXIN
 const generatePoster = () => {
-  uni.showToast({ title: '请在微信中长按保存海报', icon: 'none' })
+  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()
-}
+// #endif
 
 onLoad((options) => {
   routeToken.value = options?.token || ''
@@ -413,6 +434,14 @@ onMounted(() => loadReport())
 </script>
 
 <style scoped>
+.poster-canvas-offscreen {
+  position: fixed;
+  left: -9999px;
+  top: 0;
+  width: 375px;
+  height: 550px;
+  pointer-events: none;
+}
 .report-view { background: #f5f7fb; min-height: 100vh; }
 .loading-wrap {
   display: flex; flex-direction: column; align-items: center; justify-content: center;