[二维码] #React

DialogQRCode.jsx

import React from 'react';
import {Button, Col, Input, InputNumber, Modal, Row, Spin,message} from 'antd';
import jrQrcode from 'jr-qrcode';
import Utils from "../../common/Utils";
import App from '../../common/App'
import copy from 'copy-to-clipboard';
const id_div = 'div-dialog-qrcode';

export default class DialogQRCode extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            media: {},

            url: this.props.url,
            options: this.props.options,
            qrCode: jrQrcode.getQrBase64(this.props.url, {
                padding: 10,   // 二维码四边空白（默认为10px）
                width: 300,  // 二维码图片宽度（默认为256px）
                height: 300,  // 二维码图片高度（默认为256px）
                correctLevel: jrQrcode.QRErrorCorrectLevel.M,    // 二维码容错level（默认为高）
                reverse: false,        // 反色二维码，二维码颜色为上层容器的背景颜色
                background: "#ffffff",    // 二维码背景颜色（默认白色）
                foreground: "#000000"     // 二维码颜色（默认黑色）
            })
        };
    }
    copyUrl=()=>{
            copy(this.state.url);
            message.success('复制成功');
    };
    render() {

        let {qrCode, url, options = {}} = this.state;
        let {title, avatar, qrOnly} = options;

        return <Modal
            getContainer={() => Utils.common.createModalContainer(id_div)}
            visible={true}
            title={title || "微信扫码"}
            width='330px'
            onCancel={() => Utils.common.closeModalContainer(id_div)}
            footer={null}>
            <div className='dialog-qrcode'>
                {qrCode && <img id='dialog-qrcode-top' className='qrcode' src={qrCode}/>}
                {avatar && <div className='img'>
                    <img src={avatar} alt=""/></div>}
            </div>
            {!qrOnly && <Input value={url} addonAfter={<div style={{cursor:"pointer"}} onClick={this.copyUrl}
            >复制</div>}/>}
        </Modal>

    }
}

export class DialogNetFlowAdd extends React.Component {
    constructor(props) {
        super(props);
        let list = [100, 300, 500, 1000, 2000, 3000];
        if (process.env.API_ENV == 'sandbox') {
            list.push(0.01);
        }

        this.state = {
            list,
            loading: false,
            price: 100,
            isInput: false,
        };
    }

    submit = () => {
        this.setState({
            loading: true,
        });
        App.api('dashboard/usage/recharge', {
            amount: this.state.price * 100,
        }).then(result => {
            App.api('dashboard/store/pay_trade_wxqr', {
                tradeId: result.tradeId,
            }).then(result => {
                let qrCode = jrQrcode.getQrBase64(result.payInfo.codeUrl, {
                    padding: 10,   // 二维码四边空白（默认为10px）
                    width: 400,  // 二维码图片宽度（默认为256px）
                    height: 400,  // 二维码图片高度（默认为256px）
                    correctLevel: jrQrcode.QRErrorCorrectLevel.M,    // 二维码容错level（默认为高）
                    reverse: false,        // 反色二维码，二维码颜色为上层容器的背景颜色
                    background: "#ffffff",    // 二维码背景颜色（默认白色）
                    foreground: "#000000"     // 二维码颜色（默认黑色）
                });
                this.setState({
                    qrCode,
                    loading: false,
                })
            })
        });


    };

    render() {
        return (
            <Modal
                getContainer={() => Utils.common.createModalContainer(id_div)}
                visible={true}
                title="流量充值"
                width='430px'
                maskClosable={false}
                onCancel={() => {
                    Utils.common.closeModalContainer(id_div);
                    this.props.onClose && this.props.onClose();
                }}
                footer={null}>
                <Spin tip="加载中..." spinning={this.state.loading}>
                    {!this.state.qrCode && <div className='dialog-netflow'>
                        <div className="net-intro">请选择充值金额</div>
                        <ul className="flow-types">
                            {
                                this.state.list.map((item) => (
                                    <li
                                        onClick={() => this.setState({price: item, isInput: false})}
                                        className={`flow-item ${item == this.state.price && !this.state.isInput ? 'active' : ''}`}
                                        key={item}>
                                        <strong>{item}</strong><span>元</span>
                                    </li>))
                            }

                        </ul>
                        <div className="self">
                            <li onClick={() => {
                                this.setState({
                                    isInput: true,
                                })
                            }} className={`flow-item ${this.state.isInput ? 'active' : ''}`}>自定义金额
                            </li>
                            {<li className="input">
                                <InputNumber
                                    disabled={!this.state.isInput}
                                    onChange={(price) => {
                                        this.setState({price})
                                    }}
                                    style={{
                                        width: '60%',
                                        marginTop: 10,
                                        marginLeft: 20
                                    }}
                                    max={1000000}
                                    min={100}/>
                            </li>}
                        </div>
                        <div className="footer">
                            <Row>
                                <Col span={4} offset={7}><Button onClick={() => Utils.qrcode.close()}>取消</Button></Col>
                                <Col span={4} offset={2}><Button onClick={this.submit}
                                                                 type={'primary'}>确认</Button></Col>
                            </Row>
                        </div>
                    </div>}
                    {this.state.qrCode && <div>
                        <img
                            style={{width: '100%'}}
                            className='qrcode' src={this.state.qrCode}/>
                        <div className="text-center">支付成功后请关掉页面</div>
                    </div>}
                </Spin>
            </Modal>)

    }
}