9169-php/Public/bibidd/js/photodetails.js

$(document).ready(function () {
  $('.logo').on('click', function() {
    window.location.href = "https://www.bibidd.com";
  })
  $('.quanpinghei').hide();
  // 页面传参
  var url = window.location.search;
  // 判断图片是否被收藏参数
  var collectionStatus;

  
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = unescape(
        decodeURIComponent(strs[i].split("=")[1])
      );
    }
  }
  
  var username = localStorage.getItem('username');
  var uid = localStorage.getItem("uid");
  if (uid) {
    $("#register").text("My Collection");
    $("#login").text("Log out");
    $("#login").css("backgroundColor", "#D6565A");
  } else {
    $("#register").text("Sign up");
    $("#login").text("Login");
    $("#login").css("backgroundColor", "#CE5C2A");
  }

  // 获取视频id
  var imgid = theRequest.imgid;
  // 获取点赞数量
  var fabulous = theRequest.fabulous;
  $('.fabulous').find("p").eq(0).text(fabulous);

  function getData() {
    $.ajax({
      type:'post',
      url:'https://www.bibidd.com/bibidd/Mediaonefive/img_detail',
      dataType: "json",
      data: {
        imgs_id: imgid
      },
      success: function (res) {
        
      },
      complete:function(res) {

        let dataArray = res.responseJSON.data;
        let imgListHtml = '';
        $.each(dataArray, function(index, data) {
          // imgListHtml += '<img class="load img" src="'+data+'" alt="">';
          // imgListHtml += '<div class="load img" data-original="' + data + '"></div>';
          imgListHtml += '<p class="img"> <img data-original="' + data + '" alt=""></p>';
          
        })
        $('.imgList').html(imgListHtml);
        var loadingUrl = "/Public/bibidd/images/photoloading.png";
        $(".img img").lazyload({
          effect: "fadeIn",
          placeholder: loadingUrl,
          failurelimit: 10,
      });
        $('.loading').hide();
        $('.img').on('click',function() {
          $('.bigImgWrap').show();
          $('.bigImg').attr('src', dataArray[$(this).index()]);
        })
      }
    })
  }
  getData();


  $('h2').text(theRequest.name);
  // 热门tag分类
  $(".nav li").on("click", function () {
    const pname = $(this).find("p").eq(0).text();
    $(location).attr("href", "photo.html?navtag=" + pname);
  });

  // 视频搜索
  $(".searchBtn").on("click", function () {
    if (!$(".searchInput").val().trim()) {
      // 请输入搜索关键字
      tip('Please enter the search content');
    } else {
      const pname = $(".searchInput").val().trim();
      $(location).attr("href", "photo.html?navtag=" + pname);
    }
  });

  $(document).on('keyup', function(event) {
    
    if(event.keyCode ==13){
      $(".searchBtn").trigger("click");
    }
  })
  // 查看图片详情
  $('.videoContent').on('click', function() {
    const videoName = $(this).find('div').eq(1).text();
    $(location).attr("href", "bphotodetails.html?name="+videoName);
  })
  // 底部标签栏
  $(".tabbar li").on("click", function () {
    if ($(this).index() === 0) {
      $(location).attr("href", 'https://www.bibidd.com/bibidd_testtest');
    }else if ($(this).index() === 1) {
      $(location).attr("href", 'photo.html');
    }
  });

  // 标签检索图片
  $('.label').on('click', function(){

    $('.videopage').show();
    $('.labelpage').hide(); 
    $('h2').text($(this).text());
  })

  // 注册/登录
  $('.accountRight').on('click', function() {
    $('.loginBox').show();
  })
  $('.guanbi').on('click', function() {
    $('.loginBox').hide();
  })

  // 查看我的收藏
  $('#register').on('click', function() {
    if($(this).text()==='My Collection') {
      $(location).attr('href', 'collection.html');
    }else {
      // 注册
      $(location).attr('href', 'register.html');
    }
    $('.loginBox').hide();
  })

  // 登录/退出登录
  $('#login').on('click', function() {
    if($(this).text()==='Log out') {
      // 退出登录
      localStorage.removeItem('uid');
      location.reload();
    }else {
      // 登录
      $(location).attr('href', 'blogin.html');
    }
    $('.loginBox').hide();
  })

  

  // 判断屏幕滚动高度是否超过1屏
  $(window).scroll(function() {
    var scrollT = $(document).scrollTop();

    var offsetT = $('.main').offset().top;

    if(scrollT >= offsetT) {
      $('.backToTop').show();
    }else {
      $('.backToTop').hide();
    }
  })
  // 返回顶部
  $('.backToTop').on('click', function() {
    $('html, body').animate({
      scrollTop:0
    }, 500);
  })

  
  // 判断当前是否可以进行收藏相关交互
  var collectionChange = false;
  // 判断该图片是否被收藏接口
  function collectionData() {
    $.ajax({
      type:'post',
      url:'https://www.bibidd.com/bibidd/Mediaonefive/yn_shoucang',
      dataType: "json",
      data: {
        type:'img',
        cid:imgid,
        uid:uid
      },
      success: function (res) {
        
      },
      complete:function(res) {
        
        let collectionData = res.responseJSON.message;
        
        collectionChange = true;
        if(collectionData === 'ok') {
          // 已经被收藏
          $('.collection img').attr('src','/Public/bibidd/images/xingsel.png');
          // $('.collection').find("p").eq(0).text('Favorite');
          collectionStatus = true;
        }else {
          // 没被收藏
          $('.collection img').attr('src','/Public/bibidd/images/xing.png');
          // $('.collection').find("p").eq(0).text('Not collected');
          collectionStatus = false;
        }
      }
    })
  }

  if(uid){
    collectionData();
    $('#register').text('My Collection');
    $('#login').text('Log out');
    $("#login").css("backgroundColor", "#D6565A");
  }else{
    // $('.collection').find("p").eq(0).text('Not collected');
    $('#register').text('Sign up');
    $('#login').text('Login');
    $("#login").css("backgroundColor", "#CE5C2A");
  }


  // 点赞
  var fabulousStatus = true;
  $('.fabulous').on('click', function() {
    $('.collection img').attr('src','/Public/bibidd/images/load.png');
    setTimeout(() => {
$('.collection img').attr('src','/Public/bibidd/images/zan.png');
      $.ajax({
        type:'post',
        url:'https://www.bibidd.com/bibidd/Mediaonefive/dianzan_img_video',
        dataType: "json",
        data: {
          type:'img',
          cid:imgid,
          uid:uid
        },
        success: function (res) {
          
          let fabulous = $('.fabulous').find("p").eq(0).text();
          $('.fabulous').find("p").eq(0).text(Number(fabulous) + 1);
        }
      })
    }, 2000);
  })

  // 收藏
  $('.collection').on('click', function() {
    
    if(uid){
      
      if(collectionStatus) {
        
        $('.collection img').attr('src','/Public/bibidd/images/xing.png');
          // $('.collection').find("p").eq(0).text('Not collected');
        collectionclose();
      }else {
        
        $('.collection img').attr('src','/Public/bibidd/images/xingsel.png');
          // $('.collection').find("p").eq(0).text('Favorite');
        collectionAdd();
      }
    }else{
      
      // 弹窗提示去登录
      $('.loginBox').show();
    }
    
  })
  // 添加收藏
  function collectionAdd() {
    $.ajax({
      type:'post',
      url:'https://www.bibidd.com/bibidd/Mediaonefive/add_to_shoucang',
      dataType: "json",
      data: {
        type:'img',
        cid:imgid,
        uid:uid
      },
      success: function (res) {
        
      },
      complete:function(res) {
        
        collectionChange = true;
        let collectionData = res.responseJSON.message;
        
        if(collectionData === 'ok') {
          // 已经被收藏
          $('.collection img').attr('src','/Public/bibidd/images/xingsel.png');
          // $('.collection').find("p").eq(0).text('Favorite');
          collectionStatus = true;
        }else {
          $('.collection img').attr('src','/Public/bibidd/images/xing.png');
          // $('.collection').find("p").eq(0).text('Not collected');
          
          collectionStatus = false;
          tip('Please try again later');
        }
      }
    })
  }

  // 取消收藏
  function collectionclose() {
    $.ajax({
      type:'post',
      url:'https://www.bibidd.com/bibidd/Mediaonefive/quxiao_shoucang',
      dataType: "json",
      data: {
        type:'img',
        cid:imgid,
        uid:uid
      },
      success: function (res) {
        
      },
      complete:function(res) {
        
        let collectionData = res.responseJSON.message;
        
        if(collectionData === 'ok') {
          // 已经取消收藏
          $('.collection img').attr('src','/Public/bibidd/images/xing.png');
          // $('.collection').find("p").eq(0).text('Not collected');
          collectionStatus = false;
          
        }else {
          $('.collection img').attr('src','/Public/bibidd/images/xingsel.png');
          // $('.collection').find("p").eq(0).text('Favorite');
          
          collectionStatus = true;
          tip('Please try again later');
        }
      }
    })
  }
  function tip(text) {
    $('#tip').show();
    $('.tiptext').text(text);
    setTimeout(() => {
      $('#tip').hide();
    }, 1000);
  }
  
  $('.guanbiBigImg img').on('click',function() {
    $('.bigImgWrap').hide();
  })

  $('.clearTextImg').on('click', function() {
    $('.searchInput').val('');
  })
})