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">5</view>
          <view class="info-label">连续签到/天</view>
        </view>
        <view class="flex flex-column info-item">
          <view class="info-value">20</view>
          <view class="info-label">累计签到/天</view>
        </view>
        <view class="flex flex-column info-item">
          <view class="info-value">50</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>
export default {
  data() {
    return {
      // todo: fetch
      signedDates: [],
      // signedDates: SELECTED_DATE_ARR.map(date => {
      //   return {
      //     date,
      //     info: date[date.length - 1],
      //     infoColor: '#FFFFFF',
      //     badge: true,
      //   }
      // }),
      isSigned: false
    }
  },
  methods: {
    async onSignIn() {

      try {

        await this.$fetch('sign')
        
        this.isSigned = true

        const date = this.$dayjs()

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

        uni.showToast({
          title: '签到成功~',
        });

        // todo: refresh overview data

      } 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>