feat: 修改售后详情UI

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-06 09:54:04
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-02-19 20:33:36
+ * @LastEditTime: 2021-05-13 16:09:56
  * @Description: 换货收货地址
  */
 import React, { useEffect } from 'react';
@@ -26,7 +26,48 @@ export interface Values {
   sendAddress: string | undefined, 
   sendUserName: string | undefined, 
   sendUserTel: string | undefined, 
-};
+}
+
+interface AddressData {
+  /**
+   * id
+   */
+  id?: number;
+  /**
+  * 配送方式
+  */
+  deliveryType?: number;
+  /**
+   * 收件人名字
+   */
+  name: string,
+  /**
+  * 收件人电话号码
+  */
+  phone: string,
+  /**
+  * 收件地址
+  */
+  fullAddress: string,
+}
+
+interface AddressProps {
+  value: AddressData,
+}
+
+const Address: React.FC<AddressProps> = ({ value }) => (
+  <div>
+    <p>{value.name || ''} / {value.phone || ''}</p>
+    <p>{value.fullAddress || ''}</p>
+  </div>
+);
+
+const ShippingAddress: React.FC<AddressProps> = ({ value }) => (
+  <div>
+    <p>{value.name || ''} / {value.phone || ''}</p>
+    <p>{value.fullAddress || ''}</p>
+  </div>
+);
 
 interface ExchangeAddressInfo extends MellowCardProps {
   /**
@@ -90,7 +131,7 @@ interface ExchangeAddressInfo extends MellowCardProps {
    * 提交事件
    */
   onFormSubmit: (values: Values) => void;
-};
+}
 
 const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
   isEdit = false,
@@ -188,20 +229,6 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
     }); 
   };
 
-  const Address = (
-    <div>
-      <p>{deliveryAddress.name || ''} / {deliveryAddress.phone || ''}</p>
-      <p>{deliveryAddress.fullAddress || ''}</p>
-    </div>
-  );
-  
-  const ShippingAddress = (
-    <div>
-      <p>{shippingAddress.name || ''} / {shippingAddress.phone || ''}</p>
-      <p>{shippingAddress.fullAddress || ''}</p>
-    </div>
-  );
-
   return (
     <MellowCard
       title="换货收货地址"
@@ -212,12 +239,10 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
           deliveryType: shippingAddress.deliveryType, 
           shippingAddress: shippingAddress.id, 
           pickupAddress: shippingAddress.id, 
+          deliveryAddress,
+          shippingAddressShow: shippingAddress,
         }}
         previewPlaceholder=" "
-        expressionScope={{
-          Address, 
-          ShippingAddress, 
-        }}
         effects={($, { getFieldValue }) => {
           useAsyncSelect('*(shippingAddress,pickupAddress)', fetchShipperAddress, ['label', 'value']);
 
@@ -285,6 +310,10 @@ const ExchangeAddressInfo: React.FC<ExchangeAddressInfo> = ({
             }
           });
         }}
+        components={{
+          Address, 
+          ShippingAddress, 
+        }}
         editable={isEdit}
         actions={modalFormActions}
         schema={schema}

src/pages/afterService/components/ExchangeAddressInfo/schema/index.ts

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-09 15:56:35
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-01-21 14:14:26
+ * @LastEditTime: 2021-05-13 16:18:24
  * @Description: 
  */
 import { ISchema } from '@formily/antd';
@@ -15,9 +15,10 @@ export const schema: ISchema = {
       type: 'object',
       'x-component': 'mega-layout',
       'x-component-props': {
-        labelCol: 6, 
-        wrapperCol: 16, 
-        labelAlign: 'left', 
+        labelWidth: 106,
+        labelAlign: 'left',
+        grid: true,
+        full: true
       },
       properties: {
         deliveryType: {
@@ -37,14 +38,6 @@ export const schema: ISchema = {
             }, 
           ],
         },
-        deliveryAddress: {
-          type: 'object',
-          title: '换货收货地址',
-          'x-component': 'Children', 
-          'x-component-props': {
-            children: '{{Address}}',
-          }, 
-        },
         shippingAddress: {
           type: 'string',
           title: '换货发货地址',
@@ -81,14 +74,16 @@ export const schema: ISchema = {
             }, 
           ], 
         }, 
+        deliveryAddress: {
+          type: 'object',
+          title: '换货收货地址',
+          'x-component': 'Address', 
+        },
         shippingAddressShow: {
           type: 'object',
           title: '换货发货地址', 
           visible: false, 
-          'x-component': 'Children', 
-          'x-component-props': {
-            children: '{{ShippingAddress}}',
-          }, 
+          'x-component': 'ShippingAddress', 
         }, 
       },
     },

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

 .detailedWrap {
   padding: 25px 24px 9px;
   margin: 16px 0;
-  background-color: #F7F8FA;
+  background-color: #FAFBFC;
 }
\ No newline at end of file

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

 .detailedWrap {
   padding: 25px 24px 9px;
   margin: 16px 0;
-  background-color: #F7F8FA;
+  background-color: #FAFBFC;
 }
\ No newline at end of file

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

+.file {
+  :global {
+    .ant-upload-list-item {
+      margin-top: 0;
+    }
+  }
+}
\ No newline at end of file

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

@@ -2,16 +2,11 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-03 11:49:34
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-12 15:10:10
+ * @LastEditTime: 2021-05-13 15:38:46
  * @Description: 附件列表
  */
 import React from 'react';
-import { Empty } from 'antd';
-import {
-  SchemaForm,
-  SchemaMarkupField as Field,
-} from '@formily/antd';
-import { Upload, FormMegaLayout } from '@formily/antd-components';
+import { Empty, Descriptions, Upload } from 'antd';
 import { FileData } from '@/utils';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import styles from './index.less';
@@ -33,18 +28,27 @@ const FileList: React.FC<FileListProps> = ({
       {...rest}
     >
       {fileList && fileList.length ? (
-        <SchemaForm
-          components={{ Upload }}
-          value={{
-            files: fileList,
-          }}
-          editable={false}
-          previewPlaceholder=" "
-        >
-          <FormMegaLayout full>
-            <Field name="files" title="相关不良原因举证附件" x-component="Upload" />
-          </FormMegaLayout>
-        </SchemaForm>
+        // <SchemaForm
+        //   components={{ Upload }}
+        //   value={{
+        //     files: fileList,
+        //   }}
+        //   editable={false}
+        //   previewPlaceholder=" "
+        // >
+        //   <FormMegaLayout full>
+        //     <Field name="files" title="相关不良原因举证附件" x-component="Upload" />
+        //   </FormMegaLayout>
+        // </SchemaForm>
+        <Descriptions column={1}>
+          <Descriptions.Item label="相关不良原因举证附件">
+            <Upload 
+              className={styles.file}
+              fileList={fileList}
+              disabled
+            />
+          </Descriptions.Item>
+        </Descriptions>
       ) : (
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       )}

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

@@ -30,30 +30,40 @@ export interface Values {
 };
 
 interface AddressData {
-  value: {
-    /**
-     * 收件人名字
-     */
-    name: string,
-    /**
-     * 收件人电话号码
-     */
-    phone: string,
-    /**
-     * 收件地址
-     */
-    fullAddress: string,
-  }
+  /**
+   * id
+   */
+  id?: number;
+  /**
+  * 配送方式
+  */
+  deliveryType?: number;
+  /**
+   * 收件人名字
+   */
+  name: string,
+  /**
+  * 收件人电话号码
+  */
+  phone: string,
+  /**
+  * 收件地址
+  */
+  fullAddress: string,
+}
+
+interface AddressProps {
+  value: AddressData,
 }
 
-const Address: React.FC<AddressData> = ({ value }) => (
+const Address: React.FC<AddressProps> = ({ value }) => (
   <div>
     <p>{value.name || ''} / {value.phone || ''}</p>
     <p>{value.fullAddress || ''}</p>
   </div>
 );
 
-const DeliveryAddress: React.FC<AddressData> = ({ value }) => (
+const DeliveryAddress: React.FC<AddressProps> = ({ value }) => (
   <div>
     <p>{value.name || ''} / {value.phone || ''}</p>
     <p>{value.fullAddress || ''}</p>
@@ -69,54 +79,12 @@ interface ReturnAddressInfo extends MellowCardProps {
   /**
    * 退货收货地址
    */
-  deliveryAddress: {
-    /**
-     * id
-     */
-    id?: number;
-    /**
-     * 配送方式
-     */
-    deliveryType?: number;
-    /**
-     * 收件人姓名
-     */
-    name: string;
-    /**
-     * phone
-     */
-    phone: string;
-    /**
-     * 完整地址
-     */
-    fullAddress: string;
-  }, 
+  deliveryAddress: AddressData, 
 
   /**
    * 退货发货地址
    */
-  shippingAddress: {
-    /**
-     * id
-     */
-    id?: number;
-    /**
-     * 配送方式
-     */
-    deliveryType?: number;
-    /**
-     * 收件人姓名
-     */
-    name: string;
-    /**
-     * phone
-     */
-    phone: string;
-    /**
-     * 完整地址
-     */
-    fullAddress: string;
-  }, 
+  shippingAddress: AddressData, 
 
   /**
    * 表单提交事件

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

 .detailedWrap {
   padding: 25px 24px 9px;
   margin: 16px 0;
-  background-color: #F7F8FA;
+  background-color: #FAFBFC;
 }
\ No newline at end of file

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

+@import '~antd/es/style/themes/default.less';
+
+.evaluate {
+  .score {
+    position: absolute;
+
+    &-left {
+      padding-right: 90px;
+    }
+  
+    &-right {
+      position: absolute;
+      top: -50%;
+      right: 0;
+      width: 80px;
+      flex-shrink: 0;
+    }
+
+    &-star {
+      font-size: @font-size-lg;
+      font-weight: 500;
+    }
+  }
+}
\ No newline at end of file

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

@@ -2,12 +2,14 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-03 14:12:34
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-02-20 14:28:19
+ * @LastEditTime: 2021-05-13 15:30:21
  * @Description: 评价
  */
 import React from 'react';
+import { Row, Col, Descriptions } from 'antd';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import { Gauge } from '@/components/Charts';
+import styles from './index.less';
 
 // 满分 5分
 const FULL_SCORE = 5;
@@ -47,19 +49,46 @@ const Score: React.FC<ScoreProps> = ({
   return (
     <MellowCard
       title="售后评价" 
+      className={styles.evaluate}
       {...rest}
     >
-      <Gauge 
-        title={`${score}分`}
-        height={170}
-        percent={+(score/FULL_SCORE * 100).toFixed(2)}
-        formatter={() => ''}
-        formatContent={(val) => `${TITLE_MAP[score]}`}
-        color={COLOR_MAP[score]}
-      />
-      <p style={{ color: '#909399' }}>
-        售后评价: {content}
-      </p>
+      <Row gutter={40}>
+        <Col span={8}>
+          <div className={styles.score}>
+            <div className={styles['score-left']}>
+              <Descriptions column={1}>
+                <Descriptions.Item
+                  label="售后满意度"
+                >
+                  <span className={styles['score-star']}>
+                    {`${score}分`}
+                  </span>
+                </Descriptions.Item>
+              </Descriptions>
+            </div>
+            <div className={styles['score-right']}>
+              <Gauge 
+                title=""
+                height={90}
+                percent={+(score/FULL_SCORE * 100).toFixed(2)}
+                formatter={() => ''}
+                formatContent={() => ''}
+                color={COLOR_MAP[score]}
+                strokeWidth={5}
+              />
+            </div>
+          </div>
+        </Col>
+        <Col span={16}>
+          <Descriptions column={1}>
+            <Descriptions.Item
+              label="售后评价"
+            >
+              {content}
+            </Descriptions.Item>
+          </Descriptions>
+        </Col>
+      </Row>
     </MellowCard>
   );
 };