nbjk-h5/src/views/downloadCaigong2/index.tsx

import './index.less'
import React, { useEffect, useState } from "react";
import utils from '~/utils/utils';
export const DownloadCaigong2: React.FC = (props: any) => {
    const [tip, setTip] = useState('none')
    const is_weixin = () => {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.search('micromessenger') !== -1) {
            return true;
        } else {
            return false;
        }
    }
    const openWxDownloadTip = () => {
        setTip('block')


    }
    const closeWxDownloadTip = () => {
        setTip('none')


    }
    const downloadButtons = () => {
        if (utils.isWeixin() && utils.isAndroid()) {
            return (
                <React.Fragment>
                    <a onClick={() => openWxDownloadTip()}>
                        <div className="download1">
                            点击下载1
                        </div>
                    </a>
                    <a onClick={() => openWxDownloadTip()}>
                        <div className="download2">
                            点击下载(备用)
                        </div>
                    </a>
                </React.Fragment>
            )
        }
        else if (utils.isIos()) {
            return (
                <React.Fragment>
                    <a href="https://itunes.apple.com/cn/app/id1670563437">
                        <div className="download1">
                            点击下载1
                        </div>
                    </a>
                    <a href="https://itunes.apple.com/cn/app/id1670563437">
                        <div className="download2">
                            点击下载(备用)
                        </div>
                    </a>
                </React.Fragment>

            )


        }
        else {
            return (<React.Fragment>
                <a href="https://t1-1305573081.file.myqcloud.com/ctjk/apk/ctjk1.0.0.apk">
                    <div className="download1">
                        点击下载1
                    </div>
                </a>
                <a href="https://t1-1305573081.file.myqcloud.com/ctjk/apk/ctjk1.0.0.apk">
                    <div className="download2">
                        点击下载(备用)
                    </div>
                </a>
            </React.Fragment>)


        }


    }
    useEffect(() => {
        if (is_weixin()) {
            document.querySelectorAll<HTMLElement>('#app a')[0].style.display = 'none'
            document.querySelectorAll<HTMLElement>('#app a')[1].style.display = 'none'

        }
        else {
            document.querySelectorAll<HTMLElement>('#app a')[2].style.display = 'none'
            document.querySelectorAll<HTMLElement>('#app a')[3].style.display = 'none'

        }

    })
    return (
        <div id="app">
            <div style={{ display: tip }} id="tip">
                <img onClick={() => {
                    closeWxDownloadTip()
                }} className="tip" src={utils.getAssetsImagesFile('tip.png')} alt='' />

            </div>
            <div className="title">
                <img style={{ width: '72vw', margin: '0 auto' }} src={utils.getAssetsImagesFile('财仝驾考APP2.png')} alt='' />
            </div>
            <div className="subtitle">
                <span style={{ color: '#656565' }}>一款为驾考学员打造的专业软件</span>
            </div>
            <img className="bg" src={utils.getAssetsImagesFile('bg2.png')} alt='' />
            {downloadButtons()}

        </div>
    )

}