Skip to content

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

feat: 修改售后详情UI

parent 444b2467
Show whitespace changes
Inline Side-by-side
Showing with 264 additions and 200 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,
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/ExchangeDeliverInfo/index.tsx
View file @ 3067085a
......@@ -2,11 +2,18 @@
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-01-28 10:28:06
* @LastEditTime: 2021-05-13 16:58:51
* @Description: 换货发货统计、换货发货明细
*/
import React, { useState } from 'react';
import { Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
Row,
Col,
Descriptions,
Badge,
Modal,
Tabs,
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Link } from 'umi';
import { SummaryData, Detailed } from './interface';
......@@ -15,6 +22,7 @@ import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import ButtonSwitch from '@/components/ButtonSwitch';
import DescProgress from '@/components/DescProgress';
import {
EXCHANGE_INNER_STATUS_UNCONFIRMED_REPLACE_DELIVERY,
EXCHANGE_INNER_STATUS_UNCONFIRMED_REPLACE_RECEIVE,
......@@ -28,6 +36,7 @@ import {
import styles from './index.less';
const { confirm } = Modal;
const { TabPane } = Tabs;
interface ExchangeDeliverInfoProps extends MellowCardProps {
/**
......@@ -88,7 +97,6 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
isEdit = false,
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
const summaryColumns: EditableColumns[] = [
......@@ -134,14 +142,23 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
align: 'center',
},
{
title: '已换货发货',
title: '已换货发货/未换货发货',
dataIndex: 'deliveryCount',
align: 'center',
render: (text, record) => (
<DescProgress
descriptions={[
{
title: '已换货发货:',
value: `¥${text}`,
},
{
title: '未换货发货',
dataIndex: 'unDeliveryCount',
align: 'center',
title: '未换货发货:',
value: `¥${record.unDeliveryCount}`,
},
]}
percent={(text / record.replaceCount) * 100}
/>
),
},
{
title: '已换货收货',
......@@ -214,10 +231,6 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
},
];
const handleBatchChange = e => {
setCurrentBatch(e.target.value);
};
const handleConfirmExchangeDeliver = (id) => {
if (onConfirmExchangeDeliver) {
confirm({
......@@ -275,6 +288,9 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
value={radioValue}
/>
)}
bodyStyle={{
paddingTop: 0,
}}
{...rest}
>
{radioValue === '1' ? (
......@@ -288,24 +304,11 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
) : null}
{radioValue === '2' ? (
<>
<Radio.Group
options={
detailed.map(item => ({
label: `第 ${item.batch} 批次`,
value: item.batch,
}))
}
defaultValue={currentBatch}
onChange={handleBatchChange}
optionType="button"
/>
{detailed.map(item => (
<div
key={item.batch}
style={{
display: item.batch === currentBatch ? 'block' : 'none',
}}
<Tabs>
{detailed.map((item) => (
<TabPane
tab={`第 ${item.batch} 批次`}
key={`${item.batch}`}
>
<div className={styles.detailedWrap}>
<Row align="middle">
......@@ -416,8 +419,9 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
loading={false}
pagination={null}
/>
</div>
</TabPane>
))}
</Tabs>
</>
) : null}
</MellowCard>
......
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/ExchangeReceivedInfo/index.tsx
View file @ 3067085a
......@@ -2,11 +2,18 @@
* @Author: XieZhiXiong
* @Date: 2020-11-05 15:18:15
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-01-28 10:29:01
* @LastEditTime: 2021-05-13 16:46:19
* @Description: 换货收货统计、换货发货明细
*/
import React, { useState } from 'react';
import { Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
Row,
Col,
Descriptions,
Badge,
Modal,
Tabs,
} from 'antd';
import {
ExclamationCircleOutlined,
} from '@ant-design/icons';
......@@ -17,6 +24,7 @@ import { EditableColumns } from '@/components/PolymericTable/interface';
import PolymericTable from '@/components/PolymericTable';
import EyePreview from '@/components/EyePreview';
import ButtonSwitch from '@/components/ButtonSwitch';
import DescProgress from '@/components/DescProgress';
import {
EXCHANGE_INNER_STATUS_UNCONFIRMED_RETURN_DELIVERY,
EXCHANGE_INNER_STATUS_UNCONFIRMED_RETURN_RECEIVE,
......@@ -30,6 +38,7 @@ import {
import styles from './index.less';
const { confirm } = Modal;
const { TabPane } = Tabs;
interface ExchangeReceivedInfoProps extends MellowCardProps {
/**
......@@ -90,7 +99,6 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
isEdit = false,
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
const summaryColumns: EditableColumns[] = [
......@@ -136,14 +144,23 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
align: 'center',
},
{
title: '已退货发货',
title: '已退货发货/未退货发货',
dataIndex: 'deliveryCount',
align: 'center',
render: (text, record) => (
<DescProgress
descriptions={[
{
title: '已退货发货:',
value: `¥${text}`,
},
{
title: '未退货发货',
dataIndex: 'unDeliveryCount',
align: 'center',
title: '未退货发货:',
value: `¥${record.unDeliveryCount}`,
},
]}
percent={(text / record.replaceCount) * 100}
/>
),
},
{
title: '已退货收货',
......@@ -216,10 +233,6 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
},
];
const handleBatchChange = e => {
setCurrentBatch(e.target.value);
};
const handleConfirmReturnDeliver = (id) => {
if (onConfirmReturnDeliver) {
confirm({
......@@ -284,6 +297,9 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
value={radioValue}
/>
)}
bodyStyle={{
paddingTop: 0,
}}
{...rest}
>
{radioValue === '1' ? (
......@@ -297,24 +313,11 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
) : null}
{radioValue === '2' ? (
<>
<Radio.Group
options={
detailed.map(item => ({
label: `第 ${item.batch} 批次`,
value: item.batch,
}))
}
defaultValue={currentBatch}
onChange={handleBatchChange}
optionType="button"
/>
{detailed.map(item => (
<div
key={item.batch}
style={{
display: item.batch === currentBatch ? 'block' : 'none',
}}
<Tabs>
{detailed.map((item) => (
<TabPane
tab={`第 ${item.batch} 批次`}
key={`${item.batch}`}
>
<div className={styles.detailedWrap}>
<Row align="middle">
......@@ -425,8 +428,9 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
loading={false}
pagination={null}
/>
</div>
</TabPane>
))}
</Tabs>
</>
) : null}
</MellowCard>
......
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,7 +30,14 @@ export interface Values {
};
interface AddressData {
value: {
/**
* id
*/
id?: number;
/**
* 配送方式
*/
deliveryType?: number;
/**
* 收件人名字
*/
......@@ -43,17 +50,20 @@ interface AddressData {
* 收件地址
*/
fullAddress: string,
}
}
const Address: React.FC<AddressData> = ({ value }) => (
interface AddressProps {
value: AddressData,
}
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/ReturnAnalysis/index.tsx
View file @ 3067085a
......@@ -6,7 +6,14 @@
* @Description: 退货收货统计、退货发货明细
*/
import React, { useState } from 'react';
import { Row, Col, Descriptions, Badge, Radio, Modal } from 'antd';
import {
Row,
Col,
Descriptions,
Badge,
Modal,
Tabs,
} from 'antd';
import {
ExclamationCircleOutlined,
} from '@ant-design/icons';
......@@ -31,6 +38,8 @@ import {
import styles from './index.less';
const { confirm } = Modal;
const { TabPane } = Tabs;
interface ReturnInfoProps extends MellowCardProps {
/**
* 退货收货统计
......@@ -90,7 +99,6 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
isEdit = false,
...rest
}) => {
const [currentBatch, setCurrentBatch] = useState(1);
const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
const summaryColumns: EditableColumns[] = [
......@@ -225,10 +233,6 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
},
];
const handleBatchChange = e => {
setCurrentBatch(e.target.value);
};
const handleConfirmReturnDeliver = (id) => {
if (onConfirmReturnDeliver) {
confirm({
......@@ -293,6 +297,9 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
value={radioValue}
/>
)}
bodyStyle={{
paddingTop: 0,
}}
{...rest}
>
{radioValue === '1' ? (
......@@ -306,24 +313,11 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
) : null}
{radioValue === '2' ? (
<>
<Radio.Group
options={
detailed.map(item => ({
label: `第 ${item.batch} 批次`,
value: item.batch,
}))
}
defaultValue={currentBatch}
onChange={handleBatchChange}
optionType="button"
/>
{detailed.map(item => (
<div
key={item.batch}
style={{
display: item.batch === currentBatch ? 'block' : 'none',
}}
<Tabs>
{detailed.map((item) => (
<TabPane
tab={`第 ${item.batch} 批次`}
key={`${item.batch}`}
>
<div className={styles.detailedWrap}>
<Row align="middle">
......@@ -434,8 +428,9 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
loading={false}
pagination={null}
/>
</div>
</TabPane>
))}
</Tabs>
</>
) : null}
</MellowCard>
......
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}
>
<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={`${score}分`}
height={170}
title=""
height={90}
percent={+(score/FULL_SCORE * 100).toFixed(2)}
formatter={() => ''}
formatContent={(val) => `${TITLE_MAP[score]}`}
formatContent={() => ''}
color={COLOR_MAP[score]}
strokeWidth={5}
/>
<p style={{ color: '#909399' }}>
售后评价: {content}
</p>
</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