[TOC] # 组件 ## 二维码 ~~~ import QRCode from "qrcode.react"; ~~~ ## hoist-non-react-statics ~~~ import React, { Component } from 'react'; import hoistStatics from 'hoist-non-react-statics'; import HandleAppFunHoc from 'components/app-sdk-hoc'; import { isAndroid, isIOS, getQlchatVersion, isQlchat } from 'components/envi'; import { locationTo } from 'components/util'; /** * 千聊客服弹窗 */ const ServerDialogHoc = (WrappedComponent) => { @HandleAppFunHoc class Content extends Component { showServerDialog = () => { if ((isQlchat() && isIOS() && getQlchatVersion() >= 4330) || (isQlchat() && isAndroid() && getQlchatVersion() >= 4340)) { this.props.handleAppSdkFun('launchWechatMiniProgram', { appId: 'gh_2b78d1bc04d8', path: '/pages/web-page/web-page?url=' + encodeURIComponent('https://mp.weixin.qq.com/s/4idJwoogBrKD9De1ciMqEw'), }); return; } typeof _qla !== 'undefined' && _qla.click({ region: 'consultatio_btn', pos: location?.pathname && location.pathname.replace(/\d+/g, ''), }); window.simpleDialog({ title: '联系千聊客服', msg: ( <div className="c-fs-26" style={{ textAlign: 'left', padding: '0 ' + window.lib.flexible.px2rem(10) + 'rem', wordBreak: 'normal' }}> <p>如果您想简单询问一下功能操作，使用方式，请点击【在线客服咨询】，能帮助你快速解决。</p> <p style={{ marginTop: window.lib.flexible.px2rem(20) + 'rem' }}>如果您有问题比较复杂，或者使用反馈建议，请点击【添加产品专家】，产品专家微信，一对一为您解答。</p> </div> ), confirmText: '添加产品专家', cancelText: '在线客服咨询', onCancel: () => { typeof _qla !== 'undefined' && _qla.click({ region: 'consultatio_left', pos: location?.pathname && location.pathname.replace(/\d+/g, ''), }); locationTo('https://080113.kefu.easemob.com/webim/im.html?configId=597cd088-9a3b-4546-bd43-4f964bc45510'); }, onConfirm: () => { typeof _qla !== 'undefined' && _qla.click({ region: 'consultatio_right', pos: location?.pathname && location.pathname.replace(/\d+/g, ''), }); locationTo('https://m.qlchat.com/wechat/page/consult/2000013498677867'); } }); } render() { return ( <WrappedComponent {...this.props} showServerDialog={this.showServerDialog} /> ) } } // 复制组件静态方法，不影响原有组件context传递 return hoistStatics(Content, WrappedComponent) } export default ServerDialogHoc; ~~~