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

src/assets/css/main.css

@@ -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 {

src/assets/sass/layout/_layout.scss

@@ -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;

src/views/Address/index.vue

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

src/views/Card/Edit.vue

@@ -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;
   }

src/views/Home/index.vue

@@ -425,12 +425,14 @@ const handleLogout = () => {
         </van-field>
       </van-cell-group>
 
-      <div class="px-3">
+      <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>
 
 

src/views/Member/index.vue

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

src/views/Send/index.vue

@@ -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>
@@ -261,7 +261,8 @@ const changeTpl = async (val) => {
       <h6 class="text-center text-white bg-darkBlue py-2">上面圖內「分享」無效，請點下列「分享」</h6>
     </div>
     
-    <div class="d-flex p-4">
+    <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>
@@ -269,6 +270,7 @@ const changeTpl = async (val) => {
           <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>