功能：租赁商品新增

src/pages/mallManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.scss

+.goods-info{
+  &-title{
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 40px;
+  }
+}

src/pages/mallManage/rentGoods/rentAddOrEdit/components/goodsInfo/index.tsx

+import { Form, Input, Radio } from 'antd';
+import './index.scss';
+
+const GoodsInfo = () => {
+  const qualityList = [
+    {
+      label: '全新',
+      value: 0,
+    },
+    {
+      label: '99新',
+      value: 1,
+    },
+    {
+      label: '95新',
+      value: 2,
+    },
+    {
+      label: '90新',
+      value: 3,
+    },
+    {
+      label: '80新',
+      value: 4,
+    },
+  ];
+
+  return (
+    <div className='goods-info'>
+      <div className='goods-info-title'>商品信息</div>
+      <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
+        <Form.Item label='商品标题'>
+          <Input placeholder='请输入商品标题' />
+        </Form.Item>
+        <Form.Item label='商品卖点'>
+          <Input placeholder='请输入商品卖点' />
+        </Form.Item>
+        <Form.Item label='商品成新'>
+          <Radio.Group>
+            {qualityList.map((v, index) => (
+              <Radio value={v.value} key={index}>
+                {v.label}
+              </Radio>
+            ))}
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label='商品状态'>
+          <Radio.Group>
+            <Radio value={1}>上架</Radio>
+            <Radio value={0}>下架</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+export default GoodsInfo;

src/pages/mallManage/rentGoods/rentAddOrEdit/components/rentAttr/index.tsx

@@ -2,7 +2,9 @@ import './index.scss';
 import { Button, Cascader, Form, Radio, Table } from 'antd';
 import EditableCell from '~/components/EditableCell';
 import { useState } from 'react';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { Uploader } from '~/components/uploader';
+import RichText from '~/components/richText';
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
 
@@ -51,11 +53,24 @@ const RentAttr = () => {
       render: (_text: string, _record: any, index: number) => (
         <>
           {index === parameterTableData.length - 1 ? (
-            <Button icon={<PlusOutlined />} type='primary'></Button>
+            <Button
+              icon={<PlusOutlined />}
+              type='primary'
+              onClick={addParameterDataEvent}
+              style={{ marginRight: '10px' }}
+            ></Button>
+          ) : (
+            ''
+          )}
+          {index ? (
+            <Button
+              type='primary'
+              icon={<MinusOutlined />}
+              onClick={deleteParameterDataEvent}
+            ></Button>
           ) : (
             ''
           )}
-          {index ? <Button type='primary' icon={<MinusOutlined />}></Button> : ''}
         </>
       ),
     },
@@ -78,6 +93,13 @@ const RentAttr = () => {
   });
   const [parameterTableData, setParameterTableData] = useState<any>([{ id: 1 }]);
 
+  //商品参数新增
+  const addParameterDataEvent = () => {
+    setParameterTableData([...parameterTableData, { id: parameterTableData.length + 1 }]);
+  };
+  //商品参数删除
+  const deleteParameterDataEvent = () => {};
+
   return (
     <div className='rent-attr'>
       <div className='rent-attr-title'>商品属性</div>
@@ -110,6 +132,19 @@ const RentAttr = () => {
             ></Table>
           </Form>
         </Form.Item>
+        <Form.Item label='商品图片'>
+          <Uploader fileUpload listType='picture-card'>
+            <UploadOutlined />
+          </Uploader>
+        </Form.Item>
+        <Form.Item label='商品视频'>
+          <Uploader fileUpload listType='picture-card'>
+            <UploadOutlined />
+          </Uploader>
+        </Form.Item>
+        <Form.Item label='商品详情页'>
+          <RichText richTextContent='' />
+        </Form.Item>
       </Form>
     </div>
   );

src/pages/mallManage/rentGoods/rentAddOrEdit/components/rentInfo/index.tsx

-import { Form, Input, Radio } from 'antd';
+import { Form, Select } from 'antd';
 import './index.scss';
 
 const RentInfo = () => {
-  const qualityList = [
-    {
-      label: '全新',
-      value: 0,
-    },
-    {
-      label: '99新',
-      value: 1,
-    },
-    {
-      label: '95新',
-      value: 2,
-    },
-    {
-      label: '90新',
-      value: 3,
-    },
-    {
-      label: '80新',
-      value: 4,
-    },
-  ];
-
   return (
     <div className='rent-info'>
-      <div className='rent-info-title'>商品信息</div>
+      <div className='rent-info-title'>租赁信息</div>
       <Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
-        <Form.Item label='商品标题'>
-          <Input placeholder='请输入商品标题' />
-        </Form.Item>
-        <Form.Item label='商品卖点'>
-          <Input placeholder='请输入商品卖点' />
-        </Form.Item>
-        <Form.Item label='商品成新'>
-          <Radio.Group>
-            {qualityList.map((v, index) => (
-              <Radio value={v.value} key={index}>
-                {v.label}
-              </Radio>
-            ))}
-          </Radio.Group>
+        <Form.Item label='最低租期'>
+          <Select placeholder='请选择租期'>
+            <Select.Option>11</Select.Option>
+          </Select>
         </Form.Item>
-        <Form.Item label='商品状态'>
-          <Radio.Group>
-            <Radio value={1}>上架</Radio>
-            <Radio value={0}>下架</Radio>
-          </Radio.Group>
+        <Form.Item label='最高租期'>
+          <Select placeholder='请选择租期'>
+            <Select.Option>11</Select.Option>
+          </Select>
         </Form.Item>
       </Form>
     </div>

src/pages/mallManage/rentGoods/rentAddOrEdit/components/skuInfo/index.scss

+.sku-info{
+  &-title{
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 40px;
+  }
+}

src/pages/mallManage/rentGoods/rentAddOrEdit/components/skuInfo/index.tsx

+import './index.scss';
+import { Button, Col, Row, Table } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { ColumnsType } from 'antd/es/table/InternalTable';
+const SkuInfo = () => {
+  const skuTableColumns: ColumnsType<any> = [
+    {
+      title: '版本',
+      align: 'center',
+    },
+    {
+      title: '是否缺货',
+      align: 'center',
+    },
+    {
+      title: '押金',
+      align: 'center',
+    },
+  ];
+  return (
+    <div className='sku-info'>
+      <div className='sku-info-title'>价格库存信息</div>
+      <Row>
+        <Col span={1}></Col>
+        <Col span={22}>
+          <div>
+            <Button type='primary' icon={<PlusOutlined />} style={{ marginBottom: '10px' }}>
+              新增规格
+            </Button>
+            <Table bordered columns={skuTableColumns} />
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+export default SkuInfo;

src/pages/mallManage/rentGoods/rentAddOrEdit/index.tsx

-import RentInfo from './components/rentInfo';
+import GoodsInfo from './components/goodsInfo';
 import RentAttr from './components/rentAttr';
+import RentInfo from './components/rentInfo';
+import SkuInfo from './components/skuInfo';
 const RentAddOrEdit = () => {
   return (
     <div className='rent-create-edit'>
       {/*商品信息*/}
-      <RentInfo />
+      <GoodsInfo />
       {/*商品属性*/}
       <RentAttr />
+      {/*租赁信息*/}
+      <RentInfo />
+      {/*价格库存信息*/}
+      <SkuInfo />
     </div>
   );
 };