✨ feat(商家营销活动管理): 接口接入

config/routes/index.ts

@@ -83,10 +83,10 @@ const memberCenterRoute = {
     // MemberRoute,
     // HandlingRoute,
     // PayandSettleRoute,
-    // marketingRoute,
+    marketingRoute,
     // DealAbilityRoute,
     // ...asyncRoutes,
-    ...routes,
+    // ...routes,
     {
       path: '/memberCenter/noAuth',
       auth: false,

src/pages/payandSettle/paySetting/index.tsx

@@ -114,6 +114,10 @@ const PaySettingLayout = () => {
         return
       }
       const { data } = res
+      if (data === null) {
+        setEmpty(true)
+        return
+      }
       setTabLink(data.map(item => {
         return {
           id: `tabLink_${item.payType}`,

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

@@ -84,7 +84,7 @@ const AddFormGoods: React.FC<AddFormGoodsProps> = (props: any) => {
         autoComplete='off'
       >
         <Space direction='vertical' style={{ display: 'flex' }}>
-          {ruleType != 10 && <Button type="dashed" block icon={<PlusOutlined />} onClick={() => { setGiveCouponVisible(true) }}>选择活动商品</Button>}
+          {ruleType != 10 && <Button type="dashed" block icon={<PlusOutlined />} onClick={() => { setCouponVisible(true) }}>选择活动商品</Button>}
           <Table
             columns={columns}
             dataSource={dataSource}

src/pages/transaction/marketingAbility/selfManagement/detail/constants.ts

-/**
- * 活动类型
- */
-export enum ACTIVITYTYPE {
-  /** 特价促销 */
-  SALE = 1,
-  /** 直降促销 */
-  DOWNSALE,
-  /** 折扣促销 */
-  DISCOUNT,
-  /** 满量促销 */
-  FULLCAPACITY,
-  /** 满额促销 */
-  FULFILTHEQUOTA,
-  /** 赠送促销 */
-  PRESENTED,
-  /** 多件促销 */
-  EXCESSIVEPARTS,
-  /** 组合促销 */
-  GROUPS,
-  /** 拼团 */
-  TOURDIY,
-  /** 抽奖 */
-  LOTTERY,
-  /** 砍价 */
-  BARGAIN,
-  /** 秒杀 */
-  SECKILL,
-  /** 换购 */
-  GIFT,
-  /** 预售 */
-  PRESELL,
-  /** 套餐 */
-  SETMEAL,
-  /** 试用 */
-  TRYOUT,
-}
-
-/**
- * 活动类型文字
- */
- export const ACTIVITYTYPENAME = {
-  1: "特价促销",
-  2: "直降促销",
-  3: "折扣促销",
-  4: "满量促销",
-  5: "满额促销",
-  6: "赠送促销",
-  7: "多件促销",
-  8: "组合促销",
-  9: "拼团",
-  10: "抽奖",
-  11: "砍价",
-  12: "秒杀",
-  13: "换购",
-  14: "预售",
-  15: "套餐",
-  16: "试用",
-}

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

-import React, { Fragment, useState } from 'react';
-import { Space, Tooltip } from 'antd';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import { Button } from 'antd';
+import { history } from 'umi';
 import { Context } from '@/pages/transaction/components/detailLayout/components/context';
 import PeripheralLayout from '@/pages/transaction/components/detailLayout';
 import { _data } from './data';
@@ -9,13 +10,15 @@ import RecordLyout from '@/pages/transaction/components/detailLayout/components/
 import BasicLayout from '@/pages/transaction/components/detailLayout/components/basicLayout';
 import moment from 'moment';
 import { useEffect } from 'react';
-import { ACTIVITYTYPE, ACTIVITYTYPENAME } from './constants';
-import StatusTag from '@/components/StatusTag';
+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 { ColumnType } from 'antd/lib/table/interface';
-import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Columns } from './columns';
+import { PublicApi } from '@/services/api';
+import { isEmpty } from 'lodash';
+import { CheckCircleOutlined } from '@ant-design/icons';
+import ModalOperate from '@/pages/transaction/components/modalOperate';
 
 const TABLINK = [
   { id: 'progressLayout', title: '流转进度' },
@@ -28,10 +31,14 @@ const TABLINK = [
 ]
 
 const DetialLayout = () => {
+  const { query: { activityId, signUpId }, pathname } = history.location;
+  const [path] = useState(pathname.split('/')[pathname.split('/').length - 1]);
+  const [pathPci] = useState(pathname.split('/')[pathname.split('/').length - 2]);
+  const [visible, setVisible] = useState<boolean>(false)
   const format = (text, fmt?: string) => {
     return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
   }
-  const [dataSource] = useState<any>(_data);
+  const [dataSource, setDataSource] = useState<any>({});
   const [basicEffect, setBasicEffect] = useState<any>([]);
   const [generalEffect, setGeneralEffect] = useState<any>([]);
 
@@ -40,138 +47,99 @@ const DetialLayout = () => {
     setBasicEffect([
       {
         col: [
-          { label: '活动ID', extra: data.activityId },
+          { label: '活动ID', extra: data.id },
           { label: '活动名称', extra: data.activityName },
-          { label: '外部状态', extra: data.externalStateName },
-          { label: '内部状态', extra: data.interiorStateName },
+          { label: '外部状态', extra: data.outerStatusName },
+          { label: '内部状态', extra: data.innerStatusName },
         ]
       },
       {
         col: [
-          { label: '活动类型', extra: ACTIVITYTYPENAME[data.activityType] },
-          { label: '下单模式', extra: data.orderModal },
-          { label: '活动开始时间', extra: format(data.activityStartTime) },
-          { label: '活动结束时间', extra: format(data.activityEndTime) },
+          { label: '活动类型', extra: data.activityTypeName },
+          { label: '活动参与类型', extra: data.activitySignUpTypeName },
+          { label: '活动开始时间', extra: format(data.startTime) },
+          { label: '活动结束时间', extra: format(data.endTime) },
         ]
       },
       {
         col: [
-          { label: '会员名称', extra: data.membersName },
-          { label: '创建时间', extra: format(data.creationTime) },
+          { label: '要求报名时间', extra: <>{format(data.signUpStartTime)}~{format(data.signUpEndTime)}</> },
         ]
       },
     ])
   }
 
-  const handleGeneralEffect = (data: any) => {
-    setGeneralEffect([
-      {
-        col: [
-          { label: '满量促销类型', extra: '' },
-          { label: '满量减', extra: '' },
-          { label: '赠送促销类型', extra: '' },
-          { label: '优惠规则', extra: '' },
-          { label: '换购类型', extra: '' },
-          { label: '叠加活动类型', extra: <Space><StatusTag type="default" title='满量促销' /><StatusTag type="default" title='满额促销' /></Space> },
-          { label: '成团人数', extra: '' },
-          { label: '抽奖类型', extra: '' },
-          { label: '抽奖次数', extra: '' },
-          { label: '每次砍价金额', extra: '' },
-          { label: '用户限制次数', extra: '' },
-          { label: '每日秒杀时间段', extra: '' },
-          { label: '定金支付时间', extra: '' },
-          { label: '抽取用户时间', extra: '' },
-          { label: '活动描述', extra: '活动期内仅允许用户以活动价格购买一件，超过一件用户须以原价购买' },
-        ],
-      },
-      {
-        col: [
-          { label: '赠品类型', extra: '' },
-          { label: '叠加优惠券', extra: '允许叠加' },
-          { label: '成团时间', extra: '' },
-          { label: '每次砍价金额', extra: '' },
-          { label: '尾款支付时间', extra: '' },
-          { label: '试用结束时间', extra: '' },
-        ],
-      },
-      {
-        col: [
-          { label: '满量促销类型', extra: '' },
-          { label: '满量折', extra: '' },
-          { label: '超限规则', extra: '原价购买' },
-          { label: '用户参团限制', extra: '' },
-          { label: '开始发货时间', extra: '' },
-        ],
-      },
-    ])
+  const handleGeneralEffect = (data: any, int?: number) => {
+    if (!isEmpty(data)) {
+      setGeneralEffect(GeneralEffect(int, data))
+    }
   }
 
-  const columns: ColumnType<any>[] = [
-    {
-      title: '商品图片',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '商品ID',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '商品名称',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '品类',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '品牌',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '单位',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '商品价格',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: <Tooltip placement="top" title="活动价格表示商城直接以该商品的活动价格进行销售">
-        活动价格 <QuestionCircleOutlined />
-      </Tooltip>,
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '个人限购数量',
-      key: '',
-      dataIndex: '',
-    },
-    {
-      title: '活动限购总数量',
-      key: '',
-      dataIndex: '',
-    },
-  ]
+  const fetchDataSource = useCallback(async () => {
+    await PublicApi.getMarketingMerchantActivityDetail({ activityId }).then((res: any) => {
+      if (res.code !== 1000) {
+        return
+      }
+      let { data } = res;
+      let externalLogStates: any = []
+      data.outerTaskStepList.forEach((item: any) => {
+        externalLogStates.push({
+          state: item.step,
+          stateName: null,
+          isExecute: item.isExecute,
+          operationalProcess: item.taskName,
+          roleName: item.roleName,
+        })
+      })
+      data.externalLogStates = externalLogStates;
+      setDataSource(data);
+      handleBasicEffect(data)
+      handleGeneralEffect(data.activityDefinedBO, data.activityType)
+    }).catch(() => { })
+  }, [])
 
   useEffect(() => {
-    handleBasicEffect(_data);
-    handleGeneralEffect(_data);
+    fetchDataSource();
+    // handleGeneralEffect(_data);
   }, [])
 
+  const columns = useMemo(() => {
+    return Columns(dataSource.activityType || 1)
+  }, [dataSource.activityType])
+
+  const fetchLink = () => {
+    let fetchSoure: any = null;
+    switch (pathPci) {
+      case 'readyExamineOne':
+        fetchSoure = PublicApi.postMarketingPlatformActivitySignupExamineStep1
+        break;
+      case 'readyExamineTwo':
+        fetchSoure = PublicApi.postMarketingPlatformActivitySignupExamineStep2
+        break;
+    }
+    return fetchSoure
+  }
+
   return (
     <Context.Provider value={dataSource}>
       <PeripheralLayout
         no={dataSource.activityId}
         detail={dataSource.activityName}
         tabLink={TABLINK}
+        effect={
+          <>
+            {path === 'detail'
+              && (
+                <Button
+                  type='primary'
+                  onClick={() => setVisible(true)}
+                >
+                  <CheckCircleOutlined />
+                  单据审核
+                </Button>
+              )}
+          </>
+        }
         components={
           <Fragment>
             <ProgressLayout />
@@ -184,16 +152,27 @@ const DetialLayout = () => {
             />
             <ListLayout
               anchor="activityProductLayout"
-              id={1}
+              ids={signUpId !== 'null' && { signUpId }}
               title="活动商品"
+              fetch={PublicApi.getMarketingMerchantActivityDetailGoodPage}
               columns={columns}
             />
-            <ActivityUserLayout />
-            <DemandLayout />
+            <ActivityUserLayout dataScoure={dataSource} />
+            <DemandLayout storeList={dataSource.shopList} />
             <RecordLyout />
           </Fragment>
         }
       />
+      {/* 审核 */}
+      <ModalOperate
+        id={signUpId}
+        title="单据审核"
+        modalType="merkeingAudit"
+        visible={visible}
+        fetch={fetchLink()}
+        onCancel={() => setVisible(false)}
+        onOk={() => history.goBack()}
+      />
     </Context.Provider>
   )
 }

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

-import React from 'react';
-import TableLayout from '../../../components/tableLayout';
-import { FORM_FILTER_PATH } from '@/formSchema/const';
-import { ColumnType } from 'antd/lib/table/interface';
+import React, { useRef } from 'react';
+import TableLayout from '@/pages/transaction/components/tableLayout'
+import { ColumnType } from 'antd/lib/table';
+import EyePreview from '@/components/EyePreview';
+import { format } from '@/pages/transaction/common/dateFormat';
 import StatusTag from '@/components/StatusTag';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { PublicApi } from '@/services/api';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
+import { FormEffectHooks } from '@formily/react';
+const { onFormMount$ } = FormEffectHooks;
 
 const Search = () => {
-  const columns: ColumnType<any>[] = [{
-    title: 'ID',
-    dataIndex: 'id',
-    align: 'left',
-  },
-  {
-    title: '活动名称',
-    dataIndex: 'activityName',
-    align: 'left',
-    render: (text) =>
-      <span style={{ color: '#00B37A' }}>{text}</span>
-  },
-  {
-    title: '活动类型',
-    dataIndex: 'activityType',
-    align: 'left',
-  },
-  {
-    title: '活动开始时间',
-    dataIndex: 'startTime',
-    align: 'left',
-  },
-  {
-    title: '中标通知时间',
-    dataIndex: 'endTime',
-    align: 'left',
-  },
-  {
-    title: '外部状态',
-    dataIndex: 'outerStatus',
-    align: 'left',
-    render: (text) => (
-      <StatusTag type="danger" title={text} />
-    )
-  },
-  {
-    title: '内部状态',
-    dataIndex: 'innerStatus',
-    align: 'left',
-  }, {
-    title: '操作',
-    dataIndex: 'state',
-    align: 'left',
-    render: (_, record) => {
-      return (
-        <div>
-          <span style={{ color: '#00B37A', cursor: 'pointer', marginRight: 10 }}>重启</span>
-          <span style={{ color: '#00B37A', cursor: 'pointer', marginRight: 10 }}>修改</span>
-        </div>
-      )
-    }
-  }]
-  const mokiData = [
+  const ref = useRef<any>({});
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '活动ID',
+      key: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '活动名称',
+      key: 'activityName',
+      dataIndex: 'activityName',
+      render: (text, record) => <EyePreview url={`/memberCenter/marketingAbility/selfManagement/search/preview?id=${record.id}`}>{text}</EyePreview>
+    },
+    {
+      title: '活动类型',
+      key: 'activityType',
+      dataIndex: 'activityType',
+      render: (_text, record) => <>{record.activityTypeName}</>,
+    },
+    {
+      title: '活动开始时间',
+      key: 'startTime',
+      dataIndex: 'startTime',
+      render: (text) => format(text)
+    },
+    {
+      title: '活动结束时间',
+      key: 'endTime',
+      dataIndex: 'endTime',
+      render: (text) => format(text)
+    },
     {
-      id: '1',
-      activityName: 'tony',
-      activityType: '秒杀',
-      startTime: '2020-05-12 08:08',
-      endTime: '还剩 59 秒',
-      outerStatus: "待提交报平台审核",
-      innerStatus: '待提交审核',
+      title: '外部状态',
+      key: 'outerStatus',
+      dataIndex: 'outerStatus',
+      render: (_text, record) => (
+        <StatusTag type="danger" title={record.outerStatusName} />
+      )
     },
     {
-      id: '2',
-      activityName: 'tony',
-      activityType: '秒杀',
-      startTime: '2020-05-12 08:08',
-      endTime: '还剩 59 秒',
-      outerStatus: "待提交报平台审核",
-      innerStatus: '待提交审核',
+      title: '内部状态',
+      key: 'innerStatus',
+      dataIndex: 'innerStatus',
+      render: (_text, record) => (
+        <StatusTag type="danger" title={record.innerStatusName} />
+      )
     },
     {
-      id: '3',
-      activityName: 'tony',
-      activityType: '秒杀',
-      startTime: '2020-05-12 08:08',
-      endTime: '还剩 59 秒',
-      outerStatus: "待提交报平台审核",
-      innerStatus: '待提交审核',
+      title: '操作',
+      key: 'state',
+      dataIndex: 'state',
     }
   ]
+
+  const useStateEffects = () => {
+    const linkage = useLinkageUtils();
+    onFormMount$().subscribe(() => {
+      /** 活动类型 */
+      PublicApi.getMarketingMerchantActivityGetActivityTypeList().then(res => {
+        const _enum = res.data.map((item) => { return { label: item.name, value: item.status } });
+        linkage.enum('activityType', _enum);
+      }).catch(err => {
+        console.warn(err)
+      })
+      /** 外部状态 */
+      PublicApi.getMarketingMerchantActivityGetOuterStatusList().then(res => {
+        const _enum = res.data.map((item) => { return { label: item.name, value: item.status } });
+        linkage.enum('outerStatus', _enum);
+      }).catch(err => {
+        console.warn(err)
+      })
+      /** 内部状态 */
+      PublicApi.getMarketingMerchantActivityGetInnerStatusList().then(res => {
+        const _enum = res.data.map((item) => { return { label: item.name, value: item.status } })
+        linkage.enum('innerStatus', _enum);
+      }).catch(err => {
+        console.warn(err)
+      })
+    })
+  }
+
   return (
     <TableLayout
+      reload={ref}
       columns={columns}
       effects="id"
-      fetch={mokiData}
+      fetch={PublicApi.getMarketingMerchantActivityPage}
+      useStateEffects={useStateEffects}
       schema={{
-        type: 'object',
+        type: "object",
         properties: {
           megalayout: {
-            type: 'object',
-            "x-component": 'mega-layout',
+            type: "object",
+            "x-component": "mega-layout",
             properties: {
               id: {
                 type: 'string',
-                "x-component": "Search",
-                "x-mega-props": {
+                'x-component': 'Search',
+                'x-component-props': {
+                  placeholder: '活动ID',
+                  align: "flex-left",
                 },
-                "x-component-props": {
-                  placeholder: '请输入活动ID',
-                  align: 'flex-left',
-                }
-              }
+              },
             }
           },
           [FORM_FILTER_PATH]: {
-            type: 'object',
+            type: "object",
             "x-component": "flex-layout",
             "x-component-props": {
               rowStyle: {
-                justifyContent: 'flex-start',
-                flexWrap: 'nowrap'
+                justifyContent: "flex-start",
+                flexWrap: "nowrap"
               },
               colStyle: {//改变间隔
                 marginRight: 20
@@ -124,8 +131,8 @@ const Search = () => {
             },
             properties: {
               PRO_LAYOUT: {
-                type: 'object',
-                "x-component": 'mega-layout',
+                type: "object",
+                "x-component": "mega-layout",
                 "x-mega-props": {
                   span: 5
                 },
@@ -133,34 +140,64 @@ const Search = () => {
                   inline: true
                 },
                 properties: {
-                  details: {
+                  activityName: {
+                    type: 'string',
+                    'x-component-props': {
+                      placeholder: '活动名称',
+                      style: {
+                        width: 160,
+                      },
+                    },
+                  },
+                  '[startTime,endTime]': {
+                    type: 'string',
+                    "x-component": "DateRangePickerUnix",
+                    'x-component-props': {
+                      placeholder: ['开始时间', '结束时间'],
+                      style: {
+                        width: 240,
+                      },
+                    },
+                  },
+                  activityType: {
                     type: 'string',
-                    "x-component-props": {
-                      placeholder: '需求摘要',
-                    }
+                    'x-component-props': {
+                      placeholder: '活动类型',
+                      style: {
+                        width: 160,
+                      },
+                    },
+                    enum: [],
                   },
-                  memberName: {
+                  outerStatus: {
                     type: 'string',
-                    "x-component-props": {
-                      placeholder: '需求会员',
-                    }
+                    'x-component-props': {
+                      placeholder: '外部状态',
+                      style: {
+                        width: 160,
+                      },
+                    },
+                    enum: [],
                   },
-                  "[startTime,endTime]": {
+                  innerStatus: {
                     type: 'string',
-                    "x-component": "dateSelect",
-                    "x-component-props": {
-                      placeholder: '单据时间（全部）',
-                    }
+                    'x-component-props': {
+                      placeholder: '内部状态',
+                      style: {
+                        width: 160,
+                      },
+                    },
+                    enum: [],
                   },
                 }
               },
               sumbit: {
-                "x-component": 'Submit',
+                "x-component": "Submit",
                 "x-mega-props": {
                   span: 1
                 },
                 "x-component-props": {
-                  children: '查询'
+                  children: "查询"
                 }
               }
             }
@@ -168,6 +205,6 @@ const Search = () => {
         }
       }}
     />
-  );
+  )
 }
 export default Search;

src/pages/transaction/marketingAbility/selfManagementMonitor/components/activityTypeLayout/index.less

+.list_box {
+  overflow: hidden;
+  margin: 16px 0px;
+  border-radius: 8px;
+  background-color: @white;
+
+  .list_items {
+    display: flex;
+    align-items: center;
+
+    .list_item_row {
+      width: 320px;
+      padding: 16px;
+      cursor: pointer;
+
+      .list_item_tag {
+        border-radius: 2px;
+        padding: 2px 4px;
+        color: #EF3346;
+        background-color: #FFF0F2;
+      }
+
+      .list_item_title {
+        font-size: 14px;
+        margin: 4px 0px;
+      }
+
+      .list_item_date {
+        font-size: 12px;
+        margin: 4px 0px;
+        color: #91959B;
+      }
+
+      :global {
+        .ant-progress-outer {
+          padding-right: 0;
+          .ant-progress-bg {
+            height: 16px !important;
+          }
+        }
+        .ant-progress-text {
+          position: absolute;
+          left: 0;
+          bottom: 2px;
+          color: @white;
+        }
+      }
+    }
+  }
+}

src/pages/transaction/marketingAbility/selfManagementMonitor/components/activityTypeLayout/index.tsx

+import React, { useState } from 'react';
+import { Progress } from 'antd';
+import style from './index.less';
+
+const ActivityTypeLayout = () => {
+  const [dataSource, setDataSource] = useState([1, 2])
+  return (
+    <div className={style.list_box}>
+      <div className={style.list_items} style={{ width: dataSource.length * 320 + 'px' }}>
+        {dataSource.map(item => (
+          <div className={style.list_item_row} key={item}>
+            <span className={style.list_item_tag}>特价促销</span>
+            <h5 className={style.list_item_title}>2020年9月特价促销活动</h5>
+            <div className={style.list_item_date}>2020-09-01 10:00:00 ~ 2020-10-01 10:00:00</div>
+            <Progress percent={80} format={(percent) => percent + '%'} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+export default ActivityTypeLayout;

src/pages/transaction/marketingAbility/selfManagementMonitor/index.tsx

@@ -3,13 +3,16 @@ import { Row, Col, Card } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ActivityLayout from './components/activityLayout';
 import ProductListLayout from './components/productListLayout';
+import ActivityTypeLayout from './components/activityTypeLayout';
 
 const SelfManagementMonitor = () => {
   return (
     <PageHeaderWrapper>
       <ActivityLayout />
       <Row gutter={[16, 16]}>
-        <Col xl={{ span: 18 }} span={14}>1</Col>
+        <Col xl={{ span: 18 }} span={14}>
+          <ActivityTypeLayout />
+        </Col>
         <Col xl={{ span: 6 }} span={10}>
           <ProductListLayout />
           <ProductListLayout />