hookehuyr

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

优化海报背景图管理,改为按海报索引存储背景图
添加海报生成状态和配置哈希检查,避免重复生成
重构生成逻辑,仅在配置变化或未生成时重新生成海报
......@@ -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, () => {
if (backgroundImage.value) {
watch(backgroundImages, (newVal, oldVal) => {
// 只有当前海报的背景图发生变化时才重新生成
const currentIndex = currentPosterIndex.value
if (newVal[currentIndex] !== oldVal?.[currentIndex]) {
// 标记当前海报需要重新生成
posterGeneratedFlags.value[currentIndex] = false
generateCurrentPoster()
}
})
}, { deep: true })
/**
* 监听当前海报索引变化,切换海报
*/
watch(currentPosterIndex, () => {
generateCurrentPoster()
watch(currentPosterIndex, (newIndex, oldIndex) => {
// 切换海报时,检查新海报是否已生成
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)
}
......