pbootcms/template/en/statics/js/self.js

const Self = {
  init() {
    this.langEvent()
    this.productNavEvent()
    this.productDetailImgChange()
    this.aboutusEvent()
    this.headerShrinksEvent()
    this.indexPageMessageClick()
    this.formSubmitEvent()
  },
  langEvent() {
    $("#langSlected").click(() => {
      $("#langSlected").find(".dataList").toggle(500)
    })
  },
  productNavEvent() {
    $("#category").on('click', 'li', (e) => {
      console.log($(e.target))
      if ($(e.target).hasClass("title")) {
        $('#category').find("li").removeClass("active")
        $(e.target).parent("li").next(".category2").find('li').eq(0).addClass("active")
      } else {
        $('#category').find("li").removeClass("active")
        $(e.target).parent("li").addClass("active")
      }
    })
  },
  productDetailImgChange() {
    //默认选中第一个
    $(".img-group").find(".img-item").eq(0).addClass("active")
    const src = $(".img-group").find(".img-item").eq(0).find('img').attr('src')
    $("#imgShowLarge").attr("src", src)
    $(".img-group").find(".img-item").eq(0).click()
    var img_group_div = $("#projectlist").find(".img-group div")
    if(!img_group_div[0]) return
    var img_group_div_mar = 10 * img_group_div.length
    var img_group_width = (img_group_div[0].offsetWidth * img_group_div.length) + img_group_div_mar
    var img_group_box_width = $("#projectlist").find(".img-group-box").width()

    // 判断是否添加右边禁止点击
    if (!(img_group_width - img_group_box_width > 0)) {
      $("#projectlist").find('.img-change .right-btn').addClass('right-btn-ban')
    }
    $("#projectlist").find(".right-btn").click(() => {
      if (img_group_width - img_group_box_width > 0) {
        var shuzi = img_group_width - Math.abs(parseInt($("#projectlist").find(".img-group").css("marginLeft"))) - img_group_box_width;
        // 移除左边禁止点击
        $("#projectlist").find('.img-change .left-btn').removeClass('left-btn-ban')
        if (shuzi > img_group_box_width) {
          $("#projectlist").find(".img-group").css("marginLeft", -img_group_box_width + parseInt($("#projectlist").find(".img-group").css("marginLeft")))
        } else {
          $("#projectlist").find(".img-group").css("marginLeft", -(img_group_width - img_group_box_width))
          // 添加右边禁止点击
          $("#projectlist").find('.img-change .right-btn').addClass('right-btn-ban')
        }
      } else {
        return;
      }
    })
    $("#projectlist").find(".left-btn").click(() => {
      if (img_group_width - img_group_box_width > 0) {
        // 移除右边禁止点击
        $("#projectlist").find('.img-change .right-btn').removeClass('right-btn-ban')
        if (Math.abs(parseInt($("#projectlist").find(".img-group").css("marginLeft"))) > img_group_box_width) {
          $("#projectlist").find(".img-group").css("marginLeft",parseInt($("#projectlist").find(".img-group").css("marginLeft"))+img_group_box_width)
        } else {
          $("#projectlist").find(".img-group").css("marginLeft", "0px");
          // 添加右边禁止点击
          $("#projectlist").find('.img-change .left-btn').addClass('left-btn-ban')
        }
      } else {
        return;
      }
    })

    // 点击小图切换大图
    $("#projectlist").find(".img-group").on('click', 'div', function() {
      $(this).addClass("active").siblings().removeClass("active");
      const src = $(this).find('img').attr('src')
      $("#imgShowLarge").attr("src", src)
    });

    // 锚点
    $('.nav-anchor').find('a').click(function() {
      $('html,body').animate({scrollTop: ($($(this).attr("href")).offset().top - 130)}, 1000)
    })
    $(".nav-anchor").on('click', 'li', function() {
      $(this).addClass('active').siblings().removeClass('active')
    })
  },
  aboutusEvent() {
    // play
    if(!document.getElementById("video")) return
    $(".playbtn").click(() => {
      $(".playbtn").hide()
      document.getElementById("video").play()
      $("#video").attr("controls", "controls")
    })
    document.getElementById("video").addEventListener("ended", function() {}, false)
  },
  headerShrinksEvent() {
   // header收缩
    if (location.href.indexOf('home') !== -1) {
      //  如果是首页
      $("#header").removeClass("shrink")
    }
    $(window).scroll(function() {
      const scrollTop = $(window).scrollTop()
      if ( $(".shrink")[0]) {
        if (scrollTop < 40) {
          $(".shrink").css("height", "100px")
          $("#logo").find("img").css("height", "55px")
        } else {
          $("#logo").find("img").css("height", "30px")
          $(".shrink").css("height", "60px")
        }
      } else {
        $("#header").css("height", "100px")
        $("#logo").find("img").css("height", "55px")
      }
      if ($(document).height() > 2200) {
        if (scrollTop > 1050) {
          $(".left-con").find(".contact-us").css({"position": "fixed", "bottom": "420px"})
          $(".left-con").find(".message").css({"position": "fixed", "bottom": "20px"})
        } else {
          $(".left-con").find(".contact-us").css({"position": "relative", "bottom": "0"})
          $(".left-con").find(".message").css({"position": "relative", "bottom": "0"})
        }
      }
    })
  },
  indexPageMessageClick() {
    // 首页右侧信息点击
    // $("#messageLink").click(() => {
    //   localStorage.setItem('message', true)
    // })
    // console.log(location.href)
    // if (location.href.indexOf('contact') !== -1 && localStorage.getItem('message')) {
    //   $(window).scrollTop(850)
    //   localStorage.removeItem('message')
    // }
    //首页右侧信息点击
    $("#messageLink").click(() => {
      $("#message-dialog").removeClass("dialog-hide")
      $(".dialog-mask").removeClass("dialog-hide")
    })

    $(".dialog-close").click(() => {
      $(".dialog").addClass("dialog-hide")
      $(".dialog-mask").addClass("dialog-hide")
    })

  },
  formAjax(params, sign, cb) {
    var url  = '/api.php/cms/addmsg'   //Api的地址，我这里是留言接口，如果自定义表单的话填写表单接口
    //定义data对象，默认包含appid,timestamp和signature
    var data = {
      appid: '{*pboot:appid*}',
      timestamp: '{*pboot:timestamp*}',
      signature: '{*pboot:signature*}'
    }

    //定义一个空数组，用来储存表单提交过来的内容
    var parm = new Array();

    //将表单提交过来的内容储存到数组中去
    for (var item in params) {
      parm[item] = $(params[item]).val()
    }

    //循环数组，将表单提交的内容添加到data对象中
    for (var i in parm) {
      data[i] = parm[i];
    }

    $.ajax({
      type: 'POST',        //提交的类型为 POST
      url: url,            //url地址为上面定义的url变量
      dataType: 'json',    //提交的数据类型为 json
      data: data,          //提交的数据为上面构建的数据
      //提交成功
      success: function( response, status ){
        $("#message-box").show()
        setTimeout(function() {
          $("#message-box").hide()
        }, 3000)
        //Api返回的内容，例如“留言成功”，“留言失败”等
        var Data = response.data;

        //如果成功，返回的code为1，失败返回0
        if( response.code == 1 ){
          $("#message-box").html(Data)
          $("#message-box").addClass('success')

          if (sign == 'download') {
            cb()
          }
          return false;
        } else {
          //留言失败，比如某个字段没有填写，返回XXX字段为空这样的提示。
          $("#message-box").html(Data)
          $("#message-box").addClass('warning')
          return false;
        }

      },
      //提交失败，将信息输出到控制台查看
      error: function( xhr, status, error ){
        $("#message-box").show()
        $("#message-box").html(error)
        $("#message-box").addClass('failed')

        setTimeout(() => {
          $("#message-box").hide()
        }, 3000)
      }
    })
  },
  formSubmitEvent() {
    $("#formBtn").click(() => {
      this.formAjax({
        content: '#formMessage',
        email: '#formEmail',

        contacts: '#formContacts',
        mobile: '#formMobile',
        company: '#formCompany'
      })
    })
  }
}
Self.init();