feat(carinsur): 保险返利保险明细字段显示优化

徐欣
1 parent a1d06749
Showing 6 changed files with 305 additions and 71 deletions
src/pages/carinsur/Rebate/api.ts
src/pages/carinsur/Rebate/subpages/RebateConfirm/Second/components/Card.tsx
src/pages/carinsur/Rebate/subpages/RebateConfirm/Second/components/card.less
src/pages/carinsur/Rebate/subpages/RebateConfirm/Second/index.less
src/pages/carinsur/Rebate/subpages/RebateConfirm/Second/index.tsx
src/pages/carinsur/Rebate/subpages/RebateConfirm/index.tsx
@@ -120,6 +120,19 @@ export interface ListV0 {
   rebateAccountList?: rebateAccountList[]; // 资金账户信息
   fid?: string;
   approvalOrderNo?: string;
+  daiRebateMethod: number; // 驾意险返利方式
+  tradTciRebateRate: number;
+  newTciRebateRate: number;
+  tradVciRebateRate: number;
+  newVciRebateRate: number;
+  repairMarginRebateRate: number;
+  daiFixedRebateRate: number;
+  vciChallengeRebateRate: number;
+  tradVciChallengeCalRate: number;
+  tradVciChallengeRebateAmount: number;
+  newVciChallengeCalRate: number;
+  repairRateRepair: number;
+  repairRateSale: number;
 }
  
 export interface rebateAccountList {
-import React, { CSSProperties } from 'react';
-import { QuestionCircleOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import React from 'react';
+import { Row, Tag } from 'antd';
+import st from './card.less';
  
 interface Props {
   value?: number;
+  title: string;
   unit?: string;
-  description?: string;
-  style?: CSSProperties;
-  valueStyle?: CSSProperties;
-  onClick?: Function;
-  tip?: string;
+  type?: 1 | 2;
+  tags?: string[];
+  ratio?: number;
+  centerData?: any;
+  rightData?: any;
+  centerDataEle?: React.ReactNode;
+  rightDataEle?: React.ReactNode;
+  onClick?: () => void;
 }
 export default function Card(props: Props) {
-  const { value, unit = '元', description, style, valueStyle, onClick, tip } = props;
+  const { value = 0.0, title, unit = '万元', type = 1, tags = [], ratio, centerData, rightData, centerDataEle, rightDataEle, onClick } = props;
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', ...style }}>
-      <div>
-        <span
-          style={{ fontSize: 14, fontWeight: 'bold', color: onClick ? '#4189FD' : '#333333', cursor: 'pointer', ...valueStyle }}
-          onClick={() => onClick?.()}
-        >
-          {value ? value.toFixed(2) : 0}
-        </span>
-        <span style={{ color: '#999999', fontSize: 12 }}>{`(${unit})`}</span>
+    <Row align="middle" justify="space-between" className={st.card} onClick={onClick}>
+      <div className={st.left}>
+        <div>
+          <span className={st.spanAmount}>{value}</span>
+          <span className={st.spanUnit}>({unit})</span>
+        </div>
+        <div className={st.spanTitle}>{title}</div>
+        {tags?.map((i) => (
+          <div key={i}>
+            <Tag>{i}</Tag>
+          </div>
+        ))}
+        {ratio && <div style={{ fontSize: 16, color: '#999999' }}>返利比例：{ratio}%</div>}
       </div>
-      <div>
-        {description}
-        {!!tip && (
-          <Tooltip title={tip} placement="right" style={{ color: '#CCCCCC' }}>
-            <QuestionCircleOutlined style={{ marginLeft: 5 }} />
-          </Tooltip>
-        )}
-      </div>
-    </div>
+      {type === 1 && centerData && (
+        <div className={st.center}>
+          <div>
+            燃油车出保：
+            <span className={st.spanOut}>
+              {centerData.data1}
+              {unit}
+            </span>
+          </div>
+          <div>
+            燃油车返利比例：<span className={st.spanRatio}>{centerData.data2 * 100}%</span>
+          </div>
+          <div>
+            燃油车返利：
+            <span className={st.spanIn}>
+              {centerData.data3}
+              {unit}
+            </span>
+          </div>
+        </div>
+      )}
+      {type === 1 && rightData && (
+        <div className={st.right}>
+          <div>
+            新能源车出保：
+            <span className={st.spanOut}>
+              {rightData.data1}
+              {unit}
+            </span>
+          </div>
+          <div>
+            新能源车返利比例：<span className={st.spanRatio}>{rightData.data2 * 100}%</span>
+          </div>
+          <div>
+            新能源车返利：
+            <span className={st.spanIn}>
+              {rightData.data3}
+              {unit}
+            </span>
+          </div>
+        </div>
+      )}
+      {type === 2 && centerData && (
+        <div className={st.center}>
+          <div>
+            返利比例：<span className={st.spanRatio}>{centerData.data1 * 100}%</span>
+          </div>
+          <div>
+            送修差额合计：
+            <span className={st.spanIn}>
+              {centerData.data2}
+              {unit}
+            </span>
+          </div>
+          <div>
+            签约送修比：<span className={st.spanRatio}>{centerData.data3}</span>
+          </div>
+        </div>
+      )}
+      {type === 2 && rightData && (
+        <div className={st.right}>
+          <div>
+            出保金额合计：
+            <span className={st.spanOut}>
+              {rightData.data1}
+              {unit}
+            </span>
+          </div>
+          <div>
+            送修金额合计：
+            <span className={st.spanOut}>
+              {rightData.data2}
+              {unit}
+            </span>
+          </div>
+        </div>
+      )}
+      {centerDataEle && <div className={st.center}>{centerDataEle}</div>}
+      {rightDataEle && <div className={st.center}>{rightDataEle}</div>}
+    </Row>
   );
 }
+.card {
+    background-color: #fff;
+    border-radius: 6px;
+    padding: 15px 20px;
+
+    .left, .center, .right {
+        color: #666;
+        font-size: 16px;
+    }
+    .left {
+        width: 20%;
+        text-align: left;
+    }
+    .center, .right {
+        width: 40%;
+        text-align: left;
+    }
+    .spanOut {
+        color: #1589FF;
+        font-weight: 700;
+    }
+    .spanIn {
+        color: #666;
+        font-weight: 700;
+    }
+    .spanAmount {
+        color: #FF8B00;
+        font-size: 24px;
+        font-weight: 700;
+    }
+    .spanTitle {
+        color: #333333;
+        font-size: 16px;
+        font-weight: 700;
+    }
+    .spanUnit {
+        color: #999999;
+        font-size: 14px;
+    }
+}
 \ No newline at end of file
 .container {
-  margin-top: 45px;
-
-  .card {
-    display: flex;
-    margin-bottom: 50px;
-
-    .item {
-      display: grid;
-      flex: 1;
-      grid-template-rows: repeat(3, 1fr);
-      grid-template-columns: repeat(2, 1fr);
-      gap: 5px;
-      border-left: 1px solid #ccc;
-      &:first-child {
-        border-left: none;
-      }
-    }
-
-    .ant-divider-vertical {
-      height: auto;
-      background-color: #999;
-    }
+  .item {
+    background-color: #F4F4F4;
+    padding: 15px;
+    display: grid;
+    flex: 1;
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
   }
   .rebateinfo {
     margin-top: 20px;
@@ -2,16 +2,24 @@ import React, { useState } from &#39;react&#39;;
 import rebateStore from '../store';
 import { observer } from 'mobx-react-lite';
 import Card from './components/Card';
-import { Divider, InputNumber, Form, Input, Button } from 'antd';
+import { Divider, InputNumber, Form, Input, Button, Tabs, Row } from 'antd';
 import AccountChoose from './components/AccountChoose';
 import { history } from 'umi';
 import styles from './index.less';
+import st from './components/card.less';
 import rmb from '@/utils/rmb';
 import FeeweeUploadAttachment from '@/components/FeeweeUploadAttachment';
 import { UploadOutlined } from '@ant-design/icons';
  
 const TextArea = Input.TextArea;
  
+enum DaiRebateMethod {
+  '不返利' = 1,
+  '计入商业险',
+  '固定比例返利',
+  '保费阶梯返利',
+}
+
 interface Props {
   form: any;
 }
@@ -30,29 +38,123 @@ function Index({ form }: Props) {
     }
   };
  
-  return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <div className={styles.item} style={{ flex: 1.1 }}>
+  const TabItems = [
+    {
+      key: '1',
+      label: '返利明细',
+      children: (
+        <div className={styles.item}>
           <Card
             value={data?.tciRebateAmount}
-            description="交强险返利"
-            style={{ gridColumnStart: 1, gridColumnEnd: 3 }}
-            valueStyle={{ fontSize: 16 }}
+            title="交强险返利"
+            tags={data?.afterSettleInsuranceTypes?.includes('1') ? ['税后计算'] : []}
+            centerData={{
+              data1: data?.tradTciOutputValue,
+              data2: data?.tradTciRebateRate,
+              data3: data?.tradTciRebateAmount,
+            }}
+            rightData={{
+              data1: data?.newTciOutputValue,
+              data2: data?.newTciRebateRate,
+              data3: data?.newTciRebateAmount,
+            }}
+          />
+          <Card
+            value={data?.vciRebateAmount}
+            title="商业险返利"
+            tags={data?.afterSettleInsuranceTypes?.includes('2') ? ['税后计算'] : []}
+            centerData={{
+              data1: data?.tradVciOutputValue,
+              data2: data?.tradVciRebateRate,
+              data3: data?.tradVciRebateAmount,
+            }}
+            rightData={{
+              data1: data?.newVciOutputValue,
+              data2: data?.newVciRebateRate,
+              data3: data?.newVciRebateAmount,
+            }}
           />
-          <Card value={data?.tradTciRebateAmount} description="燃油车交强险返利" tip={data?.tradTciRebateCalFormula} />
-          <Card value={data?.newTciRebateAmount} description="新能源车交强险返利" tip={data?.newTciRebateCalFormula} />
+          {/* 【不返利】不显示 */}
+          {data?.daiRebateMethod === 2 && (
+            <Card
+              value={data?.daiRebateAmount}
+              title="驾意险返利 todo"
+              tags={[DaiRebateMethod[data?.daiRebateMethod ?? 1]]}
+              centerData={{
+                data1: data?.tradVciOutputValue, // todo
+                data2: data?.tradVciRebateRate,
+                data3: data?.tradVciRebateAmount, // todo
+              }}
+              rightData={{
+                data1: data?.newVciOutputValue, // todo
+                data2: data?.newVciRebateRate,
+                data3: data?.newVciRebateAmount, // todo
+              }}
+            />
+          )}
+          {(data?.daiRebateMethod === 3 || data?.daiRebateMethod === 4) && (
+            <Card
+              value={data?.daiRebateAmount}
+              title="驾意险返利"
+              tags={[DaiRebateMethod[data?.daiRebateMethod ?? 1]]}
+              centerDataEle={
+                <div>
+                  出保：
+                  <span className={st.spanOut}>{data.daiRebateAmount}</span>
+                </div>
+              }
+              rightDataEle={
+                data?.daiRebateMethod === 3 ? (
+                  <div>
+                    返利比例：
+                    <span className={st.spanOut}>{data.daiFixedRebateRate}</span>
+                  </div>
+                ) : (
+                  <></>
+                )
+              }
+            />
+          )}
           <Card
-            value={data?.tradTciOutputValue}
-            description="燃油车交强险保费"
-            onClick={() => history.push(`/angel/insurancerebate/insurancePolicy?rebateId=${data?.id}&carType=1&insuranceType=1`)}
+            value={data?.repairMarginRebateAmount}
+            title="送修差额返利"
+            type={2}
+            centerData={{
+              data1: data?.repairMarginRebateRate,
+              data2: data?.repairMarginRebateAmount, // todo
+              data3: `${data?.repairRateRepair}:${data?.repairRateSale}`,
+            }}
+            rightData={{
+              data1: data?.saleAmount,
+              data2: data?.repairAmount,
+            }}
+            // onClick={() => history.push(`/angel/insurancerebate/insurancePolicy?rebateId=${data?.id}&carType=1&insuranceType=1`)}
           />
           <Card
-            value={data?.newTciOutputValue}
-            description="新能源车交强险保费"
-            onClick={() => history.push(`/angel/insurancerebate/insurancePolicy?rebateId=${data?.id}&carType=2&insuranceType=1`)}
+            value={data?.vciChallengeRebateAmount}
+            title="商业险挑战返利"
+            ratio={data?.vciChallengeRebateRate}
+            centerData={{
+              data1: data?.tradVciOutputValue,
+              data2: data?.tradVciChallengeCalRate,
+              data3: data?.tradVciChallengeRebateAmount,
+            }}
+            rightData={{
+              data1: data?.newVciOutputValue,
+              data2: data?.newVciChallengeCalRate,
+              data3: data?.newVciChallengeRebateAmount,
+            }}
+            // onClick={() => history.push(`/angel/insurancerebate/insurancePolicy?rebateId=${data?.id}&carType=2&insuranceType=1`)}
           />
         </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <Tabs type="card" items={TabItems} />
+      {/* <div className={styles.card}>
         <div className={styles.item} style={{ flex: 1.1 }}>
           <Card
             value={data?.vciRebateAmount}
@@ -112,7 +214,7 @@ function Index({ form }: Props) {
           <Card value={data?.tradVciChallengeRebateAmount} description="燃油车商业险挑战返利" tip={data?.tradVciChallengeRebateCalFormula} />
           <Card value={data?.newVciChallengeRebateAmount} description="新能源车商业险挑战返利" tip={data?.newVciChallengeRebateCalFormula} />
         </div>
-      </div>
+      </div> */}
       <div>
         <Divider orientation="left" orientationMargin="0" />
         <div style={{ fontWeight: 'bold', fontSize: 20, color: '#333', marginTop: 30, marginBottom: 20 }}>
 import React, { useEffect, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Card, Steps, Button, Descriptions, message, Popconfirm, Form } from 'antd';
+import { Card, Steps, Button, message, Popconfirm, Form, Input, Row } from 'antd';
 import { history } from 'umi';
 import First from './First';
 import Second from './Second';
@@ -23,6 +23,7 @@ const { Step } = Steps;
 function Index() {
   const query = history?.location?.query;
   const [form] = Form.useForm();
+  const [titleForm] = Form.useForm();
   const { data, loading, uploadResult, getDetail, current, setCurrent, setUploadResult, setFileList } = rebateStore;
   const [btnLoading, setBtnLoading] = useState(false);
  
@@ -32,6 +33,13 @@ function Index() {
     }
   }, [query]);
  
+  useEffect(() => {
+    titleForm.setFieldsValue({
+      insurerShortName: data?.insurerShortName,
+      month: data?.month,
+    });
+  }, [data]);
+
   // 数据回显
   useEffect(() => {
     if (data?.fid) {
@@ -80,10 +88,16 @@ function Index() {
             ))}
           </Steps>
         </div>
-        <Descriptions column={1} labelStyle={{ fontWeight: 'bold' }} contentStyle={{ fontWeight: 'bold' }}>
-          <Descriptions.Item label="保险公司">{data?.insurerShortName}</Descriptions.Item>
-          <Descriptions.Item label="返利月度">{data?.month}</Descriptions.Item>
-        </Descriptions>
+        <Form disabled form={titleForm}>
+          <Row align="middle" justify="space-between">
+            <Form.Item required style={{ width: '48%' }} name="insurerShortName" label="保险公司">
+              <Input />
+            </Form.Item>
+            <Form.Item required style={{ width: '48%' }} name="month" label="返利月度">
+              <Input />
+            </Form.Item>
+          </Row>
+        </Form>
         <div>{current === 0 ? <First /> : <Second form={form} />}</div>
         <div className="steps-action">
           <Button className="button" loading={btnLoading} onClick={() => cancel()}>