qm-bus/src/MarketingToolbars/index.js

千米公有云业务组件库

import React from 'react'
import { Link } from 'react-router-dom'
import { QMIcon } from 'qm-ui'
import { QMFetch } from 'qm-ux'
import { mallData, distributionData, cloudBossData, cloudOperationData } from './data'
import './index.less'

export default class MarketingToolbars extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      smsTotal: 0,
      express: {},
      commodity: {},
    }
  }

  componentDidMount() {
    QMFetch({
      host: 'v_app_api',
      url: 'api/boss/order/alertInfo',
      method: 'POST',
    }).then(res => {
      let data = res.data
      if (data) {
        this.setState({
          smsTotal: data.smsTotal,
        })
      }
    })
    this.getService()
  }

  getService = () => {
    QMFetch({
      host: 'v_app_api',
      url: 'api/user/function/queryThirdPartyFunctions',
    }).then(res => {
      let data = res.data
      if (data) {
        this.setState({
          express: data['FW_GOODS-10001139'],
          commodity: data['FW_GOODS-10001136'],
        })
      }
    })
  }

  render() {
    let { smsTotal, express = {}, commodity = {} } = this.state
    let reactContext = window.getReactContext ? window.getReactContext() || {} : {}
    let sceneBname = reactContext.storeInfo ? reactContext.storeInfo.sceneBname : ''
    let role = reactContext.role ? reactContext.role.bname : ''
    let functions = reactContext.functions ? reactContext.functions : {}
    let data = {},
      show = false
    // 如果不是商场，分销，小店场景，直接返回
    if (
      sceneBname == 'onlineMall' ||
      sceneBname == 'onlineDistribution' ||
      sceneBname == 'cloudShop'
    ) {
      show = true
    }
    switch (sceneBname) {
      case 'onlineMall':
        data = mallData
        break
      case 'onlineDistribution':
        data = distributionData
        break
      case 'cloudShop':
        if (role == 'boss') {
          data = cloudBossData
        } else if ((role = 'mallOperation')) {
          data = cloudOperationData
        }
        break
    }
    let dom = data.map(v => {
      let url = v.buyUrl
      switch (v.title) {
        case '短信推广':
          if (smsTotal > 100) {
            url = v.useUrl
          }
          break
        case express.sysfunName:
          if (express.status == 1 && this.getExpire(express.expiretime)) {
            url = v.useUrl
          }
          break
        case commodity.sysfunName:
          if (commodity.status == 1 && this.getExpire(commodity.expiretime)) {
            url = v.useUrl
          }
          break
        case functions.e_waybill.sysfunName:
          if (functions.e_waybill.status == 1 && this.getExpire(functions.e_waybill.expiretime)) {
            url = v.useUrl
          }
          break
      }
      return (
        <div className="mt-item">
          {url.indexOf('http') > -1 ? (
            <a href={url} data-gh-name={`营销工具条-${v.title}`}>
              <div className="icon">
                <QMIcon type={v.icon} />
              </div>
              <p className="title">{v.title}</p>
            </a>
          ) : (
            <Link to={url} data-gh-name={`营销工具条-${v.title}`}>
              <div className="icon">
                <QMIcon type={v.icon} />
              </div>
              <p className="title">{v.title}</p>
            </Link>
          )}
        </div>
      )
    })
    return show ? (
      <div className="panel-tepl pusht marketing-toolbars">
        <div className="boss-home-task-tips">
          <div className="penal-tepl-title clearfix">
            <h4 className="title pull-left lh20">营销工具</h4>
            <div className="pull-right">
              <Link to="/system/app/center" data-gh-name={`营销工具条-进入应用中心`}>
                查看更多&gt;&gt;
              </Link>
            </div>
          </div>
          <div className="mt">{dom}</div>
        </div>
      </div>
    ) : null
  }

  getExpire = expireTime => {
    if (expireTime && expireTime != null) {
      let time = new Date(expireTime.replace(/-/g, '/'))
      return time.getTime() > Date.now()
    } else {
      return false
    }
  }
}