Skip to content

A
admin
提交 1fca1bdd 作者: ZhangLingKun
操作

功能：邀请新好友获取积分

上级 225f1927
正在显示 包含 791 行增加 和 321 行删除
env/.env.production
#请求接口地址
VITE_REQUEST_BASE_URL='https://www.iuav.shop'
#VITE_REQUEST_BASE_URL='http://120.77.145.47'
#VITE_REQUEST_BASE_URL='https://test.iuav.shop'
#VITE_REQUEST_BASE_URL='/api'
#旧版接口地址
......
src/api/interface/activityManage.ts
// 活动-裂变优惠券下拉类型
import { InterFunction, InterItemFunction } from '~/api/interface';
import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
import { SplitCouponItemType } from '~/api/interface/couponManage';
// 裂变优惠券-下拉
......@@ -69,3 +69,60 @@ export type SignInListType = InterFunction<
}>;
}[]
>;
// 活动列表
export type listActivityPagesType = InterListFunction<
{
activityId?: number;
activityStatus?: number;
activityType?: number;
userAccountId?: number;
},
{
activityName: string;
activityPartDTOS: null;
activityStatus: number;
activityType: number;
createTime: string;
description: string;
endTime: string;
id: number;
requireNum: number;
rewardType: number;
rewardValue: number;
startTime: string;
}
>;
// 添加活动
export type activityInsertType = InterFunction<
{
activityName: string;
activityStatus: number;
activityType: number;
description: string;
endTime: string;
id?: number;
requireNum: number;
rewardType: number;
rewardValue: number;
startTime: string;
},
null
>;
// 修改活动
export type activityUpdateType = InterFunction<
{
activityName: string;
activityStatus: number;
activityType: number;
description: string;
endTime: string;
id?: number;
requireNum: number;
rewardType: number;
rewardValue: number;
startTime: string;
},
null
>;
// 删除活动
export type activityDeleteType = InterFunction<{ id: number }, null>;
src/api/modules/activityManage.ts
import {
activeTableItemType,
activityDataType,
activityDeleteType,
activityEditType,
activityInsertType,
activityUpdateType,
addActivityType,
DataInfoType,
endActivityType,
listActivityPagesType,
SignInListType,
splitCouponDownType,
} from '../interface/activityManage';
......@@ -49,4 +53,24 @@ export class ActivityManageAPI {
};
// 小程序签到列表
static SignInList: SignInListType = (params) => axios.get('/userapp/SignInList', { params });
// 活动列表
static listActivityPages: listActivityPagesType = (params) => {
return axios.post('/userapp/activity/listActivityPages', params);
};
// 添加活动
static activityInsert: activityInsertType = (params) => {
return axios.post('/userapp/activity/insert', params);
};
// 修改活动
static activityUpdate: activityUpdateType = (params) => {
return axios.post('/userapp/activity/update', params);
};
// 删除活动
static activityDelete: activityDeleteType = (params) => {
return axios.get('/userapp/activity/delete', { params });
};
}
src/components/search-box/index.tsx
......@@ -8,7 +8,15 @@ const { RangePicker } = DatePicker;
// 搜索列表的类型
export interface searchColumns {
type: 'input' | 'select' | 'rangePicker' | 'DatePicker' | 'Select' | 'TreeSelect' | 'Cascader';
type:
| 'input'
| 'select'
| 'rangePicker'
| 'DatePicker'
| 'Select'
| 'TreeSelect'
| 'Cascader'
| 'Input';
label?: string;
name: string;
placeholder: string;
......@@ -117,7 +125,7 @@ const Index: React.FC<propsType> = (props) => {
key={item.name}
style={{ marginBottom: '10px' }}
>
{item.type === 'input' ? (
{item.type === 'input' || item.type === 'Input' ? (
<Input
placeholder={item.placeholder}
allowClear
......
src/pages/activityManage/activityList/comp/addOrEditModal/index.tsx 0 → 100644
import React, { FC, useEffect } from 'react';
import {
DatePicker,
Form,
Input,
InputNumber,
message,
Modal,
ModalProps,
Radio,
Select,
} from 'antd';
import { InterListType } from '~/api/interface';
import { listActivityPagesType } from '~/api/interface/activityManage';
import dayjs from 'dayjs';
import { ActivityManageAPI } from '~/api';
// 参数
interface selfProps {
data?: InterListType<listActivityPagesType>[0];
}
const AddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel, title, data }) => {
// 表单钩子
const [editForm] = Form.useForm();
// 提交数据
const handleSubmit = async () => {
const valid = await editForm.validateFields();
if (!valid) return;
const res = await ActivityManageAPI[data?.id ? 'activityUpdate' : 'activityInsert']({
...data,
...valid,
startTime: dayjs(valid.rangeTime[0]).format('YYYY-MM-DD HH:mm:ss'),
endTime: dayjs(valid.rangeTime[1]).format('YYYY-MM-DD HH:mm:ss'),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// 关闭弹窗
const handleCancel = () => {
editForm.resetFields();
onCancel?.({} as any);
};
// 组件挂载
useEffect(() => {
if (data) {
editForm.setFieldsValue({
...data,
rangeTime: [dayjs(data.startTime), dayjs(data.endTime)],
});
} else {
editForm.resetFields();
}
console.log('组件挂载 --->', data);
}, [open]);
return (
<Modal open={open} onCancel={handleCancel} title={title} onOk={handleSubmit}>
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} form={editForm}>
<Form.Item
label='活动名称'
name='activityName'
rules={[{ required: true, message: '请输入活动名称' }]}
>
<Input placeholder='请输入连续签到天数' maxLength={25} allowClear />
</Form.Item>
<Form.Item
label='活动类型'
name='activityType'
rules={[{ required: true, message: '请选择活动类型' }]}
>
<Select
placeholder='请选择活动类型'
options={[{ label: '新用户邀请', value: 0 }]}
allowClear
/>
</Form.Item>
<Form.Item
label='活动状态'
name='activityStatus'
rules={[{ required: true, message: '请选择活动状态' }]}
initialValue={1}
>
<Select
placeholder='请选择活动状态'
options={[
{ label: '进行中', value: 1 },
{ label: '已结束', value: 0 },
]}
allowClear
/>
</Form.Item>
<Form.Item
label='活动说明'
name='description'
rules={[{ required: true, message: '请输入活动说明' }]}
>
<Input.TextArea placeholder='请输入活动说明' maxLength={200} allowClear showCount />
</Form.Item>
<Form.Item
label='活动时间'
name='rangeTime'
rules={[{ required: true, message: '请选择活动时间' }]}
>
<DatePicker.RangePicker placeholder={['活动开始时间', '活动结束时间']} showTime />
</Form.Item>
<Form.Item
label='奖励类型'
name='rewardType'
rules={[{ required: true, message: '请选择奖励类型' }]}
initialValue={0}
>
<Radio.Group
options={[
{ label: '积分', value: 0 },
{ label: '余额', value: 1 },
{ label: '优惠券', value: 2, disabled: true },
]}
/>
</Form.Item>
<Form.Item
label='奖励额度'
name='rewardValue'
rules={[
{ required: true, message: '请输入奖励额度' },
{ pattern: /^[0-9]*$/g, message: '请输入整数' },
]}
>
<InputNumber
min={1}
max={100000}
placeholder='请输入奖励额度'
style={{ width: '200px' }}
/>
</Form.Item>
<Form.Item
label='人数限制'
name='requireNum'
rules={[
{ required: true, message: '请输入人数限制' },
{ pattern: /^[0-9]*$/g, message: '请输入整数' },
]}
initialValue={0}
extra={'默认0，为不限制'}
>
<InputNumber
min={0}
max={100000}
placeholder='请输入人数限制'
style={{ width: '200px' }}
/>
</Form.Item>
</Form>
</Modal>
);
};
export default AddOrEditModal;
src/pages/activityManage/activityList/index.tsx
import { FC, useEffect, useRef, useState } from 'react';
import { Button, Image, message, Modal, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import SearchView from '~/components/search-box';
import { ActivityManageAPI } from '~/api';
import { InterListType, InterReqListType } from '~/api/interface';
import { listActivityPagesType } from '~/api/interface/activityManage';
import { Button, message, Modal, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import Box from '~/components/box';
import AddOrEditModal from './components/addOrEditModal';
import ActivityDataModal from './components/activityDataModal';
import { ActivityManageAPI } from '~/api/modules/activityManage';
import { SplitCouponItemType } from '~/api/interface/couponManage';
import { PaginationEntity } from '~/common/interface/PaginationEntity';
import { activityDataType, activityItemType } from '~/api/interface/activityManage';
import useOperate from '~/common/hook/optionHook';
import { PlusOutlined } from '@ant-design/icons';
import AddOrEditModal from '~/pages/activityManage/activityList/comp/addOrEditModal';
// 活动数据-类型
type dataType = (ReturnType<activityDataType> extends Promise<infer T> ? T : never)['result'];
const ActivityList: FC = () => {
const activityRef = useRef();
// 列表的类型
type TableType = InterListType<listActivityPagesType>;
// 搜索表单的类型
type ReqType = InterReqListType<listActivityPagesType>;
// 搜索表单的数据
let query: ReqType = {};
// 活动类型列表
const activityTypeList = [{ label: '新用户邀请', value: 0 }];
// 活动状态列表
const activityStatusList = [
{ label: '进行中', value: 1 },
{ label: '已结束', value: 0 },
];
// 奖励类型列表
const rewardTypeList = [
{ label: '积分', value: 0 },
{ label: '余额', value: 1 },
// { label: '优惠券', value: 2 },
];
const tableColumns: ColumnsType<activityItemType> = [
const ActivityListView = () => {
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
// 表格分页配置
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 编辑弹窗是否开启
const [addEditShow, setAddEditShow] = useState(false);
// 需要编辑的数据
const [recordData, setRecordData] = useState<TableType[0]>();
// +++++++++++++++++++++++++++++++++++++++++++++++++++ //
// 新版通用部分(ES6+ for React) ZhangLK 2022/08/30 Start
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
const res = await ActivityManageAPI.listActivityPages({
pageNo: pagination.current,
pageSize: pagination.pageSize,
...value,
...query,
});
if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({
total: totalCount,
current: pageNo,
pageSize,
totalPage,
});
setTableData(list || []);
console.log('加载列表 --->', list);
} else {
message.warning(res.message);
}
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
};
// 表单提交
const onFinish = (data: ReqType) => {
pagination.current = 1;
query = data;
getTableList(data).then();
};
// +++++++++++++++++++++++++++++++++++++++++++++++++++ //
// 删除数据
const handleDelete = (record: TableType[0]) => {
Modal.confirm({
title: '提示',
content: '请确认是否删除？',
onOk: async () => {
const res = await ActivityManageAPI.activityDelete({ id: record?.id });
if (res && res.code === '200') {
paginationChange(
tableData.length === 1 ? pagination.current - 1 : pagination.current,
pagination.pageSize,
);
message.success('删除成功');
}
},
});
};
// 页面挂载
useEffect(() => {
query = {};
(async () => {
await getTableList();
})();
}, []);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: 'ID',
title: '活动名称',
dataIndex: 'activityName',
align: 'center',
dataIndex: 'id',
},
{
title: '活动标题',
title: '活动类型',
dataIndex: 'activityType',
align: 'center',
dataIndex: 'activityName',
render: (text) => activityTypeList.find((i) => i.value === text)?.label || text,
},
{
title: '活动类型',
title: '活动状态',
dataIndex: 'activityStatus',
align: 'center',
dataIndex: 'activityType',
render: (_text: string, record: activityItemType) => (
<div>{record.activityType === 1 ? '裂变活动' : '普通活动'}</div>
),
render: (text) => activityStatusList.find((i) => i.value === text)?.label || text,
},
{
title: '是否展示',
title: '活动说明',
dataIndex: 'description',
align: 'center',
render: (_text: number, record: activityItemType) => (
<div>{record.show ? '展示' : '隐藏'}</div>
),
width: '100px',
ellipsis: true,
},
{
title: '推广简图',
title: '奖励类型',
dataIndex: 'rewardType',
align: 'center',
render: (_text: string, record: activityItemType) => (
<Image src={record.activityImg} width={50} />
),
render: (text) => rewardTypeList.find((i) => i.value === text)?.label || text,
},
{
title: '关联优惠',
title: '奖励额度',
dataIndex: 'rewardValue',
align: 'center',
dataIndex: 'bindingCouponName',
},
{
title: '参与次数',
title: '人数限制',
dataIndex: 'requireNum',
align: 'center',
dataIndex: 'limitNum',
render: (text) => (text === 0 ? `无限制` : text),
},
{
title: '状态',
title: '开始时间',
dataIndex: 'startTime',
align: 'center',
render: (_text: string, record: activityItemType) =>
record.activityStatus === 1 ? '进行中' : '已下线',
},
{
title: '有效期',
title: '结束时间',
dataIndex: 'endTime',
align: 'center',
render: (_text: string, record: activityItemType) => (
<div>
<div>起：{record.startTime}</div>
<div>止：{record.endTime}</div>
</div>
),
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
render: (_text: string, record: activityItemType, _index: number) => (
fixed: 'right',
render: (_text, record) => (
<>
<Button
type='link'
onClick={() => endActivityClick(record)}
disabled={record.activityStatus !== 1 || !isEndBtnShow}
type={'link'}
onClick={() => {
setAddEditShow(true);
setRecordData(record);
}}
>
结束
编辑
</Button>
{/* <Button type="link" onClick={() => addOrEditActivity(record)}> */}
{/* 编辑 */}
{/* </Button> */}
<Button type='link' onClick={() => showActivityData(record)} disabled={!isDataBtnShow}>
数据
<Button type={'link'} danger onClick={() => handleDelete(record)}>
删除
</Button>
</>
),
},
];
const [tableData, setTableData] = useState<activityItemType[]>([]);
const [pagination, setPagination] = useState<PaginationEntity>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
const [loading, setLoading] = useState<boolean>(false);
// 活动数据
const [activityData, setActivityData] = useState<dataType>();
const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false);
const [addOrEditModalTitle, setAddOrEditModalTitle] = useState('创建活动');
const [activityDataModalShow, setActivityDataModalShow] = useState<boolean>(false);
const [couponData, setCouponData] = useState<SplitCouponItemType[]>([]);
// 按钮权限
const isEndBtnShow = useOperate(19150);
const isDataBtnShow = useOperate(19200);
// 活动列表
const getActivityList = (data: Pick<PaginationEntity, 'pageNo' | 'pageSize'>) => {
// setLoading(true);
const list: any = [
{
id: 4,
activityName: '裂变活动测试',
activityCode: 'AC77674',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/87681f78-67db-4603-aaf3-4bdbdb4546d2.jpg',
bindingCouponId: 10000148,
bindingCouponName: '裂变优惠券测试',
activityStatus: 2,
activityType: 1,
shareNum: 2,
startTime: '2023-04-23 00:00:00',
endTime: '2023-04-30 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
{
id: 3,
activityName: '裂变活动测试',
activityCode: 'AC55159',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6e4f318f-3081-43b7-ad6a-79afabd9ddb9.jpg',
bindingCouponId: 10000141,
bindingCouponName: '测试裂变',
activityStatus: 2,
activityType: 1,
shareNum: 2,
startTime: '2023-04-23 00:00:00',
endTime: '2023-04-30 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
{
id: 2,
activityName: '认证裂变',
activityCode: 'AC17946',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/b22e0f43-fd04-4147-adc6-73d96b76c740.png',
bindingCouponId: null,
bindingCouponName: null,
activityStatus: 2,
activityType: 1,
shareNum: null,
startTime: '2023-04-19 00:00:00',
endTime: '2023-12-31 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
{
id: 1,
activityName: '测试裂变',
activityCode: 'AC01841',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/40f09893-01c5-4cc6-a64a-75dac1963791.jpg',
bindingCouponId: 10000141,
bindingCouponName: '测试裂变',
activityStatus: 2,
activityType: 1,
shareNum: 2,
startTime: '2023-04-19 00:00:00',
endTime: '2023-04-19 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
];
setTableData(list);
ActivityManageAPI.getActivityList(data).then(({ result }) => {
setLoading(false);
setTableData(result.list || []);
setPagination({
pageNo: data.pageNo,
pageSize: data.pageSize,
totalCount: result.totalCount,
});
});
};
// 裂变优惠券数据
const getActivityCouponPullDown = (type: number) => {
ActivityManageAPI.getActivityCouponPullDown({ type }).then(({ result }) => {
setCouponData(result || []);
});
};
// 活动结束
const endActivityClick = (record: activityItemType) => {
Modal.confirm({
content: '即将停止该活动，关联优惠券会停止发放',
onOk: () => {
ActivityManageAPI.endActivity({ activityId: record.id }).then(({ code }) => {
if (code === '200') {
message.success('操作成功，该活动已结束');
getActivityList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
});
}
});
},
});
};
// 新增,编辑弹窗
const addOrEditActivity = (record?: activityItemType) => {
setAddOrEditModalTitle(record ? '编辑活动' : '创建活动');
if (record) {
const activityForm = (activityRef.current as any)?.getForm();
activityForm.setFieldsValue({
activityName: record.activityName,
activityType: record.activityType,
show: record.show,
activityImg: record.activityImg,
bindingCouponId: record.bindingCouponId || undefined,
redirectPath: record?.redirectPath,
limitNum: record.limitNum,
time: [dayjs(record.startTime), dayjs(record.endTime)],
});
const setFileList = (activityRef.current as any)?.setFileList;
setFileList([
{
uid: 'uid',
name: 'image',
url: record.activityImg,
status: 'done',
},
]);
}
const setId = (activityRef.current as any)?.setId;
setId(record ? record.id : -1);
setAddOrEditModalShow(true);
};
const addOrEditModalOk = () => {
setAddOrEditModalShow(false);
getActivityList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
});
};
const addOrEditModalCancel = () => {
setAddOrEditModalShow(false);
};
// 活动数据弹窗
const showActivityData = (record: activityItemType) => {
ActivityManageAPI.getActivityData({ activityId: record.id }).then(({ result }) => {
setActivityData(result || undefined);
});
setActivityDataModalShow(true);
};
const activityDataModalCancel = () => {
setActivityDataModalShow(false);
};
// 活动类型选择
const activityTypeChangeEvent = (value: number) => {
getActivityCouponPullDown(value);
};
// 分页
const paginationChange = (pageNo: number, pageSize: number) => {
getActivityList({ pageNo, pageSize });
};
useEffect(() => {
getActivityCouponPullDown(1);
getActivityList({ pageNo: 1, pageSize: 10 });
}, []);
return (
<div className='activity-list'>
<Box>
<Button type='primary' onClick={() => addOrEditActivity()}>
新增
</Button>
</Box>
<>
<SearchView
search={[
{
label: '活动名称',
name: 'activityName',
type: 'Input',
placeholder: '请输入活动名称',
},
{
label: '活动状态',
name: 'activityStatus',
type: 'Select',
placeholder: '请选择活动状态',
options: activityStatusList,
},
{
label: '活动类型',
name: 'activityType',
type: 'Select',
placeholder: '请选择活动类型',
options: activityTypeList,
},
]}
searchData={onFinish}
child={
<>
<Button
type={'primary'}
icon={<PlusOutlined />}
onClick={() => {
setAddEditShow(true);
setRecordData(undefined);
}}
>
新增活动
</Button>
</>
}
/>
<Table
columns={tableColumns}
bordered
rowKey='id'
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
scroll={{ x: 1000 }}
bordered
pagination={{
total: pagination.totalCount,
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.pageNo,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
loading={loading}
/>
{/* 新增,编辑 */}
<AddOrEditModal
isModalVisible={addOrEditModalShow}
handleOk={addOrEditModalOk}
handleCancel={addOrEditModalCancel}
couponData={couponData}
activityTypeChangeEvent={activityTypeChangeEvent}
ref={activityRef}
title={addOrEditModalTitle}
/>
{/* 活动数据 */}
<ActivityDataModal
isModalVisible={activityDataModalShow}
handleCancel={activityDataModalCancel}
activityData={activityData}
open={addEditShow}
title={recordData ? '编辑' : '新增'}
onCancel={() => {
setAddEditShow(false);
setRecordData(undefined);
paginationChange(pagination.current, pagination.pageSize);
}}
data={recordData}
/>
</div>
</>
);
};
export default ActivityList;
export default ActivityListView;
src/pages/activityManage/activityListOld/index.tsx 0 → 100644
import { FC, useEffect, useRef, useState } from 'react';
import { Button, Image, message, Modal, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import Box from '~/components/box';
import AddOrEditModal from './components/addOrEditModal';
import ActivityDataModal from './components/activityDataModal';
import { ActivityManageAPI } from '~/api/modules/activityManage';
import { SplitCouponItemType } from '~/api/interface/couponManage';
import { PaginationEntity } from '~/common/interface/PaginationEntity';
import { activityDataType, activityItemType } from '~/api/interface/activityManage';
import useOperate from '~/common/hook/optionHook';
// 活动数据-类型
type dataType = (ReturnType<activityDataType> extends Promise<infer T> ? T : never)['result'];
const ActivityList: FC = () => {
const activityRef = useRef();
const tableColumns: ColumnsType<activityItemType> = [
{
title: 'ID',
align: 'center',
dataIndex: 'id',
},
{
title: '活动标题',
align: 'center',
dataIndex: 'activityName',
},
{
title: '活动类型',
align: 'center',
dataIndex: 'activityType',
render: (_text: string, record: activityItemType) => (
<div>{record.activityType === 1 ? '裂变活动' : '普通活动'}</div>
),
},
{
title: '是否展示',
align: 'center',
render: (_text: number, record: activityItemType) => (
<div>{record.show ? '展示' : '隐藏'}</div>
),
},
{
title: '推广简图',
align: 'center',
render: (_text: string, record: activityItemType) => (
<Image src={record.activityImg} width={50} />
),
},
{
title: '关联优惠',
align: 'center',
dataIndex: 'bindingCouponName',
},
{
title: '参与次数',
align: 'center',
dataIndex: 'limitNum',
},
{
title: '状态',
align: 'center',
render: (_text: string, record: activityItemType) =>
record.activityStatus === 1 ? '进行中' : '已下线',
},
{
title: '有效期',
align: 'center',
render: (_text: string, record: activityItemType) => (
<div>
<div>起：{record.startTime}</div>
<div>止：{record.endTime}</div>
</div>
),
},
{
title: '操作',
align: 'center',
render: (_text: string, record: activityItemType, _index: number) => (
<>
<Button
type='link'
onClick={() => endActivityClick(record)}
disabled={record.activityStatus !== 1 || !isEndBtnShow}
>
结束
</Button>
{/* <Button type="link" onClick={() => addOrEditActivity(record)}> */}
{/* 编辑 */}
{/* </Button> */}
<Button type='link' onClick={() => showActivityData(record)} disabled={!isDataBtnShow}>
数据
</Button>
</>
),
},
];
const [tableData, setTableData] = useState<activityItemType[]>([]);
const [pagination, setPagination] = useState<PaginationEntity>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
const [loading, setLoading] = useState<boolean>(false);
// 活动数据
const [activityData, setActivityData] = useState<dataType>();
const [addOrEditModalShow, setAddOrEditModalShow] = useState<boolean>(false);
const [addOrEditModalTitle, setAddOrEditModalTitle] = useState('创建活动');
const [activityDataModalShow, setActivityDataModalShow] = useState<boolean>(false);
const [couponData, setCouponData] = useState<SplitCouponItemType[]>([]);
// 按钮权限
const isEndBtnShow = useOperate(19150);
const isDataBtnShow = useOperate(19200);
// 活动列表
const getActivityList = (data: Pick<PaginationEntity, 'pageNo' | 'pageSize'>) => {
// setLoading(true);
const list: any = [
{
id: 4,
activityName: '裂变活动测试',
activityCode: 'AC77674',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/87681f78-67db-4603-aaf3-4bdbdb4546d2.jpg',
bindingCouponId: 10000148,
bindingCouponName: '裂变优惠券测试',
activityStatus: 2,
activityType: 1,
shareNum: 2,
startTime: '2023-04-23 00:00:00',
endTime: '2023-04-30 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
{
id: 3,
activityName: '裂变活动测试',
activityCode: 'AC55159',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6e4f318f-3081-43b7-ad6a-79afabd9ddb9.jpg',
bindingCouponId: 10000141,
bindingCouponName: '测试裂变',
activityStatus: 2,
activityType: 1,
shareNum: 2,
startTime: '2023-04-23 00:00:00',
endTime: '2023-04-30 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
{
id: 2,
activityName: '认证裂变',
activityCode: 'AC17946',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/b22e0f43-fd04-4147-adc6-73d96b76c740.png',
bindingCouponId: null,
bindingCouponName: null,
activityStatus: 2,
activityType: 1,
shareNum: null,
startTime: '2023-04-19 00:00:00',
endTime: '2023-12-31 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
{
id: 1,
activityName: '测试裂变',
activityCode: 'AC01841',
activityImg:
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/40f09893-01c5-4cc6-a64a-75dac1963791.jpg',
bindingCouponId: 10000141,
bindingCouponName: '测试裂变',
activityStatus: 2,
activityType: 1,
shareNum: 2,
startTime: '2023-04-19 00:00:00',
endTime: '2023-04-19 23:59:59',
limitNum: 1,
deleted: null,
show: 1,
redirectPath: null,
couponActivityDTO: null,
couponDTO: null,
},
];
setTableData(list);
ActivityManageAPI.getActivityList(data).then(({ result }) => {
setLoading(false);
setTableData(result.list || []);
setPagination({
pageNo: data.pageNo,
pageSize: data.pageSize,
totalCount: result.totalCount,
});
});
};
// 裂变优惠券数据
const getActivityCouponPullDown = (type: number) => {
ActivityManageAPI.getActivityCouponPullDown({ type }).then(({ result }) => {
setCouponData(result || []);
});
};
// 活动结束
const endActivityClick = (record: activityItemType) => {
Modal.confirm({
content: '即将停止该活动，关联优惠券会停止发放',
onOk: () => {
ActivityManageAPI.endActivity({ activityId: record.id }).then(({ code }) => {
if (code === '200') {
message.success('操作成功，该活动已结束');
getActivityList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
});
}
});
},
});
};
// 新增,编辑弹窗
const addOrEditActivity = (record?: activityItemType) => {
setAddOrEditModalTitle(record ? '编辑活动' : '创建活动');
if (record) {
const activityForm = (activityRef.current as any)?.getForm();
activityForm.setFieldsValue({
activityName: record.activityName,
activityType: record.activityType,
show: record.show,
activityImg: record.activityImg,
bindingCouponId: record.bindingCouponId || undefined,
redirectPath: record?.redirectPath,
limitNum: record.limitNum,
time: [dayjs(record.startTime), dayjs(record.endTime)],
});
const setFileList = (activityRef.current as any)?.setFileList;
setFileList([
{
uid: 'uid',
name: 'image',
url: record.activityImg,
status: 'done',
},
]);
}
const setId = (activityRef.current as any)?.setId;
setId(record ? record.id : -1);
setAddOrEditModalShow(true);
};
const addOrEditModalOk = () => {
setAddOrEditModalShow(false);
getActivityList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
});
};
const addOrEditModalCancel = () => {
setAddOrEditModalShow(false);
};
// 活动数据弹窗
const showActivityData = (record: activityItemType) => {
ActivityManageAPI.getActivityData({ activityId: record.id }).then(({ result }) => {
setActivityData(result || undefined);
});
setActivityDataModalShow(true);
};
const activityDataModalCancel = () => {
setActivityDataModalShow(false);
};
// 活动类型选择
const activityTypeChangeEvent = (value: number) => {
getActivityCouponPullDown(value);
};
// 分页
const paginationChange = (pageNo: number, pageSize: number) => {
getActivityList({ pageNo, pageSize });
};
useEffect(() => {
getActivityCouponPullDown(1);
getActivityList({ pageNo: 1, pageSize: 10 });
}, []);
return (
<div className='activity-list'>
<Box>
<Button type='primary' onClick={() => addOrEditActivity()}>
新增
</Button>
</Box>
<Table
columns={tableColumns}
bordered
rowKey='id'
dataSource={tableData}
pagination={{
total: pagination.totalCount,
pageSize: pagination.pageSize,
current: pagination.pageNo,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
loading={loading}
/>
{/* 新增,编辑 */}
<AddOrEditModal
isModalVisible={addOrEditModalShow}
handleOk={addOrEditModalOk}
handleCancel={addOrEditModalCancel}
couponData={couponData}
activityTypeChangeEvent={activityTypeChangeEvent}
ref={activityRef}
title={addOrEditModalTitle}
/>
{/* 活动数据 */}
<ActivityDataModal
isModalVisible={activityDataModalShow}
handleCancel={activityDataModalCancel}
activityData={activityData}
/>
</div>
);
};
export default ActivityList;
src/pages/activityManage/recommendManage/index.tsx deleted 100644 → 0
import React from 'react';
import { Form, Switch } from 'antd';
const RecommendManageView = () => {
// 表单钩子
const [formRefs] = Form.useForm();
return (
<>
<div className='recommend-form' style={{ width: '90%' }}>
<Form
labelCol={{ span: 3 }}
wrapperCol={{ offset: 1 }}
form={formRefs}
initialValues={{ show: 1, activityType: 1 }}
>
<Form.Item
label='是否启用'
name='status'
rules={[{ required: true, message: '请选择是否启用' }]}
valuePropName='checked'
>
<Switch />
</Form.Item>
</Form>
</div>
</>
);
};
export default RecommendManageView;
src/router/router.tsx
......@@ -173,7 +173,7 @@ import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
import CustomListDetail from '~/pages/customManage/customList/detail';
import ServiceCategoryDetail from '~/pages/categoryManage/serviceCategoryList/detail';
import RewardsManageView from '~/pages/activityManage/rewardsManage';
import RecommendManageView from '~/pages/activityManage/recommendManage';
import ActivityListView from '~/pages/activityManage/activityList';
const AddressManageView = React.lazy(() => import('~/pages/systemManage/addressManage'));
// const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
......@@ -531,12 +531,12 @@ export const routerList: Array<RouteObjectType> = [
},
},
{
path: '/activityManage/recommendManage',
element: withLoadingComponent(<RecommendManageView />),
path: '/activityManage/activityList',
element: withLoadingComponent(<ActivityListView />),
errorElement: <ErrorPage />,
meta: {
id: 520,
title: '推荐奖励',
title: '活动管理',
icon: <WechatOutlined />,
develop: true,
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论