peko-h5/view/peko/activity/act-520/js/index.js

const urlPrefix = getUrlPrefix()
let browser = checkVersion()
if (EnvCheck() === 'test') new VConsole
// 封装layer消息提醒框
let layerIndex
const showLoading = (content = '加載中...') => {
  layer.open({
    type: 2,
    shadeClose: false,
    content,
    success(e) {
      layerIndex = $(e).attr('index')
    }
  })
}
const hideLoading = (index) => {
  // layer.closeAll()
  layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
  layer.open({
    content,
    time,
    skin: 'msg'
  })
}

let rankType = 1  //榜单类型(1：告白榜 2：心动榜)
let rankDataType = 0  //榜单数据类型（0：日榜 1：总榜）
let rankList = []
let userRank = {}
const getList = (rankType = 1, rankDataType = 0) => {
  networkRequest({
    type: 'GET',
    url: urlPrefix + '/act/love/listRank',
    data: {
      rankType,
      rankDataType
    },
    success(res) {
      if (res.code === 200) {
        rankList = res.data.rankList
        userRank = res.data.userRank
        renderList(rankType)
        renderUser(rankType)
      } else {
        toastMsg(res.message)
      }
    },
    error(err) {
      toastMsg('網絡錯誤')
    }
  })
}

// 渲染
const renderList = (rankType) => {
  let str = ''
  let topthree = rankList.slice(0, 3)
  if (topthree.length < 3) {
    topthree.push(
      ...new Array(3-topthree.length).fill({
        avatar: './images/default.png',
        nick: '虚位以待',
        rankValue: 0
      })
    )
  }
  topthree.forEach((item, index) => {
    str += `
      <div class="topthree_item">
        <img src="./images/headwear${index+1}.png" alt="" class="headwear">
        <img src="${item.avatar}" alt="" class="avatar">
        <div class="nick">${item.nick.length>5 ? item.nick.slice(0,5)+'...' : item.nick}</div>
        <div class="num" style="display: ${item.rankValue ? 'block' : 'none'}">
          ${rankType === 1 ? '告白值' : '心动值'}：
          <span>${item.rankValueStr}</span>
        </div>
      </div>
    `
  })
  $('.topthree_wrap').html(str)

  let str1 = ''
  let others = rankList.slice(3, 10)
  if (others.length < 7) {
    others.push(
      ...new Array(7-others.length).fill({
        avatar: './images/default.png',
        nick: '虚位以待',
        rankValue: 0
      })
    )
  }
  others.forEach((item, index) => {
    str1 += `
        <li>
          <div class="index">${index + 4}</div>
          <div class="others_avatar"><img src="${item.avatar}" alt=""></div>
          <div class="others_nick">${item.nick.length>8 ? item.nick.slice(0,8)+'...' : item.nick}</div>
          <div class="others_num" style="display: ${item.rankValue ? 'block' : 'none'}">
            ${rankType === 1 ? '告白值' : '心动值'}<br>
            <span>${item.rankValueStr}</span>
          </div>
        </li>
    `
  })
  $('.others_wrap').html(str1)
}

const renderUser = (rankType) => {
  $('.mine_index').html(userRank.rank ? userRank.rank : '未上榜')
  $('.mine_avatar img').attr('src', userRank.avatar)
  $('.mine_nick').html(userRank.nick.length > 8 ? userRank.nick.slice(0, 8)+ '...' : userRank.nick)
  $('.mine_num').html(`${rankType === 1 ? '告白值' : '心动值'}<br><span>${userRank.rankValueStr}</span>`)
}

$(function () {
  getInfoFromClient()
  setTimeout(() => {
    getList()
  }, 50)
  // 页面全屏
  if (browser.app) {
    if (browser.android) {
      window.androidJsObj.initShowNav(false)
    } else {
      window.webkit.messageHandlers.initShowNav.postMessage(0)
    }
  }
  // 返回按钮
  $('.back').click(() => {
    if (browser.android) {
      window.androidJsObj.closeWebView()
    } else {
      window.webkit.messageHandlers.closeWebView.postMessage(null)
    }
  })
  // 告白榜 心动榜 tab切換
  let currentTab = 0
  $('.tab_wrap').on('click', 'div', function() {
    let index = $(this).index()
    if (currentTab === index) return;
    currentTab = index
    if (index) {
      // 心动榜
      $('.tab_wrap').css('backgroundImage', "url('./images/tab2-active.png')")
      if (currentType_x) {
        $('.type_wrap img').eq(1).attr('src', './images/total-rank-active.png').siblings('img').attr('src', './images/day-rank.png')
        getList(2, 1)
      } else {
        $('.type_wrap img').eq(0).attr('src', './images/day-rank-active.png').siblings('img').attr('src', './images/total-rank.png')
        getList(2, 0)
      }
    } else {
      // 告白榜
      $('.tab_wrap').css('backgroundImage', "url('./images/tab1-active.png')")
      if (currentType_g) {
        $('.type_wrap img').eq(1).attr('src', './images/total-rank-active.png').siblings('img').attr('src', './images/day-rank.png')
        getList(1, 1)
      } else {
        $('.type_wrap img').eq(0).attr('src', './images/day-rank-active.png').siblings('img').attr('src', './images/total-rank.png')
        getList(1, 0)
      }
    }
  })

  // 日榜 总榜 tab切换
  let currentType_g = 0
  let currentType_x = 0

  $('.type_wrap').on('click', 'img', function() {
    let index = $(this).index()
    if (currentTab) {
      // 心动榜
      if (currentType_x == index) return
      currentType_x = index
      if (currentType_x) {
        $(this).attr('src', './images/total-rank-active.png').siblings('img').attr('src', './images/day-rank.png')
        getList(2, 1)
      } else {
        $(this).attr('src', './images/day-rank-active.png').siblings('img').attr('src', './images/total-rank.png')
        getList(2, 0)
      }
    } else {
      // 告白榜
      if (currentType_g == index) return
      currentType_g = index
      if (currentType_g) {
        $(this).attr('src', './images/total-rank-active.png').siblings('img').attr('src', './images/day-rank.png')
        getList(1, 1)
      } else {
        $(this).attr('src', './images/day-rank-active.png').siblings('img').attr('src', './images/total-rank.png')
        getList(1, 0)
      }
    }
  })

  // 规则弹窗
  $('.rule_icon').click(() => {
    $('.rule_popup').show()
    $('body').css('overflow', 'hidden')
  })
  $('.rule_popup').click(() => {
    $('.rule_popup').hide()
    $('body').css('overflow', 'auto')
  })
  $('.rule_content').click((e) => {
    e.stopPropagation()
  })

  // 奖励弹窗
  $('.award_icon').click(() => {
    $('.award_popup').show()
    $('body').css('overflow', 'hidden')
  })
  $('.award_popup').click(() => {
    $('.award_popup').hide()
    $('body').css('overflow', 'auto')
  })
  $('.award_content').click((e) => {
    e.stopPropagation()
  })

  let currentAwardTabIndex = 0
  $('.award_tab_wrap').on('click', '.award_tab_item', function() {
    let index = $(this).index()
    if (currentAwardTabIndex === index) return
    currentAwardTabIndex = index
    if (index) {
      $('.award_tab_wrap').css('backgroundImage', 'url(./images/award-tab2.png)')
      $('.award_pic').attr('src', './images/award-pic2.png')
    } else {
      $('.award_tab_wrap').css('backgroundImage', 'url(./images/award-tab1.png)')
      $('.award_pic').attr('src', './images/award-pic1.png')
    }
  })
})