index.tsx - AiToEarn

index.tsx

1	import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
2	import { signInApi, SignInType } from '@/api/signIn';
3	import { Button, Progress, message } from 'antd';
4	import { CheckCircleFilled, ClockCircleOutlined } from '@ant-design/icons';
5	import styles from './SignInCard.module.scss';
6	import treeSvg from '@/assets/svgs/tree.svg';
7	import { useNavigate } from 'react-router-dom';
8
9	const SignInCard = forwardRef((props, ref) => {
10	const [loading, setLoading] = useState(false);
11	const [signInList, setSignInList] = useState<any[]>([]);
12	const [thisWeekSigned, setThisWeekSigned] = useState(false);
13	const [continueWeeks, setContinueWeeks] = useState(0);
14
15	const navigate = useNavigate();
16
17	// 获取打卡列表
18	const fetchSignInList = async () => {
19	setLoading(true);
20	try {
21	const res = await signInApi.getSignInList({ type: SignInType.PUL_VIDEO });
22	const list = res?.items \|\| [];
23	console.log('dak',list)
24	setSignInList(list);
25
26	// 计算本周是否已打卡和连续周数
27	const now = new Date();
28	const getWeek = (date: Date) => {
29	const firstDay = new Date(date.getFullYear(), 0, 1);
30	const dayOfYear = Math.floor((date.getTime() - firstDay.getTime()) / 86400000) + 1;
31	return Math.ceil(dayOfYear / 7);
32	};
33	const thisYear = now.getFullYear();
34	const thisWeek = getWeek(now);
35
36	let signed = false;
37	let maxContinue = 0;
38	let curContinue = 0;
39	let lastYear = thisYear, lastWeek = thisWeek;
40
41	for (const item of list) {
42	const d = new Date(item.createTime);
43	const y = d.getFullYear();
44	const w = getWeek(d);
45	if (y === thisYear && w === thisWeek) signed = true;
46	if ((y === lastYear && w === lastWeek) \|\| (y === lastYear && w === lastWeek - 1) \|\| (y === lastYear - 1 && lastWeek === 1 && w === 52)) {
47	curContinue++;
48	lastYear = y;
49	lastWeek = w - 1;
50	} else {
51	break;
52	}
53	}
54	maxContinue = curContinue;
55	setThisWeekSigned(signed);
56	setContinueWeeks(maxContinue);
57	} catch (e) {
58	message.error('获取打卡信息失败');
59	}
60	setLoading(false);
61	};
62
63	useImperativeHandle(ref, () => ({
64	fetchSignInList,
65	}));
66
67	// useEffect(() => {
68	// fetchSignInList();
69	// }, []);
70
71	// 打卡
72	const handleSignIn = async () => {
73
74	navigate('/publish');
75
76	return
77
78	setLoading(true);
79	try {
80	await signInApi.createSignInRecord();
81	message.success('打卡成功！');
82	fetchSignInList();
83	} catch {
84	message.error('打卡失败');
85	}
86	setLoading(false);
87	};
88
89	const totalWeeks = 7;
90	const diff = totalWeeks - continueWeeks;
91
92	return (
93	<div className={styles.signInCard}>
94	<div className={styles.icon}>
95	<img
96	src={treeSvg}
97	alt="tree"
98	style={{
99	width: 48,
100	filter: thisWeekSigned ? 'none' : 'grayscale(100%)',
101	opacity: thisWeekSigned ? 1 : 0.6
102	}}
103	/>
104	</div>
105	<div className={styles.title}>每周使用一键发布视频即可为小树苗浇水</div>
106	<div className={styles.status}>
107	{thisWeekSigned ? (
108	<div className={styles.signed}>
109	<CheckCircleFilled style={{ color: '#52c41a', marginRight: 4 }} /> 本周已完成浇水
110	</div>
111	) : (
112	<div className={styles.notSigned}>
113	<ClockCircleOutlined style={{ color: '#aaa', marginRight: 4 }} /> 本周待浇水
114	<div style={{ color: 'red', marginTop: 4, fontSize: 13 }}>如果未浇水，小树苗就会枯死</div>
115	</div>
116	)}
117	</div>
118	<div className={styles.progress}>
119	<span>连续浇水进度</span>
120	<span style={{ float: 'right' }}>{continueWeeks}/{totalWeeks}周</span>
121	<Progress percent={Math.round((continueWeeks / totalWeeks) * 100)} showInfo={false} style={{ margin: '4px 0' }} />
122	</div>
123	<div className={styles.desc}>
124	你已连续浇水 <b>{continueWeeks}</b> 周<br />
125	距离获得「快速提现」权益，仅差 <b>{diff}</b> 周
126	</div>
127	<Button
128	type="primary"
129	block
130	// disabled={thisWeekSigned}
131	loading={loading}
132	onClick={handleSignIn}
133	style={{ marginTop: 16 }}
134	>
135	立即发布视频
136	</Button>
137	</div>
138	);
139	});
140
141	export default SignInCard;

141 lines Plain Text