阳菜,放晴! | 7e1e3a5 | 2025-06-05 23:00:51 +0800 | [diff] [blame^] | 1 | import instance from '@/utils/axios'; |
| 2 | import React, { useState } from 'react'; |
| 3 | import styles from './upload.module.css'; |
| 4 | import { Upload } from '@/api/upload'; |
| 5 | import { useNavigate } from 'react-router-dom'; // 用于跳转 |
| 6 | |
| 7 | const PostDetails = () => { |
| 8 | const [postTitle, setPostTitle] = useState(''); |
| 9 | const [postType, setPostType] = useState(''); |
| 10 | const [postContent, setPostContent] = useState(''); |
| 11 | const [isChecked, setIsChecked] = useState(false); |
| 12 | |
| 13 | const navigate = useNavigate(); |
| 14 | |
| 15 | const handleSubmit = async () => { |
| 16 | if (!postTitle.trim() || !postType || !postContent.trim()) { |
| 17 | alert('请填写完整内容(资源名、类型、内容介绍)'); |
| 18 | return; |
| 19 | } |
| 20 | |
| 21 | if (!isChecked) { |
| 22 | alert('请先确认您已知晓以上内容'); |
| 23 | return; |
| 24 | } |
| 25 | |
| 26 | const payload = { |
| 27 | post: { |
| 28 | postId: 0, |
| 29 | userId: 0, |
| 30 | postTitle, |
| 31 | postContent, |
| 32 | createdAt: Date.now(), |
| 33 | postType, |
| 34 | viewCount: 0, |
| 35 | hotScore: 5, |
| 36 | lastCalculated: Date.now() |
| 37 | }, |
| 38 | tagIds: [0] |
| 39 | }; |
| 40 | |
| 41 | try { |
| 42 | const res = await instance.post(Upload, payload); |
| 43 | |
| 44 | console.log('mock返回内容:', res.code); |
| 45 | |
| 46 | // 判断返回内容是否成功(根据你 mock 接口返回的 code 字段) |
| 47 | if (res.code !== 0) throw new Error('发布失败'); |
| 48 | |
| 49 | alert('发布成功!'); |
| 50 | navigate(-1); // 返回上一页(homepage) |
| 51 | } catch (error) { |
| 52 | alert('发布失败,请稍后重试'); |
| 53 | console.error(error); |
| 54 | } |
| 55 | }; |
| 56 | |
| 57 | return ( |
| 58 | <div className={styles.container}> |
| 59 | <div className={styles.formGroup}> |
| 60 | <label>资源名:</label> |
| 61 | <input |
| 62 | type="text" |
| 63 | value={postTitle} |
| 64 | placeholder="请输入文本" |
| 65 | onChange={(e) => setPostTitle(e.target.value)} |
| 66 | className={styles.input} |
| 67 | /> |
| 68 | </div> |
| 69 | |
| 70 | <div className={styles.formGroup}> |
| 71 | <label>类型选择:</label> |
| 72 | <select |
| 73 | value={postType} |
| 74 | onChange={(e) => setPostType(e.target.value)} |
| 75 | className={styles.select} |
| 76 | > |
| 77 | <option value="">下拉选择</option> |
| 78 | <option value="type1">类型一</option> |
| 79 | <option value="type2">类型二</option> |
| 80 | </select> |
| 81 | </div> |
| 82 | |
| 83 | {/* 暂时移除上传文件表单 */} |
| 84 | {/* <div className={styles.formGroup}> |
| 85 | <label>上传资源:</label> |
| 86 | <input |
| 87 | type="file" |
| 88 | onChange={(e) => setFile(e.target.files?.[0] || null)} |
| 89 | className={styles.upload} |
| 90 | /> |
| 91 | </div> */} |
| 92 | |
| 93 | <div className={styles.formGroup}> |
| 94 | <label>内容介绍:</label> |
| 95 | <textarea |
| 96 | placeholder="请输入内容介绍" |
| 97 | value={postContent} |
| 98 | onChange={(e) => setPostContent(e.target.value)} |
| 99 | maxLength={200} |
| 100 | className={styles.textarea} |
| 101 | /> |
| 102 | <div className={styles.charCount}>{postContent.length}/200</div> |
| 103 | </div> |
| 104 | |
| 105 | <div className={styles.requirement}>【发布内容要求】</div> |
| 106 | |
| 107 | <div className={styles.checkbox}> |
| 108 | <input |
| 109 | type="checkbox" |
| 110 | checked={isChecked} |
| 111 | onChange={() => setIsChecked(!isChecked)} |
| 112 | /> |
| 113 | <span>我已知晓以上内容</span> |
| 114 | </div> |
| 115 | |
| 116 | <button onClick={handleSubmit} className={styles.submitBtn}> |
| 117 | 我已知晓 |
| 118 | </button> |
| 119 | </div> |
| 120 | ); |
| 121 | }; |
| 122 | |
| 123 | export default PostDetails; |