|
|
|
|
@ -442,411 +442,228 @@ export default defineComponent({
|
|
|
|
|
<h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
|
|
|
|
|
</template>
|
|
|
|
|
<template #value>
|
|
|
|
|
<van-button size="small" class="ml-1 btn-moBlue" icon="tv-o" hairline>教學影片</van-button>
|
|
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline>預覽</van-button>
|
|
|
|
|
<van-button size="small" class="ml-1 btn-moBlue" icon="tv-o" hairline @click="$router.push('/card/video')">教學影片</van-button>
|
|
|
|
|
<van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline @click="handlePreview">預覽</van-button>
|
|
|
|
|
</template>
|
|
|
|
|
</van-cell>
|
|
|
|
|
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="utel-altText">標題文字</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="utel-altText"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.title"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>與我的名片切換時顯示的文字。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="utel-showNfc">是否顯示於感應名片</label>
|
|
|
|
|
<br />
|
|
|
|
|
<van-switch v-model="form.showNfc" />
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>與我的名片切換時顯示的文字。</small
|
|
|
|
|
>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="utel-altText">標題文字</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="utel-altText"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.title"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">與我的名片切換時顯示的文字。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="utel-showNfc">是否顯示於感應名片</label>
|
|
|
|
|
<br />
|
|
|
|
|
<van-switch v-model="form.showNfc" />
|
|
|
|
|
<small class="form-text text-muted">與我的名片切換時顯示的文字。</small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<van-cell-group inset class="mt-3">
|
|
|
|
|
<keep-alive>
|
|
|
|
|
<div id="app" class="container my-4">
|
|
|
|
|
|
|
|
|
|
<div class="card my-2">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<ul class="card-header-tabs nav nav-tabs">
|
|
|
|
|
<li class="nav-item" @click="form.page = 'setting'">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="nav-link"
|
|
|
|
|
:class="{ active: form.page === 'setting' }"
|
|
|
|
|
<van-cell-group inset class="mt-3">
|
|
|
|
|
<keep-alive>
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header bg-lightPink">
|
|
|
|
|
<ul class="card-header-tabs nav nav-tabs">
|
|
|
|
|
<li
|
|
|
|
|
class="nav-item"
|
|
|
|
|
v-for="(card, index) in form.json5.cards"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="form.page = index + 1"
|
|
|
|
|
>
|
|
|
|
|
設定
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
class="nav-item"
|
|
|
|
|
v-for="(card, index) in form.json5.cards"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="form.page = index + 1"
|
|
|
|
|
>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="nav-link"
|
|
|
|
|
:class="{ active: form.page === index + 1 }"
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="nav-link"
|
|
|
|
|
:class="{ active: form.page === index + 1 }"
|
|
|
|
|
>
|
|
|
|
|
{{ index + 1 }}
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
class="nav-item"
|
|
|
|
|
@click="addCard"
|
|
|
|
|
v-if="form.json5.cards.length < 10"
|
|
|
|
|
>
|
|
|
|
|
{{ index + 1 }}
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
class="nav-item"
|
|
|
|
|
@click="addCard"
|
|
|
|
|
v-if="form.json5.cards.length < 10"
|
|
|
|
|
>
|
|
|
|
|
<button type="button" class="nav-link">
|
|
|
|
|
<i class="fa fa-plus-circle"></i> +
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<!---->
|
|
|
|
|
<div class="card-content" v-if="form.page === 'setting'">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
|
|
|
|
<button type="button" class="nav-link">
|
|
|
|
|
<i class="fa fa-plus-circle"></i> +
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!---->
|
|
|
|
|
|
|
|
|
|
<div class="card-content" v-else>
|
|
|
|
|
<div class="card-body pb-2 pt-3">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-12" v-if="form.json5.cards.length > 1">
|
|
|
|
|
<div class="form-group mb-2 mb-2">
|
|
|
|
|
<label>控制卡片</label>
|
|
|
|
|
<div class="d-flex btn-group mb-1">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-info"
|
|
|
|
|
@click="moveCard(0, form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-arrow-o-l"></i> 前移
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-info"
|
|
|
|
|
@click="moveCard(1, form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-arrow-o-r"></i> 後移
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-danger"
|
|
|
|
|
@click="delCard(form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-delete"></i> 刪除
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>你可以點選前後移按鈕來移動卡片。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-ratio">圖片長寬比</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-ratio"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].ratio"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">20:13 1:1 6:8。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-image"> 卡片圖片 </label>
|
|
|
|
|
<div>
|
|
|
|
|
<van-uploader
|
|
|
|
|
:after-read="afterRead"
|
|
|
|
|
:max-count="1"
|
|
|
|
|
name="cardimage"
|
|
|
|
|
@delete="handleDelete"
|
|
|
|
|
>
|
|
|
|
|
<template
|
|
|
|
|
v-if="form.json5.cards[form.page - 1].image.length > 0"
|
|
|
|
|
>
|
|
|
|
|
<div class="upload-main">
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
:src="form.json5.cards[form.page - 1].image"
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<div class="upload-main">
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
src="@/assets/images/upload.jpg"
|
|
|
|
|
/>
|
|
|
|
|
<p>請上傳圖片</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</van-uploader>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"></small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-link">圖片網址連結</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern="(https?://|line://|tel:|mailto:)\S+"
|
|
|
|
|
id="vcard-link"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
type="url"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].link"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">
|
|
|
|
|
連結(需輸入完整網址,http://..,https://...)
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleColor">卡片底色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-bgColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].bgColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].bgColor"
|
|
|
|
|
/>
|
|
|
|
|
色卡
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題文字的顏色。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-title">卡片標題</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-title"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].title"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">請填寫卡片標題。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleSize">標題文字大小(最大5xl，最小xxs)</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="[0-9a-zA-Z]+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-titleSize"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].titleSize"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-toggle="dropdown"
|
|
|
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
>
|
|
|
|
|
請選擇文字大小
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu py-0" style="">
|
|
|
|
|
<button type="button" class="dropdown-item" @click="changeSize('titleSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題的文字大小。
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleColor">標題文字顏色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-titleColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].titleColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].titleColor"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題文字的顏色。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-desc">卡片說明</label>
|
|
|
|
|
<textarea
|
|
|
|
|
id="vcard-desc"
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].desc"
|
|
|
|
|
style="height: 100px"
|
|
|
|
|
></textarea>
|
|
|
|
|
<small class="form-text text-muted">請填寫卡片說明。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-descSize">說明文字大小(最大5xl，最小xxs)</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="[0-9a-zA-Z]+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-descSize"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].descSize"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-toggle="dropdown"
|
|
|
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
>
|
|
|
|
|
請選擇文字大小
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu py-0" style="">
|
|
|
|
|
<button type="button" class="dropdown-item" @click="changeSize('descSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題的文字大小。
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleColor">說明文字顏色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-titleColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].descColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].descColor"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題文字的顏色。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-title">卡片連結</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-title"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].title"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">請填寫卡片標題。</small>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="list-group list-group-flush">
|
|
|
|
|
<li
|
|
|
|
|
class="list-group-item pb-2 pt-3"
|
|
|
|
|
v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
<div class="card-body pb-2 pt-3">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<div class="form-group mb-2">
|
|
|
|
|
<label>控制按鈕 {{ index + 1 }}</label>
|
|
|
|
|
<div class="col-sm-12" v-if="form.json5.cards.length > 1">
|
|
|
|
|
<div class="form-group mb-2 mb-2">
|
|
|
|
|
<label>控制卡片</label>
|
|
|
|
|
<div class="d-flex btn-group mb-1">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-info"
|
|
|
|
|
@click="moveBtn(0, index)"
|
|
|
|
|
v-if="form.json5.cards[form.page - 1].btns.length > 1"
|
|
|
|
|
@click="moveCard(0, form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-arrow-o-u"></i> 上移
|
|
|
|
|
<i class="iconfont icon-arrow-o-l"></i> 前移
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-info"
|
|
|
|
|
@click="moveBtn(1, index)"
|
|
|
|
|
v-if="form.json5.cards[form.page - 1].btns.length > 1"
|
|
|
|
|
@click="moveCard(1, form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-arrow-o-d"></i> 下移
|
|
|
|
|
<i class="iconfont icon-arrow-o-r"></i> 後移
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-danger"
|
|
|
|
|
@click="delBtn(index)"
|
|
|
|
|
@click="delCard(form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-delete"></i> 刪除
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>你可以點選前後移按鈕來移動卡片。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="cardbtn-text-0"
|
|
|
|
|
>按鈕 {{ index + 1 }} 文字</label
|
|
|
|
|
>
|
|
|
|
|
<label for="vcard-ratio">圖片長寬比</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="cardbtn-text-0"
|
|
|
|
|
id="vcard-ratio"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="btn.text"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].ratio"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">20:13 1:1 6:8。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-image"> 卡片圖片 </label>
|
|
|
|
|
<div>
|
|
|
|
|
<van-uploader
|
|
|
|
|
:after-read="afterRead"
|
|
|
|
|
:max-count="1"
|
|
|
|
|
name="cardimage"
|
|
|
|
|
@delete="handleDelete"
|
|
|
|
|
>
|
|
|
|
|
<template
|
|
|
|
|
v-if="form.json5.cards[form.page - 1].image.length > 0"
|
|
|
|
|
>
|
|
|
|
|
<div class="upload-main">
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
:src="form.json5.cards[form.page - 1].image"
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<div class="upload-main">
|
|
|
|
|
<img
|
|
|
|
|
class="upload-img"
|
|
|
|
|
src="@/assets/images/upload.jpg"
|
|
|
|
|
/>
|
|
|
|
|
<p>請上傳圖片</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</van-uploader>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"></small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-link">圖片網址連結</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern="(https?://|line://|tel:|mailto:)\S+"
|
|
|
|
|
id="vcard-link"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
type="url"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].link"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">
|
|
|
|
|
連結(需輸入完整網址,http://..,https://...)
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="cardbtn-link-0"
|
|
|
|
|
>按鈕
|
|
|
|
|
{{
|
|
|
|
|
index + 1
|
|
|
|
|
}}
|
|
|
|
|
連結(需輸入完整網址,http://..,https://...)</label
|
|
|
|
|
<label for="vcard-titleColor">卡片底色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-bgColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].bgColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].bgColor"
|
|
|
|
|
/>
|
|
|
|
|
色卡
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題文字的顏色。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-title">卡片標題</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern="(https?://|line://|tel:|mailto:)\S+"
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
type="url"
|
|
|
|
|
id="cardbtn-link-0"
|
|
|
|
|
id="vcard-title"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="btn.link"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].title"
|
|
|
|
|
/>
|
|
|
|
|
<small class="form-text text-muted">請填寫卡片標題。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleSize">標題文字大小(最大5xl，最小xxs)</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="[0-9a-zA-Z]+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-titleSize"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].titleSize"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-toggle="dropdown"
|
|
|
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
>
|
|
|
|
|
請選擇文字大小
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu py-0" style="">
|
|
|
|
|
<button type="button" class="dropdown-item" @click="changeSize('titleSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題的文字大小。
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleColor">按鈕背景顏色</label>
|
|
|
|
|
<label for="vcard-titleColor">標題文字顏色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
@ -854,107 +671,277 @@ export default defineComponent({
|
|
|
|
|
id="vcard-titleColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="btn.color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].titleColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="btn.color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].titleColor"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題文字的顏色。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-desc">卡片說明</label>
|
|
|
|
|
<textarea
|
|
|
|
|
id="vcard-desc"
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].desc"
|
|
|
|
|
style="height: 100px"
|
|
|
|
|
></textarea>
|
|
|
|
|
<small class="form-text text-muted">請填寫卡片說明。</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-descSize">說明文字大小(最大5xl，最小xxs)</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="[0-9a-zA-Z]+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-descSize"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].descSize"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-toggle="dropdown"
|
|
|
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
>
|
|
|
|
|
請選擇文字大小
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu py-0" style="">
|
|
|
|
|
<button type="button" class="dropdown-item" @click="changeSize('descSize',size)" v-for="(size,index) in sizeArr" :key="index">{{size}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題的文字大小。
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleColor">說明文字顏色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-titleColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].descColor"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].descColor"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <small class="form-text text-muted">請填寫卡片標題文字的顏色。</small> -->
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題文字的顏色。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-btnHeight">按鈕大小</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<!-- <div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-title">卡片連結</label>
|
|
|
|
|
<input
|
|
|
|
|
pattern="[0-9a-zA-Z]+"
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-btnHeight"
|
|
|
|
|
id="vcard-title"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="btn.btnHeight"
|
|
|
|
|
v-model="form.json5.cards[form.page - 1].title"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-toggle="dropdown"
|
|
|
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
<small class="form-text text-muted">請填寫卡片標題。</small>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="list-group list-group-flush">
|
|
|
|
|
<li
|
|
|
|
|
class="list-group-item pb-2 pt-3"
|
|
|
|
|
v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<div class="form-group mb-2">
|
|
|
|
|
<label>控制按鈕 {{ index + 1 }}</label>
|
|
|
|
|
<div class="d-flex btn-group mb-1">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-info"
|
|
|
|
|
@click="moveBtn(0, index)"
|
|
|
|
|
v-if="form.json5.cards[form.page - 1].btns.length > 1"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-arrow-o-u"></i> 上移
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-info"
|
|
|
|
|
@click="moveBtn(1, index)"
|
|
|
|
|
v-if="form.json5.cards[form.page - 1].btns.length > 1"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-arrow-o-d"></i> 下移
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-sm btn-outline-danger"
|
|
|
|
|
@click="delBtn(index)"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-delete"></i> 刪除
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-sm-12">
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="cardbtn-text-0"
|
|
|
|
|
>按鈕 {{ index + 1 }} 文字</label
|
|
|
|
|
>
|
|
|
|
|
請選擇按鈕大小
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu py-0" style="">
|
|
|
|
|
<button type="button" class="dropdown-item" @click="btn.btnHeight='sm'" >sm</button>
|
|
|
|
|
<button type="button" class="dropdown-item" @click="btn.btnHeight='md'" >md</button>
|
|
|
|
|
<input
|
|
|
|
|
pattern=".+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="cardbtn-text-0"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="btn.text"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="cardbtn-link-0"
|
|
|
|
|
>按鈕
|
|
|
|
|
{{
|
|
|
|
|
index + 1
|
|
|
|
|
}}
|
|
|
|
|
連結(需輸入完整網址,http://..,https://...)</label
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
pattern="(https?://|line://|tel:|mailto:)\S+"
|
|
|
|
|
required="required"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
type="url"
|
|
|
|
|
id="cardbtn-link-0"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="btn.link"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-titleColor">按鈕背景顏色</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="#[0-9a-fA-F]{6}"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-titleColor"
|
|
|
|
|
inputmode="url"
|
|
|
|
|
class="form-control"
|
|
|
|
|
v-model="btn.color"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<input
|
|
|
|
|
type="color"
|
|
|
|
|
class="form-control form-control-color"
|
|
|
|
|
v-model="btn.color"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <small class="form-text text-muted">請填寫卡片標題文字的顏色。</small> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group mb-2 was-validated">
|
|
|
|
|
<label for="vcard-btnHeight">按鈕大小</label>
|
|
|
|
|
<div class="input-group input-group-sm">
|
|
|
|
|
<input
|
|
|
|
|
pattern="[0-9a-zA-Z]+"
|
|
|
|
|
required="required"
|
|
|
|
|
id="vcard-btnHeight"
|
|
|
|
|
class="form-control form-control-sm"
|
|
|
|
|
v-model="btn.btnHeight"
|
|
|
|
|
/>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-toggle="dropdown"
|
|
|
|
|
class="btn btn-outline-secondary dropdown-toggle"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
>
|
|
|
|
|
請選擇按鈕大小
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu py-0" style="">
|
|
|
|
|
<button type="button" class="dropdown-item" @click="btn.btnHeight='sm'" >sm</button>
|
|
|
|
|
<button type="button" class="dropdown-item" @click="btn.btnHeight='md'" >md</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題的文字大小。
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請填寫卡片標題的文字大小。
|
|
|
|
|
</small>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="list-group-item">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-outline-success"
|
|
|
|
|
@click="addBtn(form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fa fa-plus-circle"></i> 新增按鈕
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-outline-success"
|
|
|
|
|
@click="addShareBtn(form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fa fa-plus-circle"></i> 新增分享按鈕
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="list-group-item">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-outline-success"
|
|
|
|
|
@click="addBtn(form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fa fa-plus-circle"></i> 新增按鈕
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="btn btn-outline-success"
|
|
|
|
|
@click="addShareBtn(form.page)"
|
|
|
|
|
>
|
|
|
|
|
<i class="fa fa-plus-circle"></i> 新增分享按鈕
|
|
|
|
|
</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-5">
|
|
|
|
|
<van-button block class="btn-darkBlue" @click="handleSubmit">
|
|
|
|
|
建立名片
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-5">
|
|
|
|
|
<van-button block class="btn-darkBlue" @click="handleSubmit">
|
|
|
|
|
建立名片
|
|
|
|
|
</van-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
id="modal-exportimport"
|
|
|
|
|
data-backdrop="static"
|
|
|
|
|
data-keyboard="false"
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
class="fade modal"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
class="align-items-stretch modal-dialog modal-dialog-centered modal-xl"
|
|
|
|
|
id="modal-exportimport"
|
|
|
|
|
data-backdrop="static"
|
|
|
|
|
data-keyboard="false"
|
|
|
|
|
tabindex="-1"
|
|
|
|
|
class="fade modal"
|
|
|
|
|
>
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="d-flex flex-column modal-body">
|
|
|
|
|
<textarea
|
|
|
|
|
class="form-control form-control-sm flex-fill"
|
|
|
|
|
></textarea>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請複製匯出的資料，或貼上之前的資料並點一下「匯入」按鈕。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-outline-success">
|
|
|
|
|
複製
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" class="btn btn-secondary">關閉</button>
|
|
|
|
|
<button type="button" class="btn btn-primary">匯入</button>
|
|
|
|
|
<div
|
|
|
|
|
class="align-items-stretch modal-dialog modal-dialog-centered modal-xl"
|
|
|
|
|
>
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="d-flex flex-column modal-body">
|
|
|
|
|
<textarea
|
|
|
|
|
class="form-control form-control-sm flex-fill"
|
|
|
|
|
></textarea>
|
|
|
|
|
<small class="form-text text-muted"
|
|
|
|
|
>請複製匯出的資料，或貼上之前的資料並點一下「匯入」按鈕。</small
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-outline-success">
|
|
|
|
|
複製
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" class="btn btn-secondary">關閉</button>
|
|
|
|
|
<button type="button" class="btn btn-primary">匯入</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</keep-alive>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</keep-alive>
|
|
|
|
|
</van-cell-group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
DESKTOP-8UQ1PPR\09158
3 years ago