mirror of
https://github.com/Funkoala14/CreatorCenter_OOIN.git
synced 2025-06-07 22:58:14 +08:00
[dev]upload
This commit is contained in:
parent
46014fb62e
commit
9706970690
@ -1,8 +1,9 @@
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Button, Card, Col, Form, Row } from 'react-bootstrap';
|
||||
import { Accordion, Button, Card, Col, Form, Row, Table } from 'react-bootstrap';
|
||||
import { CloudUpload, Paperclip } from 'lucide-react';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { mockCreators } from '../store/slices/creatorsSlice';
|
||||
|
||||
export default function CampaignScript() {
|
||||
const dispatch = useDispatch();
|
||||
@ -77,6 +78,35 @@ export default function CampaignScript() {
|
||||
Campaigns & Collaborated Creators
|
||||
</div>
|
||||
</div>
|
||||
{activeTab === 'collaborationInfo' && <CollabInfo />}
|
||||
{activeTab === 'campaigns' && <CampaignsCollabCreators />}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
const CollabInfo = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
productSellingPoint: '吸力强、有效除菌、香薰片功能、价格更优惠、两种颜色',
|
||||
exampleVideos: 'https://mcnmza4kafoj.feishu.cn/drive/folder/HzhWfGvWtlCBqIduwfLczQ9Cnyb',
|
||||
videoPostingSuggestion: '开头引人+产品亮点+CTA呼吁/时长30~50s左右',
|
||||
videoAcceptanceStandard: `1.场景：包括不限于厨房、卫生间、衣柜；在橱柜下方和洗手台下方安装橱柜灯、衣柜等安全及方便需求。场景展示要有黑暗环境对比HOOK。
|
||||
2.红人必须要表达卖点（以下卖点按优先级排列，达人任意选择提到至少三个卖点即可）
|
||||
电池大续航能力强可以（必须提到）（可用字幕展示）
|
||||
容易安装（有磁铁）（必须提到）（要拍出安装过程）
|
||||
开启人体感应模式 （必须提到）（可视觉展示）
|
||||
可充电
|
||||
亮度高，且可调节
|
||||
加分卖点：
|
||||
视频需说明购买理由以及使用感受（例如：老人家晚上更安全，宝妈晚上起床更便捷安全等等购买理由）
|
||||
3.正确的hashtags 以及正确@官方账号`,
|
||||
documentsUpload: [],
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className='product-script-video-req'>
|
||||
<Form className='video-req-form'>
|
||||
<div className='form-header'>Video Posting Requirement</div>
|
||||
@ -86,7 +116,10 @@ export default function CampaignScript() {
|
||||
type='textarea'
|
||||
as='textarea'
|
||||
rows={3}
|
||||
placeholder='吸力强、有效除菌、香薰片功能、价格更优惠、两种颜色'
|
||||
placeholder='Enter the product selling point'
|
||||
name='productSellingPoint'
|
||||
value={formData.productSellingPoint}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
@ -95,7 +128,10 @@ export default function CampaignScript() {
|
||||
type='textarea'
|
||||
as='textarea'
|
||||
rows={3}
|
||||
placeholder='https://mcnmza4kafoj.feishu.cn/drive/folder/HzhWfGvWtlCBqIduwfLczQ9Cnyb'
|
||||
placeholder='Enter the example videos'
|
||||
name='exampleVideos'
|
||||
value={formData.exampleVideos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
@ -104,7 +140,10 @@ export default function CampaignScript() {
|
||||
type='textarea'
|
||||
as='textarea'
|
||||
rows={3}
|
||||
placeholder='开头引人+产品亮点+CTA呼吁/时长30~50s左右'
|
||||
placeholder='Enter the video posting suggestion'
|
||||
name='videoPostingSuggestion'
|
||||
value={formData.videoPostingSuggestion}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
@ -113,16 +152,10 @@ export default function CampaignScript() {
|
||||
type='textarea'
|
||||
as='textarea'
|
||||
rows={3}
|
||||
placeholder='1.场景：包括不限于厨房、卫生间、衣柜；在橱柜下方和洗手台下方安装橱柜灯、衣柜等安全及方便需求。场景展示要有黑暗环境对比HOOK。
|
||||
2.红人必须要表达卖点（以下卖点按优先级排列，达人任意选择提到至少三个卖点即可）
|
||||
电池大续航能力强可以（必须提到）（可用字幕展示）
|
||||
容易安装（有磁铁）（必须提到）（要拍出安装过程）
|
||||
开启人体感应模式 （必须提到）（可视觉展示）
|
||||
可充电
|
||||
亮度高，且可调节
|
||||
加分卖点：
|
||||
视频需说明购买理由以及使用感受（例如：老人家晚上更安全，宝妈晚上起床更便捷安全等等购买理由）
|
||||
3.正确的hashtags 以及正确@官方账号'
|
||||
placeholder='Enter the video acceptance standard'
|
||||
name='videoAcceptanceStandard'
|
||||
value={formData.videoAcceptanceStandard}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className='upload-group'>
|
||||
@ -148,10 +181,75 @@ export default function CampaignScript() {
|
||||
</Form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const CampaignsCollabCreators = () => {
|
||||
const mockData = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'SUNLINK 拍拍灯',
|
||||
creatorList: mockCreators,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'SUNLINK 拍拍灯2',
|
||||
creatorList: mockCreators,
|
||||
},
|
||||
];
|
||||
|
||||
if (mockData.length === 0) {
|
||||
return <div className='text-center'>No campaigns found</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Accordion className='campaigns-collab-creators-list' defaultActiveKey={mockData[0].id}>
|
||||
{mockData.map((item) => (
|
||||
<Accordion.Item eventKey={item.id} key={item.id} className='campaigns-collab-creators-item'>
|
||||
<Accordion.Header>{item.name}</Accordion.Header>
|
||||
<Accordion.Body>
|
||||
<Table responsive hover className='bg-white shadow-xs rounded overflow-hidden'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Creator</th>
|
||||
<th>Category</th>
|
||||
<th>Followers</th>
|
||||
<th>GMV Generated</th>
|
||||
<th>Views Generated</th>
|
||||
<th>Pricing</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{item?.creatorList.length > 0 &&
|
||||
item?.creatorList.map((creator) => (
|
||||
<tr key={creator.id}>
|
||||
<td>
|
||||
<div className='white-space-nowrap'>
|
||||
<img
|
||||
className='creator-avatar'
|
||||
src={creator.avatar}
|
||||
alt={creator.name}
|
||||
/>
|
||||
<span className='creator-name'>{creator.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{creator.category}</td>
|
||||
<td>{creator.followers || '--'}</td>
|
||||
<td>{creator.gmv || '--'}</td>
|
||||
<td>{creator.views || '--'}</td>
|
||||
<td>{creator.pricing || '--'}</td>
|
||||
<td>{creator.status || '--'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Accordion.Body>
|
||||
</Accordion.Item>
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
const FileUpload = () => {
|
||||
const [files, setFiles] = useState([]);
|
||||
|
||||
@ -26,7 +26,7 @@ const mockVideos = [
|
||||
},
|
||||
];
|
||||
// 模拟创作者数据，实际项目中会从API获取
|
||||
const mockCreators = [
|
||||
export const mockCreators = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'name',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user