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");
});

let userId;
// 收藏頁面
function collection(collectuserid='') {
  console.log('Call collection(' + collectuserid + ')'); // test
  userId = collectuserid;
  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
      console.log(msg)
      let len = Object.keys(msg).length;
      let arr = []
      for(let i = 0; i < len; i++) {
        arr.push(msg[i]);
      }
      arr = arr.filter((item, i) => {
        return item !== undefined;
      })
      console.log(arr);
        for(let i = 0; i < arr.length; i++) {
          collectcontent += '\
            <div class="collectcontent col">\
              <input style="display: none;" type="radio" data-amount="'+ arr[i].amount +'" value="'+ arr[i].uid + '" name="nftid" id="' + arr[i].uid + '">\
              <label for="'+ arr[i].uid + '">\
                <div class="collectcard card h-100">\
                  <a target="_blank">\
                    <img src="'+ arr[i].imgurl + '"class="card-img-top" alt="...">\
                  </a>\
                  <div class="card-body p-2">\
                      <a target="_blank">\
                          <h5 class="card-title pt-3">'+ arr[i].title + '</h5>\
                          <p class="card-text text-mute">'+ arr[i].context + '</p>\
                          <p class="card-text">數量：'+ arr[i].amount + '</p>\
                          <p class="card-text card-price text-end">$'+ arr[i].price + '</p>\
                      </a>\
                  </div>\
                </div>\
              </label>\
            </div>';
        }
      
    }

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

// 購買頁面
function shop(collectuserid='') {
  console.log('Call shop(' + collectuserid + ')'); // test
  userId = collectuserid;
  $.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="radio" data-amount="'+msg[i].amount+'" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '" >\
          <label for="'+ msg[i].id + '" data-amount="'+msg[i].amount+'">\
            <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>\
                        <p class="card-text text-mute">'+ msg[i].context + '</p>\
                        <p class="card-text">數量：'+ msg[i].amount + '</p>\
                        <p class="card-text card-price text-end">$'+ msg[i].price + '</p>\
                    </a>\
                </div>\
            </div>\
          </label>\
      </div>';
    }
    buybox += '\
    <div class="p-2">\
        <input id="userid" style="border-radius: 10px; border:none; display: none;" class="p-2 w-100 mb-3" type="text" name="userid" value="' + collectuserid + '" placeholder="請輸入您的userid" required>\
        <input type="number" name="amount" id="number" placeholder="請輸入數量" class="p-2 w-100 mb-3" style="border-radius: 10px; border:none;" required>\
        <p class="text-error text-white mb-2"></p>\
        <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>\
            <span style="border-radius: 30px; background:#fff; border: none;" class="send-btn px-3 ms-1 py-2 btn span">購買</span>\
        </div>\
    </div>\
</div>';

    $('.sec06-nft-mall').html(nftmall);
    $('.buybox').html(buybox);
    $('.span').click(function(){
      var nftid = $("input[name='nftid']:checked").val();
      var amount = $("input[name='amount']").val();
      if(amount > $("input[name='nftid']:checked").data('amount') || !amount) {
        console.log('over');
        $('.text-error').text('請輸入合適購買數量');
        return
      } else {
        $('.text-error').text('');
      }
    
     // var data = `{"nftid":"` + nftid +`","userid":"` + userid +`"}`;
      
      console.log(amount); // test
      
      var url = `https://api.ptt.cx:8750/api/v1/linepay/request?line_id=${userId}&nft_id=${nftid}&amount=${amount}`;
      console.log(url);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", url, false);
      
      xhr.setRequestHeader("accept", "application/json");
      xhr.setRequestHeader("Content-Type", "application/json");
      
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          console.log(xhr.status);
          const res = JSON.parse(xhr.responseText);
          if(device == 'desktop'){
            location.replace(res.web);
          } else {
            location.replace(res.app);
          }
          // alert("購買成功");
        }
      };
      
      xhr.send();
    })
  });
  
}

// 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);
  });
}

$(".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();
  $.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 nftuid = $("input[name='nftid']:checked").val();
  var amount = $("input[name='amount']").val();
  var address = $('#address').val();
  console.log(amount);
  var data = `{"nftuid": ${nftuid}, "to": "${address}", "userid": "${userId}", "amount": ${amount}}`;
  
  var headers = {'accept': 'application/json'}
  console.log(data); // test

  var url = `https://api.ptt.cx:8750/api/v1/line/send/${userId}?to=${address}&nftuid=${nftuid}&amount=${amount}`;
  axios({
    method: 'get',
    url: url,
    headers,
    data: ''
  }).then(res => {
    console.log(res);
    window.location.href = './collect.html';
  }).catch(err => {
    console.log(err);
  })
  
});

const getDeviceType = () => {
  const ua = navigator.userAgent;
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  if (
    /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
      ua
    )
  ) {
    return "mobile";
  }
  return "desktop";
};

const device = getDeviceType();



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("複製成功");
}