2020-08-20

king

2020-08-20 3683e1475e8d74f690172a468518d88d91a69ccc

 src/mob/components/login/mob-login-1/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { InputItem, Icon, Checkbox, List, Button } from 'antd-mobile'
import { createForm } from 'rc-form'
// import { createForm } from 'rc-form'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -29,9 +29,9 @@
      type: 'login',
      subtype: 'mob-login-1',
      box: { uuid: Utils.getuuid(), eleType: 'box', style: {color: '#ffffff', backgroundImage: 'linear-gradient(#378DBE, #46C29E, #48A9D6)'}},
      logo: { uuid: Utils.getuuid(), eleType: 'img', content: mklogo, style: {} },
      logo: { uuid: Utils.getuuid(), eleType: 'img', content: mklogo, style: {marginTop: '17vh', marginBottom: '15px'} },
      title: { uuid: Utils.getuuid(), eleType: 'text', content: '明科商业智能开放平台', style: {fontSize: '20px', fontWeight: 'bold', color: '#ffffff', textAlign: 'center', marginTop: '15px', marginBottom: '30px'}},
      login: { uuid: Utils.getuuid(), eleType: 'button', content: '登录', style: {fontSize: '18px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, borderRadius: '25px'}},
      login: { uuid: Utils.getuuid(), eleType: 'button', content: '登录', style: {fontSize: '18px', color: '#ffffff', textAlign: 'center', lineHeight: 2.4, borderRadius: '25px', marginBottom: '15vh'}},
      copyright: { uuid: Utils.getuuid(), eleType: 'textarea', content: 'Copyright©2017  所有相关版权归  北京明科普华信息技术有限公司', style: {fontSize: '12px', color: '#ffffff', textAlign: 'center'} }
    }
  }
@@ -107,7 +107,7 @@
      ...fromJS(card.login.style).toJS(),
      componentId: card.uuid,
      uuid: card.login.uuid,
      items: ['font', 'background', 'border']
      items: ['font', 'background', 'border', 'margin']
    }
    this.props.triggerEdit(element)
  }
@@ -135,7 +135,7 @@

  render () {
    const { card, editId } = this.props
    const { getFieldProps } = this.props.form
    // const { getFieldProps } = this.props.form
    const { rember } = this.state

    if (!card.box) return null
@@ -159,60 +159,62 @@
      let percent = parseInt(titleStyle.marginBottom)
      titleStyle.marginBottom = `calc(${(percent / 100) * 615}px)`
    }
    
    let loginStyle = fromJS(card.login.style).toJS()
    if (loginStyle.marginTop && /vh$/ig.test(loginStyle.marginTop)) {
      let percent = parseInt(loginStyle.marginTop)
      loginStyle.marginTop = `calc(${(percent / 100) * 615}px)`
    }
    if (loginStyle.marginBottom && /vh$/ig.test(loginStyle.marginBottom)) {
      let percent = parseInt(loginStyle.marginBottom)
      loginStyle.marginBottom = `calc(${(percent / 100) * 615}px)`
    }

    return (
      <div className="mob-login-1" onClick={this.editBox} style={card.box.style}>
        <div className="mob-login-body">
          {card.logo ? <div className={'logo ' + (editId === card.logo.uuid ? 'editing' : '')} style={logoStyle} onClick={this.editLogo}>
            <ContentUpdate element={card.logo} updateContent={(ele) => this.updateContent({...card, logo: ele})}/>
            <img src={card.logo.content} alt=""/>
          </div> : null}
          {card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} style={titleStyle} onClick={this.editTitle}>
            <ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
            {card.title.content}
          </div> : null}
          <InputItem
            placeholder="UserName"
            prefixListCls="mk-login-item am-list"
            {...getFieldProps('userName', {
              initialValue: 'admin',
            })}
            disabled={true}
          >
            <Icon type="check-circle-o" />
          </InputItem>
          <InputItem
            placeholder="Password"
            prefixListCls="mk-login-item am-list"
            {...getFieldProps('password', {
              initialValue: '123456',
            })}
            type={'password'}
            disabled={true}
          >
            <Icon type="check-circle" />
          </InputItem>
          <div className="other-setting">
            <CheckboxItem checked={rember} onChange={this.onChange}>
              <span onClick={this.onChange}>记住密码</span>
            </CheckboxItem>
            {/* <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss">
              <List.Item>{lang}</List.Item>
            </Picker> */}
            <List.Item className="lang">中文简体</List.Item>
            <div className="clear-both"></div>
          </div>
          <Button 
            type="primary"
            className={'login ' + (editId === card.login.uuid ? 'editing' : '')} 
            onDoubleClick={() => this.props.doubleClickCard(card.login)}
            style={card.login.style}
            onClick={this.editLogin}
          >
            <ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
            {card.login.content}
          </Button>
        {card.logo ? <div className={'logo ' + (editId === card.logo.uuid ? 'editing' : '')} style={logoStyle} onClick={this.editLogo}>
          <ContentUpdate element={card.logo} updateContent={(ele) => this.updateContent({...card, logo: ele})}/>
          <img src={card.logo.content} alt=""/>
        </div> : null}
        {card.title ? <div className={'plat-name ' + (editId === card.title.uuid ? 'editing' : '')} style={titleStyle} onClick={this.editTitle}>
          <ContentUpdate element={card.title} updateContent={(ele) => this.updateContent({...card, title: ele})}/>
          {card.title.content}
        </div> : null}
        <InputItem
          placeholder={"UserName"}
          prefixListCls="mk-login-item am-list"
          disabled={true}
        >
          <Icon type="check-circle-o" />
        </InputItem>
        <InputItem
          placeholder="Password"
          prefixListCls="mk-login-item am-list"
          type={'password'}
          disabled={true}
        >
          <Icon type="check-circle" />
        </InputItem>
        <div className="other-setting">
          <CheckboxItem checked={rember} onChange={this.onChange}>
            <span onClick={this.onChange}>记住密码</span>
          </CheckboxItem>
          {/* <Picker data={langs} value={lang} cols={1} onChange={this.onChangeLang} className="forss">
            <List.Item>{lang}</List.Item>
          </Picker> */}
          <List.Item className="lang">中文简体</List.Item>
          <div className="clear-both"></div>
        </div>
        <Button 
          type="primary"
          className={'login ' + (editId === card.login.uuid ? 'editing' : '')} 
          onDoubleClick={() => this.props.doubleClickCard(card.login)}
          style={loginStyle}
          onClick={this.editLogin}
        >
          <ContentUpdate element={card.login} deletable={false} updateContent={(ele) => this.updateContent({...card, login: ele})}/>
          {card.login.content}
        </Button>
        {card.copyright ? <div className={'company-msg ' + (editId === card.copyright.uuid ? 'editing' : '')} style={card.copyright.style} onClick={this.editMsg}>
          <ContentUpdate element={card.copyright} updateContent={(ele) => this.updateContent({...card, copyright: ele})}/>
          {card.copyright.content}
@@ -222,4 +224,5 @@
  }
}

export default createForm()(MobLogin)
// export default createForm()(MobLogin)
export default MobLogin