2021-03-09

king

2021-03-09 5c509746d48f326157542a784fd6d645e2dc9ae6

 src/pc/bgcontroller/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form } from 'antd'
import { Form, Icon } from 'antd'

import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -9,6 +9,7 @@
import './index.scss'

const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const StyleInput = asyncComponent(() => import('@/menu/stylecontroller/styleInput'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))

class MobController extends Component {
@@ -57,6 +58,17 @@
    this.props.updateConfig(config)
  }

  /**
   * @description 修改背景颜色 ，颜色控件
   */
  changePadding = (val, type) => {
    let config = fromJS(this.props.config).toJS()

    config.style[type] = val
    this.props.updateConfig(config)
  }


  imgChange = (val) => {
    this.setState({
      backgroundImage: val
@@ -73,27 +85,84 @@
  }

  render () {
    const { config } = this.props
    const { backgroundColor, backgroundImage } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
        sm: { span: 19 }
      }
    }

    return (
      <div className="menu-background-controller">
      <div className="pc-style-controller">
        <Form {...formItemLayout}>
          <Form.Item className="color-control" colon={false} label="颜色">
          <Form.Item
            colon={false}
            label="宽度"
          >
            <StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/>
          </Form.Item>
          <Form.Item className="color-control" colon={false} label="背景色">
            <ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
          </Form.Item>
          <Form.Item colon={false} label="图片">
          <Form.Item colon={false} label="背景图">
            <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
          </Form.Item>
          <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
          <Form.Item
            colon={false}
            label={<Icon title="上边距" type="arrow-up"/>}
          >
            <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="下边距" type="arrow-down"/>}
          >
            <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="左边距" type="arrow-left"/>}
          >
            <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="右边距" type="arrow-right"/>}
          >
            <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/>
          </Form.Item>
          <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>外边距</p>
          <Form.Item
            colon={false}
            label={<Icon title="上边距" type="arrow-up"/>}
          >
            <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="下边距" type="arrow-down"/>}
          >
            <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="左边距" type="arrow-left"/>}
          >
            <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            label={<Icon title="右边距" type="arrow-right"/>}
          >
            <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
          </Form.Item>
        </Form>
      </div>
    )