HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

营销系统列表布局

This commit is contained in:
red-deng-deng 2021-11-08 11:43:01 +08:00
parent ea7cd6a9df
commit fdf6545067
8 changed files with 402 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -106,7 +106,7 @@
/* 表格弹出 */
.zent-menu[data-zv="9.11.0"]{
width: 100px!important;
width: 120px!important;
}
/* 表单必填*标置后 */

2
src/components/gird/main.js
View File

@ -171,6 +171,7 @@ export default class menu extends React.Component {
let selection = _.filter(this.state.tableData, (item) => {
return item.checked == true;
})
console.log('selection',selection);
this.props.checkChange(selection)
}
@ -184,7 +185,6 @@ export default class menu extends React.Component {
return item.checked == true;
})
this.props.checkChange(selection)
if (selection.length == this.state.tableData.length || selection.length == 0) {
this.setState({
indeterminate: false

169
src/pages/exchangecode/list/list.js Normal file
View File

@ -0,0 +1,169 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Button } from 'zent';
import "./list.less"
import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu } from 'zent';
import "../../../assets/comm.css"
import Ipt from "../../../components/input/main"
import Grid from "../../../components/gird/main.js"
import TabPage from "../../../components/tabPage/main.js"
import Filterbar from "../../../components/filterbar/main.js"
const PAGE_SIZE_OPTIONS = [10, 20, 30];
const Column = [
{
title: '编号',
name: 'name',
prop:'username',
className: 'name',
type: "normal",
width:'200px'
}, {
title: '分销商名称',
prop:'phone',
name: 'uv',
width:'200px',
type: "normal",
}, {
title: '登录账号',
name: 'stock1',
prop:'role',
type: "normal",
defaultText: 0,
width:'auto'
},
{
title: '余额',
name: 'stock2',
type: "normal",
prop:'post',
defaultText: 'PM',
width:'auto'
},
{
title: '累计消费',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
},
{
title: '授信额度',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
},
{
title: '状态',
width:'auto',
type: "slot",
prop:'name'
},
{
title: '操作',
prop: 'opearo',
name: 'opearo',
type: "slot",
width:'auto',
defaultText: 0,
},
];
export default class acclist extends React.Component{
constructor(props){
super(props)
this.state={
tabList:[{title:"全部"},{title:"创建中"},{title:"审核中"},{title:"生效中"},{title:"暂停中"},{title:"失效中"}],
distdata:[{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'}]
}
}
clickFn(){
this.props.history.push('/distributor-add');
sessionStorage.setItem('pathname2','/system/distributor-add')
let activerou=[{items:[
{
"path": "/system/distributor-list",
"name": "兑换码管理"
},
{
"path": "/system/distributor-add",
"name": "新建兑换码"
}
]}]
sessionStorage.setItem('breaknav',JSON.stringify(activerou));
}
render(){
const { current, pageSize } = this.state;
return(
<div id="dislist">
<TabPage tabs={this.state.tabList}>
<p className="distable dflexj">
<Button type="primary" icon="plus" onClick={this.clickFn.bind(this)}>新建兑换码</Button>
{/* <Button type="info">批量操作</Button> */}
<Ipt icon="search" placeholder={"请输入分销商名称、分销商编号、手机号、联系人进行搜索"} countShow={false} height={'36px'} width={'260px'} alignment={'left'}/>
</p>
<Filterbar></Filterbar>
<div>
<Grid
spliteColor={'#fff'}
tableData={this.state.distdata}
Column={Column}
countbarVisible={false}
isSwitch={false}
pageChange={(e)=>{
this.pageChange(e)
}}
checkChange ={(selection)=>{
console.log(selection)
}}
ComponentHandler={(com,rowData)=>{
if(com == "name")
{
return <Switch size="small" checked={true}></Switch>;
}
if(com == "opearo")
{
return <span>
<a href="https://youzan.com" className="grid-link" >编辑</a>
<a href="https://youzan.com" className="grid-link" >删除</a>
<Dropdown position={DropdownPosition.RightTop }>
<DropdownClickTrigger>
<div className="linkmore"> 更多 <Icon type={"down"} /> </div>
</DropdownClickTrigger>
<DropdownContent>
<Menu>
<MenuItem>手机预警</MenuItem>
<MenuItem>余额预警</MenuItem>
<MenuItem>授信设置</MenuItem>
<MenuItem>重置密码</MenuItem>
<MenuItem>授权日志</MenuItem>
</Menu>
</DropdownContent>
</Dropdown>
</span>
}
}}
/>
</div>
</TabPage>
</div>
)
}
}

0
src/pages/exchangecode/list/list.less Normal file
View File

24
src/pages/home/home.js
View File

@ -13,10 +13,12 @@ import newplan from '../newplan/main';
import distributor from '../distributor/main/main';
import exchangecode from '../exchangecode/main/main';
import exchangecodelist from '../exchangecode/list/list';
import exchangepage from '../exchangepage/main/main';
import order from '../order/main/main';
import plan from '../plan/main/main';
import planlist from '../plan/list/list';
import system from '../system/main/main';
import accountlist from '../system/account/list/list';
import accountadd from '../system/account/add/add';
@ -24,6 +26,7 @@ import rolelist from '../system/role/list/list';
import roleadd from '../system/role/add/add';
import station from '../system/station/main';
import menu from '../system/menu/main/main';
import distributorlist from '../distributor/list/list';
import distributoradd from '../distributor/add/add';
let timerstop=null;
@ -52,13 +55,21 @@ export default class App extends Component {
path:'/distributor-list'
},{
name:'营销计划管理',
childmenu:[],
path:'/plan'
childmenu:[{
group:'营销计划管理',
items:[{path:'/plan-list',name:'营销计划管理'}]
}],
path:'/plan-list'
},
{
name:'兑换码管理',
childmenu:[],
path:'/exchangecode'
childmenu:[
{
group:'兑换码管理',
items:[{path:'/exchangecode-list',name:'兑换码管理'}]
}
],
path:'/exchangecode-list'
},{
name:'兑换页管理',
childmenu:[],
@ -141,6 +152,8 @@ export default class App extends Component {
<Route path="/order" component={order} />
<Route path="/plan" exact={true} component={plan} />
<Route path="/plan-list" exact={true} component={planlist} />
<Route exact={true} path="/system" render={
()=> (
<Redirect to="/system/account-list"/>)}>
@ -152,7 +165,8 @@ export default class App extends Component {
<Route path="/system/station" exact={true} component={station} />
<Route path="/system/menu" exact={true} component={menu} />
<Route path="/distributor-list" exact={true} component={distributorlist} />
<Route path="/distributor-add" exact={true} component={distributoradd} />
<Route path="/distributor-add" exact={true} component={distributoradd} />
<Route path="/exchangecode-list" exact={true} component={exchangecodelist} />
</div>
</aside>
</div>

208
src/pages/plan/list/list.js Normal file
View File

@ -0,0 +1,208 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Button } from 'zent';
import "./list.less"
import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu } from 'zent';
import "../../../assets/comm.css"
import Ipt from "../../../components/input/main"
import Grid from "../../../components/gird/main.js"
import TabPage from "../../../components/tabPage/main.js"
import Filterbar from "../../../components/filterbar/main.js"
const PAGE_SIZE_OPTIONS = [10, 20, 30];
const Column = [
{
title: '营销计划名称',
name: 'name',
prop:'username',
className: 'name',
type: "normal",
width:'auto'
},{
title: '启用',
width:'auto',
type: "slot",
prop:'name'
}, {
title: '分销商',
prop:'phone',
name: 'uv',
width:'200px',
type: "normal",
}, {
title: '状态',
name: 'stock1',
prop:'role',
type: "normal",
defaultText: 0,
width:'auto'
},
{
title: '时间范围',
name: 'stock2',
type: "normal",
prop:'post',
defaultText: 'PM',
width:'auto'
},
{
title: '操作',
prop: 'opearo',
name: 'opearo',
type: "slot",
width:'auto',
defaultText: 0,
},
{
title: '发放key总数',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
},
{
title: '领取key总数',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
},
{
title: '已使用总数',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
}, {
title: '沉默总数',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
}, {
title: '领取总价(预估)',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
}, {
title: '已使用总价(预估)',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
},{
title: '沉默总价(预估)',
name: 'stock22',
type: "normal",
prop:'name',
defaultText: 0,
width:'auto',
type: "normal",
},
];
export default class acclist extends React.Component{
constructor(props){
super(props)
this.state={
tabList:[{title:"营销计划列表"}],
distdata:[{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'},{username:'红噔噔',phone:'13541778893',role:'管理员',name:'红噔噔',status:'红噔噔'
,time:'2021-00-04 13:48:45',post:'技术',opearo:'红噔噔'}]
}
}
clickFn(){
this.props.history.push('/plan-add');
sessionStorage.setItem('pathname2','/plan-add')
let activerou=[{items:[
{
"path": "/plan-list",
"name": "营销计划管理"
},
{
"path": "/plan-add",
"name": "新建营销计划"
}
]}]
sessionStorage.setItem('breaknav',JSON.stringify(activerou));
}
render(){
const { current, pageSize } = this.state;
return(
<div id="dislist">
<TabPage tabs={this.state.tabList}>
<p className="distable dflexj">
<Button type="primary" icon="plus" onClick={this.clickFn.bind(this)}>新建营销计划</Button>
{/* <Button type="info">批量操作</Button> */}
<Ipt icon="search" placeholder={"请输入分销商名称、分销商编号、手机号、联系人进行搜索"} countShow={false} height={'36px'} width={'260px'} alignment={'left'}/>
</p>
<Filterbar></Filterbar>
<div>
<Grid
spliteColor={'#fff'}
tableData={this.state.distdata}
Column={Column}
countbarVisible={false}
isSwitch={false}
pageChange={(e)=>{
this.pageChange(e)
}}
checkChange ={(selection)=>{
console.log(selection)
}}
ComponentHandler={(com,rowData)=>{
if(com == "name")
{
return <Switch size="small" checked={true}></Switch>;
}
if(com == "opearo")
{
return <span>
<a href="https://youzan.com" className="grid-link" >编辑</a>
<Dropdown position={DropdownPosition.RightTop }>
<DropdownClickTrigger>
<div className="linkmore"> 更多 <Icon type={"down"} /> </div>
</DropdownClickTrigger>
<DropdownContent>
<Menu>
<MenuItem>再次发送密码</MenuItem>
<MenuItem>再次发送key</MenuItem>
<MenuItem>修改接收邮箱</MenuItem>
<MenuItem>修改接收手机</MenuItem>
<MenuItem>日志</MenuItem>
</Menu>
</DropdownContent>
</Dropdown>
</span>
}
}}
/>
</div>
</TabPage>
</div>
)
}
}

0
src/pages/plan/list/list.less Normal file
View File

5
src/pages/system/account/list/modifypwd.js
View File

@ -60,8 +60,11 @@ function Modifypwd() {
label="新密码:"
required
helpDesc=''
validators={[
Validators.minLength(6, '用户名至少 5 个字'),
Validators.maxLength(16, '用户名最多 25 个字'),
]}
notice="6-16位字符,数字+字母组成，字母(区分大小写)"
validators={[setPassword]}
props={{
type: 'password',
}}