✨ feat(商家营销活动): 抽奖

src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/add.tsx

@@ -9,6 +9,7 @@ import RulesLayout from './components/rulesLayout';
 import ShopLayout from './components/shopLayout';
 import ProductListLayout from '../../components/productListLayout';
 import PartakeUserLayout from './components/partakeUserLayout';
+import PrizeListLayout from './components/prizeListLayout';
 import moment from 'moment';
 import { PublicApi } from '@/services/api';
 
@@ -49,6 +50,7 @@ const AddedMarketing = () => {
   const [memberLevelList, setMemberLevelList] = useState<any[]>([]);
   const [memberType, setMemberType] = useState<any[]>([]);
   const [activityId, setActivityId] = useState<number>();
+  const [value, setValue] = useState<number>();
 
   const handleGetShopList = (mall) => {
     const checkedList = mall.filter(item => item.checked);
@@ -194,6 +196,11 @@ const AddedMarketing = () => {
     }
   }, [id])
 
+  focus$.useSubscription((val: any) => {
+    setValue(val.value);
+    form.resetFields(['activityDefinedBO']);
+  });
+
   return (
     <Fragment>
       <PeripheralLayout
@@ -202,7 +209,7 @@ const AddedMarketing = () => {
           { id: 'basicInfoLayout', title: '基本信息' },
           { id: 'shopLayout', title: '适用商城' },
           { id: 'rulesLayout', title: '活动规则' },
-          { id: 'activityProductLayout', title: '活动商品' },
+          { id: 'activityProductLayout', title: value === 10 ? '奖品设置' : '活动商品' },
           { id: 'partakeUserLayout', title: '参与用户' },
         ]}
         effect={
@@ -229,7 +236,8 @@ const AddedMarketing = () => {
             <BasicInfoLayout form={form} focus$={focus$} />
             <ShopLayout onGetShopList={handleGetShopList} onSetShopList={shopList} />
             <RulesLayout form={form} focus$={focus$} />
-            <ProductListLayout activityId={activityId && { activityId: activityId }} form={form} focus$={focus$} shopIdList={shopIdList} fieldApi={PublicApi.getMarketingMerchantActivityDetailGoodsPage} />
+            {value !== 10 && (<ProductListLayout activityId={activityId && { activityId: activityId }} form={form} focus$={focus$} shopIdList={shopIdList} fieldApi={PublicApi.getMarketingMerchantActivityDetailGoodsPage} />)}
+            {value === 10 && (<PrizeListLayout form={form} />)}
             <PartakeUserLayout onGetLevel={handleGetLevel} onSetLevel={memberLevelList} setMemberType={memberType} />
           </Form>
         }

src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/prizeListLayout/index.tsx

+import React, { useEffect, useState } from 'react';
+import { Form, Table, Tooltip, Button, Select, Input, Popconfirm } from 'antd';
+import { ColumnType } from 'antd/lib/table';
+import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import CardLayout from '../card';
+import { FormInstance } from 'antd/es/form/Form';
+import { isEmpty } from '@antv/util';
+
+const levelList = [
+  { value: 1, name: '一等奖' },
+  { value: 2, name: '二等奖' },
+  { value: 3, name: '三等奖' },
+  { value: 4, name: '四等奖' },
+  { value: 5, name: '五等奖' },
+]
+
+const typeList = [
+  { value: 1, name: '商品' },
+  { value: 2, name: '优惠卷' },
+  { value: 3, name: '现金' },
+  { value: 4, name: '积分' },
+  { value: 5, name: '谢谢参与' },
+]
+
+interface PrizeListProps {
+  form?: FormInstance,
+}
+
+
+const PrizeListLayout: React.FC<PrizeListProps> = (props: any) => {
+  const { form } = props;
+
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [levelIds, setLevelIds] = useState<number[]>([]);
+
+  /** 选择奖项等级 */
+  const handleChangeLevel = (e, _index) => {
+    const fields = [...dataSource];
+    const ids = [...levelIds];
+    console.log(ids)
+    ids[_index] = e;
+    setLevelIds(ids);
+    const newData = fields.map((_item, _i) => {
+      if (_i === _index) {
+        return {
+          ..._item,
+          level: e
+        }
+      }
+      return _item
+    })
+    setDataSource(newData)
+  }
+
+  /** 删除一条奖项 */
+  const handleDelete = (_index) => {
+    const fields = [...dataSource];
+    const ids = [...levelIds];
+    fields.splice(_index, 1)
+    fields.forEach((_item, index) => {
+      form.setFieldsValue({
+        [`level_${index}`]: _item.level,
+        [`type_${index}`]: _item.type,
+        [`probability_${index}`]: _item.probability,
+        [`prize_${index}`]: _item.prize,
+      })
+    })
+    setLevelIds(ids.splice(_index, 1))
+    setDataSource(fields)
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '奖项等级',
+      key: 'level',
+      dataIndex: 'level',
+      width: 240,
+      render: (_text, _record, _index) => (
+        <Form.Item
+          style={{ margin: 0 }}
+          name={`level_${_index}`}
+          rules={[{ required: true, message: '请选择奖项等级' }]}
+        >
+          <Select onChange={(e) => handleChangeLevel(e, _index)}>
+            {levelList.map(_item => (
+              <Select.Option disabled={levelIds.includes(_item.value)} key={_item.value} value={_item.value}>{_item.name}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      )
+    },
+    {
+      title: '奖品类别',
+      key: 'type',
+      dataIndex: 'type',
+      width: 240,
+      render: (_text, _record, _index) => (
+        <Form.Item
+          style={{ margin: 0 }}
+          name={`type_${_index}`}
+          rules={[{ required: true, message: '请选择奖品类别' }]}
+        >
+          <Select>
+            {typeList.map(_item => (
+              <Select.Option key={_item.value} value={_item.value}>{_item.name}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      )
+    },
+    {
+      title: <Tooltip placement="top" title="中奖概率为当前奖项等级的中奖概率，如设置一等奖的中奖概率为10%，则表示用户抽中一等奖的概率是10%">
+        中奖概率 <QuestionCircleOutlined />
+      </Tooltip>,
+      key: 'probability',
+      dataIndex: 'probability',
+      width: 176,
+      render: (_text, _record, _index) => (
+        <Form.Item
+          style={{ margin: 0 }}
+          name={`probability_${_index}`}
+          rules={[{ required: true, message: '请输入中奖概率' }]}
+        >
+          <Input style={{ width: 176 }} addonAfter='%' />
+        </Form.Item>
+      )
+    },
+    {
+      title: '奖品',
+      key: 'prize',
+      dataIndex: 'prize',
+      render: (_text, _record, _index) => (
+        <Form.Item
+          noStyle
+          shouldUpdate={(prevValues, currentValues) => prevValues[`type_${_index}`] !== currentValues[`type_${_index}`]}
+        >
+          {({ getFieldValue }) => getFieldValue([`type_${_index}`]) === 1 ? (
+            <Form.Item
+              style={{ margin: 0 }}
+              name={`prize_${_index}`}
+              rules={[{ required: true, message: '请输选择优惠券' }]}
+            >
+              <div>123</div>
+            </Form.Item>
+          ) : getFieldValue([`type_${_index}`]) === 2 ? (
+            <Form.Item
+              style={{ margin: 0 }}
+              name={`prize_${_index}`}
+              rules={[{ required: true, message: '请输选择优惠券' }]}
+            >
+              <div>123</div>
+            </Form.Item>
+          ) : getFieldValue([`type_${_index}`]) === 3 ? (
+            <Form.Item
+              style={{ margin: 0 }}
+              name={`prize_${_index}`}
+              rules={[{ required: true, message: '请输入金额' }]}
+            >
+              <Input addonAfter='元' />
+            </Form.Item>
+          ) : getFieldValue([`type_${_index}`]) === 4 ? (
+            <Form.Item
+              style={{ margin: 0 }}
+              name={`prize_${_index}`}
+              rules={[{ required: true, message: '请输入积分' }]}
+            >
+              <Input addonAfter='积分' />
+            </Form.Item>
+          ) : '无'}
+        </Form.Item>
+      )
+    },
+    {
+      title: '操作',
+      key: 'level',
+      dataIndex: 'level',
+      width: 128,
+      render: (_text, _record, _index) => (
+        <Popconfirm
+          title="是否删除?"
+          onConfirm={() => handleDelete(_index)}
+        >
+          <Button type='link'>删除</Button>
+        </Popconfirm>
+
+      )
+    },
+  ]
+
+  /** 添加新奖项 */
+  const handleApped = () => {
+    const field_Obj = {
+      level: null,
+      type: null,
+      probability: null,
+      prize: null,
+    }
+    const field = [...dataSource];
+    setDataSource([...field, field_Obj]);
+  }
+
+  return (
+    <CardLayout
+      id="productListLayout"
+      title="奖品设置"
+      weight
+    >
+      <Form.Item
+        name={['activityDefinedBO', 'prizeBOList']}
+        rules={[{ required: true, message: '请选择奖品设置！' }]}
+      >
+        <Table
+          rowKey={(_record, _index) => _index}
+          columns={columns}
+          dataSource={dataSource}
+          pagination={false}
+        />
+      </Form.Item>
+      <Button style={{ marginBottom: '16px' }} block type="dashed" icon={<PlusOutlined />} onClick={handleApped}>添加新奖项</Button>
+    </CardLayout>
+  )
+}
+
+export default PrizeListLayout;

src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/rulesLayout/index.tsx

 import React, { useState } from 'react';
-import { Form, Checkbox, Radio, Input, Space, Button, DatePicker } from 'antd';
+import { Form, Checkbox, Radio, Input, Space, Button, DatePicker, Select } from 'antd';
 import { EventEmitter } from '@umijs/hooks/lib/useEventEmitter'
 import { isEmpty } from '@formily/shared';
 import { FormInstance } from 'antd/es/form/Form';
@@ -530,7 +530,6 @@ const RulesLayout: React.FC<RulesLayoutProps> = (props: any) => {
   }
   /** 试用 */
   const probation = (int = 1) => {
-    console.log(int)
     switch (Number(int)) {
       case 16:
         return (
@@ -569,6 +568,109 @@ const RulesLayout: React.FC<RulesLayoutProps> = (props: any) => {
         )
     }
   }
+  /** 抽奖 */
+  const lottery = (int = 1) => {
+    switch (Number(int)) {
+      case 10:
+        return (
+          <>
+            <Form.Item
+              tooltip='订单抽奖表示用户订单满N元且支付成功后可参与一次抽奖，积分抽奖表示用户消耗N积分可参与一次抽奖，行为抽奖表示用户签到或申请会员后可参与一次抽奖，活动抽奖表示在抽奖活动中，用户可无条件参与抽奖'
+              label='抽奖类型'
+              required
+            >
+              <Space direction='vertical'>
+                <Form.Item
+                  name={['activityDefinedBO', 'lotteryType']}
+                  style={{ margin: 0 }}
+                  rules={[{ required: true, message: '请选择抽奖类型' }]}
+                >
+                  <Radio.Group>
+                    <Radio.Button value={1}>订单抽奖</Radio.Button>
+                    <Radio.Button value={2}>积分抽奖</Radio.Button>
+                    <Radio.Button value={3}>行为抽奖</Radio.Button>
+                    <Radio.Button value={4}>活动抽奖</Radio.Button>
+                  </Radio.Group>
+                </Form.Item>
+                <Form.Item
+                  noStyle
+                  shouldUpdate={(prevValues, currentValues) => prevValues.activityDefinedBO !== currentValues.activityDefinedBO}
+                >
+                  {({ getFieldValue }) => getFieldValue(['activityDefinedBO', 'lotteryType']) === 1 ? (
+                    <Space style={{ display: 'flex' }}>
+                      订单金额满
+                      <Form.Item
+                        style={{ margin: 0 }}
+                        name={['activityDefinedBO', 'orderPrice']}
+                        rules={[{ required: true, message: '请输入' }]}
+                      >
+                        <Input style={{ width: '160px' }} addonAfter="元" />
+                      </Form.Item>
+                      且支付成功后参与抽奖
+                    </Space>
+                  ) : getFieldValue(['activityDefinedBO', 'lotteryType']) === 2 ? (
+                    <Space style={{ display: 'flex' }}>
+                      每次抽奖消耗
+                      <Form.Item
+                        style={{ margin: 0 }}
+                        name={['activityDefinedBO', 'integral']}
+                        rules={[{ required: true, message: '请输入' }]}
+                      >
+                        <Input style={{ width: '160px' }} addonAfter="积分" />
+                      </Form.Item>
+                    </Space>
+                  ) : getFieldValue(['activityDefinedBO', 'lotteryType']) === 3 && (
+                    <Space style={{ display: 'flex' }}>
+                      用户完成
+                      <Form.Item
+                        style={{ margin: 0 }}
+                        name={['activityDefinedBO', 'behavior']}
+                        rules={[{ required: true, message: '请选择' }]}
+                      >
+                        <Select style={{ width: 160 }} placeholder='请选择'>
+                          <Select.Option value={1}>申请会员</Select.Option>
+                          <Select.Option value={2}>签到</Select.Option>
+                        </Select>
+                      </Form.Item>
+                      参与抽奖
+                    </Space>
+                  )}
+                </Form.Item>
+              </Space>
+            </Form.Item>
+            <Form.Item
+              tooltip='抽奖次数可限制每日允许抽奖次数，每周允许抽奖次数，每月允许抽奖次数，也可限制在活动期间允许抽奖次数'
+              label='抽奖次数'
+              required
+              className={style.rulesLayout}
+            >
+              <Space style={{ display: 'flex' }}>
+                <Form.Item
+                  style={{ margin: 0 }}
+                  name={['activityDefinedBO', 'lotteryNumType']}
+                  rules={[{ required: true, message: '请选择抽奖次数类型' }]}
+                >
+                  <Select style={{ width: 160 }} placeholder='请选择'>
+                    <Select.Option value={1}>每日</Select.Option>
+                    <Select.Option value={2}>每周</Select.Option>
+                    <Select.Option value={3}>每月</Select.Option>
+                    <Select.Option value={4}>活动期内</Select.Option>
+                  </Select>
+                </Form.Item>
+                <Form.Item
+                  style={{ margin: 0 }}
+                  name={['activityDefinedBO', 'lotteryNum']}
+                  rules={[{ required: true, message: '请输入抽奖次数' }]}
+                >
+                  <Input style={{ width: '160px' }} addonAfter="次" />
+                </Form.Item>
+              </Space>
+            </Form.Item>
+          </>
+        )
+    }
+  }
+
 
   return (
     <CardLayout
@@ -587,6 +689,7 @@ const RulesLayout: React.FC<RulesLayoutProps> = (props: any) => {
       {grouPing(option?.value)}
       {exceedRule(option?.value)}
       {probation(option?.value)}
+      {lottery(option?.value)}
       <Form.Item
         name={['activityDefinedBO', 'describe']}
         label="活动描述"