2022-09-20

king

2022-09-20 44907fa0d9111bf5e345a2f7e8c1d887aa7174b7

2022-09-20

 public/options.json

@@ -1,21 +1,21 @@
{
  "appId": "201912040924165801464FF1788654BC5AC73",
  "appkey": "20191106103859640976D6E924E464D029CF0",
  "appId": "202108312122504607B107A83F55B40C98CCF",
  "appkey": "20210831212235413F287EC3BF489424496C8",
  "mainSystemApi": "http://sso.mk9h.cn/cloud/webapi/dostars",
  "systemType": "",
  "externalDatabase": "false",
  "lineColor": "",
  "filter": "false",
  "defaultApp": "mk",
  "defaultApp": "mkindustry",
  "defaultLang": "zh-CN",
  "WXAppID": "",
  "WXminiAppID": "",
  "debugger": "false",
  "debugger": false,
  "licenseKey": "",
  "probation": "",
  "transfer": "true",
  "transfer": "false",
  "keepPassword": "true",
  "platforms": ["H5", "wechat", "android", "ios", "wxMiniProgram"],
  "host": "http://qingqiumarket.cn",
  "service": "MKWMS/"
  "host": "http://demo.mk9h.cn",
  "service": "erp_new/"
}

 src/assets/mobimg/guanzhu.jpg

 src/mob/components/official/index.jsx

New file
@@ -0,0 +1,136 @@
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 zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { resetStyle } from '@/utils/utils-custom.js'
import asyncIconComponent from '@/utils/asyncIconComponent'
import getWrapForm from './options'
import MKEmitter from '@/utils/events.js'
import officialAccount from '@/assets/mobimg/guanzhu.jpg'
import './index.scss'

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

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

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    visible: false,      // 模态框控制
  }

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

    if (card.isNew) {
      let _card = {
        uuid: card.uuid,
        type: card.type,
        tabId: card.tabId || '',
        parentId: card.parentId || '',
        width: 24,
        name: card.name,
        subtype: card.subtype,
        wrap: { name: card.name, width: 24 },
        style: {marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'}
      }
      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'], 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="official-wrap" id={card.uuid} style={_style}>
        <div className="official-image" style={{backgroundImage: `url('${officialAccount}')`}}></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 OfficialComponent

 src/mob/components/official/index.scss

New file
@@ -0,0 +1,34 @@
.official-wrap {
  min-height: 84px;
  position: relative;
  background: #ffffff;

  >.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);
  }
  .official-image {
    background: #ffffff;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 84px;
  }
}

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

 src/mob/components/official/options.jsx

New file
@@ -0,0 +1,28 @@
/**
 * @description Wrap表单配置信息
 */
export default function (wrap) {
  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
    }
  ]

  return wrapForm
} 

 src/mob/mobshell/card.jsx

@@ -29,6 +29,7 @@
const CommonMenuBar = asyncComponent(() => import('@/mob/components/menubar/common-menubar'))
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 Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
  const originalIndex = findCard(id).index
@@ -132,6 +133,8 @@
      return (<Balcony card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'timeline') {
      return (<Timeline card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'officialAccount') {
      return (<OfficialAccount card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }


 src/mob/mobshell/index.jsx

@@ -119,6 +119,15 @@
        if (!menu.style.paddingTop) {
          style = {...menu.style, paddingTop: '50px'}
        }
      } else if (item.component === 'officialAccount') {
        if (cards.filter(card => card.type === 'officialAccount').length > 0) {
          notification.warning({
            top: 92,
            message: '关注组件不可重复添加！',
            duration: 5
          })
          return
        }
      }

      let name = ''
@@ -140,6 +149,7 @@
        menubar: '菜单栏',
        balcony: '浮动卡',
        timeline: '时间轴',
        officialAccount: '关注公众号',
        login: '登录'
      }
      let i = 1

 src/mob/modulesource/option.jsx

@@ -26,6 +26,7 @@
import MenuBar from '@/assets/mobimg/menubar.png'
import CommonBar from '@/assets/mobimg/commonbar.png'
import timeline from '@/assets/mobimg/timeline.png'
import officialAccount from '@/assets/mobimg/guanzhu.jpg'

// 组件配置信息
export const menuOptions = [
@@ -59,4 +60,5 @@
  { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 },
  { 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 },
]