@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
@ -0,0 +1,13 @@
|
||||
NODE_ENV = production
|
||||
|
||||
VUE_APP_LINE_LIFF_ID = 1656907652-VJq33Pdg
|
||||
|
||||
VUE_APP_BASE_URL = https://card.h888.fun
|
||||
|
||||
VUE_APP_SEND_URL = https://liff.line.me/1657876696-564NGMxy
|
||||
|
||||
VUE_APP_API_URL = https://card.h888.fun/appapi/v1
|
||||
|
||||
VUE_APP_IMAGE_URL = https://card.h888.fun/storage
|
||||
|
||||
VUE_APP_MC_URL = https://liff.line.me/1657876696-MKYDJKgm
|
||||
@ -0,0 +1,15 @@
|
||||
NODE_ENV = production
|
||||
|
||||
VUE_ENV = production
|
||||
|
||||
VUE_APP_LINE_LIFF_ID = 1656969446-mg36Maav
|
||||
|
||||
VUE_APP_BASE_URL = https://utel.vip
|
||||
|
||||
VUE_APP_SEND_URL = https://liff.line.me/1656969446-mg36Maav
|
||||
|
||||
VUE_APP_API_URL = https://utel.vip/appapi/v1
|
||||
|
||||
VUE_APP_IMAGE_URL = https://utel.vip/storage
|
||||
|
||||
VUE_APP_MC_URL = https://liff.line.me/1656969446-nQYlz77R
|
||||
@ -0,0 +1,15 @@
|
||||
NODE_ENV = development
|
||||
|
||||
VUE_ENV = u168
|
||||
|
||||
VUE_APP_LINE_LIFF_ID = 1656907652-VJq33Pdg
|
||||
|
||||
VUE_APP_BASE_URL = https://card.h888.fun
|
||||
|
||||
VUE_APP_SEND_URL = https://liff.line.me/1656907652-VJq33Pdg
|
||||
|
||||
VUE_APP_API_URL = https://card.h888.fun/appapi/v1
|
||||
|
||||
VUE_APP_IMAGE_URL = https://card.h888.fun/storage
|
||||
|
||||
VUE_APP_MC_URL = https://liff.line.me/1656907652-p38ddKzQ
|
||||
@ -0,0 +1,15 @@
|
||||
NODE_ENV = production
|
||||
|
||||
VUE_ENV = stage
|
||||
|
||||
VUE_APP_LINE_LIFF_ID = 1656948609-BYr8Nynp
|
||||
|
||||
VUE_APP_BASE_URL = https://utel.zltest.com.tw
|
||||
|
||||
VUE_APP_SEND_URL = https://liff.line.me/1656948609-BYr8Nynp
|
||||
|
||||
VUE_APP_API_URL = https://utel.zltest.com.tw/appapi/v1
|
||||
|
||||
VUE_APP_IMAGE_URL = https://utel.zltest.com.tw/storage
|
||||
|
||||
VUE_APP_MC_URL = https://liff.line.me/1656948609-xMp7dWAz
|
||||
@ -0,0 +1,15 @@
|
||||
NODE_ENV = development
|
||||
|
||||
VUE_ENV = u168
|
||||
|
||||
VUE_APP_LINE_LIFF_ID = 1656907652-VJq33Pdg
|
||||
|
||||
VUE_APP_BASE_URL = https://u168.vip
|
||||
|
||||
VUE_APP_SEND_URL = https://liff.line.me/1656907652-VJq33Pdg
|
||||
|
||||
VUE_APP_API_URL = https://u168.vip/appapi/v1
|
||||
|
||||
VUE_APP_IMAGE_URL = https://u168.vip/storage
|
||||
|
||||
VUE_APP_MC_URL = https://liff.line.me/1656907652-p38ddKzQ
|
||||
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,19 @@
|
||||
# card
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@ -0,0 +1,15 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
"import",
|
||||
{
|
||||
"libraryName": "vant",
|
||||
"libraryDirectory": "es",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "card",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"build:slash": "vue-cli-service build --mode slash",
|
||||
"build:u168": "vue-cli-service build --mode u168",
|
||||
"build:dev": "vue-cli-service build --mode development",
|
||||
"build:sta": "vue-cli-service build --mode stage"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.26.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vant": "^3.4.7",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuex": "^4.0.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.15",
|
||||
"@vue/cli-plugin-router": "~4.5.15",
|
||||
"@vue/cli-plugin-vuex": "~4.5.15",
|
||||
"@vue/cli-service": "~4.5.15",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-plugin-import": "^1.13.3",
|
||||
"less": "^3.0.4",
|
||||
"less-loader": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="./css/flex2html.css">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>UTel感應式電子名片</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<script src="./js/flex2html.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<router-view/>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
import ajax from './ajax'
|
||||
|
||||
export const login = async (params)=> ajax(`/auth/login`,params,"POST")
|
||||
|
||||
export const checkLineId = async (lineid)=> ajax(`/auth/checkLineId`,{lineid},"GET")
|
||||
|
||||
export const getUserInfo = async ()=> ajax(`/user/getUserInfo`)
|
||||
|
||||
export const setUserLevel = async (level)=> ajax(`/user/setUserLevel`,{level},"POST")
|
||||
|
||||
//取得名片資料
|
||||
export const checkUser = async (token)=> ajax(`/card/checkUser`,{token},"GET")
|
||||
|
||||
export const getCard = async (params)=> ajax(`/card/getCard`,params,"GET")
|
||||
|
||||
export const getCusCard = async (params)=> ajax(`/card/getCusCard`,params,"GET")
|
||||
export const getVipCard = async (params)=> ajax(`/card/getVipCard`,params,"GET")
|
||||
|
||||
export const getCard1 = async (userid)=> ajax(`/card/getCard1`,{userid},"GET")
|
||||
@ -0,0 +1,22 @@
|
||||
html{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 49px;
|
||||
background: url('~@/assets/images/bg.png') repeat;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0
|
||||
}
|
||||
|
||||
:root{
|
||||
--van-nav-bar-background-color: #000;
|
||||
--van-nav-bar-title-text-color: #FFF;
|
||||
}
|
||||
@ -0,0 +1,229 @@
|
||||
@charset "utf-8";
|
||||
article,
|
||||
aside,
|
||||
audio,
|
||||
body,
|
||||
canvas,
|
||||
caption,
|
||||
details,
|
||||
div,
|
||||
p,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
html,
|
||||
iframe,
|
||||
img,
|
||||
mark,
|
||||
menu,
|
||||
nav,
|
||||
object,
|
||||
section,
|
||||
span,
|
||||
summary,
|
||||
table,
|
||||
tbody,
|
||||
td,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
video,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
background-color: #f4f4f4;
|
||||
padding-bottom: 49px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.footerMenu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.footerMenu ul {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: -webkit-box;
|
||||
/* display: box; */
|
||||
-webkit-box-orient: horizontal;
|
||||
background-color: #222;
|
||||
/*background-color: #F9F9F9;*/
|
||||
border-top: 1px solid #cecece;
|
||||
}
|
||||
.footerMenu ul li {
|
||||
float: left;
|
||||
width: 19%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footerMenu ul li.voiceBox {
|
||||
width: 24%;
|
||||
}
|
||||
.footerMenu.wap li {
|
||||
width: 25%;
|
||||
}
|
||||
.footerMenu.wap .voiceBox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footerMenu ul li a {
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding-top: 2px;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
}
|
||||
.footerMenu ul li a em {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.footerMenu ul li a em.home {
|
||||
/* background-image: url(../images/f01-1.png); */
|
||||
}
|
||||
.footerMenu ul li a.active em.home,
|
||||
.footerMenu ul li a.hover em.home {
|
||||
/* background-image: url(../images/f01-2.png); */
|
||||
}
|
||||
.footerMenu ul li a em.my {
|
||||
/* background-image: url(../images/f02-1.png); */
|
||||
}
|
||||
.footerMenu ul li a.active em.my {
|
||||
/* background-image: url(../images/f02-2.png); */
|
||||
}
|
||||
.footerMenu ul li a em.bbs {
|
||||
/* background-image: url(../images/f03-1.png); */
|
||||
}
|
||||
.footerMenu ul li a.active em.bbs,
|
||||
.footerMenu ul li a.hover em.bbs {
|
||||
/* background-image: url(../images/f03-2.png); */
|
||||
}
|
||||
.footerMenu ul li a em.back {
|
||||
/* background-image: url(../images/f04.png); */
|
||||
}
|
||||
|
||||
.footerMenu ul li a em.act {
|
||||
/* background-image: url(../images/f05-1.png); */
|
||||
}
|
||||
.footerMenu ul li a.active em.act,
|
||||
.footerMenu ul li a.hover em.act {
|
||||
/* background-image: url(../images/f05-2.png); */
|
||||
}
|
||||
.footerMenu ul li a em.buy {
|
||||
/* background-image: url(../images/f06-1.png); */
|
||||
}
|
||||
.footerMenu ul li a.active em.buy,
|
||||
.footerMenu ul li a.hover em.buy {
|
||||
/* background-image: url(../images/f06-2.png); */
|
||||
}
|
||||
|
||||
.footerMenu ul li a p {
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.footerMenu ul li a.active p,
|
||||
.footerMenu ul li a.hover p {
|
||||
/*color:#cf3435;*/
|
||||
color: #fdaf00;
|
||||
opacity: 1;
|
||||
}
|
||||
.footerMenu ul li.voiceBox {
|
||||
}
|
||||
.footerMenu ul li.voiceBox a {
|
||||
padding: 1px;
|
||||
/* background:url(../images/footer_voice.png) no-repeat; */
|
||||
background-size: 38px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.footerMenu.house {
|
||||
height: 59px;
|
||||
}
|
||||
.footerMenu.house .footer_top {
|
||||
height: 10px;
|
||||
background: -webkit-gradient(linear, 0 0, 0 100%, from(#e9f9f8), to(#d8f5f3));
|
||||
opacity: 0.6;
|
||||
}
|
||||
.footerMenu.house ul {
|
||||
background: #fff;
|
||||
border-top: 0px;
|
||||
}
|
||||
.footerMenu.house.wap li {
|
||||
width: 20%;
|
||||
}
|
||||
.footerMenu.house.wap li.phoneBtn {
|
||||
margin-top: -15px;
|
||||
padding-top: 15px;
|
||||
background: white;
|
||||
z-index: 111;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.footerMenu ul li a em.phoneBtn {
|
||||
/* background-image: url(../images/footer_phone.png); */
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.footerMenu ul li a.hover em.phoneBtn {
|
||||
/* background-image: url(../images/footer_phone_active.png); */
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.footerMenu ul li a em.marketBtn {
|
||||
/* background-image: url(../images/footer_market.png); */
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.footerMenu ul li a.hover em.marketBtn {
|
||||
/* background-image: url(../images/footer_market_active.png); */
|
||||
width: 30px;
|
||||
height: 26px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,308 @@
|
||||
@charset "utf-8";
|
||||
body,
|
||||
div,
|
||||
dl,
|
||||
footer,
|
||||
html,
|
||||
img,
|
||||
menu,
|
||||
p,
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
background-color: #fffff6 !important;
|
||||
padding-bottom: 49px;
|
||||
}
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
@-webkit-keyframes pop-hide {
|
||||
0% {
|
||||
-webkit-transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
2% {
|
||||
-webkit-transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
6% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pop {
|
||||
0% {
|
||||
-webkit-transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideup {
|
||||
0% {
|
||||
-webkit-transform: translateY(100%);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-10%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
.text-icon {
|
||||
font-family: base_icon;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-style: normal;
|
||||
}
|
||||
.my-account {
|
||||
color: #333;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
}
|
||||
.account-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.account-bg img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.my-account > img {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.my-account .user-info {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 70px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1.9em;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.my-account .uname {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-top: 0.1em;
|
||||
margin-bottom: 0.2em;
|
||||
text-shadow: 0.07em 0.07em #333;
|
||||
}
|
||||
.my-account .umoney {
|
||||
color: #fff;
|
||||
margin-bottom: 0.06em;
|
||||
text-shadow: 0.05em 0.05em #333;
|
||||
}
|
||||
.my-account .avatar_box {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
z-index: 1;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #ffd44a;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-account .avater {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.phone {
|
||||
width: 105px;
|
||||
float: left;
|
||||
z-index: 100;
|
||||
}
|
||||
.set {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
background-color: #fdaf00;
|
||||
text-align: center;
|
||||
margin-top: -7px;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
.set a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.dl01 {
|
||||
padding: 0 10px 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.titleImg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
margin-top: 15px;
|
||||
float: left;
|
||||
}
|
||||
.dl02 {
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dl02 a .menu {
|
||||
border-bottom: 1px solid #ffe9b7;
|
||||
background: url(../images/right.png) no-repeat right center;
|
||||
background-size: 10px;
|
||||
}
|
||||
.dl02 a .menu div {
|
||||
padding-top: 16px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.dl02 a .menu div.left {
|
||||
float: left;
|
||||
width: 40%;
|
||||
}
|
||||
.dl02 a .menu div.right {
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 45%;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.footerMenu {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 900;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
}
|
||||
.footerMenu ul {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
background-color: #222;
|
||||
border-top: 1px solid #cecece;
|
||||
}
|
||||
.footerMenu ul li {
|
||||
float: left;
|
||||
width: 19%;
|
||||
height: 100%;
|
||||
}
|
||||
.footerMenu.wap li {
|
||||
width: 25%;
|
||||
}
|
||||
.footerMenu ul li a {
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding-top: 2px;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
}
|
||||
.footerMenu ul li a em {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.footerMenu ul li a em.home {
|
||||
background-image: url(../images/f01-1.png);
|
||||
}
|
||||
.footerMenu ul li a.active em.home {
|
||||
background-image: url(../images/f01-2.png);
|
||||
}
|
||||
.footerMenu ul li a em.my {
|
||||
background-image: url(../images/f02-1.png);
|
||||
}
|
||||
.footerMenu ul li a.active em.my {
|
||||
background-image: url(../images/f02-2.png);
|
||||
}
|
||||
.footerMenu ul li a em.back {
|
||||
background-image: url(../images/f04.png);
|
||||
}
|
||||
.footerMenu ul li a em.act {
|
||||
background-image: url(../images/f05-1.png);
|
||||
}
|
||||
.footerMenu ul li a.active em.act {
|
||||
background-image: url(../images/f05-2.png);
|
||||
}
|
||||
.footerMenu ul li a em.buy {
|
||||
background-image: url(../images/f06-1.png);
|
||||
}
|
||||
.footerMenu ul li a.active em.buy {
|
||||
background-image: url(../images/f06-2.png);
|
||||
}
|
||||
.footerMenu ul li a p {
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.footerMenu ul li a.active p {
|
||||
color: #fdaf00;
|
||||
opacity: 1;
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 486 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1018 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 683 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import { vant } from '@/plugins/vant'
|
||||
|
||||
import '@/assets/css/normalize.css'
|
||||
import '@/assets/css/common.less'
|
||||
|
||||
const vue = createApp(App)
|
||||
|
||||
vant(vue)
|
||||
|
||||
vue.use(store).use(router).mount('#app')
|
||||
@ -0,0 +1,23 @@
|
||||
import {
|
||||
Locale , Button , Toast, ShareSheet , NavBar ,
|
||||
Tab, Tabs, Form, Field, CellGroup , Uploader ,
|
||||
Dialog
|
||||
} from 'vant'
|
||||
|
||||
import zhTW from 'vant/es/locale/lang/zh-TW';
|
||||
|
||||
Locale.use('zh-TW', zhTW);
|
||||
|
||||
export function vant(app){
|
||||
app.use(Button)
|
||||
.use(Toast)
|
||||
.use(ShareSheet)
|
||||
.use(NavBar)
|
||||
.use(Tab)
|
||||
.use(Tabs)
|
||||
.use(Form)
|
||||
.use(Field)
|
||||
.use(CellGroup)
|
||||
.use(Uploader)
|
||||
.use(Dialog)
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
// {
|
||||
// path: '/about',
|
||||
// name: 'About',
|
||||
// // route level code-splitting
|
||||
// // this generates a separate chunk (about.[hash].js) for this route
|
||||
// // which is lazy-loaded when the route is visited.
|
||||
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
// }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,12 @@
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,12 @@
|
||||
import liff from "@line/liff"
|
||||
|
||||
|
||||
export function login(){
|
||||
liff.init({
|
||||
liffId: "1656907652-p38ddKzQ"
|
||||
})
|
||||
|
||||
if (!liff.isLoggedIn())
|
||||
liff.login({ redirectUri: window.location.href })
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import { genCard } from "./card/index";
|
||||
|
||||
function cardFactory(option) {
|
||||
return genCard(option);
|
||||
}
|
||||
|
||||
export { cardFactory };
|
||||
@ -0,0 +1,400 @@
|
||||
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": "icon",
|
||||
"url": "https://demo.zltest.com.tw/line/icon02.png",
|
||||
"offsetTop": "3px"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.url}",
|
||||
"color": "#333334",
|
||||
"size": "sm",
|
||||
"weight": "bold"
|
||||
}
|
||||
],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardLink = `
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [
|
||||
{
|
||||
"type": "icon",
|
||||
"url": "https://demo.zltest.com.tw/line/icon02.png",
|
||||
"offsetTop": "3px"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.url}",
|
||||
"color": "#333334",
|
||||
"size": "sm",
|
||||
"weight": "bold",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.url}"
|
||||
}
|
||||
}
|
||||
],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
},
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
vcardLink = "";
|
||||
}
|
||||
|
||||
let vcardAddr;
|
||||
if (vcard.address.trim().length > 0) {
|
||||
vcardAddr = `
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [
|
||||
{
|
||||
"type": "icon",
|
||||
"url": "https://demo.zltest.com.tw/line/icon04.png",
|
||||
"offsetTop": "3px"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.address}",
|
||||
"color": "#333334",
|
||||
"size": "sm",
|
||||
"weight": "bold",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "https://www.google.com.tw/maps/place/${encodeURIComponent(
|
||||
vcard.address
|
||||
)}"
|
||||
},
|
||||
"wrap": true
|
||||
}
|
||||
],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardAddr = "";
|
||||
}
|
||||
|
||||
let vcardTel;
|
||||
|
||||
if (vcard.tel.trim().length > 0) {
|
||||
vcardTel = `
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [
|
||||
{
|
||||
"type": "icon",
|
||||
"url": "https://demo.zltest.com.tw/line/icon01.png",
|
||||
"offsetTop": "3px"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.tel}",
|
||||
"color": "#333334",
|
||||
"size": "sm",
|
||||
"weight": "bold",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "tel:${vcard.tel}"
|
||||
}
|
||||
}
|
||||
],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardTel = "";
|
||||
}
|
||||
|
||||
let vcardPhone;
|
||||
|
||||
if (vcard.phone.trim().length > 0) {
|
||||
vcardPhone = `
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [
|
||||
{
|
||||
"type": "icon",
|
||||
"url": "https://demo.zltest.com.tw/line/icon01.png",
|
||||
"offsetTop": "3px"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.phone}",
|
||||
"color": "#333334",
|
||||
"size": "sm",
|
||||
"weight": "bold",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "tel:${vcard.phone}"
|
||||
}
|
||||
}
|
||||
],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardPhone = "";
|
||||
}
|
||||
|
||||
let vcardAvatar;
|
||||
|
||||
if (vcard.avatar.trim().length > 0) {
|
||||
vcardAvatar = `
|
||||
{
|
||||
"type": "image",
|
||||
"url": "${vcard.avatar}",
|
||||
"size": "xs",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.nfcurl}"
|
||||
}
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardAvatar = "";
|
||||
}
|
||||
|
||||
let vcardEmail;
|
||||
|
||||
if (vcard.email.trim().length > 0) {
|
||||
vcardEmail = `
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [
|
||||
{
|
||||
"type": "icon",
|
||||
"url": "https://demo.zltest.com.tw/line/icon03.png",
|
||||
"offsetTop": "3px"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.email}",
|
||||
"color": "#333334",
|
||||
"size": "sm",
|
||||
"weight": "bold",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "mailto:${vcard.email}"
|
||||
}
|
||||
}
|
||||
],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
},
|
||||
`;
|
||||
} else {
|
||||
vcardEmail = "";
|
||||
}
|
||||
|
||||
// 名片發送
|
||||
|
||||
let card = `
|
||||
{
|
||||
"altText": "UTel電子名片",
|
||||
"type": "flex",
|
||||
"contents":
|
||||
{
|
||||
"type": "bubble",
|
||||
"size": "giga",
|
||||
"body": {
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "image",
|
||||
"url": "https://demo.zltest.com.tw/line/bg02.jpg",
|
||||
"size": "full",
|
||||
"aspectMode": "cover",
|
||||
"aspectRatio": "4:3",
|
||||
"gravity": "top",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.nfcurl}"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
${vcardAvatar}
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.company}",
|
||||
"color": "#ffffff",
|
||||
"size": "md",
|
||||
"weight": "bold",
|
||||
"wrap": true,
|
||||
"align": "center",
|
||||
"margin": "sm",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.nfcurl}"
|
||||
}
|
||||
}
|
||||
],
|
||||
"position": "absolute",
|
||||
"offsetTop": "13%",
|
||||
"offsetStart": "3%",
|
||||
"width": "26%"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "加入好友",
|
||||
"align": "center",
|
||||
"color": "#ffffff",
|
||||
"weight": "bold",
|
||||
"margin": "xs"
|
||||
}
|
||||
],
|
||||
"backgroundColor": "#06c755",
|
||||
"width": "100%",
|
||||
"cornerRadius": "5px",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "https://line.naver.jp/ti/p/~${vcard.line}"
|
||||
},
|
||||
"paddingTop": "5px",
|
||||
"paddingBottom": "5px"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "分享名片",
|
||||
"align": "center",
|
||||
"color": "#ffffff",
|
||||
"weight": "bold",
|
||||
"margin": "xs"
|
||||
}
|
||||
],
|
||||
"backgroundColor": "#ffcc5b",
|
||||
"width": "100%",
|
||||
"cornerRadius": "5px",
|
||||
"margin": "md",
|
||||
"paddingTop": "5px",
|
||||
"paddingBottom": "5px",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${process.env.VUE_APP_SEND_URL}/?userid=${vcard.user_id}&cardid=1"
|
||||
}
|
||||
}
|
||||
],
|
||||
"position": "absolute",
|
||||
"offsetStart": "4%",
|
||||
"width": "25%",
|
||||
"offsetBottom": "5%"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.title}",
|
||||
"color": "#333334",
|
||||
"size": "md",
|
||||
"weight": "bold"
|
||||
}
|
||||
],
|
||||
"spacing": "lg"
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "vertical",
|
||||
"contents": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "${vcard.name}",
|
||||
"size": "xxl",
|
||||
"color": "#333334",
|
||||
"weight": "bold",
|
||||
"action": {
|
||||
"type": "uri",
|
||||
"label": "action",
|
||||
"uri": "${vcard.nfcurl}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [],
|
||||
"backgroundColor": "#d5602d",
|
||||
"height": "3px",
|
||||
"margin": "lg"
|
||||
},
|
||||
${vcardPhone}
|
||||
${vcardTel}
|
||||
${vcardLink}
|
||||
${vcardEmail}
|
||||
${vcardAddr}
|
||||
{
|
||||
"type": "box",
|
||||
"layout": "baseline",
|
||||
"contents": [],
|
||||
"spacing": "lg",
|
||||
"margin": "sm"
|
||||
}
|
||||
],
|
||||
"position": "absolute",
|
||||
"offsetTop": "12%",
|
||||
"offsetStart": "35%",
|
||||
"offsetEnd": "5%"
|
||||
}
|
||||
],
|
||||
"paddingAll": "0px"
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
return { card };
|
||||
}
|
||||
|
||||
export { genCard };
|
||||
@ -0,0 +1,339 @@
|
||||
function genCard(vcard) {
|
||||
let vcardLink;
|
||||
if (vcard.url.trim().length > 0) {
|
||||
if (vcard.nc_func.indexOf("nourl") !== -1) {
|
||||
vcardLink = {
|
||||
type: "text",
|
||||
text: vcard.url,
|
||||
color: "#FFFFFF",
|
||||
align: "end",
|
||||
};
|
||||
} else {
|
||||
vcardLink = {
|
||||
type: "text",
|
||||
text: vcard.url,
|
||||
color: "#FFFFFF",
|
||||
align: "end",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.url,
|
||||
},
|
||||
};
|
||||
}
|
||||
} else {
|
||||
vcardLink = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#FFFFFF",
|
||||
align: "end",
|
||||
};
|
||||
}
|
||||
|
||||
let vcardAddr;
|
||||
if (vcard.address.trim().length > 0) {
|
||||
vcardAddr = {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.address.substr(0, 3),
|
||||
size: "sm",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text:
|
||||
vcard.address.substr(3).length > 0 ? vcard.address.substr(3) : " ",
|
||||
size: "sm",
|
||||
wrap: true,
|
||||
maxLines: 2,
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "30%",
|
||||
offsetStart: "25%",
|
||||
width: "40%",
|
||||
height: "60px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: `https://www.google.com.tw/maps/place/${encodeURIComponent(
|
||||
vcard.address
|
||||
)}`,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
vcardAddr = {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
size: "sm",
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "30%",
|
||||
offsetStart: "25%",
|
||||
width: "40%",
|
||||
height: "60px",
|
||||
};
|
||||
}
|
||||
|
||||
if (vcard.title.trim().length == 0) {
|
||||
vcard.title = " ";
|
||||
}
|
||||
|
||||
let vcardTel;
|
||||
|
||||
if (vcard.tel.trim().length == 0) {
|
||||
vcardTel = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
align: "end",
|
||||
};
|
||||
} else {
|
||||
vcardTel = {
|
||||
type: "text",
|
||||
text: vcard.tel,
|
||||
align: "end",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: "tel:" + vcard.tel,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let vcardPhone;
|
||||
|
||||
if (vcard.phone.trim().length == 0) {
|
||||
vcardPhone = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
align: "end",
|
||||
};
|
||||
} else {
|
||||
vcardPhone = {
|
||||
type: "text",
|
||||
text: vcard.phone,
|
||||
align: "end",
|
||||
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,
|
||||
},
|
||||
aspectMode: "cover",
|
||||
size: "full",
|
||||
};
|
||||
} else {
|
||||
vcardAvatar = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
size: "xs",
|
||||
};
|
||||
}
|
||||
|
||||
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",
|
||||
};
|
||||
} else {
|
||||
vcardEmail = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
};
|
||||
}
|
||||
|
||||
let card = {
|
||||
altText: "UTel電子名片",
|
||||
type: "flex",
|
||||
contents: {
|
||||
type: "bubble",
|
||||
size: "giga",
|
||||
body: {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "image",
|
||||
url: "https://utel.u168.vip/images/tpl02_bg.png",
|
||||
size: "full",
|
||||
aspectMode: "cover",
|
||||
aspectRatio: "4:3",
|
||||
gravity: "top",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [vcardAvatar],
|
||||
position: "absolute",
|
||||
offsetTop: "13%",
|
||||
offsetStart: "3%",
|
||||
width: "75px",
|
||||
height: "75px",
|
||||
cornerRadius: "100px",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: "加入好友",
|
||||
align: "center",
|
||||
color: "#ffffff",
|
||||
weight: "bold",
|
||||
margin: "xs",
|
||||
size: "xs",
|
||||
},
|
||||
],
|
||||
backgroundColor: "#ffcc5b",
|
||||
width: "100%",
|
||||
cornerRadius: "5px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: "https://line.naver.jp/ti/p/~" + vcard.line,
|
||||
},
|
||||
paddingTop: "5px",
|
||||
paddingBottom: "5px",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: "分享名片",
|
||||
align: "center",
|
||||
color: "#ffffff",
|
||||
weight: "bold",
|
||||
margin: "xs",
|
||||
size: "xs",
|
||||
},
|
||||
],
|
||||
backgroundColor: "#ffcc5b",
|
||||
width: "100%",
|
||||
cornerRadius: "5px",
|
||||
margin: "md",
|
||||
paddingTop: "5px",
|
||||
paddingBottom: "5px",
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetStart: "10%",
|
||||
width: "20%",
|
||||
offsetBottom: "16%",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: `${process.env.VUE_APP_SEND_URL}/?userid=${vcard.user_id}&cardid=1`,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.name,
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "13%",
|
||||
offsetStart: "25%",
|
||||
width: "90px",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.title,
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "13%",
|
||||
offsetStart: "51%",
|
||||
width: "50%",
|
||||
},
|
||||
vcardAddr,
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [vcardPhone, vcardTel],
|
||||
position: "absolute",
|
||||
offsetTop: "30%",
|
||||
offsetEnd: "5%",
|
||||
width: "30%",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.company,
|
||||
size: "lg",
|
||||
color: "#EFEFEF",
|
||||
align: "end",
|
||||
weight: "bold",
|
||||
},
|
||||
vcardLink,
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "65%",
|
||||
offsetEnd: "5%",
|
||||
width: "60%",
|
||||
},
|
||||
],
|
||||
paddingAll: "0px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.nfcurl,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
return { card: JSON.stringify(card) };
|
||||
}
|
||||
|
||||
export { genCard };
|
||||
@ -0,0 +1,368 @@
|
||||
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",
|
||||
};
|
||||
} 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",
|
||||
};
|
||||
}
|
||||
} else {
|
||||
vcardLink = {
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
}
|
||||
|
||||
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(
|
||||
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 = " ";
|
||||
}
|
||||
|
||||
if (vcard.tel.trim().length == 0) {
|
||||
vcard.tel = " ";
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
vcardAvatar = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
size: "xs",
|
||||
};
|
||||
}
|
||||
|
||||
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",
|
||||
};
|
||||
} else {
|
||||
vcardEmail = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
};
|
||||
}
|
||||
|
||||
let card = {
|
||||
altText: "UTel電子名片",
|
||||
type: "flex",
|
||||
contents: {
|
||||
type: "bubble",
|
||||
size: "giga",
|
||||
body: {
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "image",
|
||||
url: "https://utel.u168.vip/images/jcibg.png",
|
||||
size: "full",
|
||||
aspectMode: "fit",
|
||||
aspectRatio: "4:3",
|
||||
gravity: "top",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
vcardAvatar,
|
||||
{
|
||||
type: "text",
|
||||
text: "大同國際\n青年商會",
|
||||
wrap: true,
|
||||
align: "center",
|
||||
margin: "md",
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "13%",
|
||||
offsetStart: "2%",
|
||||
width: "21%",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: "加入好友",
|
||||
align: "center",
|
||||
color: "#ffffff",
|
||||
weight: "bold",
|
||||
margin: "xs",
|
||||
},
|
||||
],
|
||||
backgroundColor: "#06c755",
|
||||
width: "100%",
|
||||
cornerRadius: "5px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: "https://line.naver.jp/ti/p/~" + vcard.line,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: "分享名片",
|
||||
align: "center",
|
||||
color: "#ffffff",
|
||||
weight: "bold",
|
||||
margin: "xs",
|
||||
},
|
||||
],
|
||||
backgroundColor: "#ffcc5b",
|
||||
width: "100%",
|
||||
cornerRadius: "5px",
|
||||
margin: "md",
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetStart: "2%",
|
||||
width: "20%",
|
||||
offsetBottom: "8%",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: `${process.env.VUE_APP_SEND_URL}/?userid=${vcard.user_id}&cardid=1`,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.name,
|
||||
size: "lg",
|
||||
color: "#4EA2D9",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.title,
|
||||
color: "#333334",
|
||||
size: "md",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "separator",
|
||||
},
|
||||
],
|
||||
height: "20px",
|
||||
},
|
||||
{
|
||||
type: "box",
|
||||
layout: "vertical",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.company,
|
||||
color: "#4EA2D9",
|
||||
size: "md",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
},
|
||||
vcardAddr,
|
||||
{
|
||||
type: "box",
|
||||
layout: "horizontal",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.tel,
|
||||
align: "end",
|
||||
size: "sm",
|
||||
color: "#333334",
|
||||
weight: "bold",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: vcard.phone,
|
||||
size: "sm",
|
||||
align: "end",
|
||||
weight: "bold",
|
||||
},
|
||||
],
|
||||
},
|
||||
vcardLink,
|
||||
{
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [vcardEmail],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
offsetTop: "30%",
|
||||
offsetStart: "35%",
|
||||
offsetEnd: "5%",
|
||||
},
|
||||
],
|
||||
paddingAll: "0px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.nfcurl,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
return { card: JSON.stringify(card) };
|
||||
}
|
||||
|
||||
export { genCard };
|
||||
@ -0,0 +1,344 @@
|
||||
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",
|
||||
};
|
||||
} 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",
|
||||
};
|
||||
}
|
||||
} else {
|
||||
vcardLink = {
|
||||
type: "box",
|
||||
layout: "baseline",
|
||||
contents: [
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
},
|
||||
],
|
||||
spacing: "lg",
|
||||
margin: "xs",
|
||||
};
|
||||
}
|
||||
|
||||
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(
|
||||
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 = " ";
|
||||
}
|
||||
|
||||
if (vcard.tel.trim().length == 0) {
|
||||
vcard.tel = " ";
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
};
|
||||
} else {
|
||||
vcardAvatar = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
size: "xs",
|
||||
};
|
||||
}
|
||||
|
||||
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",
|
||||
};
|
||||
} else {
|
||||
vcardEmail = {
|
||||
type: "text",
|
||||
text: " ",
|
||||
color: "#333334",
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
align: "end",
|
||||
};
|
||||
}
|
||||
|
||||
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: "https://utel.u168.vip/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 || vcard.nfcurl,
|
||||
},
|
||||
},
|
||||
{
|
||||
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: "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,
|
||||
},
|
||||
},
|
||||
],
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
offsetBottom: "5%",
|
||||
},
|
||||
],
|
||||
paddingAll: "0px",
|
||||
action: {
|
||||
type: "uri",
|
||||
label: "action",
|
||||
uri: vcard.nfcurl,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
return { card: JSON.stringify(card) };
|
||||
}
|
||||
|
||||
export { genCard };
|
||||