版型修改

dev
DESKTOP-8UQ1PPR\09158 3 years ago
parent ad56c70b7c
commit 3e2fcfafeb

26
package-lock.json generated

@ -521,6 +521,7 @@
"version": "7.18.6", "version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
"integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==", "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/helper-create-class-features-plugin": "^7.18.6", "@babel/helper-create-class-features-plugin": "^7.18.6",
@ -568,6 +569,7 @@
"version": "7.18.6", "version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
"integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==", "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/helper-create-regexp-features-plugin": "^7.18.6", "@babel/helper-create-regexp-features-plugin": "^7.18.6",
@ -8041,9 +8043,9 @@
"dev": true "dev": true
}, },
"node_modules/fsevents": { "node_modules/fsevents": {
"version": "2.3.2", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
@ -10551,9 +10553,9 @@
} }
}, },
"node_modules/nan": { "node_modules/nan": {
"version": "2.17.0", "version": "2.18.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==", "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
"dev": true, "dev": true,
"optional": true "optional": true
}, },
@ -23048,9 +23050,9 @@
"dev": true "dev": true
}, },
"fsevents": { "fsevents": {
"version": "2.3.2", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true, "dev": true,
"optional": true "optional": true
}, },
@ -24985,9 +24987,9 @@
} }
}, },
"nan": { "nan": {
"version": "2.17.0", "version": "2.18.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==", "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
"dev": true, "dev": true,
"optional": true "optional": true
}, },

@ -472,7 +472,7 @@ function button_object(json) {
} }
if (color) { if (color) {
style3 += `background-color:${color} !important;`; style3 += `color:${color} !important;`;
} }
if ( if (

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 51 KiB

@ -230,10 +230,10 @@ function genCard(vcard) {
"contents": [ "contents": [
{ {
"type": "image", "type": "image",
"url": "https://369cycle.zltest.com.tw/tggo/template/utel_card-01.png", "url": "https://demo.zltest.com.tw/line/bg02.jpg",
"size": "full", "size": "full",
"aspectMode": "cover", "aspectMode": "cover",
"aspectRatio": "10:7", "aspectRatio": "4:3",
"gravity": "top", "gravity": "top",
"action": { "action": {
"type": "uri", "type": "uri",
@ -265,7 +265,7 @@ function genCard(vcard) {
"position": "absolute", "position": "absolute",
"offsetTop": "13%", "offsetTop": "13%",
"offsetStart": "3%", "offsetStart": "3%",
"width": "36%" "width": "26%"
}, },
{ {
"type": "box", "type": "box",
@ -322,9 +322,9 @@ function genCard(vcard) {
} }
], ],
"position": "absolute", "position": "absolute",
"offsetStart": "5%", "offsetStart": "4%",
"width": "22%", "width": "25%",
"offsetBottom": "25%" "offsetBottom": "5%"
}, },
{ {
"type": "box", "type": "box",
@ -366,8 +366,8 @@ function genCard(vcard) {
"type": "box", "type": "box",
"layout": "baseline", "layout": "baseline",
"contents": [], "contents": [],
"backgroundColor": "#e3c2d6", "backgroundColor": "#d5602d",
"height": "2px", "height": "3px",
"margin": "lg" "margin": "lg"
}, },
${vcardPhone} ${vcardPhone}
@ -384,9 +384,9 @@ function genCard(vcard) {
} }
], ],
"position": "absolute", "position": "absolute",
"offsetTop": "18%", "offsetTop": "12%",
"offsetStart": "30%", "offsetStart": "35%",
"offsetEnd": "0%" "offsetEnd": "5%"
} }
], ],
"paddingAll": "0px" "paddingAll": "0px"

@ -1,348 +1,306 @@
function genCard(vcard) { function genCard(vcard) {
// 名片預覽
let vcardLink; let vcardLink;
if (vcard.url.trim().length > 0) { if (vcard.url.trim().length > 0) {
if (vcard.nc_func.indexOf("nourl") !== -1) { if (vcard.nc_func.indexOf("nourl") !== -1) {
vcardLink = { vcardLink = `{
type: "box", "type": "text",
layout: "baseline", "text": "${vcard.url}",
contents: [ "color": "#ffffff",
{ "size": "sm"
type: "text",
text: vcard.url,
color: "#333334",
size: "sm",
weight: "bold",
align: "end",
}, },
], `;
spacing: "lg",
margin: "xs",
};
} else { } else {
vcardLink = { vcardLink = `
type: "box",
layout: "baseline",
contents: [
{ {
type: "text", "type": "text",
text: vcard.url, "text": "${vcard.url}",
color: "#333334", "color": "#ffffff",
size: "sm", "size": "sm",
action: { "action": {
type: "uri", "type": "uri",
label: "action", "label": "action",
uri: vcard.url, "uri": "${vcard.url}"
}, }
weight: "bold",
align: "end",
}, },
], `;
spacing: "lg",
margin: "xs",
};
} }
} else { } else {
vcardLink = { vcardLink = "";
type: "box", }
layout: "baseline",
contents: [ let vcardAvatar;
if (vcard.avatar.trim().length > 0) {
vcardAvatar = `
{ {
type: "text", "type": "image",
text: " ", "url": "${vcard.avatar}",
color: "#333334", "size": "full",
size: "sm", "aspectRatio": "1:1",
weight: "bold", "aspectMode": "cover",
align: "end", "action": {
}, "type": "uri",
], "label": "action",
spacing: "lg", "uri": "${vcard.nfcurl}&cardid=1"
margin: "xs", }
}; }
`;
} else {
vcardAvatar = "";
} }
let vcardAddr; let vcardAddr;
if (vcard.address.trim().length > 0) { if (vcard.address.trim().length > 0) {
vcardAddr = { vcardAddr = `
type: "box",
layout: "vertical",
contents: [
{ {
type: "text", "type": "text",
text: vcard.address, "text": "${vcard.address}",
weight: "bold", "color": "#ffffff",
color: "#333334", "size": "sm",
size: "sm", "wrap": true,
align: "end", "action": {
action: { "type": "uri",
type: "uri", "label": "action",
label: "action", "uri": "https://www.google.com.tw/maps/place/${encodeURIComponent(
uri: `https://www.google.com.tw/maps/place/${encodeURIComponent(
vcard.address vcard.address
)}`, )}"
}, }
wrap: true,
}, },
], `;
spacing: "lg",
margin: "xs",
};
} else { } else {
vcardAddr = { 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) { let vcardTel;
vcard.title = " "; 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
)}"
} }
},
if (vcard.tel.trim().length == 0) { `;
vcard.tel = " "; } else {
vcardTel = "";
} }
let vcardPhone; let vcardPhone;
if (vcard.phone.trim().length > 0) {
if (vcard.phone.trim().length == 0) { vcardPhone = `
vcard.phone = " "; {
"type": "text",
"text": "${vcard.phone}",
"size": "lg",
"margin": "sm",
"action": {
"type": "uri",
"label": "action",
"uri": "tel:${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",
},
};
} else { } else {
vcardAvatar = { vcardPhone = "";
type: "text",
text: " ",
size: "xs",
};
} }
let vcardEmail; let vcardEmail;
if (vcard.email.trim().length > 0) { if (vcard.email.trim().length > 0) {
vcardEmail = { vcardEmail = `
type: "text", {
text: vcard.email, "type": "text",
color: "#333334", "text": "${vcard.email}",
size: "sm", "color": "#ffffff",
weight: "bold", "size": "sm",
action: { "action": {
type: "uri", "type": "uri",
label: "action", "label": "action",
uri: `mailto:${vcard.email}`, "data": "mailto:${vcard.email}"
}
}, },
align: "end", `;
};
} else { } else {
vcardEmail = { vcardEmail = "";
type: "text",
text: " ",
color: "#333334",
size: "sm",
weight: "bold",
align: "end",
};
} }
let card = { // 名片發送
altText: "UTel電子名片",
type: "flex", let card = `
contents: {
type: "bubble",
size: "giga",
body: {
type: "box",
layout: "vertical",
contents: [
{ {
type: "image", "altText": "UTel電子名片",
size: "full", "type": "flex",
aspectMode: "cover", "contents":
aspectRatio: "4:3",
gravity: "top",
url: process.env.VUE_APP_BASE_URL+"/images/tpl03_bg.png?v=1",
},
{ {
type: "box", "type": "bubble",
layout: "vertical", "size": "giga",
contents: [ "body": {
"type": "box",
"layout": "horizontal",
"contents": [
{ {
type: "text", "type": "box",
text: vcard.company || " ", "layout": "vertical",
size: "xl", "contents": [
wrap: true,
},
],
position: "absolute",
offsetTop: "5%",
offsetStart: "5%",
width: "60%",
},
{ {
type: "box", "type": "box",
layout: "vertical", "layout": "vertical",
contents: [vcardAvatar], "contents": [${vcardAvatar}],
position: "absolute", "cornerRadius": "150px",
offsetTop: "5%", "width": "60%",
offsetEnd: "5%", "borderWidth": "bold",
"borderColor": "#f5c520",
"margin": "none"
}, },
{ {
type: "box", "type": "text",
layout: "horizontal", "text": "${vcard.name}",
contents: [ "size": "xl",
{ "weight": "bold",
type: "text", "margin": "md"
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", "type": "text",
layout: "vertical", "text": "${vcard.title}",
contents: [ "size": "md",
{ "weight": "regular",
type: "text", "color": "#666666",
text: vcard.title || " ", "action": {
align: "center", "type": "uri",
"label": "action",
"uri": "${vcard.nfcurl}&cardid=1"
}
}, },
${vcardPhone}
], ],
position: "absolute", "alignItems": "center",
offsetTop: "55%", "paddingTop": "5%",
offsetStart: "40%", "paddingBottom": "8%",
width: "20%", "width": "35%"
}, },
{ {
type: "box", "type": "box",
layout: "horizontal", "layout": "vertical",
contents: [ "contents": [
{ {
type: "box", "type": "box",
layout: "vertical", "layout": "vertical",
contents: [ "contents": [
{ {
type: "image", "type": "text",
url: "https://utel.u168.vip/images/icons/web.png", "text": "${vcard.company}",
align: "center", "color": "#ffffff",
size: "xxs", "size": "xl",
"weight": "bold"
}
]
}, },
{ {
type: "text", "type": "box",
text: "我的網站", "layout": "vertical",
align: "center", "contents": [
color: "#FFFFFF", ${vcardTel}
}, ${vcardLink}
], ${vcardEmail}
flex: 1, ${vcardAddr}
action: {
type: "uri",
label: "action",
uri:
vcard.url.trim().length > 0
? vcard.url
: vcard.nfcurl + "&cardid=1",
},
},
{ {
type: "box", "type": "box",
layout: "vertical", "layout": "horizontal",
contents: [ "justifyContent": "space-between",
"contents": [
{ {
type: "image", "type": "box",
url: "https://utel.u168.vip/images/icons/phone.png", "layout": "vertical",
align: "center", "contents": [
size: "xxs",
},
{ {
type: "text", "type": "button",
text: vcard.phone, "action": {
align: "center", "type": "uri",
color: "#FFFFFF", "label": "加入好友",
}, "uri": "http://linecorp.com/"
},
"color": "#dddddd",
"height": "sm",
"style": "link"
}
], ],
flex: 1, "borderWidth": "light",
action: { "borderColor": "#dddddd",
type: "uri", "cornerRadius": "lg",
label: "action", "width": "48%",
uri: "tel:" + vcard.phone, "height": "36px"
},
}, },
{ {
type: "box", "type": "box",
layout: "vertical", "layout": "vertical",
contents: [ "contents": [
{
type: "image",
url: "https://utel.u168.vip/images/icons/email.png",
align: "center",
size: "xxs",
},
{ {
type: "text", "type": "button",
text: vcard.email, "action": {
align: "center", "type": "uri",
color: "#FFFFFF", "label": "分享名片",
}, "uri": "http://linecorp.com/"
},
"color": "#dddddd",
"height": "sm"
}
], ],
flex: 1, "cornerRadius": "lg",
action: { "borderColor": "#dddddd",
type: "uri", "borderWidth": "light",
label: "action", "height": "36px",
uri: "mailto:" + vcard.email, "width": "48%"
}, }
},
], ],
position: "absolute", "margin": "md"
width: "100%", }
offsetBottom: "5%", ]
}, }
], ],
paddingAll: "0px", "backgroundColor": "#353e45",
action: { "paddingBottom": "4%",
type: "uri", "paddingStart": "5%",
label: "action", "paddingEnd": "5%",
uri: vcard.nfcurl + "&cardid=1", "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"
}, },
}; "height": "250px"
console.log(JSON.stringify(card)); }
return { card: JSON.stringify(card) }; }
}
`;
return { card };
} }
export { genCard }; export { genCard };

@ -1,5 +1,6 @@
function genCard(vcard) { function genCard(vcard) {
// 名片預覽 // 名片預覽
console.log('test')
let vcardLink; let vcardLink;
if (vcard.url.trim().length > 0) { if (vcard.url.trim().length > 0) {
if (vcard.nc_func.indexOf("nourl") !== -1) { if (vcard.nc_func.indexOf("nourl") !== -1) {

@ -26,7 +26,7 @@
<van-button type="success" block>切換樣版</van-button> <van-button type="success" block>切換樣版</van-button>
</div> </div>
<Footer /> <Footer />
<van-popup v-model:show="showDraw" position="right" :style="{ height: '100%', width: '150px' }"> <van-popup v-model:show="showDraw" position="right" :style="{ height: '100%', width: '200px' }">
<div> <div>
<ul class="tpl-list"> <ul class="tpl-list">
<li class="tpl-item" @click="changeTpl(0)"> <li class="tpl-item" @click="changeTpl(0)">
@ -35,6 +35,9 @@
<li class="tpl-item" @click="changeTpl(1)"> <li class="tpl-item" @click="changeTpl(1)">
<img src="@/assets/images/tpl/tpl1.png"> <img src="@/assets/images/tpl/tpl1.png">
</li> </li>
<li class="tpl-item" @click="changeTpl(2)">
<img src="@/assets/images/tpl/tpl2.png">
</li>
<li class="tpl-item" @click="changeTpl(3)"> <li class="tpl-item" @click="changeTpl(3)">
<img src="@/assets/images/tpl/tpl3.png"> <img src="@/assets/images/tpl/tpl3.png">
</li> </li>

Loading…
Cancel
Save