diff --git a/public/css/flex2html.css b/public/css/flex2html.css
index f4c3e0e..1fd2ff2 100644
--- a/public/css/flex2html.css
+++ b/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;
diff --git a/src/api/index.js b/src/api/index.js
index 149f2aa..0ff48c4 100644
--- a/src/api/index.js
+++ b/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");
diff --git a/src/utils/adcard.js b/src/utils/adcard.js
index 9ee2d59..8afcae4 100644
--- a/src/utils/adcard.js
+++ b/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}
\ No newline at end of file
+export { genAdCard };
\ No newline at end of file
diff --git a/src/utils/card.js b/src/utils/card.js
index c49f19e..f5a7aa6 100644
--- a/src/utils/card.js
+++ b/src/utils/card.js
@@ -1,7 +1,6 @@
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 8953d0f..32afb87 100644
--- a/src/views/Send/index.vue
+++ b/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
}