Files

223 lines
5.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
@name: index
@author: kahu4
@date: 2024-01-18 19:37
@descriptionindex
@update: 2024-01-18 19:37
-->
<script setup>
import './index.scss'
import Header from '@/components/Header/index.vue'
import { useScroll } from "@/hooks/useScroll";
import { onPageScroll } from "@dcloudio/uni-app";
import { accountSignInBg, accountSignOk, accountSignStar, accountSignSuccessBg } from "@/utils/images";
import { onMounted, ref } from "vue";
import { getIntegralRule, getSignInInfo, signIn } from "@/api/account/signIn";
import { useInterface } from "@/hooks/useInterface";
import { useMainStore } from "@/store/store";
import { storeToRefs } from "pinia";
import Popup from "@/components/Popup.vue";
import moment from "moment";
const {scrollTop} = useScroll();
onPageScroll(() => {
})
const mainStore = useMainStore()
const {user} = storeToRefs(mainStore);
const {toast} = useInterface()
// 签到信息
const signInInfo = ref({
signInDays: 0,
todaySignIn: false,
signInRecordList: []
})
const loading = ref(false)
/**
* 获取签到信息
* @return {Promise<void>}
*/
async function doGetSignInInfo() {
try {
loading.value = true
signInInfo.value = await getSignInInfo();
await doGetIntegralRule()
// 处理签到日历
} finally {
loading.value = false
}
}
const successIntegral = ref(0)
const successPopupRef = ref()
function openSuccessPopup() {
successPopupRef.value.show()
}
async function closeSuccessPopup() {
await doGetSignInInfo()
successIntegral.value = 0
successPopupRef.value.close()
}
/**
* 签到
* @return {Promise<void>}
*/
async function doSignIn() {
if (loading.value) return
if (signInInfo.value.todaySignIn) return toast({title: '今日已签到'})
try {
loading.value = true
successIntegral.value = await signIn();
await mainStore.getUserInfo()
openSuccessPopup()
} finally {
loading.value = false
}
}
const taskList = ref([])
/**
* 获取每日任务
* @return {Promise<void>}
*/
async function doGetIntegralRule() {
taskList.value = await getIntegralRule();
}
onMounted(() => {
doGetSignInInfo()
})
</script>
<template>
<Header
:scroll-top="scrollTop"
system-bar-area-bg="#fff"
header-area-bg="#fff"> 签到
</Header>
<view class="sign-in">
<!-- 背景 -->
<view
class="bg"
:style="{backgroundImage:`url(${accountSignInBg})`}"></view>
<!-- 内容 -->
<view class="sign-in__inner">
<view class="bg-mask">
<!-- 积分显示 -->
<view class="header-row flex flex-ai__end">
{{ user.integral || '0.00' }}
<text class="sub">积分</text>
</view>
<!-- 签到显示 -->
<view class="sign-btn-row">
<view class="title">
您已经连续签到
<text class="primary-color"> {{ signInInfo.signInDays }}</text>
</view>
<view
@click="doSignIn"
:class="{'disable':signInInfo.todaySignIn}"
class="btn">
{{ signInInfo.todaySignIn ? '已签到' : '立即签到' }}
</view>
</view>
<!-- 签到日历 -->
<view class="sign-calendar">
<view class="sign-calendar__inner">
<template
v-for="date in signInInfo.signInRecordList"
:key="date.timestamp">
<view
class="item flex flex-column flex-ai__center flex-jc__center "
:class="{none:!date.isSign}">
<view class="item-box flex flex-column flex-ai__center flex-jc__center">
<text>+{{ date.integral }}</text>
<image :src="date.isSign?accountSignOk:accountSignStar" />
</view>
{{ moment(date.createTime).format("MM-DD") }}
</view>
</template>
</view>
</view>
</view>
<!-- 每日任务Card -->
<view class="sign-card">
<view class="title"> 每日任务</view>
<view class="sign-list">
<template
v-for="task in taskList"
:key="task.id">
<view class="row flex flex-ai__center">
<image
class="row-icon"
:src="task.iconUrl" />
<view class="row-info flex flex-ai__center flex-jc__sb">
<view class="left">
<view class="name">{{ task.typeName }}</view>
<view class="sub flex flex-ai__center">
</view>
</view>
<view class="btn flex flex-ai__center">
<image :src="accountSignStar" />
+{{ task.integral }}
</view>
</view>
</view>
</template>
</view>
</view>
</view>
</view>
<Popup
ref="successPopupRef"
mode="center"
:show-closeable="false">
<view
class="success-card"
:style="{backgroundImage:`url(${accountSignSuccessBg})`}">
<view class="inner">
<view
class="count-row flex">
<view class="count">{{ successIntegral }}</view>
积分
</view>
<view class="info">
签到成功恭喜您获得
</view>
<view
class="button animation-button"
@click="closeSuccessPopup">
我知道了
</view>
<view class="tips">
连续签到奖励更丰富
</view>
</view>
</view>
</Popup>
</template>
<style
scope
lang="scss">
:deep(.uni-popup__wrapper) {
background: transparent !important;
}
</style>