carInfo.tsx - AiToEarn

carInfo.tsx

1	/*
2	* @Author: nevin
3	* @Date: 2025-02-27 20:44:31
4	* @LastEditTime: 2025-03-24 14:28:03
5	* @LastEditors: nevin
6	* @Description: 挂车
7	*/
8	import { Button, Modal, message } from 'antd';
9	import { Task, TaskProduct } from '@@/types/task';
10	import { forwardRef, useImperativeHandle, useState } from 'react';
11	import { taskApi } from '@/api/task';
12	import styles from './carInfo.module.scss';
13
14	const FILE_BASE_URL = import.meta.env.VITE_APP_FILE_HOST;
15
16	export interface TaskInfoRef {
17	init: (pubRecord: Task<TaskProduct>) => Promise<void>;
18	}
19
20	interface TaskInfoProps {
21	onTaskApplied?: () => void; // 新增
22	}
23
24	const Com = forwardRef<TaskInfoRef, TaskInfoProps>((props: any, ref) => {
25	const [isModalOpen, setIsModalOpen] = useState(false);
26	const [taskInfo, setTaskInfo] = useState<Task<TaskProduct> \| null>();
27
28	// 从props中获取刷新函数
29	const { onTaskApplied } = props;
30
31	async function init(inTaskInfo: Task<TaskProduct>) {
32	setTaskInfo(inTaskInfo);
33	setIsModalOpen(true);
34	}
35
36	useImperativeHandle(ref, () => ({
37	init: init,
38	}));
39
40	/**
41	* 接受任务
42	*/
43	async function taskApply() {}
44
45	const handleCancel = () => {
46	setIsModalOpen(false);
47	};
48
49	// 计算佣金比例
50	const calculateCommissionRate = (price: number, reward: number) => {
51	if (!price \|\| price === 0) return 0;
52	return Math.round((reward / price) * 100);
53	};
54
55	return (
56	<>
57	<Modal
58	title={null}
59	open={isModalOpen}
60	onCancel={handleCancel}
61	footer={null}
62	width={800}
63	className={styles.taskDetailModal}
64	>
65	{taskInfo ? (
66	<div className={styles.taskDetailContainer}>
67	<h2 className={styles.taskTitle}>{taskInfo.title}</h2>
68
69	<div className={styles.taskContent}>
70	<div className={styles.taskImageContainer}>
71	<img
72	src={`${FILE_BASE_URL}${taskInfo.imageUrl}`}
73	alt={taskInfo.title}
74	className={styles.taskImage}
75	/>
76	<div className={styles.taskImageTags}>
77	<div
78	className={styles.richTextTag}
79	dangerouslySetInnerHTML={{
80	__html: taskInfo.description \|\| '',
81	}}
82	/>
83	</div>
84	</div>
85
86	<div className={styles.taskInfoContainer}>
87	<div className={styles.infoItem}>
88	<span className={styles.infoLabel}>带货等级：</span>
89	<span className={styles.infoValue}>LV03及以上</span>
90	</div>
91
92	<div className={styles.infoItem}>
93	<span className={styles.infoLabel}>报名人数：</span>
94	<span className={styles.infoValue}>
95	{taskInfo.maxRecruits \|\| 10000}
96	</span>
97	</div>
98
99	<div className={styles.infoItem}>
100	<span className={styles.infoLabel}>挂购物车：</span>
101	<span className={styles.infoValue}>是</span>
102	</div>
103
104	<div className={styles.infoItem}>
105	<span className={styles.infoLabel}>合作要求：</span>
106	<span className={styles.infoValue}>
107	发布需挂车，可使用已有素材或自由素材创作发布
108	</span>
109	</div>
110
111	<div className={styles.infoItem}>
112	<span className={styles.infoLabel}>商品售价：</span>
113	<span className={styles.infoPrice}>
114	¥{taskInfo.dataInfo?.price \|\| 0}
115	</span>
116	</div>
117
118	<div className={styles.infoItem}>
119	<span className={styles.infoLabel}>分佣比例：</span>
120	<span className={styles.infoValue}>
121	{calculateCommissionRate(
122	taskInfo.dataInfo?.price \|\| 0,
123	taskInfo.reward \|\| 0,
124	)}
125	%
126	</span>
127	</div>
128
129	<div className={styles.infoItem}>
130	<span className={styles.infoLabel}>每单预估收益：</span>
131	<span className={styles.infoReward}>
132	¥{taskInfo.reward?.toFixed(2) \|\| 0}
133	</span>
134	</div>
135	</div>
136	</div>
137
138	<div className={styles.taskFooter}>
139	<Button
140	key="back"
141	onClick={handleCancel}
142	className={styles.cancelButton}
143	>
144	取消
145	</Button>
146	<Button
147	key="submit"
148	type="primary"
149	onClick={taskApply}
150	className={styles.applyButton}
151	>
152	报名
153	</Button>
154	</div>
155	</div>
156	) : (
157	<div className={styles.noDataContainer}>暂无任务信息</div>
158	)}
159	</Modal>
160	</>
161	);
162	});
163
164	export default Com;
165

165 lines Plain Text