wayne
/
utel_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

0001247

Browse Source
main
Wayne 2 years ago
parent be6f1aee23
commit eafd24ff65
2 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File

6
src/utils/card2.js
Unescape View File

@ -96,9 +96,9 @@ function genCard1(ctx) {
altText: vcard.altText,
contents: {
type: "carousel",
contents: _.map(vcard.cards, (card, cardIdx) =>
renderCard({ ...ctx, card, cardIdx })
),
contents: vcard.cards
.filter(card => card.isSend === true)
.map((card, cardIdx) => renderCard({ ...ctx, card, cardIdx }))
},
};
}

61
src/views/Card/Edit.vue
Unescape View File

@ -54,6 +54,8 @@ const form = ref({
titleSize: "xl",
cards: [
{
isSend: false,
aIsSend: false,
bgColor: "#ffffff",
desc: "",
descColor: "#000000",
@ -80,7 +82,9 @@ const defaultTheme = {
descSize: "sm",
titleColor: "#000000",
ratio: "4:3",
isShow: true
isShow: true,
isSend: false,
aIsSend: false,
}
const userid = ref(route.query.user_id || null)
@ -232,6 +236,15 @@ const moveBtn = (type, index) => {
}
};
const handleChangeIsSend = () => {
// 檢查form.json5.cards裏,isSend為true的數量是否大於10
let isSendCount = form.value.json5.cards.filter(card => card.isSend).length
if (isSendCount > 10) {
showFailToast('最多只能設定10張卡片為發送')
form.value.json5.cards[form.value.page - 1].isSend = false
}
}
const afterRead = async (file, name) => {
crop.value.show = true
const ofile = file.file
@ -351,6 +364,7 @@ const handleDelete = () => {
};
const handlePreview = () => {
router.push({
name: "CardPreview",
state: { content: JSON.stringify(form.value) },
@ -458,7 +472,8 @@ const goBack = () => {
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</van-popup>
<van-field v-model="userid" label="會員編號" name="" input-align="right" :placeholder="userid" readonly v-if="userid"/>
<van-field v-model="userid" label="會員編號" name="" input-align="right" :placeholder="userid" readonly
v-if="userid" />
<van-field v-model="form.title" label="標題文字" name="" input-align="right" error-message-align="right"
placeholder="請輸入您在名片切換時顯示的文字" :rules="[{ required: true, message: '標題文字必填' }]" />
<van-field label="是否顯示於感應名片" class="longText" input-align="right">
@ -476,11 +491,11 @@ const goBack = () => {
<ul class="nav nav-tabs">
<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,send: card.isSend === true && form.page !== index + 1 }">
{{ index + 1 }}
</button>
</li>
<li class="nav-item" @click="addCard" v-if="form.json5.cards.length < 10">
<li class="nav-item" @click="addCard">
<button type="button" class="nav-link">
<i class="fa fa-plus-circle"></i> 新增
</button>
@ -504,6 +519,12 @@ const goBack = () => {
@click="delCard(form.page)"></van-button>
</template>
</van-field>
<van-field label="是否發送" class="longText" input-align="right">
<template #input>
<van-switch v-model="form.json5.cards[form.page - 1].isSend" size="18px" active-color="#345068"
inactive-color="#888888" @change="handleChangeIsSend" />
</template>
</van-field>
<van-field v-model="form.json5.cards[form.page - 1].bgColor" label="卡片底色" id="vcard-bgColor"
input-align="right" placeholder="請輸入卡片底色的色碼，如：#333333" :border="false"
@ -542,12 +563,8 @@ const goBack = () => {
</template>
</van-field>
<van-field
label="圖片網址連結"
v-model="form.json5.cards[form.page - 1].link"
:border="false"
placeholder="需輸入完整網址,http://..,https://..."
/>
<van-field label="圖片網址連結" v-model="form.json5.cards[form.page - 1].link" :border="false"
placeholder="需輸入完整網址,http://..,https://..." />
<van-divider :style="{
color: '#345068',
@ -555,14 +572,15 @@ const goBack = () => {
padding: '0 16px',
}"><strong>卡片標題</strong></van-divider>
<van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title" input-align="right"
placeholder="請填寫卡片標題文字" :rules="[{ required: true, message: '請填寫卡片標題文字' }]" />
<van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title"
input-align="right" placeholder="請填寫卡片標題文字" :rules="[{ required: true, message: '請填寫卡片標題文字' }]" />
<van-field v-model="form.json5.cards[form.page - 1].titleSize" is-link readonly label="標題文字大小"
id="vcard-titleSize" input-align="right" placeholder="請輸入標題文字的色碼，如：#333333"
@click="showTitleSizePicker = true" />
<van-popup v-model:show="showTitleSizePicker" round position="bottom">
<van-picker :columns="sizeColumns" @cancel="showTitleSizePicker = false" @confirm="onTitleSizeConfirm" />
<van-picker :columns="sizeColumns" @cancel="showTitleSizePicker = false"
@confirm="onTitleSizeConfirm" />
</van-popup>
<van-field v-model="form.json5.cards[form.page - 1].titleColor" label="標題文字顏色" id="vcard-titleColor"
@ -591,7 +609,8 @@ const goBack = () => {
</van-popup>
<van-field v-model="form.json5.cards[form.page - 1].descColor" label="說明文字顏色" id="vcard-descColor"
input-align="right" placeholder="請輸入說明文字的色碼，如：#333333" :rules="[{ required: true, message: '說明文字色碼必填' }]">
input-align="right" placeholder="請輸入說明文字的色碼，如：#333333"
:rules="[{ required: true, message: '說明文字色碼必填' }]">
<template #button>
<input v-model="form.json5.cards[form.page - 1].descColor" type="color" class="form-control-color" />
</template>
@ -620,9 +639,11 @@ const goBack = () => {
<van-field :label="`控制按鈕 ${index + 1}`" :border="false" class="bg-transparent">
<template #button>
<van-button size="small" class="bg-transparent border-0" icon="arrow-up"
@click="moveBtn(0, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
@click="moveBtn(0, index)"
v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
<van-button size="small" class="bg-transparent border-0" icon="arrow-down"
@click="moveBtn(1, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
@click="moveBtn(1, index)"
v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
<van-button size="small" class="bg-transparent border-0" icon="delete-o"
@click="delBtn(index)"></van-button>
</template>
@ -692,7 +713,6 @@ const goBack = () => {
</template>
<style lang="less" scoped>
.edit {
:deep(.van-van-field__control--min-height) {
min-height: 100px;
@ -742,6 +762,12 @@ const goBack = () => {
background-color: #4a677d;
border-color: #4a677d #4a677d #4a677d;
}
.nav-link.send {
background-color: #ccc;
border-color: #ccc #ccc #ccc;
}
}
.previewCnt {
@ -812,5 +838,4 @@ const goBack = () => {
background-color: #fff;
}
}
</style>

Write Preview
Loading…
Cancel
Save