BarCode.tsx

import Taro, { Component } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, Canvas, Image } from '@tarojs/components';
import BarCodeBoxBg from '../../images/barcode/tiaoxingma-1.png';
import BarCodeBoxBigBg from '../../images/barcode/tiaoxingma-2.png';
import RefreshIcon from '../../images/barcode/icon_shuaxin@2x.png';
import wxbarcode from 'wxbarcode';

import './BarCode.scss';
import { UserState } from '../../store/rootReducers/userinfo';
import { connect } from '@tarojs/redux';

type PageStateProps = {
  userinfo: UserState;
};
type PageOwnProps = {};
type PageState = {
  showBig: boolean;
};

type IProps = PageStateProps & PageOwnProps;
interface BarCode {
  props: IProps;
  state: PageState;
}

@connect(({ userinfo }) => ({
  userinfo,
}))
class BarCode extends Component {
  constructor(props: PageOwnProps) {
    super(props);
    this.state = {
      showBig: false,
    };
  }

  componentWillMount() {
    const { userinfo } = this.props;
    wxbarcode.barcode('BarCode', userinfo.idBar, 646, 188);
  }

  drawBarCode(showBig: boolean) {
    const { userinfo } = this.props;
    if (showBig) {
      wxbarcode.barcode('BarCode', userinfo.idBar, 646, 188);
    } else {
      wxbarcode.barcode('BarCode', userinfo.idBar, 700, 364);
    }
  }

  toggleBigBarCode() {
    const { showBig } = this.state;
    this.drawBarCode(showBig);
    this.setState({
      showBig: !showBig,
    });
  }

  render() {
    const { showBig } = this.state;
    return (
      <View className='BarCode'>
        <View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
          {showBig ? (
            <Image className='bg' src={BarCodeBoxBigBg} />
          ) : (
            <Image className='bg' src={BarCodeBoxBg} />
          )}
          {!showBig && (
            <Image className='BarCodeBox-refresh' src={RefreshIcon} />
          )}
          <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
            <Canvas className='BarCodeCav' canvasId='BarCode' />
          </View>
          <View className='toggleBtn' onClick={this.toggleBigBarCode}>
            {showBig ? '缩小' : '放大'}
          </View>
        </View>
      </View>
    );
  }
}

export default BarCode as ComponentClass<PageOwnProps, PageState>;