营销计划页面逻辑效果
This commit is contained in:
parent
6cbf962a11
commit
2bf5dd19aa
|
@ -269,7 +269,7 @@ export default class form extends React.Component {
|
|||
if (formItem_com.value == ""||formItem_com.value == undefined) {
|
||||
self.removeClass(item)
|
||||
self.isRequired(formItem_com.value, o.className, item, rules_item[j].message);
|
||||
break;
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
self.removeClass(item)
|
||||
|
@ -286,8 +286,9 @@ export default class form extends React.Component {
|
|||
self.removeClass(item)
|
||||
|
||||
} else {
|
||||
console.log("不满足")
|
||||
|
||||
self.isRequired(formItem_com.value, o.className, item, rules_item[j].message);
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -297,6 +298,9 @@ export default class form extends React.Component {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -52,7 +52,6 @@ export default class topNav extends React.Component{
|
|||
|
||||
}
|
||||
render(){
|
||||
console.log(this.props);
|
||||
let routeflag=sessionStorage.getItem('showflag')
|
||||
let breaknav=JSON.parse(sessionStorage.getItem('breaknav'))
|
||||
let pathnameBreak=sessionStorage.getItem('pathname2')
|
||||
|
|
|
@ -41,6 +41,9 @@ import accountadd from '../system/account/add/add';
|
|||
import rolelist from '../system/role/list/list';
|
||||
import roleadd from '../system/role/add/add';
|
||||
import station from '../system/station/main';
|
||||
import customize from '../system/customize/main.js'
|
||||
|
||||
|
||||
import menu from '../system/menu/main/main';
|
||||
|
||||
import distributorlist from '../distributor/list/list';
|
||||
|
@ -70,7 +73,7 @@ export default class App extends Component {
|
|||
childmenu:[{
|
||||
group:'账号管理',
|
||||
items:[{path:'/system/account-list',name:'账号管理'},{path:'/system/role-list',name:'角色管理'},
|
||||
{path:'/system/station',name:'岗位管理'},{path:'/system/menu',name:'菜单管理'}]
|
||||
{path:'/system/station',name:'岗位管理'},{path:'/system/menu',name:'菜单管理'},{path:'/system/customize',name:'定制化模板'}]
|
||||
}],
|
||||
path:'/system'
|
||||
},{
|
||||
|
@ -179,7 +182,6 @@ export default class App extends Component {
|
|||
/* 定时器 间隔1秒检测是否长时间未操作页面 */
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<div className="start dflexajc">
|
||||
|
@ -240,6 +242,7 @@ export default class App extends Component {
|
|||
<Route path="/system/role-list" exact={true} component={rolelist} />
|
||||
<Route path="/system/role-add" exact={true} component={roleadd} />
|
||||
<Route path="/system/station" exact={true} component={station} />
|
||||
<Route path="/system/customize" exact={true} component={customize} />
|
||||
<Route path="/system/menu" exact={true} component={menu} />
|
||||
<Route path="/distributor-list" exact={true} component={distributorlist} />
|
||||
<Route path="/distributor-add" exact={true} component={distributoradd} />
|
||||
|
|
|
@ -13,21 +13,26 @@ export default class add extends React.Component{
|
|||
step1_pagetitle:"新建计划",
|
||||
step2_pagetitle:"生成key",
|
||||
step3_pagetitle:"绑定卡券",
|
||||
curstep:1,
|
||||
menuList:[
|
||||
{id:1,title:"推广计划",child:[{step:1,title:"新建计划"}]},
|
||||
{id:2,title:"key",child:[{step:1,title:"生产key"},{step:2,title:"绑定卡券"}]},
|
||||
{id:3,title:"兑换页",child:[{step:1,title:"绑定兑换页"}]},
|
||||
{id:4,title:"活动",child:[{step:1,title:"选择活动"},{step:2,title:"活动内容"}]},
|
||||
{id:2,title:"key",child:[{step:1,title:"生产key"}]},
|
||||
{id:3,title:"兑换页",child:[{step:1,title:"绑定卡券"}]},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
submit(){
|
||||
this.refs.step1.submit();
|
||||
}
|
||||
cancel(){
|
||||
// this.refs.step1.onCancel();
|
||||
onCancel(){
|
||||
this.refs.step1.onCancel();
|
||||
}
|
||||
onNextStep(){
|
||||
let step = this.state.curstep + 1;
|
||||
this.setState({curstep:step})
|
||||
console.log(this.state.curstep)
|
||||
}
|
||||
|
||||
render(){
|
||||
|
@ -36,13 +41,13 @@ export default class add extends React.Component{
|
|||
<div className="plan-left">
|
||||
{
|
||||
this.state.menuList.map((item, index) => {
|
||||
return(
|
||||
<div className="box-item" key={index}>
|
||||
return(
|
||||
<div className="box-item" key={index}>
|
||||
<div className="main-title">{item.title}</div>
|
||||
{
|
||||
item.child.map((item2, index2) => {
|
||||
return(
|
||||
<div className="child-title" key={index2}>{item2.title} </div>
|
||||
return(
|
||||
<div key={index2} className= {this.state.curstep >= item.id ? "child-title active" :"child-title" } >{item2.title} </div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
@ -61,25 +66,50 @@ export default class add extends React.Component{
|
|||
<Card style={{ width:'100%' }} title={this.state.step1_pagetitle}>
|
||||
<Step1 ref="step1"/>
|
||||
</Card>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="plan-title">key</div>
|
||||
|
||||
{
|
||||
this.state.curstep >= 2 ? (
|
||||
<div id="step2" className="step2">
|
||||
<div className="plan-title">key</div>
|
||||
<Card style={{ width:'100%',height:"auto" }} title={this.state.step2_pagetitle}>
|
||||
<Step2 ref="step2"/>
|
||||
</Card>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
this.state.curstep >= 3 ? (
|
||||
<div id="step3" className="step3">
|
||||
<Card style={{ width:'100%',height:"auto" }} title={this.state.step3_pagetitle}>
|
||||
<Step3 ref="step3"/>
|
||||
</Card>
|
||||
</div>
|
||||
) : null
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
this.state.curstep == 3 ? (
|
||||
<div className="step-btn-group">
|
||||
<Button type="primary" onClick={()=>this.onNextStep()}>提交</Button>
|
||||
<Button type="normal" onClick={()=>this.onCancel()}>取消</Button>
|
||||
</div>
|
||||
) :(
|
||||
<div className="step-btn-group">
|
||||
<Button type="primary" onClick={()=>this.onNextStep()}>下一步</Button>
|
||||
<Button type="normal" onClick={()=>this.onCancel()}>取消</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -52,6 +52,11 @@
|
|||
margin-left: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.child-title.active{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.under-line{
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
@ -107,3 +112,10 @@
|
|||
.step3{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.step-btn-group{
|
||||
margin-top: 15px;
|
||||
button{
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,7 +27,9 @@ export default class acclist extends React.Component{
|
|||
submit(){
|
||||
this.refs.form1.validator()
|
||||
}
|
||||
|
||||
onCancel(){
|
||||
this.refs.form1.cancel()
|
||||
}
|
||||
render(){
|
||||
//校验规则
|
||||
const rules = {
|
||||
|
|
|
@ -28,6 +28,9 @@ export default class acclist extends React.Component{
|
|||
|
||||
submit(){
|
||||
this.refs.form1.validator()
|
||||
}
|
||||
onCancel(){
|
||||
this.refs.form1.cancel()
|
||||
}
|
||||
onCheckChange = (checkedList) => {
|
||||
this.setState({ checkedList });
|
||||
|
|
|
@ -27,6 +27,9 @@ export default class acclist extends React.Component{
|
|||
submit(){
|
||||
this.refs.form1.validator()
|
||||
}
|
||||
onCancel(){
|
||||
this.refs.form1.cancel()
|
||||
}
|
||||
|
||||
render(){
|
||||
//校验规则
|
||||
|
@ -89,6 +92,20 @@ export default class acclist extends React.Component{
|
|||
<RadioButton value="2">链接</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem labelname="选择商品列表样式" >
|
||||
<RadioGroup onChange={this.onChange} value={this.state.value}>
|
||||
<RadioButton value="1">列表</RadioButton>
|
||||
<RadioButton value="2">轮播</RadioButton>
|
||||
<RadioButton value="3">矩阵</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem labelname="域名选择" >
|
||||
<RadioGroup onChange={this.onChange} value={this.state.value}>
|
||||
<RadioButton value="1">大客户</RadioButton>
|
||||
<RadioButton value="2">普通商户</RadioButton>
|
||||
<RadioButton value="3">备用</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -0,0 +1,132 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
import React, { Component } from 'react';
|
||||
import { HashRouter as Router, Route, Link } from "react-router-dom";
|
||||
import "./main.less"
|
||||
import {Switch ,Icon ,Sweetalert, Notify,Dialog,Button,Card,Select,Upload,ImageUpload} from 'zent';
|
||||
import Ipt from "../../../components/input/main"
|
||||
import Form from "../../../components/form/main"
|
||||
import FormItem from "../../../components/form-item/main"
|
||||
|
||||
|
||||
const FILE_UPLOAD_STATUS = Upload.FILE_UPLOAD_STATUS;
|
||||
|
||||
const CustomItem = props => {
|
||||
const { item, i18n, onRetry, onDelete } = props;
|
||||
return (
|
||||
<div>
|
||||
<p>{item.name}</p>
|
||||
<p>进度:{item.percent}%</p>
|
||||
<div>
|
||||
{item.status === FILE_UPLOAD_STATUS.failed && <Button onClick={() => onRetry(item)}>重试</Button>}
|
||||
<Button type="primary" onClick={() => onDelete(item)}>删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
export default class acclist extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
model:{ //数据模型不可少
|
||||
name:"",
|
||||
zip:"",
|
||||
picurl:"",
|
||||
account:"",
|
||||
pagetype:""
|
||||
}
|
||||
}
|
||||
}
|
||||
onUploadChange(e){
|
||||
|
||||
}
|
||||
onUpload(e){
|
||||
|
||||
}
|
||||
onUploadError(){
|
||||
|
||||
}
|
||||
render(){
|
||||
//校验规则
|
||||
const rules = {
|
||||
name: [
|
||||
{ type: "required", message: "请输入标题"},
|
||||
],
|
||||
zip: [
|
||||
{ type: "required", message: "请选择文件"},
|
||||
],
|
||||
picurl: [
|
||||
{ type: "required", message: "请上传截图"},
|
||||
],
|
||||
}
|
||||
const options = [
|
||||
{
|
||||
key: '1',
|
||||
text: 'Option 1',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
text: 'Option 2',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
text: 'Option 3',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
text: `君不见,黄河之水天上来,奔流到海不复回`,
|
||||
},
|
||||
];
|
||||
return(
|
||||
<div class="customize">
|
||||
<Card type="nested" title="定制化模板" className="customize-card">
|
||||
<Form model={this.state.model} rules={rules} ref="form1">
|
||||
<FormItem labelname="标题" prop="name" >
|
||||
<Ipt onChange={(e)=>{
|
||||
let model2 = this.state.model;
|
||||
model2.name = e;
|
||||
this.setState({model:model2})
|
||||
}} value={this.state.model.name} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'520px'} alignment={'left'}/>
|
||||
</FormItem>
|
||||
<FormItem labelname="文件上传" prop="zip">
|
||||
<Upload
|
||||
multiple
|
||||
className="zent-upload-demo-pic"
|
||||
maxSize={2 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
tips="文件不超过 2M"
|
||||
onChange={this.onUploadChange}
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
customUploadItem={CustomItem}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="截图上传" prop="picurl">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
tips="建议尺寸 640*640,图片不超过 5M"
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="建议尺寸 640*640,图片不超过 5M"
|
||||
onChange={this.onUploadChange}
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="归属账号" prop="account" id="account">
|
||||
<Select options={options} placeholder="选择一项" width={515} value={this.state.model.account} />
|
||||
</FormItem>
|
||||
<FormItem labelname="页面类型" prop="pagetype" id="pagetype">
|
||||
<Select options={options} placeholder="选择一项" width={515} value={this.state.model.pagetype} />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
.customize-card{
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
}
|
Loading…
Reference in New Issue