hlm_pl_mall_h5/pages/member/point/PointSignin.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false"><view class="div container">
    <view class="div common-header-wrap">
      <view :style="'height:'+navHeight+'px'"></view>
      <view class="common-header-holder"></view>
      <view class="common-header-fixed">
      <title-header />
      <uni-nav-bar title="签到送积分" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
    </view>
    </view>
    <view class="div point-signin-header">
      <view class="div btn-wrapper" :class="{active:!if_signin}">
        <view class="div btn">
          <view class="div" v-if="if_signin"><view class="div title">已签到</view><view class="div content" v-if="user.member_signin_days_cycle">连续{{user.member_signin_days_cycle}}天</view><view class="div content" v-else>进入新周期</view></view>
          <view class="div" v-else @click="goSign">签到</view>
        </view>
      </view>
      <view class="div notice">连续签到{{config.points_signin_cycle}}天为一周期，每周期可获得{{config.points_signin_reward}}积分额外奖励，每过一个周期连续签到天数清0</view>
    </view>
    <view class="div calendar-wrapper" v-if="day_list">
      <view class="div calendar-month"><text class="i iconfont" @click="goSearch(0)">&#xe64f;</text><text class="span">{{$moment(search_day).format('YYYY年MM月')}}</text><text class="i iconfont" @click="goSearch(1)">&#xe650;</text></view>
      <view class="div calendar-title">
        <view class="div item"><text class="span">日</text></view>
        <view class="div item"><text class="span">一</text></view>
        <view class="div item"><text class="span">二</text></view>
        <view class="div item"><text class="span">三</text></view>
        <view class="div item"><text class="span">四</text></view>
        <view class="div item"><text class="span">五</text></view>
        <view class="div item"><text class="span">六</text></view>
      </view>
      <view class="div calendar-content">
        <view class="div item" v-for="n in day_list[0].week" :key="n"></view>
        <view class="div item" v-for="(item,index) in day_list" :key="index" :class="{active:item.state,'pre-active':(item.day==$moment().format('YYYY-MM-DD')) && !item.state}"><text class="span">{{item.num}}</text></view>
      </view>
    </view>
  </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { mapState, mapMutations, mapActions } from 'vuex'
import { getPointSignin, addPointSignin } from '../../../api/memberPoint'
import { getMemberInfo } from '../../../api/member'
export default {
  name:'MemberPointSignin',

  data(){
    return {
      navHeight: 0,
      day_list: false,
      search_day: '',
      if_signin: false
    }
  },
  components:{
    TitleHeader,
    MemberBase,
  },
  created () {
    this.getPointSignin()
    this.fetchConfig({}).then(
      response => {
      },
      error => {
        uni.showToast({icon:'none',title: error.message})
      }
    )
    getMemberInfo().then(res => {
      this.memberUpdate({ info: res.result.member_info })
    }, error => {}
    )
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      user: state => state.member.info,
      config: state => state.config.config
    })
  },
  mounted(){

  // #ifdef  MP-WEIXIN

  this.navHeight = uni.getMenuButtonBoundingClientRect().top

  // #endif

  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    ...mapMutations({
      memberUpdate: 'memberUpdate',
      memberEdit: 'memberEdit'
    }),
    goSign () {
      addPointSignin().then(res => {
        uni.showToast({icon:'none',title: res.message})
        this.memberEdit(res.result.member_signin_info)
        this.getPointSignin()
        this.if_signin=true
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    goSearch (type) {
      if (type) { // 后一个月
        this.search_day = this.$moment(this.search_day).add(1, 'months').format('YYYY-MM-DD')
      } else { // 前一个月
        this.search_day = this.$moment(this.search_day).subtract(1, 'months').format('YYYY-MM-DD')
      }
      this.getPointSignin()
    },
    getPointSignin () {
      getPointSignin(this.search_day).then(res => {
        uni.hideLoading()
        this.if_signin=res.result.if_signin
        this.day_list = res.result.day_list
        this.search_day = this.$moment.unix(res.result.time).format('YYYY-MM-DD')
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .common-header-wrap .common-header{border-bottom: 0;background: $primaryColor;color:#fff;box-shadow: unset}
  .point-signin-header{margin-bottom:1rem;background:$primaryColor;padding:.5rem;text-align: center;
    .btn-wrapper{height: 4rem;width:4rem;margin:1rem auto;border-radius:50%;background: $primaryColor;border:.3rem solid rgba(255,255,255,.5);overflow: hidden;
      &.active{
        .btn{
          >.div{background:$primaryColor;color:rgba(255,255,255,.8);line-height:3.4rem;}
        }
      }
      .btn{background:#fff;width:100%;height:100%;padding:.3rem;box-sizing:border-box;
        >.div{border-radius:50%;width:100%;height:100%;margin:0 auto;border:1px solid $primaryColor;box-sizing:border-box;
          .title{font-size:$h2;color:$primaryColor;margin-top: .7rem;}
          .content{font-size:$fontSize;color:$primaryColor}
        }
      }
    }
    .notice{font-size:$fontSize;color:#fff;opacity: .8}
  }
.calendar-wrapper{background:#fff;
  .calendar-month{text-align:center;font-size:$subFontSize;line-height:2rem;border-bottom:1px solid #eee;margin-bottom:.5rem;
    >.span{margin: 0 1rem;}
    .i{font-size:$subFontSize;}
  }
  .item{float:left;width:14.28%;height:1.5rem;text-align: center;font-size:$fontSize;
    >.span{height:1rem;width:1rem;line-height: 1rem;border-radius: 50%;display: block;margin:0 auto;}
    &.pre-active{
      >.span{border:1px solid $primaryColor}
    }
    &.active{
      >.span{background:$primaryColor;color:#fff}
    }
  }
  .calendar-content,.calendar-title{overflow: hidden;padding:0 .5rem;}

}
</style>