Skip to content

J
jinfa-platform
Commit 555d5250 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

✨ feat(): 营销详情修改

parent e86a725b
Hide whitespace changes
Inline Side-by-side
Showing with 1259 additions and 37 deletions
config/routes/marketingRoute/platformexecutionRoute.ts
View file @ 555d5250
......@@ -12,9 +12,9 @@ export const platformexecutionRoute = [
component: '@/pages/transaction/marketingAbility/platformexeCution/search'
},
{
path: '/memberCenter/marketingAbility/paltformSign/search/detail',
path: '/memberCenter/marketingAbility/platformexeCution/search/detail',
name: '平台营销活动详情',
component: '@/pages/transaction/marketingAbility/paltformSign/detail',
component: '@/pages/transaction/marketingAbility/platformexeCution/detail',
hideInMenu: true,
noMargin: true,
},
......
config/routes/marketingRoute/selfbuiltexecutionRoute.ts
View file @ 555d5250
......@@ -13,7 +13,7 @@ export const selfbuiltexecutionRoute = [
},
/*详情*/
{
path: '/memberCenter/marketingAbility/selfbuiltexeCution/detail',
path: '/memberCenter/marketingAbility/selfbuiltexeCution/search/detail',
name: '平台营销活动详情',
component: '@/pages/transaction/marketingAbility/selfbuiltexeCution/detail',
hideInMenu: true,
......
src/pages/transaction/marketingAbility/components/activityUserLayout/index.less
View file @ 555d5250
......@@ -20,5 +20,13 @@
}
}
.colStyle {
padding: 10px 16px;
background-color: #FAFBFC;
.cell {
h5 { margin-bottom: 0px; }
.label,
.content {
flex: 1;
}
}
}
src/pages/transaction/marketingAbility/components/activityUserLayout/index.tsx
View file @ 555d5250
......@@ -3,11 +3,19 @@ import { Row, Col, Space } from 'antd';
import style from './index.less';
import Card from '@/pages/transaction/components/card';
const activityUserLayout = () => {
interface ActivityUserLayoutProps {
/** 标题 */
title?: string,
/** 适用用户 */
isFlag?: boolean,
}
const ActivityUserLayout: React.FC<ActivityUserLayoutProps> = (props: any) => {
const { title, isFlag } = props;
return (
<Card
id="activityUserLayout"
title="参与用户"
title={title}
>
<Row gutter={[8, 8]}>
<Col span={8}>
......@@ -30,15 +38,77 @@ const activityUserLayout = () => {
</div>
</Col>
</Row>
<Row gutter={[24, 24]}>
<Col span={12}>
<div className={style.colStyle}>
213
</div>
</Col>
</Row>
{!isFlag && (
<Row gutter={[24, 24]}>
<Col span={12}>
<div className={style.colStyle}>
<Row>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>会员类型: </h5>
<h5 className={style.content}>企业会员</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>会员角色: </h5>
<h5 className={style.content}>采购商</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>等级类型: </h5>
<h5 className={style.content}>商户会员</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>等级标签: </h5>
<h5 className={style.content}>倔强青铜</h5>
</div>
</Col>
</Row>
</div>
</Col>
<Col span={12}>
<div className={style.colStyle}>
<Row>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>会员类型: </h5>
<h5 className={style.content}>企业会员</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>会员角色: </h5>
<h5 className={style.content}>采购商</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>等级类型: </h5>
<h5 className={style.content}>商户会员</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>等级标签: </h5>
<h5 className={style.content}>倔强青铜</h5>
</div>
</Col>
</Row>
</div>
</Col>
</Row>
)}
</Card>
)
}
export default activityUserLayout
ActivityUserLayout.defaultProps = {
title: "参与用户"
}
export default ActivityUserLayout
src/pages/transaction/marketingAbility/components/demandLayout/index.tsx 0 → 100644
View file @ 555d5250
import React, { useState } from 'react';
import { Row, Col, Avatar } from 'antd';
import Card from '@/pages/transaction/components/card';
const ColStyle = {
display: 'flex',
padding: '6px 16px',
alignItems: 'center',
borderRadius: '4px',
backgroundColor: '#FAFBFC'
}
const TextStyle = {
color: '#252D37',
marginLeft: '10px',
}
export interface DemandLayoutIProps {
// storeList?: any,
title?: string
}
const DemandLayout: React.FC<DemandLayoutIProps> = (props: any) => {
// const { storeList } = props;
const [storeList] = useState([
{ id: 1, logoUrl: '', name: 'WEB-渠道商城' },
{ id: 2, logoUrl: '', name: 'H5-渠道商城' },
{ id: 3, logoUrl: '', name: '小程序-渠道商城' },
{ id: 4, logoUrl: '', name: 'APP-渠道商城' },
{ id: 5, logoUrl: '', name: 'WEB-渠道自有商品商城' },
])
return (
<Card
id='demandLayout'
title='适用商城'
>
<Row gutter={[16, 16]}>
{storeList.map(item => (
<Col
span={6}
key={item.id}
>
<div style={ColStyle}>
<Avatar size={32} src={item.logoUrl} style={{ color: '#FFFFFF', backgroundColor: '#00A98F' }}>logo</Avatar>
<span style={TextStyle}>{item.name}</span>
</div>
</Col>
))}
</Row>
</Card>
)
}
export default DemandLayout;
src/pages/transaction/marketingAbility/paltformSign/detail/constants.ts 0 → 100644
View file @ 555d5250
/**
* 活动类型
*/
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/paltformSign/detail/data.ts 0 → 100644
View file @ 555d5250
export const _data = {
id: 1,
activityId: 888,
activityName: '自建营销活动管理',
marketingNo: 'XJBX888888',
externalState: 5,
externalStateName: '已结束',
interiorState: 5,
interiorStateName: '已结束',
activityType: 1,
orderModal: '询价报价下单',
membersName: '温州龙昌手袋有限公司',
creationTime: 1624603001552,
activityStartTime: 1624603001552,
activityEndTime: 1624603001552,
externalLogStates: [
{
isExecute: 1,
operationalProcess: "提交营销活动",
roleName: "供应商",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动",
roleName: "平台",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "上线营销活动",
roleName: "供应商",
state: 1,
stateName: null,
},
],
externalLogs: [
{
auditOpinion: "",
createMemberId: 20,
createMemberRoleId: 11,
createTime: 1624600139800,
id: 1,
operation: "提交营销活动",
purchaseInquiryId: 956,
roleName: "供应商",
state: 2,
stateName: "待平台审核",
},
{
auditOpinion: "同意",
createMemberId: 20,
createMemberRoleId: 11,
createTime: 1624600139800,
id: 2,
operation: "审核营销活动",
purchaseInquiryId: 956,
roleName: "平台",
state: 2,
stateName: "待上线活动",
},
],
interiorLogStates: [
{
isExecute: 1,
operationalProcess: "提交营销活动",
roleName: "新增营销活动",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动",
roleName: "审核营销活动(一级)",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动(二级)",
roleName: "运营总监",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "提交营销活动",
roleName: "运营人员",
state: 1,
stateName: null,
},
],
interiorLogs: [
{
auditOpinion: "",
createMemberId: 20,
createRoleId: 11,
createTime: 1624600137942,
department: "运营人员",
id: 3968,
memberId: null,
memberRoleId: null,
operation: "新增营销活动",
position: "运营部",
purchaseInquiryId: 956,
roleName: "张三",
state: 1,
stateName: "待审核(一级)",
step: 1,
},
],
}
src/pages/transaction/marketingAbility/paltformSign/detail/index.tsx
View file @ 555d5250
import React from 'react';
import React, { Fragment, useState } from 'react';
import { Space, Tooltip } from 'antd';
import { Context } from '@/pages/transaction/components/detailLayout/components/context';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import { _data } from './data';
import ProgressLayout from '@/pages/transaction/components/detailLayout/components/progressLayout';
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
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 '@/pages/member/components/StatusTag';
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';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
{ id: 'basicLayout', title: '基本信息' },
{ id: 'activityRuleLayout', title: '活动规则' },
{ id: 'activityProductLayout', title: '活动商品' },
{ id: 'activityUserLayout', title: '活动用户' },
{ id: 'applyMallLayout', title: '适用商城' },
{ id: 'recordLyout', title: '流转记录' },
]
const DetialLayout = () => {
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
}
const [dataSource] = useState<any>(_data);
const [basicEffect, setBasicEffect] = useState<any>([]);
const [generalEffect, setGeneralEffect] = useState<any>([]);
const handleBasicEffect = (data: any) => {
setBasicEffect([
{
col: [
{ label: '活动ID', extra: data.activityId },
{ label: '活动名称', extra: data.activityName },
{ label: '外部状态', extra: data.externalStateName },
{ label: '内部状态', extra: data.interiorStateName },
]
},
{
col: [
{ label: '活动类型', extra: ACTIVITYTYPENAME[data.activityType] },
{ label: '下单模式', extra: data.orderModal },
{ label: '活动开始时间', extra: format(data.activityStartTime) },
{ label: '活动结束时间', extra: format(data.activityEndTime) },
]
},
{
col: [
{ label: '会员名称', extra: data.membersName },
{ label: '创建时间', extra: format(data.creationTime) },
]
},
])
}
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 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: '',
},
]
useEffect(() => {
handleBasicEffect(_data);
handleGeneralEffect(_data);
}, [])
function Detail() {
return (
<div>
Detail
</div>
);
<Context.Provider value={dataSource}>
<PeripheralLayout
no={dataSource.activityId}
detail={dataSource.activityName}
tabLink={TABLINK}
components={
<Fragment>
<ProgressLayout />
<BasicLayout effect={basicEffect} />
<GeneralLayout
visible
title={`活动规则-${ACTIVITYTYPENAME[dataSource.activityType]}`}
anchor="activityRuleLayout"
effect={generalEffect}
/>
<ListLayout
anchor="activityProductLayout"
id={1}
title="活动商品"
columns={columns}
/>
<ActivityUserLayout />
<DemandLayout />
<RecordLyout />
</Fragment>
}
/>
</Context.Provider>
)
}
export default Detail;
export default DetialLayout;
src/pages/transaction/marketingAbility/platformexeCution/detail/constants.ts 0 → 100644
View file @ 555d5250
/**
* 活动类型
*/
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/platformexeCution/detail/data.ts 0 → 100644
View file @ 555d5250
export const _data = {
id: 1,
activityId: 888,
activityName: '自建营销活动管理',
marketingNo: 'XJBX888888',
externalState: 5,
externalStateName: '已结束',
interiorState: 5,
interiorStateName: '已结束',
activityType: 1,
orderModal: '询价报价下单',
membersName: '温州龙昌手袋有限公司',
creationTime: 1624603001552,
activityStartTime: 1624603001552,
activityEndTime: 1624603001552,
externalLogStates: [
{
isExecute: 1,
operationalProcess: "提交营销活动",
roleName: "供应商",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动",
roleName: "平台",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "上线营销活动",
roleName: "供应商",
state: 1,
stateName: null,
},
],
externalLogs: [
{
auditOpinion: "",
createMemberId: 20,
createMemberRoleId: 11,
createTime: 1624600139800,
id: 1,
operation: "提交营销活动",
purchaseInquiryId: 956,
roleName: "供应商",
state: 2,
stateName: "待平台审核",
},
{
auditOpinion: "同意",
createMemberId: 20,
createMemberRoleId: 11,
createTime: 1624600139800,
id: 2,
operation: "审核营销活动",
purchaseInquiryId: 956,
roleName: "平台",
state: 2,
stateName: "待上线活动",
},
],
interiorLogStates: [
{
isExecute: 1,
operationalProcess: "提交营销活动",
roleName: "新增营销活动",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动",
roleName: "审核营销活动(一级)",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动(二级)",
roleName: "运营总监",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "提交营销活动",
roleName: "运营人员",
state: 1,
stateName: null,
},
],
interiorLogs: [
{
auditOpinion: "",
createMemberId: 20,
createRoleId: 11,
createTime: 1624600137942,
department: "运营人员",
id: 3968,
memberId: null,
memberRoleId: null,
operation: "新增营销活动",
position: "运营部",
purchaseInquiryId: 956,
roleName: "张三",
state: 1,
stateName: "待审核(一级)",
step: 1,
},
],
}
src/pages/transaction/marketingAbility/platformexeCution/detail/index.tsx
View file @ 555d5250
import React from 'react';
import React, { Fragment, useState } from 'react';
import { Space, Tooltip } from 'antd';
import { Context } from '@/pages/transaction/components/detailLayout/components/context';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import { _data } from './data';
import ProgressLayout from '@/pages/transaction/components/detailLayout/components/progressLayout';
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
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 '@/pages/member/components/StatusTag';
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';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
{ id: 'basicLayout', title: '基本信息' },
{ id: 'activityRuleLayout', title: '活动规则' },
{ id: 'activityProductLayout', title: '活动商品' },
{ id: 'activityUserLayout', title: '活动用户' },
{ id: 'applyMallLayout', title: '适用商城' },
{ id: 'recordLyout', title: '流转记录' },
]
const DetialLayout = () => {
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
}
const [dataSource] = useState<any>(_data);
const [basicEffect, setBasicEffect] = useState<any>([]);
const [generalEffect, setGeneralEffect] = useState<any>([]);
const handleBasicEffect = (data: any) => {
setBasicEffect([
{
col: [
{ label: '活动ID', extra: data.activityId },
{ label: '活动名称', extra: data.activityName },
{ label: '内部状态', extra: data.interiorStateName },
]
},
{
col: [
{ label: '优惠券类型', extra: ACTIVITYTYPENAME[data.activityType] },
{ label: '券面额', extra: data.orderModal },
{ label: '发券数量', extra: format(data.activityStartTime) },
]
},
{
col: [
{ label: '领(发)券开始时间', extra: format(data.activityStartTime) },
{ label: '领(发)券结束时间', extra: format(data.creationTime) },
]
},
])
}
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 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: '',
},
]
useEffect(() => {
handleBasicEffect(_data);
handleGeneralEffect(_data);
}, [])
const Detail = () => {
return (
<div>
Detail
</div>
);
<Context.Provider value={dataSource}>
<PeripheralLayout
no={dataSource.activityId}
detail={dataSource.activityName}
tabLink={TABLINK}
components={
<Fragment>
<ProgressLayout />
<BasicLayout effect={basicEffect} />
<GeneralLayout
visible
title={`活动规则-${ACTIVITYTYPENAME[dataSource.activityType]}`}
anchor="activityRuleLayout"
effect={generalEffect}
/>
<ListLayout
anchor="activityProductLayout"
id={1}
title="活动商品"
columns={columns}
/>
<ActivityUserLayout
title="适用用户"
isFlag
/>
<DemandLayout />
<RecordLyout />
</Fragment>
}
/>
</Context.Provider>
)
}
export default Detail;
export default DetialLayout;
src/pages/transaction/marketingAbility/selfManagement/detail/index.tsx
View file @ 555d5250
......@@ -12,6 +12,7 @@ import { useEffect } from 'react';
import { ACTIVITYTYPE, ACTIVITYTYPENAME } from './constants';
import StatusTag from '@/pages/member/components/StatusTag';
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';
......@@ -188,6 +189,7 @@ const DetialLayout = () => {
columns={columns}
/>
<ActivityUserLayout />
<DemandLayout />
<RecordLyout />
</Fragment>
}
......
src/pages/transaction/marketingAbility/selfbuiltexeCution/detail/constants.ts 0 → 100644
View file @ 555d5250
/**
* 活动类型
*/
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/selfbuiltexeCution/detail/data.ts 0 → 100644
View file @ 555d5250
export const _data = {
id: 1,
activityId: 888,
activityName: '自建营销活动管理',
marketingNo: 'XJBX888888',
externalState: 5,
externalStateName: '已结束',
interiorState: 5,
interiorStateName: '已结束',
activityType: 1,
orderModal: '询价报价下单',
membersName: '温州龙昌手袋有限公司',
creationTime: 1624603001552,
activityStartTime: 1624603001552,
activityEndTime: 1624603001552,
externalLogStates: [
{
isExecute: 1,
operationalProcess: "提交营销活动",
roleName: "供应商",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动",
roleName: "平台",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "上线营销活动",
roleName: "供应商",
state: 1,
stateName: null,
},
],
externalLogs: [
{
auditOpinion: "",
createMemberId: 20,
createMemberRoleId: 11,
createTime: 1624600139800,
id: 1,
operation: "提交营销活动",
purchaseInquiryId: 956,
roleName: "供应商",
state: 2,
stateName: "待平台审核",
},
{
auditOpinion: "同意",
createMemberId: 20,
createMemberRoleId: 11,
createTime: 1624600139800,
id: 2,
operation: "审核营销活动",
purchaseInquiryId: 956,
roleName: "平台",
state: 2,
stateName: "待上线活动",
},
],
interiorLogStates: [
{
isExecute: 1,
operationalProcess: "提交营销活动",
roleName: "新增营销活动",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动",
roleName: "审核营销活动(一级)",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "审核营销活动(二级)",
roleName: "运营总监",
state: 1,
stateName: null,
},
{
isExecute: 0,
operationalProcess: "提交营销活动",
roleName: "运营人员",
state: 1,
stateName: null,
},
],
interiorLogs: [
{
auditOpinion: "",
createMemberId: 20,
createRoleId: 11,
createTime: 1624600137942,
department: "运营人员",
id: 3968,
memberId: null,
memberRoleId: null,
operation: "新增营销活动",
position: "运营部",
purchaseInquiryId: 956,
roleName: "张三",
state: 1,
stateName: "待审核(一级)",
step: 1,
},
],
}
src/pages/transaction/marketingAbility/selfbuiltexeCution/detail/index.tsx
View file @ 555d5250
import React from 'react';
import React, { Fragment, useState } from 'react';
import { Space, Tooltip } from 'antd';
import { Context } from '@/pages/transaction/components/detailLayout/components/context';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import { _data } from './data';
import ProgressLayout from '@/pages/transaction/components/detailLayout/components/progressLayout';
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
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 '@/pages/member/components/StatusTag';
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';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
{ id: 'basicLayout', title: '基本信息' },
{ id: 'activityRuleLayout', title: '活动规则' },
{ id: 'activityProductLayout', title: '活动商品' },
{ id: 'activityUserLayout', title: '活动用户' },
{ id: 'applyMallLayout', title: '适用商城' },
{ id: 'recordLyout', title: '流转记录' },
]
const DetialLayout = () => {
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
}
const [dataSource] = useState<any>(_data);
const [basicEffect, setBasicEffect] = useState<any>([]);
const [generalEffect, setGeneralEffect] = useState<any>([]);
const handleBasicEffect = (data: any) => {
setBasicEffect([
{
col: [
{ label: '活动ID', extra: data.activityId },
{ label: '活动名称', extra: data.activityName },
{ label: '内部状态', extra: data.interiorStateName },
]
},
{
col: [
{ label: '优惠券类型', extra: ACTIVITYTYPENAME[data.activityType] },
{ label: '券面额', extra: data.orderModal },
{ label: '发券数量', extra: format(data.activityStartTime) },
]
},
{
col: [
{ label: '领(发)券开始时间', extra: format(data.activityStartTime) },
{ label: '领(发)券结束时间', extra: format(data.creationTime) },
]
},
])
}
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 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: '',
},
]
useEffect(() => {
handleBasicEffect(_data);
handleGeneralEffect(_data);
}, [])
const Detail = () => {
return (
<div>
Detail
</div>
);
<Context.Provider value={dataSource}>
<PeripheralLayout
no={dataSource.activityId}
detail={dataSource.activityName}
tabLink={TABLINK}
components={
<Fragment>
<ProgressLayout />
<BasicLayout effect={basicEffect} />
<GeneralLayout
visible
title={`活动规则-${ACTIVITYTYPENAME[dataSource.activityType]}`}
anchor="activityRuleLayout"
effect={generalEffect}
/>
<ListLayout
anchor="activityProductLayout"
id={1}
title="活动商品"
columns={columns}
/>
<ActivityUserLayout
title="适用用户"
isFlag
/>
<DemandLayout />
<RecordLyout />
</Fragment>
}
/>
</Context.Provider>
)
}
export default Detail;
export default DetialLayout;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment