feat: 营销活动-选择优惠券

src/pages/transaction/marketingAbility/components/addFormGoods/modal/addCouponsDrawer/index.tsx

 import React, { useRef, useCallback, useEffect, useState } from 'react';
-import { Space, Button, Select, Input, Drawer, Row, Col } from 'antd';
+import { Space, Button, Select, Input, Drawer, Row, Col, Checkbox } from 'antd';
+
+import CouponItem from '../../../couponItem';
 
 const { Search } = Input;
 
@@ -31,7 +33,7 @@ const AddCouponsDrawer = (props: any) => {
             <Space style={{ display: 'flex' }} direction='vertical'>
                 <Row gutter={8}>
                     <Col>
-                        <Select style={{width: '200px'}}></Select>
+                        <Select style={{ width: '200px' }}></Select>
                     </Col>
                     <Col>
                         <Search placeholder="搜索" onSearch={onSearch} style={{ width: 200 }} />
@@ -40,6 +42,14 @@ const AddCouponsDrawer = (props: any) => {
                         <Button>重置</Button>
                     </Col>
                 </Row>
+                <Row wrap={false} justify='center' align='middle' gutter={32}>
+                    <Col flex="none">
+                        <Checkbox />
+                    </Col>
+                    <Col flex="auto">
+                        <CouponItem />
+                    </Col>
+                </Row>
             </Space>
         </Drawer>
     );

src/pages/transaction/marketingAbility/components/couponItem/index.less

+.couponItem {
+  position: relative;
+  height: 100px;
+  width: 100%;
+
+  .couponItemLeft {
+    width: 144px;
+    height: 100%;
+    background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #3899FF 3px);
+    background-size: 15px 10px;
+    background-position: 1% 1px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+
+    p {
+      font-size: 12px;
+      text-align: center;
+      color: #fff;
+      margin: 0;
+
+      span {
+        font-size: 24px;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      box-sizing: border-box;
+      left: -15px;
+      top: 37.5px;
+      z-index: 10;
+      background-color: #fff;
+    }
+
+    &::after {
+      background-color: #3899FF;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 10px;
+      z-index: -1;
+    }
+  }
+
+  .couponItemRight {
+    height: 100%;
+    position: relative;
+    border: 1px solid #EDEEEF;
+    border-radius: 0 4px 4px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    font-size: 12px;
+    padding-left: 20px;
+
+    .couponItemRight_type {
+      color: #007BFC;
+      padding: 2px 4px;
+      background-color: #E9F3FF;
+      width: fit-content;
+    }
+
+    .couponItemRight_info{
+        font-size: 14px;
+        color: #252D37;
+    }
+
+    .couponItemRight_date{
+        color: #91959B;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      border: 1px solid #EDEEEF;
+      box-sizing: border-box;
+      right: -15px;
+      top: 37.5px;
+      z-index: 10;
+      background-color: #fff;
+    }
+  }
+}

src/pages/transaction/marketingAbility/components/couponItem/index.tsx

+import React from 'react';
+import { Row, Col, Space } from 'antd';
+
+import styles from './index.less';
+
+const CouponItem = () => {
+  return (
+    <div className={styles.couponItem}>
+      <Row style={{ height: '100%' }} wrap={false}>
+        <Col flex='none'>
+          <div className={styles.couponItemLeft}>
+            <p>¥<span>10.00</span></p>
+            <p>满200.00元可用</p>
+          </div>
+        </Col>
+        <Col flex='auto' style={{ overflow: 'hidden' }}>
+          <div className={styles.couponItemRight}>
+            <div className={styles.couponItemRight_type}>通用优惠券</div>
+            <div className={styles.couponItemRight_info}>10元全品类优惠劵</div>
+            <div className={styles.couponItemRight_date}>2020.08.25-2020.09.25</div>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default CouponItem;