feat(PosterCheckin): 优化海报打卡页面布局和样式

调整页面布局结构，修改海报配置尺寸和位置移除按钮中的emoji图标，简化样式代码更新海报预览和保存功能逻辑

feat(PosterCheckin): 优化海报打卡页面布局和样式
调整页面布局结构，修改海报配置尺寸和位置移除按钮中的emoji图标，简化样式代码更新海报预览和保存功能逻辑
hookehuyr
Commit 12696f036b206de9ab812095c620259d0ca658c5 12696f03 1 parent c6e4abf6
Showing 2 changed files with 34 additions and 23 deletions
src/pages/PosterCheckin/index.config.js
src/pages/PosterCheckin/index.vue
--- a/src/pages/PosterCheckin/index.config.js 0 → 100755
View file @12696f0
+++ b/src/pages/PosterCheckin/index.config.js 0 → 100755
View file @12696f0
+/*
+ * @Date: 2025-09-03 14:53:06
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-09-03 14:56:21
+ * @FilePath: /lls_program/src/pages/PosterCheckin/index.config.js
+ * @Description: 文件描述
+ */
+export default {
+  navigationBarTitleText: '海报打卡',
+  usingComponents: {
+  },
+}
--- a/src/pages/PosterCheckin/index.vue
View file @12696f0
+++ b/src/pages/PosterCheckin/index.vue
View file @12696f0
 <template>
-  <view class="poster-checkin-page bg-gray-50 min-h-screen pb-20">
+  <view class="poster-checkin-page bg-gray-50 h-screen flex flex-col">
     <!-- 海报预览区域 -->
-    <view class="mx-4 mt-4 bg-white rounded-lg shadow-sm overflow-hidden">
+    <view class="flex-1 mx-4 mt-4 mb-4 rounded-lg overflow-hidden">
-      <view class="aspect-[3/4] relative bg-gray-100 flex items-center justify-center">
+      <view class="h-full relative flex items-center justify-center">
         <view v-if="posterPath" class="w-full h-full relative">
           <image
             :src="posterPath"
             mode="aspectFit"
             class="w-full h-full"
-            @click="previewPoster"
+
           />
           <!-- 点击预览提示 -->
-          <view class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
+          <view @tap="previewPoster" class="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
             点击预览
           </view>
         </view>
-        <view v-else class="text-center text-gray-500">
+        <!-- <view v-else class="text-center text-gray-500">
           <view class="text-4xl mb-2">🎨</view>
           <text class="text-sm">海报生成中...</text>
           <view class="mt-2">
             <view class="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto"></view>
           </view>
-        </view>
+        </view> -->
       </view>
     </view>
     <!-- 底部操作按钮 -->
-    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 safe-area-bottom">
+    <view class="bg-white border-t border-gray-200 p-4 safe-area-bottom">
       <view class="flex gap-4">
-        <button
+        <view
           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 class="text-lg">📷</text>
           <text>{{ backgroundImage ? '更改照片' : '上传照片' }}</text>
-        </button>
+        </view>
-        <button
+        <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"
           :class="posterPath ? 'bg-gradient-to-r from-green-400 to-green-500' : 'bg-gray-400'"
           @click="savePoster"
           :disabled="!posterPath"
         >
-          <text class="text-lg">💾</text>
           <text>保存海报</text>
-        </button>
+        </view>
       </view>
     </view>
@@ -141,7 +139,7 @@ const posterConfig = computed(() => {
         x: 0,
         y: 0,
         width: 750,
-        height: 800,
+        height: 1100,
         url: bgImage,
         zIndex: 0
       },
@@ -166,17 +164,17 @@ const posterConfig = computed(() => {
       },
       // 关卡徽章
       {
-        x: 580,
+        x: 80,
-        y: 680,
+        y: 750,
-        width: 120,
+        width: 240,
-        height: 80,
+        height: 240,
         url: mockData.value.level.logo,
         zIndex: 2
       },
       // 小程序码
       {
         x: 50,
-        y: 850,
+        y: 1100,
         width: 200,
         height: 200,
         url: mockData.value.qrcode,
@@ -208,7 +206,7 @@ const posterConfig = computed(() => {
       // 小程序码描述
       {
         x: 280,
-        y: 900,
+        y: 1150,
         text: mockData.value.qrcodeDesc,
         fontSize: 28,
         color: '#333333',
@@ -223,7 +221,7 @@ const posterConfig = computed(() => {
       // 下半部分白色背景
       {
         x: 0,
-        y: 800,
+        y: 1050,
         width: 750,
         height: 534,
         backgroundColor: '#ffffff',
@@ -359,6 +357,7 @@ const onPosterFail = (error) => {
  * 预览海报
  */
 const previewPoster = () => {
+  console.warn('预览海报', posterPath.value)
   if (!posterPath.value) return
   previewImages.value = [{ src: posterPath.value }]
@@ -405,7 +404,7 @@ const savePoster = () => {
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .poster-checkin-page {
   .aspect-\[3\/4\] {
     aspect-ratio: 3/4;