From 26da03f7396d3ed22245b75f6b51d3670a845b26 Mon Sep 17 00:00:00 2001
From: MaDaLei <madai@netease.com>
Date: Fri, 17 Apr 2026 18:58:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=8D=E5=8A=A1=E5=9B=9E=E9=A1=BE?=
 =?UTF-8?q?=E7=9F=AD=E7=89=87=E5=8A=9F=E8=83=BD=E4=B8=8A=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                     |   3 +
 src/pages/report-view/reportView.vue | 237 +++++++++++++++++++++++++--
 2 files changed, 229 insertions(+), 11 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 7d5ee4e..43da387 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -83,6 +83,9 @@ export const cancelAppointment = (id) => put(`/appointment/status?id=${id}&statu
 // 提交报告
 export const createReport = (data) => post('/report/create', data)
 
+/** 触发服务回顾短片生成（异步；reportId + 操作者）durationSec: 15 | 30 */
+export const postReportHighlightStart = (data) => post('/report/highlight/start', data)
+
 // 获取报告（通过token）
 export const getReportByToken = (token) => get('/report/get', { token })
 
diff --git a/src/pages/report-view/reportView.vue b/src/pages/report-view/reportView.vue
index ede46ab..e58e523 100644
--- a/src/pages/report-view/reportView.vue
+++ b/src/pages/report-view/reportView.vue
@@ -223,6 +223,47 @@
         <text class="remark-text">{{ reportData.remark }}</text>
       </view>
 
+      <!-- 服务回顾短片：素材智能剪辑（后端可扩展接入生成式 AI 视频） -->
+      <view v-if="hasHighlightSource" class="highlight-card">
+        <view class="highlight-head">
+          <text class="highlight-title">服务回顾短片</text>
+          <text class="highlight-badge">智能剪辑</text>
+        </view>
+        <text class="highlight-desc">
+          按「服务前 → 过程 → 服务后」顺序，将照片与短视频自动合成竖屏 9:16 成片（15 秒或 30 秒）。门店服务器需已安装 ffmpeg；若需大模型生成式成片，可在后端接入对应云 API。
+        </text>
+        <view v-if="highlightStatus === 'processing'" class="highlight-status highlight-status--busy">
+          <text>短片生成中，请稍候…</text>
+        </view>
+        <view v-else-if="highlightStatus === 'failed'" class="highlight-status highlight-status--err">
+          <text>{{ reportData.highlightVideoError || '生成失败' }}</text>
+        </view>
+        <video
+          v-if="highlightReady"
+          class="highlight-player"
+          :src="imgUrl(reportData.highlightVideoUrl)"
+          controls
+          :show-center-play-btn="true"
+          objectFit="contain"
+        />
+        <view v-if="canTriggerHighlight" class="highlight-actions">
+          <button
+            class="highlight-btn"
+            :disabled="highlightStatus === 'processing'"
+            @click="startHighlight(15)"
+          >
+            生成 15 秒
+          </button>
+          <button
+            class="highlight-btn highlight-btn--secondary"
+            :disabled="highlightStatus === 'processing'"
+            @click="startHighlight(30)"
+          >
+            生成 30 秒
+          </button>
+        </view>
+      </view>
+
       <!-- 操作区 -->
       <view class="actions">
         <template v-if="isStaff">
@@ -264,13 +305,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, getCurrentInstance, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, getCurrentInstance, nextTick } from 'vue'
 import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
-import { getReportByToken, imgUrl } from '../../api/index.js'
+import { getReportByToken, imgUrl, postReportHighlightStart } from '../../api/index.js'
 import { formatDateTimeYMDHM } from '../../utils/datetime.js'
 import { drawReportPoster, POSTER_W, computePosterLogicalHeight } from '../../utils/reportPosterDraw.js'
 import AppIcon from '../../components/AppIcon.vue'
-import { isLoggedIn } from '../../utils/session.js'
+import { getUserSession, isLoggedIn } from '../../utils/session.js'
 
 const loading = ref(true)
 const notFound = ref(false)
@@ -280,6 +321,96 @@ const routeToken = ref('')
 
 const isStaff = computed(() => isLoggedIn())
 
+const hasHighlightSource = computed(() => {
+  const r = reportData.value
+  if (!r) return false
+  const b = r.beforePhotos?.length || 0
+  const a = r.afterPhotos?.length || 0
+  const d = r.duringMedia?.length || 0
+  return b + a + d > 0
+})
+
+const highlightStatus = computed(() => reportData.value?.highlightVideoStatus || '')
+
+const highlightReady = computed(
+  () => highlightStatus.value === 'done' && !!reportData.value?.highlightVideoUrl
+)
+
+/** 仅店长/员工在登录态下可发起合成（宠主仅查看已生成短片） */
+const canTriggerHighlight = computed(() => {
+  const u = getUserSession()
+  const role = u?.role
+  return !!(u?.id && (role === 'boss' || role === 'staff'))
+})
+
+let highlightPollTimer = null
+
+const stopHighlightPoll = () => {
+  if (highlightPollTimer != null) {
+    clearInterval(highlightPollTimer)
+    highlightPollTimer = null
+  }
+}
+
+const getRouteToken = () => {
+  let token = routeToken.value
+  // #ifdef H5
+  token = new URLSearchParams(window.location.search).get('token') || token
+  // #endif
+  return token || ''
+}
+
+const maybeStartHighlightPoll = () => {
+  stopHighlightPoll()
+  if (reportData.value?.highlightVideoStatus !== 'processing') return
+  highlightPollTimer = setInterval(async () => {
+    const t = getRouteToken()
+    if (!t) {
+      stopHighlightPoll()
+      return
+    }
+    const res = await getReportByToken(t)
+    if (res.code === 200 && res.data) {
+      reportData.value = res.data
+      if (res.data.highlightVideoStatus !== 'processing') {
+        stopHighlightPoll()
+        if (res.data.highlightVideoStatus === 'done') {
+          uni.showToast({ title: '短片已生成', icon: 'success' })
+        }
+      }
+    }
+  }, 2500)
+}
+
+const startHighlight = async (durationSec) => {
+  const u = getUserSession()
+  if (!reportData.value?.id || !u?.id) {
+    uni.showToast({ title: '请先登录门店账号', icon: 'none' })
+    return
+  }
+  uni.showLoading({ title: '提交中' })
+  const res = await postReportHighlightStart({
+    reportId: reportData.value.id,
+    durationSec,
+    operatorUserId: u.id,
+    role: u.role || 'staff'
+  })
+  uni.hideLoading()
+  if (res.code === 200) {
+    uni.showToast({ title: res.message || '已开始生成', icon: 'none' })
+    reportData.value = { ...reportData.value, highlightVideoStatus: 'processing' }
+    maybeStartHighlightPoll()
+  } else if (res.code === 503) {
+    uni.showModal({
+      title: '暂无法生成',
+      content: res.message || '服务器未配置 ffmpeg',
+      showCancel: false
+    })
+  } else {
+    uni.showToast({ title: res.message || '发起失败', icon: 'none' })
+  }
+}
+
 const beforePhotos = computed(() => {
   if (!reportData.value?.beforePhotos) return []
   // 支持新旧两种格式：旧版是 string[]，新版是 {url, mediaType}[]
@@ -327,17 +458,22 @@ const brandBarSafe = (() => {
 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 }
+  const token = getRouteToken()
+  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
+  if (res.code === 200) {
+    reportData.value = res.data
+    maybeStartHighlightPoll()
+  } else {
+    notFound.value = true
+  }
 }
 
 const goHome = () => uni.reLaunch({ url: '/pages/home/Home' })
@@ -645,8 +781,11 @@ const generatePoster = () => {
 // #endif
 // #endif
 
-onLoad((options) => { routeToken.value = options?.token || '' })
+onLoad((options) => {
+  routeToken.value = options?.token || ''
+})
 onMounted(() => loadReport())
+onUnmounted(() => stopHighlightPoll())
 </script>
 
 <style scoped>
@@ -1016,6 +1155,82 @@ onMounted(() => loadReport())
   line-height: 1.6;
 }
 
+/* 服务回顾短片 */
+.highlight-card {
+  margin: 0 16px 16px;
+  padding: 16px;
+  background: linear-gradient(145deg, #f3fff9 0%, #eef8ff 100%);
+  border-radius: 14px;
+  border: 1px solid #dcefe3;
+}
+.highlight-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.highlight-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #14532d;
+}
+.highlight-badge {
+  font-size: 11px;
+  font-weight: 700;
+  color: #0f766e;
+  background: rgba(45, 185, 109, 0.15);
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+.highlight-desc {
+  display: block;
+  font-size: 12px;
+  color: #4b5563;
+  line-height: 1.55;
+  margin-bottom: 12px;
+}
+.highlight-status {
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+.highlight-status--busy {
+  background: rgba(45, 185, 109, 0.12);
+  color: #166534;
+}
+.highlight-status--err {
+  background: rgba(239, 68, 68, 0.1);
+  color: #b91c1c;
+}
+.highlight-player {
+  width: 100%;
+  max-height: 420px;
+  border-radius: 12px;
+  background: #000;
+  margin-bottom: 12px;
+}
+.highlight-actions {
+  display: flex;
+  gap: 10px;
+}
+.highlight-btn {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 8px;
+  border-radius: 10px;
+  border: none;
+  background: #2db96d;
+  color: #fff;
+}
+.highlight-btn--secondary {
+  background: #0d9488;
+}
+.highlight-btn[disabled] {
+  opacity: 0.55;
+}
+
 /* 操作按钮 */
 .actions {
   padding: 0 16px 16px;