修改send頁面 > 以pinia方式處理、新增名片廣告及判斷

public/css/flex2html.css

@@ -152,7 +152,7 @@ strong {
   margin: 0 7px;
 }
 .LyMe .T1 {
-  border-radius: 17px;
+  border-radius: 5px;
 }
 .LyKi .T1 {
   border-radius: 10px;

src/api/index.js

@@ -75,6 +75,9 @@ export const getMovie = async () =>
 export const getMarquee = async () =>
   ajax(`/ads/getMarquee`);
 
+export const getFlexcard = async () =>
+  ajax(`/ads/getFlexcard`);
+
 //通訊錄
 export const getUserFaviList = async (params) =>
   ajax(`/UserFavi/getUserFaviList`, params , "GET");

src/utils/adcard.js

@@ -1,19 +1,85 @@
-import { genCard } from "./card/index";
-  
-function genAdCard (option) {
-    // const { json5: vcard } = ctx;
+function genAdCard(ctx,option) {
+  const { json5: vcard } = ctx;
 
-    // return {
-    //     type: "flex",
-    //     altText: vcard.altText,
-    //     contents: {
-    //         type: "carousel",
-    //         contents: ctx
-    //     },
-    // };
-
-    console.log(option,"test");
-    return option;
+  return {
+    type: "flex",
+    altText: "廣告卡片",
+    contents: {
+      type: "carousel",
+      contents: [
+        ctx.contents,
+        {
+            "type": "bubble",
+            "size":"mega",
+            "hero": {
+                "type": "image",
+                "url": option.ad_image,
+                "size": "full",
+                "aspectMode": "cover",
+                "aspectRatio": "19:11",
+                "action": {
+                    "type": "uri",
+                    "uri": option.link
+                }
+            },
+            "body": {
+                "type": "box",
+                "layout": "vertical",
+                "contents": [
+                    {
+                        "type": "text",
+                        "text": option.ad_title,
+                        "weight": "bold",
+                        "size": "xl",
+                        "color": "#333333"
+                    },
+                    {
+                        "type": "text",
+                        "text": option.ad_desc,
+                        "color": "#666666",
+                        "size": "md",
+                        "wrap": true
+                    }
+                ]
+            },
+            "footer": {
+                "type": "box",
+                "layout": "vertical",
+                "spacing": "sm",
+                "color": "#6c6664",
+                "contents": [
+                  {
+                    "type": "button",
+                    "style": "primary",
+                    "height": "sm",
+                    "color": "#6c6664",
+                    "action": {
+                      "type": "uri",
+                      "label": "test link",
+                      "uri": "https://linecorp.com"
+                    }
+                  },
+                  {
+                    "type": "box",
+                    "layout": "vertical",
+                    "contents": [],
+                    "margin": "sm"
+                  }
+                ],
+                "flex": 0
+            },
+            "styles": {
+                "body": {
+                  "backgroundColor": "#eeeeee"
+                },
+                "footer": {
+                  "backgroundColor": "#eeeeee"
+                }
+            }
+        }
+      ]
+    },
+  };
 }
 
-export { genAdCard}
+export { genAdCard };

src/utils/card.js

@@ -1,7 +1,6 @@
 import { genCard } from "./card/index";
 
 function cardFactory(option) {
-  console.log(genCard(option));
   return genCard(option);
 }
 

src/views/Send/index.vue

@@ -3,23 +3,28 @@ import liff from "@line/liff";
 
 import { showToast,showSuccessToast } from 'vant';
 
-import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
+import { onBeforeMount, onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
 
-import { getCard, getCusCard, getVipCard, updateSendCount } from '@/api'
+import { getCard, getCusCard, getVipCard, updateSendCount, getFlexcard } from '@/api'
 
 import { cardFactory } from '@/utils/card'
 
 import { genCard1 } from '@/utils/card2'
 import { genVipCard } from '@/utils/vipcard'
 import { genAdCard } from '@/utils/adcard'
-import { useStore } from 'vuex'
 
-const store = useStore()
+import { useUserStore } from '@/store/user';
+import { useCardStore } from '@/store/card';
+
+const userStore = useUserStore();
+const cardStore = useCardStore();
+
+const imageUrl = ref(import.meta.env.VITE_APP_BASE_URL)
 
 const state = ref({
   // active: 0,
   showCusCard: false,
-  card_title: computed(() => store.state.user.userInfo.card_title),
+  card_title: computed(() => cusCardInfo.value.card_title),
   vip_card: [],
   flexContent: {},
 })
@@ -28,14 +33,24 @@ const activeName = ref('0');
 
 let flexRef = ref(null)
 
-const userInfo = computed(() => {  
-  console.log(store.state.user.userInfo,"AA");
-  return store.state.user.userInfo
-})
+const userInfo = computed(() => {
+  return userStore.userData;
+});
 
-onMounted(async () => {
+const cusCardInfo = computed(() => {
+  return cardStore.cusCard;
+});
+
+// const vipCardInfo = computed(() => {
+//   return cardStore.vipCard;
+// });
+
+onBeforeMount(async () => {
   // console.log('liff',liff)
   await liff.init({ liffId: import.meta.env.VITE_APP_LINE_LIFF_ID });
+  
+  await userStore.getUserData();
+  await cardStore.getCardData();
 
   if (userInfo.value.level > 2) {
     let vipCardRes = await getVipCard({ userid: sessionStorage.getItem('uid') })
@@ -45,23 +60,29 @@ onMounted(async () => {
   }
 })
 
-//切換tab
-watch(() => activeName.value, function (newVal, oldVal) {  
-  if (newVal !== oldVal) {
-    showFlex(newVal)
-  }
-}, { immediate: true })
-
+onMounted(async () => {
+  
+  //切換tab
+  watch(() => activeName.value, function (newVal, oldVal) {  
+    
+    if (newVal !== oldVal) {
+      showFlex(newVal)
+    }
+  }, { immediate: true })
 
-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.cus_card, function (newVal, oldVal) {
+    // if (userInfo.value.level > 1 && newVal > 0) {
+    if (userInfo.value.level > 1) {
+      state.value.showCusCard = true
+    }
+  }, { immediate: true })
 
-//切換版型
-watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
-  showFlex('0')
+  //切換NFC版型
+  watch(() => userInfo.value.nc_template, function (newVal, oldVal) {
+    showFlex('0')
+  })
+  
 })
 
 async function showFlex(id) {
@@ -70,16 +91,20 @@ 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 })
-      // 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');
 
+      if(userInfo.value.status === 1 && userInfo.value.is_send_ad === 0){ //正常 & 願意帶廣告  
+        state.value.flexContent = JSON.parse(card)
+      }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);
+        }
+      }
 
+      flexRef.value.innerHTML = ''
+      flex2html("flex", state.value.flexContent)
 
       break
     case '1':
@@ -130,9 +155,6 @@ const sendEcard = async () => {
 
   let content = JSON.parse(JSON.stringify(state.value.flexContent))
 
-
-  console.log(JSON.stringify(state.value.flexContent))
-
   let res
 
   if (activeName.value === '0') {
@@ -178,8 +200,8 @@ function showChangeTpl() {
   showDraw.value = true
 }
 
-const changeTpl = (val) => {
-  store.dispatch('user/setUserTpl', val)
+const changeTpl = async (val) => {
+  userStore.setUserTpl(val)
   showDraw.value = false
 }