样式细节修改

application/views/mobile_first/ah-lantern-form-2025.php

@@ -54,12 +54,24 @@
         <div id="ticket_type_errmsg" style="display: none">
           <div class="requiredArea" style="margin-top:-10px;">Please select at least one option.</div>
         </div>
-        <p style="font-size: 20px;margin-bottom: 5px;"><strong>Exclusive Add-on:</strong></p>
-        <div class="checkYes"><label for="Thai_Costume_with_Makeup_Hairstyle"><input class="checkBorder" id="Thai_Costume_with_Makeup_Hairstyle" name="Thai_Costume_with_Makeup_Hairstyle" type="checkbox" value="yes">Thai Costume with Makeup & Hairstyle – US$119 per person</label></div>
-        <p style="font-size: 20px;
-    clear: both;
-    margin-bottom: 5px;
-    margin-top: 50px;"><strong>Select Ticket Quantity</strong></p>
+        <p style="font-size: 22px;margin-bottom: 5px;"><strong>Exclusive Add-on:</strong></p>
+
+        <p style="margin-bottom: 5px;">Thai Costume with Makeup & Hairstyle – US$119 per person</p>
+
+        <div class="numberBtn">
+            <input class="minaddBtn reduceadult" id='minusButton_makeup' type="button" value="-">
+            <input class="number" id="makeupNumberValue" readonly="readonly" type="text" value="1"
+                name="makeupNumber" style="width: 50px;
+                height: 22px;
+                top: -5px;
+                position: relative;
+                text-align: center;
+                font-size: 20px;">
+            <input class="minaddBtn addadult" id='plusButton_makeup' type="button" value="+">
+        </div>
+
+        <p style="font-size: 22px;margin-bottom: 5px; margin-top: 10px;"><strong>Select Ticket Quantity</strong></p>
+
         <div class="peopleSelect" style="width: auto;">
             <span class="formMemo">
                 Adults and older children (8+ years old)
@@ -367,26 +379,25 @@
 </div>
 <script>
     function calcTotalPrice(ticketPrice, adultNumber) {
-      var makeupPrice = makeup_checkbox.checked ? 119 : 0;
+      var makeupPrice = makeupNumberValue * 119;
 
-        var totalPrice = (ticketPrice * adultNumber) + makeupPrice;
+      var totalPrice = (ticketPrice * adultNumber) + makeupPrice;
 
-        if (adultNumber >= 10) {
-            totalPrice = totalPrice * 0.95;
-        }
+      if (adultNumber >= 10) {
+          totalPrice = totalPrice * 0.95;
+      }
 
-        totalPrice = totalPrice.toFixed(2);
+      totalPrice = totalPrice.toFixed(2);
 
-        totalPriceHidden.value = totalPrice;
-        totalPriceText.innerText = '$' + totalPrice;
+      totalPriceHidden.value = totalPrice;
+      totalPriceText.innerText = '$' + totalPrice;
     }
 
     var adultNumberNode = document.getElementById("adultNumberValue");
+    var makeupNumberNode = document.getElementById("makeupNumberValue");
     var ticketDateList = document.querySelectorAll("input[name='ticket_date']");
     var ticketTypeList = document.querySelectorAll("input[name='ticket_type']");
 
-    var makeup_checkbox = document.getElementById("Thai_Costume_with_Makeup_Hairstyle");
-
     var ticket_type_premium_khomloy_div = document.getElementById("ticket_type_premium_khomloy");
     var ticket_type_vip_khomloy_div = document.getElementById("ticket_type_vip_khomloy");
     var ticket_type_standard_khomloy_div = document.getElementById("ticket_type_standard_khomloy");
@@ -405,6 +416,7 @@
     var totalPriceText = document.getElementById("totalPriceText");
     var totalPriceHidden = document.getElementById("totalPriceHidden");
     var adultNumberValue = parseInt(adultNumberNode.value);
+    var makeupNumberValue = parseInt(makeupNumberNode.value);
     var currentTicketPrice = 10000;
 
     for (var i = 0; i < venueList.length; i++) {
@@ -435,10 +447,6 @@
         });
     }
 
-    makeup_checkbox.addEventListener('click', function (event) {
-      calcTotalPrice(currentTicketPrice, adultNumberValue);
-    });
-
     function setKhomloyTicket() {
       ticket_type_premium_khomloy_div.style.display = '';
       ticket_type_vip_khomloy_div.style.display = '';
@@ -488,6 +496,22 @@
             calcTotalPrice(currentTicketPrice, adultNumberValue);
         }
     });
+
+    var plusMakeupButton = document.getElementById("plusButton_makeup");
+    var minusMakeupButton = document.getElementById("minusButton_makeup");
+    plusMakeupButton.addEventListener('click', function (event) {
+      makeupNumberValue = parseInt(makeupNumberNode.value) + 1;
+      makeupNumberNode.value = makeupNumberValue;
+      calcTotalPrice(currentTicketPrice, adultNumberValue);
+    });
+    minusMakeupButton.addEventListener('click', function (event) {
+      var beforeValue = parseInt(makeupNumberNode.value);
+      if (beforeValue > 0) {
+        makeupNumberValue = beforeValue - 1;
+        makeupNumberNode.value = makeupNumberValue;
+        calcTotalPrice(currentTicketPrice, adultNumberValue);
+      }
+    });
 </script>
 <script>
     var submit_ticket_button = document.getElementById("submit_ticket_button");
@@ -566,6 +590,7 @@
     }
 </script>
 <style>
+    .minaddBtn { width:auto;}
 @media (max-width: 750px) {
 .checkYes {width: 100%;}
 p, h3 {padding:0;}