feat:售后换货页面

src/components/ReturnEle/index.tsx

@@ -12,7 +12,7 @@ const ReutrnEle: React.FC<IProps> = (props) => {
   const { description, logoSrc } = props
 
   return <>
-    <span style={{ fontSize: 15, color: '#909399FF' }}><ArrowLeftOutlined /> {logoSrc ? <img src={logoSrc} style={{ width: 48, height: 48, margin: '0 0 0 14px' }} /> : description}</span>
+    <span style={{ fontSize: 12, color: '#909399FF' }}><ArrowLeftOutlined /> {logoSrc ? <img src={logoSrc} style={{ width: 48, height: 48, margin: '0 0 0 14px' }} /> : description}</span>
   </>
 }
 

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

+.info_list {
+  position: relative;
+
+  &_line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+
+    &_label {
+      width: 176px;
+      color: #909399;
+
+      &>.required {
+        color: #FF4D4F;
+        margin-left: 2px;
+      }
+    }
+  }
+}
\ No newline at end of file

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

+import React from 'react'
+import styles from './index.less'
+
+interface dataListType {
+  label: string,
+  value: string | React.ReactNode,
+  required?: boolean
+}
+
+interface InfoListProps {
+  data: dataListType[]
+}
+
+const InfoList: React.FC<InfoListProps> = (props) => {
+  const { data = [] } = props
+
+  return (
+    <div className={styles.info_list}>
+      {
+        data && data.map((item, index) => (
+          <div className={styles.info_list_line} key={`info_list_line_${index}`}>
+            <div className={styles.info_list_line_label}>{item.label}{item.required && <i className={styles.required}>*</i>}</div>
+            <div className={styles.info_list_line_value}>{item.value}</div>
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default InfoList

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/basicInfo/index.tsx

+import React from 'react'
+import { Input } from 'antd'
+import InfoList from '../../../../components/InfoList'
+
+interface BasicInfoProps {
+
+}
+
+const BasicInfo: React.FC<BasicInfoProps> = (props) => {
+
+  let detailList = [
+    {
+      label: '申请单摘要',
+      value: <Input style={{ width: 572 }} placeholder="请输入申请单摘要" />,
+      required: true,
+    },
+    {
+      label: '申请单号',
+      value: 'SPTY12'
+    },
+    {
+      label: '供应会员',
+      value: '温州龙昌手袋有限公司'
+    },
+    {
+      label: '单据时间',
+      value: '2020-08-20 12:56:25'
+    },
+    {
+      label: '外部状态',
+      value: '待提交申请单'
+    },
+    {
+      label: '内部状态',
+      value: '待提交'
+    }
+  ]
+
+  return (
+    <div>
+      <InfoList data={detailList} />
+    </div>
+  )
+}
+
+export default BasicInfo

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

+.add_btn {
+  background: #FAFBFC;
+  border: 1px dashed #DCDFE6;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  color: #606266;
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  &>span {
+    margin-right: 4px;
+  }
+}
+
+.tb_wrap {
+  margin-top: 24px;
+}
\ No newline at end of file

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/index.tsx

+import React from 'react'
+import { PlusOutlined } from '@ant-design/icons'
+import { exchangeGoodsTableColumn } from './model/exchangeGoodsTable'
+import styles from './index.less'
+import { Table } from 'antd'
+
+interface ExchangeGoodsProps {
+
+}
+
+const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => {
+
+  const data = [
+    {
+      id: 1,
+      orderNo: 'SPTY12',
+      productId: '1110',
+      productName: '进口头层黄牛皮荔枝纹/红色/XXL',
+      category: 'category',
+      unit: '',
+      purchaseCount: 2000,
+      purchasePrice: 20,
+      purchaseAmount: 40000,
+      replaceCount: 2000,
+      replaceReason: '质量检查不合格',
+    }
+  ]
+
+  return (
+    <div>
+      <div className={styles.add_btn}>
+        <PlusOutlined />
+        <span>选择换货商品</span>
+      </div>
+      <div className={styles.tb_wrap}>
+        <Table dataSource={data} columns={exchangeGoodsTableColumn} />
+      </div>
+    </div>
+  )
+}
+
+export default ExchangeGoods

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/model/exchangeGoodsTable.tsx

+import React from 'react'
+import EyePreview from '@/components/EyePreview'
+
+
+export const exchangeGoodsTableColumn: any[] = [
+  {
+    title: '订单号',
+    dataIndex: 'orderNo',
+    key: 'orderNo',
+    render: (text, record) => {
+      // 查看订单, 需根据状态显示不同schema
+      return <EyePreview url={`/`}>
+        {text}
+      </EyePreview>
+    },
+    ellipsis: true,
+  },
+  {
+    title: 'ID',
+    dataIndex: 'productId',
+    ellipsis: true,
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'productName',
+    ellipsis: true,
+  },
+  {
+    title: '品类',
+    dataIndex: 'category',
+    ellipsis: true,
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+    ellipsis: true,
+  },
+  {
+    title: '采购数量',
+    dataIndex: 'purchaseCount',
+    ellipsis: true,
+  },
+  {
+    title: '采购单价',
+    dataIndex: 'purchasePrice',
+    ellipsis: true,
+  },
+
+  {
+    title: '采购金额',
+    dataIndex: 'purchaseAmount',
+    ellipsis: true,
+  },
+  {
+    title: '换货数量',
+    dataIndex: 'replaceCount',
+    ellipsis: true,
+  },
+  {
+    title: '换货原因',
+    dataIndex: 'replaceReason',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'opration',
+    ellipsis: true,
+  },
+]
\ No newline at end of file

src/pages/afterService/exchangeGoods/waitSubmitOrderList/detail.less

 .detail_wrap {
   position: relative;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 24px;
+  min-height: calc(100vh - 200px);
+
+  .detail_tabs {
+    position: relative;
+
+    :global {
+      .ant-tabs-nav {
+        margin-bottom: 24px;
+      }
+
+      .ant-tabs-tab {
+        border: 1px solid #FFFFFF;
+        border-bottom: 1px solid #f0f0f0;
+
+        &-active {
+          border: 1px solid #DCDFE6;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

src/pages/afterService/exchangeGoods/waitSubmitOrderList/detail.tsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react'
 import { SaveOutlined } from '@ant-design/icons'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { history, Helmet } from 'umi'
-import { Button } from 'antd'
+import { Button, Tabs } from 'antd'
 import ReutrnEle from '@/components/ReturnEle'
+import BasicInfo from './components/basicInfo'
+import ExchangeGoods from './components/exchangeGoods'
 import styles from './detail.less'
 
 interface OrderDetailProps {
@@ -11,6 +13,8 @@ interface OrderDetailProps {
   match: any
 }
 
+const { TabPane } = Tabs
+
 const OrderDetail: React.FC<OrderDetailProps> = (props) => {
   const { type } = props.match.params
   const [btnLoading, setBtnLoading] = useState<boolean>(false)
@@ -42,7 +46,23 @@ const OrderDetail: React.FC<OrderDetailProps> = (props) => {
         ]}
       >
         <div className={styles.detail_wrap}>
-
+          <Tabs type="card" defaultActiveKey="exchangeGoods" className={styles.detail_tabs}>
+            <TabPane tab="基本信息" key="basicInfo">
+              <BasicInfo />
+            </TabPane>
+            <TabPane tab="换货商品" key="exchangeGoods">
+              <ExchangeGoods />
+            </TabPane>
+            <TabPane tab="举证附件" key="proofFile">
+              Content of Tab Pane 3
+            </TabPane>
+            <TabPane tab="换货收货地址" key="address">
+              Content of Tab Pane 3
+            </TabPane>
+            <TabPane tab="流转记录" key="log">
+              Content of Tab Pane 3
+            </TabPane>
+          </Tabs>
 
         </div>
       </PageHeaderWrapper>

src/pages/lxMall/shopAbout/index.tsx

@@ -114,71 +114,6 @@ const ShopAbout: React.FC<ShopAboutPropType> = (props) => {
             <p>{shopInfo?.describe}</p>
           </div>
         </div>
-        {/* <div className={styles.channel_info_about}>
-          <div className={styles.channel_info_about_container}>
-            <div className={styles.channel_info_about_img}>
-              <Carousel className={styles.channel_info_about_img_list} pauseOnDotsHover>
-                <div className={styles.channel_info_about_img_item} >
-                  <div className={styles.channel_info_about_img_item_body}>
-                    <a href="">
-                      <div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${companyImg})` }}></div>
-                    </a>
-                  </div>
-                </div>
-                <div className={styles.channel_info_about_img_item} >
-                  <div className={styles.channel_info_about_img_item_body}>
-                    <a href="">
-                      <div className={styles.channel_info_about_img_item_img} style={{ backgroundImage: `url(${companyImg})` }}></div>
-                    </a>
-                  </div>
-                </div>
-              </Carousel>
-            </div>
-            <div className={styles.channel_info_about_info}>
-              <div className={styles.channel_info_about_info_title}>温州市龙昌皮具有限公司</div>
-              <p className={styles.channel_info_about_info_brief}>
-                公司位于温州，多年行业经验，专业经营各种成品真皮，包括全粒面牛皮，修面皮，漆色皮，打腊皮，水腊皮……二层皮胚，硅胶二层等,产品主要用于时尚女鞋、男鞋、箱包、皮带、服装、汽车内饰等高端皮具制品行业。
-                本着质量保证，品种多样，现货充足，款式新颖的经营特色和薄利多销的原则，为客户提供长期优质的服务！
-              </p>
-              <p>
-                同时公司长期寻找各皮厂合作，要求皮厂有自已的生产线及高性价比特色产品，可作为普通供应商合作，也可作为其核心经销商战略合作。欢迎来人来样，当面洽谈。
-              </p>
-            </div>
-          </div>
-
-        </div> */}
-
-        {/* <div className={styles.shop_about_card_list}>
-          <div className={styles.shop_about_card_list_item}>
-            <div className={styles.shop_about_card_list_item_title}>店铺年龄</div>
-            <div className={styles.shop_about_card_list_item_content}>
-              <label>2</label>
-              <span>年</span>
-            </div>
-          </div>
-          <div className={styles.shop_about_card_list_item}>
-            <div className={styles.shop_about_card_list_item_title}>本店信用</div>
-            <div className={styles.shop_about_card_list_item_content}>
-              <label>1288</label>
-              <span>分</span>
-            </div>
-          </div>
-          <div className={styles.shop_about_card_list_item}>
-            <div className={styles.shop_about_card_list_item_title}>本店满意率</div>
-            <div className={styles.shop_about_card_list_item_content}>
-              <label>94</label>
-              <span>%</span>
-            </div>
-          </div>
-          <div className={styles.shop_about_card_list_item}>
-            <div className={styles.shop_about_card_list_item_title}>注册资本</div>
-            <div className={styles.shop_about_card_list_item_content}>
-              <label>5000</label>
-              <span>万元</span>
-            </div>
-          </div>
-        </div> */}
-
         <div className={styles.shop_about_split}>
           <div className={styles.shop_about_split_line}></div>
           <div className={styles.shop_about_split_text}>资质荣誉</div>