Merge branch 'master' of https://gitee.com/red-deng-deng/marketing-system

2021-10-29 14:58:54 +08:00 · 2021-10-29 14:58:54 +08:00 · 702b08ac74
parent f126c2d838 e700e1a417
commit 702b08ac74
11 changed files with 300 additions and 145 deletions
--- a/src/App.css
+++ b/src/App.css
@ -1,65 +0,0 @@
-.start{
-  width: 100%;
-  height: 100%;
-  background: #F5F6F7;
-  overflow-y: scroll;
-}
-.start .header{
-  width: 100%;
-  height: 60px;
-  color: inherit;
-  margin-bottom: 0;
-  background: #fff;
-  border-bottom: 1px solid #e6e8ed;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  z-index: 999;
-  padding: 0 20px;
-}
-.start .log{
-  margin-right: 80px;
-  font-size: 20px;
-  font-weight: 500;
-  color: #313233;
-  min-width: 200px;
-}
-.start .log img{
-  margin-right: 15px;
-}
-.start .log span{
-  padding-left: 15px;
-  border-left: 1px solid #ccc;
-}
-.nav{
-  height: 100%;
-  min-width: 300px;
-  flex: 1;
-  
-}
-.nav a{
-  color: #333;
-  text-decoration: none;
-  margin-right: 30px;
-  height: 100%;
-  font-size: 16px;
-  line-height: 60px;
-  box-sizing: border-box;
-}
-.nav a.active{
-  font-weight: 500;
-  color: #296bef;
-  border-bottom: 3px solid #296bef;
-}
-.start .helpcenter{
-  color: #666;
-  font-weight: bold;
-}
-.start .mainbody{
-  width: 100%;
-  flex: 1;
-  margin-top: 75px;
-/*  padding: 0 10%; */
-  box-sizing: border-box;
-}
--- a/src/App.js
+++ b/src/App.js
@ -3,11 +3,10 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import  "./App.css"
 import "./assets/comm.css"
-
+import {Redirect} from "react-router-dom";
 import { Avatar, Badge } from 'zent';
-import extension from './pages/extension/main/main';
-import overview from './pages/overview/main/main';
-import newplan from './pages/newplan/main';
+import login from './pages/login/login';
+import home from './pages/home/home';
 export default class App extends Component {
  state = {
   pathname:'',
@ -20,34 +19,13 @@ export default class App extends Component {

  render() {
    return (
-        <Router>
-          <div className="start dflexajc">           
-              <div className="header dflexaj boxs">
-              {/* logo */}
-              <div className="log dflexaj">
-              <img src="https://qzonestyle.gdtimg.com/gdt_ui_proj/dist/phoenix/images/ams-logo.svg?max_age=31536000" alt=""/>
-              <span>营销系统管理平台</span>
-              </div>
-               {/* 顶部导航 */}
-                 <div className="nav dflexa"> 
-                 <Link to="/overview"  className={this.state.pathname=='/overview'?'active':''} onClick={()=>this.setState({pathname:'/overview'})}>概览</Link>
-                 <Link to="/extension"  className={this.state.pathname=='/extension'?'active':''} onClick={()=>this.setState({pathname:'/extension'})}>推广</Link>
-                 </div>
-                 {/* 用户头像信息 */}
-                 <div className="userImg dflexa">
-                 <Link to="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link>
-                 <Avatar style={{ backgroundColor: '#296bef' }}>Red</Avatar>
-                 </div>
-              </div>   
-              <aside className="mainbody" >
-                <div>
-                <Route exact path="/extension" component={extension} />  
-                <Route exact path="/overview" component={overview} /> 
-                <Route exact path="/newplan" component={newplan} />  
-                </div>
-               
-                </aside> 
-          </div>
+        <Router>        
+          <Route  path="/login" component={login} />  
+          <Route  path="/home" component={home} />  
+          <Route path="/" render={
+      ()=> (
+      <Redirect to="/login"/>)}>
+    </Route>
      </Router>
    );
  }
--- a/src/components/input/main.js
+++ b/src/components/input/main.js
@ -31,7 +31,7 @@ import classNames from 'classnames'
      alignment:'left',
      countShow:true,
      required:false,
-      labelWidth:'140px',
+      labelWidth:'120px',
      icon:''
 	}
 	
--- a/src/components/input/main.less
+++ b/src/components/input/main.less
@ -5,10 +5,10 @@
  align-items: center;
  margin-bottom: 30px;
  .label{
-    margin-right: 30px;
+    margin-right: 58px;
    .warning{
      font-size: 16px;
-      color: #f00;
+      color: #d42f15;
      font-weight: bold;
      margin-right: 6px;
    }
@ -21,7 +21,7 @@
 .keep-ipt{
  border: 0;
  outline: none;
-  padding-left: 10px;
+  padding-left: 12px;
  padding-right: 44px;
  box-sizing: border-box;
  transition: all .3s;
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@ -0,0 +1,55 @@
+import ReactDOM from 'react-dom';
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import  "./home.less"
+import "../../assets/comm.css"
+
+import { Avatar, Badge } from 'zent';
+import extension from '../extension/main/main';
+import overview from '../overview/main/main';
+import newplan from '../newplan/main';
+export default class App extends Component {
+  state = {
+   pathname:'',
+  };
+  componentWillMount(){
+      const pathname=window.location.href.lastIndexOf('\/');
+      const pathnamestr=window.location.href.substr(pathname);
+      this.setState({pathname:`${pathnamestr}`});
+  }
+
+  render() {
+    return (
+        <Router>
+          <div className="start dflexajc">           
+              <div className="header dflexaj boxs">
+              {/* logo */}
+              <div className="log dflexaj">
+              <img src="https://qzonestyle.gdtimg.com/gdt_ui_proj/dist/phoenix/images/ams-logo.svg?max_age=31536000" alt=""/>
+              <span>营销系统管理平台</span>
+              </div>
+               {/* 顶部导航 */}
+                 <div className="nav dflexa"> 
+                 <Link to="/overview"  className={this.state.pathname=='/overview'?'active':''} onClick={()=>this.setState({pathname:'/overview'})}>概览</Link>
+                 <Link to="/extension"  className={this.state.pathname=='/extension'?'active':''} onClick={()=>this.setState({pathname:'/extension'})}>推广</Link>
+                 </div>
+                 {/* 用户头像信息 */}
+                 <div className="userImg dflexa">
+                 <Link to="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link>
+                 <Avatar style={{ backgroundColor: '#296bef' }}>Red</Avatar>
+                 </div>
+              </div>   
+              <aside className="mainbody" >
+                <div>
+                <Route  path="/extension" component={extension} />  
+                <Route  path="/overview" component={overview} /> 
+                <Route  path="/newplan" component={newplan} />  
+                </div>
+               
+                </aside> 
+          </div>
+      </Router>
+    );
+  }
+}
+
--- a/src/pages/home/home.less
+++ b/src/pages/home/home.less
@ -0,0 +1,65 @@
+.start{
+  width: 100%;
+  height: 100%;
+  background: #F5F6F7;
+  overflow-y: scroll;
+}
+.start .header{
+  width: 100%;
+  height: 60px;
+  color: inherit;
+  margin-bottom: 0;
+  background: #fff;
+  border-bottom: 1px solid #e6e8ed;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+  padding: 0 20px;
+}
+.start .log{
+  margin-right: 80px;
+  font-size: 20px;
+  font-weight: 500;
+  color: #313233;
+  min-width: 200px;
+}
+.start .log img{
+  margin-right: 15px;
+}
+.start .log span{
+  padding-left: 15px;
+  border-left: 1px solid #ccc;
+}
+.nav{
+  height: 100%;
+  min-width: 300px;
+  flex: 1;
+  
+}
+.nav a{
+  color: #333;
+  text-decoration: none;
+  margin-right: 30px;
+  height: 100%;
+  font-size: 16px;
+  line-height: 60px;
+  box-sizing: border-box;
+}
+.nav a.active{
+  font-weight: 500;
+  color: #296bef;
+  border-bottom: 3px solid #296bef;
+}
+.start .helpcenter{
+  color: #666;
+  font-weight: bold;
+}
+.start .mainbody{
+  width: 100%;
+  flex: 1;
+  margin-top: 75px;
+/*  padding: 0 10%; */
+  box-sizing: border-box;
+}
--- a/src/pages/login/login.css
+++ b/src/pages/login/login.css
@ -0,0 +1,5 @@
+.loginPage{
+  width: 100%;
+  height: 100%;
+  background: #f9f9f9;
+}
--- a/src/pages/login/login.js
+++ b/src/pages/login/login.js
@ -0,0 +1,28 @@
+import ReactDOM from 'react-dom';
+import React, { Component } from 'react';
+import "./login.css"
+import "../../assets/comm.css"
+import Button from "../../components/button/main"
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+export default class App extends Component {
+  state = {
+   pathname:'',
+  };
+  componentWillMount(){
+      const pathname=window.location.href.lastIndexOf('\/');
+      const pathnamestr=window.location.href.substr(pathname);
+      this.setState({pathname:`${pathnamestr}`});
+  }
+  tohome(){
+    this.props.history.push('/home');
+  }
+  render() {
+    return (
+       <div  className="loginPage">
+          登陆页面
+          <Button color={"#125bed"} text={"登录"} size={"xm"} onClick={this.tohome.bind(this)}></Button>
+       </div>
+    );
+  }
+}
+
--- a/src/pages/newplan/main.less
+++ b/src/pages/newplan/main.less
@ -15,5 +15,6 @@
    border: 1px solid #e6e8ed;
    border-radius: 8px;
    padding: 24px;
+    margin-bottom: 30px;
  }
 }
--- a/src/pages/newplan/planform/planform.js
+++ b/src/pages/newplan/planform/planform.js
@ -1,53 +1,137 @@
 import React from "react"
 import "./planform.less"
 import Ipt from "../../../components/input/main"
-import { Radio } from 'zent';
-
 import {
-  FormInputField,
  Form,
  FormStrategy,
+  Radio,
+  Checkbox,
+  Notify,
  Validators,
-  Pop,
-  Input,
-  Icon,
-  ButtonDirective,
+  FormNumberInputField,
+  FormUploadField,
+  FormImageUploadField,
+  Button,
+  FormRadioGroupField,
+  FormInputField,
+  RadioGroup,
+  FormSingleUploadField,
+  RadioButton
 } from 'zent';
-const RadioGroup = Radio.Group;
-const RadioButton = Radio.Button;
-export default class Test extends React.Component{
-  constructor(){
-    super()
-    this.state={
-      goods:'',
-      value: 'apple',
-      rules: {
-        input123Rule: {
-          required: true,
-          message: '请输入名称',
-        },
-        goods:{
-          required: true,
-          message: '请输入商品名称',
-        }
-      }
-    }
+function equalsPassword(value, ctx) {
+  if (value !== ctx.getSectionValue('password').password) {
+    return {
+      name: 'passwordEqual',
+      message: '两次填写的密码不一致',
+    };
  }
-  onChange = e => {
-    this.setState({ value: e.target.value });
-  };
-  render(){
-    console.log(this.state);
-    return (
-      <div>
-        <Ipt  required={true} placeholder={"请输入名称"}    onInput={this.handleInput123Change}  rule={this.state.rules.input123Rule} maxLength={10} height={'36px'} width={'600px'}  value={12} labelText={'计划任务名称'} alignment={'right'}/>
-        <Ipt  required={true} placeholder={"请输入商品名称"}    rule={this.state.rules.goods} maxLength={10} height={'36px'} width={'600px'}  labelText={'商品名称'} alignment={'right'} value={this.state.goods}/>
-        <Ipt   placeholder={"请输入商品的名称,多个商品名称可以逗号隔开"}  icon={'search'}    height={'36px'}   labelText={'表格搜索使用'} alignment={'right'} value={this.state.goods} countShow={false}/>
-        <RadioGroup onChange={this.onChange} value={this.state.value}>
+  return null;
+}
+
+function idLength(value) {
+  if (value.length !== 10 && value.length !== 15) {
+    return {
+      name: 'idLength',
+      message: '证件号码是10位或者15位数字',
+    };
+  }
+}
+function Test(){
+  const form = Form.useForm(FormStrategy.View);
+  const onSubmit = React.useCallback(form => {
+    const value = form.getValue();
+    console.log(value)
+  }, []);
+  return (
+    <Form
+      form={form}
+      layout="horizontal"
+      scrollToError
+      onSubmit={onSubmit}
+    >
+      {/* <FormInputField
+        name="name"
+        label="昵称:"
+        required
+        helpDesc="正则校验"
+        validators={[
+          Validators.required('请填写昵称'),
+          Validators.pattern(/^[a-zA-Z]+$/, '昵称只能是字母'),
+        ]}
+      /> */}
+     <Ipt  required={true} placeholder={"请输入名称"}    maxLength={10} height={'36px'} width={'520px'}  value={12} labelText={'计划任务名称:'} alignment={'right'}/>
+      <FormInputField
+        name="password"
+        label="密码:"
+        required
+        helpDesc="非空校验"
+        validators={[Validators.required('请填写密码')]}
+        props={{
+          type: 'password',
+        }}
+      />
+      <FormInputField
+        name="remark"
+        label="备注:"
+        required
+        helpDesc="文本输入"
+        props={{ type: 'textarea', showCount: true, maxCharacterCount: 10 }}
+        validators={[Validators.required('请输入备注')]}
+      />
+      <FormRadioGroupField
+        name="sex"
+        label="投放方式:"
+        required
+        validators={[Validators.required('请选择投放方式')]}
+      >
        <RadioButton value="banana">标准投放</RadioButton>
+        <RadioButton value="bansana">加速投放</RadioButton>
        <RadioButton value="tomato">加速投放</RadioButton>
-      </RadioGroup>
+      </FormRadioGroupField>
+      <FormRadioGroupField
+        name="12新的"
+        label="计算日预算:"
+        required
+        validators={[Validators.required('请选择预算方式')]}
+      >
+        <RadioButton value="12">不限</RadioButton>
+        <RadioButton value="23">指定日预算</RadioButton>
+      </FormRadioGroupField>
+      <FormSingleUploadField
+        name="singleFile"
+        label="单文件上传:"
+        props={{
+          tips: '文件大小不超过 2M',
+          maxSize: 1024 * 1024 * 2,
+        }}
+        validators={[Validators.required('请上传文件')]}
+      />
+      <FormUploadField
+        name="upload"
+        label="文件上传:"
+        props={{
+          tips: '单个文件不超过 2M',
+          maxAmount: 9,
+          maxSize: 1024 * 1024 * 2,
+        }}
+        validators={[Validators.minLength(1, '请上传文件')]}
+      />
+      <FormImageUploadField
+        name="imageUpload"
+        label="图片文件上传:"
+        props={{
+          tips: '单个文件不超过 2M',
+          maxAmount: 9,
+          maxSize: 1024 * 1024 * 2,
+        }}
+        validators={[Validators.minLength(1, '请上传图片')]}
+      />
+      <div className="zent-form-actions">
+        <Button type="primary" htmlType="submit">
+          提交
+        </Button>
      </div>
-    );
-  }
-}
+    </Form>
+  );
+}
+export default Test;
--- a/src/pages/newplan/planform/planform.less
+++ b/src/pages/newplan/planform/planform.less
@ -8,15 +8,19 @@
  margin-right: 50px!important;
  }
  .zent-radio-button[data-zv="9.11.0"]:first-child {
-    border-radius: 8px 0  0 8px !important;
+    border-radius: 6px 0  0 6px !important;
  }
  .zent-radio-button[data-zv="9.11.0"]:last-child {
-    border-radius: 0 8px 8px 0!important;
+    border-radius: 0 6px 6px 0!important;
  }
  .zent-radio-button[data-zv="9.11.0"] {
-    width: 150px!important;
+    width: 120px!important;
    line-height: 25px!important;
  }
  .zent-radio-button--checked[data-zv="9.11.0"]{
    font-weight: bold!important;
+  }
+
+.zent-radio-button--checked[data-zv="9.11.0"]{
+  background: #FAFCFF!important;
  }