import React from 'react'; import classNames from 'classnames'; import { Popover } from 'antd'; import QRCode from 'qrcode.react'; import baseStyles from '../style.less'; const useRenderQcode = (props = {}) => { const styles = props.styles || baseStyles || {} ; if (!props.qrcode) { return null; } const qrcodes = props.qrcode.split('|'); const qcodeComponent = url => ( <img src={url} className="QuickMark-cont" style={{ width: '150px', height: '150px' }} alt="" /> ); const element = []; qrcodes.forEach((item, index) => { const firstValue = item.split('='); switch (firstValue[0]) { case '小程序': element.push( <div className={classNames( styles['quickMark-single'], styles['mini-single'], )} key={firstValue[0]} > <Popover placement="top" content={qcodeComponent( 'https://panda-water.cn/web4/assets/images/小程序二维码.jpg', )} > <div className={styles['icon-Container']}> <span className={styles.Wechat} /> <span className="iconText WechatText">Wechat</span> </div> </Popover> </div>, ); break; case '智联小程序': element.push( <div className={classNames(styles['quickMark-single'], 'miniIOT-single')} key={firstValue[0]} > <Popover placement="top" content={qcodeComponent( 'https://panda-water.cn/web4/assets/images/智联小程序二维码.jpg', )} > <div className={styles['icon-Container']}> <span className={styles.Wechat} /> <span className={classNames(styles.iconText, styles.WechatText)} > 熊猫智联 </span> </div> </Popover> </div>, ); break; case 'Android': if (firstValue[1] && firstValue[1].replace(/ /g, '').length > 0) { element.push( <div className={classNames( styles['quickMark-single'], 'Android-single', )} key={firstValue[0]} > <Popover placement="top" content={ <QRCode value={firstValue[1].replace( /{ip}/gi, props.ip || window.location.host, )} /> } > <div className={styles['icon-Container']}> <span className={styles.Android} /> <span className={classNames(styles.iconText, styles.AndroidText)} > Android </span> </div> </Popover> </div>, ); } break; case 'iPhone': if (firstValue[1] && firstValue[1].replace(/ /g, '').length > 0) { element.push( <div className={classNames( styles['quickMark-single'], 'iphone-single', )} key={firstValue[0]} > <Popover placement="top" content={ <QRCode value={firstValue[1].replace( /{ip}/gi, props.ip || window.location.host, )} /> } > <div className={styles['icon-Container']}> <span className={styles.Wechat} /> <span className={classNames(styles.iconText, styles.iphoneText)} > iPhone </span> </div> </Popover> </div>, ); } break; default: if (item && item.replace(/ /g, '').length > 0) { const indexIndex = element.findIndex( // eslint-disable-next-line no-shadow item => item.props.className.indexOf('Android-single') > -1, ); element.splice(indexIndex, 1); element.push( <div className={classNames( styles['quickMark-single'], 'Android-single', )} key={index} > <Popover placement="top" content={ <QRCode value={item.replace( /{ip}/gi, props.ip || window.location.host, )} /> } > <div className={styles['icon-Container']}> <span className={styles.Android} /> <span className={classNames(styles.iconText, styles.AndroidText)} > Android </span> </div> </Popover> </div>, ); } break; } }); return element; }; export default useRenderQcode;