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:
北海一刀 2021-11-15 11:55:24 +08:00
parent 6cbf962a11
commit 2bf5dd19aa
10 changed files with 227 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/form/main.js
View File

@ -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() {

1
src/components/subnav/main.js
View File

@ -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')

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

@ -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} />

58
src/pages/plan/add/add.js
View File

@ -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>
)

14
src/pages/plan/add/add.less
View File

@ -52,6 +52,11 @@
margin-left: 14px;
margin-bottom: 15px;
}
.child-title.active{
font-weight: bold;
}
.under-line{
width: 100%;
height: 1px;
@ -106,4 +111,11 @@
}
.step3{
margin-top: 20px;
}
}
.step-btn-group{
margin-top: 15px;
button{
width: 100px;
height: 36px;
}
}

4
src/pages/plan/add/step1.js
View File

@ -27,7 +27,9 @@ export default class acclist extends React.Component{
submit(){
this.refs.form1.validator()
}
onCancel(){
this.refs.form1.cancel()
}
render(){
//校验规则
const rules = {

3
src/pages/plan/add/step2.js
View File

@ -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 });

17
src/pages/plan/add/step3.js
View File

@ -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>
)

132
src/pages/system/customize/main.js Normal file
View File

@ -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>
)
}
}

4
src/pages/system/customize/main.less Normal file
View File

@ -0,0 +1,4 @@
.customize-card{
width: 98%;
margin: 0 auto;
}