zhangsiye/mini/pages/sign/index.vue

<template>
  <view class="sign-container">
    <u-loading-page
      :loading="loading"
      :bg-color="$colors.bgColor"
      :color="$colors.primaryColor"
      :loading-color="$colors.primaryColor"
    />
    <template v-if="!loading">
      <view
        class="header"
        :style="{
          backgroundImage: `url(${$setting.IMAGE_URL}/sign/bg.png)`
        } "
      >
        <view
          class="icon"
          :style="{
            backgroundImage: `url(${$setting.IMAGE_URL}/sign/icon.png)`
          } "
        />
        <view class="been-sign">已连续签到{{ signDays }}天</view>
        <view class="tips">在连续签到{{ 7 - signDays }}天立得{{ setting[7].award }}金</view>
      </view>
      <view class="content dir-left-wrap">
        <view
          v-for="(item, index) in setting"
          :key="index"
          class="item main-center cross-center"
          :class="{active: parseInt(index) === (parseInt(signDays) + 1)}"
        >
          <view
            class="left-box dir-top-wrap"
            :class="{
              'cross-center': parseInt(index) !== 7,
              'last': parseInt(index) === 7,
            }"
          >
            <text class="title">{{ item.name }}</text>
            <view v-if="parseInt(index) !== 7" class="icon">
              <image src="@/static/image/gold.png" />
            </view>
            <view class="number">{{ item.award }}金币</view>
          </view>
          <view v-if="parseInt(index) === 7" class="right-box">
            <image src="@/static/image/gold-bag.png" />
          </view>
        </view>
      </view>
      <view class="btn" :class="{todaySign: todaySign}" @click="handleSign">
        {{ todaySign?'已签到' : '立即签到' }}
      </view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      signDays: 0,
      loading: true,
      todaySign: false,
      setting: []
    }
  },
  computed: {},
  methods: {
    handleSign() {
      if (!this.todaySign) {
        this.$loading('签到中...')
        this.$api.sign.handle().then(res => {
          this.$hideLoading()
          if (res.code === 0) {
            this.$u.toast(`签到成功，获取 ${res.data.award} 金币`)
            this.todaySign = true
            this.signDays += 1
            this.$api.user.info().then(res => {
              this.$store.dispatch('user/info', res.data)
            })
          }
        })
      }
    },
    checkSetting() {
      this.$api.sign.setting().then(res => {
        this.loading = false
        const { data } = res
        this.signDays = data.signDays
        this.setting = data.setting
        this.todaySign = data.todaySign
      })
    }
  },
  onLoad() {
    this.checkSetting()
  }
}
</script>

<style lang="scss" scoped>
    .sign-container{
      padding: 20rpx;
      font-size: 28rpx;
      .header{
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 300rpx;
        border-radius: 10rpx;
        position: relative;
        margin-top: 100rpx;
        padding-top: 80rpx;
        .icon{
          background-repeat: no-repeat;
          background-size: 100%;
          height: 180rpx;
          width: 240rpx;
          position: absolute;
          top: -50%;
          transform: translateY(30%) translateX(-50%);
          left: 50%;
        }
        .been-sign{
          background: linear-gradient(303deg, #FF74B9, #6EEBE8, #FFFFFF);
          -webkit-background-clip: text;
          color: transparent;
          text-align: center;
          margin-bottom: 30rpx;
          font-size: 46rpx;
          font-weight: bold;
        }
        .tips{
          color: $info-color;
          text-align: center;
          width: 500rpx;
          margin: 0 auto;
          border-radius: 30rpx;
          padding: 12rpx 0;
          background: #1f2336;
          font-size: 26rpx;
        }
      }
      .content{
        margin-top: 40rpx;
        .item{
          color: $default-color;
          width: calc(#{650rpx}/4);
          background: #1B1E32;
          border-radius: 10rpx;
          padding: 28rpx 0;
          margin-bottom: 20rpx;
          margin-right: 20rpx;
          &.active{
            background: linear-gradient(221deg, #6EEBE8, #FF74B9);
          }
          &:nth-child(4){
            margin-right: 0;
          }
          &:last-child{
            flex: 1;
            margin-right: 0;
          }
          .left-box{
            &.last{
              height: 100%;
              .title{
                margin-bottom: 10rpx;
              }
            }
            .title{
              font-size: 32rpx;
            }
            .icon{
              margin-top: 14rpx;
              image{
                width: 100rpx;
                height: 100rpx;
              }
            }
            .number{
              color: $primary-color;
            }
          }
          .right-box{
            margin-bottom: -100rpx;
            margin-right: -20rpx;
            margin-left: 40rpx;
            image{
              width: 160rpx;
              height: 160rpx;
            }
          }
        }
      }
      .btn{
        width: 690rpx;
        margin: 80rpx auto 0;
        padding: 24rpx 0;
        color: $default-color;
        background: linear-gradient(270deg, #FB3651 0%, #FF8999 100%);
        border-radius: 45px;
        text-align: center;
      }
    }
</style>