massage-front/pages_order/mine/signIn.vue

<template>
  <view class="page">

		<view class="bg"></view>

    <view class="content">

		  <navbar title="每日签到" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" color="#fff" />

      <!-- todo: 对接接口 -->
      <view class="flex info">
        <view class="flex flex-column info-item">
          <view class="info-value">{{ duration }}</view>
          <view class="info-label">连续签到/天</view>
        </view>
        <view class="flex flex-column info-item">
          <view class="info-value">{{ total }}</view>
          <view class="info-label">累计签到/天</view>
        </view>
        <view class="flex flex-column info-item">
          <view class="info-value">{{ userCenterData.score }}</view>
          <view class="info-label">获得积分</view>
        </view>
      </view>

      <view class="calendars">
        <uv-calendars 
          insert 
          :showMonth="false"
			    :selected="signedDates"
          :readonly="true"
        />
        <view class="flex tips">
          <image class="tips-icon" src="../static/signIn/icon-tips.png" mode="widthFix"></image>
          <text>{{ `签到一次得 ${configList.config_sign_score} 积分` }}</text>
        </view>
      </view>

      <view style="text-align: right;">
        <button plain class="flex btn btn-record" @click="$utils.navigateTo('/pages_order/mine/pointsRecord')">
          <text>积分明细</text>
          <image class="btn-record-icon" src="../static/signIn/icon-arrow.png" mode="widthFix"></image>
        </button>
      </view>

      <view class="tools">
        <button plain class="flex btn btn-sign" :class="{ 'is-disabled': isSigned }" @click="onSignIn" :disabled="isSigned">我要签到</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      signedDates: [],
      total: 0,
      duration: 0,
      isSigned: false,
    }
  },
  onLoad() {
    if (uni.getStorageSync('token')) {
      this.$store.commit('getUserCenterInfo')
      this.fetchSignedData()
    }
  },
  computed: {
    ...mapState(['userCenterData']),
  },
  methods: {
    async fetchSignedData() {
      try {
        const res = await this.$fetch('queryScoreList')

        const { records, total } = res
        const today = this.$dayjs()
        let todaySigned = false
        let duration = 0
        let baseDay = today.subtract(1, 'day')

        const set = new Set()
        const dates = []

        records.forEach(item => {
          const { createTime } = item
          const date = this.$dayjs(createTime)
          const dateStr = date.format("YYYY-MM-DD")

          if (set.has(dateStr)) {
            return
          }

          set.add(dateStr)

          if (!todaySigned && date.isSame(today, 'day')) {
            todaySigned = true
          }

          if (date.isSame(baseDay, 'day')) {
            duration++
            baseDay = baseDay.subtract(1, 'day')
          }

          dates.push({
            date: date.format("YYYY-MM-DD"),
            info: date.date(),
            infoColor: '#FFFFFF',
            badge: true,
          })
        })

        this.signedDates = dates
        this.isSigned = todaySigned
        this.isSigned && (duration++)
        this.duration = duration
        this.total = total

      } catch (err) {

      }
    },
    async onSignIn() {

      try {

        await this.$fetch('sign')

        this.$store.commit('getUserCenterInfo')
        this.fetchSignedData()
        
        uni.showToast({
          title: '签到成功~',
        });

      } catch (err) {

      }

    }
  },
}
</script>

<style lang="scss" scoped>

  .page {
		background-color: $uni-bg-color;
    position: relative;

    /deep/ .uv-calendar {
      width: calc(100vw - 14rpx*2);
    }

    /deep/ .uv-calendar__header {
      border: none;
    }

    /deep/ .uv-calendar__header-btn {
      border-color: $uni-color-light;
    }

    /deep/ .uv-calendar__backtoday,
    /deep/ .uv-calendar-item--isDay-text.uv-calendar-item__weeks-lunar-text {
      display: none;
    }

    /deep/ .uv-calendar__weeks-day {
      border-color: #E6E6E6;
    }

    /deep/ .uv-calendar-item__weeks-box-item {
      height: 72rpx;
    }

    /deep/ .uv-calendar-item--isDay {
      color: #333 !important;
      background-color: transparent !important;
    }

    /deep/ .uv-calendar-item__weeks-box-circle {
      top: 50%;
      left: 50%;
      width: 53rpx;
      height: 53rpx;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: $uni-color-light;
    }

    /deep/ .uv-calendar-item__weeks-lunar-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 28rpx;
      line-height: 1;
    }
  }
  
	.bg {
		width: 100vw;
		height: 550rpx;
		background-image: linear-gradient(#84A73F, #D8FF8F);
	}

  .content {
    position: absolute;
    left: 0;
    top: 0;
  }

  .info {
    margin-top: 102rpx;
    width: 100vw;
    box-sizing: border-box;
    padding: 0 48rpx;
    font-size: 0;
    justify-content: space-between;

    &-item {
      color: $uni-text-color-inverse;

    }

    &-value {
      font-size: 46rpx;
    }

    &-label {
      font-size: 26rpx;
      margin-top: 19rpx;
    }
  }

  .calendars {
    background-color: $uni-fg-color;
    margin: 56rpx 14rpx 0 14rpx;
    border-radius: 45rpx;
    overflow: hidden;

    .tips {
      padding: 30rpx 30rpx 38rpx 30rpx;
      color: $uni-color-light;
      justify-content: flex-start;

      &-icon {
        width: 36rpx;
        height: auto;
        margin-right: 11rpx;
      }
    }
  }

  .tools {
    margin-top: 146rpx;
    width: 100%;
    padding: 0 82rpx;
    box-sizing: border-box;
  }

  .btn {
    border: none;

    &-record {
      margin-top: 19rpx;
      margin-right: 28rpx;
      display: inline-flex;
      color: #999999;

      &-icon {
        width: 21rpx;
        height: auto;
        margin-left: 18rpx;
      }

    }

    &-sign {
      width: 100%;
      padding: 29rpx 0;
      color: $uni-text-color-inverse;
      font-size: 28rpx;
      line-height: 40rpx;
      border-radius: 44rpx;
      background-image: linear-gradient(to right, #84A73F, #D8FF8F);

      &.is-disabled {
        color: $uni-text-color-inverse;
        background: #C7C7C7;
      }
    }
  }
  
</style>