From 8a4ac9e84497671d2f89ede728a791ee2d809413 Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Sat, 25 Nov 2023 15:24:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=87watch=E7=A7=BB=E5=87=BAonMounted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Send/index.vue | 66 +++++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/views/Send/index.vue b/src/views/Send/index.vue
index 32afb87..e8da5a1 100644
--- a/src/views/Send/index.vue
+++ b/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,10 +45,10 @@ 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 });
-  
+
   await userStore.getUserData();
   await cardStore.getCardData();
 
@@ -60,29 +60,25 @@ onBeforeMount(async () => {
   }
 })
 
-onMounted(async () => {
-  
-  //切換tab
-  watch(() => activeName.value, function (newVal, oldVal) {  
-    
-    if (newVal !== oldVal) {
-      showFlex(newVal)
-    }
-  }, { immediate: true })
+//切換tab
+watch(() => activeName.value, 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 })
+  if (newVal !== oldVal) {
+    showFlex(newVal)
+  }
+}, { immediate: true })
 
-  //切換NFC版型
-  watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
-    showFlex('0')
-  })
-  
+//確認是否顯示附加卡片
+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 })
+
+//切換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>
@@ -252,7 +249,7 @@ const changeTpl = async (val) => {
         <!-- <van-tab :title="state.card_title" name="1" v-if="state.showCusCard"/>
         <van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id"/> -->
       </van-tabs>
-      
+
 
       <div class="flex-section">
         <div class="table-responsive">
@@ -266,10 +263,10 @@ const changeTpl = async (val) => {
     </div>
 
     <div class="d-flex p-4">
-      <van-button block class="btn-skyBlue m-2" @click="sendEcard">        
+      <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'">        
+      <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>
@@ -322,8 +319,9 @@ const changeTpl = async (val) => {
 
 .tpl-list {
   .tpl-item {
-    width:150px;
+    width: 150px;
     padding: 10px;
+
     img {
       width: 100%;
     }