From 345da1f3f33685c66bc0a6dc0046951586e7ec60 Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Sat, 18 Nov 2023 16:32:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BC=E9=80=81=E5=90=8D?=
 =?UTF-8?q?=E7=89=87=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.stage               |  4 +--
 src/main.js              |  3 +-
 src/store/card.js        | 19 +++++++++--
 src/utils/card/card1.js  | 13 ++++++--
 src/utils/card/card2.js  | 13 ++++++--
 src/utils/initStore.js   | 15 +++------
 src/views/Home/index.vue |  5 ++-
 src/views/Send/index.vue | 70 +++++++++++++++++++++-------------------
 8 files changed, 86 insertions(+), 56 deletions(-)

diff --git a/.env.stage b/.env.stage
index e4c019b..8ce3b81 100644
--- a/.env.stage
+++ b/.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
 
diff --git a/src/main.js b/src/main.js
index 50c4cd0..615fe9b 100644
--- a/src/main.js
+++ b/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");
 
diff --git a/src/store/card.js b/src/store/card.js
index a0bed1d..eb96b6b 100644
--- a/src/store/card.js
+++ b/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) {
diff --git a/src/utils/card/card1.js b/src/utils/card/card1.js
index 0818b15..9ca8def 100644
--- a/src/utils/card/card1.js
+++ b/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"
                     }
diff --git a/src/utils/card/card2.js b/src/utils/card/card2.js
index 6239566..9386c41 100644
--- a/src/utils/card/card2.js
+++ b/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"
diff --git a/src/utils/initStore.js b/src/utils/initStore.js
index e58435e..ba06338 100644
--- a/src/utils/initStore.js
+++ b/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) => {
+// };
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index a0a268b..5275c09 100644
--- a/src/views/Home/index.vue
+++ b/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();
 
 });
diff --git a/src/views/Send/index.vue b/src/views/Send/index.vue
index c354a3a..f31bd12 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,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%;
     }