From 35f8691a595198293d0d49179f38672b37a92c9c Mon Sep 17 00:00:00 2001
From: bruce68410 <kai326326@gmail.com>
Date: Sat, 2 Dec 2023 12:24:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=B8=BB=E9=A0=81=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?=E3=80=81=E9=80=9A=E8=A8=8A=E9=8C=84=E8=A3=BD=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                    |   6 +
 src/assets/css/main.css             |   6 +
 src/assets/sass/layout/_layout.scss |   5 +
 src/views/Address/index.vue         | 432 ++++++++++++++++---
 src/views/Card/Edit.vue             | 636 ++++++++++++++--------------
 src/views/Member/index.vue          | 256 ++++-------
 6 files changed, 775 insertions(+), 566 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 0ff48c4..83bcf10 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -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");
+
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 8065886..309c58f 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -704,6 +704,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)
diff --git a/src/assets/sass/layout/_layout.scss b/src/assets/sass/layout/_layout.scss
index d179cf1..8cf0bd4 100644
--- a/src/assets/sass/layout/_layout.scss
+++ b/src/assets/sass/layout/_layout.scss
@@ -153,6 +153,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%);
+}
+
 
 
 
diff --git a/src/views/Address/index.vue b/src/views/Address/index.vue
index 3b04f75..4f45acc 100644
--- a/src/views/Address/index.vue
+++ b/src/views/Address/index.vue
@@ -1,29 +1,29 @@
 <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'
 
+/* ============ 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: 0 },
+  { text: '分類一', value: 1 },
+  { text: '分類二', value: 2 },
+  { text: '分類三', value: 3 }
 ];
 const selectOpt2 = [
-  { text: '默认排序', value: 'a' },
-  { text: '好评排序', value: 'b' },
-  { text: '销量排序', value: 'c' },
+  { text: '重要', value: 'important' },
+  { text: '普通', value: 'normal' }
 ];
 
-const elitelist = ref([
+const addressList = ref([
   {
     avatar:"https://fakeimg.pl/250x100/",
     real_name:"樹林李敏鎬",
@@ -43,17 +43,178 @@ const elitelist = ref([
 
 // let res = await getUserFaviList();
 // if (res.code === 200) {
-//   elitelist.value.data = res.data;
+//   addressList.value.data = res.data;
 
-//   console.log(elitelist)
+//   console.log(addressList)
 // }
 
 
 
+/* ============ modal ============ */
+
+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 getUserCateList()
+//   if (res.code === 200) {
+//     modalForm.value.sort = res.data  
+//     console.log("res:",res)  
+//   }
+// });
+
+// watch(() => form.value.name,
+//   (newVal) => {
+//     form.value.json5.altText = newVal;
+//   }
+// );
+
+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,7 +230,7 @@ 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>
 
@@ -85,7 +246,7 @@ const elitelist = ref([
         <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad" -->
         <van-list class="accordion" id="accordion">
 
-          <div class="list-item" v-for="(item, index) in elitelist" :key="index">
+          <div class="list-item" v-for="(item, index) in addressList" :key="index">
             <div class="left">
               <div class="avatar"><img :src="item.avatar"></div>
               <div class="text">
@@ -105,65 +266,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="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>
diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue
index 555bc67..fdd32ab 100644
--- a/src/views/Card/Edit.vue
+++ b/src/views/Card/Edit.vue
@@ -301,33 +301,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 +389,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 +416,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 +662,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 +776,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>
diff --git a/src/views/Member/index.vue b/src/views/Member/index.vue
index 64e6192..76c8e20 100644
--- a/src/views/Member/index.vue
+++ b/src/views/Member/index.vue
@@ -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: 社群分享
 
 
 
@@ -452,12 +377,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 +390,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 +433,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 +475,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 :container="page" 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 +495,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 +511,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 +527,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 :container="page" 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 +629,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 :container="page" position="bottom">
+          <div class="bottomBtnCnt">
+            <van-button block class="btn-darkBlue" @click="handleChangeTplSubmit">確認修改</van-button>
+          </div>
+        </van-sticky>
+      </van-form>
     </div>
 
     <!-- <Footer/> -->
@@ -803,7 +688,8 @@ const handleChangeTplSubmit = async() => {
 .member{
   .content{
     min-height: calc(100vh - 142px);
-  }
+    padding-bottom: 0;
+  }  
   .cnt2 {
     .van-list {
       .list-item {

From 1acade375323f0e3693f9f568636db625981fa20 Mon Sep 17 00:00:00 2001
From: bruce68410 <kai326326@gmail.com>
Date: Sat, 2 Dec 2023 21:48:37 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E9=A0=81=E9=9D=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=88=97=E5=8F=8A=E7=A2=BA=E8=AA=8D=E6=8C=89=E9=88=95=E5=9B=BA?=
 =?UTF-8?q?=E5=AE=9A=E7=BD=AE=E9=A0=82=E7=BD=AE=E5=BA=95=E3=80=81=E9=80=9A?=
 =?UTF-8?q?=E8=A8=8A=E9=8C=84=E8=A3=BD=E4=BD=9C(=E9=A1=9E=E5=88=A5?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=80=81=E7=AF=A9=E9=81=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/main.css             |   9 ++
 src/assets/sass/layout/_layout.scss |  11 ++
 src/views/Address/index.vue         | 166 +++++++++++++---------------
 src/views/Card/Edit.vue             |   3 +-
 src/views/Home/index.vue            |  12 +-
 src/views/Member/index.vue          |   9 +-
 src/views/Send/index.vue            |  24 ++--
 7 files changed, 124 insertions(+), 110 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 309c58f..fddbdaa 100644
--- a/src/assets/css/main.css
+++ b/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 {
diff --git a/src/assets/sass/layout/_layout.scss b/src/assets/sass/layout/_layout.scss
index 8cf0bd4..0ceec24 100644
--- a/src/assets/sass/layout/_layout.scss
+++ b/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;
diff --git a/src/views/Address/index.vue b/src/views/Address/index.vue
index 4f45acc..5b10e79 100644
--- a/src/views/Address/index.vue
+++ b/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([
-  {
-    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) {
-//   addressList.value.data = res.data;
-
-//   console.log(addressList)
-// }
-
-
-
-/* ============ modal ============ */
+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,
@@ -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"
diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue
index fdd32ab..76857a5 100644
--- a/src/views/Card/Edit.vue
+++ b/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;
   }
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index de49092..fab089d 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -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>
 
 
diff --git a/src/views/Member/index.vue b/src/views/Member/index.vue
index 76c8e20..66ef757 100644
--- a/src/views/Member/index.vue
+++ b/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;
diff --git a/src/views/Send/index.vue b/src/views/Send/index.vue
index ffd6c29..702a1a6 100644
--- a/src/views/Send/index.vue
+++ b/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>
@@ -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>