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

<!-- 签到 -->
<template>
  <div>
    <integralShow></integralShow>
    <div class="text-end signInRecord mt-3" @click="handleRecord">
      {{ $t('taskCenter.signInRecord') }}
      <v-icon>mdi-chevron-right</v-icon>
    </div>
    <div class="d-flex justify-center mt-3">
      <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 v-if="index < continuousDay" t="1719224910498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28939" width="36" height="36"><path d="M97.8944 511.7952c0 228.5568 185.1392 413.696 413.696 413.696s413.696-185.1392 413.696-413.696-185.1392-413.696-413.696-413.696c-109.7728 0-214.8352 43.6224-292.4544 121.2416-77.6192 77.4144-121.2416 182.6816-121.2416 292.4544z m0 0" fill="#FBE945" p-id="28940"></path><path d="M804.2496 219.3408L219.3408 804.4544c162.2016 158.1056 421.2736 156.4672 581.2224-3.6864 160.1536-160.1536 161.5872-419.2256 3.6864-581.4272z m0 0" fill="#F2D636" p-id="28941"></path><path d="M210.944 511.7952c0 121.6512 73.3184 231.2192 185.5488 277.9136 112.4352 46.4896 241.664 20.8896 327.68-65.1264s111.8208-215.4496 65.1264-327.68c-46.4896-112.4352-156.2624-185.5488-277.9136-185.5488-165.888-0.4096-300.4416 134.3488-300.4416 300.4416z m0 0" fill="#FBB11B" p-id="28942"></path><path d="M717.824 293.2736c-118.1696-112.0256-303.9232-109.568-419.0208 5.5296-115.0976 115.0976-117.5552 301.056-5.5296 419.0208l424.5504-424.5504z m0 0" fill="#FDC72F" p-id="28943"></path><path d="M709.8368 351.8464c-2.8672 9.8304-64.7168 61.44-94.0032 100.5568-29.2864 39.1168-67.584 106.9056-91.136 161.792-16.9984 39.7312-17.6128 45.056-35.84 54.8864-18.2272 9.8304-53.248 16.7936-60.2112 11.264-6.9632-5.5296-11.6736-36.0448-38.2976-80.896s-42.8032-48.5376-73.5232-70.0416c-14.336-9.8304 27.2384-33.9968 50.9952-38.0928 23.7568-4.3008 44.4416 10.0352 64.1024 30.9248 19.6608 20.8896 33.1776 49.5616 40.3456 50.9952 6.9632 1.4336 21.0944-46.4896 60.6208-103.2192 35.6352-50.9952 94.6176-115.9168 122.6752-124.3136 27.648-8.192 56.9344-3.6864 54.272 6.144z" fill="#FBE945" p-id="28944"></path><path d="M456.2944 554.8032c6.9632 10.0352 12.0832 17.8176 15.7696 18.432 5.9392 1.2288 16.9984-33.5872 44.8512-79.0528l151.552-151.552c23.1424-3.6864 43.8272 0.8192 41.3696 9.0112-2.8672 9.8304-64.7168 61.44-94.0032 100.5568-29.2864 39.1168-67.584 106.9056-91.136 161.792-16.9984 39.7312-17.6128 45.056-35.84 54.8864-18.2272 9.8304-53.248 16.7936-60.2112 11.264-6.144-4.9152-10.6496-29.9008-30.5152-67.1744l58.1632-58.1632z" fill="#F2D636" p-id="28945"></path></svg>
            <svg v-else t="1719224961216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29154" width="38" height="38"><path d="M98.0992 511.7952c0 228.5568 185.1392 413.696 413.696 413.696s413.696-185.1392 413.696-413.696-185.1392-413.696-413.696-413.696c-109.7728 0-214.8352 43.6224-292.4544 121.2416-77.6192 77.4144-121.2416 182.6816-121.2416 292.4544z m0 0" fill="#FBE945" p-id="29155"></path><path d="M804.2496 219.3408L219.3408 804.4544c162.2016 158.1056 421.2736 156.4672 581.2224-3.6864 160.1536-160.1536 161.792-419.2256 3.6864-581.4272z m0 0" fill="#F2D636" p-id="29156"></path><path d="M210.944 511.7952c0 121.6512 73.3184 231.2192 185.5488 277.9136 112.4352 46.4896 241.664 20.8896 327.68-65.1264s111.8208-215.4496 65.1264-327.68c-46.4896-112.4352-156.2624-185.5488-277.9136-185.5488C345.7024 210.944 210.944 345.7024 210.944 511.7952z m0 0" fill="#FBB11B" p-id="29157"></path><path d="M717.824 293.2736c-118.1696-112.0256-303.9232-109.568-419.0208 5.5296-115.0976 115.0976-117.5552 301.056-5.5296 419.0208l424.5504-424.5504z m0 0" fill="#FDC72F" p-id="29158"></path><path d="M648.3968 566.4768c23.7568 125.1328-22.9376 157.696-138.4448 97.8944-118.1696 64.3072-163.0208 32.5632-136.6016-93.3888-96.0512-85.4016-77.6192-137.4208 54.6816-156.0576 58.1632-116.3264 114.688-117.1456 170.1888-2.6624 131.2768 14.1312 148.0704 65.3312 50.176 154.2144z m0 0" fill="#F4EA2A" p-id="29159"></path><path d="M598.2208 412.2624c131.2768 14.1312 148.0704 65.1264 50.176 154.2144 23.7568 125.1328-22.9376 157.696-138.4448 97.8944-90.112 49.152-137.6256 42.1888-143.36-19.8656l231.6288-232.2432z m50.176 154.2144" fill="#F2D636" p-id="29160"></path></svg>
          </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>

    <!-- 签到记录 -->
    <!-- <v-navigation-drawer v-model="drawer" location="right" temporary width="600" class="drawer">
      <v-data-table
        :items="recordList"
        :headers="headers"
        disable-sort
        height="80vh"
      >
        <template #bottom></template>
      </v-data-table>
      <CtPagination
        v-if="total > 0"
        :total="total"
        :page="pageNo"
        :limit="pageSize"
        @handleChange="handleChangePage"
      ></CtPagination>
    </v-navigation-drawer> -->
  </div>
</template>

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

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

// 签到记录
// const total = ref(0)
// const drawer = ref(false)
// const pageSize = ref(10)
// const pageNo = ref(1)
// const recordList = ref([])
// const headers = [
//   { title: t('taskCenter.signInDays'), key: 'day' },
//   { title: t('taskCenter.points'), key: 'point' },
//   { title: t('taskCenter.createTime'), key: 'createTime', value: item => timesTampChange(item.createTime)}
// ]

// 获取签到规则列表
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
  }, 1000)
}

// 签到记录
// const getRecordList = async () => {
//   const res = await getRewardSignInRecordPage(pageNo.value, pageSize.value)
//   recordList.value = res.list
//   total.value = res.total
// }

const handleRecord = () => {
  // drawer.value = true
  // pageNo.value = 1
  // recordList.value = []
  // getRecordList()
  window.open('/integral/pointsManagement')
}

// const handleChangePage = (e) => {
//   pageNo.value = e
//   getRecordList()
// }
</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>