Merge branch 'dev' into test

src/pages/home/components/AnyQuestion/index.less

@@ -29,6 +29,7 @@
     justify-content: center;
     font-size: 14px;
     margin-bottom: 16px;
+    cursor: pointer;
   }
 
   .ask_image {

src/pages/home/components/Centers/AfterSoldCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import { Row, Col } from 'antd';
+import styles from './center.less'
+import create_shop from '@/assets/imgs/create_shop.png';
+
+interface Iprops {};
+
+const SettlementAbility: React.FC<Iprops> = () => {
+  const data = [
+    {
+      id: 1,
+      list: [1,2,3,4]
+    },
+    {
+      id: 2,
+      list: [1,2,3,4]
+    },
+    {
+      id: 3,
+      list: [1,2,3,4,5]
+    },
+  ]
+  return (
+    <AbilityContainer 
+      title="售后中心" 
+      tips="轻松完成订单售后在线换货、退货、维修环节"
+      extra={
+        <a>进入售后中心</a>
+      }
+    >
+      <div>
+        {
+          data.map((record) => {
+            return (
+              <Row key={record.id} className={styles.row}>
+                <Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
+                <Col span={20} className={styles.colRow}>
+                  {
+                    record.list.map((item) => {
+                      return (
+                        <Col span={4} key={item}>
+                          <div className={styles.colTitle}>待提交审核咨询单</div>
+                          <div className={styles.colValue}>5</div>
+                        </Col>    
+                      )
+                    })
+                  }
+                </Col>
+              </Row>
+            )
+          })
+        }
+      </div>
+    </AbilityContainer>
+  )
+}
+
+export default SettlementAbility
\ No newline at end of file

src/pages/home/components/Centers/Container.less

+.container {
+  padding: 24px 24px 0 24px ;
+  background-color: #fff;
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .left {
+      .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #303133;
+        margin-bottom: 16px;
+      }
+
+      .tips {
+        font-size: 12px;
+        font-weight: 400;
+        color: #909399;
+      }
+    }
+  }
+
+  .body {
+    margin-top: 12px;
+  }
+}
\ No newline at end of file

src/pages/home/components/Centers/Container.tsx

+import React, { ReactNode } from 'react';
+import styles from './Container.less';
+
+interface Iprops {
+  /**
+   * 标题
+   */
+  title: string,
+  /**
+   * 标题下面的一行字
+   */
+  tips: string,
+  /**
+   * 主要用在header 右边连接ReactNode
+   */
+  extra?: ReactNode 
+};
+
+const AbilityContainer: React.FC<Iprops> = (props) => {
+  const { title = '', tips = '' } = props;
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.left}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.tips}>{tips}</div>
+        </div>
+        <div className={styles.extra}>
+          {props.extra}
+        </div>
+      </div>
+      <div className={styles.body}>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default AbilityContainer;
\ No newline at end of file

src/pages/home/components/Centers/LogisticsCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import styles from './center.less'
+import logistics from '@/assets/imgs/logistics.png';
+import logistics_form from '@/assets/imgs/logistics_form.png';
+import logistics_address from '@/assets/imgs/logistics_address.png';
+import logistics_cost from '@/assets/imgs/logistics_cost.png';
+
+
+interface Iprops {};
+
+const LogisticsCenter: React.FC<Iprops> = () => {
+  const data = [
+    {
+      icon: logistics,
+      text: '物流派单'
+    },
+    {
+      icon: logistics_form,
+      text: '接单报价'
+    },
+    {
+      icon: logistics_address,
+      text: '收货地址管理'
+    },
+    {
+      icon: logistics_address,
+      text: '发货地址管理'
+    },
+    {
+      icon: logistics_cost,
+      text: '运费模板'
+    }
+  ]
+  return (
+    <AbilityContainer 
+      title="物流中心" 
+      tips={"快速完成物流派单、接单、报价、物流信息对接"}
+      extra={
+        <a>进入物流中心</a>
+      }
+    >
+      <div className={styles.tags}>
+        {
+          data.map((item) => {
+            return (
+              <div className={styles.tagsItem} key={item.text}>
+                <div className={styles.icon}>
+                  <img src={item.icon} />
+                </div>
+                <div className={styles.text}>{item.text}</div>
+              </div>
+            )
+          })
+        }
+      </div>
+    </AbilityContainer>
+  )
+}
+
+export default LogisticsCenter
\ No newline at end of file

src/pages/home/components/Centers/ProcessCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import { Row, Col } from 'antd';
+import styles from './center.less'
+
+interface Iprops {};
+
+const ProcessCenter: React.FC<Iprops> = () => {
+  const data = [
+    {
+      id: 1,
+      list: [1,2,3,4]
+    },
+  ]
+  return (
+    <AbilityContainer 
+      title="加工中心" 
+      tips="提供外发生产、加工、装配全流程环节管控"
+      extra={
+        <a>进入加工中心</a>
+      }
+    >
+      {
+        data.map((record) => {
+          return (
+            <Row key={record.id} className={styles.row}>
+              <Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
+              <Col span={20} className={styles.colRow}>
+                {
+                  record.list.map((item) => {
+                    return (
+                      <Col span={4} key={item}>
+                        <div className={styles.colTitle}>待提交审核咨询单</div>
+                        <div className={styles.colValue}>5</div>
+                      </Col>    
+                    )
+                  })
+                }
+              </Col>
+            </Row>
+          )
+        })
+      }
+      
+    </AbilityContainer>
+  )
+}
+
+export default ProcessCenter
\ No newline at end of file

src/pages/home/components/Centers/ProductCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import { Row, Col, Space } from 'antd';
+import styles from './center.less'
+
+interface Iprops {};
+
+const ProductCenter: React.FC<Iprops> = () => {
+  const data = [
+    {
+      id: 1,
+      list: [1,2,3,4]
+    },
+  ]
+  return (
+    <AbilityContainer 
+      tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理" 
+      title="商品中心"
+      extra={
+        <Space>
+          <a>设置库存</a>
+          <a>创建品牌</a>
+          <a>创建商品</a>
+        </Space>
+      }
+    >
+      {
+        data.map((record) => {
+          return (
+            <Row key={record.id} className={styles.row}>
+              <Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
+              <Col span={20} className={styles.colRow}>
+                {
+                  record.list.map((item) => {
+                    return (
+                      <Col span={4} key={item}>
+                        <div className={styles.colTitle}>待提交审核咨询单</div>
+                        <div className={styles.colValue}>5</div>
+                      </Col>    
+                    )
+                  })
+                }
+              </Col>
+            </Row>
+          )
+        })
+      }
+      
+    </AbilityContainer>
+  )
+}
+
+export default ProductCenter
\ No newline at end of file

src/pages/home/components/Centers/SettlementCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import { Row, Col } from 'antd';
+import styles from './center.less'
+import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
+import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
+import settlement_accountReceive from '@/assets/imgs/settlement_accountReceive.png';
+import settlement_accountPayable from '@/assets/imgs/settlement_accountPayable.png';
+import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
+
+
+interface Iprops {};
+
+const SettlementCenter: React.FC<Iprops> = () => {
+  const data = [
+    {
+      id: 1,
+      list: [1,2,3,4]
+    },
+    {
+      id: 2,
+      list: [1,2,3,4]
+    },
+    {
+      id: 3,
+      list: [1,2,3,4,5]
+    },
+  ]
+  const tagsList = [
+    {
+      icon: settlement_platformCollection,
+      text: '平台代收款结算'
+    },
+    {
+      icon: settlement_integrate,
+      text: '平台积分结算'
+    },
+    {
+      icon: settlement_accountReceive,
+      text: '应收账款结算'
+    },
+    {
+      icon: settlement_accountPayable,
+      text: '应付账款结算'
+    },
+    {
+      icon: settlement_invoice,
+      text: '开票管理'
+    }
+  ]
+  return (
+    <AbilityContainer 
+      title="结算中心" 
+      tips="提供资资金结算、发票管理等功能"
+      extra={
+        <a>进入资金与结算中心</a>
+      }
+    >
+      <div>
+        <div className={styles.tags}>
+          {
+            tagsList.map((item) => {
+              return (
+                <div className={styles.tagsItem} key={item.text}>
+                  <div className={styles.icon}>
+                    <img src={item.icon} />
+                  </div>
+                  <div className={styles.text}>{item.text}</div>
+                </div>
+              )
+            })
+          }
+        </div>
+        <div>
+          {
+            data.map((record) => {
+              return (
+                <Row key={record.id} className={styles.row}>
+                  <Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
+                  <Col span={20} className={styles.colRow}>
+                    {
+                      record.list.map((item) => {
+                        return (
+                          <Col span={4} key={item}>
+                            <div className={styles.colTitle}>待提交审核咨询单</div>
+                            <div className={styles.colValue}>5</div>
+                          </Col>    
+                        )
+                      })
+                    }
+                  </Col>
+                </Row>
+              )
+            })
+          }
+        </div>
+      </div>
+    </AbilityContainer>
+  )
+}
+
+export default SettlementCenter
\ No newline at end of file

src/pages/home/components/Centers/ShopCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import styles from './center.less'
+import create_shop from '@/assets/imgs/create_shop.png';
+import { BellOutlined } from '@ant-design/icons'
+
+interface Iprops {}
+
+const ShopCenter: React.FC<Iprops> = () => {
+  return (
+    <AbilityContainer 
+      title="店铺中心" 
+      tips="轻松完成店铺的创建、店铺风格选择、店铺个性化装修"
+      extra={
+        <div>
+          <a>进入店铺中心</a>
+        </div>
+      }
+    >
+      <div className={styles.tags}>
+        <div className={styles.tagsSpecial} >
+          <div className={styles.tagsItem}>
+            <div className={styles.icon}>
+              <img src={create_shop} />
+            </div>
+            <div className={styles.text}>创建店铺</div>
+          </div>
+          <div className={styles.ding_tips}>
+            <div className={styles.ding_icon}>
+              <BellOutlined />
+            </div>
+            <span>你还没有创建店铺，请先创建店铺</span>
+          </div>
+        </div>
+        <div className={styles.tagsItem} >
+          <div className={styles.icon}>
+            <img src={create_shop} />
+          </div>
+          <div className={styles.text}>店铺模板</div>
+        </div>
+        <div className={styles.tagsItem} >
+          <div className={styles.icon}>
+            <img src={create_shop} />
+          </div>
+          <div className={styles.text}>店铺装修</div>
+        </div>
+      </div>
+    </AbilityContainer>
+  )
+}
+
+export default ShopCenter
\ No newline at end of file

src/pages/home/components/Centers/TradeCenter.tsx

+import React from 'react';
+import AbilityContainer from './Container';
+import { Row, Col } from 'antd';
+import styles from './center.less'
+
+interface Iprops {};
+
+const TradeCenter: React.FC<Iprops> = () => {
+  const data = [
+    {
+      id: 1,
+      list: [1,2,3,4]
+    },
+    {
+      id: 2,
+      list: [1,2,3,4]
+    },
+    {
+      id: 3,
+      list: [1,2,3,4,5]
+    },
+    {
+      id: 4,
+      list: [1,2,3,4,5,6]
+    },
+    {
+      id: 5,
+      list: [1,2,3,4,5,6]
+    },
+    {
+      id: 6,
+      list: [1]
+    }
+  ]
+  return (
+    <AbilityContainer 
+      title="交易中心" 
+      tips="提供在线发布需求，在线询价、在线报价、订单交易、签订电子合同等功能"
+      extra={
+        <div>
+          <a>进入交易中心</a>
+        </div>
+      }
+    >
+      {
+        data.map((record) => {
+          return (
+            <Row key={record.id} className={styles.row}>
+              <Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
+              <Col span={20} className={styles.colRow}>
+                {
+                  record.list.map((item) => {
+                    return (
+                      <Col span={4} key={item}>
+                        <div className={styles.colTitle}>待提交审核咨询单</div>
+                        <div className={styles.colValue}>5</div>
+                      </Col>    
+                    )
+                  })
+                }
+              </Col>
+            </Row>
+          )
+        })
+      }
+      
+    </AbilityContainer>
+  )
+}
+
+export default TradeCenter
\ No newline at end of file

src/pages/home/components/Centers/center.less

+.row {
+  padding: 24px 0;
+  .rowTitle {
+    font-size: 14;
+    font-weight: 400;
+    color: #303133;
+  }
+  
+  .colRow {
+    display: flex;
+    .colTitle {
+      font-size: 12px;
+      font-weight: 400;
+      color: #909399;;
+    }
+  
+    .colValue {
+      font-weight: 500;
+      font-size: 24px;
+      margin-top: 16px;
+      color: #303133;
+    
+      &:hover {
+        text-decoration: underline;
+        color: @main-color;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.tags {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .tagsItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px 16px;
+    background: #FAFBFC;
+    width: 212px;
+    margin: 0 16px 16px 0;
+    cursor: pointer;
+    align-self: flex-start;
+    // position: relative;
+
+    .icon {
+      width: 32px;
+      height: 32px;
+      margin-right: 16px;
+    }
+
+    .text {
+      font-size: 14px;
+      font-weight: 400;
+      color: #303133;
+    }
+
+    
+
+  }
+
+  .tagsSpecial {
+    display: flex;
+    flex-direction: column;
+
+    .ding_tips {
+      width: 212px;
+      color: @main-color;
+      background: rgba(0, 179, 122, 0.12);
+      padding: 10px;
+      display: flex;
+      flex-direction: row;
+      position: relative;
+
+      .ding_icon {
+        margin-right: 10px;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: -10px;
+        left: 20px;
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid rgba(0, 179, 122, 0.12);;
+      }
+    }
+  }
+}
+

src/pages/home/components/Centers/index.tsx

+import TradeCenter from './TradeCenter';
+import ShopCenter from './ShopCenter';
+import ProductCenter from './ProductCenter';
+import SettlementCenter from './SettlementCenter';
+import AfterSoldCenter from './AfterSoldCenter'
+import LogisticsCenter from './LogisticsCenter'
+import ProcessCenter from './ProcessCenter';
+
+export {
+  TradeCenter,
+  ShopCenter,
+  ProductCenter,
+  SettlementCenter,
+  AfterSoldCenter,
+  LogisticsCenter,
+  ProcessCenter
+}
\ No newline at end of file

src/pages/home/components/CustomWorkBench/Draggable.tsx

+import React, {useState, useCallback, useMemo, useEffect} from 'react';
+
+const POSITION = {x: 0, y: 0};
+
+const Draggable = ({children, id, onDrag, onDragEnd}) => {
+  const [state, setState] = useState({
+    isDragging: false,
+    origin: POSITION,
+    translation: POSITION
+  });
+    
+  const handleMouseDown = useCallback(({clientX, clientY}) => {
+    setState(state => ({
+      ...state,
+      isDragging: true,
+      origin: {x: clientX, y: clientY}
+    }));
+  }, []);
+    
+  const handleMouseMove = useCallback(({clientX, clientY}) => {
+    const translation = {x: clientX - state.origin.x, y: clientY - state.origin.y};
+        
+    setState(state => ({
+      ...state,
+      translation
+    }));
+        
+    onDrag({translation, id});
+  }, [state.origin, onDrag, id]);
+    
+  const handleMouseUp = useCallback(() => {
+    setState(state => ({
+      ...state,
+      isDragging: false
+    }));
+        
+    onDragEnd();
+  }, [onDragEnd]);
+    
+  useEffect(() => {
+    if (state.isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    } else {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+
+      setState(state => ({...state, translation: {x: 0, y: 0}}));
+    }
+  }, [state.isDragging, handleMouseMove, handleMouseUp]);
+    
+  const styles = useMemo(() => ({
+    cursor: state.isDragging ? '-webkit-grabbing' : '-webkit-grab',
+    transform: `translate(${state.translation.x}px, ${state.translation.y}px)`,
+    transition: state.isDragging ? 'none' : 'transform 500ms',
+    zIndex: state.isDragging ? 2 : 1,
+    
+    position: state.isDragging ? 'absolute' : 'static'
+  }), [state.isDragging, state.translation]);
+    
+  return (
+    <div style={styles} onMouseDown={handleMouseDown}>
+      {children}
+    </div>
+  );
+};
+
+export default Draggable;
\ No newline at end of file

src/pages/home/components/CustomWorkBench/SortedList.tsx

+import React, {useState, useCallback} from 'react';
+import styled from 'styled-components';
+import {range, inRange} from 'lodash';
+import Draggable from './Draggable';
+import { Checkbox } from 'antd';
+
+const MAX = 11;
+const HEIGHT = 40;
+
+const SortedList = () => {
+  const items = range(MAX);
+  const [state, setState] = useState({
+    order: items,
+    dragOrder: items, 
+    draggedIndex: null
+  });
+    
+  const handleDrag = useCallback(({translation, id}) => {
+    const delta = Math.round(translation.y / HEIGHT);
+    const index = state.order.indexOf(id);
+    const dragOrder = state.order.filter(index => index !== id);
+        
+    if (!inRange(index + delta, 0, items.length)) {
+      return;
+    }
+        
+    dragOrder.splice(index + delta, 0, id);
+        
+    setState(state => ({
+      ...state,
+      draggedIndex: id,
+      dragOrder
+    }));
+  }, [state.order, items.length]);
+    
+  const handleDragEnd = useCallback(() => {
+    setState(state => ({
+      ...state,
+      order: state.dragOrder,
+      draggedIndex: null
+    }));
+  }, []);
+    
+  return (
+    <Container>
+      {items.map(index => {
+        const isDragging = state.draggedIndex === index;
+        const top = state.dragOrder.indexOf(index) * (HEIGHT + 10);
+        const draggedTop = state.order.indexOf(index) * (HEIGHT + 10);
+                
+        return (
+          <Draggable
+            key={index}
+            id={index}
+            onDrag={handleDrag}
+            onDragEnd={handleDragEnd}
+          >
+            <Rect
+              isDragging={isDragging}
+              top={isDragging ? draggedTop : top}
+            >
+              <div>交易能力-{`${index}`}</div>
+              <div><Checkbox /></div>
+            </Rect>
+          </Draggable>
+        );
+      })}
+    </Container>
+  );
+};
+
+export default SortedList;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  position: relative;
+  height: 522px;
+`;
+
+const Rect = styled.div.attrs(props => ({
+  style: {
+    transition: props.isDragging ? 'none' : 'all 500ms'
+  }
+}))`
+  width: 352px;
+  user-select: none;
+  height: ${HEIGHT}px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;  
+  border: 1px solid #EEF0F3;
+  padding: 14px 16px;
+  margin-bottom: 12px;
+  background: #fff;
+  position: absolute;
+  top: ${({top}) => top}px;
+  left: 0
+`;
\ No newline at end of file

src/pages/home/components/CustomWorkBench/index.tsx

@@ -3,6 +3,7 @@ import { Modal, Button, Checkbox } from 'antd';
 import { AppstoreOutlined } from '@ant-design/icons';
 import styles from './index.less';
 import { CloseOutlined } from '@ant-design/icons';
+import SortedList from './SortedList';
 
 interface Iprops {}
 
@@ -41,16 +42,7 @@ const CustomWorkBench: React.FC<Iprops> = () => {
             </div>
           </div>
           <div className={styles.content}>
-            {
-              [1,2,3,4,5,6,7,8,9,10].map((item) => {
-                return (
-                  <div className={styles.item} key={item}>
-                    <div className={styles.name}>交易能力</div>
-                    <div><Checkbox /></div>
-                  </div>
-                )
-              })
-            }
+            <SortedList />
           </div>
           <div className={styles.footer}>
             <div className={styles.sortTips}>

src/pages/home/components/UseGuaid/index.less

@@ -84,25 +84,3 @@
   }
 }
 
-.controller {
-  background-color: @main-color;
-  width: 181px;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  color: #fff;
-  display: flex;
-  flex-direction: row;
-  margin-top: 24px;
-  margin-left: auto;
-  cursor: pointer;
-
-  .icon {
-    font-size: 24px;
-  }
-  .text {
-    margin-left: 8px;
-  }
-}
\ No newline at end of file

src/pages/home/components/UseGuaid/index.tsx

@@ -65,10 +65,7 @@ const UseGuaid: React.FC<{}> = () => {
           </Col>
         </Row>
       </Space>
-      <div className={styles.controller}>
-        <CompassFilled className={styles.icon} /> 
-        <span className={styles.text}>使用向导</span>
-      </div>
+      
     </div>
   )
 }

src/pages/home/index.less

+.userGuaid {
+  margin-bottom: 24px;
+}
+
 .main {
   display: flex;
   flex-direction: row;
@@ -6,6 +10,10 @@
     // flex-basis: 1206px;
     margin-right: 23px;
     flex: 1;
+
+    .ability {
+      margin-top: 24px;
+    }
   }
   
   .rightSide {
@@ -17,5 +25,27 @@
     .announce {
       margin-top: 24px;
     }
+
+    .controller {
+      background-color: @main-color;
+      width: 181px;
+      height: 48px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 8px;
+      color: #fff;
+      display: flex;
+      flex-direction: row;
+      margin-left: auto;
+      cursor: pointer;
+    
+      .icon {
+        font-size: 24px;
+      }
+      .text {
+        margin-left: 8px;
+      }
+    }
   }
 }
\ No newline at end of file

src/pages/home/index.tsx

@@ -8,22 +8,54 @@ import LatestAnnounce from './components/LatestAnnounces';
 import RecentVisit from './components/RecentVisit';
 import AnyQuestion from './components/AnyQuestion';
 import AdvertisementSpace from './components/AdvertisementSpace';
+import { TradeCenter, ShopCenter, ProductCenter, SettlementCenter, AfterSoldCenter, LogisticsCenter, ProcessCenter } from './components/Centers';
 import styles from './index.less'
+import { CompassFilled } from '@ant-design/icons';
 
 const Home: React.FC<{}> = () => {
+  const [visible, setVisible] = useState(false);
   return (
     <PageHeaderWrapper>
+      <>
+        <div className={styles.userGuaid} style={{display: visible ? 'block': 'none'}}>
+          <UseGuaid/>
+        </div>
         <div className={styles.main}>
           <div className={styles.mainSide}>
             <div>
               <UserCenter />
             </div>
-          
+            <div className={styles.ability}>
+              <TradeCenter />
+            </div>
+            <div className={styles.ability}>
+              <ShopCenter />
+            </div>
+            <div className={styles.ability}>
+              <ProductCenter />
+            </div>
+            <div className={styles.ability}>
+              <SettlementCenter />
+            </div>
+            <div className={styles.ability}>
+              <AfterSoldCenter />
+            </div>
+            <div className={styles.ability}>
+              <LogisticsCenter />
+            </div>
+            <div className={styles.ability}>
+              <ProcessCenter />
+            </div>
           </div>
           <div className={styles.rightSide}>
             <Row gutter={24}>
               <Col><CustomWorkBench /></Col>
-            <Col><CustomWorkBench /></Col>
+              <Col>
+                <div className={styles.controller} onClick={() => setVisible((state) => !state)}>
+                  <CompassFilled className={styles.icon} /> 
+                  <span className={styles.text}>使用向导</span>
+                </div>
+              </Col>
             </Row>
             <div className={styles.announce}>
               <LatestAnnounce />
@@ -34,18 +66,19 @@ const Home: React.FC<{}> = () => {
             <div className={styles.announce}>
               <AnyQuestion />
             </div>
-          <div className={styles.announce}>
-            <AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
-          </div>
-          <div className={styles.announce}>
-            <AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
-          </div>
-          <div className={styles.announce}>
+            {
+              [1,2,3,4].map((item) => {
+                return (
+                  <div className={styles.announce} key={item}>
                     <AdvertisementSpace title="方案中心" urlLink="" urlText="前往购买" tips="" />
                   </div>      
+                )
+              })
+            }
+          
           </div>
         </div>
-      
+      </>
     </PageHeaderWrapper>
   )
 }

src/pages/lxMall/commodityDetail/index.tsx

@@ -348,7 +348,7 @@ const CommodityDetail = (props) => {
           postFn = PublicApi.postSearchShopPurchaseSaveOrUpdatePurchase
           break;
       }
-      PublicApi.postOrderDirectPayment({ productId: selectCommodityId }).then(res => {
+      PublicApi.postOrderDirectPayment({ productId: selectCommodityId, memberId }).then(res => {
         if (res.code === 1000) {
           message.destroy()
           postFn && postFn(param).then(res => {
@@ -362,6 +362,8 @@ const CommodityDetail = (props) => {
             clickFlag = true
           })
         }
+      }).catch(() => {
+        clickFlag = true
       })
     }
   }
@@ -468,7 +470,7 @@ const CommodityDetail = (props) => {
             category: commodityDetail.customerCategory.name,
             brand: commodityDetail.brand.name,
             stockCount: stockCount,
-            commodityPic: attrAndValList.commodityPic ? attrAndValList.commodityPic[0] : '',
+            commodityPic: attrAndValList.commodityPic ? attrAndValList.commodityPic[0] : commodityDetail.mainPic,
             attribute: attrAndValList.attributeAndValueList
           }
 
@@ -480,6 +482,7 @@ const CommodityDetail = (props) => {
             supplyMembersName: commodityDetail.memberName,
             supplyMembersId: commodityDetail.memberId,
             supplyMembersRoleId: commodityDetail.memberRoleId,
+            isInvoice: commodityDetail.isInvoice,
             orderList: [{
               id: shopInfo.id,
               shopname: shopInfo.company,
@@ -497,6 +500,8 @@ const CommodityDetail = (props) => {
         } else {
           clickFlag = true
         }
+      }).catch(() => {
+        clickFlag = true
       })
     }
 

src/pages/lxMall/order/index.tsx

@@ -423,7 +423,9 @@ const Order: React.FC<OrderPropsType> = (props) => {
               }
               <PayWay supplyMembersId={orderInfo.supplyMembersId} supplyMembersRoleId={orderInfo.supplyMembersRoleId}  selectItem={selectPayWay} payWayList={orderInfo.payWayList} onChange={(val) => setSelectPayWay(val)} />
               {/* <Delivery /> */}
-              <Invoice state={needTheInvoice} onChange={(val) => setNeedTheInvoice(val)} onSelect={(val) => setSelectInvoiceInfo(val)} />
+              {
+                orderInfo.isInvoice && <Invoice state={needTheInvoice} onChange={(val) => setNeedTheInvoice(val)} onSelect={(val) => setSelectInvoiceInfo(val)} />
+              }
               {
                 isElectronicContract && <Contract contractInfo={contractInfo} state={needTheContract} onChange={(val) => setneedTheContract(val)} />
               }