完成ui

package.json

@@ -35,7 +35,7 @@
     "@umijs/hooks": "^1.9.3",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
-    "bizcharts": "^4.0.7",
+    "bizcharts": "^4.0.14",
     "copy-to-clipboard": "^3.3.1",
     "god": "0.1.24",
     "lingxi-design": "^1.0.7",

src/components/Charts/Pie/index.less

 @import '~antd/es/style/themes/default.less';
+@import '../../../global/styles/utils.less';
 
 .pie {
   position: relative;
+
   .chart {
     position: relative;
   }
+
   &.hasLegend .chart {
     width: ~'calc(100% - 240px)';
   }
+
   .legend {
     position: absolute;
     top: 50%;
     right: 0;
     min-width: 200px;
     margin: 0 20px;
-    padding: 0;
+    padding: 0 0 0 6%;
+    display: flex;
     list-style: none;
     transform: translateY(-50%);
+
+    &-item {
+      cursor: pointer;
+      .textOverflow();
+    }
+
     li {
+      flex: 0 0 33.33%;
       height: 22px;
       margin-bottom: 16px;
       line-height: 22px;
@@ -27,6 +39,7 @@
       }
     }
   }
+
   .dot {
     position: relative;
     top: -1px;
@@ -36,6 +49,7 @@
     margin-right: 8px;
     border-radius: 8px;
   }
+
   .line {
     display: inline-block;
     width: 1px;
@@ -43,19 +57,24 @@
     margin-right: 8px;
     background-color: @border-color-split;
   }
+
   .legendTitle {
     color: @text-color;
   }
+
   .percent {
     color: @text-color-secondary;
   }
+
   .value {
     position: absolute;
     right: 0;
   }
+
   .title {
     margin-bottom: 8px;
   }
+
   .total {
     position: absolute;
     top: 50%;
@@ -63,6 +82,7 @@
     max-height: 62px;
     text-align: center;
     transform: translate(-50%, -50%);
+
     & > h4 {
       height: 22px;
       margin-bottom: 8px;
@@ -71,12 +91,14 @@
       font-size: 14px;
       line-height: 22px;
     }
+
     & > p {
       display: block;
       height: 32px;
       color: @heading-color;
-      font-size: 1.2em;
       line-height: 32px;
+      font-size: 24px;
+      font-weight: 500;
       white-space: nowrap;
     }
   }
@@ -87,6 +109,7 @@
     width: 100%;
     margin: 0 0 32px 0;
   }
+  
   .legend {
     position: relative;
     transform: none;

src/components/Charts/Pie/index.tsx

-import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import { 
+  Chart, 
+  Axis, 
+  Interval, 
+  Interaction, 
+  Coordinate, 
+  Legend, 
+  Tooltip, 
+  registerShape, 
+} from 'bizcharts';
 import React, { Component } from 'react';
+import { Row, Col } from 'antd';
+import { RowProps, ColProps } from 'antd/lib/grid';
 
 import DataSet from '@antv/data-set';
 import G2 from '@antv/g2/lib/chart/chart';
@@ -13,7 +24,6 @@ export interface PieProps {
   animate?: boolean;
   color?: string;
   colors?: string[];
-  selected?: boolean;
   height?: number;
   margin?: [number, number, number, number];
   hasLegend?: boolean;
@@ -33,6 +43,8 @@ export interface PieProps {
   tooltip?: boolean;
   valueFormat?: (value: string) => string | React.ReactNode;
   subTitle?: React.ReactNode;
+  rowProps?: RowProps;
+  colProps?: ColProps;
 }
 interface PieState {
   legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
@@ -41,7 +53,7 @@ interface PieState {
 class Pie extends Component<PieProps, PieState> {
   state: PieState = {
     legendData: [],
-    legendBlock: false,
+    legendBlock: true,
   };
 
   requestRef: number | undefined = undefined;
@@ -61,7 +73,7 @@ class Pie extends Component<PieProps, PieState> {
     if (
       this.root &&
       this.root.parentNode &&
-      (this.root.parentNode as HTMLElement).clientWidth <= 380
+      (this.root.parentNode as HTMLElement).clientWidth <= 400
     ) {
       if (!legendBlock) {
         this.setState({
@@ -90,7 +102,7 @@ class Pie extends Component<PieProps, PieState> {
     if (data !== preProps.data) {
       // because of charts data create when rendered
       // so there is a trick for get rendered time
-      // this.getLegendData();
+      this.getLegendData();
     }
   }
 
@@ -121,14 +133,12 @@ class Pie extends Component<PieProps, PieState> {
 
     const legendData = items.map((item: { color: any; _origin: any }[]) => {
       /* eslint no-underscore-dangle:0 */
-      const origin = item[0]._origin;
+      const origin = {...item[0]._origin};
       origin.color = item[0].color;
       origin.checked = true;
       return origin;
     });
 
-    console.log('legendData', legendData)
-
     this.setState({
       legendData,
     });
@@ -171,7 +181,7 @@ class Pie extends Component<PieProps, PieState> {
       inner = 0.75,
       animate = true,
       colors,
-      lineWidth = 1,
+      lineWidth = 1, 
     } = this.props;
 
     const { legendData, legendBlock } = this.state;
@@ -182,17 +192,21 @@ class Pie extends Component<PieProps, PieState> {
 
     const {
       data: propsData,
-      selected: propsSelected = true,
-      tooltip: propsTooltip = true,
+      tooltip: propsTooltip = true, 
+      rowProps = {}, 
+      colProps = {},
     } = this.props;
 
     let data = propsData || [];
-    let selected = propsSelected;
     let tooltip = propsTooltip;
 
+    const { gutter: propsGutter, ...rowRest } = rowProps;
+    const { span: propsSpan, ...colRest } = colProps;
+    const gutter = propsGutter || [12, 12];
+    const span = propsSpan || 12;
+
     const defaultColors = colors;
     data = data || [];
-    selected = selected || true;
     tooltip = tooltip || true;
     let formatColor;
 
@@ -207,7 +221,6 @@ class Pie extends Component<PieProps, PieState> {
     };
 
     if (percent || percent === 0) {
-      selected = false;
       tooltip = false;
       formatColor = (value: string) => {
         if (value === '占比') {
@@ -229,10 +242,10 @@ class Pie extends Component<PieProps, PieState> {
     }
 
     const tooltipFormat: [string, (...args: any[]) => { name?: string; value: string }] = [
-      'x*percent',
-      (x: string, p: number) => ({
+      'x*y*percent',
+      (x: string, y: number, p: number) => ({
         name: x,
-        value: `${(p * 100).toFixed(2)}%`,
+        value: `${y} | ${(p * 100).toFixed(2)}%`,
       }),
     ];
 
@@ -259,16 +272,18 @@ class Pie extends Component<PieProps, PieState> {
             animate={animate}
             onGetG2Instance={this.getG2Instance}
           >
+            <Coordinate type="theta" innerRadius={inner} />
+            <Axis visible={false} />
             {!!tooltip && <Tooltip showTitle={false} />}
-            <Coord type="theta" innerRadius={inner} />
-            <Geom
-              style={{ lineWidth, stroke: '#fff' }}
-              tooltip={tooltip ? tooltipFormat : undefined}
-              type="interval"
-              position="percent"
+            <Interval
+              adjust="stack"
+              position="y"
               color={['x', percent || percent === 0 ? formatColor : defaultColors] as any}
-              selected={selected}
+              shape="sliceShape"
+              tooltip={tooltip ? tooltipFormat : undefined}
             />
+            <Legend visible={false} />
+            <Interaction type="element-single-selected" />
           </Chart>
 
           {(subTitle || total) && (
@@ -276,16 +291,28 @@ class Pie extends Component<PieProps, PieState> {
               {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
               {/* eslint-disable-next-line */}
               {total && (
-                <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
+                <p className="pie-stat">
+                  {typeof total === 'function' ? total() : total}
+                </p>
               )}
             </div>
           )}
         </div>
 
         {hasLegend && (
-          <ul className={styles.legend}>
+          <Row 
+            className={styles.legend}
+            gutter={gutter}
+            {...rowRest}
+          >
             {legendData.map((item, i) => (
-              <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
+              <Col 
+                key={item.x} 
+                className={styles['legend-item']}
+                onClick={() => this.handleLegendClick(item, i)}
+                span={span}
+                {...colProps}
+              >
                 <span
                   className={styles.dot}
                   style={{
@@ -293,14 +320,14 @@ class Pie extends Component<PieProps, PieState> {
                   }}
                 />
                 <span className={styles.legendTitle}>{item.x}</span>
-                <Divider type="vertical" />
+                {/* <Divider type="vertical" />
                 <span className={styles.percent}>
                   {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
                 </span>
-                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
-              </li>
+                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span> */}
+              </Col>
             ))}
-          </ul>
+          </Row>
         )}
       </div>
     );

src/global/config/global.d.ts

+export interface MemberType {
+	id: number;
+	typeName: string;
+}
+
+export interface BusinessType {
+	id: number;
+	typeName: string;
+}
+
+export interface UseType {
+	memberType: MemberType[];
+	businessType: BusinessType[];
+}
+
+export interface UserRegister {
+	useType: UseType;
+}
+
+export interface ShopInfo {
+	id: number;
+	name: string;
+	type: number;
+	environment: number;
+	logoUrl: string;
+	describe: string;
+	state: number;
+	url: string;
+}
+
+export interface Web {
+	shopInfo: ShopInfo[];
+}
+
+export interface PayConfig {
+	paymemberConfig?: any;
+}
+
+export interface CountryList {
+	name: string;
+	key: string;
+	icon: string;
+}
+
+export interface Global {
+	siteId: number;
+	siteUrl: string;
+	logo: string;
+	countryList: CountryList[];
+}
+
+export interface RootObject {
+	userRegister: UserRegister;
+	web: Web;
+	payConfig: PayConfig;
+	global: Global;
+}
\ No newline at end of file

src/global/styles/utils.less

+.textOverflow() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  position: relative;
+  max-height: @line * 1.5em;
+  margin-right: -1em;
+  padding-right: 1em;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
+  }
+  &::after {
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
+  }
+}
+
+.textOverflowMulti2(@line: 3) {
+  display: -webkit-box;
+  /* autoprefixer: off */
+  -webkit-box-orient:vertical;
+  /* autoprefixer: on */
+  -webkit-line-clamp: @line;
+  overflow: hidden;
+}
\ No newline at end of file

src/pages/member/components/memberDetail/SincerityInfo/index.less

 .sincerityInfo {
+  .tofo {
+    height: 100%;
+
+    :global {
+      .antd-card {
+        height: 100%;
+      }
+    }
+
+    &-item {
+      width: 50%;
+      padding: 55px 24px;
+
+      &-logo {
+        width: 72px;
+        height: 72px;
+      }
+    }
+  }
+}
+
+.contentBox {
+  position: relative;
+  padding-right: 72px;
+  background: #ffffff;
+
+  &-main {
+    
+  }
+
+  &-extra {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .title {
+    margin-bottom: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(107, 119, 140, 1);
+
+    :global {
+      .anticon {
+        margin-left: 6px;
+      }
+    }
+  }
+
+  .txt {
+    line-height: 32px;
+    font-size: 24px;
+    font-weight: 500;
+    color: rgba(23, 43, 77, 1);
+  }
+}
+
+.record {
+  &-tabs {
+    :global {
+      .ant-tabs-nav::before {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &-btns {
+    margin-bottom: 16px;
+  }
   
+  &-row {
+    :global {
+      .ant-table-cell:first-child {
+        background-color: rgba(250, 251, 252, 1);
+      }
+    }
+  }
 }
\ No newline at end of file

src/pages/member/components/memberDetail/index.tsx

@@ -22,7 +22,7 @@ const { Step } = Steps;
 
 const MemberDetail: React.FC<{}> = () => {
   const { pageStatus, id, validateId } = usePageStatus();
-  const [actived, setActived] = useState('3');
+  const [actived, setActived] = useState('5');
   const [detailData, setDetailData] = useState<any>({});
 
   const fetchDetailData = async () => {