[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; ~~~