feat: 营销活动-新增活动-goodsItem

src/pages/transaction/marketingAbility/components/addFormGoods/modal/giveCouponDrawer/couponCollapse/index.tsx

@@ -3,6 +3,7 @@ import { Button, Select, Input, Drawer, Row, Col, Space, Form } from 'antd';
 import { CaretDownOutlined, CaretRightOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
 
 import CouponItem from '../../../../couponItem';
+import GoodsItem from '../../../../goodsItem';
 
 import styles from './index.less';
 
@@ -55,7 +56,8 @@ const CouponCollapse: React.FC<CouponCollapseProps> = (props: any) => {
               <div className={styles.CouponCollapse_context_coupon}>
                 <span className={styles.CouponCollapse_context_coupon_span}>赠送优惠券:</span>
                 <div style={{flex: 1}}>
-                  <CouponItem />
+                  {/* <CouponItem /> */}
+                  <GoodsItem />
                 </div>
               </div>
               <Form.Item

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

+.goodsItem {
+  border: 1px solid #F7F8FA;
+  padding: 8px;
+  position: relative;
+  &:hover{
+      border-color: #00B37A;
+  }
+  .goodsItem_img{
+      height: 80px;
+      width: 80px;
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+  }
+  .goodsItem_title{
+      font-size: 12px;
+      color: #252D37;
+  }
+  .goodsItem_price{
+      color: #91959B;
+      font-size: 12px;
+      span{
+          font-size: 14px;
+          color: #D32F2F;
+      }
+  }
+  .goodsItem_info{
+      font-size: 12px;
+      color: #91959B;
+  }
+  .goodsItem_edit{
+      position: absolute;
+      right: 0;
+      top: 0;
+      background-color: rgba(0,0,0,0.40);
+      width: 24px;
+      height: 24px;
+      line-height: 28px;
+      font-size: 16px;
+      text-align: center;
+      color: #fff;
+  }
+}

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

+import React from 'react';
+import { Row, Col, Space } from 'antd';
+import { FormOutlined } from '@ant-design/icons';
+
+import styles from './index.less';
+
+const GoodsItem = () => {
+  return (
+    <div className={styles.goodsItem}>
+      <Row gutter={8} wrap={false}>
+        <Col>
+          <div className={styles.goodsItem_img}></div>
+        </Col>
+        <Col flex='auto'>
+          <div className={styles.goodsItem_title}>0.8-1.0mm黑色手折纹胎水牛皮【厂价供应】</div>
+          <div className={styles.goodsItem_price}>
+            <span>¥ 179.00</span>/尺
+          </div>
+          <div className={styles.goodsItem_info}>品类：成品皮--&gt;牛皮--&gt;黄牛皮</div>
+          <div className={styles.goodsItem_info}>品牌：PELLE 颜色：红色 规格：XXL</div>
+        </Col>
+      </Row>
+      <FormOutlined className={styles.goodsItem_edit} />
+    </div>
+  );
+}
+
+export default GoodsItem;