feat:换货详情页面

src/pages/afterService/components/DescribeLine/index.less

+.describeline_wrap {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  background: #F7F8FA;
+  margin: 24px 0;
+}
+
+.describeline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.describeline_item {
+  display: flex;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 8px 0;
+
+  &_title {
+    width: 100px;
+    text-align: left;
+    color: #909399;
+  }
+
+  &_value {
+    flex: 1;
+    color: #303133;
+
+    label {
+      display: block;
+      margin-bottom: 12px;
+    }
+
+    p {
+      line-height: 20px;
+      margin-bottom: 8px;
+    }
+  }
+}
\ No newline at end of file

src/pages/afterService/components/DescribeLine/index.tsx

+import React from 'react'
+import { Row, Col } from 'antd'
+import styles from './index.less'
+
+interface DescribeLineItemPropsType {
+  title: string
+}
+
+interface DescribeLineType {
+  Item: typeof DescribeLineItem,
+}
+
+interface DescribeLinePropsType {
+  column?: number,
+}
+
+export const DescribeLineWrap: React.FC = (props) => {
+  const { children } = props
+  return <div className={styles.describeline_wrap}>
+    {children}
+  </div>
+}
+
+const DescribeLine: DescribeLineType & React.FC<DescribeLinePropsType> = (props) => {
+  const { column = 3, children } = props
+  const columnWidth = (100 / column) + '%'
+
+  return (
+    <div className={styles.describeline}>
+      {
+        React.Children.map(children, (child, index) => (
+          <div style={{ width: columnWidth }}>{child}</div>
+        ))
+      }
+    </div>
+  )
+}
+
+const DescribeLineItem: React.FC<DescribeLineItemPropsType> = (props) => {
+  const { title, children } = props
+  return (
+    <div className={styles.describeline_item}>
+      <div className={styles.describeline_item_title}>{title}：</div>
+      <div className={styles.describeline_item_value}>{children}</div>
+    </div>
+  )
+}
+
+DescribeLine.Item = DescribeLineItem
+
+export default DescribeLine

src/pages/afterService/components/SatisfactionProgress/index.less

+.progress_wrap {
+  display: flex;
+  justify-content: center;
+  padding-top: 24px;
+  position: relative;
+
+  .progress_value {
+    position: absolute;
+    bottom: 10px;
+
+    &>.rate {
+      text-align: center;
+      font-size: 24px;
+      color: #303133;
+      line-height: 32px;
+      font-weight: 500;
+    }
+
+    &>.rate_text {
+      font-size: 12px;
+      color: #909399;
+      line-height: 20px;
+    }
+  }
+
+  .pointer_wrap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin: auto;
+    width: 16px;
+    height: 16px;
+    z-index: 3;
+
+    .pointer_circle {
+      position: relative;
+      width: 16px;
+      height: 16px;
+      border: 3px solid #B3BAC5;
+      border-radius: 50%;
+      z-index: 2;
+    }
+
+    .pointer {
+      position: absolute;
+      left: 13px;
+      top: 6px;
+      width: 0;
+      height: 0;
+      border-left: 36px solid #DFE1E6;
+      border-top: 5px solid transparent;
+      z-index: 1;
+    }
+  }
+}
\ No newline at end of file

src/pages/afterService/components/SatisfactionProgress/index.tsx

+import React, { useState, useEffect } from 'react'
+import { Progress } from 'antd'
+import styles from './index.less'
+
+interface SatisfactionProgressPropsType {
+  value: number
+}
+
+const SatisfactionProgress: React.FC<SatisfactionProgressPropsType> = (props) => {
+  const { value = 5 } = props
+  const [strokeColor, setStrokeColor] = useState<string>('#41CC9E')
+  const [percent, setPercent] = useState<number>(100)
+  const [text, setText] = useState<string>('')
+
+
+  useEffect(() => {
+    initProgress()
+  }, [value])
+
+  const initProgress = () => {
+    switch (value) {
+      case 1:
+        setStrokeColor('#EF6260')
+        setPercent(20)
+        setText('非常不满意')
+        break
+      case 2:
+        setStrokeColor('#FFC400')
+        setPercent(40)
+        setText('不满意')
+        break
+      case 3:
+        setStrokeColor('#6C9CEB')
+        setPercent(60)
+        setText('一般')
+        break
+      case 4:
+        setStrokeColor('#41CC9E')
+        setPercent(80)
+        setText('满意')
+        break
+      case 5:
+        setStrokeColor('#41CC9E')
+        setPercent(100)
+        setText('非常满意')
+        break
+      default:
+        break
+    }
+
+  }
+
+  return (
+    <div className={styles.progress_wrap}>
+      <Progress
+        percent={percent}
+        // success={{ percent: 30 }}
+        trailColor="#F4F5F7"
+        strokeColor={strokeColor}
+        type="dashboard"
+        strokeWidth={9}
+        showInfo={false}
+        strokeLinecap="square"
+        gapDegree={100}
+        width={180}
+      />
+      <div className={styles.pointer_wrap}>
+        <div className={styles.pointer_circle}></div>
+        <div className={styles.pointer}></div>
+      </div>
+      <div className={styles.progress_value}>
+        <div className={styles.rate}>{value}分</div>
+        <div className={styles.rate_text}>{text}</div>
+      </div>
+    </div>
+  )
+}
+
+export default SatisfactionProgress

src/pages/afterService/exchangeGoods/orderPreview/components/faultFileList/index.less

+.file_list {
+  padding-top: 16px;
+
+  &_item {
+    width: 100%;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    background: #F4F5F7;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    color: #00B37A;
+    padding: 0 8px;
+
+    .file_type {
+      margin-right: 4px;
+
+      &>img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .del_btn {
+      color: #909399;
+      font-size: 14px;
+      cursor: pointer;
+      margin-left: auto;
+    }
+  }
+}
\ No newline at end of file

src/pages/afterService/exchangeGoods/orderPreview/components/faultFileList/index.tsx

+import React, { useState } from 'react'
+import { Card } from 'antd'
+import fileTypeDoc from './imgs/file_type_doc.png'
+import fileTypeOther from './imgs/file_type_other.png'
+import fileTypePhoto from './imgs/file_type_photo.png'
+import styles from '../index.less'
+import fileStyles from './index.less'
+
+
+interface FaultFileListPropsType {
+
+}
+
+const mock = [{
+  id: 1,
+  fileName: '验货详情.doc',
+  filePath: '',
+},
+{
+  id: 2,
+  fileName: '不良情况.png',
+  filePath: '',
+},
+{
+  id: 3,
+  fileName: '其他.other',
+  filePath: '',
+}]
+
+
+const FaultFileList: React.FC<FaultFileListPropsType> = (props) => {
+  const { } = props
+  const [fileList, setFileList] = useState<any>(mock)
+
+
+  const docFileTypeList = ['doc', 'docx', 'docm', 'xlsx', 'xlsm', 'pptx', 'xls']
+  const photoFileTypeList = ['png', 'jpg', 'jpeg', 'gif']
+
+  const getFileTypeByName = (fileName: string) => {
+    if (fileName && typeof fileName === 'string') {
+      let fileType = fileName.split('.')[1]
+      if (fileType) {
+        if (docFileTypeList.includes(fileType)) {
+          return <img src={fileTypeDoc} />
+        } else if (photoFileTypeList.includes(fileType)) {
+          return <img src={fileTypePhoto} />
+        } else {
+          return <img src={fileTypeOther} />
+        }
+      }
+    }
+  }
+
+  return (
+    <Card className={styles.card_wrap}>
+      <div className={styles.card_title}>相关不良原因举证附件</div>
+      <div className={fileStyles.file_list}>
+        {
+          fileList && fileList.map((item, index) => (
+            <div key={`file_list_item_${index}`} className={fileStyles.file_list_item}>
+              <i className={fileStyles.file_type}>
+                {
+                  getFileTypeByName(item.fileName)
+                }
+              </i>
+              <span>{item.fileName}</span>
+            </div>
+          ))
+        }
+      </div>
+    </Card>
+  )
+}
+
+export default FaultFileList

src/pages/afterService/exchangeGoods/orderPreview/components/index.less

 .card_wrap {
   position: relative;
+  height: 100%;
 
   &:not(:last-child) {
     margin-bottom: 24px;
@@ -54,3 +55,7 @@
     }
   }
 }
+
+.padTop8 {
+  padding-top: 8px;
+}
\ No newline at end of file

src/pages/afterService/exchangeGoods/orderPreview/components/orderProcess/index.tsx

@@ -29,8 +29,8 @@ const OrderProcess: React.FC<OrderProcessPropsType> = (props) => {
             <TabPane tab="外部流转" key="1">
               <Steps className={styles.steps_wrap} progressDot current={outerTaskList.length - 1} size="small">
                 {
-                  outerTaskList && outerTaskList.map(item => (
-                    <Step title={item.taskName} description={item.roleName} />
+                  outerTaskList && outerTaskList.map((item, index) => (
+                    <Step key={`outerTaskList_${index}`} title={item.taskName} description={item.roleName} />
                   ))
                 }
               </Steps>
@@ -38,8 +38,8 @@ const OrderProcess: React.FC<OrderProcessPropsType> = (props) => {
             <TabPane tab="内部流转" key="2">
               <Steps className={styles.steps_wrap} progressDot current={outerTaskList.length - 1} size="small">
                 {
-                  innerTaskList && outerTaskList.map(item => (
-                    <Step title={item.taskName} description={item.roleName} />
+                  innerTaskList && outerTaskList.map((item, index) => (
+                    <Step key={`innerTaskList_${index}`} title={item.taskName} description={item.roleName} />
                   ))
                 }
               </Steps>
@@ -50,8 +50,8 @@ const OrderProcess: React.FC<OrderProcessPropsType> = (props) => {
               <div className={styles.card_title}>外部流转</div>
               <Steps className={styles.steps_wrap} progressDot current={outerTaskList.length - 1} size="small">
                 {
-                  outerTaskList && outerTaskList.map(item => (
-                    <Step title={item.taskName} description={item.roleName} />
+                  outerTaskList && outerTaskList.map((item, index) => (
+                    <Step key={`outerTaskList_${index}`} title={item.taskName} description={item.roleName} />
                   ))
                 }
               </Steps>

src/pages/afterService/exchangeGoods/orderPreview/components/replaceAddress/index.tsx

+import React from 'react'
+import { Card } from 'antd'
+import DescribeLine from '../../../../components/DescribeLine'
+import styles from '../index.less'
+
+interface ReplaceAddressPropsType {
+
+}
+
+const ReplaceAddress: React.FC<ReplaceAddressPropsType> = (props) => {
+  const { } = props
+
+  return (
+    <Card className={styles.card_wrap}>
+      <div className={styles.card_title}>换货收货地址</div>
+      <div className={styles.padTop8}>
+        <DescribeLine.Item title="配送方式">物流</DescribeLine.Item>
+        <DescribeLine.Item title="退货收货地址">
+          <label>张三 / 185 2929 6475</label>
+          <p>广东省广州市海珠区新港东路1068号中洲中心北塔6楼</p>
+        </DescribeLine.Item>
+        <DescribeLine.Item title="退货发货地址">
+          <label>张三 / 185 2929 6475</label>
+          <p>广东省广州市海珠区新港东路1068号中洲中心北塔6楼</p>
+        </DescribeLine.Item>
+      </div>
+    </Card>
+  )
+}
+
+export default ReplaceAddress

src/pages/afterService/exchangeGoods/orderPreview/components/returnAddress/index.tsx

+import React from 'react'
+import { Card } from 'antd'
+import DescribeLine from '../../../../components/DescribeLine'
+import styles from '../index.less'
+
+interface ReturnAddressPropsType {
+
+}
+
+const ReturnAddress: React.FC<ReturnAddressPropsType> = (props) => {
+  const { } = props
+
+  return (
+    <Card className={styles.card_wrap}>
+      <div className={styles.card_title}>退货收货地址</div>
+      <div className={styles.padTop8}>
+        <DescribeLine.Item title="配送方式">物流</DescribeLine.Item>
+        <DescribeLine.Item title="退货收货地址">
+          <label>张三 / 185 2929 6475</label>
+          <p>广东省广州市海珠区新港东路1068号中洲中心北塔6楼</p>
+        </DescribeLine.Item>
+        <DescribeLine.Item title="退货发货地址">
+          <label>张三 / 185 2929 6475</label>
+          <p>广东省广州市海珠区新港东路1068号中洲中心北塔6楼</p>
+        </DescribeLine.Item>
+      </div>
+    </Card>
+  )
+}
+
+export default ReturnAddress

src/pages/afterService/exchangeGoods/orderPreview/components/returnGoods/detailed.tsx

 import React from 'react'
-import { Descriptions } from 'antd'
 import cx from 'classnames'
+import { Button, Table } from 'antd'
+import EyePreview from '@/components/EyePreview'
+import DescribeLine, { DescribeLineWrap } from '../../../../components/DescribeLine'
 import styles from './index.less'
 
 interface ReturnDetailedPropsType { }
 
 const ReturnDetailed: React.FC<ReturnDetailedPropsType> = (props) => {
 
+  let descriptionList = [
+    {
+      label: '换货发货单号',
+      value: 'FH5421036'
+    },
+    {
+      label: '物流单号',
+      value: 'WL0954548'
+    },
+    {
+      label: '换货入库单号',
+      value: 'RK535435'
+    },
+    {
+      label: '发货时间',
+      value: '2020-08-25 15:35'
+    },
+    {
+      label: '物流公司',
+      value: '顺丰'
+    },
+    {
+      label: '入库时间',
+      value: '2020-08-25 15:35'
+    }
+  ]
+
+  const columns = [
+    {
+      title: '订单号',
+      dataIndex: 'applyNo',
+      key: 'applyNo',
+      render: (text, record) => {
+        // 查看订单, 需根据状态显示不同schema
+        return <EyePreview url={`/`}>
+          {text}
+        </EyePreview>
+      },
+      ellipsis: true,
+    },
+    {
+      title: 'ID',
+      dataIndex: 'operator',
+      ellipsis: true,
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'status',
+      ellipsis: true,
+    },
+    {
+      title: '品类',
+      dataIndex: 'operate',
+      ellipsis: true,
+    },
+    {
+      title: '品牌',
+      dataIndex: 'operateTime',
+      ellipsis: true,
+    },
+    {
+      title: '单位',
+      dataIndex: 'opinion',
+      ellipsis: true,
+    },
+    {
+      title: '换货数量',
+      dataIndex: 'opinion',
+      ellipsis: true,
+    },
+    {
+      title: '退货发货数量',
+      dataIndex: 'opinion',
+      ellipsis: true,
+    },
+    {
+      title: '退货入库数量',
+      dataIndex: 'opinion',
+      ellipsis: true,
+    },
+    {
+      title: '差异数量',
+      dataIndex: 'opinion',
+      ellipsis: true,
+    },
+  ]
+
+
   return (
     <div className={styles.detailed_wrap}>
       <div className={styles.batch_list}>
@@ -14,12 +104,31 @@ const ReturnDetailed: React.FC<ReturnDetailedPropsType> = (props) => {
         <div className={styles.batch_list_item}>第二批次</div>
         <div className={styles.batch_list_item}>第三批次</div>
       </div>
-      <div className={styles.detail_description_wrap}>
-        <div className={styles.detail_description_item}></div>
-        <div className={styles.detail_description_item}></div>
-        <div className={styles.detail_description_item}></div>
+      <DescribeLineWrap>
+        <div className={styles.detail_description_main}>
+          <DescribeLine>
+            {
+              descriptionList.map((item, index) => (
+                <DescribeLine.Item key={`describeline_item_${index}`} title={item.label}>{item.value}</DescribeLine.Item>
+              ))
+            }
+          </DescribeLine>
         </div>
-
+        <div className={styles.detail_description_item}>
+          <DescribeLine.Item title="内部状态">
+            已确认退货回单
+          </DescribeLine.Item>
+        </div>
+        <div className={cx(styles.detail_description_item, styles.right)}>
+          <Button type="link">确认退货回单</Button>
+        </div>
+      </DescribeLineWrap>
+      <Table
+        className="common_tb"
+        dataSource={[{}, {}]}
+        rowClassName={(_, index) => (index === 0 || (index % 2) === 0) && "tb_bg"}
+        columns={columns}
+      />
     </div>
   )
 }

src/pages/afterService/exchangeGoods/orderPreview/components/returnGoods/index.less

@@ -24,5 +24,20 @@
   .detail_description {
     margin-top: 24px;
     background: #F7F8FA;
+
+
+  }
+
+  .detail_description_main {
+    flex: 1;
+    width: 70%;
+  }
+
+  .detail_description_item {
+    width: 15%;
+
+    &.right {
+      text-align: right;
+    }
   }
 }
\ No newline at end of file

src/pages/afterService/exchangeGoods/orderPreview/components/satisfaction/index.tsx

+import React from 'react'
+import { Card, Progress } from 'antd'
+import SatisfactionProgress from '../../../../components/SatisfactionProgress'
+import styles from '../index.less'
+
+interface SatisfactionPropsType {
+
+}
+
+const Satisfaction: React.FC<SatisfactionPropsType> = (props) => {
+  const { } = props
+
+  return (
+    <Card className={styles.card_wrap}>
+      <div className={styles.card_title}>售后评价</div>
+      <SatisfactionProgress value={1} />
+    </Card>
+  )
+}
+
+export default Satisfaction

src/pages/afterService/exchangeGoods/orderPreview/index.tsx

@@ -7,6 +7,10 @@ import ReplaceGoods from './components/replaceGoods'
 import ReturnGoods from './components/returnGoods'
 import ReplaceDetail from './components/replaceDetail'
 import HistoryLog from './components/historyLog'
+import FaultFileList from './components/faultFileList'
+import ReturnAddress from './components/returnAddress'
+import ReplaceAddress from './components/replaceAddress'
+import Satisfaction from './components/satisfaction'
 
 interface OrderPreviewPropsType { }
 
@@ -161,10 +165,10 @@ const OrderPreview: React.FC<OrderPreviewPropsType> = (props) => {
         <ReturnGoods />
         <ReplaceDetail />
         <Row gutter={[24, 24]}>
-          <Col xxl={6} xl={12} lg={12} ><HistoryLog /></Col>
-          <Col xxl={6} xl={12} lg={12} ><HistoryLog /></Col>
-          <Col xxl={6} xl={12} lg={12} ><HistoryLog /></Col>
-          <Col xxl={6} xl={12} lg={12} ><HistoryLog /></Col>
+          <Col xxl={6} xl={12} lg={12} ><FaultFileList /></Col>
+          <Col xxl={6} xl={12} lg={12} ><ReturnAddress /></Col>
+          <Col xxl={6} xl={12} lg={12} ><ReplaceAddress /></Col>
+          <Col xxl={6} xl={12} lg={12} ><Satisfaction /></Col>
         </Row>
         <HistoryLog />
       </OrderDetailWrapper>

src/pages/lxMall/purchaseOrder/index.tsx

@@ -554,7 +554,17 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
 
             updateOrderInfo(buyOrderInfo, sessionKey).then(() => {
               if (res.data) {
+                switch (layoutType) {
+                  case LAYOUT_TYPE.channel:
+                    history.push(`${GlobalConfig.channelRootRoute}/order?spam_id=${sessionKey}&scence=purchase`)
+                    break
+                  case LAYOUT_TYPE.ichannel:
+                    history.push(`${GlobalConfig.ichannelRootRoute}/order?spam_id=${sessionKey}&scence=purchase`)
+                    break
+                  default:
                     history.push(`/order?spam_id=${sessionKey}&scence=purchase`)
+                    break
+                }
               } else {
                 history.push(`/memberCenter/tranactionAbility/purchaseOrder/readyAddOrder/add?modelType=5&spam_id=${sessionKey}`)
               }