2020-12-31

king

2020-12-31 b2135fbd0b72d60f392bb75f0356aa727654d2f9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import * as QrCode from 'qrcode.react'
 
import './index.scss'
 
class BarCode extends Component {
  static propTpyes = {
    card: PropTypes.object,  // 条码设置
    value: PropTypes.any,    // 条码值
  }
 
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps))
  }
 
  hexify = (color) => {
    let values = color.replace(/rgba?\(/, '').replace(/\)/, '').replace(/[\s+]/g, '').split(',')
    let a = parseFloat(values[3] || 1)
    let r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255)
    let g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255)
    let b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
 
    return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
  }
 
  render() {
    const { value, card } = this.props
    let color = card.color
    
    if (/rgb/ig.test(color)) {
      color = this.hexify(color)
    }
 
    return (
      <div className="qrcode-box">
        <QrCode
          value={value}
          size={card.qrWidth || 50}
          fgColor={color}
          imageSettings={card.url ? {
            src: card.url,
            height: (card.qrWidth || 50) / 4,
            width: (card.qrWidth || 50) / 4,
            excavate: true
          } : null}/>
      </div>
    )
  }
}
 
export default BarCode