主頁調整、通訊錄製作

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");
+

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)

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%);
+}
+
 
 
 

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: 0 },
-  { text: '新款商品', value: 1 },
+  { text: '分類一', value: 1 },
-  { text: '活动商品', value: 2 },
+  { text: '分類二', value: 2 },
+  { text: '分類三', value: 3 }
 ];
 const selectOpt2 = [
-  { text: '默认排序', value: 'a' },
+  { text: '重要', value: 'important' },
-  { text: '好评排序', value: 'b' },
+  { text: '普通', value: 'normal' }
-  { text: '销量排序', value: 'c' },
 ];
 
-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{
+.address{
-  min-height: calc(100vh - 54px);
+  .content{
-}
+    min-height: calc(100vh - 54px);
-.van-list {
+  }
-  .list-item {
+  .van-list {
-    display: flex;
+    .list-item {
-    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;
+      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 {
+        .avatar {
-        width: 55px;
+          width: 55px;
-        min-width: 55px;
+          min-width: 55px;
-        aspect-ratio: 1/1;
+          aspect-ratio: 1/1;
-        border-radius: 50%;
+          border-radius: 50%;
-        margin-right: 10px;
+          margin-right: 10px;
-        overflow: hidden;
+          overflow: hidden;
-
+
-        img {
+          img {
-          width: 100%;
+            width: 100%;
-          height: 100%;
+            height: 100%;
-          object-fit: cover;
+            object-fit: cover;
+          }
+        }
+
+        .name {
+          font-weight: bold;
         }
       }
 
-      .name {
+      .right {
-        font-weight: bold;
+        flex: 0 0 auto;
       }
-    }
 
-    .right {
+      .bottom {
-      flex: 0 0 auto;
+        flex: 1 0 100%;
-    }
+        border: 1px #e3e3e3 solid;
+        border-radius: 10px;
+        padding: 0 10px;
+        margin: 0;
+        transition: all .2s;
 
-    .bottom {
+        &.show {
-      flex: 1 0 100%;
+          padding: 10px;
-      border: 1px #e3e3e3 solid;
+          margin: 5px 0;
-      border-radius: 10px;
+        }
-      padding: 0 10px;
-      margin: 0;
-      transition: all .2s;
-
-      &.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>

src/views/Card/Edit.vue

@@ -301,33 +301,33 @@ const handleSubmit = async () => {
 
 <template>
   <div class="edit page">
-    <van-form @submit="handleSubmit">
+    <van-nav-bar
-      <van-nav-bar
+      class="bg-skyBlue py-1"
-        class="bg-skyBlue py-1"
+      left-arrow
-        left-arrow
+      @click-left="$router.push('/')"
-        @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>
-        </template>
+      </template>
-        <template #left>
+      <template #left>
-          <h4>
+        <h4>
-            <i
+          <i
-              class="fa-solid fa-angle-left text-white"
+          class="fa-solid fa-angle-left text-white"
-              :style="{ opacity: 0.5 }"
+          :style="{ opacity: 0.5 }"
-            ></i>
+          ></i>
-          </h4>
+        </h4>
-        </template>
+      </template>
-      </van-nav-bar>
+    </van-nav-bar>
-
+  
-      <div class="content">
+    <div class="content">
-        <van-cell-group inset class="">
+      <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
+              <van-divider
-                  label="調整卡片順序"
+                :style="{
-                  :border="false"
+                  color: '#345068',
-                  v-if="form.json5.cards.length > 1"
+                  borderColor: '#345068',
-                >
+                  padding: '0 16px',
-                  <template #button>
+                }"
-                    <van-button
+                ><strong>卡片設定</strong></van-divider
-                      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
+              <van-field
-                  v-model="form.json5.cards[form.page - 1].ratio"
+                label="調整卡片順序"
-                  :border="false"
+                :border="false"
-                >
+                v-if="form.json5.cards.length > 1"
-                  <template #input>
+              >
-                    <van-uploader
+                <template #button>
-                      :after-read="afterRead"
+                  <van-button
-                      :max-count="1"
+                    size="small"
-                      name="cardimage"
+                    class="ml-1 btn-skyBlue"
-                      @delete="handleDelete"
+                    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
+                      <div class="upload-main">
-                        v-if="form.json5.cards[form.page - 1].image.length > 0"
+                        <img
-                      >
+                          class="upload-img"
-                        <div class="upload-main">
+                          :src="form.json5.cards[form.page - 1].image"
-                          <img
+                          alt=""
-                            class="upload-img"
+                        />
-                            :src="form.json5.cards[form.page - 1].image"
+                        <p class="ml-3 px-2 py-1 text-white bg-moBlue rounded-pill">
-                            alt=""
+                          <i class="fa-solid fa-arrow-up"></i> 點擊更換圖片
-                          />
+                        </p>
-                          <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
+                      </div>
-                            <i class="fa-solid fa-arrow-up"></i> 點擊更換圖片
+                    </template>
-                          </p>
+                    <template v-else>
-                        </div>
+                      <div class="upload-main">
-                      </template>
+                        <img
-                      <template v-else>
+                          class="upload-img"
-                        <div class="upload-main">
+                          src="@/assets/images/upload.jpg"
-                          <img
+                        />
-                            class="upload-img"
+                        <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
-                            src="@/assets/images/upload.jpg"
+                          <i class="fa-solid fa-arrow-up"></i> 請上傳圖片
-                          />
+                        </p>
-                          <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
+                      </div>
-                            <i class="fa-solid fa-arrow-up"></i> 請上傳圖片
+                    </template>
-                          </p>
+                  </van-uploader>
-                        </div>
+                </template>
-                      </template>
+              </van-field>
-                    </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"
-                />
 
-                <!-- <van-field 
+              <van-field
-                    v-model="form.json5.cards[form.page - 1].link"
+                v-model="form.json5.cards[form.page - 1].ratio"
-                    label="圖片網址連結"
+                label="圖片長寬比"
-                    id="vcard-link"
+                id="vcard-ratio"
-                    input-align="right" 
+                input-align="right"
-                    placeholder="連結(需輸入完整網址,http://..,https://...)"
+                :border="false"
-                /> -->
+                placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
-
+              />
-                <van-divider
-                  :style="{
-                    color: '#345068',
-                    borderColor: '#345068',
-                    padding: '0 16px',
-                  }"
-                  ><strong>卡片標題</strong></van-divider
-                >
 
-                <van-field
+              <van-divider
-                  v-model="form.json5.cards[form.page - 1].title"
+                :style="{
-                  label="標題文字"
+                  color: '#345068',
-                  id="vcard-title"
+                  borderColor: '#345068',
-                  input-align="right"
+                  padding: '0 16px',
-                  placeholder="連結(需輸入完整網址,http://..,https://...)"
+                }"
-                  :rules="[{ required: true, message: '請填寫卡片標題文字' }]"
+                ><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
+              <van-field
-                  v-model="form.json5.cards[form.page - 1].titleSize"
+                v-model="form.json5.cards[form.page - 1].titleSize"
-                  is-link
+                is-link
-                  readonly
+                readonly
-                  label="標題文字大小"
+                label="標題文字大小"
-                  id="vcard-titleSize"
+                id="vcard-titleSize"
-                  input-align="right"
+                input-align="right"
-                  placeholder="請輸入標題文字的色碼，如：#333333"
+                placeholder="請輸入標題文字的色碼，如：#333333"
-                  @click="showTitleSizePicker = true"
+                @click="showTitleSizePicker = true"
+              />
+              <van-popup
+                v-model:show="showTitleSizePicker"
+                round
+                position="bottom"
+              >
+                <van-picker
+                  :columns="sizeColumns"
+                  @cancel="showTitleSizePicker = false"
+                  @confirm="onTitleSizeConfirm"
                 />
-                <van-popup
+              </van-popup>
-                  v-model:show="showTitleSizePicker"
+
-                  round
+              <van-field
-                  position="bottom"
+                v-model="form.json5.cards[form.page - 1].titleColor"
-                >
+                label="標題文字顏色"
-                  <van-picker
+                id="vcard-titleColor"
-                    :columns="sizeColumns"
+                input-align="right"
-                    @cancel="showTitleSizePicker = false"
+                placeholder="請輸入標題文字的色碼，如：#333333"
-                    @confirm="onTitleSizeConfirm"
+                :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>
+                </template>
-
+              </van-field>
-                <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
-                >
 
-                <van-field
+              <van-divider
-                  v-model="form.json5.cards[form.page - 1].desc"
+                :style="{
-                  label="說明文字"
+                  color: '#345068',
-                  label-align="top"
+                  borderColor: '#345068',
-                  id="vcard-desc"
+                  padding: '0 16px',
-                  type="textarea"
+                }"
-                  maxlength="50"
+                ><strong>卡片說明文字</strong></van-divider
-                  placeholder="請填寫卡片說明文字"
+              >
-                  show-word-limit
+
-                  :rules="[{ required: true, message: '請填寫卡片說明文字' }]"
+              <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
+              <van-field
-                  v-model="form.json5.cards[form.page - 1].descSize"
+                v-model="form.json5.cards[form.page - 1].descSize"
-                  is-link
+                is-link
-                  readonly
+                readonly
-                  label="說明文字大小"
+                label="說明文字大小"
-                  id="vcard-descSize"
+                id="vcard-descSize"
-                  input-align="right"
+                input-align="right"
-                  placeholder="請輸入說明文字的色碼，如：#333333"
+                placeholder="請輸入說明文字的色碼，如：#333333"
-                  @click="showDescSizePicker = true"
+                @click="showDescSizePicker = true"
+              />
+              <van-popup
+                v-model:show="showDescSizePicker"
+                round
+                position="bottom"
+              >
+                <van-picker
+                  :columns="sizeColumns"
+                  @cancel="showDescSizePicker = false"
+                  @confirm="onDescSizeConfirm"
                 />
-                <van-popup
+              </van-popup>
-                  v-model:show="showDescSizePicker"
+
-                  round
+              <van-field
-                  position="bottom"
+                v-model="form.json5.cards[form.page - 1].descColor"
-                >
+                label="說明文字顏色"
-                  <van-picker
+                id="vcard-descColor"
-                    :columns="sizeColumns"
+                input-align="right"
-                    @cancel="showDescSizePicker = false"
+                placeholder="請輸入說明文字的色碼，如：#333333"
-                    @confirm="onDescSizeConfirm"
+                :rules="[{ required: true, message: '說明文字色碼必填' }]"
+              >
+                <template #button>
+                  <input
+                    v-model="form.json5.cards[form.page - 1].descColor"
+                    type="color"
+                    class="form-control-color"
                   />
-                </van-popup>
+                </template>
-
+              </van-field>
-                <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>
 
               <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 {
+.edit{
-  width: 100%;
+  .colorCube,.colorCube:valid {
-}
+    appearance: none;
-.van-field__control{
+    background: 0 0;
-  justify-content: center;
+    border: 1px solid #ced4da;
-  .upload-main {
+    height: 30px;
-    flex-direction: column;
+    padding: 0 2px;
-    .upload-img {
+    border-radius: 5px;
-      margin: 5px 0;
-      width: 250px;
-    }
   }
-
+  .flex-section {
-}
+    width: 100%;
-
-
-.nav-tabs{
-  .nav-link{
-    color: #4a677d;
-    background-color: #fff;
-    border-color: transparent;
-    margin-right: 4px;
   }
-  .nav-item.show .nav-link,
+  :deep .van-field__control{
-  .nav-link.active { 
+    justify-content: center;
-      color: #fff;
+    .upload-main {
-      background-color: #4a677d;
+      flex-direction: column;
-      border-color: #4a677d #4a677d #4a677d;
+      .upload-img {
+        margin: 5px 0;
+        width: 250px;
+      }
+    }
+
   }
-}
 
-.previewCnt{
+
-  display: flex;
+  .nav-tabs{
-  justify-content: center;
+    .nav-link{
-  padding: 15px 0;
+      color: #4a677d;
-  background-color: #333;
+      background-color: #fff;
-  .card{
+      border-color: transparent;
-    width:300px;
+      margin-right: 4px;
-    border: none;
+    }
-    // transform: scale(0.75);
+    .nav-item.show .nav-link,
-    overflow: hidden;
+    .nav-link.active { 
-    .card-body{
+        color: #fff;
-      padding: 15px;
+        background-color: #4a677d;
+        border-color: #4a677d #4a677d #4a677d;
     }
   }
-}
 
-.cardCnt{
+  .previewCnt{
-  padding: 15px;
+    display: flex;
-  .card{
+    justify-content: center;
-      margin-bottom: 20px;
+    padding: 15px 0;
-      .card-header{
+    background-color: #333;
-          padding: 0;        
+    .card{
-          background-color: #ddd ;
+      width:300px;
-          border: none;
+      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>

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  
+    form.value = userRes.data  
-    console.log("userRes:",userRes)  
   }
 
-  // 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");
+  console.log(form.value,"test");
-  let res = await updateCard(form.value)
+  let res = await getUserInfo(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)
   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="onSubmit">
-        <van-form @submit="userInfoSubmit">
+        <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="form.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
-          <van-field v-model="uInfoForm.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
+          <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="form.address" label="住址" name="address" placeholder="請輸入您的地址" />
-          <van-field v-model="uInfoForm.age" label="年齡" name="age" 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" />
@@ -509,19 +434,9 @@ const handleChangeTplSubmit = async() => {
                 active-color="#5b7b94" inactive-color="#888888" />
             </template>
           </van-field>        
+        </van-cell-group>
 
-
+        <van-cell-group inset v-if="userStore.userData.level === 3">
-
-          <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 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-sticky :container="page" position="bottom">
-            <van-button block class="btn-darkBlue" native-type="submit">
+          <div class="bottomBtnCnt">
-              確認修改
+            <van-button block class="btn-darkBlue" native-type="submit">確認修改</van-button>
-            </van-button>
           </div>
-        </van-form>
+        </van-sticky>
-      </van-cell-group>
+      </van-form>
     </div>
 
     <div class="content cnt1" v-show="tabActive === 1">
-      <van-cell-group inset>
+      <van-form @submit="onSubmit">
-        <van-form @submit="userLinkSubmit">
+        <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-cell-group inset>
-            <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 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">
+        <van-sticky :container="page" position="bottom">
-              <template #left>
+          <div class="bottomBtnCnt">
-                <van-button type="danger" icon="delete-o" plain hairline @click="onDelBtn(idx)">刪除</van-button>
+            <van-button block class="btn-darkBlue" native-type="submit">確認修改</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>
           </div>
-        </van-form>
+        </van-sticky>
-      </van-cell-group>
+      </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-cell-group inset>
-            <van-button class="btn-darkBlue px-5" @click="handleChangeTplSubmit">
+          <van-cell class="text-center bg-lightPink py-3">
-              <i class="fa-regular fa-pen-to-square text-white"></i> 確認修改
+              <template #title>
-            </van-button>
+                <h6 class="text-darkBlue"><strong>NFC感應式版型切換</strong></h6>
-          </div>
+              </template>
-        </van-form>
+          </van-cell>
-      </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-row>
+          <van-row>
-          <van-col span="12" v-for="(item, index) in tab3list" :key="index">
+            <van-col span="12" v-for="(item, index) in tab3list" :key="index">
-            <div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">
+              <div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">
-              <div class="imgCnt">
+                <div class="imgCnt">
-                <van-image :src="item.image" />
+                  <van-image :src="item.image" />
+                </div>
               </div>
-            </div>
+            </van-col>
-          </van-col>
+          </van-row>
-        </van-row>
+        </van-cell-group>
-      </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,6 +688,7 @@ const handleChangeTplSubmit = async() => {
 .member{
   .content{
     min-height: calc(100vh - 142px);
+    padding-bottom: 0;
   }  
   .cnt2 {
     .van-list {