Skip to content

J
jinfa-platform
Commit 3067085a authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 修改售后详情UI

parent 444b2467
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 131 deletions
src/pages/afterService/components/ExchangeAddressInfo/index.tsx
View file @ 3067085a
......@@ -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
View file @ 3067085a
......@@ -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
View file @ 3067085a
.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
View file @ 3067085a
.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
View file @ 3067085a
.file {
:global {
.ant-upload-list-item {
margin-top: 0;
}
}
}
\ No newline at end of file
src/pages/afterService/components/FileList/index.tsx
View file @ 3067085a
......@@ -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
View file @ 3067085a
......@@ -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
View file @ 3067085a
.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
View file @ 3067085a
@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
View file @ 3067085a
......@@ -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>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment