Taro小程序封装一个简易提醒框

// 用法：
handleClick = () => {
    showSynthesis('fail', '当前剩余视频制作时长不足，请联系客服进行充值！')
}

import {View, Image} from '@tarojs/components';
import React, {createRef, useImperativeHandle, useState} from 'react';
import {AtButton} from 'taro-ui';
import synthesisSuccessIcon from '@img/icon/synthesis_success.svg';
import synthesisFailIcon from '@img/icon/synthesis_fail.svg';
import 'taro-ui/dist/style/components/button.scss';
import style from './style.less';

const commonModalRef = createRef();

function Index(props) {
    const [visible, setVisible] = useState(false);
    const [options, setOptions] = useState({});

    useImperativeHandle(commonModalRef, () => ({
        show: (status, title) => {
            setVisible(true);
            setOptions({status, title});
        },
        hide: handleClose
    }));

    const handleClose = () => {
        setVisible(false);
        setTimeout(() => setOptions({}), 1);
    };

    return (
        !!visible && (
            <View className={style.synthesis_modal}>
                <View className={style.synthesis_modal_content}>
                    <View className={style.synthesis_status}>
                        <Image src={options.status == 'fail' ? synthesisFailIcon : synthesisSuccessIcon} />
                        <View className={style.fail_text}>{options.status == 'fail' ? '合成失败' : '合成成功'}</View>
                    </View>
                    <View className={style.synthesis_content}>{options.text ? options.text : '当前剩余视频制作时长不足，请联系客服进行充值！'}</View>
                    <View className={style.reminder_btn}>
                        <AtButton onClick={handleClose}>我知道了</AtButton>
                    </View>
                </View>
            </View>
        )
    );
}
function showSynthesis(status, title) {
    commonModalRef.current?.show(status, title);
}

function hideSynthesis() {
    commonModalRef.current?.hide();
}

export default Index;
export {showSynthesis, hideSynthesis};