2023-03-09

king

2023-03-09 2d5d60d5f165546299d1b42004b1469cb6d2b3ef

 src/pc/bgcontroller/index.jsx

@@ -1,14 +1,15 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Select } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'
import { Form, Select, Input } from 'antd'
import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, BgColorsOutlined, ColumnWidthOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const StyleInput = asyncComponent(() => import('@/menu/stylecontroller/styleInput'))
const SysColorSketch = asyncComponent(() => import('@/menu/stylecontroller/syscolorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const { Option } = Select

@@ -19,11 +20,12 @@
  }

  state = {
    background: '',
    backgroundColor: '',
    backgroundImage: '',
    backgroundSize: '',
    backgroundRepeat: '',
    backgroundPositon: '',
    backgroundPosition: '',
    opacity: '',
  }

@@ -38,11 +40,12 @@
    }

    this.setState({
      background: config.style.background || '',
      backgroundColor: config.style.backgroundColor,
      backgroundImage: bgImg,
      backgroundSize: config.style.backgroundSize || '100%',
      backgroundRepeat: config.style.backgroundRepeat || 'repeat',
      backgroundPositon: config.style.backgroundPositon || 'center'
      backgroundPosition: config.style.backgroundPosition || 'center'
    })
  }

@@ -114,18 +117,87 @@

  backgroundPositonChange = (val) => {
    this.setState({
      backgroundPositon: val
      backgroundPosition: val
    })

    let config = fromJS(this.props.config).toJS()
    config.style.backgroundPositon = val
    config.style.backgroundPosition = val

    this.props.updateConfig(config)
  }

  changeBackground = (val) => {
    this.setState({
      background: val,
    })

    if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
      let config = fromJS(this.props.config).toJS()
      config.style.background = val

      delete config.style.backgroundColor
      delete config.style.backgroundImage

      if (!val) {
        delete config.style.background
      }

      this.setState({
        backgroundImage: '',
        backgroundColor: ''
      })

      this.props.updateConfig(config)
    }
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeShadowColor = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.shadowColor = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeShadowBlur = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.shadowBlur = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeHShadow = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.hShadow = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  /**
   * @description 修改阴影颜色 ，颜色控件
   */
  changeVShadow = (val) => {
    let config = fromJS(this.props.config).toJS()
    config.style.vShadow = val
    config.style.boxShadow = `${config.style.hShadow || '0px'} ${config.style.vShadow || '0px'} ${config.style.shadowBlur || '0px'} ${config.style.shadowColor || 'transparent'}`

    this.props.updateConfig(config)
  }

  render () {
    const { config } = this.props
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPositon } = this.state
    const { config, type } = this.props
    const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition, background } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -140,15 +212,22 @@
    return (
      <div className="pc-style-controller">
        <Form {...formItemLayout}>
          <Form.Item
          {/* <Form.Item
            colon={false}
            label="宽度"
            className="normal-view"
          >
            <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="背景色">
          </Form.Item> */}
          <Form.Item className="color-control" style={{marginBottom: '0px'}} colon={false} label="背景色">
            <ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
          </Form.Item>
          <Form.Item colon={false} label="系统色">
            <SysColorSketch onChange={this.changeBackgroundColor} />
          </Form.Item>
          {window.develop === true ? <Form.Item colon={false} label="颜色">
            <Input value={background} onChange={(e) => this.changeBackground(e.target.value)} />
          </Form.Item> : null}
          <Form.Item colon={false} label="背景图">
            <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
          </Form.Item>
@@ -157,6 +236,8 @@
              <Option value="100%">100%</Option>
              <Option value="100% 100%">100% 100%</Option>
              <Option value="auto 100%">auto 100%</Option>
              <Option value="100% auto">100% auto</Option>
              <Option value="auto">auto</Option>
              <Option value="contain">contain</Option>
              <Option value="cover">cover</Option>
            </Select>
@@ -170,61 +251,87 @@
            </Select>
          </Form.Item>
          <Form.Item colon={false} label="位置">
            <Select defaultValue={backgroundPositon} onChange={this.backgroundPositonChange}>
            <Select defaultValue={backgroundPosition} onChange={this.backgroundPositonChange}>
              <Option value="center">center</Option>
              <Option value="top">top</Option>
              <Option value="bottom">bottom</Option>
            </Select>
          </Form.Item>
          <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
          {type === 'mob_popview' ? <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>阴影</p> : null}
          {type === 'mob_popview' ? <>
            <Form.Item colon={false} label={<BgColorsOutlined title="阴影颜色"/>}>
              <ColorSketch value={config.style.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
            </Form.Item>
            <Form.Item colon={false} label={<BgColorsOutlined title="系统色"/>}>
              <SysColorSketch onChange={this.changeShadowColor} />
            </Form.Item>
            <Form.Item colon={false} label={<ColumnWidthOutlined title="模糊距离"/>}>
              <StyleInput defaultValue={config.style.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/>
            </Form.Item>
            <Form.Item colon={false} label={<ArrowRightOutlined title="水平位置"/>}>
              <StyleInput defaultValue={config.style.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/>
            </Form.Item>
            <Form.Item colon={false} label={<ArrowDownOutlined title="垂直位置"/>}>
              <StyleInput defaultValue={config.style.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/>
            </Form.Item>
          </> : null}
          <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>内边距</p>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowUpOutlined title="上边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
            <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowDownOutlined title="下边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
            <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowLeftOutlined title="左边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
            <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowRightOutlined title="右边距"/>}
          >
            <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/>
            <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>
          <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>外边距</p>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowUpOutlined title="上边距"/>}
          >
            <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
            <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowDownOutlined title="下边距"/>}
          >
            <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
            <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowLeftOutlined title="左边距"/>}
          >
            <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
            <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/>
          </Form.Item>
          <Form.Item
            colon={false}
            className="normal-view"
            label={<ArrowRightOutlined title="右边距"/>}
          >
            <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
            <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', '%', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/>
          </Form.Item>
        </Form>
      </div>