Merge branch 'couponV1.5' of codeup.aliyun.com:5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

This commit is contained in:
wangsongsole 2022-08-25 15:18:57 +08:00
commit 67dace7e1c
4 changed files with 221 additions and 0 deletions

View File

@ -189,3 +189,25 @@
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 6; z-index: 6;
} }
.table-box-app{
width: 98%;
margin: 0 auto;
background-color: #fff;
padding-bottom: 24px;
border-left: 1px solid #E6E8ED;
border-bottom: 1px solid #E6E8ED;
border-right: 1px solid #E6E8ED;
border-radius: 6px;
box-sizing: border-box;
}
.query-box{
display: flex;
justify-content: space-between;
padding: 24px;
}
.table-box-app .tabpage{
border: none;
}

View File

@ -0,0 +1,193 @@
import React, { useRef, useEffect } from 'react'
import { useSetState } from 'ahooks'
import { Button, CombinedDateRangePicker } from 'zent'
import _ from 'lodash'
import TabPage from '@/components/tabPage/main.js'
import Ipt from '@/components/input/main'
import Grid from '@/components/gird/main.js'
import './style.less'
const tableColumn = [
{
title: 'table 示例 1',
name: 'key_code',
prop: 'key_code',
type: 'normal',
width: 'auto'
},
{
title: 'table 示例 2',
width: 'auto',
type: 'normal',
prop: 'title',
name: 'title'
}
]
const UseCouponList = () => {
const [state, setState] = useSetState({
tabList: [
{ title: '全部', index: 0 },
{ title: '创建中', index: -1 },
{ title: '未开始', index: 3 },
{ title: '审核中', index: 6 },
{ title: '审核驳回', index: 7 },
{ title: '进行中', index: 1 },
{ title: '暂停中', index: 2 },
{ title: '已结束', index: 4 },
{ title: '已作废', index: 5 }
],
tableData: [],
tableHeight: 500,
dataCount: 0,
lodgingTable: true,
combinedValue: [],
key_word: '',
begin_time: '',
end_time: '',
status: '',
page: 1,
limit: 10,
isQuery: false
})
const table_el = useRef(null)
/**
*
* @returns 返回参数
*/
const getParam = () => {
let param = {
key_word: state.key_word || null,
begin_time: state.begin_time || null,
end_time: state.end_time || null,
status: state.status !== 999 && state.status !== '' ? state.status : null,
page: state.page,
limit: state.limit
}
param = _.omitBy(
{
...param
},
(value) => {
return _.isNaN(value) || _.isNil(value)
}
)
return param
}
const getTable = () => {
let param = getParam()
console.log('调用接口 ...', param)
}
useEffect(() => {
getTable()
}, [state.isQuery])
const addCouponBtn = () => {}
const selectionFun = () => {}
const searchCallback = () => {
getTable()
}
const onPageChange = (data) => {
setState({ page: data, isQuery: !state.isQuery })
}
const onCountChange = (data) => {
setState({ limit: data, isQuery: !state.isQuery })
}
const onChangeCombinedDate = (data) => {
setState({ combinedValue: data })
if (data[0]) {
setState({
begin_time: data[0],
end_time: data[1],
isQuery: !state.isQuery
})
} else {
setState({
combinedValue: data,
begin_time: '',
end_time: '',
isQuery: !state.isQuery
})
}
}
const tabChange = (data) => {
setState({ page: 1, limit: 10, status: data, isQuery: !state.isQuery })
}
/**
* 日期
*/
const dateEl = (
<CombinedDateRangePicker
className='zent-datepicker-demo'
value={state.combinedValue}
showTime={{
format: 'HH:mm:ss',
defaultTime: ['00:00:00', '23:59:59']
}}
format='YYYY-MM-DD HH:mm:ss'
onChange={(data) => onChangeCombinedDate(data)}
/>
)
return (
<div className='table-box-app'>
<TabPage
tabs={state.tabList}
tabChange={(data) => tabChange(data)}
width={130}
slot={dateEl}></TabPage>
<div className='query-box'>
<Button type='primary' icon='plus' onClick={() => addCouponBtn()}>
新增优惠券
</Button>
<Ipt
onChange={(e) => setState({ key_word: e })}
value={state.key_word}
wordSearch={() => searchCallback()}
icon='search'
placeholder={'请输入xxxxx'}
countShow={false}
height={'36px'}
width={'260px'}
onClearItem={(e) =>
setState({ key_word: '', isQuery: !state.isQuery })
}
alignment={'left'}
/>
</div>
<Grid
spliteColor={'#fff'}
tableData={state.tableData}
Column={tableColumn}
countbarVisible={false}
maxheight={state.tableHeight}
isSwitch={false}
page={state.page}
ref={table_el}
dataCount={state.dataCount}
pageChange={(e) => onPageChange(e)}
emptyText={
state.lodgingTable
? '抱歉,暂无相关数据记录'
: '查询 请输入【分销商】或【计划名称】或【key】进行查询'
}
countChange={(e) => onCountChange(e)}
checkChange={(data) => selectionFun(data)}
ComponentHandler={(com, rowData) => {
if (com == 'dates') {
return (
<span>
{rowData.begin_time} {rowData.end_time}
</span>
)
}
}}
/>
</div>
)
}
export default UseCouponList

View File

View File

@ -39,6 +39,7 @@ import MyTempMouldAdd from '@/pages/exchangepage/template/main.js'
import MyExChangeTemplate from '@/pages/exchangepage/mytemplate/main.js' import MyExChangeTemplate from '@/pages/exchangepage/mytemplate/main.js'
import CopyCode from '@/pages/exchangecode/copyCode/index' import CopyCode from '@/pages/exchangecode/copyCode/index'
import ExchangeCodeAdds from '@/pages/exchangecode/exchangecodeAdd' import ExchangeCodeAdds from '@/pages/exchangecode/exchangecodeAdd'
import CouponList from '@/pages/coupon/list'
/* 基础路由 */ /* 基础路由 */
const router = [ const router = [
@ -246,6 +247,11 @@ const router = [
path: '/home/exchangecode-exchangecodeAdd', path: '/home/exchangecode-exchangecodeAdd',
component: ExchangeCodeAdds, component: ExchangeCodeAdds,
meta: { exact: true } meta: { exact: true }
},
{
path: '/home/coupon-list',
component: CouponList,
meta: { exact: true }
} }
] ]