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

$(document).ready(function() {
  $('.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.videoid;
  // 获取点赞数量
  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="img" src="'+data+'" alt="">';
        })
        $('.imgList').html(imgListHtml);
        $('.img').on('click',function() {
          $('.bigImgWrap').show();
          $('.bigImg').attr('src', dataArray[$(this).index()]);
        })
      }
    })
  }
  getData();
  // 判断当前是否可以进行收藏相关交互
  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();
  }else{
    // $('.collection').find("p").eq(0).text('Not collected');
  }

  // 点赞
  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) {
        },
        complete:function(res) {
          let fabulous = $('.fabulous').find("p").eq(0).text();
          $('.fabulous').find("p").eq(0).text(Number(fabulous) + 1);
          fabulousStatus = true;
        }
      })
    }, 2000);

  })


  $('.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();
  })
  // 收藏
  $('.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('请稍后重试');
        }
      }
    })
  }

  // 取消收藏
  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');
        }
      }
    })
  }
  $('.back').on('click', function() {
    history.back(-1);
  })
  function tip(text) {
    $('#tip').show();
    $('tiptext').text(text);
    setTimeout(() => {
      $('#tip').hide();
    }, 1000);
  }

  $('.guanbiBigImg img').on('click',function() {
    $('.bigImgWrap').hide();
  })
})