TWPayGame/public/game/fishing/assets/js/couponItem.js

/**
 *
 * @authors Eric Hsiao
 *
 */

var couponItem = function (_index, _status) {

  //private menbers
  var $container;
  var itemIndex;
  var status = { "id": 1, "lp": 1, "gp": 10, "issoldout": false, "isredeemed": false, "isnomoney": false, "canuse": false, "video": '' }

  //template

  var couponTemplate =
    `<div class="coupon__item">
    <div class="coupon__item__content">
      <div class="coupon__item__btn"></div>
      <div class="coupon__item__lp"></div>
      <div class="coupon__item__gp"></div>
    </div>
    <div class="coupon__item__overlayer"></div>
  </div>`;

  /***********************************/

  //private methods
  function init() {
    // $container = _container;
    itemIndex = _index;
    $container = $(couponTemplate).appendTo($('.game__store__coupon'));

    status = $.extend(status, _status);

    updateCoupon();

    $container.click(function (e) {
      e.preventDefault();
      doClick();
    });
  }

  function updateCoupon() {

    $container.find('.coupon__item__lp').text(status.lp);
    $container.find('.coupon__item__gp').text(status.gp);

    //////////////////////////////////////

    if (status.video != '') {
      $container.addClass('coupon__item__video');
    }

    if (status.lock) {
      $container.find('.coupon__item__btn').addClass('lock');
    } else {
      $container.find('.coupon__item__btn').removeClass('lock');
    }

    if (status.issoldout) {
      $container.addClass('sellout');
    } else {
      $container.removeClass('sellout');
    }

    if (status.isredeemed) {
      $container.find('.coupon__item__btn').addClass('used');
    } else {
      $container.find('.coupon__item__btn').removeClass('used');
    }
  }

  function doClick() {

    console.log('點選 ' + status.gp + '吉點 交換 LINE Point : ' + status.lp + '點');


    if (status.issoldout) {
      storePage.showPopout('<p>獎項已兌換完畢</p>');

    } else if (status.lock) {
      // alert('未解鎖');
      $('.video__popout').show();
      TweenMax.set('.video__popout', { autoAlpha: 0 });
      TweenMax.to('.video__popout', 0.5, { autoAlpha: 1 });
      // $('.video__content').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + status.video + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');

      console.log('VIDEO = ' + status.video);
      player.loadVideoById(status.video);
      player.stopVideo(0);

      videoCallback = function () {
        TweenMax.to('.video__popout', 0.5, { autoAlpha: 0 });
        status.lock = false;

        console.log('SET cookie');
        $.cookie('luckydraw.isVideoUnlock', true);
        console.log('luckydraw.isVideoUnlock = ' + $.cookie('luckydraw.isVideoUnlock'));

        updateCoupon();
        setTimeout(function () {
          doClick();
        }, 300);
      }

    } else if (status.isredeemed) {
      storePage.showPopout('<p>本週已兌換</p>');

    } else if (status.isnomoney) {
      storePage.showPopout('<p>很抱歉，兌換吉點餘額不足。</p>');

    } else {
      $('.game__popout__content .content').hide();
      $('.game__popout__submit').show();
      $('.game__popout__submit__text').text(status.gp);
      $('.game__popout .content__lp .lp').text(status.lp);
      $('.game__popout .content__lp').show();

      TweenMax.set('.game__popout__submit', { y: 50 });
      TweenMax.to('.game__popout__submit', 0.5, { y: 0, ease: Back.easeOut.config(1.7) });

      $('.game__popout').show();
      TweenMax.set('.game__popout', { autoAlpha: 0 });
      TweenMax.to('.game__popout', 0.5, { autoAlpha: 1 });

      /*storePage.showPopout(null,function () {
        //使用Coupon
        main.useCoupon(status.id,-status.gp, function () {
          status.isredeemed = true;
          updateCoupon();
        });
      });*/

      storePage.useCoupon(status.id,-status.gp, function () {
        status.isredeemed = true;
        updateCoupon();
      });
    }
  }

  //constructor

  {
    $(document).ready(function () {
      init();
    });
  }

  //public

  return {
    // videoComplete:function () {
    //   console.log('videoComplete : ' + status.gp);
    // }
  };
};