massage-front/pages_order/mine/signIn.vue

<template>
  <view class="page">
		<navbar title="每日签到" leftClick @leftClick="$utils.navigateBack" color="#fff" />

    <view class="content">

      <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="selected"
        />
        <view class="flex tips">
          <image class="tips-icon" src="../static/signIn/icon-tips.png" mode="widthFix"></image>
          <text>签到一次得 5 积分</text>
        </view>
      </view>

      <view style="text-align: right;">
        <button 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() {

    const SELECTED_DATE_ARR = ['2025-03-04', '2025-03-05', '2025-03-06', '2025-03-07']

    return {
      // todo: fetch
      selected: SELECTED_DATE_ARR.map(date => {
        return {
          date,
          info: date[date.length - 1],
          infoColor: '#FFFFFF',
          badge: true,
        }
      }),
      isSigned: false
    }
  },
  methods: {
    onSignIn() {
      // todo
      
      setTimeout(() => {
        this.isSigned = true

        const date = this.$dayjs()

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

        uni.showToast({
          title: '签到成功~',
        });
      }, 2000)
    }
  },
}
</script>

<style lang="scss" scoped>

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

		/deep/ .nav-bar__view {
			padding-bottom: 409rpx;
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

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

  .content {
    position: absolute;
    top: 243rpx;
    z-index: 999;
  }

  .info {
    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>