2022-11-29

king

2022-11-29 667a1f7605cc8b438a0397dd8c3e467f37155254

2022-11-29

 src/assets/mobimg/share.jpg

 src/mob/components/sharecode/index.jsx

New file
@@ -0,0 +1,129 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { ToolOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons'

import { resetStyle } from '@/utils/utils-custom.js'
import asyncIconComponent from '@/utils/asyncIconComponent'
import getWrapForm from './options'
import MKEmitter from '@/utils/events.js'
import ShareImg from '@/assets/mobimg/share.jpg'
import './index.scss'

const NormalForm = asyncIconComponent(() => import('@/components/normalform'))

class ShareComponent extends Component {
  static propTpyes = {
    card: PropTypes.object,
    updateConfig: PropTypes.func,
    deletecomponent: PropTypes.func
  }

  state = {}

  /**
   * @description 搜索条件初始化
   */
  UNSAFE_componentWillMount () {
    const { card } = this.props

    if (card.isNew) {
      let _card = {
        uuid: card.uuid,
        type: card.type,
        width: 24,
        name: card.name,
        subtype: card.subtype,
        wrap: { name: card.name, width: 24 },
        style: {marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px', paddingLeft: '20px', paddingRight: '20px', paddingTop: '20px', paddingBottom: '20px'}
      }
      this.setState({
        card: _card
      })
      this.props.updateConfig(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  getStyle = (style) => {
    let _card = {...this.state.card, style}

    this.setState({
      card: _card
    })
    
    this.props.updateConfig(_card)
  }

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', ['border', 'padding', 'margin', 'shadow', 'clear'], card.style, this.getStyle)
  }

  /**
   * @description 卡片行外层信息更新（数据源，样式等）
   */
  updateComponent = (component) => {
    this.setState({
      card: component
    })

    component.width = component.wrap.width
    component.name = component.wrap.name

    this.props.updateConfig(component)
  }

  getWrapForms = () => {
    const { wrap } = this.state.card

    return getWrapForm(wrap)
  }

  updateWrap = (res) => {
    this.updateComponent({...this.state.card, wrap: res})
  }

  render() {
    const { card } = this.state
    let _style = resetStyle(card.style)

    return (
      <div className="share-wrap" id={card.uuid} style={_style}>
        <div className="share-image" style={{backgroundImage: `url('${ShareImg}')`}}></div>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(card.uuid)} />
          </div>
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }
}

export default ShareComponent

 src/mob/components/sharecode/index.scss

New file
@@ -0,0 +1,35 @@
.share-wrap {
  min-height: 84px;
  position: relative;
  background: #ffffff;
  overflow: hidden;

  >.anticon-tool {
    position: absolute;
    z-index: 3;
    font-size: 16px;
    right: 1px;
    top: 1px;
    cursor: pointer;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }
  .share-image {
    background: #ffffff;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 100%;
  }
}

.share-wrap::after {
  display: block;
  content: ' ';
  clear: both;
}
.share-wrap:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}

 src/mob/components/sharecode/options.jsx

New file
@@ -0,0 +1,58 @@
/**
 * @description Wrap表单配置信息
 */
export default function (wrap) {
  let menulist = sessionStorage.getItem('appMenus')

  if (menulist) {
    try {
      menulist = JSON.parse(menulist)
    } catch (e) {
      menulist = []
    }
  } else {
    menulist = []
  }

  const wrapForm = [
    {
      type: 'text',
      field: 'name',
      label: '组件名称',
      initval: wrap.name || '',
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      field: 'width',
      label: '宽度',
      initval: wrap.width || 24,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
      precision: 0,
      required: true
    },
    {
      type: 'select',
      field: 'linkMenuId',
      label: '关联菜单',
      initval: wrap.linkMenuId || '',
      tooltip: '可自定义分享菜单，空值时为当前页面。',
      required: false,
      options: menulist
    },
    {
      type: 'color',
      field: 'color',
      label: '颜色',
      initval: wrap.color || '#000000',
      tooltip: '小程序中无效。',
      isHex: true,
      required: true
    },
  ]

  return wrapForm
} 

 src/mob/mobshell/card.jsx

@@ -30,6 +30,7 @@
const Balcony = asyncComponent(() => import('@/menu/components/card/balcony'))
const Timeline = asyncComponent(() => import('@/menu/components/timeline/normal-timeline'))
const OfficialAccount = asyncComponent(() => import('@/mob/components/official'))
const ShareCode = asyncComponent(() => import('@/mob/components/sharecode'))
const Iframe = asyncComponent(() => import('@/menu/components/iframe'))

const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
@@ -142,6 +143,8 @@
      return (<OfficialAccount card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'iframe') {
      return (<Iframe card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'sharecode') {
      return (<ShareCode card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }


 src/mob/mobshell/index.jsx

@@ -142,6 +142,7 @@
        balcony: '浮动卡',
        timeline: '时间轴',
        officialAccount: '关注公众号',
        sharecode: '分享码',
        login: '登录'
      }
      let i = 1

 src/mob/modulesource/option.jsx

@@ -28,6 +28,7 @@
import timeline from '@/assets/mobimg/timeline.png'
import officialAccount from '@/assets/mobimg/guanzhu.jpg'
import Iframe from '@/assets/img/newpage.jpg'
import Share from '@/assets/mobimg/share.jpg'

// 组件配置信息
export const menuOptions = [
@@ -62,5 +63,6 @@
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24 },
  { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '注册/登录', width: 24 },
  { type: 'menu', url: officialAccount, component: 'officialAccount', subtype: 'officialAccount', title: '关注公众号（小程序中）', width: 24, adapter: 'mini' },
  { type: 'menu', url: Share, component: 'sharecode', subtype: 'sharecode', title: '分享码', width: 24 },
  { type: 'menu', url: Iframe, component: 'iframe', subtype: 'iframe', title: 'iframe', width: 24 }
]