局部調整(會員等級判斷、form表遞交分開、首頁及商務卡按鈕位置更改、preview頁修改)

dev
DESKTOP-8UQ1PPR\09158 3 years ago
parent 4a336ec9d5
commit cb23096532

@ -45,9 +45,9 @@ strong {
font-weight: bold; font-weight: bold;
} }
.LySlider { .LySlider {
overflow: hidden; /* overflow: hidden;
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; */
} }
.LySlider::-webkit-scrollbar { .LySlider::-webkit-scrollbar {
display: none; display: none;

@ -45,9 +45,9 @@ strong {
font-weight: bold; font-weight: bold;
} }
.LySlider { .LySlider {
overflow: hidden; /* overflow: hidden;
overflow-x: scroll; overflow-x: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; */
} }
.LySlider::-webkit-scrollbar { .LySlider::-webkit-scrollbar {
display: none; display: none;

@ -692,21 +692,6 @@ h1, h2, h3, h4, h5, h6 {
text-align: center; text-align: center;
} }
.card {
margin-bottom: 20px;
}
.card .card-header {
padding: 0;
background-color: #f85d5d;
border: none;
}
.card .card-header * {
color: #fff;
}
.card .card-body {
padding: 10px 0;
}
/* ========================================= other ============================================= */ /* ========================================= other ============================================= */
.imgCnt { .imgCnt {
position: relative; position: relative;

@ -91,6 +91,7 @@
} }
} }
/* ========================================= stage ============================================= */ /* ========================================= stage ============================================= */
.page{ .page{
@ -140,21 +141,6 @@
} }
} }
.card{
margin-bottom: 20px;
.card-header{
padding: 0;
background-color: #f85d5d ;
border: none;
*{
color: #fff ;
}
}
.card-body{
padding:10px 0;
}
}
/* ========================================= other ============================================= */ /* ========================================= other ============================================= */
.imgCnt{ .imgCnt{

@ -1,9 +1,27 @@
<template> <template>
<van-nav-bar title="預覽:)" right-text="" @click-right="$router.back()" /> <div class="preview page">
<div class="flex-section"> <van-nav-bar
<div class="table-responsive"> class="bg-skyBlue py-1"
<div class="chatbox"> @click-left="$router.push('/card/edit')"
<div id="flex" ref="flexRef"></div> >
<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="flex-section">
<div class="table-responsive">
<div class="chatbox">
<div id="flex" ref="flexRef"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -34,12 +52,12 @@ onDeactivated(() => {
.flex-section { .flex-section {
// color: white; // color: white;
// z-index: 99999; // z-index: 99999;
background-color: #666; background-color: #333;
} }
.chatbox { .chatbox {
background-color: #666; background-color: #333;
margin-top: 10px; margin-top: 10px;
padding-top: 10px; padding-top: 10px;
} }

@ -285,7 +285,7 @@ const handleSubmit = async () => {
} else { } else {
showToast.fail("建立失敗"); showToast.fail("建立失敗");
} }
router.push("/"); router.push("/card/edit");
}; };
</script> </script>
@ -312,6 +312,7 @@ const handleSubmit = async () => {
<div class="content"> <div class="content">
<van-cell-group inset class=""> <van-cell-group inset class="">
<van-cell class="bg-lightPink"> <van-cell class="bg-lightPink">
<template #title> <template #title>
<h6 class="text-darkBlue"><strong>卡片設定</strong></h6> <h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
@ -332,7 +333,7 @@ const handleSubmit = async () => {
icon="eye-o" icon="eye-o"
hairline hairline
@click="handlePreview" @click="handlePreview"
>預覽</van-button >名片預覽</van-button
> >
</template> </template>
</van-cell> </van-cell>
@ -377,6 +378,7 @@ const handleSubmit = async () => {
<van-cell-group inset class="mt-3"> <van-cell-group inset class="mt-3">
<keep-alive> <keep-alive>
<div id="app"> <div id="app">
<!-- tab --> <!-- tab -->
<div class="bg-lightPink px-2 pt-3"> <div class="bg-lightPink px-2 pt-3">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
@ -408,6 +410,15 @@ const handleSubmit = async () => {
<!-- /tab --> <!-- /tab -->
<div class="py-2"> <div class="py-2">
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>卡片設定</strong></van-divider
>
<van-field <van-field
label="調整卡片順序" label="調整卡片順序"
:border="false" :border="false"
@ -437,23 +448,6 @@ const handleSubmit = async () => {
</template> </template>
</van-field> </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"
label="卡片長寬比"
id="vcard-ratio"
input-align="right"
placeholder="請輸入圖片長寬比比如20:13、1:1、6:8"
/>
<van-field <van-field
v-model="form.json5.cards[form.page - 1].bgColor" v-model="form.json5.cards[form.page - 1].bgColor"
label="卡片底色" label="卡片底色"
@ -526,6 +520,15 @@ const handleSubmit = async () => {
</template> </template>
</van-field> </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"
/>
<!-- <van-field <!-- <van-field
v-model="form.json5.cards[form.page - 1].link" v-model="form.json5.cards[form.page - 1].link"
label="圖片網址連結" label="圖片網址連結"
@ -679,16 +682,13 @@ const handleSubmit = async () => {
</template> </template>
</van-field> </van-field>
<div class="p-3"> <div class="cardCnt">
<div <div
class="card shadow-sm" class="card shadow"
v-for="(btn, index) in form.json5.cards[form.page - 1].btns" v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
:key="index" :key="index"
> >
<div <div class="card-header">
class="card-header"
:style="{ backgroundColor: btn.color }"
>
<van-field <van-field
:label="`控制按鈕 ${index + 1}`" :label="`控制按鈕 ${index + 1}`"
:border="false" :border="false"
@ -816,4 +816,51 @@ const handleSubmit = async () => {
width: 250px; width: 250px;
} }
} }
.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;
}
}
.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;
}
}
}
.cardCnt{
padding: 15px;
.card{
margin-bottom: 20px;
.card-header{
padding: 0;
background-color: #ddd ;
border: none;
}
.card-body{
padding:10px 0;
}
}
}
</style> </style>

@ -254,11 +254,18 @@ const handleLogout = () => {
<template> <template>
<div class="home page" v-cloak> <div class="home page" v-cloak>
<van-nav-bar class="bg-darkBlue py-3"> <van-nav-bar
class="bg-darkBlue py-3"
>
<template #title> <template #title>
<h4 class="text-white mb-1"><strong>UTEL電子名片系統</strong></h4> <h4 class="text-white mb-1"><strong>UTEL電子名片系統</strong></h4>
<a href="javascript:;"><h5 class="text-gray">歡迎來到會員中心</h5></a> <a href="javascript:;"><h5 class="text-gray">歡迎來到會員中心</h5></a>
</template> </template>
<template #right>
<div class="btn btn-sm text-skyBlue" @click="handleLogout">
<h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4>
</div>
</template>
</van-nav-bar> </van-nav-bar>
<van-notice-bar <van-notice-bar
@ -298,24 +305,21 @@ const handleLogout = () => {
</div> </div>
<div class="right"> <div class="right">
<div class="btn btn-sm text-darkBlue" @click="doShare"> <div class="btn btn-sm text-darkBlue" @click="doShare">
<h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4> <h4><i class="fa-solid fa-share-from-square"></i></h4>
</div> </div>
<div class="btn btn-sm text-darkBlue" @click="handleLogout">
<h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4>
</div>
</div> </div>
</div> </div>
<div class="recommend"> <div class="recommend">
<div class="btn btn-outline-lightBlue" @click="router.push('/shop')"> <div class="btn btn-outline-lightBlue shadow-sm" @click="router.push('/shop')">
<div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div> <div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div>
<div class="text">立即開通</div> <div class="text">立即開通</div>
</div> </div>
<div class="btn btn-outline-lightBlue" @click="goCardEdit"> <div class="btn btn-outline-lightBlue shadow-sm" @click="goCardEdit">
<div class="img"><i class="fa-solid fa-id-card"></i></div> <div class="img"><i class="fa-solid fa-id-card"></i></div>
<div class="text">商務卡片</div> <div class="text">商務卡片</div>
</div> </div>
<div class="btn btn-outline-lightBlue"> <div class="btn btn-outline-lightBlue shadow-sm">
<div class="img"><i class="fa-solid fa-address-book"></i></div> <div class="img"><i class="fa-solid fa-address-book"></i></div>
<div class="text">通訊錄</div> <div class="text">通訊錄</div>
</div> </div>
@ -324,9 +328,9 @@ const handleLogout = () => {
<div class="bwtFlex px-3 mb-2"> <div class="bwtFlex px-3 mb-2">
<h5 class="font-weight-bold text-darkBlue">會員資料</h5> <h5 class="font-weight-bold text-darkBlue">會員資料</h5>
<a href="javascript:;" @click="router.push('/member')" <a href="javascript:;" @click="router.push('/member')">
><h5><i class="fa fa-cog text-darkBlue" aria-hidden="true"></i></h5 <h5><i class="fa-solid fa-sliders text-darkBlue"></i></h5>
></a> </a>
</div> </div>
<div class="content" v-if="userInfo"> <div class="content" v-if="userInfo">

@ -22,6 +22,7 @@ const store = useStore()
const router = useRouter() const router = useRouter()
const form = ref({addon:[]}) const form = ref({addon:[]})
const uInfoForm = ref({addon:[]})
const genderChecked = ref() const genderChecked = ref()
@ -163,6 +164,23 @@ const onSubmit = async () => {
} }
}; };
const userInfoSubmit = async (values) => {
showLoadingToast({
duration: 0,
message: '資料更新中...',
forbidClick: true,
});
console.log("test",values);
let res = await updateUserInfo(values)
if(res.code===200){
showSuccessToast('更新成功')
store.commit('user/setUserInfo',values)
router.push('/member')
}else{
showToast.fail('更新失敗')
}
};
const searchChecked = ref(true); const searchChecked = ref(true);
const searchOnUpdateValue = (newValue) => { const searchOnUpdateValue = (newValue) => {
showConfirmDialog({ showConfirmDialog({
@ -190,7 +208,6 @@ const tab2TodoLists = ref([]);
const tab2AddFriend = ref([]); const tab2AddFriend = ref([]);
onBeforeMount(async () => { onBeforeMount(async () => {
let res = await searchConnection(); let res = await searchConnection();
console.log(res);
if(res.code===200){ if(res.code===200){
tab2list.value = res.data; tab2list.value = res.data;
} }
@ -234,7 +251,6 @@ const tab2OnSearch = () => {
const tab3list = ref([]); const tab3list = ref([]);
onBeforeMount(async () => { onBeforeMount(async () => {
let res = await setUserNfcTpl(); let res = await setUserNfcTpl();
console.log(res);
if(res.code===200){ if(res.code===200){
tab3list.value = res.data; tab3list.value = res.data;
} }
@ -266,9 +282,9 @@ onBeforeMount(async () => {
<div class="content cnt0" v-show="tabActive === 0"> <div class="content cnt0" v-show="tabActive === 0">
<van-cell-group inset> <van-cell-group inset>
<van-form @submit="onSubmit"> <van-form @submit="userInfoSubmit">
<div class="text-center p-4"> <div class="text-center p-4">
<van-uploader :after-read="afterRead" :max-count="1" name="averter" class="mb-4"> <van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
<div class="upload-main"> <div class="upload-main">
<img <img
class="upload-img avatar" class="upload-img avatar"
@ -293,6 +309,7 @@ onBeforeMount(async () => {
rows="3" rows="3"
type="textarea" type="textarea"
maxlength="100" maxlength="100"
name="mark"
placeholder="請輸入100字以內的簡介" placeholder="請輸入100字以內的簡介"
show-word-limit show-word-limit
:style="{border:'1px #e3e3e3 solid',borderRadius:'6px'}" :style="{border:'1px #e3e3e3 solid',borderRadius:'6px'}"
@ -302,27 +319,27 @@ onBeforeMount(async () => {
<van-field <van-field
v-model="form.real_name" v-model="form.real_name"
label="姓名" label="姓名"
name="pattern" name="real_name"
placeholder="請輸入您的姓名" placeholder="請輸入您的姓名"
:rules="[{ required: true, message: '姓名為必填' }]" :rules="[{ required: true, message: '姓名為必填' }]"
/> />
<van-field <van-field
v-model="form.company" v-model="form.company"
label="公司名稱" label="公司名稱"
name="" name="company"
placeholder="請輸入您的公司名稱" placeholder="請輸入您的公司名稱"
:rules="[{ required: true, message: '公司名稱必填' }]" :rules="[{ required: true, message: '公司名稱必填' }]"
/> />
<van-field <van-field
v-model="form.title" v-model="form.title"
label="職稱" label="職稱"
name="" name="title"
placeholder="請輸入您的職稱" placeholder="請輸入您的職稱"
/> />
<van-field <van-field
v-model="form.phone" v-model="form.phone"
label="手機" label="手機"
name="" name="phone"
type="tel" type="tel"
placeholder="Ex. 0900000001 不要有空格" placeholder="Ex. 0900000001 不要有空格"
:rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]" :rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
@ -330,7 +347,7 @@ onBeforeMount(async () => {
<van-field <van-field
v-model="form.tel" v-model="form.tel"
label="市話" label="市話"
name="" name="tel"
type="tel" type="tel"
placeholder="請輸入您的市話" placeholder="請輸入您的市話"
:rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]" :rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"
@ -338,31 +355,31 @@ onBeforeMount(async () => {
<van-field <van-field
v-model="form.email" v-model="form.email"
label="Email" label="Email"
name="" name="email"
placeholder="請輸入您的Email" placeholder="請輸入您的Email"
:rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]" :rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
/> />
<van-field <van-field
v-model="form.address" v-model="form.address"
label="住址" label="住址"
name="" name="address"
placeholder="請輸入您的地址" placeholder="請輸入您的地址"
/> />
<van-field <van-field
v-model="form.age" v-model="form.age"
label="年齡" label="年齡"
name="" name="age"
placeholder="請輸入您的年齡" placeholder="請輸入您的年齡"
/> />
<van-field name="radio" label="性別"> <van-field name="sex" label="性別">
<template #input> <template #input>
<van-radio-group <van-radio-group
v-model="genderChecked" v-model="genderChecked"
direction="horizontal" direction="horizontal"
checked-color="#345068" checked-color="#345068"
> >
<van-radio name="1"></van-radio> <van-radio name="0"></van-radio>
<van-radio name="2"></van-radio> <van-radio name="1"></van-radio>
</van-radio-group> </van-radio-group>
</template> </template>
</van-field> </van-field>
@ -370,13 +387,13 @@ onBeforeMount(async () => {
<van-field <van-field
v-model="form.area" v-model="form.area"
label="區域" label="區域"
name="" name="area"
placeholder="請選擇縣市區域" placeholder="請選擇縣市區域"
/> />
<van-field <van-field
v-model="form.work" v-model="form.work"
label="工作性質" label="工作性質"
name="" name="work"
placeholder="請選擇工作性質" placeholder="請選擇工作性質"
/> />
@ -418,15 +435,21 @@ onBeforeMount(async () => {
label-align="top" label-align="top"
> >
<template #label> <template #label>
<i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己 <i class="fa-solid fa-gem text-darkBlue"></i> 一句話介紹自己
</template> </template>
</van-field> </van-field>
<van-divider
:style="{
color: '#345068',
borderColor: '#345068',
padding: '0 16px',
}"
><strong>資源共享</strong></van-divider
>
<van-collapse v-model="resourceActive" accordion> <van-collapse v-model="resourceActive" accordion>
<van-collapse-item name="1"> <van-collapse-item title="我能分享的資源" name="1">
<template #title>
<i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源
</template>
<van-field <van-field
v-model="form.supply" v-model="form.supply"
rows="3" rows="3"
@ -437,15 +460,13 @@ onBeforeMount(async () => {
/> />
<van-field <van-field
v-model="form.supply_link" v-model="form.supply_link"
name="pattern" label="分享網址:"
name=""
placeholder="分享網址" placeholder="分享網址"
:rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]" :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]"
/> />
</van-collapse-item> </van-collapse-item>
<van-collapse-item name="2"> <van-collapse-item title="我需要的資源" name="2">
<template #title>
<i class="fa-regular fa-gem text-darkBlue"></i> 我需要的資源
</template>
<van-field <van-field
v-model="form.demand" v-model="form.demand"
rows="3" rows="3"
@ -456,14 +477,12 @@ onBeforeMount(async () => {
/> />
<van-field <van-field
v-model="form.demand_link" v-model="form.demand_link"
name="pattern" label="分享網址:"
name=""
placeholder="需求連結" placeholder="需求連結"
/> />
</van-collapse-item> </van-collapse-item>
<van-collapse-item name="3"> <van-collapse-item title="菁英交流資訊" name="3">
<template #title>
<i class="fa-regular fa-gem text-darkBlue"></i> 菁英交流資訊
</template>
<van-field <van-field
v-model="form.exchange" v-model="form.exchange"
rows="3" rows="3"
@ -474,7 +493,8 @@ onBeforeMount(async () => {
/> />
<van-field <van-field
v-model="form.exchange_link" v-model="form.exchange_link"
name="pattern" label="分享網址:"
name=""
placeholder="需求連結" placeholder="需求連結"
/> />
</van-collapse-item> </van-collapse-item>

@ -35,7 +35,7 @@ onMounted(async () => {
// console.log('liff',liff) // console.log('liff',liff)
await liff.init({ liffId: import.meta.env.VITE_APP_LINE_LIFF_ID }); await liff.init({ liffId: import.meta.env.VITE_APP_LINE_LIFF_ID });
if (userInfo.value.nc_type > 2) { if (userInfo.value.level > 2) {
let vipCardRes = await getVipCard({ userid: sessionStorage.getItem('uid') }) let vipCardRes = await getVipCard({ userid: sessionStorage.getItem('uid') })
state.value.vip_card = vipCardRes.data state.value.vip_card = vipCardRes.data
} else { } else {
@ -51,7 +51,7 @@ watch(() => activeName.value, function (newVal, oldVal) {
}, { immediate: true }) }, { immediate: true })
watch(() => userInfo.value.cus_card, function (newVal, oldVal) { watch(() => userInfo.value.cus_card, function (newVal, oldVal) {
if (userInfo.value.nc_type > 1 && newVal.length > 0) { if (userInfo.value.level > 1 && newVal.length > 0) {
state.value.showCusCard = true state.value.showCusCard = true
} }
}, { immediate: true }) }, { immediate: true })
@ -73,7 +73,7 @@ async function showFlex(id) {
flex2html("flex", state.value.flexContent) flex2html("flex", state.value.flexContent)
break break
case '1': case '1':
if (userInfo.value.nc_type > 1) { if (userInfo.value.level > 1) {
let card2Res = await getCusCard({ userid: sessionStorage.getItem('uid') }) let card2Res = await getCusCard({ userid: sessionStorage.getItem('uid') })
if (card2Res.code === 200) { if (card2Res.code === 200) {
if (card2Res.data.cus_card) { if (card2Res.data.cus_card) {
@ -87,7 +87,7 @@ async function showFlex(id) {
} }
break break
default: default:
if (userInfo.value.nc_type > 2) { if (userInfo.value.level > 2) {
// let vipCardRes = await getCusCard({userid: sessionStorage.getItem('uid')}) // let vipCardRes = await getCusCard({userid: sessionStorage.getItem('uid')})
let res = state.value.vip_card.find(item => { return item.id == id }) let res = state.value.vip_card.find(item => { return item.id == id })
if (res.type === 0) { if (res.type === 0) {
@ -189,11 +189,38 @@ const changeTpl = (val) => {
<div class="tab-section" v-cloak> <div class="tab-section" v-cloak>
<van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.nc_type > 1"> <van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.level > 1">
<van-tab title="我的名片" name="0"/> <van-tab name="0">
<van-tab :title="state.card_title" name="1" v-if="state.showCusCard"/> <template #title>
<van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id"/> <div class="tab_item">
<i class="fa-regular fa-id-card fa-2x mb-1"></i>
<p class="mb-3">我的名片</p>
</div>
</template>
</van-tab>
<van-tab name="1" v-if="state.showCusCard">
<template #title>
<div class="tab_item">
<i class="fa-solid fa-clipboard fa-2x mb-1"></i>
<p class="mb-3">{{state.card_title}}</p>
</div>
</template>
</van-tab>
<van-tab :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id">
<template #title>
<div class="tab_item">
<i class="fa-regular fa-file-lines fa-2x mb-1"></i>
<p class="mb-3">{{card.title}}</p>
</div>
</template>
</van-tab>
<!-- <van-tab :title="state.card_title" name="1" v-if="state.showCusCard"/>
<van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id"/> -->
</van-tabs> </van-tabs>
<div class="flex-section"> <div class="flex-section">
<div class="table-responsive"> <div class="table-responsive">

Loading…
Cancel
Save