refactor(PosterCheckin): 重构海报背景图管理和生成逻辑

优化海报背景图管理，改为按海报索引存储背景图添加海报生成状态和配置哈希检查，避免重复生成重构生成逻辑，仅在配置变化或未生成时重新生成海报

refactor(PosterCheckin): 重构海报背景图管理和生成逻辑
优化海报背景图管理，改为按海报索引存储背景图添加海报生成状态和配置哈希检查，避免重复生成重构生成逻辑，仅在配置变化或未生成时重新生成海报
hookehuyr
Commit fb18560893f40b0273c01cb0cb66f87881a8c6a6 fb185608 1 parent ca99fb75
Showing 1 changed file with 80 additions and 14 deletions
src/pages/PosterCheckin/index.vue
--- a/src/pages/PosterCheckin/index.vue
View file @fb18560
+++ b/src/pages/PosterCheckin/index.vue
View file @fb18560
@@ -85,7 +85,7 @@
           class="flex-1 bg-gradient-to-r from-orange-400 to-orange-500 text-white py-3 px-6 rounded-lg font-medium shadow-lg active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2"
           @click="chooseBackgroundImage"
         >
-          <text>{{ backgroundImage ? '更改照片' : '上传照片' }}</text>
+          <text>{{ currentPosterHasCustomBackground ? '更改照片' : '上传照片' }}</text>
         </view>
         <view
           class="flex-1 text-white py-3 px-6 rounded-lg font-medium shadow-lg active:scale-95 transition-transform duration-150 flex items-center justify-center gap-2"
@@ -151,10 +151,12 @@ const defaultBackground = 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8
 // 页面状态
 const posterPath = ref('') // 生成的海报路径
-const backgroundImage = ref('') // 用户上传的背景图
+const backgroundImages = ref({}) // 每个海报的用户上传背景图 {posterIndex: imageUrl}
 const shouldGeneratePoster = ref(false) // 是否应该生成海报
 const currentPosterIndex = ref(0) // 当前显示的海报索引
 const posterGenerateFailed = ref(false) // 海报生成是否失败
+const posterGeneratedFlags = ref({}) // 每个海报的生成状态 {posterIndex: boolean}
+const posterConfigHashes = ref({}) // 每个海报的配置哈希值，用于检测配置变化
 // 页面参数
 const pageParams = ref({
@@ -282,10 +284,15 @@ const currentMockData = computed(() => {
   }
 })
+// 当前海报是否有用户上传的背景图
+const currentPosterHasCustomBackground = computed(() => {
+  return !!backgroundImages.value[currentPosterIndex.value]
+})
+
 // 海报配置
 const posterConfig = computed(() => {
   const currentPosterData = posterList.value[currentPosterIndex.value]
-  const bgImage = backgroundImage.value || currentPosterData?.backgroundImage || defaultBackground
+  const bgImage = backgroundImages.value[currentPosterIndex.value] || currentPosterData?.backgroundImage || defaultBackground
   return {
     width: 750,
@@ -437,27 +444,76 @@ onMounted(() => {
   console.log('海报打卡页面接收到的参数:', pageParams.value)
-  // 页面加载时生成当前海报
+  // 页面加载时检查是否需要生成当前海报
-  generateCurrentPoster()
+  generateCurrentPosterIfNeeded()
 })
 /**
  * 监听背景图变化，重新生成海报
  */
-watch(backgroundImage, () => {
+watch(backgroundImages, (newVal, oldVal) => {
-  if (backgroundImage.value) {
+  // 只有当前海报的背景图发生变化时才重新生成
+  const currentIndex = currentPosterIndex.value
+  if (newVal[currentIndex] !== oldVal?.[currentIndex]) {
+    // 标记当前海报需要重新生成
+    posterGeneratedFlags.value[currentIndex] = false
     generateCurrentPoster()
   }
-})
+}, { deep: true })
 /**
  * 监听当前海报索引变化，切换海报
  */
-watch(currentPosterIndex, () => {
+watch(currentPosterIndex, (newIndex, oldIndex) => {
-  generateCurrentPoster()
+  // 切换海报时，检查新海报是否已生成
+  if (newIndex !== oldIndex) {
+    generateCurrentPosterIfNeeded()
+  }
 })
 /**
+ * 生成当前海报配置的哈希值
+ */
+const generateConfigHash = (config) => {
+  const configStr = JSON.stringify({
+    backgroundImage: backgroundImages.value[currentPosterIndex.value],
+    posterIndex: currentPosterIndex.value,
+    mockData: currentMockData.value
+  })
+  // 简单哈希函数
+  let hash = 0
+  for (let i = 0; i < configStr.length; i++) {
+    const char = configStr.charCodeAt(i)
+    hash = ((hash << 5) - hash) + char
+    hash = hash & hash // 转换为32位整数
+  }
+  return hash.toString()
+}
+
+/**
+ * 检查是否需要生成当前海报
+ */
+const generateCurrentPosterIfNeeded = () => {
+  const currentIndex = currentPosterIndex.value
+  const currentHash = generateConfigHash()
+  const isGenerated = posterGeneratedFlags.value[currentIndex]
+  const lastHash = posterConfigHashes.value[currentIndex]
+  
+  // 如果海报未生成过，或者配置发生了变化，则需要重新生成
+  if (!isGenerated || lastHash !== currentHash) {
+    posterConfigHashes.value[currentIndex] = currentHash
+    generateCurrentPoster()
+  } else {
+    // 海报已存在且配置未变化，直接使用缓存的海报
+    const cachedPoster = posterList.value[currentIndex]
+    if (cachedPoster && cachedPoster.path) {
+      posterPath.value = cachedPoster.path
+      posterGenerateFailed.value = false
+    }
+  }
+}
+
+/**
  * 生成当前海报
  */
 const generateCurrentPoster = () => {
@@ -541,7 +597,8 @@ const uploadBackgroundImage = (filePath) => {
       Taro.hideLoading()
       const data = JSON.parse(uploadRes.data)
       if (data.code === 0 && data.data) {
-        backgroundImage.value = data.data.src
+        // 为当前海报设置背景图
+        backgroundImages.value[currentPosterIndex.value] = data.data.src
         Taro.showToast({ title: '上传成功', icon: 'success' })
       } else {
         // 检查是否为审核不通过
@@ -571,12 +628,16 @@ const uploadBackgroundImage = (filePath) => {
  * 海报生成成功
  */
 const onPosterSuccess = (result) => {
+  const currentIndex = currentPosterIndex.value
   posterPath.value = result.tempFilePath
   posterGenerateFailed.value = false
-  // 更新当前海报的路径
+  
-  if (posterList.value[currentPosterIndex.value]) {
+  // 更新当前海报的路径和生成状态
-    posterList.value[currentPosterIndex.value].path = result.tempFilePath
+  if (posterList.value[currentIndex]) {
+    posterList.value[currentIndex].path = result.tempFilePath
   }
+  posterGeneratedFlags.value[currentIndex] = true
+  
   shouldGeneratePoster.value = false
   Taro.showToast({ title: '海报生成成功', icon: 'success' })
 }
@@ -585,9 +646,14 @@ const onPosterSuccess = (result) => {
  * 海报生成失败
  */
 const onPosterFail = (error) => {
+  const currentIndex = currentPosterIndex.value
   shouldGeneratePoster.value = false
   posterGenerateFailed.value = true
   posterPath.value = ''
+  
+  // 标记当前海报生成失败，下次仍需重新生成
+  posterGeneratedFlags.value[currentIndex] = false
+  
   Taro.showToast({ title: '海报生成失败', icon: 'none' })
   console.error('海报生成失败:', error)
 }