commit
e506c86964
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
NODE_ENV = development
|
||||||
|
|
||||||
|
VUE_ENV = development
|
||||||
|
|
||||||
|
VUE_APP_LINE_LIFF_ID = 1657876696-564NGMxy
|
||||||
|
|
||||||
|
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,13 @@
|
|||||||
|
NODE_ENV = production
|
||||||
|
|
||||||
|
VUE_ENV = production
|
||||||
|
|
||||||
|
VUE_APP_LINE_LIFF_ID = 1656969446-mg36Maav
|
||||||
|
|
||||||
|
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,13 @@
|
|||||||
|
NODE_ENV = production
|
||||||
|
|
||||||
|
VUE_ENV = production
|
||||||
|
|
||||||
|
VUE_APP_LINE_LIFF_ID = 1657876696-564NGMxy
|
||||||
|
|
||||||
|
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,13 @@
|
|||||||
|
NODE_ENV = production
|
||||||
|
|
||||||
|
VUE_ENV = stage
|
||||||
|
|
||||||
|
VUE_APP_LINE_LIFF_ID = 1656948609-BYr8Nynp
|
||||||
|
|
||||||
|
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,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 @@
|
|||||||
|
# send
|
||||||
|
|
||||||
|
## 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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "send",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"build:dev": "vue-cli-service build --mode development",
|
||||||
|
"build:sta": "vue-cli-service build --mode stage",
|
||||||
|
"build:slash": "vue-cli-service build --mode slash"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@line/liff": "^2.19.0",
|
||||||
|
"animate.css": "^4.1.1",
|
||||||
|
"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.5",
|
||||||
|
"less": "^3.0.4",
|
||||||
|
"less-loader": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,32 @@
|
|||||||
|
<!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=0" />
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
|
||||||
|
<!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3193091_pjav109cqya.css"> -->
|
||||||
|
<!-- <link rel="stylesheet" href="./css/flex2html.css"> -->
|
||||||
|
<title>
|
||||||
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
|
</title>
|
||||||
|
<style>
|
||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
<!-- <script src="./js/flex2html.nolink.js"></script> -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,780 @@
|
|||||||
|
function flex2html(element, json) {
|
||||||
|
let carousel = carousel_struc()
|
||||||
|
let result = ''
|
||||||
|
|
||||||
|
if(json['type'] === 'flex') {
|
||||||
|
json = json['contents']
|
||||||
|
if(json['type'] === 'bubble') {
|
||||||
|
result = bubble_object(json)
|
||||||
|
carousel = carousel.replace('<!-- inner -->', result)
|
||||||
|
} else if(json['type'] === 'carousel') {
|
||||||
|
json['contents'].forEach((obj, index) => {
|
||||||
|
let result = bubble_object(obj)
|
||||||
|
result = result.replace('<!-- content -->', '')
|
||||||
|
result = result.replace('<!-- inner -->', '')
|
||||||
|
carousel = carousel.replace('<!-- inner -->', result + '<!-- inner -->')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(element).innerHTML += carousel
|
||||||
|
return carousel
|
||||||
|
}
|
||||||
|
|
||||||
|
function bubble_object(json) {
|
||||||
|
let { hero, header, body, footer } = json
|
||||||
|
let hero_object = hero_struc(json)
|
||||||
|
let header_object = header_struc(json)
|
||||||
|
let body_object = body_struc(json)
|
||||||
|
let footer_object = footer_struc(json)
|
||||||
|
let bubble = bubble_struc(json)
|
||||||
|
|
||||||
|
let box = ''
|
||||||
|
for(let key in hero){
|
||||||
|
if(hero.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && hero[key] === 'box') {
|
||||||
|
box = box_object(hero)
|
||||||
|
let box_inner = box_recursive(box, hero['contents'])
|
||||||
|
box = box_inner
|
||||||
|
} else {
|
||||||
|
box = convert_object(hero)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
hero_object = hero_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
box = ''
|
||||||
|
for(let key in header){
|
||||||
|
if(header.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && header[key] === 'box') {
|
||||||
|
box = box_object(header)
|
||||||
|
let box_inner = box_recursive(box, header['contents'])
|
||||||
|
box = box_inner
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header_object = header_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
box = ''
|
||||||
|
for(let key in body){
|
||||||
|
if(body.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && body[key] === 'box') {
|
||||||
|
box = box_object(body)
|
||||||
|
let box_inner = box_recursive(box, body['contents'])
|
||||||
|
box = box_inner
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body_object = body_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
box = ''
|
||||||
|
for(let key in footer){
|
||||||
|
if(footer.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && footer[key] === 'box') {
|
||||||
|
box = box_object(footer)
|
||||||
|
let box_inner = box_recursive(box, footer['contents'])
|
||||||
|
box = box_inner
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
footer_object = footer_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
|
||||||
|
bubble = bubble.replace('<!-- hero -->', hero_object)
|
||||||
|
bubble = bubble.replace('<!-- header -->', header_object)
|
||||||
|
bubble = bubble.replace('<!-- body -->', body_object)
|
||||||
|
bubble = bubble.replace('<!-- footer -->', footer_object)
|
||||||
|
|
||||||
|
return bubble
|
||||||
|
}
|
||||||
|
function box_recursive(parent_box, json) {
|
||||||
|
let result = []
|
||||||
|
json.forEach((obj, index) => {
|
||||||
|
let temp
|
||||||
|
if(obj['type'] === 'box') {
|
||||||
|
let temp2 = box_object(obj)
|
||||||
|
temp = box_recursive(temp2, obj['contents'])
|
||||||
|
} else if(obj['type'] === 'text' && obj['contents'] && obj['contents'].length > 0 ) {
|
||||||
|
let temp2 = convert_object(obj)
|
||||||
|
temp = box_recursive(temp2, obj['contents'])
|
||||||
|
} else {
|
||||||
|
temp = convert_object(obj)
|
||||||
|
}
|
||||||
|
result[index] = temp
|
||||||
|
})
|
||||||
|
json.forEach((obj, index) => {
|
||||||
|
result[index] = result[index].replace('<!-- content -->', '')
|
||||||
|
parent_box = parent_box.replace('<!-- content -->', result[index] + '<!-- content -->')
|
||||||
|
})
|
||||||
|
|
||||||
|
return parent_box
|
||||||
|
}
|
||||||
|
|
||||||
|
function convert_object(json) {
|
||||||
|
switch(json['type']) {
|
||||||
|
case 'image':
|
||||||
|
object = image_object(json)
|
||||||
|
break;
|
||||||
|
case 'icon':
|
||||||
|
object = icon_object(json)
|
||||||
|
break;
|
||||||
|
case 'text':
|
||||||
|
object = text_object(json)
|
||||||
|
break;
|
||||||
|
case 'span':
|
||||||
|
object = span_object(json)
|
||||||
|
break;
|
||||||
|
case 'button':
|
||||||
|
object = button_object(json)
|
||||||
|
break;
|
||||||
|
case 'filler':
|
||||||
|
object = filler_object(json)
|
||||||
|
break;
|
||||||
|
case 'spacer':
|
||||||
|
object = spacer_object(json)
|
||||||
|
break;
|
||||||
|
case 'separator':
|
||||||
|
object = separator_object(json)
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
object = null
|
||||||
|
}
|
||||||
|
return object
|
||||||
|
}
|
||||||
|
|
||||||
|
function box_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let {layout, position, flex, spacing, margin, width, height, backgroundColor, borderColor, borderWidth, cornerRadius, justifyContent, alignItems, offsetTop, offsetBottom, offsetStart, offsetEnd, paddingAll, paddingTop, paddingBottom, paddingStart, paddingEnd, background} = json
|
||||||
|
if(layout === 'baseline') {
|
||||||
|
layout1 = 'hr'
|
||||||
|
layout2 = 'bl'
|
||||||
|
} else if(layout === 'horizontal') {
|
||||||
|
layout1 = 'hr'
|
||||||
|
layout2 = ''
|
||||||
|
} else if(layout === 'vertical') {
|
||||||
|
layout1 = 'vr'
|
||||||
|
layout2 = ''
|
||||||
|
}
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(spacing && spacing.indexOf("px") >= 0) {
|
||||||
|
spc = ''
|
||||||
|
} else {
|
||||||
|
spc = (spacing) ? 'spc' + upperalldigit(spacing) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
|
||||||
|
style += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
if(width && width !== '') {
|
||||||
|
style += `width:${width}; max-width:${width};`
|
||||||
|
}
|
||||||
|
if(height && height !== '') {
|
||||||
|
style += `height:${height};`
|
||||||
|
}
|
||||||
|
if(backgroundColor) {
|
||||||
|
style += `background-color:${backgroundColor} !important;`
|
||||||
|
}
|
||||||
|
if(borderColor) {
|
||||||
|
style += `border-color:${borderColor} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
if(borderWidth && (borderWidth.indexOf("px") >= 0 || borderWidth.indexOf("%") >= 0)) {
|
||||||
|
style += `border-width:${borderWidth};`
|
||||||
|
ExBdr = ''
|
||||||
|
} else {
|
||||||
|
switch(borderWidth) {
|
||||||
|
case 'none':
|
||||||
|
ExBdr = 'ExBdrWdtNone'
|
||||||
|
break;
|
||||||
|
case 'light':
|
||||||
|
ExBdr = 'ExBdrWdtLgh'
|
||||||
|
break;
|
||||||
|
case 'normal':
|
||||||
|
ExBdr = 'ExBdrWdtNml'
|
||||||
|
break;
|
||||||
|
case 'medium':
|
||||||
|
ExBdr = 'ExBdrWdtMdm'
|
||||||
|
break;
|
||||||
|
case 'semi-bold':
|
||||||
|
ExBdr = 'ExBdrWdtSbd'
|
||||||
|
break;
|
||||||
|
case 'bold':
|
||||||
|
ExBdr = 'ExBdrWdtBld'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ExBdr = ''
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(cornerRadius && (cornerRadius.indexOf("px") >= 0 || cornerRadius.indexOf("%") >= 0)) {
|
||||||
|
style += `border-radius:${cornerRadius};`
|
||||||
|
ExBdrRad = ''
|
||||||
|
} else {
|
||||||
|
ExBdrRad = (cornerRadius) ? 'ExBdrRad' + upperalldigit(cornerRadius) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
jfc = ''
|
||||||
|
if(justifyContent && justifyContent !== '') {
|
||||||
|
switch(justifyContent) {
|
||||||
|
case 'center':
|
||||||
|
jfc = 'itms-jfcC'
|
||||||
|
break;
|
||||||
|
case 'flex-start':
|
||||||
|
jfc = 'itms-jfcS'
|
||||||
|
break;
|
||||||
|
case 'flex-end':
|
||||||
|
jfc = 'itms-jfcE'
|
||||||
|
break;
|
||||||
|
case 'space-between':
|
||||||
|
jfc = 'itms-jfcSB'
|
||||||
|
break;
|
||||||
|
case 'space-around':
|
||||||
|
jfc = 'itms-jfcSA'
|
||||||
|
break;
|
||||||
|
case 'space-evenly':
|
||||||
|
jfc = 'itms-jfcSE'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
jfc = ''
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
alg = ''
|
||||||
|
if(alignItems && alignItems !== '') {
|
||||||
|
switch(alignItems) {
|
||||||
|
case 'center':
|
||||||
|
alg = 'itms-algC'
|
||||||
|
break;
|
||||||
|
case 'flex-start':
|
||||||
|
alg = 'itms-algS'
|
||||||
|
break;
|
||||||
|
case 'flex-end':
|
||||||
|
alg = 'itms-algE'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
alg = ''
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingAll && (paddingAll.indexOf("px") >= 0 || paddingAll.indexOf("%") >= 0)) {
|
||||||
|
style += `padding:${paddingAll};`
|
||||||
|
ExPadA = ''
|
||||||
|
} else {
|
||||||
|
ExPadA = (paddingAll) ? 'ExPadA' + upperalldigit(paddingAll) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingTop && (paddingTop.indexOf("px") >= 0 ||paddingTop.indexOf("%") >= 0)) {
|
||||||
|
style += `padding-top:${paddingTop};`
|
||||||
|
ExPadT = ''
|
||||||
|
} else {
|
||||||
|
ExPadT = (paddingTop) ? 'ExPadT' + upperalldigit(paddingTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingBottom && (paddingBottom.indexOf("px") >= 0 || paddingBottom.indexOf("%")>=0)) {
|
||||||
|
style += `padding-bottom:${paddingBottom};`
|
||||||
|
ExPadB = ''
|
||||||
|
} else {
|
||||||
|
ExPadB = (paddingBottom) ? 'ExPadB' + upperalldigit(paddingBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingStart && (paddingStart.indexOf("px") >= 0 || paddingStart.indexOf("%") >= 0)) {
|
||||||
|
style += `padding-left:${paddingStart};`
|
||||||
|
ExPadL = ''
|
||||||
|
} else {
|
||||||
|
ExPadL = (paddingStart) ? 'ExPadL' + upperalldigit(paddingStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingEnd && (paddingEnd.indexOf("px") >= 0 || paddingEnd.indexOf("%") >= 0)) {
|
||||||
|
style += `padding-right:${paddingEnd};`
|
||||||
|
ExPadR = ''
|
||||||
|
} else {
|
||||||
|
ExPadR = (paddingEnd) ? 'ExPadR' + upperalldigit(paddingEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(background && background.type === 'linearGradient') {
|
||||||
|
centerPosition = (background.centerPosition) ? background.centerPosition : '50%'
|
||||||
|
if(background.centerColor) {
|
||||||
|
style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.centerColor} ${centerPosition}, ${background.endColor} 100%);`
|
||||||
|
} else {
|
||||||
|
style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.endColor} 100%);`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="MdBx ${layout1} ${layout2} ${fl} ${exabs} ${exmgn} ${spc} ${ExBdr} ${ExBdrRad} ${jfc} ${alg} ${ext} ${exb} ${exl} ${exr} ${ExPadA} ${ExPadT} ${ExPadB} ${ExPadL} ${ExPadR}" style="${style}"><!-- content --></div>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function button_object(json) {
|
||||||
|
style2 = ''
|
||||||
|
style3 = ''
|
||||||
|
|
||||||
|
let {flex, margin, position, height, style, color, gravity, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd, action} = json
|
||||||
|
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
||||||
|
style2 += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
height = (!height || height === '' || height === 'md') ? '' : 'Ex' + upperalldigit(height)
|
||||||
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
||||||
|
|
||||||
|
ExBtn = 'ExBtnL'
|
||||||
|
if(style && style !== '') {
|
||||||
|
switch(style) {
|
||||||
|
case 'link':
|
||||||
|
ExBtn = 'ExBtnL'
|
||||||
|
break;
|
||||||
|
case 'primary':
|
||||||
|
ExBtn = 'ExBtn1'
|
||||||
|
break;
|
||||||
|
case 'secondary':
|
||||||
|
ExBtn = 'ExBtn2'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ExBtn = 'ExBtnL'
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(color) {
|
||||||
|
style3 += `background-color:${color} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style2 += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style2 += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style2 += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style2 += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
action = (!action) ? {'type':'none'} : action
|
||||||
|
if(action.type === 'uri') {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="${action.uri}" target="_blank" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
} else if(action.type === 'message') {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a onclick="alert('message: ${action.text}')" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
} else if(action.type === 'postback') {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a onclick="alert('postback data: ${action.data}')" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
} else {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function filler_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let {flex} = json
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="mdBxFiller ${fl}" style="${style}" ></div>`
|
||||||
|
}
|
||||||
|
function icon_object(json) {
|
||||||
|
let style2 = ''
|
||||||
|
let {size, aspectRatio, url, position, margin, offsetTop, offsetBottom, offsetStart, offsetEnd} = json
|
||||||
|
let styleimg = `background-image:url('${url}');`
|
||||||
|
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
style2 += `font-size:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!aspectRatio || aspectRatio === '') {
|
||||||
|
styleimg += `width:1em;`
|
||||||
|
} else {
|
||||||
|
ratio = ratio[0]/ratio[1]
|
||||||
|
styleimg += `width:${ratio}em;`
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0 ||margin.indexOf("%") >= 0)) {
|
||||||
|
style2 += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0||offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style2 += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style2 += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style2 += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style2 += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="MdIco fl0 ${size} ${exabs} ${exmgn} ${ext} ${exb} ${exl} ${exr}" style="${style2}" ><div><span style="${styleimg}"></span></div></div>`
|
||||||
|
}
|
||||||
|
function image_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let style2 = ''
|
||||||
|
let {aspectMode, size, aspectRatio, url, position, flex, margin, align, gravity, backgroundColor, offsetTop, offsetBottom, offsetStart, offsetEnd, action} = json
|
||||||
|
let styleimg = `background-image:url('${url}');`
|
||||||
|
if(backgroundColor) {
|
||||||
|
styleimg += `background-color:${backgroundColor} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
aspectMode = (!aspectMode || aspectMode === '') ? 'fit' : aspectMode
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
aspectMode = upperalldigit(aspectMode)
|
||||||
|
if(size.indexOf("px") >= 0||size.indexOf("%") >= 0) {
|
||||||
|
style2 += `width:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!aspectRatio || aspectRatio === '') {
|
||||||
|
ratio = '100'
|
||||||
|
} else {
|
||||||
|
ratio = aspectRatio.split(':')
|
||||||
|
ratio = ratio[1]*100/ratio[0]
|
||||||
|
}
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
||||||
|
style += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
alg = (align === 'start' || align === 'end') ? 'alg' + upper1digit(align) : '';
|
||||||
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
||||||
|
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0||offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0||offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
action = (!action) ? {'type':'none'} : action
|
||||||
|
if(action.type === 'uri') {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a href="${action.uri}" target="_blank" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
} else if(action.type === 'message') {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a onclick="alert('message: ${action.text}')" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
} else if(action.type === 'postback') {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a onclick="alert('postback data: ${action.data}')" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
} else {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
function separator_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let {margin, color} = json
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
||||||
|
style += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
if(color) {
|
||||||
|
style += `border-color:${color} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="fl0 MdSep ${exmgn}" style="${style}" ></div>`
|
||||||
|
}
|
||||||
|
function spacer_object(json) {
|
||||||
|
let {size} = json
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'spc' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
return `<div class="mdBxSpacer ${size} fl0" ></div>`
|
||||||
|
}
|
||||||
|
function span_object(json) {
|
||||||
|
|
||||||
|
let style2 = ''
|
||||||
|
let {text, size, color, weight, style, decoration} = json
|
||||||
|
|
||||||
|
if(size && size !== '') {
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
style2 += `font-size:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
size = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(color && color!=='') {
|
||||||
|
style2 += `color:${color};`
|
||||||
|
}
|
||||||
|
ExWB = (weight === 'bold') ? 'ExWB' : ''
|
||||||
|
ExFntSty = (style === 'normal') ? 'ExFntStyNml' : (style === 'italic') ? 'ExFntStyIt' : ''
|
||||||
|
ExTxtDec = (decoration === 'line-through') ? 'ExTxtDecLt' : (decoration === 'underline') ? 'ExTxtDecUl' : (decoration === 'none') ? 'ExTxtDecNone' : ''
|
||||||
|
|
||||||
|
return `<span class="MdSpn ${ExWB} ${size} ${ExFntSty} ${ExTxtDec}" style="${style2}" >${text}</span>`
|
||||||
|
}
|
||||||
|
function carousel_struc() {
|
||||||
|
return `<div class="LySlider"><div class="lyInner"><!-- inner --></div></div><br>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function bubble_struc(json) {
|
||||||
|
let {size, direction, action} = json
|
||||||
|
size = (!size || size === '') ? 'medium' : size
|
||||||
|
direction = (!direction || direction == '') ? 'ltr' : direction
|
||||||
|
size = upper2digit(size)
|
||||||
|
|
||||||
|
return `<div class="lyItem Ly${size}"><div class="T1 fx${direction.toUpperCase()}" dir="${direction}"><!-- hero --><!-- header --><!-- body --><!-- footer --></div></div>`
|
||||||
|
}
|
||||||
|
function hero_struc(json) {
|
||||||
|
let {styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { hero } = styles
|
||||||
|
backgroundColor = (hero && hero.backgroundColor) ? `background-color:${hero.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="t1Hero" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function header_struc(json) {
|
||||||
|
let {styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { header } = styles
|
||||||
|
backgroundColor = (header && header.backgroundColor) ? `background-color:${header.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="t1Header" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function body_struc(json) {
|
||||||
|
let {footer, styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { body } = styles
|
||||||
|
backgroundColor = (body && body.backgroundColor) ? `background-color:${body.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
let ExHasFooter = (footer) ? 'ExHasFooter' : ''
|
||||||
|
return `<div class="t1Body ${ExHasFooter}" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function footer_struc(json) {
|
||||||
|
let {styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { footer } = styles
|
||||||
|
backgroundColor = (footer && footer.backgroundColor) ? `background-color:${footer.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="t1Footer" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function text_object(json) {
|
||||||
|
|
||||||
|
let style2 = ''
|
||||||
|
let {flex, margin, size, position, align, gravity, text, color, weight, style, decoration, wrap, maxLines, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd} = json
|
||||||
|
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
|
||||||
|
style2 += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnL' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
alg = (align === 'start' || align === 'end' || align === 'center') ? 'ExAlg' + upper1digit(align) : '';
|
||||||
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
style2 += `font-size:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(color && color!=='') {
|
||||||
|
style2 += `color:${color};`
|
||||||
|
}
|
||||||
|
ExWB = (weight === 'bold') ? 'ExWB' : ''
|
||||||
|
ExFntSty = (style === 'normal') ? 'ExFntStyNml' : (style === 'italic') ? 'ExFntStyIt' : ''
|
||||||
|
ExTxtDec = (decoration === 'line-through') ? 'ExTxtDecLt' : (decoration === 'underline') ? 'ExTxtDecUl' : (decoration === 'none') ? 'ExTxtDecNone' : ''
|
||||||
|
ExWrap = (wrap === true) ? 'ExWrap' : ''
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style2 += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style2 += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && offsetStart.indexOf("px") >= 0) {
|
||||||
|
style2 += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style2 += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
text = (!text) ? '' : text
|
||||||
|
return `<div class="MdTxt ${fl} ${exabs} ${exmgn} ${alg} ${grv} ${size} ${ExWB} ${ExFntSty} ${ExTxtDec} ${ExWrap} ${ext} ${exb} ${exl} ${exr}" style="${style2}"><p>${text}<!-- content --></p></div>`
|
||||||
|
}
|
||||||
|
function upper1digit(str) {
|
||||||
|
return str.charAt(0).toUpperCase()
|
||||||
|
}
|
||||||
|
function upper2digit(str) {
|
||||||
|
return str.charAt(0).toUpperCase() + str.substring(1, 2)
|
||||||
|
}
|
||||||
|
function upperalldigit(str) {
|
||||||
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||||
|
}
|
||||||
@ -0,0 +1,780 @@
|
|||||||
|
function flex2html(element, json) {
|
||||||
|
let carousel = carousel_struc()
|
||||||
|
let result = ''
|
||||||
|
|
||||||
|
if(json['type'] === 'flex') {
|
||||||
|
json = json['contents']
|
||||||
|
if(json['type'] === 'bubble') {
|
||||||
|
result = bubble_object(json)
|
||||||
|
carousel = carousel.replace('<!-- inner -->', result)
|
||||||
|
} else if(json['type'] === 'carousel') {
|
||||||
|
json['contents'].forEach((obj, index) => {
|
||||||
|
let result = bubble_object(obj)
|
||||||
|
result = result.replace('<!-- content -->', '')
|
||||||
|
result = result.replace('<!-- inner -->', '')
|
||||||
|
carousel = carousel.replace('<!-- inner -->', result + '<!-- inner -->')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(element).innerHTML += carousel
|
||||||
|
return carousel
|
||||||
|
}
|
||||||
|
|
||||||
|
function bubble_object(json) {
|
||||||
|
let { hero, header, body, footer } = json
|
||||||
|
let hero_object = hero_struc(json)
|
||||||
|
let header_object = header_struc(json)
|
||||||
|
let body_object = body_struc(json)
|
||||||
|
let footer_object = footer_struc(json)
|
||||||
|
let bubble = bubble_struc(json)
|
||||||
|
|
||||||
|
let box = ''
|
||||||
|
for(let key in hero){
|
||||||
|
if(hero.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && hero[key] === 'box') {
|
||||||
|
box = box_object(hero)
|
||||||
|
let box_inner = box_recursive(box, hero['contents'])
|
||||||
|
box = box_inner
|
||||||
|
} else {
|
||||||
|
box = convert_object(hero)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
hero_object = hero_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
box = ''
|
||||||
|
for(let key in header){
|
||||||
|
if(header.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && header[key] === 'box') {
|
||||||
|
box = box_object(header)
|
||||||
|
let box_inner = box_recursive(box, header['contents'])
|
||||||
|
box = box_inner
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
header_object = header_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
box = ''
|
||||||
|
for(let key in body){
|
||||||
|
if(body.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && body[key] === 'box') {
|
||||||
|
box = box_object(body)
|
||||||
|
let box_inner = box_recursive(box, body['contents'])
|
||||||
|
box = box_inner
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body_object = body_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
box = ''
|
||||||
|
for(let key in footer){
|
||||||
|
if(footer.hasOwnProperty(key)) {
|
||||||
|
if(key === 'type' && footer[key] === 'box') {
|
||||||
|
box = box_object(footer)
|
||||||
|
let box_inner = box_recursive(box, footer['contents'])
|
||||||
|
box = box_inner
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
footer_object = footer_object.replace('<!-- inner -->', box)
|
||||||
|
|
||||||
|
|
||||||
|
bubble = bubble.replace('<!-- hero -->', hero_object)
|
||||||
|
bubble = bubble.replace('<!-- header -->', header_object)
|
||||||
|
bubble = bubble.replace('<!-- body -->', body_object)
|
||||||
|
bubble = bubble.replace('<!-- footer -->', footer_object)
|
||||||
|
|
||||||
|
return bubble
|
||||||
|
}
|
||||||
|
function box_recursive(parent_box, json) {
|
||||||
|
let result = []
|
||||||
|
json.forEach((obj, index) => {
|
||||||
|
let temp
|
||||||
|
if(obj['type'] === 'box') {
|
||||||
|
let temp2 = box_object(obj)
|
||||||
|
temp = box_recursive(temp2, obj['contents'])
|
||||||
|
} else if(obj['type'] === 'text' && obj['contents'] && obj['contents'].length > 0 ) {
|
||||||
|
let temp2 = convert_object(obj)
|
||||||
|
temp = box_recursive(temp2, obj['contents'])
|
||||||
|
} else {
|
||||||
|
temp = convert_object(obj)
|
||||||
|
}
|
||||||
|
result[index] = temp
|
||||||
|
})
|
||||||
|
json.forEach((obj, index) => {
|
||||||
|
result[index] = result[index].replace('<!-- content -->', '')
|
||||||
|
parent_box = parent_box.replace('<!-- content -->', result[index] + '<!-- content -->')
|
||||||
|
})
|
||||||
|
|
||||||
|
return parent_box
|
||||||
|
}
|
||||||
|
|
||||||
|
function convert_object(json) {
|
||||||
|
switch(json['type']) {
|
||||||
|
case 'image':
|
||||||
|
object = image_object(json)
|
||||||
|
break;
|
||||||
|
case 'icon':
|
||||||
|
object = icon_object(json)
|
||||||
|
break;
|
||||||
|
case 'text':
|
||||||
|
object = text_object(json)
|
||||||
|
break;
|
||||||
|
case 'span':
|
||||||
|
object = span_object(json)
|
||||||
|
break;
|
||||||
|
case 'button':
|
||||||
|
object = button_object(json)
|
||||||
|
break;
|
||||||
|
case 'filler':
|
||||||
|
object = filler_object(json)
|
||||||
|
break;
|
||||||
|
case 'spacer':
|
||||||
|
object = spacer_object(json)
|
||||||
|
break;
|
||||||
|
case 'separator':
|
||||||
|
object = separator_object(json)
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
object = null
|
||||||
|
}
|
||||||
|
return object
|
||||||
|
}
|
||||||
|
|
||||||
|
function box_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let {layout, position, flex, spacing, margin, width, height, backgroundColor, borderColor, borderWidth, cornerRadius, justifyContent, alignItems, offsetTop, offsetBottom, offsetStart, offsetEnd, paddingAll, paddingTop, paddingBottom, paddingStart, paddingEnd, background} = json
|
||||||
|
if(layout === 'baseline') {
|
||||||
|
layout1 = 'hr'
|
||||||
|
layout2 = 'bl'
|
||||||
|
} else if(layout === 'horizontal') {
|
||||||
|
layout1 = 'hr'
|
||||||
|
layout2 = ''
|
||||||
|
} else if(layout === 'vertical') {
|
||||||
|
layout1 = 'vr'
|
||||||
|
layout2 = ''
|
||||||
|
}
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(spacing && spacing.indexOf("px") >= 0) {
|
||||||
|
spc = ''
|
||||||
|
} else {
|
||||||
|
spc = (spacing) ? 'spc' + upperalldigit(spacing) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
|
||||||
|
style += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
if(width && width !== '') {
|
||||||
|
style += `width:${width}; max-width:${width};`
|
||||||
|
}
|
||||||
|
if(height && height !== '') {
|
||||||
|
style += `height:${height};`
|
||||||
|
}
|
||||||
|
if(backgroundColor) {
|
||||||
|
style += `background-color:${backgroundColor} !important;`
|
||||||
|
}
|
||||||
|
if(borderColor) {
|
||||||
|
style += `border-color:${borderColor} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
if(borderWidth && (borderWidth.indexOf("px") >= 0 || borderWidth.indexOf("%") >= 0)) {
|
||||||
|
style += `border-width:${borderWidth};`
|
||||||
|
ExBdr = ''
|
||||||
|
} else {
|
||||||
|
switch(borderWidth) {
|
||||||
|
case 'none':
|
||||||
|
ExBdr = 'ExBdrWdtNone'
|
||||||
|
break;
|
||||||
|
case 'light':
|
||||||
|
ExBdr = 'ExBdrWdtLgh'
|
||||||
|
break;
|
||||||
|
case 'normal':
|
||||||
|
ExBdr = 'ExBdrWdtNml'
|
||||||
|
break;
|
||||||
|
case 'medium':
|
||||||
|
ExBdr = 'ExBdrWdtMdm'
|
||||||
|
break;
|
||||||
|
case 'semi-bold':
|
||||||
|
ExBdr = 'ExBdrWdtSbd'
|
||||||
|
break;
|
||||||
|
case 'bold':
|
||||||
|
ExBdr = 'ExBdrWdtBld'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ExBdr = ''
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(cornerRadius && (cornerRadius.indexOf("px") >= 0 || cornerRadius.indexOf("%") >= 0)) {
|
||||||
|
style += `border-radius:${cornerRadius};`
|
||||||
|
ExBdrRad = ''
|
||||||
|
} else {
|
||||||
|
ExBdrRad = (cornerRadius) ? 'ExBdrRad' + upperalldigit(cornerRadius) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
jfc = ''
|
||||||
|
if(justifyContent && justifyContent !== '') {
|
||||||
|
switch(justifyContent) {
|
||||||
|
case 'center':
|
||||||
|
jfc = 'itms-jfcC'
|
||||||
|
break;
|
||||||
|
case 'flex-start':
|
||||||
|
jfc = 'itms-jfcS'
|
||||||
|
break;
|
||||||
|
case 'flex-end':
|
||||||
|
jfc = 'itms-jfcE'
|
||||||
|
break;
|
||||||
|
case 'space-between':
|
||||||
|
jfc = 'itms-jfcSB'
|
||||||
|
break;
|
||||||
|
case 'space-around':
|
||||||
|
jfc = 'itms-jfcSA'
|
||||||
|
break;
|
||||||
|
case 'space-evenly':
|
||||||
|
jfc = 'itms-jfcSE'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
jfc = ''
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
alg = ''
|
||||||
|
if(alignItems && alignItems !== '') {
|
||||||
|
switch(alignItems) {
|
||||||
|
case 'center':
|
||||||
|
alg = 'itms-algC'
|
||||||
|
break;
|
||||||
|
case 'flex-start':
|
||||||
|
alg = 'itms-algS'
|
||||||
|
break;
|
||||||
|
case 'flex-end':
|
||||||
|
alg = 'itms-algE'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
alg = ''
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingAll && (paddingAll.indexOf("px") >= 0 || paddingAll.indexOf("%") >= 0)) {
|
||||||
|
style += `padding:${paddingAll};`
|
||||||
|
ExPadA = ''
|
||||||
|
} else {
|
||||||
|
ExPadA = (paddingAll) ? 'ExPadA' + upperalldigit(paddingAll) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingTop && (paddingTop.indexOf("px") >= 0 ||paddingTop.indexOf("%") >= 0)) {
|
||||||
|
style += `padding-top:${paddingTop};`
|
||||||
|
ExPadT = ''
|
||||||
|
} else {
|
||||||
|
ExPadT = (paddingTop) ? 'ExPadT' + upperalldigit(paddingTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingBottom && (paddingBottom.indexOf("px") >= 0 || paddingBottom.indexOf("%")>=0)) {
|
||||||
|
style += `padding-bottom:${paddingBottom};`
|
||||||
|
ExPadB = ''
|
||||||
|
} else {
|
||||||
|
ExPadB = (paddingBottom) ? 'ExPadB' + upperalldigit(paddingBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingStart && (paddingStart.indexOf("px") >= 0 || paddingStart.indexOf("%") >= 0)) {
|
||||||
|
style += `padding-left:${paddingStart};`
|
||||||
|
ExPadL = ''
|
||||||
|
} else {
|
||||||
|
ExPadL = (paddingStart) ? 'ExPadL' + upperalldigit(paddingStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(paddingEnd && (paddingEnd.indexOf("px") >= 0 || paddingEnd.indexOf("%") >= 0)) {
|
||||||
|
style += `padding-right:${paddingEnd};`
|
||||||
|
ExPadR = ''
|
||||||
|
} else {
|
||||||
|
ExPadR = (paddingEnd) ? 'ExPadR' + upperalldigit(paddingEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(background && background.type === 'linearGradient') {
|
||||||
|
centerPosition = (background.centerPosition) ? background.centerPosition : '50%'
|
||||||
|
if(background.centerColor) {
|
||||||
|
style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.centerColor} ${centerPosition}, ${background.endColor} 100%);`
|
||||||
|
} else {
|
||||||
|
style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.endColor} 100%);`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="MdBx ${layout1} ${layout2} ${fl} ${exabs} ${exmgn} ${spc} ${ExBdr} ${ExBdrRad} ${jfc} ${alg} ${ext} ${exb} ${exl} ${exr} ${ExPadA} ${ExPadT} ${ExPadB} ${ExPadL} ${ExPadR}" style="${style}"><!-- content --></div>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function button_object(json) {
|
||||||
|
style2 = ''
|
||||||
|
style3 = ''
|
||||||
|
|
||||||
|
let {flex, margin, position, height, style, color, gravity, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd, action} = json
|
||||||
|
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
||||||
|
style2 += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
height = (!height || height === '' || height === 'md') ? '' : 'Ex' + upperalldigit(height)
|
||||||
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
||||||
|
|
||||||
|
ExBtn = 'ExBtnL'
|
||||||
|
if(style && style !== '') {
|
||||||
|
switch(style) {
|
||||||
|
case 'link':
|
||||||
|
ExBtn = 'ExBtnL'
|
||||||
|
break;
|
||||||
|
case 'primary':
|
||||||
|
ExBtn = 'ExBtn1'
|
||||||
|
break;
|
||||||
|
case 'secondary':
|
||||||
|
ExBtn = 'ExBtn2'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ExBtn = 'ExBtnL'
|
||||||
|
// code block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(color) {
|
||||||
|
style3 += `background-color:${color} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style2 += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style2 += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 || offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style2 += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style2 += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
action = (!action) ? {'type':'none'} : action
|
||||||
|
if(action.type === 'uri') {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
} else if(action.type === 'message') {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
} else if(action.type === 'postback') {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
} else {
|
||||||
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="javascript:;" style="${style3}"><div>${action.label}</div></a></div>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function filler_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let {flex} = json
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="mdBxFiller ${fl}" style="${style}" ></div>`
|
||||||
|
}
|
||||||
|
function icon_object(json) {
|
||||||
|
let style2 = ''
|
||||||
|
let {size, aspectRatio, url, position, margin, offsetTop, offsetBottom, offsetStart, offsetEnd} = json
|
||||||
|
let styleimg = `background-image:url('${url}');`
|
||||||
|
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
style2 += `font-size:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!aspectRatio || aspectRatio === '') {
|
||||||
|
styleimg += `width:1em;`
|
||||||
|
} else {
|
||||||
|
ratio = ratio[0]/ratio[1]
|
||||||
|
styleimg += `width:${ratio}em;`
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0 ||margin.indexOf("%") >= 0)) {
|
||||||
|
style2 += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0||offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style2 += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style2 += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style2 += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style2 += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="MdIco fl0 ${size} ${exabs} ${exmgn} ${ext} ${exb} ${exl} ${exr}" style="${style2}" ><div><span style="${styleimg}"></span></div></div>`
|
||||||
|
}
|
||||||
|
function image_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let style2 = ''
|
||||||
|
let {aspectMode, size, aspectRatio, url, position, flex, margin, align, gravity, backgroundColor, offsetTop, offsetBottom, offsetStart, offsetEnd, action} = json
|
||||||
|
let styleimg = `background-image:url('${url}');`
|
||||||
|
if(backgroundColor) {
|
||||||
|
styleimg += `background-color:${backgroundColor} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
aspectMode = (!aspectMode || aspectMode === '') ? 'fit' : aspectMode
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
aspectMode = upperalldigit(aspectMode)
|
||||||
|
if(size.indexOf("px") >= 0||size.indexOf("%") >= 0) {
|
||||||
|
style2 += `width:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!aspectRatio || aspectRatio === '') {
|
||||||
|
ratio = '100'
|
||||||
|
} else {
|
||||||
|
ratio = aspectRatio.split(':')
|
||||||
|
ratio = ratio[1]*100/ratio[0]
|
||||||
|
}
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
||||||
|
style += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
alg = (align === 'start' || align === 'end') ? 'alg' + upper1digit(align) : '';
|
||||||
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
||||||
|
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0||offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
||||||
|
style += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0||offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
action = (!action) ? {'type':'none'} : action
|
||||||
|
if(action.type === 'uri') {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a href="javascript:;" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
} else if(action.type === 'message') {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a href="javascript:;" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
} else if(action.type === 'postback') {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a href="javascript:;" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
} else {
|
||||||
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
||||||
|
<div style="${style2}">
|
||||||
|
<a href="javascript:;" style="padding-bottom:${ratio}%;">
|
||||||
|
<span style="${styleimg}"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
function separator_object(json) {
|
||||||
|
let style = ''
|
||||||
|
let {margin, color} = json
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
||||||
|
style += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
if(color) {
|
||||||
|
style += `border-color:${color} !important;`
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<div class="fl0 MdSep ${exmgn}" style="${style}" ></div>`
|
||||||
|
}
|
||||||
|
function spacer_object(json) {
|
||||||
|
let {size} = json
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'spc' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
return `<div class="mdBxSpacer ${size} fl0" ></div>`
|
||||||
|
}
|
||||||
|
function span_object(json) {
|
||||||
|
|
||||||
|
let style2 = ''
|
||||||
|
let {text, size, color, weight, style, decoration} = json
|
||||||
|
|
||||||
|
if(size && size !== '') {
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
style2 += `font-size:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
size = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(color && color!=='') {
|
||||||
|
style2 += `color:${color};`
|
||||||
|
}
|
||||||
|
ExWB = (weight === 'bold') ? 'ExWB' : ''
|
||||||
|
ExFntSty = (style === 'normal') ? 'ExFntStyNml' : (style === 'italic') ? 'ExFntStyIt' : ''
|
||||||
|
ExTxtDec = (decoration === 'line-through') ? 'ExTxtDecLt' : (decoration === 'underline') ? 'ExTxtDecUl' : (decoration === 'none') ? 'ExTxtDecNone' : ''
|
||||||
|
|
||||||
|
return `<span class="MdSpn ${ExWB} ${size} ${ExFntSty} ${ExTxtDec}" style="${style2}" >${text}</span>`
|
||||||
|
}
|
||||||
|
function carousel_struc() {
|
||||||
|
return `<div class="LySlider"><div class="lyInner"><!-- inner --></div></div><br>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function bubble_struc(json) {
|
||||||
|
let {size, direction, action} = json
|
||||||
|
size = (!size || size === '') ? 'medium' : size
|
||||||
|
direction = (!direction || direction == '') ? 'ltr' : direction
|
||||||
|
size = upper2digit(size)
|
||||||
|
|
||||||
|
return `<div class="lyItem Ly${size}"><div class="T1 fx${direction.toUpperCase()}" dir="${direction}"><!-- hero --><!-- header --><!-- body --><!-- footer --></div></div>`
|
||||||
|
}
|
||||||
|
function hero_struc(json) {
|
||||||
|
let {styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { hero } = styles
|
||||||
|
backgroundColor = (hero && hero.backgroundColor) ? `background-color:${hero.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="t1Hero" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function header_struc(json) {
|
||||||
|
let {styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { header } = styles
|
||||||
|
backgroundColor = (header && header.backgroundColor) ? `background-color:${header.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="t1Header" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function body_struc(json) {
|
||||||
|
let {footer, styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { body } = styles
|
||||||
|
backgroundColor = (body && body.backgroundColor) ? `background-color:${body.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
let ExHasFooter = (footer) ? 'ExHasFooter' : ''
|
||||||
|
return `<div class="t1Body ${ExHasFooter}" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function footer_struc(json) {
|
||||||
|
let {styles} = json
|
||||||
|
let backgroundColor = ''
|
||||||
|
if(styles) {
|
||||||
|
let { footer } = styles
|
||||||
|
backgroundColor = (footer && footer.backgroundColor) ? `background-color:${footer.backgroundColor}` : ''
|
||||||
|
}
|
||||||
|
return `<div class="t1Footer" style="${backgroundColor}"><!-- inner --></div>`
|
||||||
|
}
|
||||||
|
function text_object(json) {
|
||||||
|
|
||||||
|
let style2 = ''
|
||||||
|
let {flex, margin, size, position, align, gravity, text, color, weight, style, decoration, wrap, maxLines, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd} = json
|
||||||
|
|
||||||
|
fl = ''
|
||||||
|
if(flex > 3) {
|
||||||
|
style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
||||||
|
} else {
|
||||||
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
||||||
|
}
|
||||||
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
||||||
|
|
||||||
|
if(margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
|
||||||
|
style2 += `margin-top:${margin};`
|
||||||
|
exmgn = ''
|
||||||
|
} else {
|
||||||
|
exmgn = (margin) ? 'ExMgnL' + upperalldigit(margin) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
alg = (align === 'start' || align === 'end' || align === 'center') ? 'ExAlg' + upper1digit(align) : '';
|
||||||
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
||||||
|
size = (!size || size === '') ? 'md' : size
|
||||||
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
||||||
|
style2 += `font-size:${size};`
|
||||||
|
size = ''
|
||||||
|
} else {
|
||||||
|
size = 'Ex' + upperalldigit(size)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(color && color!=='') {
|
||||||
|
style2 += `color:${color};`
|
||||||
|
}
|
||||||
|
ExWB = (weight === 'bold') ? 'ExWB' : ''
|
||||||
|
ExFntSty = (style === 'normal') ? 'ExFntStyNml' : (style === 'italic') ? 'ExFntStyIt' : ''
|
||||||
|
ExTxtDec = (decoration === 'line-through') ? 'ExTxtDecLt' : (decoration === 'underline') ? 'ExTxtDecUl' : (decoration === 'none') ? 'ExTxtDecNone' : ''
|
||||||
|
ExWrap = (wrap === true) ? 'ExWrap' : ''
|
||||||
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
||||||
|
style2 += `top:${offsetTop};`
|
||||||
|
ext = ''
|
||||||
|
} else {
|
||||||
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
||||||
|
style2 += `bottom:${offsetBottom};`
|
||||||
|
exb = ''
|
||||||
|
} else {
|
||||||
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetStart && offsetStart.indexOf("px") >= 0) {
|
||||||
|
style2 += `left:${offsetStart};`
|
||||||
|
exl = ''
|
||||||
|
} else {
|
||||||
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
||||||
|
style2 += `right:${offsetEnd};`
|
||||||
|
exr = ''
|
||||||
|
} else {
|
||||||
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
||||||
|
}
|
||||||
|
text = (!text) ? '' : text
|
||||||
|
return `<div class="MdTxt ${fl} ${exabs} ${exmgn} ${alg} ${grv} ${size} ${ExWB} ${ExFntSty} ${ExTxtDec} ${ExWrap} ${ext} ${exb} ${exl} ${exr}" style="${style2}"><p>${text}<!-- content --></p></div>`
|
||||||
|
}
|
||||||
|
function upper1digit(str) {
|
||||||
|
return str.charAt(0).toUpperCase()
|
||||||
|
}
|
||||||
|
function upper2digit(str) {
|
||||||
|
return str.charAt(0).toUpperCase() + str.substring(1, 2)
|
||||||
|
}
|
||||||
|
function upperalldigit(str) {
|
||||||
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<router-view/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
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 register = async (userInfo)=> ajax(`/auth/register`,userInfo,"POST")
|
||||||
|
|
||||||
|
export const updateCard = async (userInfo)=> ajax(`/card/updateCard`,userInfo,"POST")
|
||||||
|
|
||||||
|
export const updateCusCard = async (params)=> ajax(`/card/updateCusCard`,params,"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,13 @@
|
|||||||
|
html{
|
||||||
|
// width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
// max-width: 750px;
|
||||||
|
// margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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: 911 B |
|
After Width: | Height: | Size: 1.2 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: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 2.4 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: 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: 683 B |
|
After Width: | Height: | Size: 76 KiB |
|
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: 43 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: 52 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,18 @@
|
|||||||
|
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)
|
||||||
|
|
||||||
|
vue.use(router)
|
||||||
|
vue.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,17 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import Send from '../views/Send/Index.vue'
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Send',
|
||||||
|
component: Send
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
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}&cardid=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
`;
|
||||||
|
} 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}&cardid=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"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}&cardid=1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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}&cardid=1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"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 + "&cardid=1",
|
||||||
|
},
|
||||||
|
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 + "&cardid=1",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
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 + "&cardid=1",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} 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 + "&cardid=1",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return { card: JSON.stringify(card) };
|
||||||
|
}
|
||||||
|
|
||||||
|
export { genCard };
|
||||||
@ -0,0 +1,348 @@
|
|||||||
|
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 + "&cardid=1",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} 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.trim().length > 0
|
||||||
|
? vcard.url
|
||||||
|
: vcard.nfcurl + "&cardid=1",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 + "&cardid=1",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
console.log(JSON.stringify(card));
|
||||||
|
return { card: JSON.stringify(card) };
|
||||||
|
}
|
||||||
|
|
||||||
|
export { genCard };
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue