menduner/src/views/recruit/personal/PersonalCenter/taskCenter/components/signIn.vue

<!-- 签到 -->
<template>
  <div>
    <integralShow ref="integralRef"></integralShow>
    <div class="d-flex justify-center mt-10">
      <div v-for="(item, index) in configList" :key="'signInKey' + index" >
        <div
          class="borderRadius-5 mx-5 py-3 px-4"
          style="text-align: center;"
          :style="{'background-color': index < continuousDay ? '#10897ba8' : 'var(--color-f2f4f7)'}"
        >
          <!-- 图标 -->
          <div class="mt-1">
            <svg-icon v-if="index < continuousDay" name="tick" size="36"></svg-icon>
            <svg-icon v-else name="integral" size="38"></svg-icon>
          </div>
          <div class="mt-2" :style="{'color': index < continuousDay ? '#fff' : 'var(--color-333)'}">
            <span class="font-12">+</span>
            <span>{{ item.point }}</span>
          </div>
        </div>
        <div class="mt-2 font-13" style="text-align: center;" :style="{'color': index < continuousDay ? '#10897b' : 'var(--color-333)'}">
          {{ `${index === todayNumber ? '今天' : '第' + item.day + '天'}` }}
        </div>
      </div>
    </div>
    <div class="mt-8" style="text-align: right;">
      <span v-if="continuousDay > 0" class="font-13 color-777 mr-3">
        您已经连续签到
        <span class="mx-1" style="color: var(--v-primary-base); font-weight: 600;"> {{ continuousDay }} </span>
        天，明天再来吧
      </span>
      <v-btn class="half-button" color="primary" size="small" :loading="signLoading" :disabled="todaySignIn" @click="handleSignIn">{{ todaySignIn ? '已签到' : '签到' }}</v-btn>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'personal-taskCenter-signIn'})
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { useI18n } from '@/hooks/web/useI18n'
import { getRewardSignInRecordSummary, getRewardSignInConfigList, createRewardSignInRecord } from '@/api/sign'
import integralShow from '@/views/integral/pointsManagement/components/integralShow.vue'
import Snackbar from '@/plugins/snackbar'

const { t } = useI18n()
const userStore = useUserStore()
const integralRef = ref()
// 连续签到天数
const continuousDay = ref(0)
// 今天有无签到
const todaySignIn = ref(false)
// 规则列表
const configList = ref([])
const todayNumber = ref()
const signLoading = ref(false)

// 获取签到规则列表
const getConfigList = async () => {
  const data = await getRewardSignInConfigList()
  configList.value = data
}
getConfigList()

// 获取个人签到统计
const getSummary = async () => {
  const data = await getRewardSignInRecordSummary()
  if (!data) return
  continuousDay.value = data.continuousDay // 连续签到第n天
  todaySignIn.value = data.todaySignIn // 今天有无签到
  todayNumber.value = todaySignIn.value ? continuousDay.value - 1 : continuousDay.value
}
getSummary()

// 签到
const handleSignIn = async () => {
  signLoading.value = true
  await createRewardSignInRecord()
  setTimeout(async () => {
    await getSummary()
    Snackbar.success(t('taskCenter.signInSuccess'))
    signLoading.value = false

    // 更新积分数
    await userStore.getUserAccountInfo()
  }, 1000)
}
</script>

<style lang="scss" scoped>
.color-333 { color: var(--color-333); }
.color-fff { color: #fff; }
.color-777 { color: var(--color-666); }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14; }
.font-16 { font-size: 16px; }
.borderRadius-5 { border-radius: 5px; }
.signInRecord {
  font-size: 14px;
  color: var(--v-primary-base);
  cursor: pointer;
}
</style>