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
<!--
* @Date: 2022-09-26 14:36:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-27 14:45:09
* @LastEditTime: 2022-10-28 13:11:56
* @FilePath: /swx/src/pages/activityDetail/index.vue
* @Description: 活动详情页
-->
......@@ -149,8 +149,20 @@
import activityBar from '@/components/activity-bar.vue'
import Taro from '@tarojs/taro'
import PosterBuilder from '@/components/PosterBuilder/index.vue';
import { ref, computed } from "vue";
import { ref, onMounted } from "vue";
import * as dayjs from 'dayjs'
import { infoUserAPI } from '@/api/User/index';
import icon_share from '@/images/icon/share.png'
const nickname = ref('');
const avatar = ref('');
onMounted(async () => {
const { code, data } = await infoUserAPI();
if (code) {
nickname.value = data.user.nickname;
avatar.value = data.user.avatar ? data.user.avatar : 'http://gyzs.onwall.cn/tou%402x.png';
}
})
const formatDate = (date) => {
return dayjs(date).format('YYYY-MM-DD HH:mm')
......@@ -159,7 +171,7 @@ const formatDate = (date) => {
const show_share = ref(false);
const share_options = [
{ name: '微信', icon: 'wechat', openType: 'share' },
{ name: '生成海报', icon: 'poster' },
{ name: '生成海报', icon: icon_share },
]
const shareActivity = () => {
show_share.value = true;
......@@ -168,7 +180,6 @@ const onCancelShare = () => {
show_share.value = false;
}
const onSelectShare = ({ detail }) => {
// TODO: 需要完善 分享朋友和生成海报功能
show_share.value = false;
if (detail.name === '生成海报') {
show_post.value = true;
......@@ -184,227 +195,234 @@ const onClickPost = () => {
// 生成海报
const startDraw = ref(false)
const posterPath = ref('')
const base = {
width: 1024,
height: 1334,
backgroundColor: '',
debug: false,
blocks: [
{
x: 40,
y: 20,
width: 950,
height: 1200,
paddingLeft: 0,
paddingRight: 0,
borderWidth: 1,
borderColor: '#D9DCD5',
backgroundColor: '#fff',
borderRadius: 16,
// borderRadiusGroup: [0, 0, 18, 18],
},
{
x: 40,
y: 730,
// width: 580,
height: 75,
paddingLeft: 80,
paddingRight: 0,
borderWidth: 0,
text: {
x: 0,
y: 0,
text: '2022-08-25 14:00',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'top',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 0,
},
backgroundColor: '#FFF9F3',
// borderColor: 'red',
// backgroundColor: '#EFF3F5',
// borderRadius: 0,
borderRadiusGroup: [0, 25, 25, 0],
// borderRadius: 16,
// zIndex: 100,
},
{
x: 40,
y: 830,
// width: 580,
height: 75,
paddingLeft: 80,
paddingRight: 0,
borderWidth: 0,
text: {
x: 0,
y: 0,
text: '上海市杨浦区军工路100号A座05室',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'top',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 0,
},
backgroundColor: '#FFF9F3',
// borderColor: 'red',
// backgroundColor: '#EFF3F5',
// borderRadius: 0,
borderRadiusGroup: [0, 25, 25, 0],
// borderRadius: 16,
// zIndex: 100,
},
],
texts: [
{
x: 80,
y: 630,
text: '八段锦-智慧没有烦恼',
fontSize: 50,
color: '#000',
opacity: 1,
baseLine: 'middle',
lineHeight: 60,
lineNum: 2,
textAlign: 'left',
width: 800,
zIndex: 999,
// fontWeight: 'bold',
fontFamily: 'Monospace',
},
{
x: 135,
y: 770,
text: '2022-08-25 14:00',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'middle',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 999,
},
{
x: 135,
y: 870,
text: '上海市杨浦区军工路100号A座05室',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'middle',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 999,
},
{
x: 300,
y: 1080,
text: '妙净',
fontSize: 50,
color: '#333',
opacity: 1,
baseLine: 'middle',
textAlign: 'left',
lineHeight: 50,
lineNum: 1,
zIndex: 999,
},
{
x: 300,
y: 1150,
text: '邀请你一起来活动！',
fontSize: 42,
color: '#8F9399',
opacity: 1,
baseLine: 'middle',
textAlign: 'left',
lineHeight: 42,
lineNum: 1,
zIndex: 999,
}
],
images: [
{
url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l450x64zj20ku0bq78c.jpg',
width: 950,
height: 500,
x: 40,
y: 20,
// borderRadius: 16,
borderRadiusGroup: [18, 18, 0, 0],
zIndex: 10,
// borderRadius: 150,
// borderWidth: 10,
// borderColor: 'red',
},
{
url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5d2bmijj200s00s0sh.jpg',
width: 40,
height: 40,
x: 80,
y: 750,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5dc9q31j200o00u0ol.jpg',
width: 35,
height: 40,
x: 80,
y: 850,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: 'https://pic.juncao.cc/cms/images/minapp.jpg',
width: 170,
height: 170,
x: 80,
y: 1030,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: 'https://pic.juncao.cc/cms/images/minapp.jpg',
width: 170,
height: 170,
x: 750,
y: 1030,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
],
lines: [
{
startY: 970,
startX: 80,
endX: 950,
endY: 971,
width: 1,
color: '#8F9399',
let base = {}
const start = async () => {
const { code, data } = await activityInfoAPI({ i: getCurrentPageParam().id });
if (code) {
data.activity.activity_time = formatDate(data.activity.activity_time);
const activity = data.activity;
base = {
width: 1024,
height: 1334,
backgroundColor: '',
debug: false,
blocks: [
{
x: 40,
y: 20,
width: 950,
height: 1200,
paddingLeft: 0,
paddingRight: 0,
borderWidth: 1,
borderColor: '#D9DCD5',
backgroundColor: '#fff',
borderRadius: 16,
// borderRadiusGroup: [0, 0, 18, 18],
},
{
x: 40,
y: 730,
// width: 580,
height: 75,
paddingLeft: 80,
paddingRight: 0,
borderWidth: 0,
text: {
x: 0,
y: 0,
text: '',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'top',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 0,
},
backgroundColor: '#FFF9F3',
// borderColor: 'red',
// backgroundColor: '#EFF3F5',
// borderRadius: 0,
borderRadiusGroup: [0, 25, 25, 0],
// borderRadius: 16,
// zIndex: 100,
},
{
x: 40,
y: 830,
// width: 580,
height: 75,
paddingLeft: 80,
paddingRight: 0,
borderWidth: 0,
text: {
x: 0,
y: 0,
text: '',
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'top',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 0,
},
backgroundColor: '#FFF9F3',
// borderColor: 'red',
// backgroundColor: '#EFF3F5',
// borderRadius: 0,
borderRadiusGroup: [0, 25, 25, 0],
// borderRadius: 16,
// zIndex: 100,
},
],
texts: [
{
x: 80,
y: 630,
text: activity.name,
fontSize: 50,
color: '#000',
opacity: 1,
baseLine: 'middle',
lineHeight: 60,
lineNum: 2,
textAlign: 'left',
width: 800,
zIndex: 999,
// fontWeight: 'bold',
fontFamily: 'Monospace',
},
{
x: 135,
y: 770,
text: activity.activity_time,
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'middle',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 999,
},
{
x: 135,
y: 870,
text: activity.address,
fontSize: 40,
color: '#222',
opacity: 1,
baseLine: 'middle',
lineHeight: 48,
lineNum: 2,
textAlign: 'left',
// width: 580,
zIndex: 999,
},
{
x: 300,
y: 1080,
text: nickname.value,
fontSize: 50,
color: '#333',
opacity: 1,
baseLine: 'middle',
textAlign: 'left',
lineHeight: 50,
lineNum: 1,
zIndex: 999,
},
{
x: 300,
y: 1150,
text: '邀请你一起来活动！',
fontSize: 42,
color: '#8F9399',
opacity: 1,
baseLine: 'middle',
textAlign: 'left',
lineHeight: 42,
lineNum: 1,
zIndex: 999,
}
],
images: [
{
url: activity.cover,
width: 950,
height: 500,
x: 40,
y: 20,
// borderRadius: 16,
borderRadiusGroup: [18, 18, 0, 0],
zIndex: 10,
// borderRadius: 150,
// borderWidth: 10,
// borderColor: 'red',
},
{
url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5d2bmijj200s00s0sh.jpg',
width: 40,
height: 40,
x: 80,
y: 750,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: 'https://tva1.sinaimg.cn/large/5f01a858gy1h6l5dc9q31j200o00u0ol.jpg',
width: 35,
height: 40,
x: 80,
y: 850,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: avatar.value,
width: 170,
height: 170,
x: 80,
y: 1030,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
{
url: 'https://pic.juncao.cc/cms/images/minapp.jpg',
width: 170,
height: 170,
x: 750,
y: 1030,
borderRadius: 100,
borderWidth: 0,
zIndex: 10,
},
],
lines: [
{
startY: 970,
startX: 80,
endX: 950,
endY: 971,
width: 1,
color: '#8F9399',
}
]
}
]
}
const start = () => {
startDraw.value = true;
if (!posterPath.value) Taro.showLoading();
startDraw.value = true;
if (!posterPath.value) Taro.showLoading();
}
}
const drawSuccess = (result) => {
console.warn('绘制好了', result);
......