运费模板对接完成

package.json

@@ -7,6 +7,7 @@
     "start:analyze": "ANALYZE=1 umi dev",
     "clean": "rimraf node_modules",
     "start": "yarn scripts:build && umi dev",
+    "start:dev": "umi dev",
     "build": "umi build",
     "build:analyze": "ANALYZE=1 umi build",
     "postinstall": "umi generate tmp",
@@ -26,13 +27,12 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@ant-design/pro-layout": "^5.0.16",
-    "@formily/antd": "^1.2.7",
-    "@formily/antd-components": "^1.2.7",
+    "@formily/antd": "^1.2.8",
+    "@formily/antd-components": "^1.2.8",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
     "bizcharts": "^4.0.7",
     "god": "^0.1.13",
-    "god-tool": "2.4.0",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/app.tsx

@@ -7,7 +7,9 @@ import '@/global/styles/global.less';  // 导入全局样式
 
 // 默认引入所有的ant样式， 不引入css因为无法做到变量覆盖
 import 'antd/dist/antd.less'
+import { setup } from '@formily/antd-components';
 
+setup()
 let extraRoutes = []
 
 /**

src/components/CustomTabs/index.tsx

@@ -35,7 +35,7 @@ const CustomTabs: React.FC<ITabsProps> = props => {
             {
               renderTabs && renderTabs.length>0 && renderTabs.map(
                 (item, index) => <>
-                  <li className={defaultChecked == index ? styles.activedLi : ""} onClick={()=>clickItemTab(index)}>
+                  <li key={item.key} className={defaultChecked == index ? styles.activedLi : ""} onClick={()=>clickItemTab(index)}>
                     <span>{item.title}</span>
                     {item.isDelete && <a onClick={(e)=>handleDelete(e, index)}><DeleteOutlined /></a>}
                   </li>
@@ -57,7 +57,7 @@ const CustomTabs: React.FC<ITabsProps> = props => {
         <Col span={20} style={{ padding: 24 }}>
           {
             renderTabs && renderTabs.length>0 && renderTabs.map(
-              (item, index) => <div style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
+              (item, index) => <div key={item.key} style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
                 { item.content }
               </div>
             )

src/components/MediaLibrary/index.less

+.modalMainContentBox{
+  margin: 10px 0 30px;
+  ul{
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    li{
+      width: 162px;
+      height: 162px;
+      margin: 20px 8px;
+      align-self: start;
+      p{
+        font-size: 12px;
+        line-height: 24px;
+        text-align: center;
+      }
+      a{
+        img{
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .isCheckedCss{
+      box-sizing: border-box;
+      border:2px solid @main-color;
+      position: relative;
+      &::before{
+        content: '√';
+        width:20px;
+        height:20px;
+        line-height: 20px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 16px;
+        color: #fff;
+        background: @main-color;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+}
+.footerPage{
+  display: flex;
+  justify-content: flex-end;
+}
\ No newline at end of file

src/components/MediaLibrary/index.tsx

+import React, { useState, useRef, useEffect, ReactNode } from "react";
+import { Button, Form, Input, Row, Col, Modal, Alert, Upload, Select, DatePicker, Pagination } from "antd";
+import { PlusOutlined, DeleteOutlined, FormOutlined, UploadOutlined } from "@ant-design/icons";
+import styles from "./index.less";
+
+export interface IProps {
+  visibleMedias: boolean;
+  clickOkAddMedias: (selectedArray: ILists[])=>void;
+  clickCancelAddMedias: ()=>void;
+}
+
+export interface ILists {
+  id: string;
+  image: string;
+  title: string;
+  isCheck: boolean;
+}
+
+export interface Iparams {
+  current: number;
+  pageSize: number;
+  name: string;
+  canal: number;
+  group: number;
+  tag: number;
+  rangeDate: string[];
+}
+
+const {Option} = Select
+const { RangePicker } = DatePicker
+
+let _imgLists: ILists[] = [
+  {
+    id: '10',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '11',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '12',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '13',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '14',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+  {
+    id: '15',
+    image: 'http://10.0.0.28:88/group1/M00/00/01/CgAAHF8XthCALPjtAAAcmV_QYOE360.jpg',
+    title: '商品主图10086',
+    isCheck: false
+  },
+]
+
+const CustomMediaLibrary: React.FC<IProps> = props => {
+
+  const { visibleMedias, clickOkAddMedias, clickCancelAddMedias } = props
+
+  const [searchParams, setSearchParams] = useState<Iparams>({ current: 1, pageSize: 10, name: '', canal: null, group: null, tag: null, rangeDate: [] })
+  let [imgLists, setImgLists] = useState<ILists[]>(_imgLists)
+
+  const clickCheck = (id: any, index: any) => {
+    console.log('选中', id, index)
+    for(let item of imgLists){
+      let bool = item.isCheck
+      if(item.id===id){
+        item.isCheck = !bool
+      }
+    }
+    let newArr = [...imgLists]
+    setImgLists(newArr)
+  }
+
+  const confirmClickOk = () => {
+    console.log('内部确定选择')
+    let selectedArray = imgLists.filter(item=>item.isCheck)
+    clickOkAddMedias(selectedArray)
+  }
+
+  const confirmCancel = () => {
+    console.log('内部取消选择')
+    for(let item of imgLists){
+      item.isCheck = false
+    }
+    setImgLists([...imgLists])
+    clickCancelAddMedias()
+  }
+
+  const clickSearch = (value?:string) => {
+    if(value){
+      searchParams['current'] = 1
+      searchParams['name'] = value
+    } 
+    setSearchParams({...searchParams})
+    console.log(searchParams)
+    // ...搜索
+  }
+
+  const onChange = (value:any, type: string) => {
+    searchParams[type] = value
+    setSearchParams({...searchParams})
+  }
+
+  const pageChange = (page, pageSize) => {
+    searchParams['current'] = page
+    setSearchParams({...searchParams})
+    clickSearch()
+  }
+
+  return (
+    <div className={styles.mediaLibraryBox}>
+      <Modal
+        width={960}
+        title="添加媒体" 
+        visible={visibleMedias}
+        onOk={confirmClickOk}
+        onCancel={confirmCancel}
+        okText="确定"
+        cancelText="取消"
+        forceRender={true}
+      >
+        <div className={styles.modalFitllerBox}>
+          <Row gutter={[16,16]} justify="space-between">
+            <Col span={12}>
+              <Upload 
+                name='file'
+                action='/api/file/file/upload'
+                headers={{
+                  authorization: 'authorization-text'
+                }}
+              >
+                <Button type="primary">
+                  <UploadOutlined /> 上传文件
+                </Button>
+              </Upload>
+            </Col>
+            <Col span={12} style={{display:'flex', justifyContent: 'flex-end'}}>
+              <Input.Search
+                placeholder="搜素"
+                onSearch={value => clickSearch(value)}
+                style={{ width: 200 }}
+              />
+            </Col>
+          </Row>
+          <Row gutter={[16,16]}>
+            <Col span={6}>
+              <Select allowClear style={{ width: '100%' }} placeholder="使用渠道" onChange={(v)=>onChange(v,'canal')}>
+                <Option value={0}>Jack</Option>
+                <Option value={1}>Lucy</Option>
+              </Select>
+            </Col>
+            <Col span={6}>
+              <Select allowClear style={{ width: '100%' }} placeholder="分组" onChange={(v)=>onChange(v,'group')}>
+                <Option value={10}>Jack</Option>
+                <Option value={11}>Lucy</Option>
+              </Select>
+            </Col>
+            <Col span={6}>
+              <Select allowClear style={{ width: '100%' }} placeholder="标签" onChange={(v)=>onChange(v,'tag')}>
+                <Option value={20}>Jack</Option>
+                <Option value={21}>Lucy</Option>
+              </Select>
+            </Col>
+            <Col span={6}>
+              <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder={['开始时间','结束时间']} onChange={(v)=>onChange(v,'rangeDate')} />
+            </Col>
+          </Row>
+        </div>
+        <div className={styles.modalMainContentBox}>
+          <ul>
+            {
+              imgLists.length>0 && imgLists.map((item, index)=>(
+                <li key={item.id} className={item.isCheck?styles.isCheckedCss:''}>
+                  <a onClick={()=>clickCheck(item.id, index)}>
+                    <img src={item.image} alt={item.title}/>
+                  </a>
+                  <p>{item.title}</p>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+        <div className={styles.footerPage}>
+          <Pagination current={searchParams?.current} total={50} onChange={pageChange} />
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default CustomMediaLibrary

src/module/userModule/index.ts

-export interface IUserModule {
-  name: string;
-  age: number;
+export interface ILoginModule {
+  username: string;
+  password: string;
+  res: object;
 
-  printNameAndAge: string;
-
-  setName(name: string):void;
-  getAsyncAge(): Promise<number>;
-}
\ No newline at end of file
+  handleLogin(): Promise<object>;
+}

src/pages/commodity/products/addProductsItem/basicInfoForm.tsx

+import React, { useState, useEffect } from 'react'
+import { Button, Form, Select, Tabs, Input, Tooltip, Cascader, Tag, Spin } from 'antd'
+import {
+  QuestionCircleOutlined,
+  PlusOutlined,
+  MinusOutlined,
+} from '@ant-design/icons'
+import styles from './index.less'
+import { PublicApi } from '@/services/api';
+import { 
+  GetProductCustomerGetCustomerCategoryTreeResponse, 
+  GetWarehouseAreaAllResponse
+ } from '@/services';
+
+const { Option } = Select
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+const layoutFormList = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 14,
+    push: 2
+  },
+}
+const tailLayout = {
+  wrapperCol: {
+    offset: 2,
+    span: 12,
+  },
+}
+
+interface Iprops {
+  onChangeAttributeList: (attributeLists:any)=> void;
+}
+
+
+interface AreaParams {
+  provinceCode: any;
+  provinceName: any;
+  cityCode: any;
+  cityName: any;
+}
+
+const BasicInfoForm: React.FC<Iprops> = (props) => {
+  const { onChangeAttributeList } = props
+
+  const [basicForm] = Form.useForm()
+  const [brandData, setBrandData] = useState<any>([])
+  const [brandValue, setBrandValue] = useState(undefined)
+  const [customerCategoryTree, setCustomerCategoryTree] = useState<GetProductCustomerGetCustomerCategoryTreeResponse>()
+  const [proviceOptions, setProviceOptions] = useState<GetWarehouseAreaAllResponse>()
+  const [showCategory, setShowCategory] = useState(null)
+
+  const [areaParams, setAreaParams] = useState<AreaParams>()
+
+
+  useEffect(() => {
+    // 获取品类树
+    PublicApi.getProductCustomerGetCustomerCategoryTree().then(res => {
+      if (res.code === 1000)
+        setCustomerCategoryTree(res.data)
+    })
+    //获取省市区
+    PublicApi.getWarehouseAreaAll().then(res => {
+      if (res.code === 1000) {
+        let arr = [...res.data] //裁去最后一级别
+        for (let index in arr) {
+          for (let _index in arr[index].areaResponses) {
+            let o = arr[index].areaResponses
+            //@ts-ignore
+            o[_index].areaResponses = null
+          }
+        }
+        setProviceOptions(arr)
+      }
+    })
+  }, [])
+
+  const onFinish = (values: any) => {
+    let params = {...values, commodityAreaList: areaParams, customerCategoryId: values?.customerCategoryId.pop()}
+    console.log('子保单值，', params)
+  }
+
+  const handleBrandSearch = (value: any) => {  // end value
+    console.log(value, 'handleBrandSearch')
+    if (value) {
+      PublicApi.getProductSelectGetSelectBrand({ name: value }).then(res => {
+        if (res.code === 1000)
+          setBrandData(res.data)
+      })
+    } else {
+      setBrandData([])
+    }
+  }
+
+  const handleBrandChange = (value: any) => {
+    setBrandValue(value)
+  }
+
+  const tagRender = (props) => {
+    const { label, value, closable, onClose } = props;
+    if (value?.length < 8)
+      return (
+        <Tag closable={closable} onClose={onClose} style={{ marginRight: 4, border: '1px solid #f0f0f0' }}>
+          {label}
+        </Tag>
+      )
+  }
+
+  const onCustomerCategoryChange = (value: any) => {
+    let seletCategoryId = value[1] || value[0]
+    if (value.length > 0) {
+      PublicApi.getProductCustomerGetCustomerCategoryById({ id: seletCategoryId }).then(res => {
+        onChangeAttributeList(res.data?.customerAttributeList)
+        setShowCategory(res.data.name)
+      })
+    }
+    else
+      setShowCategory(null)
+  }
+
+  const onCommodityAreaChange = (value: any, selected: any) => {
+    let areaParams: AreaParams = {
+      provinceCode: null,
+      provinceName: null,
+      cityCode: null,
+      cityName: null,
+    }
+    if (selected.length === 2) {
+      areaParams.provinceName = selected[0].name
+      areaParams.provinceCode = selected[0].code
+      areaParams.cityName = selected[1].name
+      areaParams.cityCode = selected[1].code
+    }
+    setAreaParams(areaParams)
+    console.log(areaParams, 'area')
+  }
+
+  return (<>
+    <Form
+      {...layout}
+      form={basicForm}
+      name="basic-form"
+      labelAlign="left"
+      onFinish={onFinish}
+      colon={false}
+    >
+      <Form.Item
+        name="customerCategoryId"
+        label="商品品类"
+        rules={[
+          {
+            required: true,
+            message: '请选择商品品类'
+          },
+        ]}
+      >
+        <Cascader
+          options={customerCategoryTree}
+          fieldNames={{ label: 'title', value: 'id', children: 'children' }}
+          onChange={onCustomerCategoryChange}
+          placeholder="请选择品类"
+          notFoundContent={<Spin size="small" />}
+        />
+      </Form.Item>
+      <Form.Item
+        name="brandId"
+        label="商品品牌"
+      >
+        <Select
+          showSearch
+          placeholder="请选择品牌"
+          allowClear
+          value={brandValue}
+          defaultActiveFirstOption={false}
+          showArrow={false}
+          filterOption={false}
+          onSearch={handleBrandSearch}
+          onChange={handleBrandChange}
+          style={{ width: '100%' }}
+        >
+          {brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="name"
+        label={
+          <span>
+            商品名称&nbsp;
+            <Tooltip title="商品名称规范：品牌名（中文|英文）+产品名称（款式|系列）+附加产品特点+货号，最多输入45字">
+              <QuestionCircleOutlined />
+            </Tooltip>
+          </span>
+        }
+        rules={[
+          {
+            required: true,
+            message: '商品名称'
+          },
+        ]}
+      >
+        <Input placeholder="商品名称" maxLength={45} />
+      </Form.Item>
+      <Form.Item
+        name="slogan"
+        label={
+          <span>
+            商品标语&nbsp;
+            <Tooltip title="商品的宣传用语，最多输入45字">
+              <QuestionCircleOutlined />
+            </Tooltip>
+          </span>
+        }
+        rules={[
+          {
+            required: true,
+            message: '请填入商品标语'
+          },
+        ]}
+      >
+        <Input placeholder="请输入商品标语" maxLength={45} />
+      </Form.Item>
+      <Form.Item
+        name="sellingPoint"
+        label={
+          <span>
+            商品卖点&nbsp;
+            <Tooltip title="商品的卖点，展示在商品名称与商品标语之后，最多每个卖点输入8字">
+              <QuestionCircleOutlined />
+            </Tooltip>
+          </span>
+        }
+        rules={[
+          {
+            required: true,
+            message: '请添加卖点标签',
+          },
+        ]}
+      >
+        <Select
+          mode="tags"
+          placeholder="请选择或输入商品卖点"
+          maxTagCount={3}
+          tagRender={tagRender}
+        />
+      </Form.Item>
+      <Form.List name="commodityAreaList">
+        {(fields: any[], { add, remove }: any) => {
+          if (!fields.length) {
+            add()
+          }
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item
+                  {...(index === 0 ? layout : layoutFormList)}
+                  label={
+                    field.key === 0 && <span>
+                      <i style={{ color: 'red' }}>* </i>
+                      归属地市&nbsp;
+                      <Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市">
+                        <QuestionCircleOutlined />
+                      </Tooltip>
+                    </span>
+                  }
+                  rules={[
+                    {
+                      required: true,
+                      message: '请选择地区'
+                    }
+                  ]}
+                  key={field.key}
+                >
+                  <Form.Item
+                    {...field}
+                    rules={[
+                      {
+                        required: true,
+                        message: "请选择地区",
+                      },
+                    ]}
+                    noStyle
+                  >
+                    <Cascader
+                      options={proviceOptions}
+                      onChange={onCommodityAreaChange}
+                      placeholder="请选择地区"
+                      fieldNames={{ label: 'name', value: 'code', children: 'areaResponses' }}
+                      style={index === 0 ? { width: '90%' } : { width: '80%' }}
+                      notFoundContent={<Spin size="small" />}
+                    />
+                  </Form.Item>
+                  <Button size='small' onClick={() => add()} icon={<PlusOutlined />} style={{ margin: '0 12px' }} />
+                  {field.key > 0 && (<Button size='small' onClick={() => remove(field.name)} icon={<MinusOutlined />} />)}
+                </Form.Item>
+              ))}
+            </div>
+          )
+        }}
+      </Form.List>
+      <Form.Item
+        label='品类类型'
+      >
+        {showCategory && <><span className="commonStatusValid"></span>{showCategory}</>}
+      </Form.Item>
+      <Form.Item {...tailLayout}>
+        <Button type="primary" htmlType="submit">
+          保存
+        </Button>
+        <Button className={styles.ml20}>
+          取消
+        </Button>
+      </Form.Item>
+    </Form>          
+  </>)
+}
+
+export default BasicInfoForm
\ No newline at end of file

src/pages/commodity/products/addProductsItem/logisticsForm.tsx

+import React, { useState, useEffect } from 'react'
+import {history} from 'umi'
+import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
+import styles from './index.less'
+import { PublicApi } from '@/services/api'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons'
+
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+
+export interface Iprops {
+  
+}
+
+const { Option } = Select
+
+const LogisticsForm: React.FC<Iprops> = (props) => { 
+  const [logisticsForm] = Form.useForm()
+
+
+  return (<>
+    <Form
+      {...layout}
+      form={logisticsForm}
+      name="add-products-transport"
+      labelAlign="left"
+    >
+      <Form.Item
+        name="transportType"
+        label="配送方式"
+        rules={[
+          {
+            required: true,
+            message: '请选择配送方式'
+          },
+        ]}
+        initialValue={1}
+      >
+        <Radio.Group>
+          <Radio value={1}>物流（默认）</Radio>
+          <Radio value={2}>自提</Radio>
+          <Radio value={3}>无需配送</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item
+        name="chargeType"
+        label="运费方式"
+        rules={[
+          {
+            required: true,
+            message: '请选择运费方式'
+          },
+        ]}
+        initialValue={1}
+      >
+        <Radio.Group>
+          <Radio value={1}>卖家承担运费（默认）</Radio>
+          <Radio value={2}>买家承担运费</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item
+        name="weight"
+        label="重量"
+        rules={[
+          {
+            required: true,
+            message: '请填入重量'
+          },
+        ]}
+      >
+        <Input suffix="KG" placeholder="请输入重量" />
+        <Checkbox>使用运费模板（只有买家承担运费才能选择）</Checkbox>
+      </Form.Item>
+      <Form.Item
+        name="chargeTemplate"
+        label="运费模板"
+      >
+        <Select
+          placeholder="请选择运费模板"
+          allowClear
+        >
+          <Option value="SF">顺丰模板</Option>
+          <Option value="EMS">EMS模板</Option>
+          <Option value="COM">一般快递模板</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="address"
+        label="发货地址"
+      >
+        <Select
+          placeholder="请选择发货地址"
+          allowClear
+        >
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+          <Option value="3">3</Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name="express"
+        label="物流公司"
+      >
+        <Select
+          placeholder="请选择物流公司"
+          allowClear
+        >
+          <Option value="EMS">EMS</Option>
+          <Option value="SF">顺丰</Option>
+          <Option value="CN">菜鸟果果</Option>
+        </Select>
+      </Form.Item>
+    </Form>
+  </>)
+}
+
+export default LogisticsForm
\ No newline at end of file

src/pages/commodity/products/addProductsItem/otherForm.tsx

+import React, { useState, useEffect } from 'react'
+import {history} from 'umi'
+import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
+import styles from './index.less'
+import { PublicApi } from '@/services/api'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons'
+
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+
+export interface Iprops {
+  
+}
+
+const { Option } = Select
+const { TextArea } = Input
+
+const OtherForm: React.FC<Iprops> = (props) => { 
+  const [otherForm] = Form.useForm()
+
+
+  return (<>
+    <Form
+      {...layout}
+      form={otherForm}
+      name="add-products-other"
+      labelAlign="left"
+    >
+      <Form.Item
+        name="bill"
+        label="提供发票"
+      >
+        <Radio.Group size="small">
+          <Radio.Button value="1" style={{ width: 100, textAlign: 'center' }}>是</Radio.Button>
+          <Radio.Button value="0" style={{ width: 100, textAlign: 'center' }}>否</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item
+        name="maitou"
+        label="唛头"
+      >
+        <Input maxLength={25} placeholder="请输入唛头（最长25个字符）" />
+      </Form.Item>
+      <Form.Item
+        name="statement"
+        label="包装清单"
+      >
+        <TextArea maxLength={120} rows={4} placeholder="最长120个字符" />
+      </Form.Item>
+      <Form.Item
+        name="saleService"
+        label="售后服务"
+      >
+        <TextArea maxLength={300} rows={4} placeholder="最长300个字符" />
+      </Form.Item>
+    </Form>
+  </>)
+}
+
+export default OtherForm
\ No newline at end of file

src/pages/commodity/products/addProductsItem/productAttributeForm.tsx

+import React, { useState, useEffect } from 'react'
+import {history} from 'umi'
+import { Button, Form, Select, Checkbox, Tabs, Input } from 'antd'
+import styles from './index.less'
+import { PublicApi } from '@/services/api'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import { EyeOutlined } from '@ant-design/icons'
+
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+const tailLayout = {
+  wrapperCol: {
+    offset: 2,
+    span: 12,
+  },
+}
+
+export interface Iprops {
+  attributesData: any[];
+}
+
+const { TabPane } = Tabs
+const { Option } = Select
+const { TextArea } = Input
+
+const ProductAttributeForm: React.FC<Iprops> = (props) => { 
+  const { attributesData } = props
+  const [attributeForm] = Form.useForm()
+  
+  let paramsArray = [];
+
+  const onFinish = (values) => {
+    
+    console.log(values)
+  }
+
+  /**
+   * @description 表单项改变转换数据格式，仅限“select单选、checkbox多选、输入”三类控件的改变
+   * @param {Number, Array, e} value type为1：数字id，type为2：数组id，type为3：事件对象
+   * @param {Object} attrItem 属性数据对象
+   */
+  const onChange = (value, attrItem) => {
+    let params = { customerAttributeId: attrItem.id, customerAttributeValueList: [] }
+    if(attrItem.type!==3){
+      for(let item of attrItem?.customerAttributeValueList){
+        if(value?.length){
+          for(let i of value){
+            if(item.id===i){
+              params.customerAttributeValueList.push({
+                customerAttributeValueId: i,
+                value: item.value
+              })
+            }
+          }
+        }else{
+          if(item.id===value){
+            params.customerAttributeValueList.push({
+              customerAttributeValueId: value,
+              value: item.value
+            })
+          }
+        }
+      }
+    }else{
+      params.customerAttributeValueList.push({
+        customerAttributeValueId: null,
+        value: value.target.value
+      })
+    }
+    paramsArray.push(params)
+
+    let resultParams = Object.values(paramsArray.reduce((item, next)=>{
+      item[next.customerAttributeId] = next;
+      return item
+    },{}))
+
+    console.log(resultParams) // 最终转换的数据格式
+  }
+
+  const renderTabPanchildren = (attrItem: any) => {
+    return (
+      <>
+        {
+          attrItem.type === 1 &&
+          <Form.Item
+            name={attrItem.id}
+            label={attrItem.name}
+            rules={attrItem.isEmpty && [{
+              required: true,
+              message: '此项为必填项'
+            }]}
+          >
+            <Select
+              placeholder="请选择面料"
+              allowClear
+              onChange={(v)=>onChange(v, attrItem)}
+            >
+              {
+                attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any) => (
+                  <Option key={item.id} value={item.id}>{item.value}</Option>
+                ))
+              }
+            </Select>
+          </Form.Item>
+        }
+        {
+          attrItem.type === 2 &&
+          <Form.Item
+            label={attrItem.name}
+            name={attrItem.id}
+            rules={attrItem.isEmpty && [{
+              required: true,
+              message: '此项为必填项'
+            }]}
+          >
+            <Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
+              {
+                attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
+                  <Checkbox key={item.id} value={item.id}>{item.value}</Checkbox>
+                ))
+              }
+            </Checkbox.Group>
+          </Form.Item>
+        }
+        {
+          attrItem.type === 3 &&
+          <Form.Item
+            name={attrItem.id}
+            label={attrItem.name}
+            rules={attrItem.isEmpty && [{
+              required: true,
+              message: '此项为必填项'
+            }]}
+          >
+            <TextArea onChange={(v)=>onChange(v, attrItem)} maxLength={50} placeholder="最多输入50个字符" rows={4} />
+          </Form.Item>
+        }
+      </>
+    )
+  }
+
+  return (<>
+    <Form
+      {...layout}
+      form={attributeForm}
+      name="attribute-form"
+      labelAlign="left"
+      onFinish={onFinish}
+    >
+      <Tabs defaultActiveKey="1" tabPosition="left">
+        {
+          attributesData?.length > 0 && attributesData.map(attributeItem => <>
+            <TabPane tab={attributeItem.name} key={attributeItem.id}>
+              {
+                renderTabPanchildren(attributeItem)
+              }
+            </TabPane>
+          </>
+          )
+        }
+      </Tabs>
+      <Form.Item {...tailLayout}>
+        <Button type="primary" htmlType="submit">
+          保存
+        </Button>
+        <Button className={styles.ml20}>
+          取消
+        </Button>
+      </Form.Item>
+    </Form>
+    {attributesData?.length === 0 && "请先选择基本信息中商品品类项！"}
+  </>)
+}
+
+export default ProductAttributeForm
\ No newline at end of file

src/pages/commodity/products/addProductsItem/productDescForm.tsx

+import React, { useState, useEffect } from 'react'
+import {history} from 'umi'
+import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } from 'antd'
+import styles from '../index.less'
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
+
+export interface Iprops {
+  
+}
+
+const ProductDescForm: React.FC<Iprops> = (props) => { 
+
+
+  return (<>
+    <div className={styles.descriptBox}>
+      <p>文字区域</p>
+      <div className={styles.bottomBtn}>
+        <Button icon={<PlusOutlined />}>添加文字</Button>
+      </div>
+    </div>
+    <div className={styles.descriptBox}>
+      <p>视频区域</p>
+      <div className={styles.bottomBtn}>
+        <Button icon={<DeleteOutlined />}>删除</Button>
+        <Button icon={<PlusOutlined />}>添加素材</Button>
+      </div>
+    </div>
+    <div className={styles.descriptBox}>
+      <p>图片区域</p>
+      <div className={styles.bottomBtn}>
+        <Button icon={<DeleteOutlined />}>删除</Button>
+        <Button icon={<PlusOutlined />}>添加素材</Button>
+      </div>
+    </div>
+  </>)
+}
+
+export default ProductDescForm
\ No newline at end of file

src/pages/commodity/products/addProductsItem/productImageForm.tsx

+import React, { useState, useEffect } from 'react'
+import {history} from 'umi'
+import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col, Alert } from 'antd'
+import styles from '../index.less'
+import { PublicApi } from '@/services/api'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons'
+import CustomTabs, { ItemPane } from '@/components/CustomTabs'
+import ImageCrop from '@/components/ImageCrop'
+import CustomMediaLibrary from '@/components/MediaLibrary'
+
+export interface Iprops {
+  
+}
+
+const layoutAdd = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 20 },
+}
+
+const _fileList = [
+  {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  },
+  {
+    uid: '-2',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  },
+  {
+    uid: '-3',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-4',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+  },
+]
+
+const _panes = [
+  { title: '所有属性共用', content: '默认内容 商品图片 1', key: '1', isDelete: false },
+  // { title: '皓月银', content: '默认内容 商品图片 2', key: '2', isDelete: true },
+  // { title: '星空灰', content: '默认内容 商品图片 3', key: '3', isDelete: true },
+]
+
+let newTabIndex = 0;
+
+const ProductImageForm: React.FC<Iprops> = (props) => { 
+  const [addTabsForm] = Form.useForm()
+  const [defaultChecked, setDefaultChecked] = useState(0)
+  const [panes, setPanes] = useState<ItemPane[]>(_panes)
+  const [visibleAddTabs, setVisibleAddTabs] = useState(false)
+  const [visibleMedias, setVisibleMedias] = useState(false)
+
+  const [fileList, setFileList] = useState(_fileList)
+
+  const [visibleCrop, setVisibleCrop] = useState(false)
+  const [imgCropUrl, setImgCropUrl] = useState("")
+  const [imgCropCurrent, setImgCropCurrent] = useState({})
+  const [imgCropView, setImgCropView] = useState("")
+
+  useEffect(() => {
+    let newPane = [...panes]
+    newPane[0].content = pictureCrads()
+    setPanes(newPane)
+  }, [fileList])
+
+  const add = (v: any) => {
+    const activeKey = `newTab${newTabIndex++}`;
+    let newArray = [...panes]
+    newArray.push({
+      key: activeKey,
+      title: v.tagsName,
+      // content: `新添加标签页 固定内容${newTabIndex++}`,
+      content: pictureCrads(),
+      isDelete: true
+    });
+    setPanes(newArray);
+  }
+
+  const handleEdit = (file: any) => {
+    console.log(file, '点击edit图片')
+    setVisibleCrop(true)
+    setImgCropUrl(file.url)
+    setImgCropCurrent(file)
+  }
+
+  const handleDelete = (file: any) => {
+    let fList = [...fileList]
+    const _indx = fList.indexOf(file)
+    fList.splice(_indx, 1)
+    setFileList(fList)
+  }
+
+  const handleCropOk = (url: string) => {
+    setVisibleCrop(false);
+    setImgCropView(url);
+    let obj = { ...imgCropCurrent, url }
+    let fList = [...fileList]
+    //@ts-ignore
+    let _indx = fList.indexOf(imgCropCurrent)
+    //@ts-ignore
+    fList.splice(_indx, 1, obj)
+    setFileList(fList)
+    console.log("裁剪OK,返回url", _indx, obj, fList);
+  }
+
+  const handleCropCancel = () => {
+    setVisibleCrop(false);
+    console.log("裁剪不OK");
+  }
+
+  const handleUpload = () => {
+    console.log('点击上传，添加媒体')
+    setVisibleMedias(true)
+  }
+
+  const clickAddButton = () => {
+    setVisibleAddTabs(true);
+  }
+
+  const clickItemTab = (_index: number) => {
+    console.log(_index, '点击项')
+    setDefaultChecked(_index)
+  }
+
+  const clickDeleteItemTab = (_index: number) => {
+    console.log(_index, '点击删除项')
+    let paneArray = [...panes]
+    paneArray.splice(_index, 1)
+    setPanes(paneArray)
+  }
+
+  const pictureCrads = () => (
+    <>
+      <div className={styles.pictureCardBox}>
+        {
+          fileList && fileList.length > 0 && fileList.map((item, index) =>
+            <div className={styles.cardBox} key={item.uid}>
+              <div className={styles.contentBox}>
+                <img src={item.url} alt="" />
+                <p>
+                  <Button type="text" icon={<FormOutlined />} title="编辑" onClick={() => handleEdit(item)} />
+                  <Button type="text" icon={<DeleteOutlined />} title="删除" onClick={() => handleDelete(item)} />
+                </p>
+              </div>
+            </div>
+          )
+        }
+        <div className={styles.cardAddBox} onClick={handleUpload}>
+          <p><PlusOutlined /><br />点击上传</p>
+        </div>
+      </div>
+      <Alert
+        banner
+        showIcon={false}
+        message=""
+        description={<>1. 一次可以选择 6 张图片<br />2. 图片尺寸为 800*800，单张大小不超过 600K，仅支持JPEG/JPG/PNG格式<br />3. 图片质量要清晰，不要虚化，建议主图为白色背景正面图</>}
+        type="info"
+        closable
+        style={{ backgroundColor: '#F0F8FF', color: '#1B9AEE' }}
+      />
+      <div>
+        <i>图片预览(供调试)</i>
+        {imgCropView ? <img src={imgCropView} alt="预览" /> : <p>暂空</p>}
+      </div>
+    </>
+  )
+
+  const handleOkAddTabs = () => {
+    console.log('操作了OK')
+    addTabsForm.validateFields().then(values => {
+      console.log(values, 'validate')
+      add(values)
+      setVisibleAddTabs(false)
+    }).catch(err => console.error(err, 'error'))
+  }
+
+  const handleCancelAddTabs = () => {
+    setVisibleAddTabs(false)
+  }
+
+  const handleOkAddMedias = (selectedData: any) => {
+    console.log('操作了OK添加媒体，选择的图片数据为：', selectedData)
+    setVisibleMedias(false)
+  }
+
+  const handleCancelAddMedias = () => {
+    console.log('操作了取消添加媒体')
+    setVisibleMedias(false)
+  }
+
+  return (<>
+    <CustomTabs
+      renderTabs={panes}
+      defaultChecked={defaultChecked}
+      isShowAddButton={true}
+      clickAddButton={clickAddButton}
+      clickItemTab={clickItemTab}
+      clickDeleteItemTab={clickDeleteItemTab}
+    />
+    <Modal
+      title="添加标签页"
+      visible={visibleAddTabs}
+      onOk={handleOkAddTabs}
+      onCancel={handleCancelAddTabs}
+    >
+      <Form
+        {...layoutAdd}
+        name="tags-form"
+        form={addTabsForm}
+      >
+        <Form.Item
+          label="标签名称"
+          name="tagsName"
+          rules={[{ required: true, message: '请输入标签名称!' }]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+    <ImageCrop
+      visible={visibleCrop}
+      imgUrl={imgCropUrl}
+      handleConfirm={handleCropOk}
+      handleWithDraw={handleCropCancel}
+    />
+    {/* 媒体库组件，暂不使用，先直接上传图片 */}
+    <CustomMediaLibrary
+      visibleMedias={visibleMedias}
+      clickOkAddMedias={handleOkAddMedias}
+      clickCancelAddMedias={handleCancelAddMedias}
+    />
+  </>)
+}
+
+export default ProductImageForm
\ No newline at end of file

src/pages/commodity/products/addProductsItem/selectGoodsForm.tsx

+import React, { useState, useEffect } from 'react'
+import {history} from 'umi'
+import { Button, Form, Select, Checkbox } from 'antd'
+import styles from './index.less'
+import { PublicApi } from '@/services/api'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import { EyeOutlined } from '@ant-design/icons'
+
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 12,
+  },
+}
+
+export interface Iprops {
+  
+}
+
+const SelectGoodsForm: React.FC<Iprops> = (props) => { 
+  const [selectGoodsForm] = Form.useForm()
+  const [showSelectGoods, setSelectGoods] = useState(false)
+  const [selectGoodsRow, setSelectGoodsRow] = useState<any[]>([]) // 模态框选择的行数据
+  const [selectedGoodsRowKeys, setSelectedGoodsRowKeys] = useState<Array<number>>([])
+
+  const fetchData = (params: any) => {
+    console.log(params)
+    return new Promise((resolve, reject) => {
+      let obj = { ...params }
+      PublicApi.getProductGoodsGetGoodsList(obj).then(res => {
+        resolve(res.data)
+      })
+    })
+  }
+
+  const goodsColumns: ColumnType<any>[] = [
+    {
+      title: '货号',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '货品名称',
+      dataIndex: 'name',
+      key: 'name',
+      className: 'commonPickColor',
+      render: (text: any, record: any) => <span
+        className="commonPickColor"
+        onClick={() => history.push(`/memberCenter/commodityAbility/commodity/goods/addGoods?id=${record.id}&isSee=true`)}
+      >
+        {text}&nbsp;<EyeOutlined />
+      </span>
+    },
+    {
+      title: '规格型号',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '品类',
+      dataIndex: ['customerCategory', 'name'],
+      key: 'customerCategory',
+    },
+    {
+      title: '品牌',
+      dataIndex: ['brand', 'name'],
+      key: 'brand',
+    },
+    {
+      title: '成单价',
+      dataIndex: 'costPrice',
+      key: 'costPrice',
+    },
+  ]
+
+  const onSelectGoodsChange = (value: any) => {
+    setSelectedGoodsRowKeys([])
+    setSelectGoods(value.target.checked)
+  }
+
+  const rowSelection = {
+    selectedRowKeys: selectedGoodsRowKeys,
+    onChange: (selectedRowKeys: any, selectedRows: any) => {
+      setSelectGoodsRow(selectedRows);
+      setSelectedGoodsRowKeys(selectedRowKeys);
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    }
+  }
+
+  return (<>
+    <Form
+      {...layout}
+      form={selectGoodsForm}
+      name="select-goods"
+      labelAlign="left"
+    >
+      <Form.Item
+        label="是否选择货品"
+      >
+        <Checkbox onChange={onSelectGoodsChange}>选择货品</Checkbox>
+      </Form.Item>
+    </Form>
+    {showSelectGoods && <StandardTable
+      columns={goodsColumns}
+      rowSelection={rowSelection}
+      tableProps={{ rowKey: "id" }}
+      fetchTableData={(params: any) => fetchData(params)}
+    />}         
+  </>)
+}
+
+export default SelectGoodsForm
\ No newline at end of file

src/pages/commodity/products/index.tsx

@@ -213,7 +213,7 @@ const Products: React.FC<{}> = () => {
             <Dropdown overlay={
               <Menu>
                 <Menu.Item>
-                  {record.status === 1 ? <Button type='link'>提交审核</Button> : ''}
+                  {record.status === 1 ? <Button type='link' onClick={()=>clickSubmitCheck(record)}>提交审核</Button> : ''}
                 </Menu.Item>
                 {(record.status === 3 || record.status === 6) ? <Menu.Item><Button type='link' onClick={() => clickUp(1)}>上架</Button></Menu.Item> : ''}
                 {record.status === 5 ? <Menu.Item><Button type='link' onClick={() => clickUp(0)}>下架</Button></Menu.Item> : ''}
@@ -417,8 +417,17 @@ const Products: React.FC<{}> = () => {
 
   const clickCopy = (record: any) => {
     console.log('复制商品')
+    const { id } = record;
+    if(id)
+      PublicApi.postProductCommodityCopyCommodity({id: id})
   }
 
+  const clickSubmitCheck = (record:any) => {
+    console.log('提交审核')
+    const { id } = record;
+    if(id)
+      PublicApi.postProductCommodityApplyCheckCommodity({id: id})
+  }
 
   const handleMenuClick = (e: any) => {
     console.log('menu', e, selectedRowKeys); // 1 批量删除；2 删除导入批次
@@ -433,6 +442,8 @@ const Products: React.FC<{}> = () => {
 
   const handleBatchDelete = (ids: string[]) => {
     console.log('删除', ids)
+    //@ts-ignore
+    PublicApi.postProductCommodityDeleteBatchCommodity({idList: ids})  //......
   }
 
   const handleReset = () => {

src/pages/commodity/products/viewProducts.tsx

-import React, { useState, useRef, ReactNode } from 'react'
+import React, { useState, useRef, ReactNode, useEffect } from 'react'
 import { history } from 'umi'
 import { Button, Steps, Card, Space, Radio, Row, Col, Descriptions, Table, Tabs, Tag, Avatar } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
@@ -10,12 +10,56 @@ import {
 import { ColumnType } from 'antd/lib/table/interface'
 import ReutrnEle from '@/components/ReturnEle'
 import styles from "./index.less"
+import { PublicApi } from '@/services/api'
+import { 
+  GetProductCommodityGetCommodityResponse, 
+  GetProductCommodityGetCommodityCheckRecordResponse, 
+  GetProductCommodityGetShopResponse 
+} from '@/services'
 
 const { Step } = Steps;
 const { TabPane } = Tabs;
 
 const viewProducts: React.FC<{}> = () => {
   
+  const [productDetail, setPorductDetail] = useState<GetProductCommodityGetCommodityResponse>()
+  const [checkRecord, setCheckRecord] = useState<GetProductCommodityGetCommodityCheckRecordResponse>()
+  const [productGetShop, setProductGetShop] = useState<GetProductCommodityGetShopResponse>()
+  const [fixStep, setFixStep] = useState(0)
+
+  useEffect(() => {
+    const { id } = history.location.query
+    if(id){
+      PublicApi.getProductCommodityGetCommodity({id: id}).then(res=>{
+        const { code, data } = res
+        if(code===1000){
+          console.log(data)
+          setPorductDetail(data)
+          if(data.status===1) setFixStep(0)
+          else if(data.status===2) setFixStep(1)
+          else if(data.status===3) setFixStep(2)
+          else if(data.status===4) setFixStep(2)
+          else if(data.status===5) setFixStep(3)
+          else if(data.status===6) setFixStep(3)
+        }
+      })
+      PublicApi.getProductCommodityGetCommodityCheckRecord({commodityId: id}).then(res=>{
+        const { code, data } = res
+        if(code===1000){
+          console.log(data)
+          setCheckRecord(data)
+        }
+      })
+      PublicApi.getProductCommodityGetShop({id: id}).then(res=>{
+        const { code, data } = res
+        if(code===1000){
+          console.log(data)
+          setProductGetShop(data)
+        }
+      })
+    }
+  }, [])
+
   const dataSource = [
     {
       key: '1',
@@ -145,20 +189,44 @@ const viewProducts: React.FC<{}> = () => {
     }
   ]
 
+  // 1 审核状态 2 商品状态
+  const renderStatus = (status: number, type: number) => {
+    let component: ReactNode = null
+    if(type===1){
+      if (status === 1)
+        component = (<><span className="commonStatusStop"></span>待提交审核</>)
+      else if (status === 2)
+        component = (<><span className="commonStatusModify"></span>待审核</>)
+      else if (status === 3)
+        component = (<><span className="commonStatusValid"></span>审核通过</>)
+      else if (status === 4)
+        component = (<><span className="commonStatusInvalid">审核不通过</span></>)
+    }
+    if (status === 5)
+      component = (<span style={{ color: '#00B37A', padding: '2px 5px', background: 'rgba(235,247,242,1)', borderRadius: '4px' }}>已上架</span>) 
+    else if (status === 6)
+      component = (<span style={{ padding: '2px 5px', background: 'rgba(244,245,247,1)', borderRadius: '4px' }}>已下架</span>)
+    return component
+  }
+
   const content = <>
       <Descriptions colon={true} style={{paddingLeft:128}}>
-        <Descriptions.Item label="商品品牌">APPLE</Descriptions.Item>
-        <Descriptions.Item label="商品品类">成品皮 --&gt; 牛皮 --&gt; 头层牛皮</Descriptions.Item>
-        <Descriptions.Item label="上架商城"><Avatar size="small" icon={<UserOutlined />} />&nbsp;<Avatar size="small" icon={<UserOutlined />} /></Descriptions.Item>
-        <Descriptions.Item label="审核状态"><span className="commonStatusValid"></span>审核通过</Descriptions.Item>
-        <Descriptions.Item label="商品状态"><span className="pruduct-status">已上架</span></Descriptions.Item>
+        <Descriptions.Item label="商品品牌">{productDetail?.brand?.name}</Descriptions.Item>
+        <Descriptions.Item label="商品品类">{productDetail?.customerCategoryName}</Descriptions.Item>
+        <Descriptions.Item label="上架商城">
+        {
+          productGetShop?.length>0 && productGetShop.map(item=><>{item.isCheck && item.name}&nbsp;</>)
+        }
+        </Descriptions.Item>
+        <Descriptions.Item label="审核状态">{renderStatus(productDetail?.status, 1)}</Descriptions.Item>
+        <Descriptions.Item label="商品状态">{renderStatus(productDetail?.status, 2)}</Descriptions.Item>
         <Descriptions.Item label="商品类型"><span className="commonStatusValid"></span>实物商品</Descriptions.Item>
       </Descriptions>
     </>
 
   return (
     <PageHeaderWrapper
-      title="进口头层牛皮荔枝纹"
+      title={productDetail?.name}
       onBack={() => history.goBack()}
       backIcon={<ReutrnEle logoSrc='https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' />}
       content={content}
@@ -170,9 +238,10 @@ const viewProducts: React.FC<{}> = () => {
     >
       <Space direction="vertical" style={{width:'100%'}}>
         <Card headStyle={{borderBottom:'none'}} title="流程进度">
-          <Steps progressDot current={2}>
+          <Steps progressDot current={fixStep}>
+            <Step title="新建商品" description="供应商" />
             <Step title="提交审核" description="供应商" />
-            <Step title="审核品牌" description="平台" />
+            <Step title="审核" description="平台" />
             <Step title="完成" description="" />
           </Steps>
         </Card>
@@ -186,7 +255,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>商品标语：</p>
                 </Col>
                 <Col span={20}>
-                  <p>厚1.407548530856、张幅12尺</p>
+                  <p>{productDetail?.slogan}</p>
                 </Col>
               </Row>
               <Row>
@@ -194,7 +263,8 @@ const viewProducts: React.FC<{}> = () => {
                   <p>商品卖点：</p>
                 </Col>
                 <Col span={20}>
-                  <p><Tag>双十一大促</Tag><Tag>新用户专享大礼包</Tag><Tag>成交量遥遥领先</Tag></p>
+                  {/* <p><Tag>双十一大促</Tag><Tag>新用户专享大礼包</Tag><Tag>成交量遥遥领先</Tag></p> */}
+                  <p>{productDetail?.sellingPoint}</p>
                 </Col>
               </Row>
               <Row>
@@ -202,7 +272,8 @@ const viewProducts: React.FC<{}> = () => {
                   <p>归属地市：</p>
                 </Col>
                 <Col span={20}>
-                  <p>广东省 / 广州市<br />新疆 / 克孜勒苏柯尔克孜自治州</p>
+                  {/* <p>广东省 / 广州市<br />新疆 / 克孜勒苏柯尔克孜自治州</p> */}
+                  <p>{productDetail?.area.toString()}</p>
                 </Col>
               </Row>
             </Card>
@@ -219,7 +290,7 @@ const viewProducts: React.FC<{}> = () => {
               </Row>
               <Row>
                 <Col span={4}>
-                  <p>运送方式：</p>
+                  <p>运费方式：</p>
                 </Col>
                 <Col span={20}>
                   <p>买家承担运费</p>
@@ -230,7 +301,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>重量：</p>
                 </Col>
                 <Col span={20}>
-                  <p>1.55KG（公斤）</p>
+                  <p>{productDetail?.logistics?.weight}KG（公斤）</p>
                 </Col>
               </Row>
               <Row>
@@ -246,7 +317,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>物流公司：</p>
                 </Col>
                 <Col span={20}>
-                  <p>顺丰</p>
+                  <p>{productDetail?.logistics?.company}</p>
                 </Col>
               </Row>
               <Row>
@@ -254,7 +325,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>发货地址：</p>
                 </Col>
                 <Col span={20}>
-                  <p>广东省广州市海珠区型钢东欧1068号中洲中心北塔6楼</p>
+                  <p>{productDetail?.logistics?.sendAddress}</p>
                 </Col>
               </Row>
             </Card>
@@ -266,7 +337,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>提供发票：</p>
                 </Col>
                 <Col span={20}>
-                  <p>是</p>
+                  <p>{productDetail?.isInvoice?'是':'否'}</p>
                 </Col>
               </Row>
               <Row>
@@ -274,7 +345,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>唛头：</p>
                 </Col>
                 <Col span={20}>
-                  <p>PELLE</p>
+                  <p>{productDetail?.marks}</p>
                 </Col>
               </Row>
               <Row>
@@ -282,7 +353,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>包装清单：</p>
                 </Col>
                 <Col span={20}>
-                  <p>商品*1，说明书*1</p>
+                  <p>{productDetail?.packing}</p>
                 </Col>
               </Row>
               <Row>
@@ -290,7 +361,7 @@ const viewProducts: React.FC<{}> = () => {
                   <p>售后服务：</p>
                 </Col>
                 <Col span={20}>
-                  <p>1年免费保修，7天免费退换</p>
+                  <p>{productDetail?.afterService}</p>
                 </Col>
               </Row>
             </Card>

src/pages/user/index.less

@@ -129,7 +129,8 @@
 
 .registerForm {
   max-width: 335px;
-  margin: 40px auto;
+  margin: 0px auto;
+  padding-top: 40px;
 }
 
 .registerBox {
@@ -138,14 +139,15 @@
   padding-bottom: 40px;
   background: #fff;
   padding-bottom: 40px;
+  .stepWrap {
+    height: 72px;
+    background: #FAFBFC;
+    padding: 0 115px;
+    .make-center(flexAlign);
+  }
 }
 
-.stepWrap {
-  height: 72px;
-  background: #FAFBFC;
-  padding: 0 115px;
-  .make-center(flexAlign);
-}
+
 
 .formBoxStep1 {
   width: 324px;

src/pages/user/register.tsx

@@ -11,7 +11,7 @@ import { FormPage } from 'god'
 import { IFormControllers, IFormButtonTypes } from 'god/dist/src/form-page'
 import { Link, history } from 'umi'
 import im_success from '../../../mockStatic/im_success.png'
-import { FormStep, FormBlock, Input, Password, Checkbox } from '@formily/antd-components'
+import { FormStep, FormBlock, Input, Password, Checkbox, setup } from '@formily/antd-components'
 import SchemaForm, { Field, FormMegaLayout, FormButtonGroup, createFormActions, FormEffectHooks } from '@formily/antd';
 import useCountDown from '@/utils/hooks';
 import { GlobalConfig } from '@/global/config';
@@ -49,7 +49,6 @@ const CustomCheckbox = props => {
 
 const CustomInput = props => {
   const { help, ...restProps } = props
-  console.log(props)
   return (
     <AntdInput
       {...restProps}
@@ -100,36 +99,10 @@ const UserRegistry = () => {
     { title: '注册成功', key: 'success', name: 'success' },
   ]
 
-  const handleOneSubmit = (values: any) => {
-    let obj = { ...values }
-    delete obj.readme
-    delete obj.confirm
-    console.log(obj, 'values')
-    PublicApi.postRegister(obj).then(res => {
-      console.log(res,'res')
-      // if(res.data.id) setCurrent(1)
-    })
-    if(values.phone) setCurrent(1)
-  }
-
   const handleJumpLogin = () => {
     history.push('/user/login')
   }
 
-  const onChange = (value: any) => {
-    console.log(value.target.value,'value')
-  }
-
-  const handleSecondSubmit = (values: any) => {
-    console.log(values,'values')
-    setCurrent(1.1)
-  }
-
-  const handleLicenseSubmit = (values: any) => {
-    console.log(values, 'values')
-    setCurrent(2)
-  }
-
   const [time, setTime] = useState(5); // timer
   // useEffect(() => {
   //   clearInterval(timeChange)
@@ -204,6 +177,7 @@ const UserRegistry = () => {
       label: v.typeName
     }
   })
+  console.log(mapMemberType)
 
   const mapServerType = GlobalConfig.userRegister.useType.businessType.map(v => {
     return {
@@ -220,7 +194,7 @@ const UserRegistry = () => {
       // 写死传入的区号
       formCache.countryCode = '+86'
       const params = omit(formCache, ['isRead', 'confirmPassword'])
-      PublicApi.postRegister(params).then(() => {
+      PublicApi.postMemberRegister(params).then(() => {
         actions.dispatch('onFormStepNext', {})
         setCurrent(current + 1)
       })
@@ -253,7 +227,7 @@ const UserRegistry = () => {
               current={current}
             >
             </FormStep>
-            <FormMegaLayout className={styles.registerForm} name='message'>
+            <FormMegaLayout className={styles.registerForm} name='message' visible={current === 0}>
               <Field name="phone" x-rules={{required: true, pattern: PATTERN_MAPS.phone}} x-component-props={{placeholder: '请输入你的手机号码', size: 'large'}} x-props={{addonBefore: <div className={styles.formBefore}>+86</div>}} x-component="Input" />
               <Field name="smsCode" x-rules={{required: true, pattern: PATTERN_MAPS.smsCode}} x-component-props={{ size: 'large', style: {width: 220}}} x-props={{addonAfter: <Button disabled={isActive} style={{minWidth: 110, marginLeft: 8}} size='large' onClick={start}>{text}</Button>}} x-component="Input" />
               <Field name="password" x-rules={{required: true, pattern: PATTERN_MAPS.password}} x-component-props={{ placeholder: '设置你的登录密码', size: 'large'}} x-component="Password" />

src/store/user/index.ts

-import {action, computed, observable, runInAction} from 'mobx'
-import { IUserModule } from '@/module/userModule';
+import { action, computed, observable, runInAction } from 'mobx'
+import { ILoginModule } from '@/module/userModule';
+// import { userDetailGet } from '@/services/user'
 
-const demoAsync = ():Promise<number> => new Promise(resolve => setTimeout(() => resolve(100), 2000))
+const userInfo = localStorage.getItem('userInfo')
 
-class UserStore implements IUserModule {
-  @observable public name: string = 'Bob';
-  @observable public age: number = 0;
+class LoginStore implements ILoginModule {
+  @observable public username: string = 'admin';
+  @observable public password: string = "123456";
+  @observable public res: object = {};
+  @observable public userInfo = userInfo ? JSON.parse(userInfo) : {}
+
+  // 可以改变对应的状态值
+  // @todo 接入更新用户信息接口
+  @action.bound
+  public async updateUserInfo() {
+    // try {
+    //   const res = await userDetailGet()
+    //   runInAction(() => {
+    //     this.userInfo = res.data;
+    //     localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
+    //   })
+    // } catch (error) {
+    //   return error
+    // }
+  }
 
   // 当有时需要拼接状态，但又不希望改变原有状态，可以采取如下, 类似vue中的computed
   @computed
-  public get printNameAndAge(): string {
-    return `hello, ${this.name}, your age is ${this.age}`
+  public get printInfo(): string {
+    return `hello, ${this.username}, your password is ${this.password}`
+  }
+
+  // 可以改变对应的状态值
+  @action.bound
+  public setUsername(username: string) {
+    this.username = username;
   }
 
-  // 可以改变存在name中的值
   @action.bound
-  public setName(name: string) {
-    this.name = name;
+  public setPassword(password: string) {
+    this.password = password;
   }
 
   // 异步修改数据, 需要使用bound，保持this指向当前store
   @action.bound
-  public async getAsyncAge() {
+  public async handleLogin() {
     try {
-      const result = await demoAsync()
+      let params = {
+        username: this.username,
+        password: this.password
+      }
+      const result = {}
       runInAction(() => {
-        this.age = result
+        this.res = result
       })
 
       return result
@@ -35,4 +62,4 @@ class UserStore implements IUserModule {
   }
 }
 
-export default UserStore
\ No newline at end of file
+export default LoginStore