add price, amount

ArkCard-web/goto.js

@@ -90,8 +90,8 @@ function shop(collectuserid='') {
     for (var i = 0; i < msgLen; i++) {
       nftmall += '\
         <div class="nftmall col">\
-          <input style="display:none" type="radio" value="'+ msg[i].id + '" name="nftid" class="nftname" id="' + msg[i].id + '">\
-          <label for="'+ msg[i].id + '">\
+          <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="...">\
@@ -99,6 +99,9 @@ function shop(collectuserid='') {
                 <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>\
@@ -108,6 +111,8 @@ function shop(collectuserid='') {
     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>\
@@ -120,12 +125,20 @@ function shop(collectuserid='') {
     $('.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(data); // test
+      console.log(amount); // test
       
-      var url = `https://api.ptt.cx:8750/api/v1/linepay/request?line_id=${userId}&nft_id=${nftid}`;
+      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);

ArkCard-web/shop.html

@@ -30,7 +30,7 @@
             </div>
         </div>
     </section>
-    <form class="nft-buy" name="buynft" action="" id="comments">
+    <div class="nft-buy" name="buynft" action="" id="comments">
         <section id="sec05-moblie" class="sec05 my-4">
             <div class="sec05-moblie container-fluid">
                 <div class="sec05-moblie-header">
@@ -344,7 +344,7 @@
                 </div>
             </div> -->
         </div>
-    </form>
+    </div>
   
 
     <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
@@ -395,7 +395,8 @@ $(document).ready(function () {
         }
 
         // 購買頁面
-        shop(context.userId);
+       shop(context.userId);
+
     })
     .catch((err) => {
         console.log('初始化失敗: ' + err.code + ", " + err.message);

ArkCard-web/style.css

@@ -92,4 +92,12 @@
   padding-top: 2px;
   outline: none;
 }
+
+.text-mute {
+  color: grey;
+}
+
+.card-price {
+  font-size: 1.2rem;
+}
 /*# sourceMappingURL=style.css.map */

ArkCard-web/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AACI,MADE,CACF,CAAC,EADE,MAAM,CACT,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,IAAI;EACV,aAAa,EAAE,gBAAgB;CAClC;;AALL,AAMI,MANE,CAMF,EAAE,EANC,MAAM,CAMT,EAAE,CAAA;EACE,aAAa,EAAE,gBAAgB;CAClC;;AAGL,AACI,MADE,CACF,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;CACd;;AAHL,AAII,MAJE,CAIF,WAAW,CAAA;EACP,WAAW,EAAE,GAAG;CACnB;;AANL,AAOI,MAPE,CAOF,EAAE,CAAA;EACE,UAAU,EAAC,OAAO;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,YAAY;CACxB;;AAGL,AACI,cADU,CACV,EAAE,CAAA;EACE,aAAa,EAAE,eAAe;EAC9B,aAAa,EAAE,aAAa;CAC/B;;AAGL,AAEI,MAFE,CAEF,oBAAoB,CAAA;EAChB,WAAW,EAAC,cAAc;CAC7B;;AAJL,AAKI,MALE,CAKF,uBAAuB,CAAC;EACpB,WAAW,EAAE,IAAI;CAyBpB;;AA/BL,AAOQ,MAPF,CAKF,uBAAuB,CAEnB,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B;;AATT,AAaY,MAbN,CAKF,uBAAuB,CAKnB,IAAI,CAGA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,OAAO;CAClB;;AAlBb,AAoBgB,MApBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CACD,WAAW,CAAC;EACR,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,KAAK;CACnB;;AAEG,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAzBvD,AAwBgB,MAxBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CAKD,UAAU,CAAC;IAEH,SAAS,EAAE,IAAI;GAEtB;;;AAOjB,AAAA,aAAa,CAAA;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,KAAK;EACT,OAAO,EAAE,EAAE;CACZ;;AACD,AAAA,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B;;AAGD,AAAA,cAAc,CAAC;EACX,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,OAAO;EACnB,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAqB;EAC9C,aAAa,EAAE,KAAK;EACpB,cAAc,EAAE,KAAK;EACrB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,IAAI;CAChB",
+    "mappings": "AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AACI,MADE,CACF,CAAC,EADE,MAAM,CACT,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,IAAI;EACV,aAAa,EAAE,gBAAgB;CAClC;;AALL,AAMI,MANE,CAMF,EAAE,EANC,MAAM,CAMT,EAAE,CAAA;EACE,aAAa,EAAE,gBAAgB;CAClC;;AAGL,AACI,MADE,CACF,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;CACd;;AAHL,AAII,MAJE,CAIF,WAAW,CAAA;EACP,WAAW,EAAE,GAAG;CACnB;;AANL,AAOI,MAPE,CAOF,EAAE,CAAA;EACE,UAAU,EAAC,OAAO;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,YAAY;CACxB;;AAGL,AACI,cADU,CACV,EAAE,CAAA;EACE,aAAa,EAAE,eAAe;EAC9B,aAAa,EAAE,aAAa;CAC/B;;AAGL,AAEI,MAFE,CAEF,oBAAoB,CAAA;EAChB,WAAW,EAAC,cAAc;CAC7B;;AAJL,AAKI,MALE,CAKF,uBAAuB,CAAC;EACpB,WAAW,EAAE,IAAI;CAyBpB;;AA/BL,AAOQ,MAPF,CAKF,uBAAuB,CAEnB,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B;;AATT,AAaY,MAbN,CAKF,uBAAuB,CAKnB,IAAI,CAGA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,OAAO;CAClB;;AAlBb,AAoBgB,MApBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CACD,WAAW,CAAC;EACR,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,KAAK;CACnB;;AAEG,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAzBvD,AAwBgB,MAxBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CAKD,UAAU,CAAC;IAEH,SAAS,EAAE,IAAI;GAEtB;;;AAOjB,AAAA,aAAa,CAAA;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,KAAK;EACT,OAAO,EAAE,EAAE;CACZ;;AACD,AAAA,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B;;AAGD,AAAA,cAAc,CAAC;EACX,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,OAAO;EACnB,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAqB;EAC9C,aAAa,EAAE,KAAK;EACpB,cAAc,EAAE,KAAK;EACrB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,IAAI;CAChB;;AAED,AAAA,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;CACd;;AAED,AAAA,WAAW,CAAC;EACR,SAAS,EAAE,MAAM;CACpB",
     "sources": [
         "style.scss"
     ],

ArkCard-web/style.scss

@@ -94,4 +94,12 @@
     color: #fff;
     padding-top: 2px;
     outline: none;
+}
+
+.text-mute {
+    color: grey;
+}
+
+.card-price {
+    font-size: 1.2rem;
 }