<script setup> import request from '@/utils/request'; import AppHeader from '@/components/AppHeader.vue' import { showToast, showFailToast, showSuccessToast } from 'vant' const checkinDays = ref(0) const signInDates = ref([]) const loading = ref(false) const showInfo = ref(false) const userData = ref({}) async function getUserInfo() { const res = await request.get('/system/user/') userData.value = res } getUserInfo() const cardinfo = ref([]) function getCardList() { request.get('/ops/bankcard/list?cardtype=2').then((res) => { res.rows?.length > 0 && (cardinfo.value = res.rows[0]) }) } getCardList() // 获取签到信息 async function getSignInInfo() { try { const res = await request.get('/system/user/getCheckinDaysAndDate') checkinDays.value = res.checkinDays signInDates.value = res?.list?.map(date => new Date(date).getTime()) || [] } catch (error) { console.error('获取签到信息失败:', error) showFailToast(error.msg || '获取签到信息失败') } finally { showInfo.value = true } } // 判断是否已签到 const isSignedToday = computed(() => { if (!signInDates.value.length) return false const today = new Date() return signInDates.value.some((date) => { const signDate = new Date(date) return signDate.getFullYear() === today.getFullYear() && signDate.getMonth() === today.getMonth() && signDate.getDate() === today.getDate() }) }) // 判断某天是否可签到 function canSignDay(day) { if (day === 7 && checkinDays.value >= 6 && !isSignedToday.value) { return true } return day === checkinDays.value + 1 && !isSignedToday.value } // 判断某天是否已签到 function isSignedDay(day) { if (day === 7) { return false } return day <= checkinDays.value } // 处理签到格子点击 function handleDayClick() { if (userData.value.data != 'true') { showFailToast('请先完成实名认证') return false } signIn() } // 签到方法 async function signIn() { if (loading.value) return loading.value = true try { const res = await request.put('/system/user/sign', {}, true) if (res.code == 200) { showSuccessToast('签到成功') getSignInInfo() } else { showFailToast(res.msg || '签到失败') } } catch (error) { showFailToast(error.msg || '签到失败,请稍后重试') } finally { loading.value = false } } function gotx(balance, type, title) { if (balance && balance > 0) { if (!cardinfo.value?.bankNum) { showFailToast('请先启用银行卡') setTimeout(() => { window.location.href = '/index.html' }, 1000) } else { showSuccessToast('以成功提现到专属银行卡') } // navigateTo(`/user/tixian?balance=${balance}&type=${type}&title=${title}`) } else { showFailToast('余额不足') } } // 页面加载时获取签到信息 onMounted(() => { getSignInInfo() }) </script> <template> <AppHeader title="签到中心" /> <div class="sign-container"> <!-- 顶部奖励展示区 --> <div class="bonus-header"> <div class="left"> <div class="bonus-title"> 玩转签到中心赚钱更容易 </div> <div class="bonus-desc" style="visibility: hidden;"> <span>可用奖励金</span> <var-icon style="margin-left: 6px;" color="#000" :size="22" name="chevron-right" /> </div> <div class="bonus-amount"> <img class="gif" src="@/static/signin/gif.png" alt=""> <span class="amount">{{ userData.q1 || 0 }}</span> <span class="unit">元</span> <button class="withdraw-btn" @click="gotx(userData.q1, '1', '银行卡储蓄金')"> 立即提现 </button> </div> </div> <img class="gif1" src="@/static/signin/gif1.png" alt=""> </div> <div class="daily-bonusw-warp"> <!-- <div class="daily-text">每日签到、享公司红利奖励 1-9元</div> <div class="bonus-desc">再签到6天可得<span style="color: #d22d01;">800</span>元奖励金</div> --> <div class="daily-text"> 当前已连续签到{{ checkinDays }}天 </div> <!-- 签到日历格子 --> <div class="sign-calendar"> <div v-for="day in 7" :key="day" class="calendar-item" :class="[ { signed: isSignedDay(day) }, { current: canSignDay(day) }, { disabled: day > checkinDays + 1 }, ]" @click="handleDayClick(day)"> <div class="day-text"> 第{{ day }}天 </div> <img class="jl" src="@/static/signin/jl.png" alt=""> <div class="bonus-text"> {{ day == 1 ? 500 : day == 2 ? 800 : day == 3 ? 2000 : day == 4 ? 6000 : day == 5 ? 12000 : day == 6 ? 20000 : day >= 7 ? 20000 : 0 }} </div> </div> </div> </div> <!-- 每日签到奖励提示 --> <!-- 签到规则 --> <div class="sign-rules"> <div class="rules-title"> 签到规则 </div> <div class="rules-content"> <p>1.签到采用连续签到模式中断一天重新来过,连续签到天数越多,奖励越丰厚;</p> <p>2.最终解释权归"一带一路"世界银行平台所有</p> </div> </div> </div> </template> <style lang="scss" scoped> .sign-container { background: linear-gradient(to bottom, #fff3e6, #feeac9); min-height: 100vh; padding: 74px 0 0 0; } .bonus-header { display: flex; justify-content: space-between; margin-left: 34px; .gif { width: 28px; height: 25px; } .gif1 { width: 125px; position: absolute; top: 76px; right: 0; height: 83px; } .bonus-title { font-weight: 500; font-size: 15px; color: #161616; line-height: 17px; } .bonus-desc { margin-top: 26px; display: flex; font-weight: 500; font-size: 18px; color: #161616; line-height: 20px; } .bonus-amount { margin-top: 13px; display: flex; align-items: center; .amount { margin: 0 5px; font-weight: 400; font-size: 22px; color: #161616; line-height: 25px; } .unit { font-weight: 500; font-size: 13px; color: #161616; } .withdraw-btn { margin-left: auto; background-color: #d22d01; font-weight: 500; font-size: 12px; color: #f3e162; line-height: 13px; padding: 4px 10px; border-radius: 10px; margin-left: 21px; border: none; } } } .daily-bonusw-warp { background: url('@/static/signin/bg1.png') no-repeat; background-size: 100% 100%; margin: 30px 14px 0; padding: 16px 0; .daily-text { font-weight: 400; font-size: 12px; color: #ffffff; margin-left: 26px; margin-top: -6px; } .bonus-desc { font-weight: 400; font-size: 16px; color: #292929; margin-top: 29px; margin-left: 26px; display: flex; align-items: center; } .sign-calendar { display: flex; flex-wrap: wrap; margin: 20px 26px 0; text-align: center; .calendar-item { padding: 8px 0; background-color: #ebeae5; margin-bottom: 10px; margin-right: 10px; width: calc(25% - 10px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; cursor: pointer; &:nth-child(4n) { margin-right: 0; } .day-text { font-weight: 500; font-size: 14px; color: #8c8c8c; line-height: 16px; } .bonus-text { font-weight: 500; font-size: 12px; color: #8c8c8c; line-height: 12px; } .jl { width: 19px; height: 19px; margin: 5px 0; } &.signed { background-color: #d22d01; cursor: not-allowed; .day-text, .bonus-text { color: #fff; } } &.current { background-color: #fff; cursor: pointer; .day-text, .bonus-text { color: #d22d01; } } &.disabled { opacity: 0.5; cursor: not-allowed; .day-text, .bonus-text { color: #8c8c8c; } } } } } .sign-rules { padding: 39px 34px 80px; .rules-title { font-weight: bold; font-size: 18px; color: #000000; line-height: 23px; } .rules-content { margin-top: 15px; font-weight: 400; font-size: 12px; color: #000000; line-height: 17px; } } </style>