hookehuyr

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

调整页面布局结构,修改海报配置尺寸和位置
移除按钮中的emoji图标,简化样式代码
更新海报预览和保存功能逻辑
/*
* @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: {
},
}
<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="aspect-[3/4] relative bg-gray-100 flex items-center justify-center">
<view class="flex-1 mx-4 mt-4 mb-4 rounded-lg overflow-hidden">
<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>
<button
</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"
: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,
y: 680,
width: 120,
height: 80,
x: 80,
y: 750,
width: 240,
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;
......