Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b186a970 1 parent 9a1dfc44

海报生成数据正式联调

Inline Side-by-side
Showing 2 changed files with 242 additions and 224 deletions
1 <!-- 1 <!--
2 * @Date: 2022-09-26 14:36:57 2 * @Date: 2022-09-26 14:36:57
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-10-27 14:45:09 4 + * @LastEditTime: 2022-10-28 13:11:56
5 * @FilePath: /swx/src/pages/activityDetail/index.vue 5 * @FilePath: /swx/src/pages/activityDetail/index.vue
6 * @Description: 活动详情页 6 * @Description: 活动详情页
7 --> 7 -->
...@@ -149,8 +149,20 @@ ...@@ -149,8 +149,20 @@
149 import activityBar from '@/components/activity-bar.vue' 149 import activityBar from '@/components/activity-bar.vue'
150 import Taro from '@tarojs/taro' 150 import Taro from '@tarojs/taro'
151 import PosterBuilder from '@/components/PosterBuilder/index.vue'; 151 import PosterBuilder from '@/components/PosterBuilder/index.vue';
152 -import { ref, computed } from "vue"; 152 +import { ref, onMounted } from "vue";
153 import * as dayjs from 'dayjs' 153 import * as dayjs from 'dayjs'
154 +import { infoUserAPI } from '@/api/User/index';
155 +import icon_share from '@/images/icon/share.png'
156 +
157 +const nickname = ref('');
158 +const avatar = ref('');
159 +onMounted(async () => {
160 + const { code, data } = await infoUserAPI();
161 + if (code) {
162 + nickname.value = data.user.nickname;
163 + avatar.value = data.user.avatar ? data.user.avatar : 'http://gyzs.onwall.cn/tou%402x.png';
164 + }
165 +})
154 166
155 const formatDate = (date) => { 167 const formatDate = (date) => {
156 return dayjs(date).format('YYYY-MM-DD HH:mm') 168 return dayjs(date).format('YYYY-MM-DD HH:mm')
...@@ -159,7 +171,7 @@ const formatDate = (date) => { ...@@ -159,7 +171,7 @@ const formatDate = (date) => {
159 const show_share = ref(false); 171 const show_share = ref(false);
160 const share_options = [ 172 const share_options = [
161 { name: '微信', icon: 'wechat', openType: 'share' }, 173 { name: '微信', icon: 'wechat', openType: 'share' },
162 - { name: '生成海报', icon: 'poster' }, 174 + { name: '生成海报', icon: icon_share },
163 ] 175 ]
164 const shareActivity = () => { 176 const shareActivity = () => {
165 show_share.value = true; 177 show_share.value = true;
...@@ -168,7 +180,6 @@ const onCancelShare = () => { ...@@ -168,7 +180,6 @@ const onCancelShare = () => {
168 show_share.value = false; 180 show_share.value = false;
169 } 181 }
170 const onSelectShare = ({ detail }) => { 182 const onSelectShare = ({ detail }) => {
171 - // TODO: 需要完善 分享朋友和生成海报功能
172 show_share.value = false; 183 show_share.value = false;
173 if (detail.name === '生成海报') { 184 if (detail.name === '生成海报') {
174 show_post.value = true; 185 show_post.value = true;
...@@ -184,227 +195,234 @@ const onClickPost = () => { ...@@ -184,227 +195,234 @@ const onClickPost = () => {
184 // 生成海报 195 // 生成海报
185 const startDraw = ref(false) 196 const startDraw = ref(false)
186 const posterPath = ref('') 197 const posterPath = ref('')
187 -const base = { 198 +let base = {}
188 - width: 1024, 199 +
189 - height: 1334, 200 +const start = async () => {
190 - backgroundColor: '', 201 + const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
191 - debug: false, 202 + if (code) {
192 - blocks: [ 203 + data.activity.activity_time = formatDate(data.activity.activity_time);
193 - { 204 + const activity = data.activity;
194 - x: 40, 205 + base = {
195 - y: 20, 206 + width: 1024,
196 - width: 950, 207 + height: 1334,
197 - height: 1200, 208 + backgroundColor: '',
198 - paddingLeft: 0, 209 + debug: false,
199 - paddingRight: 0, 210 + blocks: [
200 - borderWidth: 1, 211 + {
201 - borderColor: '#D9DCD5', 212 + x: 40,
202 - backgroundColor: '#fff', 213 + y: 20,
203 - borderRadius: 16, 214 + width: 950,
204 - // borderRadiusGroup: [0, 0, 18, 18], 215 + height: 1200,
205 - }, 216 + paddingLeft: 0,
206 - { 217 + paddingRight: 0,
207 - x: 40, 218 + borderWidth: 1,
208 - y: 730, 219 + borderColor: '#D9DCD5',
209 - // width: 580, 220 + backgroundColor: '#fff',
210 - height: 75, 221 + borderRadius: 16,
211 - paddingLeft: 80, 222 + // borderRadiusGroup: [0, 0, 18, 18],
212 - paddingRight: 0, 223 + },
213 - borderWidth: 0, 224 + {
214 - text: { 225 + x: 40,
215 - x: 0, 226 + y: 730,
216 - y: 0, 227 + // width: 580,
217 - text: '2022-08-25 14:00', 228 + height: 75,
218 - fontSize: 40, 229 + paddingLeft: 80,
219 - color: '#222', 230 + paddingRight: 0,
220 - opacity: 1, 231 + borderWidth: 0,
221 - baseLine: 'top', 232 + text: {
222 - lineHeight: 48, 233 + x: 0,
223 - lineNum: 2, 234 + y: 0,
224 - textAlign: 'left', 235 + text: '',
225 - // width: 580, 236 + fontSize: 40,
226 - zIndex: 0, 237 + color: '#222',
227 - }, 238 + opacity: 1,
228 - backgroundColor: '#FFF9F3', 239 + baseLine: 'top',
229 - // borderColor: 'red', 240 + lineHeight: 48,
230 - // backgroundColor: '#EFF3F5', 241 + lineNum: 2,
231 - // borderRadius: 0, 242 + textAlign: 'left',
232 - borderRadiusGroup: [0, 25, 25, 0], 243 + // width: 580,
233 - // borderRadius: 16, 244 + zIndex: 0,
234 - // zIndex: 100, 245 + },
235 - }, 246 + backgroundColor: '#FFF9F3',
236 - { 247 + // borderColor: 'red',
237 - x: 40, 248 + // backgroundColor: '#EFF3F5',
238 - y: 830, 249 + // borderRadius: 0,
239 - // width: 580, 250 + borderRadiusGroup: [0, 25, 25, 0],
240 - height: 75, 251 + // borderRadius: 16,
241 - paddingLeft: 80, 252 + // zIndex: 100,
242 - paddingRight: 0, 253 + },
243 - borderWidth: 0, 254 + {
244 - text: { 255 + x: 40,
245 - x: 0, 256 + y: 830,
246 - y: 0, 257 + // width: 580,
247 - text: '上海市杨浦区军工路100号A座05室', 258 + height: 75,
248 - fontSize: 40, 259 + paddingLeft: 80,
249 - color: '#222', 260 + paddingRight: 0,
250 - opacity: 1, 261 + borderWidth: 0,
251 - baseLine: 'top', 262 + text: {
252 - lineHeight: 48, 263 + x: 0,
253 - lineNum: 2, 264 + y: 0,
254 - textAlign: 'left', 265 + text: '',
255 - // width: 580, 266 + fontSize: 40,
256 - zIndex: 0, 267 + color: '#222',
257 - }, 268 + opacity: 1,
258 - backgroundColor: '#FFF9F3', 269 + baseLine: 'top',
259 - // borderColor: 'red', 270 + lineHeight: 48,
260 - // backgroundColor: '#EFF3F5', 271 + lineNum: 2,
261 - // borderRadius: 0, 272 + textAlign: 'left',
262 - borderRadiusGroup: [0, 25, 25, 0], 273 + // width: 580,
263 - // borderRadius: 16, 274 + zIndex: 0,
264 - // zIndex: 100, 275 + },
265 - }, 276 + backgroundColor: '#FFF9F3',
266 - ], 277 + // borderColor: 'red',
267 - texts: [ 278 + // backgroundColor: '#EFF3F5',
268 - { 279 + // borderRadius: 0,
269 - x: 80, 280 + borderRadiusGroup: [0, 25, 25, 0],
270 - y: 630, 281 + // borderRadius: 16,
271 - text: '八段锦-智慧没有烦恼', 282 + // zIndex: 100,
272 - fontSize: 50, 283 + },
273 - color: '#000', 284 + ],
274 - opacity: 1, 285 + texts: [
275 - baseLine: 'middle', 286 + {
276 - lineHeight: 60, 287 + x: 80,
277 - lineNum: 2, 288 + y: 630,
278 - textAlign: 'left', 289 + text: activity.name,
279 - width: 800, 290 + fontSize: 50,
280 - zIndex: 999, 291 + color: '#000',
281 - // fontWeight: 'bold', 292 + opacity: 1,
282 - fontFamily: 'Monospace', 293 + baseLine: 'middle',
283 - }, 294 + lineHeight: 60,
284 - { 295 + lineNum: 2,
285 - x: 135, 296 + textAlign: 'left',
286 - y: 770, 297 + width: 800,
287 - text: '2022-08-25 14:00', 298 + zIndex: 999,
288 - fontSize: 40, 299 + // fontWeight: 'bold',
289 - color: '#222', 300 + fontFamily: 'Monospace',
290 - opacity: 1, 301 + },
291 - baseLine: 'middle', 302 + {
292 - lineHeight: 48, 303 + x: 135,
293 - lineNum: 2, 304 + y: 770,
294 - textAlign: 'left', 305 + text: activity.activity_time,
295 - // width: 580, 306 + fontSize: 40,
296 - zIndex: 999, 307 + color: '#222',
297 - }, 308 + opacity: 1,
298 - { 309 + baseLine: 'middle',
299 - x: 135, 310 + lineHeight: 48,
300 - y: 870, 311 + lineNum: 2,
301 - text: '上海市杨浦区军工路100号A座05室', 312 + textAlign: 'left',
302 - fontSize: 40, 313 + // width: 580,
303 - color: '#222', 314 + zIndex: 999,
304 - opacity: 1, 315 + },
305 - baseLine: 'middle', 316 + {
306 - lineHeight: 48, 317 + x: 135,
307 - lineNum: 2, 318 + y: 870,
308 - textAlign: 'left', 319 + text: activity.address,
309 - // width: 580, 320 + fontSize: 40,
310 - zIndex: 999, 321 + color: '#222',
311 - }, 322 + opacity: 1,
312 - { 323 + baseLine: 'middle',
313 - x: 300, 324 + lineHeight: 48,
314 - y: 1080, 325 + lineNum: 2,
315 - text: '妙净', 326 + textAlign: 'left',
316 - fontSize: 50, 327 + // width: 580,
317 - color: '#333', 328 + zIndex: 999,
318 - opacity: 1, 329 + },
319 - baseLine: 'middle', 330 + {
320 - textAlign: 'left', 331 + x: 300,
321 - lineHeight: 50, 332 + y: 1080,
322 - lineNum: 1, 333 + text: nickname.value,
323 - zIndex: 999, 334 + fontSize: 50,
324 - }, 335 + color: '#333',
325 - { 336 + opacity: 1,
326 - x: 300, 337 + baseLine: 'middle',
327 - y: 1150, 338 + textAlign: 'left',
328 - text: '邀请你一起来活动！', 339 + lineHeight: 50,
329 - fontSize: 42, 340 + lineNum: 1,
330 - color: '#8F9399', 341 + zIndex: 999,
331 - opacity: 1, 342 + },
332 - baseLine: 'middle', 343 + {
333 - textAlign: 'left', 344 + x: 300,
334 - lineHeight: 42, 345 + y: 1150,
335 - lineNum: 1, 346 + text: '邀请你一起来活动！',
336 - zIndex: 999, 347 + fontSize: 42,
337 - } 348 + color: '#8F9399',
338 - ], 349 + opacity: 1,
339 - images: [ 350 + baseLine: 'middle',
340 - { 351 + textAlign: 'left',
341 - url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l450x64zj20ku0bq78c.jpg', 352 + lineHeight: 42,
342 - width: 950, 353 + lineNum: 1,
343 - height: 500, 354 + zIndex: 999,
344 - x: 40, 355 + }
345 - y: 20, 356 + ],
346 - // borderRadius: 16, 357 + images: [
347 - borderRadiusGroup: [18, 18, 0, 0], 358 + {
348 - zIndex: 10, 359 + url: activity.cover,
349 - // borderRadius: 150, 360 + width: 950,
350 - // borderWidth: 10, 361 + height: 500,
351 - // borderColor: 'red', 362 + x: 40,
352 - }, 363 + y: 20,
353 - { 364 + // borderRadius: 16,
354 - url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5d2bmijj200s00s0sh.jpg', 365 + borderRadiusGroup: [18, 18, 0, 0],
355 - width: 40, 366 + zIndex: 10,
356 - height: 40, 367 + // borderRadius: 150,
357 - x: 80, 368 + // borderWidth: 10,
358 - y: 750, 369 + // borderColor: 'red',
359 - borderRadius: 100, 370 + },
360 - borderWidth: 0, 371 + {
361 - zIndex: 10, 372 + url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5d2bmijj200s00s0sh.jpg',
362 - }, 373 + width: 40,
363 - { 374 + height: 40,
364 - url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5dc9q31j200o00u0ol.jpg', 375 + x: 80,
365 - width: 35, 376 + y: 750,
366 - height: 40, 377 + borderRadius: 100,
367 - x: 80, 378 + borderWidth: 0,
368 - y: 850, 379 + zIndex: 10,
369 - borderRadius: 100, 380 + },
370 - borderWidth: 0, 381 + {
371 - zIndex: 10, 382 + url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5dc9q31j200o00u0ol.jpg',
372 - }, 383 + width: 35,
373 - { 384 + height: 40,
374 - url: 'https://pic.juncao.cc/cms/images/minapp.jpg', 385 + x: 80,
375 - width: 170, 386 + y: 850,
376 - height: 170, 387 + borderRadius: 100,
377 - x: 80, 388 + borderWidth: 0,
378 - y: 1030, 389 + zIndex: 10,
379 - borderRadius: 100, 390 + },
380 - borderWidth: 0, 391 + {
381 - zIndex: 10, 392 + url: avatar.value,
382 - }, 393 + width: 170,
383 - { 394 + height: 170,
384 - url: 'https://pic.juncao.cc/cms/images/minapp.jpg', 395 + x: 80,
385 - width: 170, 396 + y: 1030,
386 - height: 170, 397 + borderRadius: 100,
387 - x: 750, 398 + borderWidth: 0,
388 - y: 1030, 399 + zIndex: 10,
389 - borderRadius: 100, 400 + },
390 - borderWidth: 0, 401 + {
391 - zIndex: 10, 402 + url: 'https://pic.juncao.cc/cms/images/minapp.jpg',
392 - }, 403 + width: 170,
393 - ], 404 + height: 170,
394 - lines: [ 405 + x: 750,
395 - { 406 + y: 1030,
396 - startY: 970, 407 + borderRadius: 100,
397 - startX: 80, 408 + borderWidth: 0,
398 - endX: 950, 409 + zIndex: 10,
399 - endY: 971, 410 + },
400 - width: 1, 411 + ],
401 - color: '#8F9399', 412 + lines: [
413 + {
414 + startY: 970,
415 + startX: 80,
416 + endX: 950,
417 + endY: 971,
418 + width: 1,
419 + color: '#8F9399',
420 + }
421 + ]
402 } 422 }
403 - ] 423 + startDraw.value = true;
404 -} 424 + if (!posterPath.value) Taro.showLoading();
405 -const start = () => { 425 + }
406 - startDraw.value = true;
407 - if (!posterPath.value) Taro.showLoading();
408 } 426 }
409 const drawSuccess = (result) => { 427 const drawSuccess = (result) => {
410 console.warn('绘制好了', result); 428 console.warn('绘制好了', result);
......