首頁串接

src/api/index.js

@@ -18,6 +18,9 @@ export const setUserLevel = async (level) =>
 export const setUserTpl = async (tpl) =>
   ajax(`/user/setUserTpl`, { tpl }, "POST");
 
+export const toggleSendWithAD = async (type) =>
+  ajax(`/user/toggleSendWithAD`, { type }, "POST");
+
 export const register = async (userInfo) =>
   ajax(`/auth/register`, userInfo, "POST");
 
@@ -58,3 +61,8 @@ export const getAuthList = async () =>
 //廣告
 export const getMovie = async () =>
   ajax(`/ads/getMovie`);
+
+export const getMarquee = async () =>
+  ajax(`/ads/getMarquee`);
+
+

src/views/Home/index.vue

@@ -1,21 +1,19 @@
 <script setup>
 import moment from 'moment'
 import QrcodeVue from 'qrcode.vue'
-import { useCountDown } from '@vant/use';
 import { toClipboard } from '@soerenmartius/vue3-clipboard'
 
 import { ref, computed, onBeforeMount, nextTick, inject } from "vue";
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
-import { showToast,showSuccessToast } from 'vant';
+import { showToast,showSuccessToast, showConfirmDialog } from 'vant';
 
 import { Dialog } from 'vant';
-import { NoticeBar } from 'vant';
 
 // import Footer from '@/components/Footer.vue'
 
-import { login, bindCard , getMovie } from '@/api'
+import { login, bindCard, getMovie, getMarquee, toggleSendWithAD } from '@/api'
 
 const router = useRouter()
 const route = useRoute()
@@ -26,7 +24,6 @@ const showShare = ref(false)
 const showNfcQrcode = ref(false)
 
 const checked = ref(true);
-
 const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL)
 
 const userLevel = {
@@ -135,32 +132,6 @@ onBeforeMount(async () => {
   })
 })
 
-
-
-
-
-let adData = await getMovie();
-if (adData.code === 200) {
-  popShow.value = true;
-  console.log(adData.data.play_sec)
-}
-
-// 使用useCountDown做倒數計時
-// const countDown = useCountDown({time: 1000 * adData.data.play_sec});
-// const current = countDown.current;
-// countDown.start();
-
-
-// const test = computed(() => {
-//   return store.state.user.userInfo
-// })
-
-
-
-
-
-
-
 const userInfo = computed(() => {
   return store.state.user.userInfo
 })
@@ -221,6 +192,33 @@ const handleLogout = () => {
 }
 
 
+
+const noticeData = await getMarquee();
+const noticeClick = (num) => {
+  let url = noticeData.data[num].ad_link;
+  window.open(url, '_blank');
+}
+
+const adData = await getMovie();
+if (adData.code === 200) {
+  popShow.value = true;
+}
+
+const modalClose = ref(false)
+const closeShow = () => {
+  modalClose.value = true;
+}
+
+const adSwitchStatus = ref(Boolean(userInfo.value.is_send_ad))
+const onUpdateValue = (newValue) => {
+  showConfirmDialog({
+    title: '提醒確認',
+    message: '是否切換開關？',
+  }).then(() => {
+    toggleSendWithAD(newValue)
+  });
+};
+
 </script>
 
 
@@ -232,7 +230,13 @@ const handleLogout = () => {
       <a href="javascript:;"><h5 class="umoney phone">歡迎來到會員中心</h5></a>
     </div>
 
-    <van-notice-bar color="#ffffff" background="#e05338" left-icon="volume" mode="link">測試文字測試文字測試文字測試文字測試文字測試文字</van-notice-bar>
+    <van-notice-bar color="#ffffff" background="#e05338" left-icon="volume" mode="link" :scrollable="true">
+      <van-swipe class="notice-swipe" :touchable="false" :show-indicators="false">
+        <van-swipe-item v-for="(item, key, index) in noticeData.data" @click="noticeClick(key)">
+          {{item.ad_title}}
+        </van-swipe-item>        
+      </van-swipe>
+    </van-notice-bar>
     
     <div class="my-account">
       <div class="avatar">
@@ -406,7 +410,7 @@ const handleLogout = () => {
               <i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片帶廣告
             </div>
             <div class="right text-right">
-              <van-switch v-model="checked" size="18px" active-color="#345068" inactive-color="#888888"/>         
+              <van-switch v-model="adSwitchStatus" @update:model-value="onUpdateValue" size="18px" active-color="#345068" inactive-color="#888888"/>         
             </div>
           </div>
         </div>
@@ -424,17 +428,17 @@ const handleLogout = () => {
 
     <van-overlay :show="popShow" z-index="1000" :style="{background:'rgba(0, 0, 0, .85)'}">      
       <div class="wrapper" @click.stop>
-        <div class="clip" @click="popShow = false"> 
-          <span class="van-icon van-icon-cross"></span>
-          <van-count-down :style="{color:'#fff'}" @click="popShow = false" @finish="popShow = true" :auto-start="true" :time="10000"  format="ss 秒"/>
+        <div class="clip"> 
+          <van-icon :style="{display:'none',marginRight:'5px'}" @click="popShow = false" :class="{'d-block':modalClose}" name="cross" size="15"/>      
+          <van-count-down :style="{color:'#fff'}" @finish="closeShow" :auto-start="true" :time="adData.data.play_sec*1000" format="ss 秒"/>
         </div>
         <div class="top">
-          <iframe width="100%" height="100%" src="https://www.youtube.com/embed/dUro-rg2Uz8?si=K5lDwRcM1NfNCEUR" title="YouTube video player" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          <iframe width="100%" height="100%" :src="'https://utel.zltest.com.tw'+adData.data.ad_movie" title="YouTube video player" autoplay="true" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
         </div>
         <div class="bottom">
-          <h5 class="title">測試文字測試文字測試文字</h5>
-          <h6 class="desc ellipsis e3">測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</h6>
-          <div class="btn btn-light form-control font-weight-bold" @click="router.push('/shop')"><i class="fa-solid fa-fw fa-link"></i> 前往連結</div>
+          <h5 class="title">{{adData.data.ad_title}}</h5>
+          <h6 class="desc ellipsis e3">{{adData.data.ad_desc}}</h6>
+          <van-button type="light" :url="adData.data.ad_link" block><i class="fa-solid fa-fw fa-link"></i> 前往連結</van-button>
         </div>
       </div>
     </van-overlay>
@@ -473,6 +477,7 @@ const handleLogout = () => {
     }
     .bottom{
       position: relative;
+      width:100%;
       flex: 0 0 auto;
       padding: 15px;
       .title{