popInfo.tsx - AiToEarn

popInfo.tsx

1	/*
2	* @Author: nevin
3	* @Date: 2025-03-01 19:27:35
4	* @LastEditTime: 2025-03-24 14:26:47
5	* @LastEditors: nevin
6	* @Description: pop
7	*/
8	import { Button, Modal, Tag, Divider, Row, Col, message } from 'antd';
9	import {
10	Task,
11	TaskPromotion,
12	TaskStatusName,
13	TaskTypeName,
14	} from '@@/types/task';
15	import { forwardRef, useImperativeHandle, useState } from 'react';
16	import { taskApi } from '@/api/task';
17	import styles from './popInfo.module.scss';
18	import {
19	ClockCircleOutlined,
20	TeamOutlined,
21	TagOutlined,
22	DollarOutlined,
23	QrcodeOutlined,
24	CopyOutlined,
25	} from '@ant-design/icons';
26
27	const FILE_BASE_URL = import.meta.env.VITE_APP_FILE_HOST;
28
29	export interface TaskInfoRef {
30	init: (pubRecord: Task<TaskPromotion>) => Promise<void>;
31	}
32
33	interface TaskInfoProps {
34	onTaskApplied?: () => void; // 新增
35	}
36
37	const Com = forwardRef<TaskInfoRef, TaskInfoProps>(
38	(
39	props: {
40	onTaskApplied?: () => void; // 添加此行
41	},
42	ref,
43	) => {
44	const [isModalOpen, setIsModalOpen] = useState(false);
45	const [taskInfo, setTaskInfo] = useState<Task<TaskPromotion> \| null>();
46
47	// 从props中获取刷新函数
48	const { onTaskApplied } = props;
49
50	async function init(inTaskInfo: Task<TaskPromotion>) {
51	setTaskInfo(inTaskInfo);
52	setIsModalOpen(true);
53	}
54
55	useImperativeHandle(ref, () => ({
56	init: init,
57	}));
58
59	/**
60	* 接受任务
61	*/
62	async function taskApply() {}
63
64	const handleCancel = () => {
65	setIsModalOpen(false);
66	};
67
68	// 复制任务ID
69	const copyTaskId = (id: string) => {
70	navigator.clipboard
71	.writeText(id)
72	.then(() => {
73	message.success('任务ID已复制到剪贴板');
74	})
75	.catch(() => {
76	message.error('复制失败，请手动复制');
77	});
78	};
79
80	return (
81	<>
82	<Modal
83	title={null}
84	open={isModalOpen}
85	onCancel={handleCancel}
86	footer={null}
87	width={800}
88	className={styles.taskInfoModal}
89	destroyOnClose
90	>
91	{taskInfo ? (
92	<div className={styles.taskInfoContainer}>
93	<div className={styles.taskInfoHeader}>
94	<h2 className={styles.taskTitle}>
95	{taskInfo.title}
96	<span className={styles.taskId}>
97	ID: {taskInfo.id}
98	<CopyOutlined
99	className={styles.copyIcon}
100	onClick={() => copyTaskId(taskInfo.id)}
101	/>
102	</span>
103	</h2>
104	<Tag color="#a66ae4" className={styles.taskTag}>
105	{(taskInfo.dataInfo as any)?.type \|\| '推广APP'}
106	</Tag>
107	</div>
108
109	<div className={styles.taskInfoContent}>
110	<Row gutter={24}>
111	<Col span={12}>
112	<div className={styles.taskImageContainer}>
113	<img
114	src={`${FILE_BASE_URL}${taskInfo.imageUrl}`}
115	alt={taskInfo.title}
116	className={styles.taskImage}
117	/>
118	</div>
119	</Col>
120
121	<Col span={12}>
122	<div className={styles.taskDetails}>
123	<div className={styles.taskDetail}>
124	<TagOutlined className={styles.detailIcon} />
125	<span className={styles.detailLabel}>任务类型:</span>
126	<span className={styles.detailValue}>
127	{TaskTypeName.get(taskInfo.type) \|\| '推广任务'}
128	</span>
129	</div>
130
131	<div className={styles.taskDetail}>
132	<ClockCircleOutlined className={styles.detailIcon} />
133	<span className={styles.detailLabel}>截止时间:</span>
134	<span className={styles.detailValue}>
135	{taskInfo.deadline \|\| '2025/03/17'}
136	</span>
137	</div>
138
139	<div className={styles.taskDetail}>
140	<TeamOutlined className={styles.detailIcon} />
141	<span className={styles.detailLabel}>招募人数:</span>
142	<span className={styles.detailValue}>
143	{taskInfo.maxRecruits \|\| 100}
144	</span>
145	</div>
146
147	<div className={styles.taskDetail}>
148	<DollarOutlined className={styles.detailIcon} />
149	<span className={styles.detailLabel}>任务奖励:</span>
150	<span className={styles.detailValue}>
151	¥{taskInfo.reward \|\| 5}
152	</span>
153	</div>
154
155	<div className={styles.taskDetail}>
156	<QrcodeOutlined className={styles.detailIcon} />
157	<span className={styles.detailLabel}>任务要求:</span>
158	<span className={styles.detailValue}>
159	{taskInfo?.requirement \|\| '扫二维码下载APP并完成注册'}
160	</span>
161	</div>
162	</div>
163	</Col>
164	</Row>
165
166	<Divider />
167
168	<div className={styles.taskDescription}>
169	<h3 className={styles.sectionTitle}>任务描述</h3>
170	<div
171	className={styles.descriptionContent}
172	dangerouslySetInnerHTML={{
173	__html: taskInfo.description \|\| '暂无描述',
174	}}
175	/>
176	</div>
177
178	{taskInfo.dataInfo && (
179	<>
180	<Divider />
181	<div className={styles.appDetails}>
182	<h3 className={styles.sectionTitle}>APP详情</h3>
183	<div className={styles.appInfo}>
184	<div className={styles.appInfoItem}>
185	<span className={styles.appInfoLabel}>APP名称:</span>
186	<span className={styles.appInfoValue}>
187	{taskInfo.dataInfo.title \|\| '未知'}
188	</span>
189	</div>
190
191	<div className={styles.appInfoItem}>
192	<span className={styles.appInfoLabel}>APP描述:</span>
193	<span className={styles.appInfoValue}>
194	{taskInfo.dataInfo.desc \|\| '暂无描述'}
195	</span>
196	</div>
197	</div>
198	</div>
199	</>
200	)}
201	</div>
202
203	<div className={styles.taskInfoFooter}>
204	<div className={styles.taskStatus}>
205	<span className={styles.statusLabel}>任务状态:</span>
206	<Tag color="#a66ae4">
207	{TaskStatusName.get(taskInfo.status) \|\| '进行中'}
208	</Tag>
209	</div>
210
211	<div className={styles.taskActions}>
212	<Button
213	key="back"
214	onClick={handleCancel}
215	className={styles.cancelButton}
216	>
217	取消
218	</Button>
219	{taskInfo.isAccepted ? (
220	<Button
221	key="submit"
222	type="primary"
223	disabled
224	className={styles.applyButton}
225	style={{ backgroundColor: '#a66ae4' }}
226	>
227	已经接受任务
228	</Button>
229	) : (
230	<Button
231	key="submit"
232	type="primary"
233	onClick={taskApply}
234	className={styles.applyButton}
235	style={{ backgroundColor: '#a66ae4' }}
236	>
237	接受任务
238	</Button>
239	)}
240	</div>
241	</div>
242	</div>
243	) : (
244	<div className={styles.noDataContainer}>暂无任务信息</div>
245	)}
246	</Modal>
247	</>
248	);
249	},
250	);
251
252	export default Com;
253

253 lines Plain Text