jy-points/jypoints-mobile/src/views/points/Home.vue

<template>
  <div class="home-points" ref="homePoints">
    <Jbanner wordState="long" :pointNum="pointInfo.balance" source="home"></Jbanner>
    <!-- <Jsign :signDays="signInfo.days" :isSign="signInfo.state"></Jsign> -->
    <div class="sign">
      <div class="continuous">
        <div class="days">
          已连续签到 <em>{{ signInfo.days || 0 }}</em> 天
        </div>
        <van-button class="btn" :disabled="signInfo.state" :class="btnClass" @click="signHandle">{{ btnText }}</van-button>
      </div>
      <div class="sign-data">
        <div class="sign-list" v-for="(item,index) in signData" :key="index">
          <div :class="['circle', index <= getToday - 1 ? 'circle-active' : '', index == getToday && !signInfo.state ? 'circle-today' : '']">+{{item}}</div>
          <div :class="['sun', index == getToday - 1 && showAnimate ? 'animate' : '']"></div>
        </div>
      </div>
    </div>
    <div class="task" v-if="!$env.isWeiXinBrowser">
      <div class="task-header">完成任务，赚剑鱼币</div>
      <div class="task-content">
        <div v-for="item in taskData" :key="item.type" class="task-list" @click="goTask(item)">
          <div :class="['task-img', item.type === 'friend' ? 'invite-img' : 'share-img']"></div>
          <div class="task-title">{{ item.title }}</div>
          <p class="task-end">立得 <em>{{ item.num }}</em> 剑鱼币</p>
        </div>
      </div>
    </div>
    <div class="hot">
      <div class="hot-header">
        <span class="header-left">文库兑换<em>HOT</em>榜</span>
      </div>
      <div class="hot-content">
        <div v-if="hotData && hotData.length > 0">
          <div class="hot-list" v-for="hot in hotData" :key="hot.docId" @click="goDetail(hot.docId)">
            <div class="hot-left">
                <div class="thumbnail" v-lazy:background-image="hot.docImg">
                  <span :class="['mask', hot.docFileType == 1 ? 'm-word' : '',hot.docFileType == 2 ? 'm-pdf': '', hot.docFileType == 3 ? 'm-excel': '', hot.docFileType == 4 ? 'ppt': '']"></span>
                </div>
            </div>
            <div class="hot-right">
              <div class="ellipsis-2 title">{{ hot.docTitle }}</div>
              <div class="time">{{ hot.uploadDate }}</div>
              <div class="price">
                <span>{{ hot.costPrice }}</span>
              </div>
            </div>
          </div>
        </div>
        <Empty v-else>
          <div class="tip-sub-text">暂无数据</div>
        </Empty>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { mapMutations, mapActions } from 'vuex'
import { Button, Toast } from 'vant'
import Empty from '@/components/common/Empty.vue'
import Jbanner from '@/components/common/Banner.vue'
// import Jsign from '@/components/common/Sign.vue'

@Component({
  name: 'home-points',
  components: {
    [Button.name]: Button,
    Empty,
    Jbanner
    // Jsign
  },
  methods: {
    ...mapMutations({
      updateHeader: 'updateLayoutConfig'
    }),
    ...mapActions({
      getPointsSign: 'home/getPointsSign',
      signUpdate: 'home/signUpdate',
      getDocHot: 'home/getDocHotList'
    })
  }
})

export default class Home extends Vue {
  protected updateHeader!: any
  protected getPointsSign!: any
  protected signUpdate!: any
  protected getDocHot!: any

  pointInfo = {}
  todayAddPoint = 0
  showAnimate = false
  signData: Array<number> = []
  signInfo = {
    days: 0,
    state: false
  }

  typeArr = {
    one: [1, 1, 3, 5, 10, 15, 15], // 0-6
    two: [1, 3, 5, 10, 15, 15, 15], // 7
    three: [3, 5, 10, 15, 15, 15, 15], // 8
    four: [5, 10, 15, 15, 15, 15, 15], // 9
    five: [10, 15, 15, 15, 15, 15, 15], // 10
    six: [15, 15, 15, 15, 15, 15, 15] // >= 11
  }

  taskData = [
    {
      type: 'friend',
      title: '邀请好友',
      num: 500
    },
    {
      type: 'share',
      title: '好友分享',
      num: 5
    }
  ]

  hotData = []

  get getToday () {
    const days = this.signInfo.days
    const bool = this.signInfo.state
    if (days < 7) {
      // 今天已签到 || 未签到
      return days
    } else {
      // 今天已签到 = 7 未签到 = 6
      return bool ? 7 : 6
    }
  }

  get btnClass () {
    if (this.signInfo.state) {
      return 'normal-btn'
    } else {
      return 'sign-btn'
    }
  }

  get btnText () {
    if (this.signInfo.state) {
      return '已签到'
    } else {
      return '立即签到'
    }
  }

  mounted () {
    this.updateHeader({
      transparentHeader: true,
      titleStyle: {
        'font-size': 0
      }
    })
  }

  created () {
    this.getPointsInfo()
    this.getHotData()
    this.getScrollTop()
  }

  getPointsInfo () {
    this.getPointsSign(
      { B: true }
    ).then((res: any) => {
      if (res.error_code === 0 && res.data.points) {
        this.pointInfo = res.data.points
        this.signInfo.days = res.data.points.signInfo.c_days
        this.signInfo.state = res.data.points.signInfo.s_bool
        this.everyDayPoints()
      } else {
        Toast(res.error_msg)
      }
    }).catch((err) => {
      console.log(err)
    })
  }

  signHandle () {
    if (this.signInfo.state) return
    // 更新积分
    this.signUpdate({
      mode: 1004,
      score: this.addHowPoints()
    }).then((v) => {
      console.log(v)
      if (v.error_code === 0 && v.data.code === 1) {
        this.signInfo.days++
        this.$nextTick(() => {
          this.signInfo.state = true
          this.showAnimate = true
          this.todayAddPoint = this.addHowPoints()
          this.getPointsInfo()
          setTimeout(() => {
            this.showAnimate = false
          }, 4000)
        })
      } else {
        Toast(v.error_msg)
      }
    }).catch((err) => {
      console.log(err)
    })
  }

  // 渲染最近七天的积分
  everyDayPoints () {
    let days = this.signInfo.days
    if (days <= 6) {
      days = 6
    } else if (days >= 12) {
      days = 11
    }
    switch (days) {
      case 6 :
        this.signData = this.typeArr.one
        break
      case 7 :
        this.signData = this.typeArr.two
        break
      case 8 :
        this.signData = this.typeArr.three
        break
      case 9 :
        this.signData = this.typeArr.four
        break
      case 10 :
        this.signData = this.typeArr.five
        break
      case 11 :
        this.signData = this.typeArr.six
        break
      default:
        this.signData = this.typeArr.one
        break
    }
  }

  // 今天签到增加多少分
  addHowPoints () {
    const days = this.signInfo.days
    let points
    if (days <= 2) {
      points = 1
    } else if (days === 3) {
      points = 3
    } else if (days === 4) {
      points = 5
    } else if (days === 5) {
      points = 10
    } else if (days >= 6) {
      points = 15
    }
    return points
  }

  // 文库兑换hot榜
  getHotData () {
    this.getDocHot({
      num: 1,
      size: 10,
      code: 4
    }).then((res) => {
      if (res.error_code === 0 && res.data) {
        res.data.forEach(v => {
          if (v.uploadDate) {
            v.uploadDate = v.uploadDate.replace(/\s[\x00-\xff]*/g, '')
          }
        })
        this.hotData = res.data
      } else {
        this.$toast(res.error_msg)
      }
    }).catch((err) => {
      console.log(err)
    })
  }

  // 跳转到详情页
  goDetail (id) {
    window.location.href = '/page_docs_mobile/details/' + id
  }

  // 邀请或分享
  goTask (item) {
    if (item.type === 'friend') {
      this.$router.push('/invite')
    } else {
      this.$router.push('/share')
    }
  }

  getScrollTop () {
    setTimeout(() => {
      window.addEventListener('scroll', this.handleScroll, true)
    }, 0)
  }

  // 监听滚动条变化
  handleScroll (e) {
    const scrollHeight = (this.$refs.homePoints as any).scrollTop || e.target.scrollTop
    if (scrollHeight > 50) {
      this.updateHeader({
        transparentHeader: false,
        positionStyle: {
          position: 'fixed',
          width: '100%',
          zIndex: 12
        }
      })
    } else {
      this.updateHeader({
        transparentHeader: true,
        titleStyle: {
          'font-size': 0
        }
      })
    }
  }

  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll, true)
  }
}

</script>
<style lang="scss">
  .home-points{
    height: auto;
    .task{
      padding: 16px 16px 0 16px;
      .task-header{
        font-size: 18px;
        color: #171826;
        line-height: 26px;
      }
      .task-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 2px;
      }
      .task-list{
        border-radius: 8px;
        background: #fff;
      }
      .task-img{
        width: 168px;
        height: 96px;
      }
      .invite-img{
        background: url(~@/assets/image/inviteHome@2x.png) no-repeat center center transparent;
        background-size: 100% 100%;
      }
      .share-img{
        background: url(~@/assets/image/shareHome@2x.png) no-repeat center center transparent;
        background-size: 100% 100%;
      }
      .task-title{
        padding: 10px 10px 0;
        font-size: 13px;
        color: #171826;
      }
      .task-end{
        padding: 2px 10px 10px;
        font-size: 12px;
        color: #5F5E64;
        em{
          color: #FB483D;
          font-size: 13px;
        }
      }
    }
    .hot{
      margin-top: 16px;
      padding: 0 16px;
      .hot-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 6px;
        line-height: 26px;
      }
      .header-left{
        font-size: 18px;
        color: #171826;
        em{
          color: #FB483D;
        }
      }
      .header-right{
        color: #1B1A2A;
        font-size: 14px;
        em{
          color: #C0C4CC;
        }
      }
      .hot-content{
        .hot-list{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          background-color: #fff;
          border-radius: 8px;
        }
        .hot-left{
          padding: 4px 0 4px 4px;
          .thumbnail{
            position: relative;
            width: 100px;
            height: 124px;
            border-radius: 4px;
            border: 1px solid #ECECEC;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
            .mask{
              position: absolute;
              right: 0;
              bottom: 0;
              width: 24px;
              height: 24px;
              background: url(~@/assets/image/ppt@2x.png) center center no-repeat;
            }
            .m-pdf{
              background: url(~@/assets/image/pdf@2x.png) no-repeat center center;
              background-size: 100% 100%;
            }
            .m-word{
              background: url(~@/assets/image/word@2x.png) no-repeat center center;
              background-size: 100% 100%;
            }
            .m-excel{
              background: url(~@/assets/image/excel@2x.png) no-repeat center center;
              background-size: 100% 100%;
            }
            .m-ppt{
              background: url(~@/assets/image/ppt@2x.png) no-repeat center center;
              background-size: 100% 100%;
            }
          }
        }
        .hot-right{
          flex: 1;
          padding: 12px 16px 12px 20px;
          .title{
            font-size: 14px;
            line-height: 20px;
            color: #171826;
            flex: 1;
          }
          .time{
            margin-top: 8px;
            color: #9B9CA3;
            font-size: 12px;
            line-height: 18px;
          }
          .price{
            margin-top: 22px;
            text-align: right;
            span{
              background: url(~@/assets/image/iconJianYu@2x.png) no-repeat left center transparent;
              background-size: 20px 20px;
              padding-left: 24px;
              color: #FB483D;
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
  .sign{
    position: relative;
    margin: -68px 16px 0;
    padding: 16px 16px 6px 16px;
    border-radius: 8px;
    background: url(~@/assets/image/dateGetBg@2x.png) no-repeat center center;
    background-size: cover;
    box-shadow: 0px 2px 8px 0px rgba(54,147,179,0.05);
    z-index: 10;
    .continuous{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .days{
        font-size: 16px;
        color: #5F5E64;
        & em{
          color: #FF7A00;
          font-weight: 600;
        }
      }
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        padding: 0;
        border-radius: 4px;
        font-size: 12px;
        box-sizing: border-box;
      }
      .sign-btn{
        min-width: 60px;
        background: #33323A;
        color: #F1D090;
      }
      .normal-btn{
        width: 48px;
        border: 1px solid #D69E55;
        color: #D69E55;
        box-sizing: border-box;
      }
    }
    .sign-data{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      .sign-list{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
      }
      .sun{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .sun.animate{
        animation: turn 6s linear infinite;
        background: url(~@/assets/image/dateGetClick@2x.png) center center no-repeat transparent;
        background-size: 100% 100%;
      }
      .circle{
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 50%;
        background: url(~@/assets/image/iconUnGot@2x.png) center center no-repeat;
        background-size: contain;
        font-size: 12px;
        overflow: hidden;
      }
      .circle-today{
        background: url(~@/assets/image/iconGetToday@2x.png) center center no-repeat;
        background-size: contain;
      }
      .circle-active{
        background: url(~@/assets/image/iconGot@2x.png) center center no-repeat;
        background-size: contain;
        color: #fff;
      }
      @keyframes turn{
        0%{-webkit-transform:rotate(0deg);}
        25%{-webkit-transform:rotate(90deg);}
        50%{-webkit-transform:rotate(180deg);}
        75%{-webkit-transform:rotate(270deg);}
        100%{-webkit-transform:rotate(360deg);}
      }
    }
  }
</style>