violet-beauty/js/index.js

$(".gototop").hide();
$(window).scroll(function () {
  var y = window.scrollY;

  if (y > 10) {
    $(".gototop").show();
  } else {
    $(".gototop").hide();
  }

});



$("*").each(function (index, element) {
  // 此元素被點選後執行
  $(this).click(function (e) {
    // 取得被點選元素的屬性：data-gt-target
    var target = $(this).attr("data-gt-target");
    var duration = $(this).attr("data-gt-duration");
    var offset = $(this).attr("data-gt-offset");

    // JS 語法：判斷式
    // if (條件) {程式區塊}
    // 當條件成立，會執行程式區塊

    // 如果 目標有資料 才會執行 { } 內的程式
    // 避免出現 undefine (未定義 - 不存在的資料)
    if (target) {
      //console.log("目標：" + target);
      //console.log("時間：" + duration);
      //console.log("位移：" + offset);

      // 上方位置 = 目標區塊.位移().上方位置
      var top = $(target).offset().top;
      //console.log("要前往元素的上方位置：" + top);

      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
      // parseInt() 將文字轉為數字

      $("html").stop().animate({
        scrollTop: top - offset
      }, parseInt(duration));
    }
  });
});

// 手機選單彈跳視窗
$("#menu-box2").hide();
$("#menu-box").hide();



$("#menu-btn1").click(function () {
  $(this).toggleClass("fa-times");
  $("#menu-box").fadeToggle(500);
  $("#menu-box2").fadeToggle(500);
});
$("#menu-box").click(function () {
  // let myDiv = document.getElementById('menu-btn1');
  // myDiv.className = "fas fa-bars menu ms-2";
  $("#menu-box").fadeToggle(500);
  $("#menu-box2").fadeToggle(500);

});
// $(".link").click(function () {
//   $("#menu-box").slideUp("slow", function () {
//     $("#menu-box2").slideUp("slow");
//     // Animation complete.
//   });
// });


$(".news-slide").slick({
  dots: true,
  // autoplay: true,
  arrows: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplaySpeed: 7000,
  initialSlide: 0,
  infinite: true,
  prevArrow: "<img class='prev slick-prev' src='./img/arrowprev.png'>",
  nextArrow: "<img class='next slick-next' src='./img/arrownext.png'>"
});

// 避免動畫與使用者滾輪衝突
// html 在滾動滾輪時 停止 html 所有效果
$("html").on("mousewheel", function () {
  $("html").stop();
});

$(".playbutton").click(function () {
  var videosrc = $(this).data("info");
  $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
});

$(".btn-close").click(function () {
  $('.youtube-video').attr('src', ``);
});

$('#yt-video').on('hidden.bs.modal', function () {
  $('.youtube-video').attr('src', ``);
});



// $(".banner-slide").slick({
//   dots: true,
//   autoplay: true,
//   arrows: false,
//   slidesToShow: 1,
//   slidesToScroll: 1,
//   autoplaySpeed: 7000,
//   initialSlide: 0,
//   infinite: true,
// });

$(".violetbeauty_sec01_slide").slick({

  slidesToShow: 4,
  slidesToScroll: 3,
  infinite: true,
  // centerMode: true,
  arrows: true,
  prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
  nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
});

$(".violetbeauty_sec02_slide").slick({

  slidesToShow: 3,
  slidesToScroll: 3,
  infinite: true,
  // centerMode: true,
  arrows: true,
  prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
  nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
});

$(".learn_more").click(function () {
  var courseid = $(this).data("info");
  // console.log(courseid);
  $.ajax({
    method: "GET",
    url: "coursecontent.json",
    dataType: "json",
  })

    .done(function (msg) {
      // console.log(msg)
      for (var i = 0; i < msg.length; i++) {
        if (msg[i].Courseid == courseid) {
          var CourseContent = '';
          console.log(msg[i]);
          CourseContent = `
          <div class="course_detail py-3">
            <div class="row">
            <div class="col-md-7">
              <div class="course_detail_img mt-3">
                <img class="img-fluid" src="${msg[i].CourseImg}" alt="">
              </div>
            </div>
            <div class="col-md-5">
              <div class="course_detail_text">
                <div class="features_title fw-bold text-start">${msg[i].CourseTitle}</div>
                  <div class="sec_content_right_text">
                    <p>${msg[i].Coursetext}</p>
                  </div>
                </div>
                <div class="text-center">
                  <button class="violetbeauty_CTA mt-4"><a style="text-decoration: none;" target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l"><img class="cta_flower" src="./img/flower.png" alt="">立即體驗</a></button>
                </div>
              </div>
            </div>
          </div>`
        }
        $('.modal-body').html(CourseContent);
      }
    });
});


// facial.html

$.ajax({
  type: "GET",
  url: "facial.json",
  dataType: "json",
  success: function (res) {
    let facialList = [];
    let facialModalList = [];
    for (let i = 0; i < res.length; i++) {
      let facialCardContent = `
      <div class="col-12 col-md-6 col-xl-4">
          <div class="card h-100">
            <div class="img-box">
              <img src="${res[i].image}" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <h5 class="badge">臉部課程</h5>
                <div class="d-flex align-items-center time-box">
                  <img src="./img/icon-time.png" alt="">
                  <p><span>${res[i].time}</span>分鐘</p>
                </div>
              </div>
              <h5 class="card-title fw-bold my-3">${res[i].title}</h5>
              <p class="card-text">${res[i].description}</p>
            </div>
            <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#facial_modal_${i + 1}">
              了解課程
            </button>
          </div>
        </div>`;

      let facialModalContent = `
      <div class="modal fade" id="facial_modal_${i + 1}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body m-3 m-xl-5 mb-2 mb-lg-5">
            <div class="container-fluid">
              <div class="row align-items-center">
                <div class="col-12 col-lg-7">
                  <img src="${res[i].image}" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
                </div>
                <div class="col-12 col-lg-5 px-3 px-xl-5">
                  <h5 class="fw-bold my-3">${res[i].title}</h5>
                  <div class="d-flex justify-content-between my-4">
                    <div class="d-flex flex-column price-box">
                      <span>體驗價 $${res[i].price}</span>
                      <span>原價 $${res[i].originalPrice}</span>
                    </div>
                    <div class="d-flex align-items-center time-box">
                      <img src="./img/icon-time.png" alt="">
                      <p><span>${res[i].time}</span>分鐘</p>
                    </div>
                  </div>
                  <section class="d-flex flex-column justify-content-between">
                    <p>${res[i].description}</p>
                    <div class="recommend-item" style="display: ${res[i].recommend !== "" ? 'flex' : 'none'}">
                      <span class="badge">推薦</span>
                      ${res[i].recommend}
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>`;

      facialList.push(facialCardContent);
      facialModalList.push(facialModalContent);
      $('.facial-content-item').html(facialList);
      $('.facial-modal').html(facialModalList);
    }
  },
  error: function (err) {
    console.log('err', err);
  }
});

// massage.html

$.ajax({
  type: "GET",
  url: "massage.json",
  dataType: "json",
  success: (res) => {
    let massageList = [];
    let massageModalList = [];
    let contentList = [
      `<div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100">
          <div class="img-box">
            <img src="./img/維生素育膚課程/4.jpg" class="card-img-top" alt="...">
          </div>
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <h5 class="badge">身體課程</h5>
              <div class="d-flex align-items-center time-box">
                <img src="./img/icon-time.png" alt="">
                <p><span>60</span>分鐘／<span>120</span>分鐘</p>
              </div>
            </div>
            <h5 class="card-title fw-bold my-3">波動舒活經絡課程</h5>
            <p class="card-text">久坐、久站或長期的姿勢不良，讓妳經常腰酸背痛嗎？手技搭配儀器，不再是單純肌肉放鬆，針對氣血循環，功力深厚的技巧，專業的儀器走向，完全放鬆你的身心靈。</p>
          </div>
          <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massageModal_1">
            了解課程
          </button>
        </div>
      </div>`,
      `<div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100">
          <div class="img-box">
            <img src="./img/維生素育膚課程/14.jpg" class="card-img-top" alt="...">
          </div>
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <h5 class="badge">身體課程</h5>
              <div class="d-flex align-items-center time-box">
                <img src="./img/icon-time.png" alt="">
                <p><span>40</span>分鐘／<span>60</span>分鐘／<span>80</span>分鐘</p>
              </div>
            </div>
              <h5 class="card-title fw-bold my-3">五行氣穴課程</h5>
              <p class="card-text">藉由中醫理論五行學說，透過美容師手勁與技巧將阻塞處舒展，達到通筋通便活絡氣血效應，達到陰陽流暢，全程手技，使用原始原點精油，刺激身體各部位穴點，與一般經絡按摩較不同！愛按摩的你絕不能錯過。</p>
            </div>
            <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massageModal_2">
              了解課程
            </button>
          </div>
      </div>`,
      `<div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100">
          <div class="img-box">
            <img src="./img/維生素育膚課程/11.jpg" class="card-img-top" alt="...">
          </div>
          <div class="card-body">
            <h5 class="badge">身體課程</h5>
            <h5 class="card-title fw-bold my-3">半永久熱蠟除毛</h5>
            <p class="card-text">擾人的毛髮交給我們，容易悶熱滋生細菌造成異味，妳的救星！熱蠟是所有技術中最低疼痛感，能讓毛髮生長延緩，達到重生毛髮越來越細軟，甚至無毛。</p>
          </div>
          <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massageModal_3">
            了解課程
          </button>
        </div>
      </div>`];
    for (let i = 0; i < res.length; i++) {
      let massageCardContent = `
      <div class="col-12 col-md-6 col-xl-4">
        <div class="card h-100">
          <div class="img-box">
            <img src="${res[i].image}" class="card-img-top" alt="...">
          </div>
          <div class="card-body">
            <div class="d-flex justify-content-between">
              <h5 class="badge">身體課程</h5>
              <div class="d-flex align-items-center time-box">
                <img src="./img/icon-time.png" alt="">
                <p><span>${res[i].time}</span>分鐘</p>
              </div>
            </div>
            <h5 class="card-title fw-bold my-3">${res[i].title}</h5>
            <p class="card-text">${res[i].description}</p>
          </div>
          <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#massage_modal_${i + 1}">
            了解課程
          </button>
        </div>
      </div>`;

      let massageModalContent = `
      <div class="modal fade" id="massage_modal_${i + 1}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body m-3 mb-2 mb-lg-5">
              <div class="container-fluid">
                <div class="row align-items-center">
                  <div class="col-12 col-lg-7">
                    <img src="${res[i].image}" alt="" style="width: 100%; box-shadow: 0 0 10px rgb(32 32 32 / 25%);">
                  </div>
                  <div class="col-12 col-lg-5 px-3 px-xl-5">
                    <h5 class="fw-bold my-3">${res[i].title}</h5>
                    <div class="d-flex justify-content-between my-4">
                      <div class="d-flex flex-column price-box">
                        <span>體驗價 $${res[i].price}</span>
                        <span>原價 $${res[i].originalPrice}</span>
                      </div>
                      <div class="d-flex align-items-center time-box">
                        <img src="./img/icon-time.png" alt="">
                        <p><span>${res[i].time}</span>分鐘</p>
                      </div>
                    </div>
                    <section class="d-flex flex-column justify-content-between">
                      <p>${res[i].description}</p>
                      <div class="recommend-item">
                        <span class="badge">推薦</span>
                        ${res[i].recommend}
                      </div>
                    </section>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>`;

      massageList.push(massageCardContent);
      massageModalList.push(massageModalContent);
      // 合併陣列
      const massageArray = contentList.concat(massageList);

      $('.massage-content-item').html(massageArray);
      $('.massage-modal').html(massageModalList);
    }
  },
  error: function (err) {
    console.log('err', err);
  }
});
var date = new Date();
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);

var day = ('0' + (date.getDate())).slice(-2);
// var day = date.getDay();
// console.log(date)
// console.log(date.getDate());
// console.log(date.getMonth())
var time = year + '-' + month + '-' + day;
// console.log(time);
document.getElementById('datepicker').value = time;
document.getElementById('datepicker').setAttribute('min', time);

// // 手機板表單
// $.fn.serializeObject = function () {
//   var o = {};
//   var a = this.serializeArray();

//   $.each(a, function () {
//     if (o[this.name]) {
//       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;
// };

$(".violetbeauty_contract_form").submit(function (e) {

  let data_loc = $("#loc").val();
  let data_course_name = $("#course_name").val();
  let date_name = $("#name").val();
  let data_booktime = $("#time").val();
  let data_phone = $("#phone").val();
  let data_bookdate = $("#datepicker").val();// ];

  let data_loc_str = encodeURI(data_loc);
  let data_course_name_str = encodeURI(data_course_name);
  let data_name_str = encodeURI(date_name);

  // let form_data = 'name='+ date_name +'&phone='+ data_phone +'&loc='+ data_loc +'&course_name='+ data_course_name +'&bookdate='+ data_bookdate +'&booktime='+ data_booktime +''



  // let data =data_booktime+data_name+data_phone+data_loc+data_course_name+data_bookdate+data_booktime
  // console.log(form_data);

  var url = "https://api.ptt.cx:19201/submitform";

  var xhr = new XMLHttpRequest();
  xhr.open("POST", url);

  xhr.setRequestHeader("accept", "application/json");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function () {
    var title = "送出成功";
    if (xhr.readyState === 4) {
      console.log(xhr.status);
      console.log(xhr.responseText);
      Swal.fire({
        title: title,
        icon: 'success',
        confirmButtonColor: '#3085d6',
      });

    }
  };
  //  location.reload();
  window.setTimeout(() => {
    // window.location.href = 'index.html';
    location.reload();
  }, 2000);
  var data = 'name=' + data_name_str + '&phone=' + data_phone + '&loc=' + data_loc_str + '&course_name=' + data_course_name_str + '&bookdate=' + data_bookdate + '&booktime=' + data_booktime + '';

  xhr.send(data);
  console.log(data);

  return false;


});


$(".timepicker").timepicker({
  timeFormat: "h:mm p", // 時間隔式
  interval: 30, //時間間隔
  minTime: "10:30am", //最小時間
  maxTime: "18:30pm", //最大時間
  defaultTime: "10:30", //預設起始時間
  startTime: "10:00", // 開始時間
  dynamic: true, //是否顯示項目，使第一個項目按時間順序緊接在所選時間之後
  dropdown: true, //是否顯示時間條目的下拉列表
  scrollbar: true, //是否顯示捲軸
});





// let data =data_booktime+data_name+data_phone+data_loc+data_course_name+data_bookdate+data_booktime