feat(海报打卡): 添加加载状态和错误处理，集成API获取海报数据

实现海报打卡页面的加载状态和错误处理逻辑集成API获取海报详情数据并更新页面状态添加重新加载功能，优化用户体验处理海报背景图片上传和保存逻辑

feat(海报打卡): 添加加载状态和错误处理，集成API获取海报数据
实现海报打卡页面的加载状态和错误处理逻辑集成API获取海报详情数据并更新页面状态添加重新加载功能，优化用户体验处理海报背景图片上传和保存逻辑
hookehuyr
Commit 6d0644a51337a31bdc5f616e558bce9b890bf99f 6d0644a5 1 parent fcf19c15
Showing 1 changed file with 191 additions and 82 deletions
src/pages/PosterCheckin/index.vue
--- a/src/pages/PosterCheckin/index.vue
View file @6d0644a
+++ b/src/pages/PosterCheckin/index.vue
View file @6d0644a
 <template>
   <view class="poster-checkin-page bg-gray-50 h-screen flex flex-col">
+    <!-- 加载状态 -->
+    <view v-if="isLoading" class="flex-1 flex items-center justify-center">
+      <view class="text-center">
+        <view class="text-gray-500 mb-2">加载中...</view>
+      </view>
+    </view>
+
+    <!-- 错误状态 -->
+    <view v-else-if="apiError" class="flex-1 flex items-center justify-center">
+      <view class="text-center">
+        <view class="text-red-500 mb-2">{{ apiError }}</view>
+        <view @tap="fetchPosterDetail" class="bg-blue-500 text-white px-4 py-2 rounded">
+          重新加载
+        </view>
+      </view>
+    </view>
+
+    <!-- 正常内容 -->
+    <template v-else>
       <!-- 活动信息区域 -->
       <view v-if="pageState === 'normal' || pageState === 'no-checkin'" class="bg-white mx-4 mt-4 mb-2 rounded-lg shadow-sm p-4">
         <!-- 活动主题 -->
@@ -97,6 +116,7 @@
           </view>
         </view>
       </view>
+    </template>
     <!-- 海报生成组件 - 仅在正常状态显示 -->
     <PosterBuilder
@@ -126,7 +146,7 @@ import { Left, Right } from '@nutui/icons-vue-taro'
 import PosterBuilder from '@/components/PosterBuilder/index.vue'
 import BASE_URL from '@/utils/config'
 // 导入获取海报详情的API
-import { getPosterDetailAPI } from '@/api/map'
+import { getPosterDetailAPI, savePosterBackgroundAPI } from '@/api/map'
 // 默认背景图
 const defaultBackground = 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E9%BB%98%E8%AE%A4%E8%83%8C%E6%99%AF%E5%9B%BE1.png'
@@ -145,86 +165,158 @@ const pageParams = ref({
   id: '',
 })
+// API数据状态
+const apiData = ref(null)
+const isLoading = ref(false)
+const apiError = ref(null)
+
 // TODO: 有真实数据的时候, 通过ID获取具体地点的海报信息, 赋值currentPosterIndex获取特定的海报
 // 图片预览相关
 const previewVisible = ref(false)
 const previewImages = ref([])
-// 活动信息数据 - 模拟不同状态，实际使用时从API获取
+/**
-const activityInfo = ref({
+ * 获取海报详情数据
-  title: '南京路乐龄时尚消费主题路线',
+ */
-  checkPoints: [
+const fetchPosterDetail = async () => {
-    { id: 1, name: '起点签到', completed: true },
+  try {
-    { id: 2, name: '商圈探索', completed: true },
+    isLoading.value = true
-    { id: 3, name: '文化体验', completed: true },
+    apiError.value = null
-    { id: 4, name: '美食品鉴', completed: false },
-    { id: 5, name: '终点打卡', completed: false }
-  ],
-  completedCount: 3,
-  totalCount: 5,
-  endDate: '2025年9月7日'
-})
-// activityInfo.value = {};
+    const response = await getPosterDetailAPI({})
-// 海报数据列表 - 合并海报基础信息和内容数据，实际使用时从API获取
+    if (response.code === 1) {
-const posterList = ref([
+      apiData.value = response.data
-  {
+      console.log('获取海报详情成功:', response.data)
-    id: 1,
+
-    title: '起点签到',
+      // 根据API数据更新活动信息
-    path: '',
+      updateActivityInfo()
-    checkPointId: 1,
+
-    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E9%BB%98%E8%AE%A4%E8%83%8C%E6%99%AF%E5%9B%BE1.png',
+      // 根据API数据更新海报列表
-    // 海报内容数据
+      updatePosterList()
-    user: {
+
-      avatar: 'https://cdn.ipadbiz.cn/icon/tou@2x.png',
+      // 根据pageParams.id设置当前海报索引
-      nickname: '张大爷'
+      setCurrentPosterIndex()
-    },
+
-    family: {
+    } else {
-      name: '幸福之家',
+      apiError.value = response.msg || '获取海报详情失败'
-      description: '一家人整整齐齐最重要'
+      console.error('获取海报详情失败:', response.msg)
-    },
+    }
-    activity: {
+  } catch (error) {
-      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%B7%A6%E4%B8%8A%E8%A7%92logo.png',
+    apiError.value = '网络请求失败'
-      name: '南京路时尚citywalk'
+    console.error('获取海报详情异常:', error)
-    },
+  } finally {
-    level: {
+    isLoading.value = false
-      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%8F%B3%E4%B8%8B%E8%A7%92icon.png',
+  }
-      name: '卡点: 上海市第一百货商店'
+}
-    },
+
-    qrcode: 'https://cdn.ipadbiz.cn/space/068a790496c87cb8d2ed6e551401c544.png',
+/**
-    qrcodeDesc: '长按识别，来，我们一起打卡！'
+ * 根据API数据更新活动信息
-  },
+ */
-  {
+const updateActivityInfo = () => {
-    id: 2,
+  if (!apiData.value) return
-    title: '商圈探索',
+
+  const { title, end_date, details, show_detail_index } = apiData.value
+
+  // 转换details为checkPoints格式
+  const checkPoints = details.map((detail, index) => ({
+    id: detail.id,
+    name: detail.name,
+    completed: detail.is_checked === true
+  }))
+
+  // 计算已完成数量
+  const completedCount = checkPoints.filter(point => point.completed).length
+
+  activityInfo.value = {
+    title: title || '海报打卡活动',
+    checkPoints,
+    completedCount,
+    totalCount: checkPoints.length,
+    endDate: end_date || '',
+    showDetailIndex: show_detail_index || 0
+  }
+}
+
+/**
+ * 根据API数据更新海报列表
+ */
+const updatePosterList = () => {
+  if (!apiData.value) return
+
+  const { details, family, qrcode_url } = apiData.value
+
+  // 只显示is_checked为真的关卡
+  const checkedDetails = details.filter(detail =>
+    detail.is_checked === true
+  )
+
+  posterList.value = checkedDetails.map((detail, index) => ({
+    id: detail.id,
+    title: detail.name,
     path: '',
-    checkPointId: 2,
+    checkPointId: detail.id,
-    backgroundImage: 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%B3%E5%8D%A12-%E5%9B%BE%E5%B1%82%201.png',
+    backgroundImage: detail.background_url || defaultBackground,
     // 海报内容数据
     user: {
-      avatar: 'https://cdn.ipadbiz.cn/icon/tou@2x.png',
+      avatar: family?.avatar_url || 'https://cdn.ipadbiz.cn/icon/tou@2x.png', // 默认头像，后续可从用户信息获取
-      nickname: '李奶奶'
+      nickname: '用户昵称' // 默认昵称，后续可从用户信息获取
     },
     family: {
-      name: '温馨小家',
+      name: family?.name || '我的家庭',
-      description: '健康快乐每一天'
+      description: ''
     },
     activity: {
-      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%B7%A6%E4%B8%8A%E8%A7%92logo.png',
+      logo: detail.main_slogan || 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%B7%A6%E4%B8%8A%E8%A7%92logo.png',
-      name: '南京路时尚citywalk'
     },
     level: {
-      logo: 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%B3%E5%8D%A12-%E4%BB%8A%E6%9C%9D%E8%B7%9F%E6%97%81%E5%8F%8B%20%E4%B8%80%E9%81%93%E6%9D%A5%E4%B9%B0%E4%B9%B0%E4%B9%B0_1.png',
+      logo: detail.sub_slogan || 'https://cdn.ipadbiz.cn/lls_prog/images/%E6%B5%B7%E6%8A%A5%E5%8F%B3%E4%B8%8B%E8%A7%92icon.png',
-      name: '第二关卡'
+      name: detail.name || '海报打卡活动',
     },
-    qrcode: 'https://cdn.ipadbiz.cn/space/068a790496c87cb8d2ed6e551401c544.png',
+    qrcode: qrcode_url,
     qrcodeDesc: '长按识别，来，我们一起打卡！'
-  },
+  }))
-])
+}
+
+/**
+ * 根据pageParams.id设置当前海报索引
+ */
+const setCurrentPosterIndex = () => {
+  if (!posterList.value.length) {
+    currentPosterIndex.value = 0
+    return
+  }
+
+  // 如果有指定的ID，查找对应的海报索引
+  if (pageParams.value.id) {
+    const targetIndex = posterList.value.findIndex(poster =>
+      poster.checkPointId.toString() === pageParams.value.id.toString()
+    )
+
+    if (targetIndex !== -1) {
+      currentPosterIndex.value = targetIndex
+      return
+    }
+  }
+
+  // 如果没有ID或没找到对应的关卡ID，默认显示第一个已打卡的项（索引0）
+  // 因为posterList已经过滤了is_checked=true的项，所以第一个就是我们要的
+  currentPosterIndex.value = 0
+}
-// posterList.value = []
+// 活动信息数据 - 将由API数据填充
+const activityInfo = ref({
+  title: '',
+  checkPoints: [],
+  completedCount: 0,
+  totalCount: 0,
+  endDate: '',
+  showDetailIndex: 0
+})
+
+// 海报数据列表 - 将由API数据填充
+const posterList = ref([])
 // 数据状态检查
 const hasActivityInfo = computed(() => {
@@ -416,7 +508,7 @@ const posterConfig = computed(() => {
 /**
  * 页面加载时初始化
  */
-onMounted(() => {
+onMounted(async () => {
   Taro.setNavigationBarTitle({ title: '海报打卡' })
   // 获取页面参数
@@ -429,6 +521,16 @@ onMounted(() => {
   console.log('海报打卡页面接收到的参数:', pageParams.value)
+  // 获取海报详情数据
+  await fetchPosterDetail()
+
+  // 数据获取完成后检查页面状态
+  if (pageState.value === 'no-activity') {
+    // 没有活动信息，显示确认对话框
+    showNoActivityConfirm()
+    return
+  }
+
   // 页面加载时检查是否需要生成当前海报
   generateCurrentPosterIfNeeded()
 })
@@ -576,9 +678,10 @@ const chooseBackgroundImage = () => {
       uploadBackgroundImage(tempFile.path)
     },
-    fail: () => {
+    fail: (error) => {
+      console.error('选择图片失败:', error)
       // Taro.showToast({
-      //   title: '选择图片失败',
+      //   title: '选择图片失败，请重试',
       //   icon: 'none'
       // })
     }
@@ -595,15 +698,33 @@ const uploadBackgroundImage = (filePath) => {
     url: BASE_URL + '/admin/?m=srv&a=upload',
     filePath,
     name: 'file',
-    success: (uploadRes) => {
+    success: async (uploadRes) => {
-      Taro.hideLoading()
       const data = JSON.parse(uploadRes.data)
       if (data.code === 0 && data.data) {
         const currentIndex = currentPosterIndex.value
+        const currentPosterData = posterList.value[currentIndex]
         // 为当前海报设置背景图
         backgroundImages.value[currentIndex] = data.data.src
+        // 调用保存海报背景接口
+        try {
+          const saveResult = await savePosterBackgroundAPI({
+            detail_id: currentPosterData.checkPointId,
+            poster_background_url: data.data.src
+          })
+
+          if (saveResult.code === 1) {
+            console.log('海报背景保存成功:', saveResult.data)
+          } else {
+            console.warn('海报背景保存失败:', saveResult.msg)
+            // 即使保存失败，也继续生成海报，不影响用户体验
+          }
+        } catch (error) {
+          console.error('保存海报背景异常:', error)
+          // 即使保存失败，也继续生成海报，不影响用户体验
+        }
+
         // 强制标记当前海报需要重新生成
         posterGeneratedFlags.value[currentIndex] = false
         delete posterConfigHashes.value[currentIndex]
@@ -614,12 +735,15 @@ const uploadBackgroundImage = (filePath) => {
         // 立即重新生成海报
         generateCurrentPoster()
+        Taro.hideLoading()
         Taro.showToast({ title: '上传成功', icon: 'success' })
       } else {
+        Taro.hideLoading()
         Taro.showToast({ title: data.msg || '上传失败', icon: 'none' })
       }
     },
-    fail: () => {
+    fail: (error) => {
+      console.error('上传文件失败:', error)
       Taro.hideLoading()
       Taro.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
     }
@@ -755,22 +879,7 @@ const showNoActivityConfirm = () => {
   })
 }
-/**
- * 页面初始化
- */
-onMounted(() => {
-  // 获取页面参数
-  const instance = Taro.getCurrentInstance()
-  if (instance.router && instance.router.params) {
-    pageParams.value = instance.router.params
-  }
-  // 检查页面状态
-  if (pageState.value === 'no-activity') {
-    // 没有活动信息，显示确认对话框
-    showNoActivityConfirm()
-  }
-})
 </script>
 <style scoped>