DESKTOP-8UQ1PPR\09158
3 years ago
parent
ad56c70b7c
commit
3e2fcfafeb
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 51 KiB |
@ -1,348 +1,306 @@
|
||||
function genCard(vcard) {
|
||||
// 名片預覽
|
||||
let vcardLink;
|
||||
if (vcard.url.trim().length > 0) {
|
||||
if (vcard.nc_func.indexOf("nourl") !== -1) {
|
||||
vcardLink = {
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.url,
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
vcardLink = `{
|
||||
"type": "text",
|
||||
"text": "${vcard.url}",
|
||||
"color": "#ffffff",
|
||||
"size": "sm"
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardLink = {
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.url,
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.url,
|
||||
},
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
vcardLink = `
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.url}",
|
||||
"color": "#ffffff",
|
||||
"size": "sm",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.url}"
|
||||
}
|
||||
},
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
vcardLink = "";
|
||||
}
|
||||
|
||||
let vcardAvatar;
|
||||
if (vcard.avatar.trim().length > 0) {
|
||||
vcardAvatar = `
|
||||
{
|
||||
"type": "image",
|
||||
"url": "${vcard.avatar}",
|
||||
"size": "full",
|
||||
"aspectRatio": "1:1",
|
||||
"aspectMode": "cover",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.nfcurl}&cardid=1"
|
||||
}
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
vcardLink = {
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
vcardAvatar = "";
|
||||
}
|
||||
|
||||
let vcardAddr;
|
||||
if (vcard.address.trim().length > 0) {
|
||||
vcardAddr = {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.address,
|
||||
weight: "bold",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
align: "end",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: `https://www.google.com.tw/maps/place/${encodeURIComponent(
|
||||
vcardAddr = `
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.address}",
|
||||
"color": "#ffffff",
|
||||
"size": "sm",
|
||||
"wrap": true,
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "https://www.google.com.tw/maps/place/${encodeURIComponent(
|
||||
vcard.address
|
||||
)}`,
|
||||
},
|
||||
wrap: true,
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
)}"
|
||||
}
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardAddr = {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
weight: "bold",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
align: "end",
|
||||
wrap: true,
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
}
|
||||
|
||||
if (vcard.title.trim().length == 0) {
|
||||
vcard.title = " ";
|
||||
vcardAddr = "";
|
||||
}
|
||||
|
||||
if (vcard.tel.trim().length == 0) {
|
||||
vcard.tel = " ";
|
||||
let vcardTel;
|
||||
if (vcard.tel.trim().length > 0) {
|
||||
vcardTel = `
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.tel}",
|
||||
"color": "#ffffff",
|
||||
"size": "sm",
|
||||
"wrap": true,
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "https://www.google.com.tw/maps/place/${encodeURIComponent(
|
||||
vcard.address
|
||||
)}"
|
||||
}
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardTel = "";
|
||||
}
|
||||
|
||||
let vcardPhone;
|
||||
|
||||
if (vcard.phone.trim().length == 0) {
|
||||
vcard.phone = " ";
|
||||
}
|
||||
|
||||
let vcardAvatar;
|
||||
if (vcard.avatar.trim().length > 0) {
|
||||
vcardAvatar = {
|
||||
type: "image",
|
||||
url: vcard.avatar,
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.nfcurl + "&cardid=1",
|
||||
},
|
||||
};
|
||||
if (vcard.phone.trim().length > 0) {
|
||||
vcardPhone = `
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.phone}",
|
||||
"size": "lg",
|
||||
"margin": "sm",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "tel:${vcard.phone}"
|
||||
}
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
vcardAvatar = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
size: "xs",
|
||||
};
|
||||
vcardPhone = "";
|
||||
}
|
||||
|
||||
let vcardEmail;
|
||||
|
||||
if (vcard.email.trim().length > 0) {
|
||||
vcardEmail = {
|
||||
type: "text",
|
||||
text: vcard.email,
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: `mailto:${vcard.email}`,
|
||||
},
|
||||
align: "end",
|
||||
};
|
||||
vcardEmail = `
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.email}",
|
||||
"color": "#ffffff",
|
||||
"size": "sm",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"data": "mailto:${vcard.email}"
|
||||
}
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardEmail = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
};
|
||||
vcardEmail = "";
|
||||
}
|
||||
|
||||
let card = {
|
||||
altText: "UTel電子名片",
|
||||
type: "flex",
|
||||
contents: {
|
||||
type: "bubble",
|
||||
size: "giga",
|
||||
body: {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "image",
|
||||
size: "full",
|
||||
aspectMode: "cover",
|
||||
aspectRatio: "4:3",
|
||||
gravity: "top",
|
||||
url: process.env.VUE_APP_BASE_URL+"/images/tpl03_bg.png?v=1",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.company || " ",
|
||||
size: "xl",
|
||||
wrap: true,
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "5%",
|
||||
offsetStart: "5%",
|
||||
width: "60%",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [vcardAvatar],
|
||||
position: "absolute",
|
||||
offsetTop: "5%",
|
||||
offsetEnd: "5%",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "horizontal",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.name,
|
||||
size: "lg",
|
||||
weight: "bold",
|
||||
align: "center",
|
||||
},
|
||||
// {
|
||||
// type: "text",
|
||||
// text: " ",
|
||||
// size: "lg",
|
||||
// weight: "bold",
|
||||
// color: "#F71646",
|
||||
// },
|
||||
],
|
||||
position: "absolute",
|
||||
offsetStart: "40%",
|
||||
offsetTop: "45%",
|
||||
width: "20%",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.title || " ",
|
||||
align: "center",
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "55%",
|
||||
offsetStart: "40%",
|
||||
width: "20%",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "horizontal",
|
||||
contents: [
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "image",
|
||||
url: "https://utel.u168.vip/images/icons/web.png",
|
||||
align: "center",
|
||||
size: "xxs",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "我的網站",
|
||||
align: "center",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
],
|
||||
flex: 1,
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri:
|
||||
vcard.url.trim().length > 0
|
||||
? vcard.url
|
||||
: vcard.nfcurl + "&cardid=1",
|
||||
// 名片發送
|
||||
|
||||
let card = `
|
||||
{
|
||||
"altText": "UTel電子名片",
|
||||
"type": "flex",
|
||||
"contents":
|
||||
{
|
||||
"type": "bubble",
|
||||
"size": "giga",
|
||||
"body": {
|
||||
"type": "box",
|
||||
"layout": "horizontal",
|
||||
"contents": [
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [${vcardAvatar}],
|
||||
"cornerRadius": "150px",
|
||||
"width": "60%",
|
||||
"borderWidth": "bold",
|
||||
"borderColor": "#f5c520",
|
||||
"margin": "none"
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "image",
|
||||
url: "https://utel.u168.vip/images/icons/phone.png",
|
||||
align: "center",
|
||||
size: "xxs",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.phone,
|
||||
align: "center",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
],
|
||||
flex: 1,
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: "tel:" + vcard.phone,
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.name}",
|
||||
"size": "xl",
|
||||
"weight": "bold",
|
||||
"margin": "md"
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "image",
|
||||
url: "https://utel.u168.vip/images/icons/email.png",
|
||||
align: "center",
|
||||
size: "xxs",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.email,
|
||||
align: "center",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
],
|
||||
flex: 1,
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: "mailto:" + vcard.email,
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.title}",
|
||||
"size": "md",
|
||||
"weight": "regular",
|
||||
"color": "#666666",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.nfcurl}&cardid=1"
|
||||
}
|
||||
},
|
||||
${vcardPhone}
|
||||
],
|
||||
"alignItems": "center",
|
||||
"paddingTop": "5%",
|
||||
"paddingBottom": "8%",
|
||||
"width": "35%"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.company}",
|
||||
"color": "#ffffff",
|
||||
"size": "xl",
|
||||
"weight": "bold"
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
offsetBottom: "5%",
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
${vcardTel}
|
||||
${vcardLink}
|
||||
${vcardEmail}
|
||||
${vcardAddr}
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "horizontal",
|
||||
"justifyContent": "space-between",
|
||||
"contents": [
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "button",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "加入好友",
|
||||
"uri": "http://linecorp.com/"
|
||||
},
|
||||
"color": "#dddddd",
|
||||
"height": "sm",
|
||||
"style": "link"
|
||||
}
|
||||
],
|
||||
"borderWidth": "light",
|
||||
"borderColor": "#dddddd",
|
||||
"cornerRadius": "lg",
|
||||
"width": "48%",
|
||||
"height": "36px"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "button",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "分享名片",
|
||||
"uri": "http://linecorp.com/"
|
||||
},
|
||||
"color": "#dddddd",
|
||||
"height": "sm"
|
||||
}
|
||||
],
|
||||
"cornerRadius": "lg",
|
||||
"borderColor": "#dddddd",
|
||||
"borderWidth": "light",
|
||||
"height": "36px",
|
||||
"width": "48%"
|
||||
}
|
||||
],
|
||||
"margin": "md"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"backgroundColor": "#353e45",
|
||||
"paddingBottom": "4%",
|
||||
"paddingStart": "5%",
|
||||
"paddingEnd": "5%",
|
||||
"width": "66%",
|
||||
"justifyContent": "space-between",
|
||||
"paddingTop": "4%"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "image",
|
||||
"url": "https://369cycle.zltest.com.tw/tggo/template/bg-01.png",
|
||||
"size": "full"
|
||||
}
|
||||
],
|
||||
"position": "absolute",
|
||||
"width": "67%",
|
||||
"height": "70%",
|
||||
"offsetEnd": "none",
|
||||
"justifyContent": "flex-end"
|
||||
}
|
||||
],
|
||||
"paddingAll": "0px",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "https://utel.zltest.com.tw/card/?params=i7Kq7O59hPX1MJ%2Bqd8zQKBwuyc%2F%2BZ%2BZs%2BZXtXBy4zvg%3D&cardid=1"
|
||||
},
|
||||
],
|
||||
paddingAll: "0px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.nfcurl + "&cardid=1",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
console.log(JSON.stringify(card));
|
||||
return { card: JSON.stringify(card) };
|
||||
"height": "250px"
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
return { card };
|
||||
}
|
||||
|
||||
export { genCard };
|
||||
|
||||
Loading…
Reference in new issue