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

import './index.less'
import React, { useEffect, useState } from "react";
import utils from '~/utils/utils';
import api from '~/api';

export const DownloadCaigong2: React.FC = (props: any) => {

    const [tip, setTip] = useState('none')
    const [androidUrl, setAndroidUrl] = useState("#没获取到链接")
    const is_weixin = () => {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.search('micromessenger') !== -1) {
            return true;
        } else {
            return false;
        }
    }
    const downloadButtons = () => {
        if (utils.isWeixin() && utils.isAndroid()) {
            return (
                <React.Fragment>
                    <div className='buttons'>
                        <a onClick={() => openWxDownloadTip()}>
                            <div className="download1">
                                点击下载1
                            </div>
                        </a>
                        <a onClick={() => openWxDownloadTip()}>
                            <div className="download2">
                                点击下载(备用)
                            </div>
                        </a>
                    </div>

                </React.Fragment>
            )
        }
        else if (utils.isIos()) {
            return (
                <React.Fragment>
                    <div className='buttons'>
                        <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>
                    </div>

                </React.Fragment>

            )


        }
        else {
            return (<React.Fragment>
                <div className='buttons'>
                    <a href={androidUrl}>
                        <div className="download1">
                            点击下载1
                        </div>
                    </a>
                    <a  href={androidUrl}>
                        <div className="download2">
                            点击下载(备用)
                        </div>
                    </a>
                </div>

            </React.Fragment>)


        }


    }
    const openWxDownloadTip = () => {
        setTip('block')


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


    }

    useEffect(() => {
        document.title = 'APP下载'
        api.openapiSystemDictDataType("android_update").then(res => {
            console.log(res.data.data[0].dictValue)
            setAndroidUrl(res.data.data[0].dictValue)
        })





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

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

        </div>
    )

}