hookehuyr

海报生成数据正式联调

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,7 +195,14 @@ const onClickPost = () => { ...@@ -184,7 +195,14 @@ 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 = {}
199 +
200 +const start = async () => {
201 + const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
202 + if (code) {
203 + data.activity.activity_time = formatDate(data.activity.activity_time);
204 + const activity = data.activity;
205 + base = {
188 width: 1024, 206 width: 1024,
189 height: 1334, 207 height: 1334,
190 backgroundColor: '', 208 backgroundColor: '',
...@@ -214,7 +232,7 @@ const base = { ...@@ -214,7 +232,7 @@ const base = {
214 text: { 232 text: {
215 x: 0, 233 x: 0,
216 y: 0, 234 y: 0,
217 - text: '2022-08-25 14:00', 235 + text: '',
218 fontSize: 40, 236 fontSize: 40,
219 color: '#222', 237 color: '#222',
220 opacity: 1, 238 opacity: 1,
...@@ -244,7 +262,7 @@ const base = { ...@@ -244,7 +262,7 @@ const base = {
244 text: { 262 text: {
245 x: 0, 263 x: 0,
246 y: 0, 264 y: 0,
247 - text: '上海市杨浦区军工路100号A座05室', 265 + text: '',
248 fontSize: 40, 266 fontSize: 40,
249 color: '#222', 267 color: '#222',
250 opacity: 1, 268 opacity: 1,
...@@ -268,7 +286,7 @@ const base = { ...@@ -268,7 +286,7 @@ const base = {
268 { 286 {
269 x: 80, 287 x: 80,
270 y: 630, 288 y: 630,
271 - text: '八段锦-智慧没有烦恼', 289 + text: activity.name,
272 fontSize: 50, 290 fontSize: 50,
273 color: '#000', 291 color: '#000',
274 opacity: 1, 292 opacity: 1,
...@@ -284,7 +302,7 @@ const base = { ...@@ -284,7 +302,7 @@ const base = {
284 { 302 {
285 x: 135, 303 x: 135,
286 y: 770, 304 y: 770,
287 - text: '2022-08-25 14:00', 305 + text: activity.activity_time,
288 fontSize: 40, 306 fontSize: 40,
289 color: '#222', 307 color: '#222',
290 opacity: 1, 308 opacity: 1,
...@@ -298,7 +316,7 @@ const base = { ...@@ -298,7 +316,7 @@ const base = {
298 { 316 {
299 x: 135, 317 x: 135,
300 y: 870, 318 y: 870,
301 - text: '上海市杨浦区军工路100号A座05室', 319 + text: activity.address,
302 fontSize: 40, 320 fontSize: 40,
303 color: '#222', 321 color: '#222',
304 opacity: 1, 322 opacity: 1,
...@@ -312,7 +330,7 @@ const base = { ...@@ -312,7 +330,7 @@ const base = {
312 { 330 {
313 x: 300, 331 x: 300,
314 y: 1080, 332 y: 1080,
315 - text: '妙净', 333 + text: nickname.value,
316 fontSize: 50, 334 fontSize: 50,
317 color: '#333', 335 color: '#333',
318 opacity: 1, 336 opacity: 1,
...@@ -338,7 +356,7 @@ const base = { ...@@ -338,7 +356,7 @@ const base = {
338 ], 356 ],
339 images: [ 357 images: [
340 { 358 {
341 - url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l450x64zj20ku0bq78c.jpg', 359 + url: activity.cover,
342 width: 950, 360 width: 950,
343 height: 500, 361 height: 500,
344 x: 40, 362 x: 40,
...@@ -371,7 +389,7 @@ const base = { ...@@ -371,7 +389,7 @@ const base = {
371 zIndex: 10, 389 zIndex: 10,
372 }, 390 },
373 { 391 {
374 - url: 'https://pic.juncao.cc/cms/images/minapp.jpg', 392 + url: avatar.value,
375 width: 170, 393 width: 170,
376 height: 170, 394 height: 170,
377 x: 80, 395 x: 80,
...@@ -401,10 +419,10 @@ const base = { ...@@ -401,10 +419,10 @@ const base = {
401 color: '#8F9399', 419 color: '#8F9399',
402 } 420 }
403 ] 421 ]
404 -} 422 + }
405 -const start = () => {
406 startDraw.value = true; 423 startDraw.value = true;
407 if (!posterPath.value) Taro.showLoading(); 424 if (!posterPath.value) Taro.showLoading();
425 + }
408 } 426 }
409 const drawSuccess = (result) => { 427 const drawSuccess = (result) => {
410 console.warn('绘制好了', result); 428 console.warn('绘制好了', result);
......