12-23-上传master

src/pages/ProfileBasic/data.d.ts

@@ -0,0 +1,22 @@
+export interface BasicGood {
+  id: string;
+  name?: string;
+  barcode?: string;
+  price?: string;
+  num?: string | number;
+  amount?: string | number;
+}
+
+export interface BasicProgress {
+  key: string;
+  time: string;
+  rate: string;
+  status: string;
+  operator: string;
+  cost: string;
+}
+
+export interface BasicProfileDataType {
+  basicGoods: BasicGood[];
+  basicProgress: BasicProgress[];
+}

src/pages/ProfileBasic/index.tsx

@@ -0,0 +1,209 @@
+import { Badge, Card, Descriptions, Divider, Table } from 'antd';
+import React, { Component } from 'react';
+
+import { PageContainer } from '@ant-design/pro-layout';
+import { connect, Dispatch } from 'umi';
+import { BasicProfileDataType } from './data.d';
+import styles from './style.less';
+
+const progressColumns = [
+  {
+    title: '时间',
+    dataIndex: 'time',
+    key: 'time',
+  },
+  {
+    title: '当前进度',
+    dataIndex: 'rate',
+    key: 'rate',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    render: (text: string) => {
+      if (text === 'success') {
+        return <Badge status="success" text="成功" />;
+      }
+      return <Badge status="processing" text="进行中" />;
+    },
+  },
+
+  {
+    title: '操作员ID',
+    dataIndex: 'operator',
+    key: 'operator',
+  },
+  {
+    title: '耗时',
+    dataIndex: 'cost',
+    key: 'cost',
+  },
+];
+
+interface ProfileBasicProps {
+  loading: boolean;
+  dispatch: Dispatch;
+  profileBasic: BasicProfileDataType;
+}
+interface ProfileBasicState {
+  visible: boolean;
+}
+
+class ProfileBasic extends Component<
+  ProfileBasicProps,
+  ProfileBasicState
+> {
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'profileBasic/fetchBasic',
+    });
+  }
+
+  render() {
+    const { profileBasic, loading } = this.props;
+    const { basicGoods, basicProgress } = profileBasic;
+    let goodsData: typeof basicGoods = [];
+    if (basicGoods.length) {
+      let num = 0;
+      let amount = 0;
+      basicGoods.forEach((item) => {
+        num += Number(item.num);
+        amount += Number(item.amount);
+      });
+      goodsData = basicGoods.concat({
+        id: '总计',
+        num,
+        amount,
+      });
+    }
+    const renderContent = (value: any, row: any, index: any) => {
+      const obj: {
+        children: any;
+        props: { colSpan?: number };
+      } = {
+        children: value,
+        props: {},
+      };
+      if (index === basicGoods.length) {
+        obj.props.colSpan = 0;
+      }
+      return obj;
+    };
+    const goodsColumns = [
+      {
+        title: '商品编号',
+        dataIndex: 'id',
+        key: 'id',
+        render: (text: React.ReactNode, row: any, index: number) => {
+          if (index < basicGoods.length) {
+            return <a href="">{text}</a>;
+          }
+          return {
+            children: <span style={{ fontWeight: 600 }}>总计</span>,
+            props: {
+              colSpan: 4,
+            },
+          };
+        },
+      },
+      {
+        title: '商品名称',
+        dataIndex: 'name',
+        key: 'name',
+        render: renderContent,
+      },
+      {
+        title: '商品条码',
+        dataIndex: 'barcode',
+        key: 'barcode',
+        render: renderContent,
+      },
+      {
+        title: '单价',
+        dataIndex: 'price',
+        key: 'price',
+        align: 'right' as 'left' | 'right' | 'center',
+        render: renderContent,
+      },
+      {
+        title: '数量（件）',
+        dataIndex: 'num',
+        key: 'num',
+        align: 'right' as 'left' | 'right' | 'center',
+        render: (text: React.ReactNode, row: any, index: number) => {
+          if (index < basicGoods.length) {
+            return text;
+          }
+          return <span style={{ fontWeight: 600 }}>{text}</span>;
+        },
+      },
+      {
+        title: '金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        align: 'right' as 'left' | 'right' | 'center',
+        render: (text: React.ReactNode, row: any, index: number) => {
+          if (index < basicGoods.length) {
+            return text;
+          }
+          return <span style={{ fontWeight: 600 }}>{text}</span>;
+        },
+      },
+    ];
+    return (
+      <PageContainer>
+        <Card bordered={false}>
+          <Descriptions title="退款申请" style={{ marginBottom: 32 }}>
+            <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
+            <Descriptions.Item label="状态">已取货</Descriptions.Item>
+            <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
+            <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
+          </Descriptions>
+          <Divider style={{ marginBottom: 32 }} />
+          <Descriptions title="用户信息" style={{ marginBottom: 32 }}>
+            <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
+            <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
+            <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
+            <Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
+            <Descriptions.Item label="备注">无</Descriptions.Item>
+          </Descriptions>
+          <Divider style={{ marginBottom: 32 }} />
+          <div className={styles.title}>退货商品</div>
+          <Table
+            style={{ marginBottom: 24 }}
+            pagination={false}
+            loading={loading}
+            dataSource={goodsData}
+            columns={goodsColumns}
+            rowKey="id"
+          />
+          <div className={styles.title}>退货进度</div>
+          <Table
+            style={{ marginBottom: 16 }}
+            pagination={false}
+            loading={loading}
+            dataSource={basicProgress}
+            columns={progressColumns}
+          />
+        </Card>
+      </PageContainer>
+    );
+  }
+}
+
+export default connect(
+  ({
+    profileBasic,
+    loading,
+  }: {
+    profileBasic: BasicProfileDataType;
+    loading: {
+      effects: { [key: string]: boolean };
+    };
+  }) => ({
+    profileBasic,
+    loading: loading.effects['profileBasic/fetchBasic'],
+  }),
+)(ProfileBasic);

src/pages/ProfileBasic/model.ts

@@ -0,0 +1,48 @@
+import { Effect, Reducer } from 'umi';
+
+import { BasicGood } from './data.d';
+import { queryBasicProfile } from './service';
+
+export interface StateType {
+  basicGoods: BasicGood[];
+}
+
+export interface ModelType {
+  namespace: string;
+  state: StateType;
+  effects: {
+    fetchBasic: Effect;
+  };
+  reducers: {
+    show: Reducer<StateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'profileBasic',
+
+  state: {
+    basicGoods: [],
+  },
+
+  effects: {
+    *fetchBasic(_, { call, put }) {
+      const response = yield call(queryBasicProfile);
+      yield put({
+        type: 'show',
+        payload: response,
+      });
+    },
+  },
+
+  reducers: {
+    show(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+};
+
+export default Model;

src/pages/ProfileBasic/service.ts

@@ -0,0 +1,5 @@
+import request from 'umi-request';
+
+export async function queryBasicProfile() {
+  return request('/api/profile/basic');
+}

src/pages/ProfileBasic/style.less

@@ -0,0 +1,8 @@
+@import '~antd/es/style/themes/default.less';
+
+.title {
+  margin-bottom: 16px;
+  color: @heading-color;
+  font-weight: 500;
+  font-size: 16px;
+}