From 2a958df547f99cfe0dab3b1f3aa3ec81a49b32af Mon Sep 17 00:00:00 2001
From: bruce68410 <kai326326@gmail.com>
Date: Wed, 22 Nov 2023 01:01:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=84=E5=8A=A0=E5=BB=A3=E5=91=8A=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=B8=AC=E8=A9=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/js/flex2html.min.js |   2 +
 src/utils/adcard.js        |  19 +++++++
 src/utils/card.js          |   1 +
 src/views/Send/index.vue   | 101 +++++++++++++++++++------------------
 4 files changed, 75 insertions(+), 48 deletions(-)
 create mode 100644 src/utils/adcard.js

diff --git a/public/js/flex2html.min.js b/public/js/flex2html.min.js
index 2b9a051..4f10f79 100644
--- a/public/js/flex2html.min.js
+++ b/public/js/flex2html.min.js
@@ -829,6 +829,8 @@ function bubble_struc(json) {
   direction = !direction || direction == "" ? "ltr" : direction;
   size = upper2digit(size);
 
+  console.log(json);
+
   return `<div class="lyItem Ly${size}"><div class="T1 fx${direction.toUpperCase()}" dir="${direction}"><!-- hero --><!-- header --><!-- body --><!-- footer --></div></div>`;
 }
 function hero_struc(json) {
diff --git a/src/utils/adcard.js b/src/utils/adcard.js
new file mode 100644
index 0000000..9ee2d59
--- /dev/null
+++ b/src/utils/adcard.js
@@ -0,0 +1,19 @@
+import { genCard } from "./card/index";
+  
+function genAdCard (option) {
+    // const { json5: vcard } = ctx;
+
+    // return {
+    //     type: "flex",
+    //     altText: vcard.altText,
+    //     contents: {
+    //         type: "carousel",
+    //         contents: ctx
+    //     },
+    // };
+
+    console.log(option,"test");
+    return option;
+}
+
+export { genAdCard}
\ No newline at end of file
diff --git a/src/utils/card.js b/src/utils/card.js
index f5a7aa6..c49f19e 100644
--- a/src/utils/card.js
+++ b/src/utils/card.js
@@ -1,6 +1,7 @@
 import { genCard } from "./card/index";
 
 function cardFactory(option) {
+  console.log(genCard(option));
   return genCard(option);
 }
 
diff --git a/src/views/Send/index.vue b/src/views/Send/index.vue
index f31bd12..853aaf6 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,showFailToast } from 'vant';
+import { showToast,showSuccessToast } from 'vant';
 
 import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
 
@@ -11,16 +11,15 @@ import { cardFactory } from '@/utils/card'
 
 import { genCard1 } from '@/utils/card2'
 import { genVipCard } from '@/utils/vipcard'
-import { useUserStore } from '@/store/user'
-import { useCardStore } from '@/store/card'
+import { genAdCard } from '@/utils/adcard'
+import { useStore } from 'vuex'
 
-const userStore = useUserStore()
-const cardStore = useCardStore()
+const store = useStore()
 
 const state = ref({
   // active: 0,
   showCusCard: false,
-  card_title: computed(() => cardStore.cusCard.card_title),
+  card_title: computed(() => store.state.user.userInfo.card_title),
   vip_card: [],
   flexContent: {},
 })
@@ -30,7 +29,7 @@ const activeName = ref('0');
 let flexRef = ref(null)
 
 const userInfo = computed(() => {
-  return userStore.userData
+  return store.state.user.userInfo
 })
 
 onMounted(async () => {
@@ -45,19 +44,20 @@ onMounted(async () => {
   }
 })
 
-
-watch(() => activeName.value, function (newVal, oldVal) {
+//切換tab
+watch(() => activeName.value, function (newVal, oldVal) {  
   if (newVal !== oldVal) {
     showFlex(newVal)
   }
 }, { immediate: true })
 
-watch(() => cardStore.cusCard.cus_card, function (newVal, oldVal) {
+watch(() => userInfo.value.cus_card, function (newVal, oldVal) {
   if (userInfo.value.level > 1 && newVal.length > 0) {
     state.value.showCusCard = true
   }
 }, { immediate: true })
 
+//切換版型
 watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
   showFlex('0')
 })
@@ -68,10 +68,17 @@ async function showFlex(id) {
     case '0':
       let { data: res } = await getCard({ userid: sessionStorage.getItem('uid') })
       let { card } = cardFactory({ tid: userInfo.value.nc_template, vcard: res })
-      // let { card } = genCard(res)
-      state.value.flexContent = JSON.parse(card)
+      state.value.flexContent = genAdCard(JSON.parse(card));
+      // state.value.flexContent = JSON.parse(card)
       flexRef.value.innerHTML = ''
       flex2html("flex", state.value.flexContent)
+      // console.log(flex2html("flex", state.value.flexContent),"flex2html");
+
+      
+      document.getElementById("flex").append('testAAA');
+
+
+
       break
     case '1':
       if (userInfo.value.level > 1) {
@@ -121,34 +128,32 @@ 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])
-    }
 
-    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)
+  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('傳送失敗')
   }
 }
 
@@ -172,7 +177,7 @@ function showChangeTpl() {
 }
 
 const changeTpl = (val) => {
-  userStore.setUserTpl(val)
+  store.dispatch('user/setUserTpl', val)
   showDraw.value = false
 }
 
@@ -186,7 +191,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>
 
@@ -206,7 +211,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>
@@ -215,7 +220,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>
@@ -223,11 +228,12 @@ 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">
           <div class="chatbox">
+            <!-- <div id="flex" ref="flexRef"></div> -->
             <div id="flex" ref="flexRef"></div>
           </div>
         </div>
@@ -236,10 +242,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>
@@ -292,9 +298,8 @@ const changeTpl = (val) => {
 
 .tpl-list {
   .tpl-item {
-    width: 150px;
+    width:150px;
     padding: 10px;
-
     img {
       width: 100%;
     }