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://ark.cards:8228/collection/" + collectuserid + "",
    dataType: "json",
  })
  .done(function (msg) {
    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://ark.cards:8228/shop/" + collectuserid + "",
    // url: "https://ark.cards:8228/shop/Uf161c92b16f84357987a78c2b4b47719",
    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://ark.cards:8228/receive/" + collectuserid + "",
    // url:"https://api.ptt.cx:8228/receive/Uf161c92b16f84357987a78c2b4b47719",
    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 jsonInfo = $('.collect-send').serializeObject();
  var jsonString = JSON.stringify(jsonInfo);
  console.log(jsonString);

  Swal.fire({
    title: '您是否確認要發送?',
    text: "發送後，NFT將從您的錢包轉移至接收者的錢包!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '立即發送',
    cancelButtonText: '取消'
  }).then((result) => {
    if (result.isConfirmed) {
      $.ajax({
        type: 'POST',
        url: 'https://ark.cards:8228/send',
        data: jsonString,
        dataType: 'json',
        async: false,
        success: function (data) {
          console.log('發送成功: ' + JSON.stringify(data));
          
          Swal.fire({
            icon: 'success',
            confirmButtonColor: '#3085d6',
            html: '發送成功'
          });
        },
        beforeSend: function () {
          console.log('beforeSend');
        },
        complete: function () {
          console.log('complete');
          location.reload();
        },
        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://ark.cards:8228/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("複製成功");
}