refactor(PosterPage): 重构海报页面代码并优化图片处理
- 将API导入路径从recall改为recall_users - 移除未使用的title状态 - 添加图片处理参数优化加载性能 - 重构路由参数处理方式 - 确保编辑API调用时包含必要参数
Showing
1 changed file
with
16 additions
and
13 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-12-23 15:50:59 | 2 | * @Date: 2025-12-23 15:50:59 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-12-24 17:47:23 | 4 | + * @LastEditTime: 2025-12-24 20:35:33 |
| 5 | * @FilePath: /mlaj/src/views/recall/PosterPage.vue | 5 | * @FilePath: /mlaj/src/views/recall/PosterPage.vue |
| 6 | * @Description: 分享海报页面 | 6 | * @Description: 分享海报页面 |
| 7 | --> | 7 | --> |
| ... | @@ -42,7 +42,7 @@ import { showToast, showLoadingToast } from 'vant' | ... | @@ -42,7 +42,7 @@ import { showToast, showLoadingToast } from 'vant' |
| 42 | import { qiniuFileHash } from '@/utils/qiniuFileHash' | 42 | import { qiniuFileHash } from '@/utils/qiniuFileHash' |
| 43 | import { useAuth } from '@/contexts/auth' | 43 | import { useAuth } from '@/contexts/auth' |
| 44 | 44 | ||
| 45 | -import { getPosterAPI, editPosterAPI } from '@/api/recall' | 45 | +import { getPosterAPI, editPosterAPI } from '@/api/recall_users' |
| 46 | 46 | ||
| 47 | const $route = useRoute(); | 47 | const $route = useRoute(); |
| 48 | const $router = useRouter(); | 48 | const $router = useRouter(); |
| ... | @@ -56,7 +56,6 @@ const qrCodeUrl = 'https://cdn.ipadbiz.cn/mlaj/recall/poster/%E4%BA%8C%E7%BB%B4% | ... | @@ -56,7 +56,6 @@ const qrCodeUrl = 'https://cdn.ipadbiz.cn/mlaj/recall/poster/%E4%BA%8C%E7%BB%B4% |
| 56 | 56 | ||
| 57 | // State | 57 | // State |
| 58 | const posterBg = ref(defaultBg) | 58 | const posterBg = ref(defaultBg) |
| 59 | -const title = ref('') | ||
| 60 | 59 | ||
| 61 | /** | 60 | /** |
| 62 | * 获取文件哈希(与七牛云ETag一致) | 61 | * 获取文件哈希(与七牛云ETag一致) |
| ... | @@ -104,9 +103,11 @@ const afterRead = async (file) => { | ... | @@ -104,9 +103,11 @@ const afterRead = async (file) => { |
| 104 | 103 | ||
| 105 | // 文件已存在,直接使用 | 104 | // 文件已存在,直接使用 |
| 106 | if (tokenResult.data) { | 105 | if (tokenResult.data) { |
| 107 | - posterBg.value = tokenResult.data.src; | 106 | + posterBg.value = tokenResult.data.src + '?imageMogr2/thumbnail/800x/strip/quality/80'; |
| 108 | // 编辑海报配置 | 107 | // 编辑海报配置 |
| 109 | await editPosterAPI({ | 108 | await editPosterAPI({ |
| 109 | + stu_uid: stu_uid.value, | ||
| 110 | + campaign_id: campaign_id.value, | ||
| 110 | background_image: tokenResult.data.src | 111 | background_image: tokenResult.data.src |
| 111 | }) | 112 | }) |
| 112 | showToast('图片上传成功'); | 113 | showToast('图片上传成功'); |
| ... | @@ -137,9 +138,11 @@ const afterRead = async (file) => { | ... | @@ -137,9 +138,11 @@ const afterRead = async (file) => { |
| 137 | }) | 138 | }) |
| 138 | 139 | ||
| 139 | if (data) { | 140 | if (data) { |
| 140 | - posterBg.value = data.src; | 141 | + posterBg.value = data.src + '?imageMogr2/thumbnail/800x/strip/quality/80'; |
| 141 | // 编辑海报配置 | 142 | // 编辑海报配置 |
| 142 | await editPosterAPI({ | 143 | await editPosterAPI({ |
| 144 | + stu_uid: stu_uid.value, | ||
| 145 | + campaign_id: campaign_id.value, | ||
| 143 | background_image: data.src | 146 | background_image: data.src |
| 144 | }) | 147 | }) |
| 145 | showToast('图片上传成功'); | 148 | showToast('图片上传成功'); |
| ... | @@ -154,19 +157,19 @@ const afterRead = async (file) => { | ... | @@ -154,19 +157,19 @@ const afterRead = async (file) => { |
| 154 | } | 157 | } |
| 155 | } | 158 | } |
| 156 | 159 | ||
| 157 | -onMounted(async () => { | 160 | +const stu_uid = ref($route.query.stu_uid || '') |
| 158 | - const stu_uid = $route.query.stu_uid | 161 | +const campaign_id = ref($route.query.campaign_id || '') |
| 159 | - const campaign_id = $route.query.campaign_id | 162 | +const title = ref($route.query.title || '活动海报') |
| 160 | 163 | ||
| 161 | - if (stu_uid && campaign_id) { | 164 | +onMounted(async () => { |
| 165 | + if (stu_uid.value && campaign_id.value) { | ||
| 162 | const { data } = await getPosterAPI({ | 166 | const { data } = await getPosterAPI({ |
| 163 | - stu_uid, | 167 | + stu_uid: stu_uid.value, |
| 164 | - campaign_id | 168 | + campaign_id: campaign_id.value |
| 165 | }) | 169 | }) |
| 166 | 170 | ||
| 167 | if (data) { | 171 | if (data) { |
| 168 | - title.value = $route.query.title || '活动海报' | 172 | + posterBg.value = data.background_image + '?imageMogr2/thumbnail/800x/strip/quality/80' || defaultBg |
| 169 | - posterBg.value = data.background_image || defaultBg | ||
| 170 | qrCodeUrl.value = data.qrcode | 173 | qrCodeUrl.value = data.qrcode |
| 171 | } | 174 | } |
| 172 | } | 175 | } | ... | ... |
-
Please register or login to post a comment