hook使用方式修正、api串接更改

src/api/card.js

@@ -1,6 +1,5 @@
 import ajax from "./ajax";
 
-//通訊錄
 export const getCardData = async () =>
   ajax(`/Card/getCardData`);
   

src/api/user.js

@@ -1,9 +1,12 @@
 import ajax from "./ajax";
 
-//通訊錄
+
 export const getUserData = async () =>
   ajax(`/user/getUser`);
 
+export const getUserExtra = async (uid) =>
+  ajax(`/user/getUserExtra`, { uid }, "GET");
+
 export const updateUserExtra = async (params) =>
   ajax(`/user/updateUserExtra`, params, "POST");
 

src/views/Member/index.vue

@@ -15,7 +15,7 @@ import { showToast, showFailToast, showLoadingToast, showSuccessToast } from 'va
 
 import { getUserInfo,  updateUserInfo, updateCard, searchConnection, addUserFavi, setUserNfcTpl } from '@/api'
 
-import { updateUserExtra, updateUserLink, updateUserAddon } from '@/api/user';
+import { updateUserExtra, updateUserLink, getUserExtra,updateUserAddon } from '@/api/user';
 import { getAreaList, getWorkList } from '@/api/system';
 
 import imgTp1 from '@/assets/images/tp/tp_1.jpg'
@@ -48,7 +48,7 @@ const tabItemObj = ref([
   { title: "基本資料", icon: "fa-id-card-clip" },
   { title: "社群分享", icon: "fa-share-nodes" },
   { title: "人脈資訊", icon: "fa-gem" },
-  { title: "版型設定", icon: "fa-layer-group" }
+  { title: "NFC版型", icon: "fa-layer-group" }
 ]);
 
 const validatorUrl = (val) => {
@@ -78,28 +78,35 @@ const crop = ref({
 onMounted(async () => {
   let userRes = await getUserInfo()
   if (userRes.code === 200) {
-    form.value = userRes.data
+    uInfoForm.value = userRes.data  
-  } else {
+    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: form.value.area }).text
+      areaName.value = _.find(areaRes.data, { value: uInfoForm.value.area }).text
     }
   }
 
   //取得工作性質資料
   let workRes = await getWorkList()
   if (workRes.code === 200) {
+    console.log(workRes)
     workColumns.value = workRes.data
     //取得工作性質名稱
     if (workRes.data.length > 0) {
-      workName.value = _.find(workRes.data, { value: form.value.work }).text
+      workName.value = _.find(workRes.data, { value: uInfoForm.value.work }).text
     }
   }
 
@@ -204,8 +211,6 @@ const userInfoSubmit = async (values) => {
     message: '資料更新中...',
     forbidClick: true,
   });
-  values.area = form.value.area
-  values.work = form.value.work
 
   let res = await updateUserInfo(values)
   if (res.code === 200) {
@@ -250,7 +255,7 @@ const areaName = ref('');
 
 const onAreaConfirm = (value) => {
   areaName.value = value.selectedOptions[0].text
-  form.value.area = value.selectedOptions[0].value
+  uInfoForm.area = value.selectedOptions[0].value
   showAreaPicker.value = false
 }
 
@@ -261,7 +266,7 @@ const workName = ref('');
 
 const onWorkConfirm = (value) => {
   workName.value = value.selectedOptions[0].text
-  form.value.work = value.selectedOptions[0].value
+  uInfoForm.work = value.selectedOptions[0].value
   showAreaPicker.value = false
 }
 
@@ -452,7 +457,7 @@ const handleChangeTplSubmit = async() => {
           <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="form.avatar" alt="" v-if="form.avatar" />
+                <img class="upload-img avatar" :src="uInfoForm.avatar" alt="" v-if="uInfoForm.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>
@@ -460,38 +465,38 @@ const handleChangeTplSubmit = async() => {
                 </div>
               </div>
             </van-uploader>
-            <van-field v-model="form.mark" rows="3" type="textarea" maxlength="100" name="mark" placeholder="請輸入100字以內的簡介"
+            <van-field v-model="uInfoForm.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="form.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
+          <van-field v-model="uInfoForm.real_name" label="姓名" name="real_name" placeholder="請輸入您的姓名"
             :rules="[{ required: true, message: '姓名為必填' }]" />
-          <van-field v-model="form.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
+          <van-field v-model="uInfoForm.company" label="公司名稱" name="company" placeholder="請輸入您的公司名稱"
             :rules="[{ required: true, message: '公司名稱必填' }]" />
-          <van-field v-model="form.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
+          <van-field v-model="uInfoForm.title" label="職稱" name="title" placeholder="請輸入您的職稱" />
-          <van-field v-model="form.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
+          <van-field v-model="uInfoForm.phone" label="手機" name="phone" type="tel" placeholder="Ex. 0900000001 不要有空格"
             :rules="[{ required: true, message: '手機號必填' }, { pattern: /\d{10}/, message: '手機號格式錯誤' }]" />
-          <van-field v-model="form.tel" label="市話" name="tel" type="tel" placeholder="請輸入您的市話"
+          <van-field v-model="uInfoForm.tel" label="市話" name="tel" type="tel" placeholder="請輸入您的市話"
             :rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]" />
-          <van-field v-model="form.email" label="Email" name="email" placeholder="請輸入您的Email"
+          <van-field v-model="uInfoForm.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="form.address" label="住址" name="address" placeholder="請輸入您的地址" />
+          <van-field v-model="uInfoForm.address" label="住址" name="address" placeholder="請輸入您的地址" />
-          <van-field v-model="form.age" label="年齡" name="age" placeholder="請輸入您的年齡" />
+          <van-field v-model="uInfoForm.age" label="年齡" name="age" placeholder="請輸入您的年齡" />
           <van-field name="sex" label="性別">
             <template #input>
-              <van-radio-group v-model="genderChecked" direction="horizontal" checked-color="#5b7b94">
+              <van-radio-group v-model="uInfoForm.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="areaName" is-link readonly name="area" label="區域" placeholder="請選擇區域" 
+          <van-field v-model="uInfoForm.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="workName" is-link readonly name="work" label="工作性質" placeholder="請選擇工作性質"
+          <van-field v-model="uInfoForm.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" />
@@ -741,28 +746,25 @@ const handleChangeTplSubmit = async() => {
     <div class="content cnt3" v-show="tabActive === 3">
       <van-cell-group inset>
         <van-form>
-          <van-cell class="text-center bg-lightPink py-3">
-            <template #title>
-              <h6 class="text-darkBlue"><strong>感應式版型切換</strong></h6>
-            </template>
-          </van-cell>
-
           <div class="block">
             <van-image width="100%" position="top" fit="cover" :src="selectedTpl" />
           </div>
 
           <div class="d-flex justify-content-center py-3">
-            <van-button class="btn-tomatoRed px-5 mr-2">
-              預覽
-            </van-button>
             <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-row>
           <van-col span="12" v-for="(item, index) in tab3list" :key="index">
             <div class="imgBtn" :data-id="index" @click="handleSelectTpl(item.id)">

src/views/Send/index.vue

@@ -45,7 +45,7 @@ const cusCardInfo = computed(() => {
 //   return cardStore.vipCard;
 // });
 
-onBeforeMount(async () => {
+onMounted(async () => {
   // console.log('liff',liff)
   await liff.init({ liffId: import.meta.env.VITE_APP_LINE_LIFF_ID });
   
@@ -60,7 +60,6 @@ onBeforeMount(async () => {
   }
 })
 
-onMounted(async () => {
   
 //切換tab
 watch(() => activeName.value, function (newVal, oldVal) {  
@@ -83,8 +82,6 @@ onMounted(async () => {
   showFlex('0')
 })
 
-})
-
 async function showFlex(id) {
 
   switch (id) {