收下并发送消息

index.html

@@ -74,7 +74,7 @@
 
     <script type="module">
       // 导入API函数
-      import { getImageApi } from './src/api/member.js';
+      import { getImageApi, acceptCardApi } from './src/api/member.js';
 
       // 获取弹窗元素
       const landingImage = document.getElementById('landingImage');
@@ -82,14 +82,27 @@
       const popup = document.getElementById("popup");
       const closeBtn = document.getElementById("closeBtn");
 
+      // 防抖多次点击
+      let isClickable = true;
+
+      // 获取北京时间（东八区）的函数
+      function getBeijingTime() {
+        const date = new Date();
+        const beijingTime = new Date(date.getTime() + 8 * 60 * 60 * 1000);
+        return beijingTime.toISOString();
+      }
+
+      // 记录页面打开时间
+      const pageOpenTime = getBeijingTime();
+
       // 获取图片方法
       async function getImage() {
         try {
           const res = await getImageApi(); 
-          if (res.code == 200 && response.data) {
+          if (res.code == 200 && res.data) {
             return {
-              landingImageUrl: response.data.landingImage, 
-              popupImageUrl: response.data.popupImage 
+              landingImageUrl: res.data.landingImage, 
+              popupImageUrl: res.data.popupImage 
             };
           } else {
             console.warn('网络错误，请稍后重试');
@@ -118,16 +131,40 @@
       };
 
       // 点击"开心收下"，关闭弹窗
-      closeBtn.addEventListener('click', function() {
-        popup.classList.remove("show");
-      });
+      closeBtn.addEventListener('click', closePopupAndSendData);
 
       // 点击弹窗空白处，关闭弹窗
       popup.addEventListener('click', function(e) {
         if (e.target === popup) {
-          popup.classList.remove("show");
+          closePopupAndSendData();
         }
       });
+
+      // 关闭弹窗并发送数据
+      async function closePopupAndSendData() {
+        if (!isClickable) {
+          return;
+        }
+
+        // 关闭弹窗
+        popup.classList.remove("show");
+        
+        // 发送页面打开时间到后端
+        try {
+          await acceptCardApi({
+            openTime: pageOpenTime,
+          });
+          console.log('发送成功', pageOpenTime);
+        } catch (error) {
+          console.error('发送失败', pageOpenTime);
+        }
+        
+        // 设置点击冷却
+        isClickable = false;
+        setTimeout(() => {
+          isClickable = true;
+        }, 10000);
+      }
     </script>
   </body>
 </html>

src/api/member.js

@@ -4,10 +4,20 @@ import { request } from "/src/utils/request.js";
 // 正确的 Vite 环境变量用法
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
+// 获取图片
 export function getImageApi(data) {
     return request({
         url: `${API_BASE_URL}/api/getImage`,
         method: "post",
         data: data,
     });
-}
+}
+
+// 用户点击收下
+export function acceptCardApi(data) {
+    return request({
+        url: `${API_BASE_URL}/api/acceptCard`,
+        method: "post",
+        data: data,
+    });
+}