jy/src/web/staticres/frontRouter/pc/activity/js/202402.js

// 判断活动是否结束
var initPageTime = new Date().getTime()
var initActiveOverCheck = -1
function activeOverCheck (endTime, callback) {
  if (initPageTime >= endTime) {
    return callback()
  }
  clearTimeout(initActiveOverCheck)
  var reloadTime = endTime - new Date().getTime()
  if (reloadTime <= (10 * 60 * 1000) ) {
    initActiveOverCheck = setTimeout(function (){
      callback()
    }, reloadTime)
  }
}

// 注册埋点
function trackClick (c_type) {
  if (!c_type) return
  try {
    clab_tracker.track('c_202402_activity', {
      c_platform: 'pc',
      c_type: c_type,
      date: new Date()
    })
  } catch (error) {
    console.dir(error)
  }
}

// toast上限提示
function toastFn (text, duration) {
  if (!duration) {
    duration = 1000
  }
  var _html = ""
  _html+='<div class="custom-toast"><div class="mask" style="background-color: transparent;"></div><div class="toast-container">'
  _html+='<span>' + text + '</span></div></div>'
  $('body').append(_html)
  setTimeout(function(){
    $(".custom-toast").fadeOut().remove();
  },duration)
}

// 展示弹窗
function showDialogOfType (type) {
  // $('#active-tip-modal').attr('data-modal-type', 'success').modal('show')
  // $('#active-tip-modal').attr('data-modal-type', 'over').modal('show')
  // $('#active-tip-modal').attr('data-modal-type', 'code').modal('show')
  var modal = $('#active-tip-modal')
  modal.attr('data-modal-type', type).modal('show')
  if (type === 'over') {
    modal.off('click')
  } else if (type === 'success') {
    // 点击按钮关闭
    $('.close-dialog-icon-bottom').show().off('click').on('click', function () {
      modal.modal('hide')
    })
  } else {
    modal.off('click').on('click', function () {
      modal.modal('hide')
    })
  }
}
function closeDialog () {
  var modal = $('#active-tip-modal')
  modal.modal('hide')
}

function loginCallback (r) {
  // task.hasLogin = loginflag
  var hasLogin = !!r
  task.hasLogin = hasLogin
  if (hasLogin) {
    task.ajaxCoinCount()
    task.getCoinMissionComplete()
  }
}

// 固定事件
$(function () {
  // 弹窗按钮事件
  $('#dialog-button--over').on('click', function () {
    window.open('/swordfish/frontPage/share/sess/index')
  })
  $('#dialog-button--success').on('click', function () {})
})



var task = new Vue({
  el: '#main-app',
  delimiters: ['${', '}'],
  data: {
    conf: {
      now: Date.now(),
      header_pic: '',
    },
    loading: false,
    confLoaded: false,
    coinCount: 0, // 剑鱼币剩余数量
    activityId: '',
    hasLogin: false,
    hasCoinMission: false, // 是否有剑鱼币任务
    isPersonalIdentity: false, // 是否是个人版身份
    activityConf: {
      name: '天天抢会员，助力复工免费领会员', // 活动名称
      active_start_time: 1707926400, // 活动开始时间 2024.2.15
      active_end_time: 1708358400, // 活动结束时间
      lottery_start_time: 10, // 抽奖开始时间(活动期间内的某个整点)
      lottery_end_time: 24, // 抽奖结束时间(活动期间内的某个整点)
      lottery_start_unix: 0, // 当天抽奖时间
      cost: 100, // 抽奖花费：默X个剑鱼币兑换1次抽奖机会
      rule: [], // 活动规则
      share_copy: {}, // 分享文案
      prize: [], // 奖品图片列表
      prompt_msg: '',
      status: 0, // 状态 0-抽奖状态 1-未开始(倒计时) 2-根据prompt_msg展示文案
      now_unix: 0,
    },
    shareInfo: {},
    rewardList: [],
    rulesList: [
      // {
      //   text: '活动时间：2024.2.15-2024.2.20，活动期间每天10：00开始抢会员。'
      // },
      // {
      //   text: '活动对象：仅限已注册“剑鱼标讯”的用户。'
      // },
      // {
      //   text: '活动介绍：用户进入天天抢会员活动页面，使用100剑鱼币即可获得1次抽奖机会，每天仅限100个中奖名额，每人每天每个身份仅有1次抽奖机会，中奖之后在活动页面“我的奖励”中查看兑换码进行兑换。'
      // },
      // {
      //   text: '免费订阅需设置"活动福利：超级订阅周卡/月卡、WPS会员月卡、网易云音乐黑胶VIP月卡、喜马拉雅会员2个月、腾讯视频会员周卡、120剑鱼币。'
      // },
      // {
      //   text: '兑换方式：打开链接<a class="rules-link" target="_blank" href="https://22233.cn/2258">（https://22233.cn/2258）</a>输入兑换码和手机号，即可兑换使用，兑换成功后可用充值的账号登录官方APP进行查询，每个兑换码只能兑换1次且兑换过程中不可更换充值账号，请确认充值账号无误后进行兑换。'
      // },
      // {
      //   text: '本活动最终解释权归剑鱼标讯所有。'
      // },
    ],
    tipInfo: {
      timerId: '',
      countdown: false,
      countdownText: '',
      text: '', // 内容
    },
    dialog: {
      confirm: false,
    },
    timerId: null,
    animateMinDelay: 2000,
    animateDebounce: false,
    animateTimestamp: 0,
    ballList: [],
    pageDOM: {
      ratio: 1,
    },
  },
  computed: {
    now: function () {
      var now = this.conf.now
      // console.log(new Date(now).pattern('yyyy.MM.dd HH:mm:ss'))
      return now
    },
    coinMissionCompleted: function () {
      if (this.isPersonalIdentity) {
        return !this.hasCoinMission
      } else {
        return true
      }
    },
    shareInfoPlatform: function () {
      if (this.shareInfo && this.shareInfo.PC) {
        return this.shareInfo.PC
      } else {
        return {}
      }
    },
    copyLinkText: function () {
      if (this.shareInfoPlatform.href) {
        return location.origin + this.shareInfoPlatform.href
      } else {
        return location.href
      }
    },
    pointerShow: function () {
      return this.activityConf.status === 0
    },
    activeStartTime: function () {
      var conf = this.activityConf
      return new Date(conf.active_start_time * 1000).pattern('yyyy.MM.dd')
    },
    activeEndTime: function () {
      var conf = this.activityConf
      return new Date(conf.active_end_time * 1000).pattern('yyyy.MM.dd')
    },
  },
  created: function () {
    var activityId = getParam('id')
    if (activityId) {
      this.activityId = activityId
    }
    this.ajaxActiveStatus()
    this.ajaxList()
  },
  mounted: function () {
    this.bindCalcScale()
  },
  methods: {
    add0: function (t) {
      return t < 10 ? ('0' + t) : t
    },
    toLogin: function () {
      $('#header-login-btn').trigger('click')
    },
    doCopy: function () {
      trackClick('点击复制链接')
      var shareText = this.shareInfoPlatform.subtitle || ''
      var copyLinkText = this.copyLinkText
      this.copyText(shareText + '\n' + copyLinkText)
      toastFn('复制成功', 2000)
    },
    copyText: function (text) {
      const input = document.createElement('textarea') // js创建一个input输入框
      input.value = text // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input) // 将输入框暂时创建到实例里面
      input.select() // 选中输入框中的内容
      document.execCommand('copy') // 执行复制操作
      document.body.removeChild(input) // 最后删除实例中临时创建的input输入框，完成复制操作
    },
    onClickListItem: function (item) {
      var delay = 0
      if (item.attribute > 0) {
        // 第三方。复制兑换码
        if (item.code) {
          // 复制成功2s后跳转
          this.copyText(item.code)
          delay = 1000
          toastFn('复制成功', delay)
        }
      }
      setTimeout(function () {
        if (item.url) {
          window.open(item.url)
        }
      }, delay)
    },
    calcTimeString: function (t) {
      return new Date(t).pattern('yyyy.MM.dd HH:mm:ss')
    },
    calcLastTimeDiff: function (timestamp) {
      var diff = moment.duration(Math.abs(timestamp))
      var days = diff.days()
      var hours = diff.hours()
      var minutes = diff.minutes()
      var seconds = diff.seconds()
      return {
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds
      }
    },
    getCoinMissionComplete: function () {
      var _this = this
      $.ajax({
        url: '/jyActivity/task',
        type: 'POST',
        success: function (res) {
          if (res && res.data) {
            if (!$.isArray(res.data.limitedTask)) {
              res.data.limitedTask = []
            }
            if (!$.isArray(res.data.newbieTask)) {
              res.data.newbieTask = []
            }
            var statusArr = []
            var missionList = res.data.limitedTask.concat(res.data.newbieTask)
            missionList.forEach(function (item) {
              // status是否完成 0未完成 1完成
              statusArr.push(item.status == 1)
            })
            _this.hasCoinMission = statusArr.indexOf(false) !== -1
          }
        }
      })
      // 获取当前身份
      $.ajax({
        url: '/publicapply/identity/list',
        type: 'POST',
        success: function (res) {
          if (res && $.isArray(res.data)) {
            var list = res.data
            for (var i = 0; i < list.length; i++) {
              if (list[i].checked == 1 && list[i].positionType == 0) {
                _this.isPersonalIdentity = true
                break
              }
            }
          }
        }
      })
    },
    ajaxCoinCount: function () {
      var _this = this
      $.ajax({
        url: '/jyintegral/getList',
        type: 'POST',
        data: {
          B: true
        },
        success: function (res) {
          if (res && res.data && res.data.points) {
            _this.coinCount = res.data.points.balance || 0
          }
        }
      })
    },
    toEarnCoin: function () {
      if (this.coinMissionCompleted) {
        // 充值剑鱼币
        window.open('/swordfish/integral/index/recharge')
      } else {
        // 赚剑鱼币
        window.open('/page_workDesktop/work-bench/app/points/earn')
      }
    },
    ajaxActiveStatus: function () {
      var _this = this
      $.ajax({
        url: '/publicapply/activity/day/info',
        type: 'post',
        async: false,
        data: {
          id: this.activityId
        },
        success: function (res) {
          if (res && res.data) {
            _this.$set(_this, 'activityConf', res.data)
            // 数据赋值
            if ($.isArray(res.data.rule)) {
              _this.rulesList = res.data.rule
            }
            if (res.data.now_unix) {
              _this.conf.now = res.data.now_unix * 1000
            }
            _this.shareInfo = res.data.share_copy
            activeOverCheck(res.data.active_end_time * 1000, function () {
              _this.activeOver()
            })
            _this.initActivity()
          } else {
            _this.activeOver()
          }
        },
        complete: function () {
          _this.confLoaded = true
        }
      })
    },
    activeOver: function () {
      var conf = this.activityConf
      conf.status = 2
      conf.prompt_msg = '活动已结束'
    },
    startNowTimer: function () {
      var _this = this
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      var func = function () {
        _this.conf.now = _this.conf.now + 1000
      }
      func()
      this.timerId = setInterval(func, 1000)
    },
    // 初始化
    initActivity: function () {
      var _this = this
      this.startNowTimer()
      var conf = this.activityConf
      var now = this.now
      console.log('活动时间：', this.calcTimeString(conf.active_start_time * 1000), '-->', this.calcTimeString(conf.active_end_time * 1000))
      this.calcTipInfoText()
      this.calcBallList()
      document.title = conf.name
      this.conf.header_pic = conf.pic || '/frontRouter/pc/activity/image/202402/header-banner-title@2x.png'
      setTimeout(function () {
        _this.resizeCallback()
      }, 100)
    },
    calcCountdownText: function (t) {
      var diff = 0
      if (this.now < t) {
        // 计算倒数计
        diff = t - this.now
        var lastTimeConf = this.calcLastTimeDiff(diff)
        var days = lastTimeConf.days
        var hours = lastTimeConf.hours
        var minutes = lastTimeConf.minutes
        var seconds = lastTimeConf.seconds
        var hms = [this.add0(hours), this.add0(minutes), this.add0(seconds)].join(':')
        var r = ''
        if (days > 0) {
          r = days + '天 ' + hms
        } else {
          r = hms
        }
      }
      this.tipInfo.countdownText = r
      return diff
    },
    calcTipInfoText: function () {
      var _this = this
      var conf = this.activityConf
      var status = conf.status // 状态 0-抽奖状态 1-未开始(倒计时) 2-根据prompt_msg展示文案
      if (this.tipInfo.timerId) {
        clearInterval(this.tipInfo.timerId)
      }
      if (status === 1) {
        var func = function () {
          var diff = _this.calcCountdownText(conf.lottery_start_unix * 1000)
          if (diff <= 0) {
            clearInterval(_this.tipInfo.timerId)
            _this.activityConf.status = 0
            _this.calcTipInfoText()
          }
        }
        func()
        this.tipInfo.timerId = setInterval(func, 1000)
        this.tipInfo.countdown = true
      } else {
        this.tipInfo.countdown = false
      }
      this.tipInfo.text = conf.prompt_msg
    },
    startChou: function () {
      var conf = this.activityConf
      if (!this.hasLogin) {
        return this.toLogin()
      }
      if (conf.status === 1) {
        return toastFn('活动未开始', 2000)
      }
      if (conf.status >= 2) {
        return
      }
      if (this.coinCount < conf.cost) {
        return toastFn('剑鱼币余额不足', 2000)
      }
      // 二次确认
      this.dialog.confirm = true
    },
    confirmChou: function () {
      var _this = this
      this.loading = true
      this.dialog.confirm = false
      this.startAnimate()
      $.ajax({
        url: '/publicapply/activity/day/raffle',
        type: 'post',
        data: {
          id: this.activityId
        },
        success: function (res) {
          if (res && res.error_code === 0 && res.data) {
            // 动画最少执行3s
            _this.stopAnimateDelay(_this.animateMinDelay, function () {
              _this.showSuccessDialog(res.data)
              _this.ajaxActiveStatus()
              _this.ajaxList()
              _this.ajaxCoinCount()
            })
          } else {
            _this.stopAnimateDelay(_this.animateMinDelay, function () {
              toastFn(res.error_msg || '请求失败', 2000)
            })
          }
        },
        error: function () {
          _this.stopAnimateDelay(_this.animateMinDelay)
        },
        complete: function () {
          _this.loading = false
        }
      })
    },
    ajaxList: function () {
      var _this = this
      $.ajax({
        url: '/publicapply/activity/day/list',
        type: 'POST',
        data: {
          id: this.activityId
        },
        success: function (res) {
          if (res && $.isArray(res.data)) {
            _this.rewardList = res.data.map(function (v) {
              var desc = ''
              if (v.attribute > 0) {
                // 第三方
                desc += '<p>兑换码：'+ v.code +'</p>'
                desc += '<p>兑换截止日期：'+ v.ex_end_time.split(' ')[0] +'</p>'
              } else {
                desc += v.notes
              }
              return {
                attribute: v.attribute,
                code: v.code,
                create_time: v.create_time,
                ex_end_time: v.ex_end_time,
                name: v.name,
                url: v.url,
                pic: v.pic,
                rewardText: v.name,
                receiveTime: v.create_time,
                desc: desc,
              }
            })
          }
        }
      })
    },
    showSuccessDialog: function (info) {
      var _this = this
      $('.reward-img > img').attr('src', info.pic)
      var textArr = []
      textArr.push('恭喜您成功获得' + info.name)
      if (info.attribute > 0) {
        // 第三方
        textArr.push('兑换码：' + info.redeemCode)
        textArr.push('兑换截止日期： ' + info.redeemDeadline)
        $('.active-tip-success-content .activity-red-button').text('复制兑换码，去兑换').on('click', function () {
          closeDialog()
          toastFn('复制成功', 1000)
          _this.copyText(info.redeemCode)
          setTimeout(function () {
            window.open(info.url)
          }, 1000)
        })
      } else {
        textArr.push(info.subtitle)
        $('.active-tip-success-content .activity-red-button').text('去查看').on('click', function () {
          closeDialog()
          window.open(info.url)
        })
      }
      $('.reward-float-tip').show().find('.float-tip-content').text(info.label)
      $('.reward-success-text').html(textArr.join('<br />'))
      showDialogOfType('success')
    },
    startAnimate: function () {
      console.time('动画执行时间')
      this.animateTimestamp = Date.now()
      this.animateDebounce = true
    },
    stopAnimate: function () {
      this.animateDebounce = false
    },
    // 最少动画执行delay毫秒
    stopAnimateDelay: function (delay, callback) {
      if (!delay) {
        delay = 3000
      }
      console.log('动画最小执行时间：%sms', delay)
      var _this = this
      var now = Date.now()
      var diff = now - this.animateTimestamp
      var timeDelay = delay - diff
      if (diff >= delay) {
        this.stopAnimate()
        console.timeEnd('动画执行时间')
        console.log('距离动画开始时间：%sms，动画已执行时间大于最小执行时间，直接结束动画', diff)
        callback && callback()
      } else {
        console.log('距离动画开始时间：%sms，需要补充动画时间：%sms', diff, timeDelay)
        setTimeout(function () {
          console.timeEnd('动画执行时间')
          _this.stopAnimate()
          callback && callback()
        }, timeDelay)
      }
    },
    calcBallList: function () {
      var conf = this.activityConf
      var prizeList = conf.prize
      var ballConf = {
        ballWidth: 80,
        ballHeight: 80
      }
      if (!$.isArray(prizeList)) return
      var calcBallList = ballUtils.init(prizeList, ballConf)
      this.ballList = calcBallList
    },
    getScreenWidth: function () {
      var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      return width;
    },
    calcScale: function () {
      var screenWidth = this.getScreenWidth()
      // scale计算
      var scale = 1
      if (screenWidth < 1920) {
        scale = screenWidth/1920
      }
      if (scale < 0.85) {
        scale = 0.85
      }
      if (scale > 1) {
        scale = 1
      }
      this.pageDOM.ratio = scale
      var contentWrapper = $('.page-container-content')
      contentWrapper.css({ transform: 'scale('+scale+')' })
    },
    // 外层盒子高度和内容缩放后的实际高度相同
    calcMainAppHeight: function () {
      var mainApp = $('#main-app')
      var contentWrapper = $('.page-container-content')
      var ratio = this.pageDOM.ratio
      mainApp.css({ height: contentWrapper.height()*ratio })
    },
    resizeCallback: function () {
      this.calcScale()
      this.calcMainAppHeight()
    },
    bindCalcScale: function () {
      var _this = this
      this.resizeCallback()
      window.addEventListener('resize', function () {
        _this.resizeCallback()
      })
    },
  }
})