ArkCard-Linebot/ArkCard-web/goto.js

// $('.sec05-moblie-container').slick({
//   arrows: false,
//   slidesToShow: 1,
//   slidesToScroll: 1,
//   infinite: false,
//   centerMode: true,
// });

$(".sendbox").hide();
$(document).on("click", ".collectcontent", function (event) {
  $(".sendbox").show(500);
  $(this).addClass("select");
  $(".select").siblings().removeClass('select');
});

$(document).on("click", ".close", function (event) {
  // $(this).siblings('.collectcard').removeClass('select'); 
  $(".sendbox").hide(500);
  $(".collectcontent").removeClass("select");
});

// 收藏頁面
function collection(collectuserid='') {
  console.log('Call collection(' + collectuserid + ')'); // test

  var collectcontent = '';

  $.ajax({
    method: "GET",
    url: "https://api.ptt.cx:8750/api/v1/line/collection/" + collectuserid + "",
    dataType: "json",
  })
  .done(function (msg) {
    if (msg == "error: user don't have any nft") { // 沒NFT
      collectcontent += '<p>您可以到我們的「NFT商店」頁面，去購買您喜愛的NFT收藏品哦！</p>';
    } else { // 有NFT
      for (var i in msg) {
        for(var j in msg[i]) {
          collectcontent += '\
            <div class="collectcontent col">\
              <input style="display: none;" type="checkbox" value="'+ msg[i][j].id + '" name="nftid" id="' + msg[i][j].id + '">\
              <label for="'+ msg[i][j].id + '">\
                <div class="collectcard card h-100">\
                  <a target="_blank">\
                    <img src="'+ msg[i][j].imgurl + '"class="card-img-top" alt="...">\
                  </a>\
                  <div class="card-body p-2">\
                      <a target="_blank">\
                          <h5 class="card-title pt-3">'+ msg[i][j].title + '</h5>\
                      </a>\
                  </div>\
                </div>\
              </label>\
            </div>';
          /*
          collectcontent += '\
            <div class="collectcontent col">\
            <input style="display: none;" type="checkbox" value="'+ msg[i][j].id + '" name="nftid" id="' + msg[i][j].id + '">\
            <label for="'+ msg[i][j].id + '">\
            <div class="collectcard card h-100">\
                <a target="_blank">\
                    <img src="'+ msg[i][j].imgurl + '"class="card-img-top" alt="...">\
                </a>\
                <div class="card-body p-2">\
                    <a target="_blank">\
                        <h5 class="card-title pt-3">'+ msg[i][j].title + '</h5>\
                    </a>\
                    <p class="card-text">\
                        '+ msg[i][j].context + ' \
                    </p>\
                    <p class="card-text row">\
                        <small class="text-muted col-6 px-1">\
                            <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
                                src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i][j].cost + '</span>\
                        </small>\
                        <small class="price col-6 px-0 text-center">\
                            <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><sp    an>'+ msg[i][j].likes + '</span></small>\
                          </p>\
                  </div>\
              </div>\
              </label>\
            </div>';
          */
        }
      }
    }

    $('.sec05-moblie-container').html(collectcontent);
  });
}

// 購買頁面
function shop(collectuserid='') {
  console.log('Call shop(' + collectuserid + ')'); // test

  $.ajax({
    method: "GET",
    url: "https://api.ptt.cx:8750/api/v1/line/shop/" + collectuserid + "",
    dataType: "json",
  })
  .done(function (msg) {
    console.log(msg);
    // console.log(Object.keys(msg).length);
    let msgLen = Object.keys(msg).length;
    console.log(msgLen);
    var nftmall = '';
    var buybox = "";
    for (var i = 0; i < msgLen; i++) {
      nftmall += '\
        <div class="nftmall col">\
          <input style="display:none" type="checkbox" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
          <label for="'+ msg[i].id + '">\
            <div class="collectcard card h-100">\
                <a target="_blank">\
                    <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
                </a>\
                <div class="card-body p-2">\
                    <a target="_blank">\
                        <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
                    </a>\
                </div>\
            </div>\
          </label>\
      </div>';
      /*
      nftmall += '\
        <div class="nftmall col">\
        <input style="display:none" type="checkbox" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
        <label for="'+ msg[i].id + '">\
        <div class="collectcard card h-100">\
            <a target="_blank">\
                <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
            </a>\
            <div class="card-body p-2">\
                <a target="_blank">\
                    <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
                </a>\
                <p class="card-text">\
                    '+ msg[i].context + ' \
                </p>\
                <p class="card-text row">\
                    <small class="text-muted col-6 px-1">\
                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i].cost + '</span>\
                    </small>\
                    <small class="price col-6 px-0 text-center">\
                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+ msg[i].likes + '</span>\
                    </small>\
                </p>\
            </div>\
        </div>\
        </label>\
      </div>';
      */
    }
    buybox += '\
    <div class="p-2">\
        <input style="border-radius: 10px; border:none; display: none;" class="p-2 w-100 mb-3" type="text" name="userid" value="' + collectuserid + '" placeholder="請輸入您的userid" required>\
        <div class="text-end px-2">\
            <p class="text-start text-white mb-2">※一次只能購買一則NFT收藏品</p>\
            <button type="button" style="border:1px solid #fff; border-radius: 30px;" class="close btn text-white px-3">取消</button>\
            <input style="border-radius: 30px; background:#fff; border: none;" class="send-btn px-3 ms-1 py-2" type="submit" value="購買">\
        </div>\
    </div>\
</div>';

    $('.sec06-nft-mall').html(nftmall);
    $('.buybox').html(buybox);
  });
}

// Qrcode頁面
function get_data(collectuserid='') {
  console.log('Call get_data(' + collectuserid + ')'); // test

  $.ajax({
    method: "GET",
    url: "https://api.ptt.cx:8750/api/v1/line/receive/" + collectuserid + "",
    dataType: "json",
  })
  .done(function (msg) {
    console.log(msg);
    var Qrcodeimg = '';
    var useraddress = '';
    Qrcodeimg += '\
  <img class="img-fluid" src="./qrcode/'+ collectuserid + '.png" alt="">\
  ';
    useraddress += '\
  '+ msg.useraddress + '\
  ';

    $('#Qrcode').html(Qrcodeimg);
    $('#copy').html(useraddress);
  });
}

// $(document).ready(function () {
//   // 收藏頁面
//   collection(collectuserid);

//   // 購買頁面
//   shop(collectuserid);

//   // Qrcode頁面
//   get_data(collectuserid);
// });

$(".buybox").hide();
$(document).on("click", ".nftmall", function (event) {
  $(".buybox").show(500);
  $(this).addClass("select");
  $(".select").siblings().removeClass('select');
});


$(document).on("click", ".close", function (event) {
  // $(this).siblings('.collectcard').removeClass('select'); 
  $(".buybox").hide(500);
  $(".nftmall").removeClass("select");

  $(".nftname").prop("checked", false);
});

$.fn.serializeObject = function () {
  var o = {};
  var a = this.serializeArray();
  // o["id"] = 0;
  // o["time_stamp"] = "";
  $.each(a, function () {
    if (o[this.name]) {
      console.log(o[this.name], o[this.value]); // test

      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });

  return o;
};

// 確定發送按鈕處理
$(".collect-send").submit(function (e) {
  /*	var formRef = $('#form1').serializeArray();
    var jsonString = JSON.stringify(formRef);*/
  
  var url = "https://api.ptt.cx:8750/api/v1/line/send";

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  
  xhr.setRequestHeader("accept", "application/json");
  xhr.setRequestHeader("Content-Type", "application/json");
  
  xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        console.log(xhr.status);
        console.log(xhr.responseText);
      }};
  
  var data = `{
    "nftid": "1000",
    "address": "0xf05cc78a5eba78775847beea5b3ab88d4694d1b6"
  }`;
  
  xhr.send(data);
  
  // var jsonInfo = $('.collect-send').serializeObject();
  // var jsonString = JSON.stringify(jsonInfo);
  // console.log(jsonString);

  // $.ajax({
  //   type: 'POST',
  //   url: 'https://api.ptt.cx:8750/api/v1/line/send',
  //   data: jsonString,
  //   dataType: 'json',
  //   async: false,
  //   success: function (data) {
  //     console.log('發送成功: ' + JSON.stringify(data));
  //     alert("發送成功");
  //     location.reload();
  //   },
  //   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;
});

$(".nft-buy").submit(function (e) {
  /*	var formRef = $('#form1').serializeArray();
    var jsonString = JSON.stringify(formRef);*/
  var jsonInfo = $('.nft-buy').serializeObject();
  var jsonString = JSON.stringify(jsonInfo);
  console.log(jsonString);

    $.ajax({
      type: 'POST',
      url: 'https://api.ptt.cx:8750/api/v1/line/buy',
      data: jsonString,
      dataType: 'json',
      success: function (data) {
        console.log('購買成功: ' + data);
        alert("購買成功");
        location.reload();
      },
      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;
});

function copyEvent(id) {
  var str = document.getElementById(id);
  window.getSelection().selectAllChildren(str);
  document.execCommand("Copy")
  toastr.options = {
    // 參數設定[註1]
    "closeButton": false, // 顯示關閉按鈕
    "debug": false, // 除錯
    "newestOnTop": false,  // 最新一筆顯示在最上面
    "progressBar": false, // 顯示隱藏時間進度條
    "positionClass": "toast-top-center", // 位置的類別
    "preventDuplicates": false, // 隱藏重覆訊息
    "onclick": null, // 當點選提示訊息時，則執行此函式
    "showDuration": "300", // 顯示時間(單位: 毫秒)
    "hideDuration": "1000", // 隱藏時間(單位: 毫秒)
    "timeOut": "1000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒)
    "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
    "showEasing": "swing", // 顯示動畫時間曲線
    "hideEasing": "linear", // 隱藏動畫時間曲線
    "showMethod": "fadeIn", // 顯示動畫效果
    "hideMethod": "fadeOut" // 隱藏動畫效果
  }
  toastr.success("複製成功");
}