Skip to content

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

✨ feat(平台营销活动报名): 修改按钮显示

parent 69c448a9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 605 additions and 20 deletions
config/routes/index.ts
View file @ 34d4cc4b
......@@ -83,10 +83,10 @@ const memberCenterRoute = {
// MemberRoute,
// HandlingRoute,
// PayandSettleRoute,
// marketingRoute,
marketingRoute,
// DealAbilityRoute,
// ...asyncRoutes,
...routes,
// ...routes,
{
path: '/memberCenter/noAuth',
auth: false,
......
src/pages/transaction/marketingAbility/paltformSign/readySubmit/index.tsx
View file @ 34d4cc4b
......@@ -122,6 +122,7 @@ const ReadySubmit = () => {
reload={ref}
columns={columns}
effects="id"
rowKey="activityId"
fetch={PublicApi.getMarketingPlatformActivitySignupPageTobeSubmitSignUp}
selectedRow={true}
fetchRowkeys={(e) => setRowKeys(e)}
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/add.tsx
View file @ 34d4cc4b
......@@ -28,7 +28,8 @@ const TABLINK = [
]
const DetialLayout = () => {
const { query: { activityId, signUpId } } = history.location;
const { query: { activityId, signUpId }, pathname } = history.location;
const [path] = useState(pathname.split('/')[pathname.split('/').length - 1]);
const [loading, setLoading] = useState<boolean>(false)
const [unsaved, setUnsaved] = useState<boolean>(false);
const [productList, setProductList] = useState<any[]>([]);
......@@ -107,7 +108,8 @@ const DetialLayout = () => {
signUpId !== null && (params.id = signUpId)
if (!isEmpty(productList)) {
setLoading(true)
PublicApi.postMarketingPlatformActivitySignupSave({ ...params }).then(res => {
const fieldApi = (path === 'add' ? PublicApi.postMarketingPlatformActivitySignupSave : PublicApi.postMarketingPlatformActivitySignupUpdate)
fieldApi({ ...params }).then(res => {
if (res.code !== 1000) {
setLoading(false)
return
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/index.tsx
View file @ 34d4cc4b
......@@ -89,19 +89,15 @@ const ReadySubmitExamine = () => {
dataIndex: 'state',
render: (text, record) => (
<>
{record.button === 7 && <Button type='link' onClick={() => history.push(`/memberCenter/marketingAbility/paltformSign/readySubmitExamine/edit?activityId=${record.activityId}&signUpId=${record.id}`)}>修改报名资料</Button>}
{
record.button === 6 && (
<>
<Popconfirm title="确定要提交吗？" disabled={!record.id} okText="是" cancelText="否" onConfirm={() => handleSubmit(record.id)}>
<Button type='link' disabled={!record.id}>
提交审核
</Button>
</Popconfirm>
<Button type='link' onClick={() => history.push(`/memberCenter/marketingAbility/paltformSign/readySubmitExamine/add?activityId=${record.activityId}`)}>填写报名资料</Button>
</>
)}
{record.update && <Button type='link' onClick={() => history.push(`/memberCenter/marketingAbility/paltformSign/readySubmitExamine/edit?activityId=${record.activityId}&signUpId=${record.id}`)}>修改报名资料</Button>}
{record.submit && (
<Popconfirm title="确定要提交吗？" disabled={!record.id} okText="是" cancelText="否" onConfirm={() => handleSubmit(record.id)}>
<Button type='link' disabled={!record.id}>
提交审核
</Button>
</Popconfirm>
)}
{record.save && <Button type='link' onClick={() => history.push(`/memberCenter/marketingAbility/paltformSign/readySubmitExamine/add?activityId=${record.activityId}`)}>填写报名资料</Button>}
</>
)
},
......
src/pages/transaction/marketingAbility/paltformSign/search/index.tsx
View file @ 34d4cc4b
......@@ -102,6 +102,7 @@ const Search = () => {
<TableLayout
columns={columns}
effects="id"
rowKey="activityId"
fetch={PublicApi.getMarketingPlatformActivitySignupPage}
useStateEffects={useStateEffects}
schema={{
......
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/add.tsx
View file @ 34d4cc4b
......@@ -6,6 +6,9 @@ import { SaveOutlined } from '@ant-design/icons';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import BasicInfoLayout from './components/basicInfoLayout';
import RulesLayout from './components/rulesLayout';
import ShopLayout from './components/shopLayout';
import ProductListLayout from '../../paltformSign/readySubmitExamine/components/productListLayout';
import PartakeUserLayout from './components/partakeUserLayout';
const layout: any = {
colon: false,
......@@ -14,9 +17,55 @@ const layout: any = {
};
const AddedMarketing = () => {
const { query: { activityId, signUpId } } = history.location;
const focus$ = useEventEmitter();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(false)
const [unsaved, setUnsaved] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
const [shopList, setShopList] = useState<any[]>([]);
const [dataSource, setDataSource] = useState<any>({});
const [productList, setProductList] = useState<any[]>([]);
const [memberLevelList, setMemberLevelList] = useState<any[]>([]);
const [memberType, setMemberType] = useState<any[]>([]);
const handleGetShopList = (mall) => {
console.log(mall, 10086)
const shopList = mall.filter(item => item.checked)
form.setFieldsValue({
"shopList": shopList.map(item => {
return {
shopId: item.id,
shopName: item.name,
logo: item.logoUrl,
}
})
})
}
const handleGetDataSoure = (e) => {
if (!unsaved) {
setUnsaved(true)
}
setProductList([...e])
}
const handleGetLevel = (levels) => {
const list = levels.map(item => {
return {
id: item.id,
memberLevelId: item.id,
memberType: item.memberType,
memberTypeName: item.memberTypeName,
roleType: item.roleId,
roleTypeName: item.roleName,
level: item.level,
levelTypeName: item.levelTypeName,
levelTag: item.levelTag,
}
})
setMemberLevelList([...list])
}
return (
<PeripheralLayout
detail='新增营销活动'
......@@ -26,7 +75,6 @@ const AddedMarketing = () => {
{ id: 'activityProductLayout', title: '活动商品' },
{ id: 'partakeUserLayout', title: '参与用户' },
{ id: 'shopLayout', title: '适用商城' },
{ id: 'applyMemberLayout', title: '适用会员' },
]}
effect={
<Button
......@@ -44,7 +92,10 @@ const AddedMarketing = () => {
{...layout}
>
<BasicInfoLayout form={form} focus$={focus$} />
<RulesLayout focus$={focus$} />
<RulesLayout form={form} focus$={focus$} />
<ProductListLayout signUpId={signUpId !== 'null' && signUpId} data={dataSource} getDataSource={handleGetDataSoure} />
<PartakeUserLayout onGetLevel={handleGetLevel} onSetLevel={memberLevelList} setMemberType={memberType} />
<ShopLayout onGetShopList={handleGetShopList} onSetShopList={shopList} />
</Form>
}
/>
......
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/partakeUserLayout/index.less 0 → 100644
View file @ 34d4cc4b
.rulesLayout {
:global {
.ant-checkbox {
display: none;
}
.ant-checkbox-wrapper {
min-width: 56px;
text-align: center;
color: rgba(0, 0, 0, 0.85);
font-weight: 400;
padding: 5.6px 0px;
border: 1px solid transparent;
box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
border-color: #d9d9d9;
}
.ant-checkbox-wrapper-checked {
color: @main-color;
border-color: @main-color;
}
}
}
.cell {
display: flex;
align-items: center;
h5 { margin-bottom: 2em; }
.label {
flex: 0 0 25%;
color: #909399;
}
.content {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.selector {
width: 68px;
height: 32px;
color: #252D37;
background: #FAFBFC;
text-align: center;
line-height: 32px;
}
}
}
.colStyle {
position: relative;
padding: 10px 16px;
border-color: transparent;
background-color: #FAFBFC;
cursor: pointer;
.cell {
h5 { margin-bottom: 0px; }
.label,
.content {
flex: 1;
}
}
:global {
.ant-checkbox-wrapper {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
.ant-checkbox {
display: none;
}
}
.ant-checkbox-wrapper-checked {
border: 1px solid @main-color;
}
}
}
.shopLevelConfigChecked {
border: 1px solid;
border-color: @main-color;
box-sizing: border-box;
}
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/partakeUserLayout/index.tsx 0 → 100644
View file @ 34d4cc4b
import React, { useCallback, useState, useEffect } from 'react';
import { Form, Checkbox, Row, Col, Image } from 'antd';
import CardLayout from '../card';
import cx from 'classnames';
import style from './index.less';
import { PublicApi } from '@/services/api';
import { isEmpty } from '@/components/NiceForm/components/AntUpload/shared';
import IMG_LEVEL1 from '@/assets/imgs/level1.png';
import IMG_LEVEL2 from '@/assets/imgs/level2.png';
import IMG_LEVEL3 from '@/assets/imgs/level3.png';
import IMG_LEVEL4 from '@/assets/imgs/level4.png';
const PIC_MAP = {
1: IMG_LEVEL1,
2: IMG_LEVEL2,
3: IMG_LEVEL3,
4: IMG_LEVEL4,
};
interface PartakeUserLayoutProps {
/** 返回等级 */
onGetLevel?: (e: any) => void,
/** 回显数据 */
onSetLevel?: any[],
/** 会员类型 */
setMemberType?: any[]
}
const PartakeUserLayout: React.FC<PartakeUserLayoutProps> = (props: any) => {
const { onGetLevel, onSetLevel, setMemberType } = props
const [allUser, setAllUser] = useState<any[]>([]);
const [user, setUser] = useState<Number[]>([]);
const [levelConfig, setLevelConfig] = useState<any[]>([]);
const suitableMemberTypeList = useCallback(async () => {
await PublicApi.getMarketingCouponSuitableMemberTypeList().then(res => {
if (res.code !== 1000) {
return
}
setAllUser(res.data)
})
}, [])
const handleChange = (e) => {
setUser(e.filter(_item => _item !== 1 && _item !== 2))
}
useEffect(() => {
suitableMemberTypeList()
}, [])
useEffect(() => {
if (!isEmpty(user)) {
PublicApi.getMemberManageMarketingSuitableLevelConfigPage({ levelConfigIds: '', roleIds: '', memberTypes: '', current: '1', pageSize: '999' }).then(res => {
if (res.code !== 1000) {
return
}
setLevelConfig(res.data.data)
})
}
}, [user])
const handleLevelConfig = (e) => {
const data = [...levelConfig]
onGetLevel(data.filter(item => e.includes(item.id)))
}
return (
<CardLayout
id="partakeUserLayout"
title="参与用户"
weight
>
<Form.Item
name="allUser"
label="适用新老会员"
tooltip="当天平台审核通过的平台会员为新会员，非当天审核通过的平台会员为老会员"
rules={[{ required: true, message: '请选择适用新老会员' }]}
className={style.rulesLayout}
>
<Checkbox.Group onChange={handleChange}>
{allUser.map(item => (
<Checkbox key={`allUser${item.value}`} value={item.value}>{item.name}</Checkbox>
))}
</Checkbox.Group>
</Form.Item>
{!isEmpty(user) && (
<Form.Item
name="memberLevelList"
>
<Checkbox.Group onChange={handleLevelConfig}>
<Row gutter={[24, 24]}>
{levelConfig.map(item => (
<Col span={12} key={item.id}>
<div className={style.colStyle}>
<Row>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>会员类型: </h5>
<h5 className={style.content}>{item.memberTypeName}</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>会员角色: </h5>
<h5 className={style.content}>{item.roleName}</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>等级类型: </h5>
<h5 className={style.content}>{item.levelTypeName}</h5>
</div>
</Col>
<Col span={6}>
<div className={style.cell}>
<h5 className={style.label}>等级标签: </h5>
<h5 className={style.content}><Image width={56} height={16} preview={false} src={PIC_MAP[item.level]} /></h5>
</div>
</Col>
</Row>
<Checkbox value={item.id} />
</div>
</Col>
))}
</Row>
</Checkbox.Group>
</Form.Item>
)}
</CardLayout>
)
}
export default PartakeUserLayout;
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/rulesLayout/index.less 0 → 100644
View file @ 34d4cc4b
.rulesLayout {
:global {
.ant-radio-button-wrapper {
min-width: 80px;
max-width: 80px;
text-align: center;
padding-left: 0px;
padding-right: 0px;
}
.ant-checkbox {
display: none;
}
.ant-checkbox-wrapper {
min-width: 80px;
max-width: 80px;
text-align: center;
color: rgba(0, 0, 0, 0.85);
font-weight: 400;
padding: 5.6px 0px;
border: 1px solid transparent;
// box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
border-color: #d9d9d9;
justify-content: center;
}
.ant-checkbox-wrapper-checked {
color: @main-color;
border-color: @main-color;
}
.inputWidth {
width: 160px;
}
}
}
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/shopLayout/index.less 0 → 100644
View file @ 34d4cc4b
.shopListLayout {
display: flex;
align-items: center;
border: 1px solid transparent;
border-color: #5C626A;
padding: 8px 16px;
cursor: pointer;
.shopListLogo {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
}
.shopListName {
color: #5C626A;
margin-left: 10px;
}
}
.shopListLayoutChecked {
border-color: @main-color;
.shopListName {
color: @main-color;
}
}
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/shopLayout/index.tsx 0 → 100644
View file @ 34d4cc4b
import React, { useEffect, useState } from 'react';
import { Form, Row, Col, Image } from 'antd';
import cx from 'classnames';
import CardLayout from '../card';
import style from './index.less';
import { isEmpty } from 'lodash';
import { PublicApi } from '@/services/api';
type ShopItem = {
describe?: string
environment?: number,
id?: number,
isDefault?: number,
logoUrl?: string,
name?: string
state?: number,
type?: number,
url?: string,
checked?: boolean,
}
interface shopListProps {
/** 返回选择商城 */
onGetShopList?: (e: any) => void,
/** 回显数据 */
onSetShopList?: any[],
}
const ShopLayout: React.FC<shopListProps> = (props: any) => {
const { onGetShopList, onSetShopList } = props;
const [mallList, setMallList] = useState<ShopItem[]>([]);
useEffect(() => {
PublicApi.getManageShopFindByMemberType().then(res => {
if (res.code !== 1000) {
return
}
setMallList(res.data)
})
}, [])
const handleShopList = (index) => {
let mall = [...mallList]
const newData = mall.map((_item, _i) => {
if (_i === index) {
return {
..._item,
checked: !_item.checked
}
}
return _item;
})
setMallList(newData)
onGetShopList(newData)
}
useEffect(() => {
if (!isEmpty(onSetShopList)) {
mallList.forEach(item => {
onSetShopList.filter(_item => _item.shopId === item.id).forEach(v => {
if (v.shopId === item.id) {
item.checked = true
}
})
})
setMallList([...mallList]);
onGetShopList([...mallList])
}
console.log(onSetShopList, mallList)
}, [onSetShopList])
return (
<CardLayout
id="shopLayout"
title="适用商城"
weight
>
<Form.Item
name="shopList"
>
<Row gutter={[16, 16]}>
{mallList.map((item: ShopItem, index: number ) => (
<Col span={6} key={item.id}>
<div className={cx(style.shopListLayout, item.checked && style.shopListLayoutChecked)} onClick={() => handleShopList(index)}>
<div className={style.shopListLogo}>
<Image width={32} height={32} src={item.logoUrl} preview={false} />
</div>
<span className={style.shopListName}>{item.name}</span>
</div>
</Col>
))}
</Row>
</Form.Item>
</CardLayout>
)
}
export default ShopLayout
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/constants/index.ts 0 → 100644
View file @ 34d4cc4b
/**
* 活动类型
*/
type activityType = {
lable: string,
value: number,
}[]
export const ACTIVITYTYPEARRAY: activityType = [
{ lable: '特价促销', value: 1 },
{ lable: '直降促销', value: 2 },
{ lable: '折价促销', value: 3 },
{ lable: '满量促销', value: 4 },
{ lable: '满额促销', value: 5 },
{ lable: '赠送促销', value: 6 },
{ lable: '多件促销', value: 7 },
{ lable: '组合促销', value: 8 },
{ lable: '拼团', value: 9 },
{ lable: '抽奖', value: 10 },
{ lable: '砍价', value: 11 },
{ lable: '秒杀', value: 12 },
{ lable: '换购', value: 13 },
{ lable: '预售', value: 14 },
{ lable: '套餐', value: 15 },
{ lable: '试用', value: 16 },
]
/** 叠加活动类型 */
export const OVERLAYACTIVITYTYPE = (int) => {
switch (Number(int)) {
case 1:
case 2:
case 3:
return [
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '赠送促销', value: 6 },
{ label: '换购', value: 13 },
]
case 4:
case 5:
return [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '赠送促销', value: 6 },
{ label: '换购', value:13 },
]
case 6:
return [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '多件促销', value: 7 },
{ label: '组合促销', value: 8 },
{ label: '换购', value: 13 },
]
case 7:
case 8:
return [
{ label: '赠送促销', value: 6 },
{ label: '换购', value: 13 },
]
case 13:
return [
{ label: '特价促销', value: 1 },
{ label: '直降促销', value: 2 },
{ label: '折扣促销', value: 3 },
{ label: '满量促销', value: 4 },
{ label: '满额促销', value: 5 },
{ label: '多件促销', value: 6 },
{ label: '组合促销', value: 7 },
{ label: '换购', value: 8 },
]
}
}
/** 超限规则 */
export const OVERRUNRULETYPE = (int) => {
switch (Number(int)) {
case 1:
case 2:
case 3:
case 8:
case 12:
return [
{ label: '原价购买', value: 1 },
{ label: '不可购买', value: 2 },
]
case 4:
case 5:
case 6:
case 7:
case 13:
return [
{ label: '不可购买', value: 2 },
{ label: '按个人限购最高级享受优惠', value: 1 },
]
}
}
/** 满量/满额/赠送促销类型 */
export const PROMOTIONTYPE = (int) => {
switch (Number(int)) {
case 4:
return {
name: "type",
tooltip: "满量减为订单满足要求购买的数量后，订单金额减去设定的优惠金额，满量折则为订单金额乘以设定的折扣",
label: "满量促销类型",
message: "请选择满量促销类型",
radio: [
{ label: '满量减', value: 1 },
{ label: '满量折', value: 2 },
]
}
case 5:
return {
name: "type",
tooltip: "满额减为订单满足要求购买的总额后，订单金额减去设定的优惠金额，满额折则为订单金额乘以设定的折扣",
label: "满额促销类型",
message: "请选择满额促销类型",
radio: [
{ label: '满额减', value: 1 },
{ label: '满额折', value: 2 },
]
}
case 6:
return {
name: "giveType",
tooltip: "满额赠为订单满足要求购买的金额后，赠送商品或优惠劵，买商品赠为购买活动商品时，赠送商品或优惠劵",
label: "赠送促销类型",
message: "请选择赠送促销类型",
radio: [
{ label: '满额赠', value: 1 },
{ label: '买商品赠', value: 2 },
]
}
}
}
/** 满量/额减 */
export const LADDERBOLIST = (int, type=1) => {
switch (Number(int)) {
case 4:
return {
tooltip: type === 1 ? '优惠金额为最后订单总额减去的优惠金额' : '折扣为最后订单总额的折扣，输入数字，如85折，输入85，9折输入90',
label: `满量${type ===1 ? '减' : '折'}`,
message: `请新增满量${type ===1 ? '减' : '折'}`,
addon: '数量' ,
addonAfter: type === 1 ? '减' : '打',
addonBefore: type === 1 ? '元' : '折',
}
case 5:
return {
tooltip: type === 1 ? '优惠金额为最后订单总额减去的优惠金额' : '折扣为最后订单总额的折扣，输入数字，如85折，输入85，9折输入90',
label: `满额${type ===1 ? '减' : '折'}`,
message: `请新增满额${type ===1 ? '减' : '折'}`,
addon: '元' ,
addonAfter: type === 1 ? '减' : '打',
addonBefore: type === 1 ? '元' : '折',
}
case 7:
return {
tooltip: '折扣为最后订单总额的折扣，输入数字，如85折，输入85，9折输入90',
label: '优惠规则',
addon: '件',
message: '请新增优惠规则',
addonAfter: '打',
addonBefore: '折',
}
}
}
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