將watch移出onMounted

src/views/Send/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import liff from "@line/liff";
 
-import { showToast,showSuccessToast } from 'vant';
+import { showToast, showSuccessToast } from 'vant';
 
 import { onBeforeMount, onMounted, reactive, ref, toRefs, computed, watch } from '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,29 +60,25 @@ onBeforeMount(async () => {
   }
 })
 
-onMounted(async () => {
-  
-  //切換tab
-  watch(() => activeName.value, function (newVal, oldVal) {  
+//切換tab
+watch(() => activeName.value, function (newVal, oldVal) {
 
   if (newVal !== oldVal) {
     showFlex(newVal)
   }
-  }, { immediate: true })
+}, { immediate: true })
 
-  //確認是否顯示附加卡片
-  watch(() => userInfo.value.cus_card, function (newVal, oldVal) {
+//確認是否顯示附加卡片
+watch(() => userInfo.value.cus_card, function (newVal, oldVal) {
   // if (userInfo.value.level > 1 && newVal > 0) {
   if (userInfo.value.level > 1) {
     state.value.showCusCard = true
   }
-  }, { immediate: true })
+}, { immediate: true })
 
-  //切換NFC版型
-  watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
+//切換NFC版型
+watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
   showFlex('0')
-  })
-  
 })
 
 async function showFlex(id) {
@@ -92,14 +88,14 @@ async function showFlex(id) {
       let { data: res } = await getCard({ userid: sessionStorage.getItem('uid') })
       let { card } = cardFactory({ tid: userInfo.value.nc_template, vcard: res })
 
-      if(userInfo.value.status === 1 && userInfo.value.is_send_ad === 0){ //正常 & 願意帶廣告  
+      if (userInfo.value.status === 1 && userInfo.value.is_send_ad === 0) { //正常 & 願意帶廣告  
         state.value.flexContent = JSON.parse(card)
-      }else{        
+      } else {
         let res2 = await getFlexcard();
         if (res2.code === 200) {
           let data = res2.data;
           data.ad_image = imageUrl.value + data.ad_image;
-          state.value.flexContent = genAdCard(JSON.parse(card),data);
+          state.value.flexContent = genAdCard(JSON.parse(card), data);
         }
       }
 
@@ -155,6 +151,7 @@ const sendEcard = async () => {
 
   let content = JSON.parse(JSON.stringify(state.value.flexContent))
 
+  console.log('content', JSON.stringify(state.value.flexContent))
   let res
 
   if (activeName.value === '0') {
@@ -215,7 +212,7 @@ const changeTpl = async (val) => {
         <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>
+        <h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
       </template>
     </van-nav-bar>
 
@@ -235,7 +232,7 @@ const changeTpl = async (val) => {
           <template #title>
             <div class="tab_item">
               <i class="fa-solid fa-clipboard fa-2x mb-1"></i>
-              <p class="mb-3">{{state.card_title}}</p>
+              <p class="mb-3">{{ state.card_title }}</p>
             </div>
           </template>
         </van-tab>
@@ -244,7 +241,7 @@ const changeTpl = async (val) => {
           <template #title>
             <div class="tab_item">
               <i class="fa-regular fa-file-lines fa-2x mb-1"></i>
-              <p class="mb-3">{{card.title}}</p> 
+              <p class="mb-3">{{ card.title }}</p>
             </div>
           </template>
         </van-tab>
@@ -322,8 +319,9 @@ const changeTpl = async (val) => {
 
 .tpl-list {
   .tpl-item {
-    width:150px;
+    width: 150px;
     padding: 10px;
+
     img {
       width: 100%;
     }