✨ feat(): 感谢函修改

src/pages/transaction/purchaseAbility/components/detail/components/bidLayout/index.less

+.thankModal {
+  :global {
+    .ant-modal-header {
+      display: none;
+    }
+
+    .ant-modal-content {
+      height: 440px;
+      background: url("../../../../../../../assets/imgs/thankLetterBg.png") center center no-repeat;
+      // background: url('../../../../assets/imgs/thankLetterBg.png') center center no-repeat;
+    }
+
+    .ant-modal-footer {
+      display: none;
+    }
+  }
+
+  .thankLetter {
+
+    // width: 660px;
+    // height: 440px;
+    h2 {
+      text-align: center;
+      font-size: 24px;
+      font-weight: 500;
+      color: #303133;
+      // height: 36px;
+      // line-height: 36px;
+      padding-top: 20px;
+    }
+
+    h4 {
+      text-align: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: #C0C4CC;
+      line-height: 16px;
+      padding: 0 24px;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      color: #303133;
+      line-height: 24px;
+      padding: 0 24px;
+    }
+
+    .name {
+      font-weight: 500;
+      text-align: left;
+      padding: 0 24px;
+    }
+
+    .company {
+      text-align: right;
+      padding: 0 24px;
+      margin-top: 100px;
+    }
+
+    .time {
+      text-align: right;
+      padding: 0 24px;
+    }
+  }
+
+}

src/pages/transaction/purchaseAbility/components/detail/components/bidLayout/index.tsx

-import React, { useContext } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { Context } from '../context';
 import Card from '../../../card';
-import { Button, Row, Col, Collapse } from 'antd';
+import { Button, Row, Col, Modal } from 'antd';
 import { ExclamationCircleFilled } from '@ant-design/icons';
+import style from './index.less';
+import moment from 'moment';
+import { getAuth } from '@/utils/auth';
 
 const BidLayout = () => {
   const context = useContext(Context);
-  const title = context.isPrize === 1 ? '中标通知' : '授标结果'
+  const title = context.isPrize === 1 ? '中标通知' : '授标结果';
+  const [visible, setVisible] = useState<boolean>(false);
+  const userInfo = useMemo(() => getAuth(), [context]);
   return (
     <Card
       id='bidLayout'
       title={title}
       backgroundColor={context.isPrize === 1 && '#00B37A'}
-      extra={!context.isPrize && <Button type='link'>查看感谢函</Button>}
+      extra={context.content && <Button type='link' onClick={() => setVisible(true)}>查看感谢函</Button>}
     >
-      { context.isPrize === 1 ? (
+      {context.isPrize === 1 ? (
         <div style={{ whiteSpace: 'pre' }}>{context.awardResults}</div>
       ) : (
         <Row>
@@ -22,11 +27,31 @@ const BidLayout = () => {
             <ExclamationCircleFilled style={{ fontSize: '20px', color: '#91949a' }} />
           </Col>
           <Col>
-            <p style={{ fontSize: '16px', marginLeft: 5,  }}>贵公司此次未中标！</p>
+            <p style={{ fontSize: '16px', marginLeft: 5, }}>贵公司此次未中标！</p>
             <p style={{ fontSize: '12px', }}>非常感谢贵公司的积极参与，希望下次合作成功！</p>
           </Col>
         </Row>
       )}
+
+      {/* 感谢函 */}
+      <Modal
+        title="感谢函"
+        visible={visible}
+        onOk={()=> setVisible(false)}
+        onCancel={()=> setVisible(false)}
+        width={660}
+        className={style.thankModal}
+      >
+        <div className={style.thankLetter}>
+          <h2>感谢函</h2>
+          <h4>THANKS LETTER</h4>
+          <p className={style.name}>尊敬的{userInfo.name}</p>
+          <p>{context.content}</p>
+          <p className={style.company}>{context.createMemberName}</p>
+          <p className={style.time}>{moment().format('YYYY-MM-DD')}</p>
+        </div>
+      </Modal>
+
     </Card>
   )
 }