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, altText: vcard.altText,
contents: { contents: {
type: "carousel", type: "carousel",
contents: _.map(vcard.cards, (card, cardIdx) => contents: vcard.cards
renderCard({ ...ctx, card, cardIdx }) .filter(card => card.isSend === true)
), .map((card, cardIdx) => renderCard({ ...ctx, card, cardIdx }))
}, },
}; };
} }

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

@ -2,11 +2,11 @@
import Footer from "@/components/Footer.vue"; import Footer from "@/components/Footer.vue";
import FlexView from "@/components/FlexView.vue"; import FlexView from "@/components/FlexView.vue";
import { ref, onMounted , watch, computed, nextTick } from "vue"; import { ref, onMounted, watch, computed, nextTick } from "vue";
import { useCardStore } from '@/store/card' import { useCardStore } from '@/store/card'
import { useRouter,useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import axios from "axios"; import axios from "axios";
import _ from "lodash"; import _ from "lodash";
@ -54,6 +54,8 @@ const form = ref({
titleSize: "xl", titleSize: "xl",
cards: [ cards: [
{ {
isSend: false,
aIsSend: false,
bgColor: "#ffffff", bgColor: "#ffffff",
desc: "", desc: "",
descColor: "#000000", descColor: "#000000",
@ -80,7 +82,9 @@ const defaultTheme = {
descSize: "sm", descSize: "sm",
titleColor: "#000000", titleColor: "#000000",
ratio: "4:3", ratio: "4:3",
isShow: true isShow: true,
isSend: false,
aIsSend: false,
} }
const userid = ref(route.query.user_id || null) const userid = ref(route.query.user_id || null)
@ -88,17 +92,17 @@ const userid = ref(route.query.user_id || null)
onMounted(async () => { onMounted(async () => {
// 判斷query參數是否有userid // 判斷query參數是否有userid
if(userid.value){ if (userid.value) {
let res = await getCusCard( {userid: userid.value} ) let res = await getCusCard({ userid: userid.value })
if(res.code===200){ if (res.code === 200) {
if(res.data.cus_card && res.data.cus_card.length>0){ if (res.data.cus_card && res.data.cus_card.length > 0) {
form.value = JSON.parse(res.data.cus_card) form.value = JSON.parse(res.data.cus_card)
} }
} }
}else{ } else {
if (cardStore.cusCard.cus_card && cardStore.cusCard.cus_card.length > 0) { if (cardStore.cusCard.cus_card && cardStore.cusCard.cus_card.length > 0) {
form.value = JSON.parse(cardStore.cusCard.cus_card); form.value = JSON.parse(cardStore.cusCard.cus_card);
} }
} }
@ -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) => { const afterRead = async (file, name) => {
crop.value.show = true crop.value.show = true
const ofile = file.file const ofile = file.file
@ -351,6 +364,7 @@ const handleDelete = () => {
}; };
const handlePreview = () => { const handlePreview = () => {
router.push({ router.push({
name: "CardPreview", name: "CardPreview",
state: { content: JSON.stringify(form.value) }, state: { content: JSON.stringify(form.value) },
@ -370,13 +384,13 @@ const onDescSizeConfirm = ({ selectedOptions }) => {
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
let user_id; let user_id;
if(!userid.value){ if (!userid.value) {
user_id= sessionStorage.getItem("uid"); user_id = sessionStorage.getItem("uid");
}else{ } else {
user_id = userid.value; user_id = userid.value;
} }
showLoadingToast({ showLoadingToast({
duration: 0, duration: 0,
@ -391,21 +405,21 @@ const handleSubmit = async () => {
user_id: user_id, user_id: user_id,
}; };
if(!userid.value){ if (!userid.value) {
let res = cardStore.updateCusCard(cusCard); let res = cardStore.updateCusCard(cusCard);
if (res) { if (res) {
showSuccessToast("建立成功"); showSuccessToast("建立成功");
} else { } else {
showFailToast("建立失敗"); showFailToast("建立失敗");
} }
router.push("/card"); router.push("/card");
}else{ } else {
let res = await updateCusCard(cusCard); let res = await updateCusCard(cusCard);
if (res.code === 200) { if (res.code === 200) {
showSuccessToast("建立成功"); showSuccessToast("建立成功");
} else { } else {
showFailToast("建立失敗"); showFailToast("建立失敗");
} }
router.push("/auth/getauth"); router.push("/auth/getauth");
} }
@ -413,9 +427,9 @@ const handleSubmit = async () => {
}; };
const goBack = () => { const goBack = () => {
if(!userid.value){ if (!userid.value) {
router.push('/') router.push('/')
}else{ } else {
router.push('/auth/getauth') router.push('/auth/getauth')
} }
}; };
@ -444,7 +458,7 @@ const goBack = () => {
<h6 class="text-darkBlue"><strong>卡片設定</strong></h6> <h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
</template> </template>
<template #extra> <template #extra>
<!-- <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-moBlue" icon="tv-o" hairline @click="$router.push('/card/video')">教學影片</van-button> -->
<van-button size="small" class="ml-1 btn-skyBlue" icon="tv-o" hairline <van-button size="small" class="ml-1 btn-skyBlue" icon="tv-o" hairline
@click="showMovie = true">教學影片</van-button> @click="showMovie = true">教學影片</van-button>
<van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline <van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline
@ -458,7 +472,8 @@ const goBack = () => {
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe> allowfullscreen></iframe>
</van-popup> </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" <van-field v-model="form.title" label="標題文字" name="" input-align="right" error-message-align="right"
placeholder="請輸入您在名片切換時顯示的文字" :rules="[{ required: true, message: '標題文字必填' }]" /> placeholder="請輸入您在名片切換時顯示的文字" :rules="[{ required: true, message: '標題文字必填' }]" />
<van-field label="是否顯示於感應名片" class="longText" input-align="right"> <van-field label="是否顯示於感應名片" class="longText" input-align="right">
@ -476,11 +491,11 @@ const goBack = () => {
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item" v-for="(card, index) in form.json5.cards" :key="index" <li class="nav-item" v-for="(card, index) in form.json5.cards" :key="index"
@click="form.page = index + 1"> @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 }} {{ index + 1 }}
</button> </button>
</li> </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"> <button type="button" class="nav-link">
<i class="fa fa-plus-circle"></i> 新增 <i class="fa fa-plus-circle"></i> 新增
</button> </button>
@ -504,6 +519,12 @@ const goBack = () => {
@click="delCard(form.page)"></van-button> @click="delCard(form.page)"></van-button>
</template> </template>
</van-field> </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" <van-field v-model="form.json5.cards[form.page - 1].bgColor" label="卡片底色" id="vcard-bgColor"
input-align="right" placeholder="請輸入卡片底色的色碼，如：#333333" :border="false" input-align="right" placeholder="請輸入卡片底色的色碼，如：#333333" :border="false"
@ -542,12 +563,8 @@ const goBack = () => {
</template> </template>
</van-field> </van-field>
<van-field <van-field label="圖片網址連結" v-model="form.json5.cards[form.page - 1].link" :border="false"
label="圖片網址連結" placeholder="需輸入完整網址,http://..,https://..." />
v-model="form.json5.cards[form.page - 1].link"
:border="false"
placeholder="需輸入完整網址,http://..,https://..."
/>
<van-divider :style="{ <van-divider :style="{
color: '#345068', color: '#345068',
@ -555,14 +572,15 @@ const goBack = () => {
padding: '0 16px', padding: '0 16px',
}"><strong>卡片標題</strong></van-divider> }"><strong>卡片標題</strong></van-divider>
<van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title" input-align="right" <van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title"
placeholder="請填寫卡片標題文字" :rules="[{ required: true, message: '請填寫卡片標題文字' }]" /> input-align="right" placeholder="請填寫卡片標題文字" :rules="[{ required: true, message: '請填寫卡片標題文字' }]" />
<van-field v-model="form.json5.cards[form.page - 1].titleSize" is-link readonly label="標題文字大小" <van-field v-model="form.json5.cards[form.page - 1].titleSize" is-link readonly label="標題文字大小"
id="vcard-titleSize" input-align="right" placeholder="請輸入標題文字的色碼，如：#333333" id="vcard-titleSize" input-align="right" placeholder="請輸入標題文字的色碼，如：#333333"
@click="showTitleSizePicker = true" /> @click="showTitleSizePicker = true" />
<van-popup v-model:show="showTitleSizePicker" round position="bottom"> <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-popup>
<van-field v-model="form.json5.cards[form.page - 1].titleColor" label="標題文字顏色" id="vcard-titleColor" <van-field v-model="form.json5.cards[form.page - 1].titleColor" label="標題文字顏色" id="vcard-titleColor"
@ -591,7 +609,8 @@ const goBack = () => {
</van-popup> </van-popup>
<van-field v-model="form.json5.cards[form.page - 1].descColor" label="說明文字顏色" id="vcard-descColor" <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> <template #button>
<input v-model="form.json5.cards[form.page - 1].descColor" type="color" class="form-control-color" /> <input v-model="form.json5.cards[form.page - 1].descColor" type="color" class="form-control-color" />
</template> </template>
@ -620,9 +639,11 @@ const goBack = () => {
<van-field :label="`控制按鈕 ${index + 1}`" :border="false" class="bg-transparent"> <van-field :label="`控制按鈕 ${index + 1}`" :border="false" class="bg-transparent">
<template #button> <template #button>
<van-button size="small" class="bg-transparent border-0" icon="arrow-up" <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" <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" <van-button size="small" class="bg-transparent border-0" icon="delete-o"
@click="delBtn(index)"></van-button> @click="delBtn(index)"></van-button>
</template> </template>
@ -692,9 +713,8 @@ const goBack = () => {
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.edit { .edit {
:deep(.van-van-field__control--min-height){ :deep(.van-van-field__control--min-height) {
min-height: 100px; min-height: 100px;
} }
@ -742,6 +762,12 @@ const goBack = () => {
background-color: #4a677d; background-color: #4a677d;
border-color: #4a677d #4a677d #4a677d; border-color: #4a677d #4a677d #4a677d;
} }
.nav-link.send {
background-color: #ccc;
border-color: #ccc #ccc #ccc;
}
} }
.previewCnt { .previewCnt {
@ -812,5 +838,4 @@ const goBack = () => {
background-color: #fff; background-color: #fff;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save