「風」通行證

ArkCard-web/event.html

@@ -29,37 +29,40 @@
             </div>
         </div>
     </section>
-    <section id="sec05-moblie" class="sec05 my-4">
-        <div class="sec05-moblie container-fluid">
-            <div class="sec05-moblie-header">
-                <h1 class="secn-title ps-2">您可以獲得台北方舟「風」通行證 + 港記酥皇 NFT</h1>
-            </div>
-            <p class="text-start mb-2">※ 點選【同意接收】按鈕，即可獲得</p>
-
-            <div class="sec06-nft-mall row row-cols-1 row-cols-md-4 g-4">
-                <div class="col">
-                    <div class="card h-100">
-                        <a class="event-nft-send mb-2" target="_blank">
-                            <img src="https://ark.cards/img/nft/wind.png" class="card-img-top" alt="風的通行證">
-                        </a>
-                        <div style="background-color:#231D20;">
-                            <video loop autoplay muted style="width:100%;">
-                                <source src="https://ark.cards/img/nft/kongkee.mp4" type="video/mp4">
-                                Your browser does not support the video tag.
-                            </video>
-                        </div>
-                        <div class="card-body text-center">
-                            <div class="mb-3">
-                                <input type="email" class="mb-1 form-control" id="exampleFormControlInput1" placeholder="請輸入您的Email">
-                                <div class="text-danger small" style="text-align: left;">* 會發送合約地址至您指定的Email</div>
+    <form class="nft-event" action="">
+        <section id="sec05-moblie" class="sec05 my-4">
+            <div class="sec05-moblie container-fluid">
+                <div class="sec05-moblie-header">
+                    <h1 class="secn-title ps-2">您可以獲得台北方舟「風」通行證 + 港記酥皇 NFT</h1>
+                </div>
+                <p class="text-start mb-2">※ 點選【同意接收】按鈕，即可獲得</p>
+
+                <div class="sec06-nft-mall row row-cols-1 row-cols-md-4 g-4">
+                    <div class="col">
+                        <div class="card h-100">
+                            <a class="event-nft-send mb-2" target="_blank">
+                                <img src="https://ark.cards/img/nft/wind.png" class="card-img-top" alt="風的通行證">
+                            </a>
+                            <div style="background-color:#231D20;">
+                                <video loop autoplay muted style="width:100%;">
+                                    <source src="https://ark.cards/img/nft/kongkee.mp4" type="video/mp4">
+                                    Your browser does not support the video tag.
+                                </video>
+                            </div>
+                            <div class="card-body text-center">
+                                <div class="mb-3">
+                                    <input type="email" class="mb-1 form-control" id="exampleFormControlInput1" placeholder="請輸入您的Email">
+                                    <div class="text-danger small" style="text-align: left;">* 會發送合約地址至您指定的Email</div>
+                                </div>
+                                <div class="" id="userId"></div>
+                                <button type="button" class="event-nft-send btn btn-primary">同意接收</button>
                             </div>
-                            <button type="button" class="event-nft-send btn btn-primary">同意接收</button>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
+    </form>
 
     <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
         <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
@@ -101,37 +104,91 @@ function nft_sent_message() {
     });
 }
 
-$(".event-nft-send").click(function (e) {
-    // 取得liff_id
-    liff.init({
-        liffId: "1656404434-DoEqYOad"
-    })
-    .then(() => {
-        var context = liff.getContext();
-        console.log(context);
+// 取得liff_id
+liff.init({
+    liffId: "1656404434-DoEqYOad"
+})
+.then(() => {
+    var context = liff.getContext();
+    console.log(context);
 
-        var profile = liff.getProfile();
-        console.log(profile);
+    var profile = liff.getProfile();
+    console.log(profile);
 
-        // login
-        if (!liff.isLoggedIn()) {
-            console.log("您未登入");
-            console.log('context.userId = ' + context.userId); // test
+    $('#userId').text(context.userId);
 
-            // 呼叫fastAPI，贈送「風」通行證 + 「港記酥皇」
+    // login
+    if (!liff.isLoggedIn()) {
+        console.log("您未登入");
+        console.log('context.userId = ' + context.userId); // test
 
-            nft_sent_message();
-        } else {
-            console.log("您已登入");
+        // 呼叫fastAPI，贈送「風」通行證 + 「港記酥皇」
 
-            // 呼叫fastAPI，贈送「風」通行證 + 「港記酥皇」
+        nft_sent_message();
+    } else {
+        console.log("您已登入");
 
-            nft_sent_message();
-        }
-    })
-    .catch((err) => {
-        console.log('初始化失敗: ' + err.code + ", " + err.message);
-    });
+        // 呼叫fastAPI，贈送「風」通行證 + 「港記酥皇」
+
+        nft_sent_message();
+    }
+})
+.catch((err) => {
+    console.log('初始化失敗: ' + err.code + ", " + err.message);
+});
+
+// 點擊「同意接收」按鈕
+$(".event-nft-send").click(function (e) {
+    alert('.event-nft-send click'); // test
+
+    var email = $('#email').val();
+
+    // Email欄位必填檢查
+    if (email == "") { // 未輸入Email
+      Swal.fire({
+          title: '注意!',
+          icon: 'error',
+          confirmButtonColor: '#3085d6',
+          text: '請先輸入要查詢的手機號碼',
+      });
+    }
+    
+    
+
+    $(".nft-event").submit();
+});
+
+// 活動頁送出
+$(".nft-event").submit(function (e) {
+  alert('.nft-event submit'); // test
+
+  var jsonInfo = $('.nft-event').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  console.log(jsonString);
+
+  $.ajax({
+    type: 'POST',
+    url: 'https://ark.cards:8228/event',
+    data: jsonString,
+    dataType: 'json',
+    async: false,
+    success: function (data) {
+      console.log('送出成功: ' + JSON.stringify(data));
+      alert("送出成功");
+    },
+    beforeSend: function () {
+      console.log('beforeSend');
+    },
+    complete: function () {
+      console.log('complete');
+    },
+    error: function (jqXHR, textStatus, errorThrown) {
+      console.log(JSON.stringify(jqXHR));
+      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+      console.log('送出失敗: ' + jqXHR.responseText);
+    }
+  });
+  return false;
 });
 </script>
 </html>