uniAppXCX/pages/task/index.vue

<template lang="">
  <div
    style="
      height: 100vh;
      background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%);
      box-sizing: border-box;
      overflow: scroll;
    "
  >
    <div
      :style="{
        background: 'url(https://file.rongcyl.cn/festatic/bkm/first2/bg.png)',
        height: 'calc(100vh - 160rpx)',
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'background-size': 'cover',
        'padding-top': safeAreaTop,
        'box-sizing': 'border-box',
        overflow: 'scroll',
        'padding-bottom': '160rpx',
      }"
    >
      <div class="flex items-center pl-2">
        <img @click="goBack" src="https://file.rongcyl.cn/festatic/bkm/back.png" style="height: 32px; width: 32px" />
      </div>
      <div class="card rounded-md shadow-sm mx-auto mt-10 py-2">
        <div class="fs16 bold italic text-gray-900 pl-3 my-2">签到赚积分</div>
        <div class="flex justify-between text-black px-3">
          <div v-for="day in weekdays">周{{ day }}</div>
        </div>
        <div class="flex justify-between px-3 mt-2">
          <div
            style="width: 60rpx; height: 60rpx"
            :class="{ 'bg-amber-200': i >= todayIndex || day.status, 'bg-gray-200': i < todayIndex }"
            class="flex justify-center items-center rounded-full"
            v-for="(day, i) in signList"
          >
            <div
              style="width: 45rpx; height: 45rpx"
              :class="{ 'bg-amber-300': i >= todayIndex || day.status, 'bg-gray-300': i < todayIndex }"
              class="flex justify-center items-center rounded-full"
            >
              <span
                class="fs11 bold"
                :class="{ 'text-red-400': i >= todayIndex || day.status, 'text-gray-400': i < todayIndex }"
              >
                +{{ day.integral }}
              </span>
            </div>
          </div>
        </div>
        <div class="flex justify-between px-3 mt-2">
          <div v-for="day in signList">
            <span v-if="day.status == 1" class="fs12 text-green-500">已签到</span>
            <span v-if="day.status != 1" class="fs12 text-grey-500">未签到</span>
          </div>
        </div>
        <div class="signInButton" @click="sign()">
          {{ signList[todayIndex].status == 1 ? '今日已签到' : '立即签到' }}
        </div>
      </div>
      <div class="card rounded-md shadow-sm mx-auto mt-4 py-2">
        <div class="fs16 bold italic text-gray-900 pl-3 my-2">消费领优惠券</div>
        <div class="flex items-center px-3">
          <img
            src="https://file.rongcyl.cn/festatic/bkm/task/coupon.png"
            style="width: 80rpx; height: 80rpx"
            class=""
          />
          <div class="ml-3 flex-1">
            <div>
              <span>连续消费满 {{ totalNum }} 天领取</span>
              <span class="text-rose-500">({{ status == 2 ? 7 : currentNum }}/{{ totalNum }})</span>
            </div>
            <div style="color: #ff2c43">
              <span>￥</span>
              <span class="bold fs15">{{ couponPrice }}</span>
            </div>
          </div>
          <div></div>
          <div
            style="width: 110rpx; height: 44rpx; line-height: 44rpx"
            class="rounded-sm bg-purple-100 fs14 text-center"
            @click="reveiveTaskReward"
          >
            <span v-if="status == 2">已</span>
            领取
          </div>
        </div>
        <div class="tip">每日消费满{{ limitPrice }}元达标，连续7天，若期间有一日未达标，则任务重置</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSignList, signToday, getTaskStat, reveiveTaskReward } from '@/api/task'
export default {
  data() {
    return {
      safeAreaTop: '0px',
      signList: [],
      todayIndex: -1,
      weekdays: ['一', '二', '三', '四', '五', '六', '日'],
      currentNum: 0,
      totalNum: 0,
      couponPrice: 0,
      limitPrice: 0,
      status: 0,
    }
  },
  created() {
    this.getSafeAreaTop()
    this.getList()
    this.getTaskStat()
  },
  methods: {
    goBack() {
      wx.navigateBack({
        delta: 1,
      })
    },
    reveiveTaskReward() {
      if (this.status == 2) {
        return
      }
      if (this.currentNum < this.totalNum) {
        wx.showToast({
          title: '未达到领取条件',
          icon: 'error',
        })
        return
      }
      reveiveTaskReward().then(rs => {
        wx.showToast({
          title: '领取成功',
          icon: 'sucess',
        })
        this.getTaskStat()
      })
    },
    getTaskStat() {
      getTaskStat().then(rs => {
        this.currentNum = rs.data.currentNum
        this.totalNum = rs.data.totalNum
        this.couponPrice = rs.data.couponPrice
        this.status = rs.data.status
        this.limitPrice = rs.data.limitPrice
        console.log(rs)
      })
    },
    posTodayIndex() {
      var today = this.getTodayString()
      for (var i = 0; i < this.signList.length; i++) {
        if (this.signList[i].date === today) {
          this.todayIndex = i
          break
        }
      }
    },
    getTodayString() {
      var today = new Date()
      var year = today.getFullYear()
      var month = String(today.getMonth() + 1).padStart(2, '0') // Months are 0-based
      var day = String(today.getDate()).padStart(2, '0')
      return year + '-' + month + '-' + day
    },
    getList() {
      getSignList().then(rs => {
        this.signList = rs.data
        this.posTodayIndex()
      })
    },
    sign() {
      if ([0, 1].includes(this.signList[this.todayIndex].status)) return
      if (this.signList[this.todayIndex].status == 2) {
        signToday().then(this.getList)
        wx.showToast({
          title: '签到成功',
          icon: 'sucess',
        })
      } else {
        wx.showToast({
          title: '今日已签到',
          icon: 'none',
        })
      }
    },
    getSafeAreaTop() {
      wx.getSystemInfo({
        success: res => {
          this.safeAreaTop = res.safeArea.top + 'px'
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  width: 90%;
  background-image: linear-gradient(45deg, #f5eeea 0%, #faab86 100%);
}
.tip {
  margin-top: 5px;
  // text-align: center;
  padding: 0 15px;
  color: #969696;
  font-size: 12px;
}
.signInButton {
  margin: 10px auto;
  background: #ff9235;
  width: 20vw;
  height: 30px;
  color: #fff;
  border-radius: 15px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
}
</style>