From 9dbcd50af71c0bf29b1de4f20281d0a77ca5288b Mon Sep 17 00:00:00 2001 From: zhangds Date: Thu, 25 Aug 2022 15:18:29 +0800 Subject: [PATCH] =?UTF-8?q?1)=20=E5=A2=9E=E5=8A=A0=E4=BC=98=E6=83=A0?= =?UTF-8?q?=E5=88=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 22 ++++ src/pages/coupon/list/index.jsx | 193 +++++++++++++++++++++++++++++++ src/pages/coupon/list/style.less | 0 src/router/index.js | 6 + 4 files changed, 221 insertions(+) create mode 100644 src/pages/coupon/list/index.jsx create mode 100644 src/pages/coupon/list/style.less diff --git a/src/App.css b/src/App.css index 94ab14df..8cbea8a8 100644 --- a/src/App.css +++ b/src/App.css @@ -189,3 +189,25 @@ background-color: rgba(0, 0, 0, 0.5); 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; +} diff --git a/src/pages/coupon/list/index.jsx b/src/pages/coupon/list/index.jsx new file mode 100644 index 00000000..3a24e087 --- /dev/null +++ b/src/pages/coupon/list/index.jsx @@ -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 = ( + onChangeCombinedDate(data)} + /> + ) + return ( +
+ tabChange(data)} + width={130} + slot={dateEl}> +
+ + 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'} + /> +
+ onPageChange(e)} + emptyText={ + state.lodgingTable + ? '抱歉，暂无相关数据记录' + : '查询 请输入【分销商】或【计划名称】或【key】进行查询' + } + countChange={(e) => onCountChange(e)} + checkChange={(data) => selectionFun(data)} + ComponentHandler={(com, rowData) => { + if (com == 'dates') { + return ( + + {rowData.begin_time} 至 {rowData.end_time} + + ) + } + }} + /> +
+ ) +} + +export default UseCouponList diff --git a/src/pages/coupon/list/style.less b/src/pages/coupon/list/style.less new file mode 100644 index 00000000..e69de29b diff --git a/src/router/index.js b/src/router/index.js index dd1dd464..23c5cc80 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -39,6 +39,7 @@ import MyTempMouldAdd from '@/pages/exchangepage/template/main.js' import MyExChangeTemplate from '@/pages/exchangepage/mytemplate/main.js' import CopyCode from '@/pages/exchangecode/copyCode/index' import ExchangeCodeAdds from '@/pages/exchangecode/exchangecodeAdd' +import CouponList from '@/pages/coupon/list' /* 基础路由 */ const router = [ @@ -246,6 +247,11 @@ const router = [ path: '/home/exchangecode-exchangecodeAdd', component: ExchangeCodeAdds, meta: { exact: true } + }, + { + path: '/home/coupon-list', + component: CouponList, + meta: { exact: true } } ]