修改發送名片問題

.env.stage

@@ -1,12 +1,12 @@
 NODE_ENV = development
 
-VITE_ENV = stage
+VITE_ENV = development
 
 VITE_APP_BASE_URL = https://utel.zltest.com.tw 
 
 VITE_APP_LINE_LIFF_ID = 1656948609-xMp7dWAz
 
-VITE_APP_SEND_URL = https://liff.line.me/1656948609-BYr8Nynp
+VITE_APP_SEND_URL = https://liff.line.me/1656948609-xMp7dWAz
 
 VITE_APP_API_URL = https://utel.zltest.com.tw/appapi/v1
 

src/main.js

@@ -4,7 +4,7 @@ import router from "./router";
 import store from "./store";
 import pinia from './store/pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import { initStore } from './utils/initStore';
+// import { initStore } from './utils/initStore';
 
 import liff from '@line/liff';
 import { VueClipboard } from "@soerenmartius/vue3-clipboard";
@@ -25,7 +25,6 @@ liff.init({
   vue.use(VueClipboard);
   vue.use(pinia);
   // 初始化Store
-  initStore(pinia);
   
   vue.use(store).use(router).mount("#app");
 

src/store/card.js

@@ -1,17 +1,32 @@
 import { defineStore } from 'pinia'
 
 import { updateCusCard } from "@/api";
+import { getCardData } from "@/api/card";
 
 export const useCardStore = defineStore('card', {
     state: () => {
         return {
-            cusCard: '',
-            vipCard: '',
+            cusCard: {
+                card_title: '',
+                show_cus: 1,
+                cus_card: '',
+            },
+            vipCard: [],
         }
     },
     getters: {
     },
     actions: {
+        async getCardData() {
+            let res = await getCardData();
+
+            if (res.code === 200) {
+                this.cusCard = res.data.cus_card;
+                return true;
+            }
+
+            return false;
+        },
         async updateCusCard(payload) {
             let res = await updateCusCard(payload);
             if (res.code === 200) {

src/utils/card/card1.js

@@ -91,7 +91,7 @@ function genCard(vcard) {
         ],
         "margin": "md",
         "paddingStart": "lg"
-      }
+      },
       `;
   } else {
     vcardAddr = "";
@@ -417,8 +417,17 @@ function genCard(vcard) {
                         ${vcardPhone}
                         ${vcardTel}     
                         ${vcardLink} 
-                        ${vcardEmail}   
+                        ${vcardEmail}
                         ${vcardAddr}
+                        {
+                          "type": "box",
+                          "layout": "vertical",
+                          "contents": [
+                            {
+                              "type": "separator"
+                            }
+                          ]
+                        }                        
                       ],
                       "margin": "xs"
                     }

src/utils/card/card2.js

@@ -46,7 +46,7 @@ function genCard(vcard) {
         },
         "wrap": true,
         "align": "end"
-      } 
+      }, 
       `;
   } else {
     vcardAddr = "";
@@ -252,7 +252,16 @@ function genCard(vcard) {
                             ${vcardTel}
                             ${vcardLink}
                             ${vcardEmail}
-                            ${vcardAddr}                             
+                            ${vcardAddr}
+                            {
+                              "type": "box",
+                              "layout": "vertical",
+                              "contents": [
+                                {
+                                  "type": "separator"
+                                }
+                              ]
+                            }                                                                                     
                           ],
                           "alignItems": "flex-end",
                           "paddingEnd": "xl"

src/utils/initStore.js

@@ -1,12 +1,5 @@
-import { useCardStore } from '@/store/card.js';
-import { getCardData } from '@/api/card.js';
+// import { useCardStore } from '@/store/card.js';
+// import { getCardData } from '@/api/card.js';
 
-export const initStore = async (pinia) => {
-    const cardStore = useCardStore();
-
-    let res = await getCardData();
-    if (res.code === 200) {
-        cardStore.cusCard = res.data.cus_card;
-        cardStore.vipCard = res.data.vip_card;
-    }
-};
+// export const initStore = async (pinia) => {
+// };

src/views/Home/index.vue

@@ -6,6 +6,7 @@ import { toClipboard } from "@soerenmartius/vue3-clipboard";
 import { ref, computed, onBeforeMount } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useUserStore } from '@/store/user';
+import { useCardStore } from '@/store/card';
 
 import { showToast, showSuccessToast, showConfirmDialog } from "vant";
 import 'vant/es/toast/style';
@@ -20,6 +21,7 @@ const router = useRouter();
 const route = useRoute();
 
 const userStore = useUserStore();
+const cardStore = useCardStore();
 
 const showShare = ref(false);
 const showNfcQrcode = ref(false);
@@ -112,7 +114,8 @@ onBeforeMount(async () => {
   }
   
   await userStore.getUserData();
-  
+  await cardStore.getCardData();
+
   handleAD();
 
 });

src/views/Send/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import liff from "@line/liff";
 
-import { showToast,showSuccessToast } from 'vant';
+import { showToast, showSuccessToast,showFailToast } from 'vant';
 
 import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
 
@@ -59,7 +59,6 @@ watch(() => cardStore.cusCard.cus_card, function (newVal, oldVal) {
 }, { immediate: true })
 
 watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
-  console.log('new', newVal)
   showFlex('0')
 })
 
@@ -122,32 +121,34 @@ const sendEcard = async () => {
 
   let content = JSON.parse(JSON.stringify(state.value.flexContent))
 
+  
+  try {
+    let res
+
+    if (activeName.value === '0') {
+      res = await liff.shareTargetPicker([content,
+        {
+          'type': 'text',
+          'text': '名片的連結都可以點擊!'
+        }])
+    } else {
+      res = await liff.shareTargetPicker([content])
+    }
 
-  console.log(JSON.stringify(state.value.flexContent))
-
-  let res
-
-  if (activeName.value === '0') {
-    res = await liff.shareTargetPicker([content,
-      {
-        'type': 'text',
-        'text': '名片的連結都可以點擊!'
-      }])
-  } else {
-    res = await liff.shareTargetPicker([content])
-  }
-
-  if (res.status === 'success') {
-    let result = await updateSendCount(userInfo.value.user_id)
-    showSuccessToast('傳送成功')
-    // .then(() => {
-    //   // on confirm
-    // })
-    // .catch(() => {
-    //   // on cancel
-    // })
-  } else {
-    showToast.fail('傳送失敗')
+    if (res.status === 'success') {
+      let result = await updateSendCount(userInfo.value.user_id)
+      showSuccessToast('傳送成功')
+      // .then(() => {
+      //   // on confirm
+      // })
+      // .catch(() => {
+      //   // on cancel
+      // })
+    } else {
+      showFailToast('傳送失敗')
+    }
+  }catch(err){
+    console.log('send error',err)
   }
 }
 
@@ -185,7 +186,7 @@ const changeTpl = (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>
 
@@ -205,7 +206,7 @@ const changeTpl = (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>
@@ -214,7 +215,7 @@ const changeTpl = (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>
@@ -222,7 +223,7 @@ const changeTpl = (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">
@@ -235,10 +236,10 @@ const changeTpl = (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>
@@ -291,8 +292,9 @@ const changeTpl = (val) => {
 
 .tpl-list {
   .tpl-item {
-    width:150px;
+    width: 150px;
     padding: 10px;
+
     img {
       width: 100%;
     }