暂存

src/route/AppElectron/AppEdit.tsx

@@ -2,23 +2,26 @@ import { useState, useEffect } from 'react'
 import EditAppInfo from './components/EditAppInfo/EditAppInfo';
 import EditAppDes from './components/EditAppDes/EditAppDes';
 import EditAppFiles from './components/EditAppFiles/EditAppFiles';
-import {useParams} from 'react-router-dom'
+import EditAppFunction from './components/EditAppFunction/EditAppFunction';
+import EditBelongPeople from './components/EditBelongPeople/EditBelongPeople';
+import AppInfo from './components/AppInfo/AppInfo';
+import { useParams } from 'react-router-dom'
 import './app-edit.css'
 import {
     RightOutlined
 } from '@ant-design/icons';
 export default function AppEdit() {
-     const pathParams = useParams();
+    const pathParams = useParams();
     // 进度
     const [editProcess, setEditProcess] = useState(1);
     useEffect(() => {
         //获取进度
         setEditProcess(1)
         // 带来的id
-        console.log('参数',pathParams);
+        console.log('参数', pathParams);
         // 获取 信息
 
-        
+
     }, []);
     const height = window.innerHeight - 180;
     return (
@@ -132,7 +135,7 @@ export default function AppEdit() {
                     }></EditAppDes>
                 </div>
                 <div style={{
-                    display: editProcess == 3? 'block' : 'none'
+                    display: editProcess == 3 ? 'block' : 'none'
                 }}>
                     <EditAppFiles setEditProcess={
                         (num: number) => {
@@ -140,6 +143,33 @@ export default function AppEdit() {
                         }
                     }></EditAppFiles>
                 </div>
+                <div style={{
+                    display: editProcess == 4 ? 'block' : 'none'
+                }}>
+                    <EditAppFunction setEditProcess={
+                        (num: number) => {
+                            setEditProcess(num)
+                        }
+                    }></EditAppFunction>
+                </div>
+                <div style={{
+                    display: editProcess == 5 ? 'block' : 'none'
+                }}>
+                    <EditBelongPeople setEditProcess={
+                        (num: number) => {
+                            setEditProcess(num)
+                        }
+                    }></EditBelongPeople>
+                </div>
+                <div style={{
+                    display: editProcess == 6 ? 'block' : 'none'
+                }}>
+                    <AppInfo setEditProcess={
+                        (num: number) => {
+                            setEditProcess(num)
+                        }
+                    }></AppInfo>
+                </div>
             </div>
         </div>
     )

src/route/AppElectron/components/AppInfo/AppInfo.tsx

@@ -0,0 +1,166 @@
+import './app-info.css'
+import { Button, message } from "antd"
+export default function AppInfo(props: any) {
+    const height = window.innerHeight - 460;
+    const handleSubmit = () => {
+        message.success('提交成功');
+
+    };
+    return (
+        <div>
+            <div className='bigLine'></div>
+            <div className='appInfoFormBox' style={{
+                height: height,
+                justifyContent: 'flex-start',
+                flexDirection: 'column',
+                
+            }}>
+
+                <div className='appInfoBox'>
+                    <div className='appInfoTitle'>软件基本信息</div>
+                    <div className='appInfoText'>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>APP软件全称 : </div>
+                            <div className='appInfoTextItemText'>嘻嘻嘻嘻</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>软件简称 : </div>
+                            <div className='appInfoTextItemText'>嘻嘻嘻嘻</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>版本号 : </div>
+                            <div className='appInfoTextItemText'>v.10</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>包名 : </div>
+                            <div className='appInfoTextItemText'>com.zhongxinhy.communitymanage</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>运行系统 : </div>
+                            <div className='appInfoTextItemText'>android for phone</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>APP软件分类 : </div>
+                            <div className='appInfoTextItemText'> 应用 - 生活实用</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>软件作品说明 : </div>
+                            <div className='appInfoTextItemText'> 原创</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>开发完成日期 : </div>
+                            <div className='appInfoTextItemText'> 2025-05-05</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>发表状态 : </div>
+                            <div className='appInfoTextItemText'> 未发表</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>开发方式 : </div>
+                            <div className='appInfoTextItemText'> 独立开发</div>
+                        </div>
+                    </div>
+                </div>
+                <div className='appInfoBox'>
+                    <div className='appInfoTitle'>权利说明</div>
+                    <div className='appInfoText'>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>权力取得方式 : </div>
+                            <div className='appInfoTextItemText'>原始</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>权利范围 : </div>
+                            <div className='appInfoTextItemText'>全部权利</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>其他相关文件 : </div>
+                            <div className='appInfoTextItemText'>asdasjdadja.png</div>
+                        </div>
+
+
+                    </div>
+                </div>
+                <div className='appInfoBox'>
+                    <div className='appInfoTitle'>鉴别材料</div>
+                    <div className='appInfoText'>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>源码文档 : </div>
+                            <div className='appInfoTextItemText'>asdkaksd.png</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>软件文档 : </div>
+                            <div className='appInfoTextItemText'>asdkaksd.png</div>
+                        </div>
+
+                    </div>
+                </div>
+                <div className='appInfoBox'>
+                    <div className='appInfoTitle'>功能特点</div>
+                    <div className='appInfoText'>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>硬件环境 : </div>
+                            <div className='appInfoTextItemText'>1GHz以上处理器，1GB以上内存，16GB以上存储空间、安卓智能移动设备</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>软件环境 : </div>
+                            <div className='appInfoTextItemText'>Android操作系统</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>编程语言 : </div>
+                            <div className='appInfoTextItemText'> Java</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>源程序量 : </div>
+                            <div className='appInfoTextItemText'> 672384行左右</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>主要功能 : </div>
+                            <div className='appInfoTextItemText'>隆盛社区APP软件主要功能有考勤打卡、房屋人口管理、工作轨迹、事件上报、事件处理、事件检查、学校管理、重点区域管理、重点场所、实有车辆、用户登录退出等功能。</div>
+                        </div>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>技术特点 : </div>
+                            <div className='appInfoTextItemText'>基于 Android Jetpack 组件构建，利用 ViewModel 和 LiveData 实现数据的高效管理与界面的实时更新，确保用户体验流畅。网络通信方面，运用 Retrofit 框架结合 OkHttp，实现安全快速的数据交互。</div>
+                        </div>
+
+                    </div>
+                </div>
+                <div className='appInfoBox'>
+                    <div className='appInfoTitle'>著作权人</div>
+                    <div className='appInfoText'>
+                        <div className='appInfoTextItem'>
+                            <div className='appInfoTextItemTitle'>著作权人名称 : </div>
+                            <div className='appInfoTextItemText'>嘻嘻嘻嘻嘻嘻嘻哈哈哈哈公司</div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <div className='bigLine'></div>
+            <div className='nextBtnBxo'>
+                <Button
+                    style={{
+                        width: '235px',
+                        height: '46px',
+                        borderRadius: '5px',
+                    }}
+                    onClick={() => {
+                        props.setEditProcess(5)
+                    }}>上一步</Button>
+                <Button
+                    style={{
+                        width: '235px',
+                        height: '46px',
+                        borderRadius: '5px',
+                        marginLeft: '10px',
+                    }}
+                    type='primary'
+                    onClick={() => {
+                        handleSubmit()
+                    }}>提交审核</Button>
+
+            </div>
+
+        </div>
+    )
+}

src/route/AppElectron/components/AppInfo/app-info.css

@@ -0,0 +1,38 @@
+.appInfoBox {
+    width: 100%;
+}
+
+.appInfoTitle {
+    width: 100%;
+    border-bottom: 1px solid #e6e6e6;
+    text-align: center;
+    font-size: 18px;
+    line-height: 50px;
+}
+
+.appInfoText {
+    margin-top: 10px;
+ 
+}
+
+.appInfoTextItem {
+    display: flex;
+    line-height: 32px;
+    font-size: 16px;
+    /* justify-content: flex-start; */
+    margin-left:200px ;
+    color: rgb(97, 97, 97);
+
+
+}
+
+.appInfoTextItemTitle {
+    /* background-color: pink; */
+    width: 120px;
+    text-align: right;
+    margin-right: 8px;
+}
+.appInfoTextItemText{
+    max-width: 60%;
+    /* background-color: pink; */
+}

src/route/AppElectron/components/EditAppDes/EditAppDes.tsx

@@ -1,9 +1,46 @@
-// import { useState } from 'react'
+import { useState } from 'react'
 import { Button, Form, Upload, message, Select } from "antd"
 import { uploadFileUrl } from '../../../../request/request'
 import { UploadOutlined } from '@ant-design/icons';
 export default function EditAppDes(props: any) {
+    const [upArray, setUpArray] = useState<any>([])
+    // 是否禁用上传按钮
+    const [disabled, setDisabled] = useState(false);
+    const validateFileUpload = (_rule: any, value: any) => {
+        if (!value || value.fileList.length === 0) {
+            return Promise.reject('请选择上传文件');
 
+        }
+        const file = value.fileList[0];
+        if (file.status === 'uploading') {
+            // setDisabled(true)
+            return Promise.reject('文件上传中，请稍候');
+        } else if (file.status === 'error') {
+            // setDisabled(true)
+            setUpArray([])
+            return Promise.reject('文件上传失败，请删除后重新上传');
+
+        } else if (file.status !== 'done') {
+            // setDisabled(true)
+            setUpArray([])
+
+            return Promise.reject('文件上传失败，请删除后重新上传');
+        } else if (file.status === 'done') {
+            // setDisabled(true)
+            return Promise.resolve();
+        }
+        return Promise.resolve();
+    };
+    // 定义允许上传的文件格式
+    const ALLOWED_FILE_TYPES = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png'];
+    const beforeUpload = (file: File) => {
+        const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
+        if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
+            message.error(`仅支持 ${ALLOWED_FILE_TYPES.join(', ')} 格式的文件`);
+            return Upload.LIST_IGNORE;
+        }
+        return true;
+    };
     const token = sessionStorage.getItem('token')
     const height = window.innerHeight - 460;
     const [form] = Form.useForm();
@@ -15,26 +52,6 @@ export default function EditAppDes(props: any) {
 
     };
 
-    // // 存储文件上传成功状态
-    // const [fileUploadSuccess, setFileUploadSuccess] = useState(false);
-    // // 上传状态改变时的回调
-    // const handleUploadChange = (info: any) => {
-    //     if (info.file.status === 'done') {
-    //         setFileUploadSuccess(true);
-    //         message.success('文件上传成功');
-    //     } else if (info.file.status === 'error') {
-    //         setFileUploadSuccess(false);
-    //         message.error('文件上传失败，请重试');
-    //     }
-    // };
-    // // 自定义验证规则，确保文件上传成功
-    // const validateFileUpload = (_rule: any, _value: any, callback: (error?: string) => void) => {
-    //     if (fileUploadSuccess) {
-    //         callback();
-    //     } else {
-    //         callback('请确保文件上传成功');
-    //     }
-    // };
     const submitInfo = (values: any) => {
         message.success('提交成功');
         console.log(values);
@@ -57,8 +74,17 @@ export default function EditAppDes(props: any) {
             }}>
 
                 <Form form={form} onFinish={onFinish}
-                    onFinishFailed={() => {
+                    onFinishFailed={(errorInfo: any) => {
-                        message.error('请完善信息')
+                        const errorMessages = errorInfo.errorFields.map((field: any) => field.errors[0]);
+                        if (errorMessages.some((msg: any) => msg.includes('文件上传失败'))) {
+                            message.error('文件上传失败，请重新上传');
+                        } else if (errorMessages.some((msg: any) => msg.includes('文件上传中'))) {
+                            message.error('文件上传中，请稍候');
+                        } else if (errorMessages.some((msg: any) => msg.includes('文件状态异常'))) {
+                            message.error('文件状态异常，请重新上传');
+                        } else {
+                            message.error('请完善信息');
+                        }
                     }}
                 >
                     <div className='appInfoFormInput'>
@@ -118,18 +144,29 @@ export default function EditAppDes(props: any) {
                         <div style={{
                             maxWidth: '500px',
                         }}>
-                            <Form.Item name="file" label="" rules={[{ required: true, message: '请选择上传文件' },
+                            <Form.Item name="file" label=""
-                                // { validator: validateFileUpload }
+                                rules={[
-                            ]}>
+                                    { validator: validateFileUpload }
-                                <Upload
+                                ]}
-                                    name="file"
-                                    action={uploadFileUrl()}
-                                    // onChange={handleUploadChange}
-                                    headers={{ 'Auth': `Bearer ${token}` }}
 
+                            >
+                                <Upload
+                                    action={uploadFileUrl()}
+                                    defaultFileList={upArray}
+
+                                    onChange={({ fileList }) => {
+                                        console.log(fileList);
+
+                                    }}
+                                    onRemove={() => {
+                                        setUpArray([])
+                                        setDisabled(false)
+                                    }}
+                                    headers={{ 'Auth': `Bearer ${token}` }}
+                                    beforeUpload={beforeUpload}
                                 >
-                                    <Button icon={<UploadOutlined />} style={{
+                                    <Button disabled={disabled} icon={<UploadOutlined />} style={{
-                                        marginTop:4
+                                        marginTop: 4
                                     }}>上传附件</Button>
                                 </Upload>
                             </Form.Item>

src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx

@@ -1,9 +1,76 @@
-// import { useState } from 'react'
+import { useState } from 'react'
 import { Button, Form, Upload, message, } from "antd"
 import { uploadFileUrl } from '../../../../request/request'
 import { UploadOutlined } from '@ant-design/icons';
 import './edit-app-files.css'
 export default function EditAppFiles(props: any) {
+    // 定义允许上传的文件格式
+    const ALLOWED_FILE_TYPES = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png'];
+    const beforeUpload = (file: File) => {
+        const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
+        if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
+            message.error(`仅支持 ${ALLOWED_FILE_TYPES.join(', ')} 格式的文件`);
+            return Upload.LIST_IGNORE;
+        }
+        return true;
+    };
+    // 上传文件源码文档列表
+    const [upCodeArray, setUpCodeArray] = useState<any>([])
+    const [codeDis, setCodeDis] = useState(false)
+    const validateCodeFileUpload = (_rule: any, value: any) => {
+        if (!value || value.fileList.length === 0) {
+            return Promise.reject('请选择上传文件');
+
+        }
+        const file = value.fileList[0];
+        if (file.status === 'uploading') {
+            setCodeDis(true)
+            return Promise.reject('文件上传中，请稍候');
+        } else if (file.status === 'error') {
+            setCodeDis(true)
+            setUpCodeArray([])
+            return Promise.reject('文件上传失败，请删除后重新上传');
+
+        } else if (file.status !== 'done') {
+            setCodeDis(true)
+            setUpCodeArray([])
+
+            return Promise.reject('文件上传失败，请删除后重新上传');
+        } else if (file.status === 'done') {
+            setCodeDis(true)
+            return Promise.resolve();
+        }
+        return Promise.resolve();
+    };
+    // 上传文件软件文档列表
+    const [upSoftArray, setUpSoftArray] = useState<any>([])
+    const [softDis, setSoftDis] = useState(false)
+    const validateSoftFileUpload = (_rule: any, value: any) => {
+        if (!value || value.fileList.length === 0) {
+            return Promise.reject('请选择上传文件');
+
+        }
+        const file = value.fileList[0];
+        if (file.status === 'uploading') {
+            setSoftDis(true)
+            return Promise.reject('文件上传中，请稍候');
+        } else if (file.status === 'error') {
+            setSoftDis(true)
+            setUpSoftArray([])
+            return Promise.reject('文件上传失败，请删除后重新上传');
+
+        } else if (file.status !== 'done') {
+            setSoftDis(true)
+            setUpSoftArray([])
+
+            return Promise.reject('文件上传失败，请删除后重新上传');
+        } else if (file.status === 'done') {
+            setSoftDis(true)
+            return Promise.resolve();
+        }
+        return Promise.resolve();
+    };
+
     const token = sessionStorage.getItem('token')
     const height = window.innerHeight - 460;
     const [form] = Form.useForm();
@@ -40,8 +107,17 @@ export default function EditAppFiles(props: any) {
                     height: '80px',
                 }}>
                     <Form form={form} onFinish={onFinish}
-                        onFinishFailed={() => {
+                        onFinishFailed={(errorInfo: any) => {
-                            message.error('请完善信息')
+                            const errorMessages = errorInfo.errorFields.map((field: any) => field.errors[0]);
+                            if (errorMessages.some((msg: any) => msg.includes('文件上传失败'))) {
+                                message.error('文件上传失败，请重新上传');
+                            } else if (errorMessages.some((msg: any) => msg.includes('文件上传中'))) {
+                                message.error('文件上传中，请稍候');
+                            } else if (errorMessages.some((msg: any) => msg.includes('文件状态异常'))) {
+                                message.error('文件状态异常，请重新上传');
+                            } else {
+                                message.error('请完善信息');
+                            }
                         }}
                     >
                         <div style={{
@@ -56,20 +132,32 @@ export default function EditAppFiles(props: any) {
                                 <div className='FormInputTitle' style={{
                                 }}>源码文档：</div>
                                 <div style={{
-                                    maxWidth: '200px',
+                                    width: '220px',
                                 }}>
-                                    <Form.Item name="ym" label="" rules={[{ required: true, message: '请选上传文件' },
+                                    <Form.Item name="ym" label="" rules={[
-                                        // { validator: validateFileUpload }
+                                        // { required: true, message: '请选上传文件' },
+                                        { validator: validateCodeFileUpload }
                                     ]}>
                                         <Upload
                                             name="file"
                                             action={uploadFileUrl()}
+                                            defaultFileList={upCodeArray}
+                                            onChange={({ fileList }) => {
+                                                console.log(fileList);
+                                            }}
+                                            onRemove={() => {
+                                                setUpCodeArray([])
+                                                setCodeDis(false)
+                                            }}
+                                            beforeUpload={beforeUpload}
                                             // onChange={handleUploadChange}
                                             headers={{ 'Auth': `Bearer ${token}` }}
                                         >
                                             <Button icon={<UploadOutlined />} style={{
                                                 marginTop: '4px'
-                                            }}>上传附件</Button>
+                                            }}
+                                                disabled={codeDis}
+                                            >上传附件</Button>
                                         </Upload>
                                     </Form.Item>
                                 </div>
@@ -86,21 +174,33 @@ export default function EditAppFiles(props: any) {
                                 <div className='FormInputTitle' style={{
                                 }}>软件文档：</div>
                                 <div style={{
-                                    maxWidth: '200px',
+                                    width: '220px',
                                 }}>
-                                    <Form.Item name="file" label="" rules={[{ required: true, message: '请上传文件' },
+                                    <Form.Item name="file" label="" rules={[
-                                        // { validator: validateFileUpload }
+                                        // { required: true, message: '请上传文件' },
+                                        { validator: validateSoftFileUpload }
                                     ]}>
                                         <Upload
                                             name="file"
                                             action={uploadFileUrl()}
+                                            defaultFileList={upSoftArray}
+                                            onChange={({ fileList }) => {
+                                                console.log(fileList);
+                                            }}
+                                            onRemove={() => {
+                                                setUpSoftArray([])
+                                                setSoftDis(false)
+                                            }}
+                                            beforeUpload={beforeUpload}
                                             // onChange={handleUploadChange}
                                             headers={{ 'Auth': `Bearer ${token}` }}
 
                                         >
                                             <Button icon={<UploadOutlined />} style={{
                                                 marginTop: '4px'
-                                            }}>上传附件</Button>
+                                            }}
+                                                disabled={softDis}
+                                            >上传附件</Button>
                                         </Upload>
                                     </Form.Item>
                                 </div>

src/route/AppElectron/components/EditAppFunction/EditAppFunction.tsx

@@ -0,0 +1,80 @@
+import { Button } from "antd"
+import './edit-app-function.css'
+export default function EditAppFunction(props: any) {
+    const height = window.innerHeight - 460;
+    const handleSubmit = () => {
+        // console.log(form);
+        props.setEditProcess(5);
+
+
+    };
+    return (
+        <div>
+            <div className='bigLine'></div>
+            <div className='appInfoFormBox' style={{
+                height: height,
+                justifyContent: 'flex-start',
+                flexDirection: 'column',
+                marginLeft: '100px',
+                paddingBottom: '0'
+            }}>
+                <div className='functionBox'>
+                    <div className="functionTitle">硬件环境 : </div>
+                    <div className="functionText">1GHz以上处理器，1GB以上内存，16GB以上存储空间、安卓智能移动设备</div>
+                    <div className='newFunction'>生成</div>
+                </div>
+                <div className='functionBox'>
+                    <div className="functionTitle">软件环境 : </div>
+                    <div className="functionText">Android操作系统</div>
+                    <div className='newFunction'>生成</div>
+                </div>
+                <div className='functionBox'>
+                    <div className="functionTitle">源程序量 : </div>
+                    <div className="functionText"> 672384行左右</div>
+                    <div className='newFunction'>生成</div>
+                </div >
+                <div className='functionBox'>
+                    <div className="functionTitle">编程语言 : </div>
+                    <div className="functionText">JAVA</div>
+                    <div className='newFunction'>生成</div>
+                </div>
+                <div className='functionBox'>
+                    <div className="functionTitle">主要功能 : </div>
+                    <div className="functionText">隆盛社区APP软件主要功能有考勤打卡、房屋人口管理、工作轨迹、事件上报、事件处理、事件检查、学校管理、重点区域管理、重点场所、实有车辆、用户登录退出等功能。</div>
+                    <div className='newFunction'>生成</div>
+                </div>
+                <div className='functionBox'>
+                    <div className="functionTitle"> 技术特点 : </div>
+                    <div className="functionText">基于 Android Jetpack 组件构建，利用 ViewModel 和 LiveData 实现数据的高效管理与界面的实时更新，确保用户体验流畅。网络通信方面，运用 Retrofit 框架结合 OkHttp，实现安全快速的数据交互。</div>
+                    <div className='newFunction'>生成</div>
+                </div>
+                
+            </div>
+
+            <div className='bigLine'></div>
+            <div className='nextBtnBxo'>
+                <Button
+                    style={{
+                        width: '235px',
+                        height: '46px',
+                        borderRadius: '5px',
+                    }}
+                    onClick={() => {
+                        props.setEditProcess(3)
+                    }}>上一步</Button>
+                <Button
+                    style={{
+                        width: '235px',
+                        height: '46px',
+                        borderRadius: '5px',
+                        marginLeft: '10px',
+                    }}
+                    type='primary'
+                    onClick={() => {
+                        handleSubmit()
+                    }}>下一步</Button>
+
+            </div>
+        </div>
+    )
+}

src/route/AppElectron/components/EditAppFunction/edit-app-function.css

@@ -0,0 +1,18 @@
+.functionBox{
+    display: flex;
+    font-size: 16px;
+    line-height: 40px;
+}
+.functionTitle{
+    text-wrap: nowrap;
+    margin-right: 8px;
+}
+.functionText{
+    /* background-color: pink; */
+    max-width: 80%;
+}
+.newFunction{
+    margin-left: 15px;
+    color: #47a2df;
+    cursor: pointer;
+}

src/route/AppElectron/components/EditBelongPeople/EditBelongPeople.tsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import { Button, Form, message, Input, Modal } from "antd"
+import BelongPeople from '../../../../components/BelongPeople/BelongPeople.tsx'
+export default function EditBelongPeople(props: any) {
+    const [form] = Form.useForm();
+    const height = window.innerHeight - 460;
+    // 所属者弹窗
+    const [belongModal, setBelongModal] = useState(false)
+    const [belongPeopleInfo, setBelongPeopleInfo] = useState({
+        authorName: '',
+        authorType: '',
+        authorIdCardType: '',
+        authorIdCard: '',
+        authorCrcAccount: 0,
+        authorId: '',
+        authorProvinceCity: '',
+        authorCrcAccountPassword: '',
+        authorCrcAccountUsername: ''
+    })
+    const handleSubmit = () => {
+        // console.log(form);
+        props.setEditProcess(6);
+        // 调用表单实例的 submit 方法
+        form.submit();
+
+    };
+    const submitInfo = (values: any) => {
+        message.success('提交成功');
+        console.log(values);
+
+
+    }
+    const onFinish = (values: any) => {
+        // 处理表单提交逻辑
+        console.log('表单提交成功', values);
+        submitInfo(values)
+
+    };
+
+    const setValue = (value: string) => {
+        form.setFieldsValue({
+            belongPeople: value
+        })
+    }
+    return (
+        <div>
+            <div className='bigLine'></div>
+            <div className='appInfoFormBox' style={{
+                height: height,
+                justifyContent: 'flex-start',
+                flexDirection: 'column',
+                marginLeft: '100px',
+                paddingBottom: '0'
+            }}>
+                <Form form={form} onFinish={onFinish}
+                    onFinishFailed={() => {
+                        message.error('请完善信息')
+                    }}
+                >
+                    <div style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        width: '900px',
+                        // background: 'pink'
+                    }}>
+                        <div className='appInfoFormInput' style={{
+                            // background: 'pink',
+                            position: 'relative',
+                        }}>
+                            <div className='FormInputTitle'>产权所属者：</div>
+                            <Form.Item name="belongPeople" label="" rules={[{ required: true, message: '请选择/创建知识产权所属者' },
+
+                            ]}>
+                                <Input
+                                    style={{
+                                        width: '300px',
+                                        height: '42px',
+                                    }} placeholder="请选择/创建知识产权所属者" />
+                            </Form.Item>
+                            <div style={{
+                                display: belongPeopleInfo.authorId ? 'none' : 'unset',
+                                position: 'absolute',
+                                width: '300px',
+                                height: '42px',
+                                top: '0',
+                                right: '0',
+                                // background: 'skyblue',
+                                textAlign: 'right',
+                                lineHeight: '42px',
+                                cursor: 'pointer',
+                                paddingRight: '10px',
+                                color: '#1F79FF',
+
+                            }}
+                                onClick={() => {
+                                    setBelongModal(true)
+                                }}
+                            >
+                                选择
+                            </div>
+                            <div style={{
+                                display: belongPeopleInfo.authorId ? 'unset' : 'none',
+                                position: 'absolute',
+                                width: '300px',
+                                height: '42px',
+                                top: '0',
+                                right: '0',
+                                // background: 'skyblue',
+                                textAlign: 'right',
+                                lineHeight: '42px',
+                                paddingRight: '10px',
+                                color: '#1F79FF',
+
+                            }}
+
+                            >
+                                <span
+                                    style={{
+                                        cursor: 'pointer',
+
+                                    }}
+                                    onClick={() => {
+                                        setValue('')
+                                        setBelongPeopleInfo({
+                                            authorName: '',
+                                            authorType: '',
+                                            authorIdCardType: '',
+                                            authorIdCard: '',
+                                            authorCrcAccount: 0,
+                                            authorId: '',
+                                            authorProvinceCity: '',
+                                            authorCrcAccountUsername: '',
+                                            authorCrcAccountPassword: '',
+                                        })
+                                    }}> 取消</span>
+                            </div>
+                        </div>
+
+                    </div>
+
+
+                </Form>
+
+            </div>
+
+            <div className='bigLine'></div>
+            <div className='nextBtnBxo'>
+                <Button
+                    style={{
+                        width: '235px',
+                        height: '46px',
+                        borderRadius: '5px',
+                    }}
+                    onClick={() => {
+                        props.setEditProcess(4)
+                    }}>上一步</Button>
+                <Button
+                    style={{
+                        width: '235px',
+                        height: '46px',
+                        borderRadius: '5px',
+                        marginLeft: '10px',
+                    }}
+                    type='primary'
+                    onClick={() => {
+                        handleSubmit()
+                    }}>下一步</Button>
+
+            </div>
+            <Modal title="选择所属者"
+                destroyOnClose
+                centered
+                open={belongModal}
+                width={1200}
+
+                footer={null}
+                onCancel={() => {
+                    setBelongModal(false)
+
+                }}>
+
+                <BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
+            </Modal>
+        </div>
+    )
+}

src/route/TrademarkMall/TrademarkMall.tsx

@@ -1,7 +1,19 @@
 import React from 'react'
-
+import nothingImg from '../../static/appimgs/nothing.png'
 export default function TrademarkMall() {
+  const height = window.innerHeight - 180;
+  const data = []
   return (
-    <div>开发中ing...</div>
+    <div className='appElectionBox' style={{ height: `${height}px`, overflow: 'auto' }}>
+      {data.length <= 0 ? (<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+
+        <img src={nothingImg} alt="" width={368} height={355} />
+        <div style={{
+          marginTop: 50,
+          fontSize: 16,
+          color: '#D0D0D0'
+        }}>暂无数据</div>
+      </div>) : (<></>)}
+    </div>
   )
 }

src/route/index/Index.tsx

@@ -86,6 +86,10 @@ import tranew from '../../static/left/tranew.png'
 import topblack from '../../static/appimgs/topblack.png'
 import topblue from '../../static/appimgs/topblue.png'
 
+import right from '../../static/trademark/right.png'
+import yes from '../../static/trademark/yes.png'
+
+
 export default function Index() {
 
     // const height = window.innerHeight - 180;
@@ -1148,6 +1152,53 @@ export default function Index() {
         { id: '3', title: '1个工作日下证', price: '2599', back: 'black' },
         { id: '4', title: '当天下证', price: '3699', back: 'black' },
     ]
+    // 商标数组
+    const trademarkArray = [
+        {
+            id: '1', title: '智能申请注册', nowprice: '500',
+            old: true, //是否显示原价
+            oldprice: '318', //原价
+            cheap: true,//特价
+            text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
+            left: '性价比', right: '高',
+            textArray: [
+                '自助办理，性价比高',
+                '自助查询，排查风险',
+                '人工严审，提升受理率'
+            ],
+            serve: false, //专家咨询
+            num: 1 // 限购
+        },
+        {
+            id: '2', title: '专家辅助注册', nowprice: '499', cheap: false,
+            old: false,
+            oldprice: '',
+            text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
+            left: '成功率', right: '高',
+            textArray: [
+                '专家一对一，全流程代办',
+                '分析风险，优化注册方案',
+                '分析风险，优化注册方案'
+            ],
+            serve: true,
+            num: 0
+        },
+        {
+            id: '3', title: '至尊无忧注册', nowprice: '599', cheap: false,
+            old: false,
+            oldprice: '',
+            text: '专家评估提高通过率，注册失败，可赔付全款',
+            left: '类型', right: '指定类目',
+            textArray: [
+                '你注册，我投保',
+                '每件商标都有保单',
+                '指定类目驳回，赔付全款'
+            ],
+            serve: true,
+            num: 0
+
+        },
+    ]
     const [appGoodsId, setAppGoodsId] = useState('') // 选择的商品id
     useEffect(() => {
         // const nowname = sessionStorage.getItem('now')
@@ -3689,13 +3740,144 @@ export default function Index() {
                     setTrademarkModal(false)
                 }}
                 okButtonProps={{ style: { background: 'red', color: 'white' } }}
-                width={1500}
+                width={1000}
                 // maskClosable={false} // 禁止通过点击蒙层关闭
                 centered
 
             >
-                <div>申请商标</div>
+                <div className='trademarkArrayBox'>
-            </Modal>
+                    {trademarkArray.map((item) => {
+                        return (
+                            <div className='trademarkItem' key={item.id}>
+                                <div style={{
+                                    position: 'absolute',
+                                    right: -6,
+                                    top: -8,
+                                }}>
+                                    <div style={{
+                                        display: item.cheap ? 'unset' : 'none',
+                                    }}>
+                                        <img src={right} width={60} height={62} alt="" />
+                                    </div>
+                                </div>
+                                <div className='trademarkItemTop'>
+                                    <div className='trademarkItemTitle'>
+                                        {item.title}
+                                    </div>
+                                    <div className='trademarkItemText'>
+                                        {item.text}
+                                    </div>
+                                    <div className='trademarkItemTextBox'>
+                                        <div>{item.left}</div>
+                                        <div>{item.right}</div>
+                                    </div>
+                                    <div className='trademarkTextArrayBox'>
+                                        {
+                                            item.textArray.map((item: any, index) => {
+                                                return (
+                                                    <div style={{
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+
+                                                    }}
+                                                        key={index}>
+                                                        <img src={yes} style={{
+                                                            marginTop: 3,
+                                                        }} width={19} height={15} alt="" />
+                                                        <div className='trademarkArrayItemText' >
+                                                            {item}
+                                                        </div>
+                                                    </div>
+                                                )
+                                            })
+                                        }
+                                    </div>
+                                    <div className='trademarkBuy'>
+                                        <div style={{
+                                            background: item.num > 0 ? 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)' : '',
+                                            color: 'white'
+                                        }}>
+                                            {item.num > 0 ? `新用户专项价格限购${item.num}件` : ''}
+                                        </div>
+                                    </div>
+                                    <div className='trademarkPrice'>
+                                        <div className='trademarkNowPrice'>
+                                            <span>￥</span>
+                                            <span style={{ fontSize: 42 }}>{item.nowprice}</span>
+                                        </div>
+                                        <div className='trademarkOldPrice' style={{
+                                            display: item.old ? 'unset' : 'none'
+                                        }}>
+                                            原价:{item.oldprice}元
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className='trademarkItemBtn'>
+                                    <div style={{
+                                        display: item.serve ? 'unset' : 'none'
+                                    }}>
+                                        <div style={{
+                                            width: '100%',
+                                            display: 'flex',
+                                        }}>
+                                            <div style={{
+                                                flex: 1,
+                                                border: '1px solid  #FF9C00',
+                                                fontSize: 18,
+                                                color: '#FF9C00',
+                                                textAlign: 'center',
+                                                lineHeight: '46px',
+                                                cursor: 'pointer'
+                                            }}>专家咨询</div>
+                                            <div
+                                                style={{
+                                                    flex: 1,
+                                                    fontSize: 18,
+                                                    color: '#FFFFFF',
+                                                    textAlign: 'center',
+                                                    lineHeight: '46px',
+                                                    background: 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)',
+                                                    cursor: 'pointer'
+
+                                                }}
+                                                onClick={() => {
+                                                    console.log(item.nowprice);
+
+                                                }}
+                                            >立即购买</div>
+                                        </div>
+                                    </div>
+                                    <div style={{
+                                        display: item.serve ? 'none' : 'unset'
+                                    }}>
+                                        <div style={{
+                                            width: '100%',
+                                            display: 'flex',
+                                        }}>
+                                            <div
+                                                style={{
+                                                    flex: 1,
+                                                    fontSize: 18,
+                                                    color: '#FFFFFF',
+                                                    textAlign: 'center',
+                                                    lineHeight: '46px',
+                                                    background: 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)',
+                                                    cursor: 'pointer'
+
+                                                }}
+                                                onClick={() => {
+                                                    console.log(item.nowprice);
+
+                                                }}
+                                            >立即购买</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </Modal >
             <div className='couponMask-box'
                 style={{
                     display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) && couponArray.length == 1 && !phoneModal ? 'unset' : 'none',

src/route/index/index.css

@@ -897,6 +897,7 @@
     margin-top: 43px;
 
 }
+
 .appGoodsBtn:hover {
     width: 235px;
     height: 46px;
@@ -909,4 +910,104 @@
     cursor: pointer;
     margin-top: 43px;
 
+}
+
+
+.trademarkArrayBox {
+    height: 500px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.trademarkItem {
+    width: 304px;
+    height: 457px;
+    border: 1px solid transparent;
+    background: url(../../static/trademark/back.png);
+    /* background-color: red; */
+    position: relative;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.trademarkItemTop {
+    height: 411px;
+    /* background-color: skyblue; */
+    padding: 37px 21px 27px 21px;
+    box-sizing: border-box;
+
+}
+
+.trademarkItemBtn {
+    height: 46px;
+    width: 100%;
+    /* background-color: pink; */
+}
+
+.trademarkItemTitle {
+    font-weight: 400;
+    font-size: 20px;
+    color: #17181B
+}
+
+.trademarkItemText {
+    font-size: 16px;
+    color: #6D6D6D;
+    margin-top: 10px;
+}
+
+.trademarkItemTextBox {
+    height: 35px;
+    background: #FFFFFF;
+    display: flex;
+    font-size: 16px;
+    color: #6E6E6E;
+    justify-content: space-between;
+    line-height: 35px;
+    padding: 0 17px;
+    box-sizing: border-box;
+    margin-top: 15px;
+}
+.trademarkArrayItemText{
+    margin-left: 10px;
+}
+.trademarkTextArrayBox {
+    font-size: 16px;
+    color: #625A31;
+    padding-left: 8px;
+    /* height: 88px; */
+    /* background-color: pink; */
+    line-height: 30px;
+    margin-top: 20px;
+}
+
+.trademarkBuy {
+    height: 30px;
+    font-size: 14px;
+    line-height: 30px;
+    width: 160px;
+    text-align: center;
+    border-radius: 3px;
+    margin-top: 20px;
+}
+
+.trademarkPrice {
+    display: flex;
+    /* background: pink; */
+    /* align-items: center; */
+}
+
+.trademarkNowPrice {
+    color: #F32222;
+}
+
+.trademarkOldPrice {
+    margin-top: 30px;
+    margin-left: 20px;
+    font-size: 16px;
+    color: #CBC1B0;
+    /* 文字中线 */
+    text-decoration: line-through;
 }