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

Merge branch 'feature_231129' into dev

Browse Source
main
bruce68410 2 years ago
parent 15af258de7 1acade3753
commit a7de319c42
8 changed files with 841 additions and 618 deletions
Show Stats Download Patch File Download Diff File

6
src/api/index.js
Unescape View File

@ -85,3 +85,9 @@ export const getUserFaviList = async (params) =>
export const addUserFavi = async (params) =>
ajax(`/UserFavi/addUserFavi`, params , "POST");
export const getUserCateList = async () =>
ajax(`/UserCate/getUserCateList`);
export const updateUserCate = async (params) =>
ajax(`/UserCate/updateUserCate`, params , "POST");

15
src/assets/css/main.css
Unescape View File

@ -541,8 +541,17 @@ h1, h2, h3, h4, h5, h6 {
}
/* ========================================= vant ============================================= */
.van-nav-bar {
position: sticky;
top: 0;
z-index: 10001;
}
.van-notice-bar {
position: sticky;
top: 78px;
font-size: 18px;
z-index: 10000;
}
.van-popup.van-toast {
@ -704,6 +713,12 @@ h1, h2, h3, h4, h5, h6 {
object-fit: cover;
}
.bottomBtnCnt {
padding: 15px;
background: -webkit-gradient(linear, left bottom, left top, from(#b2c4ce), color-stop(80%, #b2c4ce), color-stop(90%, rgba(178, 196, 206, 0.5)), to(rgba(178, 196, 206, 0)));
background: linear-gradient(to top, #b2c4ce 0%, #b2c4ce 80%, rgba(178, 196, 206, 0.5) 90%, rgba(178, 196, 206, 0) 100%);
}
/*!
* Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

16
src/assets/sass/layout/_layout.scss
Unescape View File

@ -4,10 +4,21 @@
/* ========================================= vant ============================================= */
.van-nav-bar{
position: sticky;
top:0;
z-index: 10001;
}
.van-notice-bar{
position: sticky;
top:78px;
font-size: 18px;
z-index: 10000;
}
.van-popup{
&.van-toast{
display: flex;
@ -153,6 +164,11 @@
}
}
.bottomBtnCnt{
padding: 15px;
background: linear-gradient(to top,#b2c4ce 0%,#b2c4ce 80%,rgba(178,196,206,.5) 90%,rgba(178,196,206,0) 100%);
}

488
src/views/Address/index.vue
Unescape View File

@ -1,59 +1,208 @@
<script setup>
import liff from "@line/liff";
import { showToast,showSuccessToast } from 'vant';
import { showToast,showSuccessToast , showLoadingToast } from 'vant';
import { getUserFaviList, updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl } from '@/api'
import { getUserFaviList, getUserCateList, updateUserCate } from '@/api'
import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
const setShowPicker = ref(false);
const selectVal1 = ref(0);
const selectVal2 = ref('a');
const selectOpt1 = [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 },
];
const selectOpt2 = [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' },
];
const elitelist = ref([
{
avatar:"https://fakeimg.pl/250x100/",
real_name:"樹林李敏鎬",
introduction:"test",
},
{
avatar:"https://fakeimg.pl/250x100/",
real_name:"樹林李敏鎬",
introduction:"test",
},
{
avatar:"https://fakeimg.pl/250x100/",
real_name:"樹林李敏鎬",
introduction:"test",
},
]);
// let res = await getUserFaviList();
// if (res.code === 200) {
// elitelist.value.data = res.data;
// console.log(elitelist)
// }
const selectVal1 = ref('all');
const selectVal2 = ref('普通');
const selectOpt1 = ref([{ text: '全部', value: 'all' }]);
const selectOpt2 = ref([{ text: '重要', value: '重要' },{ text: '普通', value: '普通' }]);
const addressList = ref({
data:[
{
id:"a1",
real_name:"樹林李敏鎬",
line:"test",
user_cate_id:''
},
{
id:"a2",
real_name:"五條悟",
line:"test",
user_cate_id:''
},
{
id:"a3",
real_name:"機哩瓜啦",
line:"test",
user_cate_id:''
},
]
});
const modalForm = ref({
page: 1,
sort:[
{
"id": 1,
"name": "第一類",
"children": [
{"id": 4,"name": "普通"},
{"id": 5,"name": "重要"}
]
},
{
"id": 2,
"name": "第二類",
"children": [
{"id": 6,"name": "普通"},
{"id": 7,"name": "重要"}
]
},
{
"id": 3,
"name": "第三類",
"children": [
{"id": 8,"name": "普通"},
{"id": 9,"name": "重要"},
{"name": "特殊"}
]
}
]
});
onMounted(async() => {
let res = await getUserFaviList();
if (res.code === 200) {
addressList.value.data = res.data;
}
res = await getUserCateList();
if (res.code === 200) {
let sort = modalForm.value.sort;
sort.forEach((item, i) => {
selectOpt1.value.push({
text:item.name,
value:i
})
});
}
});
const sel1Change = (value) => {
if(value != 'all'){
let child = modalForm.value.sort[value].children;
let ary = [];
child.forEach((item, i) => {
ary.push({
text:item.name,
value:item.name
})
});
selectOpt2.value = ary;
selectVal2.value = child[0].name;
}else{
selectOpt2.value = [];
selectVal2.value = '';
}
};
const addCard = () => {
modalForm.value.sort.push(
{
"name": "",
"children": [
{
"name": "普通"
}
]
}
);
modalForm.value.page = modalForm.value.sort.length;
};
const delCard = (page) => {
if (page > 1) {
modalForm.value.page = page - 1;
}
modalForm.value.sort.splice(page - 1, 1);
};
const addBtn = (page) => {
if (!modalForm.value.sort[page - 1].children) {
modalForm.value.sort[page - 1].children = [];
}
modalForm.value.sort[page - 1].children.push({
"id": '',
"name": ""
});
};
const moveCard = (type, page) => {
if (type === 0) {
if (page !== 1) {
[modalForm.value.sort[page - 1], modalForm.value.sort[page - 2]] = [
modalForm.value.sort[page - 2],
modalForm.value.sort[page - 1],
];
modalForm.value.page = page - 1;
}
} else {
if (page !== modalForm.value.sort.length) {
[modalForm.value.sort[page], modalForm.value.sort[page - 1]] = [
modalForm.value.sort[page - 1],
modalForm.value.sort[page],
];
modalForm.value.page = page + 1;
}
}
};
const delBtn = (index) => {
modalForm.value.sort[modalForm.value.page - 1].children.splice(index, 1);
if (modalForm.value.sort[modalForm.value.page - 1].children.length === 0) {
delete modalForm.value.sort[modalForm.value.page - 1].children;
}
};
const moveBtn = (type, index) => {
if (type === 0) {
if (index !== 0) {
[
modalForm.value.sort[modalForm.value.page - 1].children[index],
modalForm.value.sort[modalForm.value.page - 1].children[index - 1],
] = [
modalForm.value.sort[modalForm.value.page - 1].children[index - 1],
modalForm.value.sort[modalForm.value.page - 1].children[index],
];
}
} else {
if (index + 1 !== modalForm.value.sort[modalForm.value.page - 1].children.length) {
[
modalForm.value.sort[modalForm.value.page - 1].children[index + 1],
modalForm.value.sort[modalForm.value.page - 1].children[index],
] = [
modalForm.value.sort[modalForm.value.page - 1].children[index],
modalForm.value.sort[modalForm.value.page - 1].children[index + 1],
];
}
}
};
const onSubmit = async () => {
let res = await updateUserCate(modalForm.value.sort)
if (res.code === 200) {
showSuccessToast('更新成功')
// router.push('/member')
} else {
console.log(res.code);
showToast('更新失敗')
}
};
</script>
<template>
<div class="member page">
<div class="address page">
<van-nav-bar
class="bg-skyBlue py-1"
left-arrow
@ -69,32 +218,34 @@ const elitelist = ref([
</template>
<template #right>
<h4><i class="fa-solid fa-sliders text-white" :style="{opacity:0.5}"></i></h4>
<h4><i class="fa-solid fa-gear text-white" :style="{opacity:0.5}"></i></h4>
</template>
</van-nav-bar>
<div class="content">
<van-cell-group inset>
<van-dropdown-menu>
<van-dropdown-item v-model="selectVal1" :options="selectOpt1" />
<van-dropdown-item v-model="selectVal1" :options="selectOpt1" @change="sel1Change"/>
<van-dropdown-item v-model="selectVal2" :options="selectOpt2" />
</van-dropdown-menu>
</van-cell-group>
<van-cell-group inset>
<!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad" -->
<van-list class="accordion" id="accordion">
<van-list>
<div class="list-item" v-for="(item, index) in elitelist" :key="index">
<div class="list-item" v-for="(item, index) in addressList.data" :data-cateid="item.user_cate_id" :key="index">
<div class="left">
<div class="avatar"><img :src="item.avatar"></div>
<div class="avatar"><img :src="`https://fakeimg.pl/350x200/?text=${item.id}`"></div>
<div class="text">
<h5 class="name ellipsis">{{ item.real_name }}</h5>
<div class="desc ellipsis">@{{ item.introduction }}</div>
<div class="desc ellipsis">@{{ item.line }}</div>
</div>
</div>
<div class="right">
<van-button size="small" class="border-0">
<h5><i class="fa-solid fa-heart text-darkBlue"></i></h5>
</van-button>
<van-button size="small" class="border-0" :url="`line://ti/p/@${item.line}`">
<h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
</van-button>
</div>
@ -105,65 +256,220 @@ const elitelist = ref([
</van-cell-group>
</div>
<van-dialog
v-model:show="setShowPicker"
width="400"
showCancelButton
confirm-button-text="確認修改"
@confirm="onSubmit"
>
<van-form @submit="onSubmit">
<keep-alive>
<div id="app">
<div class="bg-lightPink px-2 pt-3">
<ul class="nav nav-tabs">
<li
class="nav-item"
v-for="(card, index) in modalForm.sort"
:key="index"
@click="modalForm.page = index + 1"
>
<button
type="button"
class="nav-link"
:class="{ active: modalForm.page === index + 1 }"
>
{{ index + 1 }}
</button>
</li>
<li
class="nav-item"
@click="addCard"
v-if="modalForm.sort.length < 10"
>
<button type="button" class="nav-link">
<i class="fa fa-plus-circle"></i>
</button>
</li>
</ul>
</div>
<van-cell-group class="m-0 pt-2">
<van-field
label="調整卡片順序"
:border="false"
v-if="modalForm.sort.length > 1"
>
<template #button>
<van-button
size="small"
class="ml-1 btn-skyBlue"
icon="arrow-left"
@click="moveCard(0, modalForm.page)"
>前移</van-button
>
<van-button
size="small"
class="ml-1 btn-skyBlue"
icon="arrow"
@click="moveCard(1, modalForm.page)"
>後移</van-button
>
<van-button
size="small"
class="ml-1 btn-tomatoRed"
icon="delete-o"
@click="delCard(modalForm.page)"
></van-button>
</template>
</van-field>
<van-field
v-model="modalForm.sort[modalForm.page - 1].name"
label="分類名稱"
id="vcard-title"
input-align="right"
placeholder="請輸入分類名稱"
/>
<div class="listCnt">
<div
class="item"
v-for="(btn, index) in modalForm.sort[modalForm.page - 1].children"
:key="index"
>
<van-field
v-model="btn.name"
id="cardbtn-text-0"
placeholder="請輸入子項目名稱"
class="bg-transparent"
>
<template #button>
<van-button
size="small"
class="bg-transparent border-0"
icon="arrow-up"
@click="moveBtn(0, index)"
v-if="modalForm.sort[modalForm.page - 1].children.length > 1"
></van-button>
<van-button
size="small"
class="bg-transparent border-0"
icon="arrow-down"
@click="moveBtn(1, index)"
v-if="modalForm.sort[modalForm.page - 1].children.length > 1"
></van-button>
<van-button
size="small"
class="bg-transparent border-0"
icon="delete-o"
@click="delBtn(index)"
></van-button>
</template>
</van-field>
</div>
<van-button
block
class="btn-tomatoRed"
icon="add-o"
@click="addBtn(modalForm.page)"
>
<h6>新增按鈕</h6>
</van-button>
</div>
</van-cell-group>
</div>
</keep-alive>
</van-form>
</van-dialog>
</div>
</template>
<style lang="less" scoped>
.content{
min-height: calc(100vh - 54px);
}
.van-list {
.list-item {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 15px 0;
margin: 0 15px;
border-bottom: 1px #e3e3e3 solid;
.left {
flex: 1 0 0%;
.address{
.content{
min-height: calc(100vh - 54px);
}
.van-list {
.list-item {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 15px 0;
margin: 0 15px;
border-bottom: 1px #e3e3e3 solid;
.left {
flex: 1 0 0%;
display: flex;
align-items: center;
.avatar {
width: 55px;
min-width: 55px;
aspect-ratio: 1/1;
border-radius: 50%;
margin-right: 10px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
.avatar {
width: 55px;
min-width: 55px;
aspect-ratio: 1/1;
border-radius: 50%;
margin-right: 10px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.name {
font-weight: bold;
}
}
.name {
font-weight: bold;
.right {
flex: 0 0 auto;
}
}
.right {
flex: 0 0 auto;
}
.bottom {
flex: 1 0 100%;
border: 1px #e3e3e3 solid;
border-radius: 10px;
padding: 0 10px;
margin: 0;
transition: all .2s;
.bottom {
flex: 1 0 100%;
border: 1px #e3e3e3 solid;
border-radius: 10px;
padding: 0 10px;
margin: 0;
transition: all .2s;
&.show {
padding: 10px;
margin: 5px 0;
&.show {
padding: 10px;
margin: 5px 0;
}
}
}
}
.nav-tabs{
.nav-link{
color: #4a677d;
background-color: #fff;
border-color: transparent;
margin-right: 4px;
}
.nav-item.show .nav-link,
.nav-link.active {
color: #fff;
background-color: #4a677d;
border-color: #4a677d #4a677d #4a677d;
}
}
.listCnt{
padding: 15px;
.item{
margin-bottom: 15px;
border: 1px #ddd solid;
border-radius: 5px;
}
}
}
</style>

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

@ -98,8 +98,7 @@ const sizeColumns = ref([
{ text: "5xl", value: "5xl" },
]);
watch(
() => form.value.title,
watch(() => form.value.title,
(newVal) => {
form.value.json5.altText = newVal;
}
@ -301,33 +300,33 @@ const handleSubmit = async () => {
<template>
<div class="edit page">
<van-form @submit="handleSubmit">
<van-nav-bar
class="bg-skyBlue py-1"
left-arrow
@click-left="$router.push('/')"
<van-nav-bar
class="bg-skyBlue py-1"
left-arrow
@click-left="$router.push('/')"
>
<template #title>
<h5 class="text-white mb-1"><strong>商務卡片設定</strong></h5>
</template>
<template #left>
<h4>
<i
class="fa-solid fa-angle-left text-white"
:style="{ opacity: 0.5 }"
></i>
</h4>
</template>
</van-nav-bar>
<div class="content">
<van-cell-group inset class="">
<template #title>
<h5 class="text-white mb-1"><strong>商務卡片設定</strong></h5>
</template>
<template #left>
<h4>
<i
class="fa-solid fa-angle-left text-white"
:style="{ opacity: 0.5 }"
></i>
</h4>
</template>
</van-nav-bar>
<div class="content">
<van-form @submit="handleSubmit">
<van-cell-group inset>
<van-cell class="bg-lightPink">
<template #title>
<h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
</template>
<template #value>
<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"
@ -389,7 +388,6 @@ const handleSubmit = async () => {
<keep-alive>
<div id="app">
<!-- tab -->
<div class="bg-lightPink px-2 pt-3">
<ul class="nav nav-tabs">
<li
@ -417,249 +415,238 @@ const handleSubmit = async () => {
</li>
</ul>
</div>
<!-- /tab -->
<div class="py-2">
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>卡片設定</strong></van-divider
>
<van-field
label="調整卡片順序"
:border="false"
v-if="form.json5.cards.length > 1"
>
<template #button>
<van-button
size="small"
class="ml-1 btn-skyBlue"
icon="arrow-left"
@click="moveCard(0, form.page)"
>前移</van-button
>
<van-button
size="small"
class="ml-1 btn-skyBlue"
icon="arrow"
@click="moveCard(1, form.page)"
>後移</van-button
>
<van-button
size="small"
class="ml-1 btn-tomatoRed"
icon="delete-o"
@click="delCard(form.page)"
></van-button>
</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"
:rules="[{ required: true, message: '卡片底色色碼必填' }]"
>
<template #button>
<input
v-model="form.json5.cards[form.page - 1].bgColor"
type="color"
class="form-control-color"
/>
</template>
</van-field>
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>內容圖片設定</strong></van-divider
>
<van-field
v-model="form.json5.cards[form.page - 1].ratio"
:border="false"
>
<template #input>
<van-uploader
:after-read="afterRead"
:max-count="1"
name="cardimage"
@delete="handleDelete"
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>卡片設定</strong></van-divider
>
<van-field
label="調整卡片順序"
:border="false"
v-if="form.json5.cards.length > 1"
>
<template #button>
<van-button
size="small"
class="ml-1 btn-skyBlue"
icon="arrow-left"
@click="moveCard(0, form.page)"
>前移</van-button
>
<van-button
size="small"
class="ml-1 btn-skyBlue"
icon="arrow"
@click="moveCard(1, form.page)"
>後移</van-button
>
<van-button
size="small"
class="ml-1 btn-tomatoRed"
icon="delete-o"
@click="delCard(form.page)"
></van-button>
</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"
:rules="[{ required: true, message: '卡片底色色碼必填' }]"
>
<template #button>
<input
v-model="form.json5.cards[form.page - 1].bgColor"
type="color"
class="form-control-color"
/>
</template>
</van-field>
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>內容圖片設定</strong></van-divider
>
<van-field
v-model="form.json5.cards[form.page - 1].ratio"
:border="false"
>
<template #input>
<van-uploader
:after-read="afterRead"
:max-count="1"
name="cardimage"
@delete="handleDelete"
>
<template
v-if="form.json5.cards[form.page - 1].image.length > 0"
>
<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=""
/>
<p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
<i class="fa-solid fa-arrow-up"></i> 點擊更換圖片
</p>
</div>
</template>
<template v-else>
<div class="upload-main">
<img
class="upload-img"
src="@/assets/images/upload.jpg"
/>
<p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
<i class="fa-solid fa-arrow-up"></i> 請上傳圖片
</p>
</div>
</template>
</van-uploader>
</template>
</van-field>
<van-field
v-model="form.json5.cards[form.page - 1].ratio"
label="圖片長寬比"
id="vcard-ratio"
input-align="right"
:border="false"
placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
/>
<div class="upload-main">
<img
class="upload-img"
:src="form.json5.cards[form.page - 1].image"
alt=""
/>
<p class="ml-3 px-2 py-1 text-white bg-moBlue rounded-pill">
<i class="fa-solid fa-arrow-up"></i> 點擊更換圖片
</p>
</div>
</template>
<template v-else>
<div class="upload-main">
<img
class="upload-img"
src="@/assets/images/upload.jpg"
/>
<p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
<i class="fa-solid fa-arrow-up"></i> 請上傳圖片
</p>
</div>
</template>
</van-uploader>
</template>
</van-field>
<!-- <van-field
v-model="form.json5.cards[form.page - 1].link"
label="圖片網址連結"
id="vcard-link"
input-align="right"
placeholder="連結(需輸入完整網址,http://..,https://...)"
/> -->
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>卡片標題</strong></van-divider
>
<van-field
v-model="form.json5.cards[form.page - 1].ratio"
label="圖片長寬比"
id="vcard-ratio"
input-align="right"
:border="false"
placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
/>
<van-field
v-model="form.json5.cards[form.page - 1].title"
label="標題文字"
id="vcard-title"
input-align="right"
placeholder="連結(需輸入完整網址,http://..,https://...)"
:rules="[{ required: true, message: '請填寫卡片標題文字' }]"
/>
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
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="連結(需輸入完整網址,http://..,https://...)"
: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-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-popup
v-model:show="showTitleSizePicker"
round
position="bottom"
>
<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"
input-align="right"
placeholder="請輸入標題文字的色碼，如：#333333"
:border="false"
:rules="[{ required: true, message: '標題文字色碼必填' }]"
>
<template #button>
<input
v-model="form.json5.cards[form.page - 1].titleColor"
type="color"
class="form-control-color"
/>
</van-popup>
<van-field
v-model="form.json5.cards[form.page - 1].titleColor"
label="標題文字顏色"
id="vcard-titleColor"
input-align="right"
placeholder="請輸入標題文字的色碼，如：#333333"
:border="false"
:rules="[{ required: true, message: '標題文字色碼必填' }]"
>
<template #button>
<input
v-model="form.json5.cards[form.page - 1].titleColor"
type="color"
class="form-control-color"
/>
</template>
</van-field>
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>卡片說明文字</strong></van-divider
>
</template>
</van-field>
<van-field
v-model="form.json5.cards[form.page - 1].desc"
label="說明文字"
label-align="top"
id="vcard-desc"
type="textarea"
maxlength="50"
placeholder="請填寫卡片說明文字"
show-word-limit
:rules="[{ required: true, message: '請填寫卡片說明文字' }]"
/>
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>卡片說明文字</strong></van-divider
>
<van-field
v-model="form.json5.cards[form.page - 1].desc"
label="說明文字"
label-align="top"
id="vcard-desc"
type="textarea"
maxlength="50"
placeholder="請填寫卡片說明文字"
show-word-limit
:rules="[{ required: true, message: '請填寫卡片說明文字' }]"
/>
<van-field
v-model="form.json5.cards[form.page - 1].descSize"
is-link
readonly
label="說明文字大小"
id="vcard-descSize"
input-align="right"
placeholder="請輸入說明文字的色碼，如：#333333"
@click="showDescSizePicker = true"
<van-field
v-model="form.json5.cards[form.page - 1].descSize"
is-link
readonly
label="說明文字大小"
id="vcard-descSize"
input-align="right"
placeholder="請輸入說明文字的色碼，如：#333333"
@click="showDescSizePicker = true"
/>
<van-popup
v-model:show="showDescSizePicker"
round
position="bottom"
>
<van-picker
:columns="sizeColumns"
@cancel="showDescSizePicker = false"
@confirm="onDescSizeConfirm"
/>
<van-popup
v-model:show="showDescSizePicker"
round
position="bottom"
>
<van-picker
:columns="sizeColumns"
@cancel="showDescSizePicker = false"
@confirm="onDescSizeConfirm"
</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: '說明文字色碼必填' }]"
>
<template #button>
<input
v-model="form.json5.cards[form.page - 1].descColor"
type="color"
class="form-control-color"
/>
</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: '說明文字色碼必填' }]"
>
<template #button>
<input
v-model="form.json5.cards[form.page - 1].descColor"
type="color"
class="form-control-color"
/>
</template>
</van-field>
</div>
</template>
</van-field>
<van-divider
:style="{
@ -674,14 +661,14 @@ const handleSubmit = async () => {
<template #button>
<van-button
size="small"
class="ml-1 btn-outline-skyBlue"
class="ml-1 btn-tomatoRed"
icon="add-o"
@click="addBtn(form.page)"
><h6>新增按鈕</h6></van-button
>
<van-button
size="small"
class="ml-1 btn-outline-skyBlue"
class="ml-1 btn-skyBlue"
icon="share-o"
@click="addShareBtn(form.page)"
><h6>新增分享按鈕</h6></van-button
@ -788,90 +775,92 @@ const handleSubmit = async () => {
</div>
</div>
</div>
<div class="px-5 pb-4">
<van-button block class="btn-darkBlue" native-type="submit">
<h6>名片確認 & 建立</h6>
</van-button>
</div>
</div>
</keep-alive>
</van-cell-group>
</div>
</van-form>
<van-sticky position="bottom">
<div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" native-type="submit">名片確認 & 建立</van-button>
</div>
</van-sticky>
</van-form>
</div>
</div>
</template>
<style lang="less" scoped>
.colorCube,
.colorCube:valid {
appearance: none;
background: 0 0;
border: 1px solid #ced4da;
height: 30px;
padding: 0 2px;
border-radius: 5px;
}
.flex-section {
width: 100%;
}
.van-field__control{
justify-content: center;
.upload-main {
flex-direction: column;
.upload-img {
margin: 5px 0;
width: 250px;
}
.edit{
.colorCube,.colorCube:valid {
appearance: none;
background: 0 0;
border: 1px solid #ced4da;
height: 30px;
padding: 0 2px;
border-radius: 5px;
}
}
.nav-tabs{
.nav-link{
color: #4a677d;
background-color: #fff;
border-color: transparent;
margin-right: 4px;
.flex-section {
width: 100%;
}
.nav-item.show .nav-link,
.nav-link.active {
color: #fff;
background-color: #4a677d;
border-color: #4a677d #4a677d #4a677d;
:deep .van-field__control{
justify-content: center;
.upload-main {
flex-direction: column;
.upload-img {
margin: 5px 0;
width: 250px;
}
}
}
}
.previewCnt{
display: flex;
justify-content: center;
padding: 15px 0;
background-color: #333;
.card{
width:300px;
border: none;
// transform: scale(0.75);
overflow: hidden;
.card-body{
padding: 15px;
.nav-tabs{
.nav-link{
color: #4a677d;
background-color: #fff;
border-color: transparent;
margin-right: 4px;
}
.nav-item.show .nav-link,
.nav-link.active {
color: #fff;
background-color: #4a677d;
border-color: #4a677d #4a677d #4a677d;
}
}
}
.cardCnt{
padding: 15px;
.card{
margin-bottom: 20px;
.card-header{
padding: 0;
background-color: #ddd ;
border: none;
}
.previewCnt{
display: flex;
justify-content: center;
padding: 15px 0;
background-color: #333;
.card{
width:300px;
border: none;
// transform: scale(0.75);
overflow: hidden;
.card-body{
padding:10px 0;
padding: 15px;
}
}
}
.cardCnt{
padding: 15px;
.card{
margin-bottom: 20px;
.card-header{
padding: 0;
background-color: #ddd ;
border: none;
}
.card-body{
padding:10px 0;
}
}
}
}
</style>

12
src/views/Home/index.vue
Unescape View File

@ -425,12 +425,14 @@ const handleLogout = () => {
</van-field>
</van-cell-group>
<div class="px-3">
<van-button size="normal" block class="bg-darkBlue text-white border-0" @click="router.push('/send')">
<h5><i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片</h5>
</van-button>
<van-sticky position="bottom">
<div class="bottomBtnCnt">
<van-button size="normal" block class="bg-darkBlue text-white border-0" @click="router.push('/send')">
<h5><i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片</h5>
</van-button>
</div>
</van-sticky>
</div>
</div>

259
src/views/Member/index.vue
Unescape View File

@ -32,8 +32,6 @@ const router = useRouter()
const form = ref({ addon: [] })
const uInfoForm = ref({ addon: [] })
const genderChecked = ref()
const resourceActive = ref('1');
@ -78,24 +76,16 @@ const crop = ref({
onMounted(async () => {
let userRes = await getUserInfo()
if (userRes.code === 200) {
uInfoForm.value = userRes.data
console.log("userRes:",userRes)
form.value = userRes.data
}
// let userExtraRes = await getUserExtra()
// console.log(userExtraRes.code)
// if (userExtraRes.code === 200) {
// // form.value = userExtraRes.data
// console.log("userExtraRes:",userExtraRes)
// }
//取得區域資料
let areaRes = await getAreaList()
if (areaRes.code === 200) {
areaColumns.value = areaRes.data
//取得區域名稱
if (areaRes.data.length > 0) {
areaName.value = _.find(areaRes.data, { value: uInfoForm.value.area }).text
areaName.value = _.find(areaRes.data, { value: form.value.area }).text
}
}
@ -106,7 +96,7 @@ onMounted(async () => {
workColumns.value = workRes.data
//取得工作性質名稱
if (workRes.data.length > 0) {
workName.value = _.find(workRes.data, { value: uInfoForm.value.work }).text
workName.value = _.find(workRes.data, { value: form.value.work }).text
}
}
@ -195,27 +185,10 @@ const onSubmit = async () => {
message: '資料更新中...',
forbidClick: true,
});
// console.log(form.value,"test");
let res = await updateCard(form.value)
if (res.code === 200) {
showSuccessToast('更新成功')
router.push('/member')
} else {
showToast.fail('更新失敗')
}
};
const userInfoSubmit = async (values) => {
showLoadingToast({
duration: 0,
message: '資料更新中...',
forbidClick: true,
});
let res = await updateUserInfo(values)
console.log(form.value,"test");
let res = await getUserInfo(form.value)
if (res.code === 200) {
showSuccessToast('更新成功')
userStore.getUserData();
router.push('/member')
} else {
showToast.fail('更新失敗')
@ -226,28 +199,13 @@ const searchChecked = ref(true);
const searchOnUpdateValue = (newValue) => {
showConfirmDialog({
title: '提醒',
message: '是否切换开关？',
message: '是否切换開關？',
}).then(() => {
searchChecked.value = newValue;
});
};
const userExtraSubmit = async (values) => {
// showLoadingToast({
// duration: 0,
// message: '資料更新中...',
// forbidClick: true,
// });
let res = await updateUserExtra(values)
if (res.code === 200) {
showSuccessToast('更新成功')
// router.push('/member')
} else {
showFailToast('更新失敗')
}
};
// 區域
const showAreaPicker = ref(false);
const areaColumns = ref([]);
@ -255,7 +213,7 @@ const areaName = ref('');
const onAreaConfirm = (value) => {
areaName.value = value.selectedOptions[0].text
uInfoForm.area = value.selectedOptions[0].value
form.value.area = value.selectedOptions[0].value
showAreaPicker.value = false
}
@ -266,45 +224,12 @@ const workName = ref('');
const onWorkConfirm = (value) => {
workName.value = value.selectedOptions[0].text
uInfoForm.work = value.selectedOptions[0].value
form.value.work = value.selectedOptions[0].value
showAreaPicker.value = false
}
// END: 基本資料
// START: 社群分享
const userLinkSubmit = async (values) => {
// showLoadingToast({
// duration: 0,
// message: '資料更新中...',
// forbidClick: true,
// });
let res = await updateUserLink(values)
if (res.code === 200) {
showSuccessToast('更新成功')
// router.push('/member')
} else {
showFailToast('更新失敗')
}
};
const userAddonSubmit = async (values) => {
// showLoadingToast({
// duration: 0,
// message: '資料更新中...',
// forbidClick: true,
// });
console.log(form.value.addon)
let res = await updateUserAddon(form.value.addon)
if (res.code === 200) {
showSuccessToast('更新成功')
} else {
showFailToast('更新失敗')
}
};
// END: 社群分享
@ -340,6 +265,7 @@ const handleSearch = async () => {
let res = await searchConnection(search.value);
if (res.code === 200) {
tab2list.value = res.data;
console.log(tab2list.value)
}
};
@ -452,12 +378,12 @@ const handleChangeTplSubmit = async() => {
</van-tabs>
<div class="content cnt0" v-show="tabActive === 0">
<van-cell-group inset>
<van-form @submit="userInfoSubmit">
<van-form @submit="onSubmit">
<van-cell-group inset>
<div class="text-center p-4">
<van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
<div class="upload-main">
<img class="upload-img avatar" :src="uInfoForm.avatar" alt="" v-if="uInfoForm.avatar" />
<img class="upload-img avatar" :src="form.avatar" alt="" v-if="form.avatar" />
<img class="upload-img avatar" src="@/assets/images/upload.jpg" alt="" v-else />
<div class="ml-3">
<p class="text-skyBlue mb-2">上傳圖片，預設為Line頭像</p>
@ -465,38 +391,38 @@ const handleChangeTplSubmit = async() => {
</div>
</div>
</van-uploader>
<van-field v-model="uInfoForm.mark" rows="3" type="textarea" maxlength="100" name="mark" placeholder="請輸入100字以內的簡介"
<van-field v-model="form.mark" rows="3" type="textarea" maxlength="100" name="mark" placeholder="請輸入100字以內的簡介"
show-word-limit :style="{ border: '1px #e3e3e3 solid', borderRadius: '6px' }" />
</div>
<van-field v-model="uInfoForm.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
<van-field v-model="form.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
:rules="[{ required: true, message: '姓名為必填' }]" />
<van-field v-model="uInfoForm.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
<van-field v-model="form.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
:rules="[{ required: true, message: '公司名稱必填' }]" />
<van-field v-model="uInfoForm.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
<van-field v-model="uInfoForm.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
<van-field v-model="form.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
<van-field v-model="form.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
:rules="[{ required: true, message: '手機號必填' }, { pattern: /\d{10}/, message: '手機號格式錯誤' }]" />
<van-field v-model="uInfoForm.tel" label="市話" name="tel" type="tel" placeholder="請輸入您的市話"
<van-field v-model="form.tel" label="市話" name="tel" type="tel" placeholder="請輸入您的市話"
:rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]" />
<van-field v-model="uInfoForm.email" label="Email" name="email" placeholder="請輸入您的Email"
<van-field v-model="form.email" label="Email" name="email" placeholder="請輸入您的Email"
:rules="[{ required: true, message: 'Email必填' }, { pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/, message: 'Email格式錯誤' }]" />
<van-field v-model="uInfoForm.address" label="住址" name="address" placeholder="請輸入您的地址" />
<van-field v-model="uInfoForm.age" label="年齡" name="age" placeholder="請輸入您的年齡" />
<van-field v-model="form.address" label="住址" name="address" placeholder="請輸入您的地址" />
<van-field v-model="form.age" label="年齡" name="age" placeholder="請輸入您的年齡" />
<van-field name="sex" label="性別">
<template #input>
<van-radio-group v-model="uInfoForm.sex" direction="horizontal" checked-color="#5b7b94">
<van-radio-group v-model="form.sex" direction="horizontal" checked-color="#5b7b94">
<van-radio name="0">男</van-radio>
<van-radio name="1">女</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field v-model="uInfoForm.area" is-link readonly name="area" label="區域" placeholder="請選擇區域"
<van-field v-model="form.area" is-link readonly name="area" label="區域" placeholder="請選擇區域"
@click="showAreaPicker = true" />
<van-popup v-model:show="showAreaPicker" position="bottom">
<van-picker :columns="areaColumns" confirm-button-text="確認" cancel-button-text="取消" @confirm="onAreaConfirm" @cancel="showAreaPicker = false" />
</van-popup>
<van-field v-model="uInfoForm.work" is-link readonly name="work" label="工作性質" placeholder="請選擇工作性質"
<van-field v-model="form.work" is-link readonly name="work" label="工作性質" placeholder="請選擇工作性質"
@click="showWorkPicker = true" />
<van-popup v-model:show="showWorkPicker" position="bottom">
<van-picker :columns="workColumns" confirm-button-text="確認" cancel-button-text="取消" @confirm="onWorkConfirm" @cancel="showWorkPicker = false" />
@ -508,20 +434,10 @@ const handleChangeTplSubmit = async() => {
<van-switch v-model="searchChecked" @update:model-value="searchOnUpdateValue" size="18px"
active-color="#5b7b94" inactive-color="#888888" />
</template>
</van-field>
</van-field>
</van-cell-group>
<div class="p-5">
<van-button block class="btn-darkBlue" native-type="submit">
確認修改
</van-button>
</div>
</van-form>
</van-cell-group>
<van-cell-group inset v-if="userStore.userData.level === 3">
<van-form @submit="userExtraSubmit">
<van-cell-group inset v-if="userStore.userData.level === 3">
<van-cell class="text-center bg-lightPink py-3">
<template #title>
<h6 class="text-darkBlue"><strong>人脈資訊</strong></h6>
@ -560,19 +476,19 @@ const handleChangeTplSubmit = async() => {
<van-field v-model="form.demand_link" label="分享網址：" name="demand_link" placeholder="需求連結" />
</van-collapse-item>
</van-collapse>
</van-cell-group>
<div class="p-5">
<van-button block class="btn-darkBlue" native-type="submit">
確認修改
</van-button>
<van-sticky position="bottom">
<div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
</div>
</van-form>
</van-cell-group>
</van-sticky>
</van-form>
</div>
<div class="content cnt1" v-show="tabActive === 1">
<van-cell-group inset>
<van-form @submit="userLinkSubmit">
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field v-model="form.url" label="個人網頁" name="url" placeholder="請輸入您的個人網頁" />
<van-field v-model="form.line" label="Line" name="line" placeholder="請輸入您的Line ID" />
<van-field v-model="form.facebook" label="Facebook" name="facebook" placeholder="請輸入您的Facebook" />
@ -580,23 +496,15 @@ const handleChangeTplSubmit = async() => {
<van-field v-model="form.youtube" label="YouTube" name="youtube" placeholder="請輸入您的YouTube" />
<van-field v-model="form.wechat" label="WeChat" name="wechat" placeholder="請輸入您的WeChat" />
<van-field v-model="form.tiktok" label="Tiktok" name="tiktok" placeholder="請輸入您的Tiktok" />
</van-cell-group>
<div class="px-5 py-4">
<van-button block class="btn-darkBlue" native-type="submit">
<h6>確認修改</h6>
</van-button>
</div>
</van-form>
</van-cell-group>
<van-cell-group inset>
<van-form @submit="userAddonSubmit">
<van-cell-group inset>
<van-cell class="bg-lightPink">
<template #title>
<h6 class="text-darkBlue"><strong>相關連結</strong></h6>
</template>
<template #value>
<van-button size="small" class="btn-outline-darkBlue" @click="onAddBtn">
<van-button size="small" @click="onAddBtn">
<h6>新增連結</h6>
</van-button>
</template>
@ -604,7 +512,7 @@ const handleChangeTplSubmit = async() => {
<van-field v-for="(item, idx) in form.addon" :key="idx">
<template #label>
<van-field v-model="item.name" name="" maxlength="10" placeholder="請輸入您的連結名稱"
<van-field v-model="item.name" name="" maxlength="15" placeholder="請輸入名稱"
:rules="[{ required: true, message: '連結名稱必填' }]" />
</template>
<template #input>
@ -620,36 +528,14 @@ const handleChangeTplSubmit = async() => {
@click="onMoveBtn(1, idx)"></van-button>
</template>
</van-field>
</van-cell-group>
<!-- <van-swipe-cell v-for="(item,idx) in form.addon" :key="idx">
<template #left>
<van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
</template>
<van-field
v-model="item.name"
name=""
placeholder="請輸入您的連結名稱"
:rules="[{ required: true, message: '連結名稱必填' }]"
/>
<van-field
v-model="item.link"
name=""
placeholder="請輸入您的按鈕連結"
:rules="[{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
/>
<template #right>
<van-button type="primary" icon="arrow-up" plain hairline @click="onMoveBtn(0,idx)">上移</van-button>
<van-button type="primary" icon="arrow-down" plain hairline @click="onMoveBtn(1,idx)">下移</van-button>
</template>
</van-swipe-cell> -->
<div class="px-5 py-4">
<van-button block class="btn-darkBlue" native-type="submit">
<h6>確認修改</h6>
</van-button>
<van-sticky position="bottom">
<div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
</div>
</van-form>
</van-cell-group>
</van-sticky>
</van-form>
</div>
<div class="content cnt2" v-show="tabActive === 2">
@ -744,37 +630,37 @@ const handleChangeTplSubmit = async() => {
</div>
<div class="content cnt3" v-show="tabActive === 3">
<van-cell-group inset>
<van-form>
<van-form>
<van-cell-group inset>
<div class="block">
<van-image width="100%" position="top" fit="cover" :src="selectedTpl" />
</div>
</van-cell-group>
<div class="d-flex justify-content-center py-3">
<van-button class="btn-darkBlue px-5" @click="handleChangeTplSubmit">
<i class="fa-regular fa-pen-to-square text-white"></i> 確認修改
</van-button>
</div>
</van-form>
</van-cell-group>
<van-cell-group inset>
<van-cell class="text-center bg-lightPink py-3">
<template #title>
<h6 class="text-darkBlue"><strong>NFC感應式版型切換</strong></h6>
</template>
</van-cell>
<van-cell-group inset>
<van-cell class="text-center bg-lightPink py-3">
<template #title>
<h6 class="text-darkBlue"><strong>NFC感應式版型切換</strong></h6>
</template>
</van-cell>
<van-row>
<van-col span="12" v-for="(item, index) in tab3list" :key="index">
<div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">
<div class="imgCnt">
<van-image :src="item.image" />
<van-row>
<van-col span="12" v-for="(item, index) in tab3list" :key="index">
<div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">
<div class="imgCnt">
<van-image :src="item.image" />
</div>
</div>
</div>
</van-col>
</van-row>
</van-cell-group>
</van-col>
</van-row>
</van-cell-group>
<van-sticky position="bottom">
<div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" @click="handleChangeTplSubmit">確認修改</van-button>
</div>
</van-sticky>
</van-form>
</div>
<!-- <Footer/> -->
@ -803,7 +689,8 @@ const handleChangeTplSubmit = async() => {
.member{
.content{
min-height: calc(100vh - 142px);
}
padding-bottom: 0;
}
.cnt2 {
.van-list {
.list-item {
@ -865,7 +752,7 @@ const handleChangeTplSubmit = async() => {
.cnt3 {
.block {
height: 500px;
height: 110vw;
text-align: center;
background-color: #000;
padding: 20px 35px;

24
src/views/Send/index.vue
Unescape View File

@ -205,7 +205,7 @@ const changeTpl = async (val) => {
</script>
<template>
<div class="member page">
<div class="member page bg-lightBlue">
<van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
<template #title>
<h5 class="text-white mb-1"><strong>名片分享</strong></h5>
@ -216,7 +216,7 @@ const changeTpl = async (val) => {
</van-nav-bar>
<div class="tab-section" v-cloak>
<div class="tab-section bg-lightPink" v-cloak>
<van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.level > 1">
<van-tab name="0">
<template #title>
@ -260,15 +260,17 @@ const changeTpl = async (val) => {
</div>
<h6 class="text-center text-white bg-darkBlue py-2">上面圖內「分享」無效，請點下列「分享」</h6>
</div>
<div class="d-flex p-4">
<van-button block class="btn-skyBlue m-2" @click="sendEcard">
<h6><i class="fa-solid fa-share-from-square"></i> 分享好友</h6>
</van-button>
<van-button block class="btn-tomatoRed m-2" @click="showChangeTpl" v-show="activeName == '0'">
<h6><i class="fa-solid fa-right-left"></i> 切換樣版</h6>
</van-button>
</div>
<van-sticky position="bottom">
<div class="bottomBtnCnt d-flex">
<van-button block class="btn-skyBlue m-2" @click="sendEcard">
<h6><i class="fa-solid fa-share-from-square"></i> 分享好友</h6>
</van-button>
<van-button block class="btn-tomatoRed m-2" @click="showChangeTpl" v-show="activeName == '0'">
<h6><i class="fa-solid fa-right-left"></i> 切換樣版</h6>
</van-button>
</div>
</van-sticky>
<van-popup v-model:show="showDraw" round position="bottom">
<div>

Write Preview
Loading…
Cancel
Save