address Drawer

src/components/AddressDrawer/AddressDrawer.less

+.antRadioWrapperItems{
+  display: flex !important;
+  align-items: center !important;
+}

src/components/AddressDrawer/AddressDrawer.tsx

+import { Button, Col, Drawer, Form, Radio, Row, Select, Space } from 'antd';
+import React, { useState } from 'react';
+import AddressForm from './AddressForm';
+import AddressRaio from './AddressRaio';
+
+interface AddressDrawerProps {
+  onChange?: void
+}
+
+function AddressDrawer(props: AddressDrawerProps) {
+
+  const { onChange } = props;
+
+  const [visible, setVisible] = useState<boolean>(false);
+  const [showForm, setShowForm] = useState<boolean>(false);
+  const [value, setValue] = useState();
+  const [addrForm] = Form.useForm()
+
+  //地址提交
+  function sumbitAddressForm() {
+    addrForm.validateFields().then(values => {
+      console.log(values);
+    })
+  }
+
+  return (
+    <>
+      <Row gutter={10}>
+        <Col span={20}>
+          <Select value={value}>
+            <Select.Option value={1}>我的地址1</Select.Option>
+            <Select.Option value={2}>我的地址2</Select.Option>
+            <Select.Option value={3}>我的地址3</Select.Option>
+            <Select.Option value={4}>我的地址4</Select.Option>
+          </Select>
+        </Col>
+
+        <Col span={4}>
+          <Button className='w-full' onClick={() => setVisible(true)}>管理</Button>
+        </Col>
+      </Row>
+
+      <Drawer
+        width={600}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title="地址管理"
+        footer={
+          <Button.Group>
+            <Button type='primary' onClick={sumbitAddressForm}>提交</Button>
+          </Button.Group>
+        }
+      >
+
+        <Radio.Group className='w-full' onChange={(e) => {
+          setValue(e.target.value);
+        }}>
+
+          <Space className='w-full' direction="vertical">
+            <AddressRaio onEdit={(addr) => {
+              setShowForm(true)
+              console.log(addr)
+              addrForm.setFieldsValue(addr);
+            }} />
+          </Space>
+        </Radio.Group>
+
+        <Button className='mt-10' onClick={() => setShowForm(true)}>新增地址</Button>
+
+        {showForm && <AddressForm form={addrForm} />}
+
+      </Drawer>
+
+    </>
+  );
+
+}
+
+export default AddressDrawer
\ No newline at end of file

src/components/AddressDrawer/AddressForm.tsx

+import { PATTERN_MAPS } from '@/constants/regExp';
+import { Cascader, Form, FormInstance, Input, Select, Switch } from 'antd';
+import React, { useEffect } from 'react';
+
+const FormItem = Form.Item;
+
+interface addrFormProps {
+  form?: FormInstance
+}
+
+function AddressForm(props: addrFormProps) {
+
+  const [selfForm] = Form.useForm(props.form)
+
+  return (
+    <Form style={{ marginTop: 32 }}
+      layout="vertical"
+      form={selfForm}
+    >
+      <FormItem label="收货人" name="name" rules={[
+        { required: true }
+      ]}>
+        <Input />
+      </FormItem>
+      <FormItem label="收货人" name="cons" rules={[
+        { required: true }
+      ]}>
+        <Cascader />
+      </FormItem>
+      <FormItem label="收货地址详情" name="address" rules={[
+        { required: true }
+      ]}>
+        <Input />
+      </FormItem>
+      <div className='mt-16'>
+        <div className='text-gray-400'>法人手机号 <span className='text-red-500' style={{ fontFamily: "SimSun, sans-serif" }}>*</span></div>
+        <div className='flex gap-5 mt-5'>
+          <FormItem className='flex-1 w-17' name="areaCode" rules={[
+            { required: true }
+          ]}>
+            <Select>
+              <Select.Option value="+86">+86</Select.Option>
+            </Select>
+          </FormItem>
+          <FormItem className='flex-auto' name="phone" rules={[
+            { required: true }
+          ]}>
+            <Input />
+          </FormItem>
+        </div>
+      </div>
+
+      <FormItem label="电话号码" name="tel" rules={[
+        {
+          pattern: PATTERN_MAPS.tel
+        }
+      ]}>
+        <Input />
+      </FormItem>
+
+      <FormItem label="是否默认" name="isDefault">
+        <Switch />
+      </FormItem>
+
+    </Form>
+  )
+}
+
+export default AddressForm;
\ No newline at end of file

src/components/AddressDrawer/AddressRaio.tsx

+import { Radio, Button } from 'antd'
+import React from 'react'
+import styles from './AddressDrawer.less'
+
+/**
+ * FormItem 修个值
+ */
+interface AddressRaioProps {
+  onChange?: (value) => void
+  onEdit?: (address) => void
+}
+
+function AddressRaio(props: AddressRaioProps) {
+
+  const { onChange, onEdit } = props;
+
+  return (
+    <>
+      {[1, 2, 3, 4].map(addr => (
+        <div className='flex mb-14'>
+          <div className='_left felx-auto'>
+            <Radio className={styles['antRadioWrapperItems']} value={addr}>
+              <div className='address_base ml-10'>
+                <span>蒯美政</span>
+                <span>185 2929 6758</span>
+                <span>默认地址</span>
+              </div>
+              <div className='address_decs ml-10'>
+                广东省广州市海珠区新港东路1068号中洲中心北塔6楼
+              </div>
+            </Radio>
+          </div>
+          <div className={`_right flex flex-1  justify-end ${styles["antRadioWrapperItems"]}`}>
+            <Button.Group size='small'>
+              <Button onClick={() => {
+                if (onEdit) {
+                  onEdit({ name: 'molei' })
+                }
+              }}>
+                编辑
+              </Button>
+              <Button>
+                删除
+              </Button>
+            </Button.Group>
+          </div>
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default AddressRaio
\ No newline at end of file

src/components/AddressDrawer/index.tsx

+export { default as AddressDrawer } from './AddressDrawer'
\ No newline at end of file

src/components/BaseInfo/BaseInfo.tsx

@@ -35,8 +35,8 @@ function BaseInfoItem({ label, children }: {
   return (
     <div className='base_info_item'>
       <Row>
-        <Col span={4}>{label}</Col>
-        <Col span={20}>
+        <Col span={8}>{label}</Col>
+        <Col span={16}>
           {typeof children === 'string' ? <div>{children}</div> : children}
         </Col>
       </Row>

src/components/FormItem/FormItem.tsx

@@ -4,9 +4,13 @@ function FormItem<values = any>(prosp: FormItemProps<values>) {
   return (
     <Form.Item
       labelAlign="left"
-      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 20 }}
-      {...prosp} className="w-full" />
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      {...prosp} className="w-full">
+
+      {prosp.children}
+
+    </Form.Item>
   );
 }
 

src/pages/order/deliveryNotice/manageSRM/add.tsx

@@ -7,11 +7,12 @@ import AnchorPage, { AnchorsItem } from '@/components/AnchorPage'
 import React, { useState } from 'react'
 import { BillsInfo, BuyerLabel, ConsigneeLabel, ConsigneePhoneLabel, ConsigneeTimeLabel, DeliveryAbstractLabel, DeliveryAddrLabel, DeliveryDateLabel, DeliveryGood, DeliveryInfo, DeliveryNameLabel, DeliveryNoLabel, DeliveryPhoneLabel, DeliverySlefAddrLabel, DeliveryTimeLabel, DeliveryTypeLabel, Distribution, LogisticsCarNoLabel, LogisticsCompanyLabel, LogisticsInfo, LogisticsNoLabel, NoteLabel, OutStatusLabel } from '../../constants'
 import { BaseInfo as ContentBox } from '@/components/BaseInfo'
-import { Input, Table, Row, Col } from 'antd';
+import { Input, Table, Row, Col, Select, Radio, Form } from 'antd';
 import { DeliveryNoticeTableColumn } from '../../constants/page-table-column';
 import { FormItem } from '@/components/FormItem';
 import { DatePickerSelect } from '@/components/DatePickerSelect'
 import DatePicker from '@/components/DatePicker';
+import { AddressDrawer } from '@/components/AddressDrawer';
 
 const ContentBoxItem = ContentBox.BaseInfoItem;
 
@@ -29,75 +30,85 @@ const DeliveryNoticeManageSRMDetails: React.FC = () => {
       anchors={anchors}
     >
 
-      <ContentBox title={BillsInfo.name} id={BillsInfo.key}>
-        <FormItem label={DeliveryAbstractLabel}>
-          <Input />
-        </FormItem>
-
-        <FormItem label={NoteLabel}>
-          <Input />
-        </FormItem>
-
-        <FormItem label={BuyerLabel}>
-          <Input />
-        </FormItem>
-      </ContentBox>
-
-      <ContentBox title={Distribution.name} id={Distribution.key}>
-        <FormItem label={DeliveryDateLabel}>
-          <DatePickerSelect className='w-full' />
-        </FormItem>
-
-        <FormItem label={DeliveryNameLabel}>
-          <Input />
-        </FormItem>
-
-        <FormItem label={DeliveryTimeLabel}>
-          <DatePickerSelect.RangePicker className="w-full" picker='time' />
-        </FormItem>
-
-        <FormItem label={DeliveryPhoneLabel}>
-          <Input />
-        </FormItem>
-      </ContentBox>
-
-      <ContentBox title={DeliveryInfo.name} id={DeliveryInfo.key}>
-        <FormItem label={ConsigneeTimeLabel}>
-          <DatePickerSelect />
-        </FormItem>
-
-        <FormItem label={DeliveryAddrLabel}>
-          <Input />
-        </FormItem>
-
-        <FormItem label={DeliverySlefAddrLabel}>
-
-        </FormItem>
-
-      </ContentBox>
-
-      <ContentBox title={LogisticsInfo.name} id={LogisticsInfo.key}>
-
-        <ContentBoxItem label={DeliveryTypeLabel}>
-
-        </ContentBoxItem>
-        <ContentBoxItem label={LogisticsCarNoLabel}>
-
-        </ContentBoxItem>
-        <ContentBoxItem label={LogisticsCompanyLabel}>
-
-        </ContentBoxItem>
-        <ContentBoxItem label={LogisticsNoLabel}>
-
-        </ContentBoxItem>
-      </ContentBox>
-
-
-      <ContentBox title={DeliveryGood.name} id={DeliveryGood.key} cols={1}>
-
-        <Table columns={DeliveryNoticeTableColumn} />
-
-      </ContentBox>
+      <Form>
+        <ContentBox title={BillsInfo.name} id={BillsInfo.key}>
+          <FormItem label={DeliveryAbstractLabel}>
+            <Input />
+          </FormItem>
+
+          <FormItem label={NoteLabel}>
+            <Input />
+          </FormItem>
+
+          <FormItem label={BuyerLabel}>
+            <Input />
+          </FormItem>
+        </ContentBox>
+
+        <ContentBox title={Distribution.name} id={Distribution.key}>
+          <FormItem label={DeliveryDateLabel}>
+            <DatePickerSelect className='w-full' />
+          </FormItem>
+
+          <FormItem label={DeliveryNameLabel}>
+            <Input />
+          </FormItem>
+
+          <FormItem label={DeliveryTimeLabel}>
+            <DatePickerSelect.RangePicker className="w-full" picker='time' />
+          </FormItem>
+
+          <FormItem label={DeliveryPhoneLabel}>
+            <Input />
+          </FormItem>
+        </ContentBox>
+
+        <ContentBox title={DeliveryInfo.name} id={DeliveryInfo.key}>
+          <FormItem label={ConsigneeTimeLabel}>
+            <DatePickerSelect className="w-full" />
+          </FormItem>
+
+          <FormItem label={DeliveryAddrLabel}>
+            <Input />
+          </FormItem>
+
+          <FormItem name={"DeliverySlefAddrLabel"} label={DeliverySlefAddrLabel}>
+            <AddressDrawer />
+          </FormItem>
+
+        </ContentBox>
+
+        <ContentBox title={LogisticsInfo.name} id={LogisticsInfo.key}>
+
+          <FormItem label={DeliveryTypeLabel}>
+
+            <Radio.Group>
+              <Radio.Button value={1}>物流</Radio.Button>
+              <Radio.Button value={2}>自提</Radio.Button>
+              <Radio.Button value={3}>无效配送</Radio.Button>
+            </Radio.Group>
+
+          </FormItem>
+          <FormItem label={LogisticsCarNoLabel}>
+            <Input />
+          </FormItem>
+          <FormItem label={LogisticsCompanyLabel}>
+            <Select>
+              <Select.Option>顺丰快递</Select.Option>
+            </Select>
+          </FormItem>
+          <FormItem label={LogisticsNoLabel}>
+            <Input />
+          </FormItem>
+        </ContentBox>
+
+
+        <ContentBox title={DeliveryGood.name} id={DeliveryGood.key} cols={1}>
+
+          <Table columns={DeliveryNoticeTableColumn} />
+
+        </ContentBox>
+      </Form>
 
 
     </AnchorPage>