278 lines
13 KiB
TypeScript
278 lines
13 KiB
TypeScript
// 活跃会员统计
|
|
import { connect, CurrentUser } from "umi";
|
|
import { ConnectState } from "@/models/connect";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Button, Col, Drawer, FormInstance, Row, Spin } from "antd";
|
|
import ProForm, { ProFormDateRangePicker, ProFormSelect } from "@ant-design/pro-form";
|
|
import './RegistrationStatistics.less'
|
|
import { handeGetMembershipCount } from "../service";
|
|
import session from "@/utils/session";
|
|
import ProTable, { ActionType } from "@ant-design/pro-table";
|
|
import MemberInfor from "../memberInfor";
|
|
import moment from 'moment'
|
|
|
|
const RegistrationStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
|
const { currentUser } = props
|
|
const formRef = useRef<FormInstance>();
|
|
const actionRef = useRef<ActionType>();
|
|
|
|
// 选择的tab
|
|
const [selectPageTab, setSelectPageTab] = useState<any>(1)
|
|
// 会员类型数据
|
|
const [membershipType, setMembershipType] = useState<any>()
|
|
// 会员数量
|
|
const [memberShipTotal, setMemberShipTotal] = useState<number>(1)
|
|
// 会员等级数据
|
|
const [revenueList, setRevenueList] = useState<any>()
|
|
// 显示详情抽屉
|
|
const [showDetail, setShowDetail] = useState<boolean>(false)
|
|
const [currentRow, setCurrentRow] = useState<any>()
|
|
// 抽屉显示的标题
|
|
const [currentDrawerTitle, setCurrentDrawerTitle] = useState<string>()
|
|
// 1 是 会员类型 2是 会员等级
|
|
const [searchType, setSearchType] = useState<any>()
|
|
// 对应的枚举类型
|
|
const [valueType, setValueType] = useState<any>()
|
|
// 显示加载效果
|
|
const [showLoading, setShowLoading] = useState<boolean>(false)
|
|
|
|
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
|
|
let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList')
|
|
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
|
|
let MEMBERSHIPTYPEYNList = session.get('MEMBERSHIPTYPEYNList')
|
|
|
|
|
|
const handleGetData = async (formData?: any) => {
|
|
console.log('formDataformDataformData', formData);
|
|
let [start, end] = ['', '']
|
|
if (formData && formData?.searchTime) {
|
|
[start, end] = formData.searchTime
|
|
} else {
|
|
[start, end] = [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
|
|
}
|
|
|
|
const req: any = {
|
|
CalcType: 5, // 注册途径
|
|
OwnerUnitId: currentUser?.OwnerUnitId,
|
|
ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
|
|
StartDate: start ? start : "",
|
|
EndDate: end ? end : "",
|
|
MembershipType: formData?.MembershipType === 1 ? "" : formData?.MembershipType || "",
|
|
// MembershipLevel: formData?.MembershipLevel || "",
|
|
MembershipLevel: "",
|
|
}
|
|
|
|
console.log('reqreqreq', req);
|
|
|
|
|
|
setShowLoading(true)
|
|
const data = await handeGetMembershipCount(req)
|
|
setShowLoading(false)
|
|
console.log('datadatadatadata', data);
|
|
|
|
setMembershipType(data.List)
|
|
setMemberShipTotal(data.OtherData)
|
|
}
|
|
|
|
// 点击事件
|
|
const handleShowTableData = async (type: number, memberType: any) => {
|
|
// type 1 的话是 会员类型 2 的话是 会员等级 memberType 对应的枚举值
|
|
setCurrentDrawerTitle(`${type === 1 ? '会员类型' : type === 2 ? '会员等级' : ''}【${type === 1 ? MEMBERSHIPTYPEYNObj && memberType ? MEMBERSHIPTYPEYNObj[memberType] : '' : type === 2 ? MEMBERSHIPLEVELYNObj && memberType ? MEMBERSHIPLEVELYNObj[memberType] : '' : ''}】`)
|
|
setSearchType(type)
|
|
setValueType(memberType)
|
|
setShowDetail(true)
|
|
}
|
|
|
|
useEffect(() => {
|
|
handleGetData()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="ActiveMemberStatisticsMain">
|
|
{
|
|
showLoading ?
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
background: 'rgba(0,0,0,0.1)',
|
|
position: 'absolute',
|
|
zIndex: 5,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '15px 20px 10px',
|
|
background: '#fff',
|
|
borderRadius: '8px',
|
|
width: '200px'
|
|
}}>
|
|
<Spin />
|
|
<span style={{ marginLeft: '5px' }}>加载中...</span>
|
|
</div>
|
|
</div> : ''
|
|
}
|
|
|
|
<div className="ActiveMemberStatisticsTop">
|
|
{/* <div className="ActiveMemberStatisticsTitleBox">
|
|
<div className={selectPageTab === 1 ? 'ActiveMemberStatisticsTitle ActiveMemberStatisticsTitleSelect' : 'ActiveMemberStatisticsTitle'} onClick={() => {
|
|
setSelectPageTab(1)
|
|
}}>会员类型</div>
|
|
<div style={{ marginLeft: '48px' }} className={selectPageTab === 2 ? 'ActiveMemberStatisticsTitle ActiveMemberStatisticsTitleSelect' : 'ActiveMemberStatisticsTitle'} onClick={() => {
|
|
setSelectPageTab(2)
|
|
}}>会员等级</div>
|
|
</div> */}
|
|
<ProForm
|
|
layout={'horizontal'}
|
|
formRef={formRef}
|
|
submitter={false}
|
|
onFinish={async (values: any) => {
|
|
console.log('valuesvaluesvaluesvalues', values);
|
|
handleGetData(values)
|
|
}}
|
|
>
|
|
<Row gutter={16} style={{ marginTop: "16px" }}>
|
|
<Col span={6}>
|
|
<ProFormDateRangePicker
|
|
label={"查询时间"}
|
|
name={"searchTime"}
|
|
// initialValue={[moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]}
|
|
initialValue={[moment().startOf('M'), moment()]}
|
|
fieldProps={{
|
|
ranges: {
|
|
"本月": [moment().startOf('M'), moment()],
|
|
"上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
|
|
"近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
|
|
"近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={6}>
|
|
<ProFormSelect
|
|
label={"会员类型"}
|
|
name={"MembershipType"}
|
|
options={MEMBERSHIPTYPEYNList}
|
|
/>
|
|
|
|
</Col>
|
|
{/* <Col span={6}>
|
|
<ProFormSelect
|
|
label={"会员等级"}
|
|
name={"MembershipLevel"}
|
|
options={MEMBERSHIPLEVELYNList}
|
|
/>
|
|
</Col> */}
|
|
<Col span={6}>
|
|
|
|
<ProFormSelect
|
|
label={"是否排除测试会员"}
|
|
name={"ExcludeTest"}
|
|
options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
|
|
initialValue={1}
|
|
/>
|
|
|
|
</Col>
|
|
{/* <Col span={18}></Col> */}
|
|
<Col span={6}>
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
<Button style={{ marginRight: '8px' }} onClick={() => {
|
|
formRef.current?.resetFields()
|
|
}}>重置</Button>
|
|
<Button type={"primary"} onClick={() => {
|
|
formRef.current?.submit()
|
|
}}>查询</Button>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</ProForm>
|
|
</div>
|
|
|
|
|
|
<div className="ActiveMemberStatisticsBottom">
|
|
{
|
|
membershipType && membershipType.length > 0 ?
|
|
<>
|
|
<div className="ActiveMemberStatisticsTitleBox">
|
|
<div className="ActiveMemberStatisticsTitle">拉新活动</div>
|
|
</div>
|
|
|
|
<div className="ActiveMemberStatisticsContentBox">
|
|
<div className="ActiveMemberStatisticsItemOther">
|
|
{
|
|
membershipType.map((item: any) => {
|
|
return <div className="ActiveMemberStatisticsOtherItem">
|
|
<div className="otherItemTitle">{item.label || ''}</div>
|
|
<div className="otherItemValue">{item.value}<span className="otherItemValueUnit">人</span></div>
|
|
<div className="addLabel">占比</div>
|
|
<div className="otherItemAddBox">
|
|
<span className="addValue">{item.key ? item.key + '%' : ""}</span>
|
|
</div>
|
|
</div>
|
|
})
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
: ""
|
|
}
|
|
|
|
</div>
|
|
|
|
<div className="ActiveMemberStatisticsBottom">
|
|
{
|
|
revenueList && revenueList.length > 0 ?
|
|
<>
|
|
<div className="ActiveMemberStatisticsTitleBox">
|
|
<div className="ActiveMemberStatisticsTitle">营销活动</div>
|
|
</div>
|
|
|
|
<div className="ActiveMemberStatisticsContentBox">
|
|
<div className="ActiveMemberStatisticsItemOther">
|
|
{
|
|
revenueList.map((item: any) => {
|
|
return <div className="ActiveMemberStatisticsOtherItem">
|
|
<div className="otherItemTitle">{item.label}</div>
|
|
<div className="otherItemValue">{item.value}<span className="otherItemValueUnit">人</span></div>
|
|
<div className="addLabel">占比</div>
|
|
<div className="otherItemAddBox">
|
|
<span className="addValue">{item.key ? item.key + '%' : ""}</span>
|
|
</div>
|
|
</div>
|
|
})
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
: ""
|
|
}
|
|
|
|
</div>
|
|
<Drawer
|
|
width={'80%'}
|
|
title={currentDrawerTitle || ""}
|
|
visible={showDetail}
|
|
destroyOnClose
|
|
closable={false}
|
|
onClose={() => {
|
|
setSearchType(null)
|
|
setValueType(null)
|
|
setShowDetail(false)
|
|
}}
|
|
>
|
|
<MemberInfor searchType={searchType} valueType={valueType} isComponent={true} />
|
|
</Drawer>
|
|
</div >
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(RegistrationStatistics); |