✨ feat(商家营销活动管理): 添加活动商品跳转和查看赠品

src/pages/transaction/components/detailLayout/components/listLayout/index.tsx

@@ -58,7 +58,7 @@ const ListLayout: React.FC<ListLayoutIProps> = (props: any) => {
       )}
       {done && (
         <Table
-          rowKey="id"
+          rowKey={(record => record.id)}
           columns={columns}
           dataSource={data}
           pagination={{

src/pages/transaction/marketingAbility/common/columns/columns_1.tsx

+import React from 'react';
+import { Tooltip, Image, Typography } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const columns_1 = () => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: <Tooltip placement="top" title="活动价格表示商城直接以该商品的活动价格进行销售">
+          活动价格 <QuestionCircleOutlined />
+        </Tooltip>,
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      }
+    ]
+  )
+}
+export default columns_1

src/pages/transaction/marketingAbility/common/columns/columns_2.tsx

+import React from 'react';
+import { Tooltip, Image, Typography } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const columns_2 = () => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => text ? `￥${Number(text).toFixed(2)}` : `￥0`
+      },
+      {
+        title: <Tooltip placement="top" title="直降价格为商品价格的直降价格，如原价每件￥20.00的商品，每件降价￥2.00，则直降价格输入框中输入 ￥2.00">
+          直降价格 <QuestionCircleOutlined />
+        </Tooltip>,
+        key: 'plummetPrice',
+        dataIndex: 'plummetPrice',
+        render: (text) => text ? `￥${Number(text).toFixed(2)}` : `￥0`
+      },
+      {
+        title: '活动价格',
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => text ? `￥${Number(text).toFixed(2)}` : `￥0`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      }
+    ]
+  )
+}
+export default columns_2

src/pages/transaction/marketingAbility/common/columns/columns_3.tsx

+import React from 'react';
+import { Tooltip, Image, Typography } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const columns_3 = () => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => text ? `￥${Number(text).toFixed(2)}` : `￥0`
+      },
+      {
+        title: <Tooltip placement="top" title="折扣为商品价格的折扣，输入数字，如85折，输入85，9折输入90">
+          折扣 <QuestionCircleOutlined />
+        </Tooltip>,
+        key: 'discount',
+        dataIndex: 'discount',
+        render: (text) => text + '折'
+      },
+      {
+        title: '活动价格',
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => text ? `￥${Number(text).toFixed(2)}` : `￥0`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      }
+    ]
+  )
+}
+export default columns_3

src/pages/transaction/marketingAbility/common/columns/columns_4.tsx

+import React from 'react';
+import { Image, Button, Typography } from 'antd';
+
+const columns_4 = ({
+  value,
+  handlCollocation
+}) => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      },
+      {
+        title: '操作',
+        key: 'operation',
+        dataIndex: 'operation',
+        render: (_text, _record) => (
+          <>
+            {(value === 6) && (
+              <Button type='link' onClick={() => handlCollocation(_record)}>查看赠品</Button>
+            )}
+            {(value === 13) && (
+              <Button type='link' onClick={() => handlCollocation(_record)}>查看换购商品</Button>
+            )}
+            {(value === 15) && (
+              <Button type='link' onClick={() => handlCollocation(_record)}>查看搭配商品</Button>
+            )}
+          </>
+        )
+      },
+    ]
+  )
+}
+export default columns_4

src/pages/transaction/marketingAbility/common/columns/columns_5.tsx

+import React from 'react';
+import { Image, Typography } from 'antd';
+
+const columns_5  = ({
+  dataSource,
+  setDataSource,
+  handleDelete,
+  form,
+}) => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '团购价格',
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      },
+    ]
+  )
+}
+export default columns_5

src/pages/transaction/marketingAbility/common/columns/columns_6.tsx

+import React from 'react';
+import { Tooltip, Image, Typography } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const columns_6 = ({
+  dataSource,
+  setDataSource,
+  handleDelete,
+  form,
+}) => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: <Tooltip placement="top" title="第一个用户帮砍价时的起始价格">
+          起始价格 <QuestionCircleOutlined />
+        </Tooltip>,
+        key: 'plummetPrice',
+        dataIndex: 'plummetPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: <Tooltip placement="top" title="砍价过程中最后一次砍价不能超过砍价底价">
+          砍价底价 <QuestionCircleOutlined />
+        </Tooltip>,
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      },
+    ]
+  )
+}
+export default columns_6

src/pages/transaction/marketingAbility/common/columns/columns_7.tsx

+import React from 'react';
+import { Tooltip, Image, Typography } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const columns_7 = ({
+  dataSource,
+  setDataSource,
+  handleDelete,
+  form,
+}) => {
+
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: <Tooltip placement="top" title="秒杀价格表示在秒杀时间段内商城直接以该商品的秒杀价格进行销售">
+          秒杀价格 <QuestionCircleOutlined />
+        </Tooltip>,
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum',
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      }
+    ]
+  )
+}
+export default columns_7

src/pages/transaction/marketingAbility/common/columns/columns_8.tsx

+import React from 'react';
+import { Image, Typography } from 'antd';
+
+const columns_8 = () => {
+  return (
+    [
+      {
+        title: '商品ID',
+        key: 'productId',
+        dataIndex: 'productId',
+        render: (text) => <Typography.Link target="_blank" href={`/memberCenter/commodityAbility/commodity/products/detail?id=${text}`}>{text}</Typography.Link>
+      },
+      {
+        title: '商品图片',
+        key: 'productImgUrl',
+        dataIndex: 'productImgUrl',
+        render: (text) => <Image width={32} height={32} src={text} />
+      },
+      {
+        title: '商品名称',
+        key: 'productName',
+        dataIndex: 'productName'
+      },
+      {
+        title: '品类',
+        key: 'category',
+        dataIndex: 'category'
+      },
+      {
+        title: '品牌',
+        key: 'brand',
+        dataIndex: 'brand'
+      },
+      {
+        title: '单位',
+        key: 'unit',
+        dataIndex: 'unit'
+      },
+      {
+        title: '商品价格',
+        key: 'price',
+        dataIndex: 'price',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '预售价格',
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '单位定金',
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '定金抵扣单价',
+        key: 'activityPrice',
+        dataIndex: 'activityPrice',
+        render: (text) => `￥${Number(text).toFixed(2)}`
+      },
+      {
+        title: '个人限购数量',
+        key: 'restrictNum',
+        dataIndex: 'restrictNum'
+      },
+      {
+        title: '活动限购总数量',
+        key: 'restrictTotalNum',
+        dataIndex: 'restrictTotalNum',
+      }
+    ]
+  )
+}
+export default columns_8

src/pages/transaction/marketingAbility/common/columns/index.tsx

+import columns_1 from './columns_1';
+import columns_2 from './columns_2';
+import columns_3 from './columns_3';
+import columns_4 from './columns_4';
+import columns_5 from './columns_4';
+import columns_6 from './columns_4';
+import columns_7 from './columns_4';
+import columns_8 from './columns_4';
+import columns_9 from './columns_5';
+import columns_11 from './columns_6';
+import columns_12 from './columns_7';
+import columns_13 from './columns_4';
+import columns_14 from './columns_8';
+import columns_15 from './columns_4';
+import columns_16 from './columns_4';
+
+export const Columns = {
+  1: columns_1,
+  2: columns_2,
+  3: columns_3,
+  4: columns_4,
+  5: columns_5,
+  6: columns_6,
+  7: columns_7,
+  8: columns_8,
+  9: columns_9,
+  11: columns_11,
+  12: columns_12,
+  13: columns_13,
+  14: columns_14,
+  15: columns_15,
+  16: columns_16,
+}

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

+.marginBottom {
+  margin-bottom: 16px;
+}
+.collapse {
+  display: flex;
+  flex-direction: row;
+
+  .collapse_index {
+    height: 32px;
+    width: 32px;
+    background-color: #FAFBFC;
+    text-align: center;
+    line-height: 32px;
+    margin-right: 4px;
+    font-size: 14px;
+    color: #303133;
+  }
+
+  .collapse_item {
+    flex: 1;
+
+    .collapse_header {
+      padding: 0 8px;
+      height: 32px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      background-color: #FAFBFC;
+      margin-bottom: 16px;
+      cursor: pointer;
+    }
+
+    .collapse_arrow {
+      margin-left: 8px;
+      color: #252D37;
+      font-size: 12px;
+      flex: 1;
+    }
+
+    .productLayout_title {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16px;
+
+      .productLayout_arrow {
+        flex: 1;
+        font-size: 12px;
+        color: #303133;
+      }
+
+      &::before {
+        content: '';
+        width: 2px;
+        height: 12px;
+        background-color: #00A98F;
+        margin-right: 6px;
+      }
+    }
+
+    .productLayout_contenxt {
+      // display: flex;
+      // flex-direction: row;
+      // flex-wrap: nowrap;
+      margin-bottom: 16px;
+
+      .productLayout_formItem {
+        width: 100%;
+
+        .productLayout_item {
+          border: 1px solid #F7F8FA;
+          padding: 8px;
+          cursor: pointer;
+          position: relative;
+
+          &:hover{
+            border-color: #00B37A;
+          }
+
+          .productLayout_item_img {
+            height: 80px;
+            width: 80px;
+            background-position: center;
+            background-size: contain;
+            background-repeat: no-repeat;
+          }
+
+          .productLayout_item_title {
+            font-size: 12px;
+            color: #252D37;
+          }
+
+          .productLayout_item_price {
+            color: #91959B;
+            font-size: 12px;
+
+            span{
+              font-size: 14px;
+              color: #D32F2F;
+            }
+          }
+
+          .productLayout_item_info {
+            font-size: 12px;
+            color: #91959B;
+          }
+        }
+      }
+    }
+
+    .couponLayout_contenxt {
+      position: relative;
+      height: 100px;
+      width: 100%;
+
+      .couponLayout_item_left {
+        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;
+        }
+      }
+
+      .couponLayout_item_right {
+        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;
+
+        .couponLayout_item_right_type {
+          color: #007BFC;
+          padding: 2px 4px;
+          background-color: #E9F3FF;
+          width: fit-content;
+        }
+
+        .couponLayout_item_right_info {
+          font-size: 14px;
+          color: #252D37;
+        }
+
+        .couponLayout_item_right_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/couponsListLayout/components/collapseLayout/index.tsx → src/pages/transaction/marketingAbility/components/collapseLayout/index.tsx

 import React, { useEffect, useState } from 'react';
 import { CaretRightOutlined, DeleteOutlined } from '@ant-design/icons';
 import cx from 'classnames';
-import style from '../../index.less';
+import style from './index.less';
 
 type RemindLayoutProps = {
   /** 弹窗标题 */
@@ -22,10 +22,12 @@ interface CollapseLayoutProps {
   index: number,
   /** 删除一个 */
   deletion: (e: number) => void,
+  /** 查看 */
+  isPreview?: boolean,
 }
 
 const CollapseLayout: React.FC<CollapseLayoutProps> = (props: any) => {
-  const { remind, children, index, deletion } = props;
+  const { remind, children, index, deletion, isPreview } = props;
   const [isActive, setIsActive] = useState<boolean>(false);
 
   useEffect(() => {
@@ -41,7 +43,7 @@ const CollapseLayout: React.FC<CollapseLayoutProps> = (props: any) => {
         <div className={style.collapse_header} onClick={() => setIsActive(!isActive)}>
           <CaretRightOutlined rotate={isActive ? 90 : 0} />
           <span className={style.collapse_arrow}>{remind.listTitle}</span>
-          <DeleteOutlined onClick={() => deletion(index)} />
+          {!isPreview && <DeleteOutlined onClick={() => deletion(index)} />}
         </div>
         {/* 内容 */}
         {isActive && (<>{children}</>)}

src/pages/transaction/marketingAbility/components/couponsListLayout/components/productLayout/index.tsx

@@ -60,10 +60,12 @@ export interface ProductLayoutProps {
   onDeletion: (_index: number) => void,
   /** 输入数量或者套餐价格 */
   onEntry: (name: string, num: number, _index?: number) => void,
+  /** 查看 */
+  isPreview?: boolean,
 }
 
 const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
-  const { form, remind, index, list, onDeletion, onEntry } = props;
+  const { form, remind, index, list, onDeletion, onEntry, isPreview } = props;
 
   const format = (text, fmt?: string) => {
     return <>{moment(text).format(fmt || "YYYY-MM-DD")}</>
@@ -94,7 +96,7 @@ const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
           }
         }]}
       >
-        <Input addonBefore={remind.type === 'limitValue' && '买'} addonAfter={remind.label[2]} onBlur={(e) => handleChange(e, `${remind.type}`)} />
+        <Input disabled={isPreview} addonBefore={remind.type === 'limitValue' && '买'} addonAfter={remind.label[2]} onBlur={(e) => handleChange(e, `${remind.type}`)} />
       </Form.Item>
       {/* 搭配商品 */}
       {list.map((_item: any, _index: number) => (
@@ -166,7 +168,7 @@ const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
                 }
               }]}
             >
-              <Input addonAfter={_item.unit} onBlur={(e) => handleChange(e, 'num', _index)} />
+              <Input disabled={isPreview} addonAfter={_item.unit} onBlur={(e) => handleChange(e, 'num', _index)} />
             </Form.Item>
           </div>
         </div>

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

 import React, { useEffect, useState } from 'react';
 import { Drawer, Button, Form, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import CollapseLayout from './components/collapseLayout';
+import CollapseLayout from '../collapseLayout';
 import { isArray, isEmpty } from 'lodash';
 import ProductLayout from './components/productLayout';
 import CouponsLayout from '@/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout';
@@ -38,6 +38,8 @@ interface CouponsListLayoutProps {
   onClose?: () => void,
   /** 确定 */
   onConfirm?: (fields: any[]) => void,
+  /** 查看 */
+  isPreview?: boolean,
 }
 
 interface CouponGroupListProps {
@@ -50,7 +52,7 @@ interface CouponGroupListProps {
 }
 
 const CouponsListLayout: React.FC<CouponsListLayoutProps> = (props: any) => {
-  const { remind, value, title, visible, onClose, onConfirm } = props;
+  const { remind, value, title, visible, onClose, onConfirm, isPreview } = props;
   const [form] = Form.useForm();
   const [couponSource, setCouponSource] = useState<CouponGroupListProps[]>([]);
   const [tableModalVisible, setTableModalVisible] = useState<boolean>(false);
@@ -111,17 +113,17 @@ const CouponsListLayout: React.FC<CouponsListLayoutProps> = (props: any) => {
 
   /** 删除一个 */
   const handleDeletion = (index: number) => {
-   const fields = [...couponSource];
-   fields.splice(index, 1);
-   fields.forEach((item, _index) => {
-     item.list.forEach((_item, __index) => {
-       form.setFieldsValue({
-         [`limitValue_${_index}`]: item.limitValue,
-         [`num_${_index}_${__index}`]: _item.num,
-       })
-     })
-   })
-   setCouponSource(fields);
+    const fields = [...couponSource];
+    fields.splice(index, 1);
+    fields.forEach((item, _index) => {
+      item.list.forEach((_item, __index) => {
+        form.setFieldsValue({
+          [`limitValue_${_index}`]: item.limitValue,
+          [`num_${_index}_${__index}`]: _item.num,
+        })
+      })
+    })
+    setCouponSource(fields);
   }
 
   /** 选择搭配优惠券 */
@@ -187,15 +189,16 @@ const CouponsListLayout: React.FC<CouponsListLayoutProps> = (props: any) => {
       destroyOnClose
       onClose={onClose}
       footer={
-        <div style={{ textAlign: 'right' }}>
-          <Button onClick={onClose} style={{ marginRight: 8 }}>
-            取消
-          </Button>
-          <Button type="primary" onClick={handleClick}>
-            提交
-          </Button>
-        </div>
-      }
+        !isPreview && (
+          <div style={{ textAlign: 'right' }}>
+            <Button onClick={onClose} style={{ marginRight: 8 }}>
+              取消
+            </Button>
+            <Button type="primary" onClick={handleClick}>
+              提交
+            </Button>
+          </div>
+        )}
     >
       {/* 分组列表 */}
       <Form {...layout} form={form}>
@@ -209,6 +212,7 @@ const CouponsListLayout: React.FC<CouponsListLayoutProps> = (props: any) => {
             <CollapseLayout
               index={index}
               remind={remind}
+              isPreview
               deletion={handleDeletion}
             >
               {!isEmpty(item.list) && (
@@ -216,21 +220,25 @@ const CouponsListLayout: React.FC<CouponsListLayoutProps> = (props: any) => {
                   form={form}
                   index={index}
                   remind={remind}
+                  isPreview={isPreview}
                   list={item.list as any}
                   onDeletion={(_index: number) => handleDeletionColloCation(index, _index)}
                   onEntry={(name: string, num: number, _index?: number) => handleEntryNumber(index, name, num, _index)}
                 />
               )}
               {/* 选择搭配商品 */}
-              <Button type="dashed" block icon={<PlusOutlined />} onClick={() => handleCollocation(index)}>
-                {remind.buttonTitle}
-              </Button>
+              {!isPreview && (
+                <Button type="dashed" block icon={<PlusOutlined />} onClick={() => handleCollocation(index)}>
+                  {remind.buttonTitle}
+                </Button>
+              )}
             </CollapseLayout>
           </Form.Item>
         ))}
       </Form>
       {/* 添加分组 */}
-      <Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>
+      {!isPreview && <Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>}
+
       {/* 弹框: 优惠券 */}
       <CouponsLayout
         fieldApi={PublicApi.getMarketingMerchantActivityDetailGoodsCouponSelect}

src/pages/transaction/marketingAbility/components/listModalLayout/components/collapseLayout/index.tsx

-import React, { useEffect, useState } from 'react';
-import { CaretRightOutlined, DeleteOutlined } from '@ant-design/icons';
-import cx from 'classnames';
-import style from '../../index.less';
-
-type RemindLayoutProps = {
-  /** 弹窗标题 */
-  modalTitle?: string,
-  /** 选择商品按钮名称 */
-  buttonTitle?: string,
-  /** 列表标题 */
-  listTitle?: string
-  /** 列表label */
-  label?: {[key: number]: string},
-  /** 提醒 */
-  message?: {[key: number]: string},
-}
-interface CollapseLayoutProps {
-  /** message */
-  remind?: RemindLayoutProps,
-  /** 组编号优惠阶梯换购阶梯 */
-  index: number,
-  /** 删除一个 */
-  deletion: (e: number) => void,
-}
-
-const CollapseLayout: React.FC<CollapseLayoutProps> = (props: any) => {
-  const { remind, children, index, deletion } = props;
-  const [isActive, setIsActive] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (index === 0) {
-      setIsActive(true)
-    }
-  }, [index])
-  return (
-    <div className={cx(style.collapse, isActive && style.marginBottom)}>
-      <div className={style.collapse_index}>{index + 1}</div>
-      <div className={style.collapse_item}>
-        {/* 头部 */}
-        <div className={style.collapse_header} onClick={() => setIsActive(!isActive)}>
-          <CaretRightOutlined rotate={isActive ? 90 : 0} />
-          <span className={style.collapse_arrow}>{remind.listTitle}</span>
-          <DeleteOutlined onClick={() => deletion(index)} />
-        </div>
-        {/* 内容 */}
-        {isActive && (<>{children}</>)}
-      </div>
-    </div>
-  )
-}
-export default CollapseLayout

src/pages/transaction/marketingAbility/components/listModalLayout/components/productLayout/index.tsx

@@ -59,10 +59,12 @@ export interface ProductLayoutProps {
   onDeletion: (_index: number) => void,
   /** 输入数量或者套餐价格 */
   onEntry: (name: string, num: number, _index?: number) => void,
+  /** 查看 */
+  isPreview?: boolean,
 }
 
 const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
-  const { form, remind, index, list, onDeletion, onEntry } = props;
+  const { form, remind, index, list, onDeletion, onEntry, isPreview } = props;
 
   const handleChange = (e, name, _index?) => {
     onEntry(name, Number(e.target.value), _index)
@@ -87,7 +89,7 @@ const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
           }
         }]}
       >
-        <Input addonBefore={remind.type === 'limitValue' && '买'} addonAfter={remind.label[2]} onBlur={(e) => handleChange(e, `${remind.type}`)} />
+        <Input disabled={isPreview} addonBefore={remind.type === 'limitValue' && '买'} addonAfter={remind.label[2]} onBlur={(e) => handleChange(e, `${remind.type}`)} />
       </Form.Item>
       {/* 搭配商品 */}
       {list.map((_item: ListProps, _index: number) => (
@@ -96,7 +98,8 @@ const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
             <span className={style.productLayout_arrow}>
               {remind.label[3]}{_index + 1}
             </span>
-            <DeleteOutlined onClick={() => onDeletion(_index)} />
+            {!isPreview && <DeleteOutlined onClick={() => onDeletion(_index)} />}
+
           </div>
           <div className={style.productLayout_contenxt}>
             {remind.name === 'swapValue' && (
@@ -116,7 +119,7 @@ const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
                   }
                 }]}
               >
-                <Input addonAfter='￥' onBlur={(e) => handleChange(e, 'swapPrice', _index)} />
+                <Input disabled={isPreview} addonAfter='￥' onBlur={(e) => handleChange(e, 'swapPrice', _index)} />
               </Form.Item>
             )}
             <Form.Item
@@ -158,7 +161,7 @@ const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
                 }
               }]}
             >
-              <Input addonAfter={_item.unit} onBlur={(e) => handleChange(e, 'num', _index)} />
+              <Input disabled={isPreview} addonAfter={_item.unit} onBlur={(e) => handleChange(e, 'num', _index)} />
             </Form.Item>
           </div>
         </div>

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

 import React, { useEffect, useState } from 'react';
 import { Drawer, Button, Form, message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import CollapseLayout from './components/collapseLayout';
+import CollapseLayout from '../collapseLayout';
 import { isArray, isEmpty } from 'lodash';
 import ProductLayout from './components/productLayout';
 import CollocationLayout from '../collocationLayout';
-import CouponsLayout from '@/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout';
 
 const layout: any = {
   labelCol: { style: { width: "100px" } },
@@ -41,6 +40,8 @@ interface ListModalLayoutProps {
   onClose?: () => void,
   /** 确定 */
   onConfirm?: (fields: any[]) => void,
+  /** 查看 */
+  isPreview?: boolean,
 }
 
 type ListProps = {
@@ -80,7 +81,7 @@ interface GoodsSubsidiaryListProps {
 }
 
 const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
-  const { idNotInList, remind, value, shopIdList, title, visible, onClose, onConfirm } = props;
+  const { idNotInList, remind, value, shopIdList, title, visible, onClose, onConfirm, isPreview } = props;
   const [form] = Form.useForm();
   const [dataSource, setDataSource] = useState<GoodsSubsidiaryListProps[]>([]);
   const [tableModalVisible, setTableModalVisible] = useState<boolean>(false);
@@ -250,7 +251,7 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
       visible={visible}
       destroyOnClose
       onClose={onClose}
-      footer={renderFooter()}
+      footer={!isPreview && renderFooter()}
     >
       {/* 分组列表 */}
       <Form {...layout} form={form}>
@@ -265,6 +266,7 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
               index={index}
               remind={remind}
               deletion={handleDeletion}
+              isPreview={isPreview}
             >
               {!isEmpty(item.list) && (
                 <ProductLayout
@@ -272,17 +274,18 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
                   index={index}
                   remind={remind}
                   list={item.list}
+                  isPreview={isPreview}
                   onDeletion={(_index: number) => handleDeletionColloCation(index, _index)}
                   onEntry={(name: string, num: number, _index?: number) => handleEntryNumber(index, name, num, _index)}
                 />
               )}
               {/* 选择搭配商品 */}
-              {remind.name !== 'swapValue' && (
+              {(remind.name !== 'swapValue' && !isPreview) && (
                 <Button type="dashed" block icon={<PlusOutlined />} onClick={() => handleCollocation(index)}>
                   {remind.buttonTitle}
                 </Button>
               )}
-              {(remind.name === 'swapValue' && item.list.length === 0) && (
+              {(remind.name === 'swapValue' && item.list.length === 0 && !isPreview) && (
                 <Button type="dashed" block icon={<PlusOutlined />} onClick={() => handleCollocation(index)}>
                   {remind.buttonTitle}
                 </Button>
@@ -292,7 +295,7 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
         ))}
       </Form>
       {/* 添加分组 */}
-      <Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>
+      {!isPreview && <Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>}
       {/* 弹框: -> 商品 */}
       <CollocationLayout
         moda={remind.name === 'swapValue' ? 'radio' : 'checkbox'}

src/pages/transaction/marketingAbility/selfManagement/detail/index.tsx

@@ -13,11 +13,14 @@ import { ACTIVITYTYPENAME, GeneralEffect } from './constants';
 import ActivityUserLayout from '../../components/activityUserLayout';
 import DemandLayout from '../../components/demandLayout';
 import ListLayout from '@/pages/transaction/components/detailLayout/components/listLayout';
-import { Columns } from './columns';
+import { Columns } from '../../common/columns';
 import { PublicApi } from '@/services/api';
 import { isEmpty } from 'lodash';
 import { CheckCircleOutlined } from '@ant-design/icons';
 import ModalOperate from '@/pages/transaction/components/modalOperate';
+import ListModalLayout from '../../components/listModalLayout';
+import CouponsListLayout from '../../components/couponsListLayout';
+import { remindLayout, RemindLayoutProps } from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/remind';
 
 const TABLINK = [
   { id: 'progressLayout', title: '流转进度' },
@@ -40,7 +43,11 @@ const DetialLayout = () => {
   const [dataSource, setDataSource] = useState<any>({});
   const [basicEffect, setBasicEffect] = useState<any>([]);
   const [generalEffect, setGeneralEffect] = useState<any>([]);
-  const [allUsers, setAllusers] = useState<any[]>([])
+  const [allUsers, setAllusers] = useState<any[]>([]);
+  const [value, setValue] = useState<number>(1);
+  const [remind, setRemind] = useState<RemindLayoutProps>({});
+  const [collocation, setCollocation] = useState<any[]>([]);
+  const [listModalVisible, setListModalVisible] = useState<boolean>(false);
 
   const handleBasicEffect = (data: any) => {
     setBasicEffect([
@@ -102,7 +109,7 @@ const DetialLayout = () => {
           roleName: item.roleName,
         })
       })
-      data.outerRecordDOList.forEach((item: any) => {
+      data.outerRecordDOList.forEach((item: any, index: number) => {
         externalLogs.push({
           auditOpinion: item.opinion,
           createMemberId: item.memberId,
@@ -110,18 +117,18 @@ const DetialLayout = () => {
           createTime: item.operateTime,
           department: item.department,
           stateName: item.statusName,
-          id: item.id,
+          id: index + 1,
           memberId: null,
           memberRoleId: null,
           operation: item.operate,
           position: item.jobTitle,
           purchaseInquiryId: null,
           roleName: item.operator,
-          state: item.step + 1,
+          state: item.step,
           step: item.step,
         })
       })
-      data.innerRecordDOList.forEach((item: any) => {
+      data.innerRecordDOList.forEach((item: any, index: number) => {
         interiorLogs.push({
           auditOpinion: item.opinion,
           createMemberId: item.memberId,
@@ -129,14 +136,14 @@ const DetialLayout = () => {
           createTime: item.operateTime,
           department: item.department,
           stateName: item.statusName,
-          id: item.id,
+          id: index + 1,
           memberId: null,
           memberRoleId: null,
           operation: item.operate,
           position: item.jobTitle,
           purchaseInquiryId: null,
           roleName: item.operator,
-          state: item.step + 1,
+          state: item.step,
           step: item.step,
         })
       })
@@ -150,31 +157,46 @@ const DetialLayout = () => {
           value: [{
             key: data.newUser,
             name: '新用户(不包含会员)'
-          },{
+          }, {
             key: data.oldUser,
             name: '老用户(不包含会员)'
-          },{
+          }, {
             key: data.newMember,
             name: '新会员(仅会员用户)'
-          },{
+          }, {
             key: data.oldMember,
             name: '老会员(仅会员用户)'
           }]
         }
       ])
+      if (data.activityType === 6) {
+        setRemind(remindLayout(data.activityType, data.activityDefinedBO.giveType, data.activityDefinedBO.giftType));
+      }
+      if (data.activityType === 13) {
+        setRemind(remindLayout(data.activityType, data.activityDefinedBO.swapType));
+      }
+      if (data.activityType === 15) {
+        setRemind(remindLayout(data.activityType));
+      }
       setDataSource(data);
       handleBasicEffect(data)
+      setValue(data.activityType)
       handleGeneralEffect(data.activityDefinedBO, data.activityType)
-    }).catch(() => {})
+    }).catch(() => { })
   }, [])
 
   useEffect(() => {
     fetchDataSource();
   }, [])
 
+  const handlCollocation = (val) => {
+    setCollocation(val.goodsSubsidiaryGroupList);
+    setListModalVisible(true)
+  }
+
   const columns = useMemo(() => {
-    return Columns(dataSource.activityType || 1)
-  }, [dataSource.activityType])
+    return Columns[value]?.({ value, handlCollocation })
+  }, [value])
 
   const fetchLink = () => {
     let fetchSoure: any = null;
@@ -242,6 +264,28 @@ const DetialLayout = () => {
         onCancel={() => setVisible(false)}
         onOk={() => history.goBack()}
       />
+      {/* 查看搭配商品 */}
+      {(!isEmpty(remind) && remind.value === 1) && (
+        <ListModalLayout
+          title={remind.modalTitle}
+          remind={remind}
+          visible={listModalVisible}
+          value={collocation}
+          isPreview
+          onClose={() => setListModalVisible(false)}
+        />
+      )}
+      {/* 查看优惠券 */}
+      {(!isEmpty(remind) && remind.value !== 1) && (
+        <CouponsListLayout
+          title={remind.modalTitle}
+          remind={remind}
+          visible={listModalVisible}
+          value={collocation}
+          isPreview
+          onClose={() => setListModalVisible(false)}
+        />
+      )}
     </Context.Provider>
   )
 }