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

頁面功能列及確認按鈕固定置頂置底、通訊錄製作(類別設定、篩選)

Browse Source
main
bruce68410 2 years ago
parent 35f8691a59
commit 1acade3753
7 changed files with 124 additions and 110 deletions
Show Stats Download Patch File Download Diff File

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

@ -541,8 +541,17 @@ h1, h2, h3, h4, h5, h6 {
} }
/* ========================================= vant ============================================= */ /* ========================================= vant ============================================= */
.van-nav-bar {
position: sticky;
top: 0;
z-index: 10001;
}
.van-notice-bar { .van-notice-bar {
position: sticky;
top: 78px;
font-size: 18px; font-size: 18px;
z-index: 10000;
} }
.van-popup.van-toast { .van-popup.van-toast {

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

@ -4,10 +4,21 @@
/* ========================================= vant ============================================= */ /* ========================================= vant ============================================= */
.van-nav-bar{
position: sticky;
top:0;
z-index: 10001;
}
.van-notice-bar{ .van-notice-bar{
position: sticky;
top:78px;
font-size: 18px; font-size: 18px;
z-index: 10000;
} }
.van-popup{ .van-popup{
&.van-toast{ &.van-toast{
display: flex; display: flex;

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

@ -6,51 +6,36 @@ import { getUserFaviList, getUserCateList, updateUserCate } from '@/api'
import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue' import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
/* ============ page ============ */
const setShowPicker = ref(false); const setShowPicker = ref(false);
const selectVal1 = ref(0); const selectVal1 = ref('all');
const selectVal2 = ref('a'); const selectVal2 = ref('普通');
const selectOpt1 = [ const selectOpt1 = ref([{ text: '全部', value: 'all' }]);
{ text: '未分類', value: 0 }, const selectOpt2 = ref([{ text: '重要', value: '重要' },{ text: '普通', value: '普通' }]);
{ text: '分類一', value: 1 },
{ text: '分類二', value: 2 }, const addressList = ref({
{ text: '分類三', value: 3 } data:[
]; {
const selectOpt2 = [ id:"a1",
{ text: '重要', value: 'important' }, real_name:"樹林李敏鎬",
{ text: '普通', value: 'normal' } line:"test",
]; user_cate_id:''
},
const addressList = ref([ {
{ id:"a2",
avatar:"https://fakeimg.pl/250x100/", real_name:"五條悟",
real_name:"樹林李敏鎬", line:"test",
introduction:"test", user_cate_id:''
}, },
{ {
avatar:"https://fakeimg.pl/250x100/", id:"a3",
real_name:"樹林李敏鎬", real_name:"機哩瓜啦",
introduction:"test", line:"test",
}, user_cate_id:''
{ },
avatar:"https://fakeimg.pl/250x100/", ]
real_name:"樹林李敏鎬", });
introduction:"test",
},
]);
// let res = await getUserFaviList();
// if (res.code === 200) {
// addressList.value.data = res.data;
// console.log(addressList)
// }
/* ============ modal ============ */
const modalForm = ref({ const modalForm = ref({
page: 1, page: 1,
@ -59,63 +44,66 @@ const modalForm = ref({
"id": 1, "id": 1,
"name": "第一類", "name": "第一類",
"children": [ "children": [
{ {"id": 4,"name": "普通"},
"id": 4, {"id": 5,"name": "重要"}
"name": "普通"
},
{
"id": 5,
"name": "重要"
}
] ]
}, },
{ {
"id": 2, "id": 2,
"name": "第二類", "name": "第二類",
"children": [ "children": [
{ {"id": 6,"name": "普通"},
"id": 6, {"id": 7,"name": "重要"}
"name": "普通"
},
{
"id": 7,
"name": "重要"
}
] ]
}, },
{ {
"id": 3, "id": 3,
"name": "第三類", "name": "第三類",
"children": [ "children": [
{ {"id": 8,"name": "普通"},
"id": 8, {"id": 9,"name": "重要"},
"name": "普通" {"name": "特殊"}
},
{
"id": 9,
"name": "重要"
},
{
"name": "特殊"
}
] ]
} }
] ]
}); });
// onMounted(async() => { onMounted(async() => {
// let res = await getUserCateList() let res = await getUserFaviList();
// if (res.code === 200) { if (res.code === 200) {
// modalForm.value.sort = res.data addressList.value.data = res.data;
// console.log("res:",res) }
// }
// });
// watch(() => form.value.name, res = await getUserCateList();
// (newVal) => { if (res.code === 200) {
// form.value.json5.altText = newVal; 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 = () => { const addCard = () => {
modalForm.value.sort.push( modalForm.value.sort.push(
@ -237,25 +225,27 @@ const onSubmit = async () => {
<div class="content"> <div class="content">
<van-cell-group inset> <van-cell-group inset>
<van-dropdown-menu> <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-item v-model="selectVal2" :options="selectOpt2" />
</van-dropdown-menu> </van-dropdown-menu>
</van-cell-group> </van-cell-group>
<van-cell-group inset> <van-cell-group inset>
<!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad" --> <van-list>
<van-list class="accordion" id="accordion">
<div class="list-item" v-for="(item, index) in addressList" :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="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"> <div class="text">
<h5 class="name ellipsis">{{ item.real_name }}</h5> <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> </div>
<div class="right"> <div class="right">
<van-button size="small" class="border-0"> <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> <h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
</van-button> </van-button>
</div> </div>
@ -305,7 +295,7 @@ const onSubmit = async () => {
</ul> </ul>
</div> </div>
<van-cell-group class="pt-2"> <van-cell-group class="m-0 pt-2">
<van-field <van-field
label="調整卡片順序" label="調整卡片順序"
:border="false" :border="false"

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

@ -98,8 +98,7 @@ const sizeColumns = ref([
{ text: "5xl", value: "5xl" }, { text: "5xl", value: "5xl" },
]); ]);
watch( watch(() => form.value.title,
() => form.value.title,
(newVal) => { (newVal) => {
form.value.json5.altText = newVal; form.value.json5.altText = newVal;
} }

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

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

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

@ -265,6 +265,7 @@ const handleSearch = async () => {
let res = await searchConnection(search.value); let res = await searchConnection(search.value);
if (res.code === 200) { if (res.code === 200) {
tab2list.value = res.data; tab2list.value = res.data;
console.log(tab2list.value)
} }
}; };
@ -477,7 +478,7 @@ const handleChangeTplSubmit = async() => {
</van-collapse> </van-collapse>
</van-cell-group> </van-cell-group>
<van-sticky :container="page" position="bottom"> <van-sticky position="bottom">
<div class="bottomBtnCnt"> <div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button> <van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
</div> </div>
@ -529,7 +530,7 @@ const handleChangeTplSubmit = async() => {
</van-field> </van-field>
</van-cell-group> </van-cell-group>
<van-sticky :container="page" position="bottom"> <van-sticky position="bottom">
<div class="bottomBtnCnt"> <div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button> <van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
</div> </div>
@ -654,7 +655,7 @@ const handleChangeTplSubmit = async() => {
</van-row> </van-row>
</van-cell-group> </van-cell-group>
<van-sticky :container="page" position="bottom"> <van-sticky position="bottom">
<div class="bottomBtnCnt"> <div class="bottomBtnCnt">
<van-button block class="btn-darkBlue" @click="handleChangeTplSubmit">確認修改</van-button> <van-button block class="btn-darkBlue" @click="handleChangeTplSubmit">確認修改</van-button>
</div> </div>
@ -751,7 +752,7 @@ const handleChangeTplSubmit = async() => {
.cnt3 { .cnt3 {
.block { .block {
height: 500px; height: 110vw;
text-align: center; text-align: center;
background-color: #000; background-color: #000;
padding: 20px 35px; padding: 20px 35px;

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

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

Write Preview
Loading…
Cancel
Save