taro/src/components/layout/Modal.weapp.tsx

import { View, Text, ScrollView } from '@tarojs/components'
import './Modal.scss'
import React, { useState } from 'react';
import { ModalType } from '@/utils/types';
import Box from './Box';
import Taro from '@tarojs/taro';

export default function Modal(props: {
    children: React.ReactNode,
    testInfo?: React.ReactNode,
    title?: string,
    dismiss: Function,
    confirm?: Function,
    themeColor?: string,
    modalType?: ModalType,
    cancelCatchMove?: boolean
}) {

    const [isDismiss, setIsDismiss] = useState(false)

    //阻止中间内容点击事件穿透
    function click(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        Taro.vibrateShort({
            type: 'medium'
        })
    }

    function onClick() {
        // Taro.vibrateShort({
        //     type:'medium'
        // })
    }

    switch (props.modalType) {
        case ModalType.center:
            return <View className='modal modal_center_container' catchMove onClick={(e) => {
                if (process.env.TARO_ENV == 'weapp') {
                    e.stopPropagation()
                }; props.dismiss()
            }}>
                <View className='center_modal_detail'>
                    <Box><View onClick={click}>
                        {
                            props.children
                        }
                    </View>
                    </Box>
                </View>
            </View>
    }

    function longPress(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
    }

    function dismiss() {
        if (props.modalType == ModalType.center) {
            props.dismiss()
            return
        }
        setIsDismiss(true)
        setTimeout(() => {
            props.dismiss()
        }, 250)
    }

    global.dismissModal = dismiss;


    return <View className={isDismiss ? 'modal modal_dismiss' : 'modal'} catchMove onLongPress={longPress}>
        <View style={{ flex: 1, width: 375, flexShrink: 0 }} onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }; dismiss()
        }}>
            {
                props.testInfo ? props.testInfo : null
            }
        </View>
        <View className={isDismiss ? 'modal_bottom_content modal_bottom_dismiss' : 'modal_bottom_content'} style={{ flexShrink: 0 }} onClick={onClick}>
            {/* <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text> */}
            {
                props.children
            }
            {/* <View className='modal_operate'>
                <View className='modal_btn' style={{ backgroundColor: color+alpha }} onClick={() => props.dismiss()}>
                    <Text className='modal_cancel_text' style={{color:color}}>取消</Text>
                </View>
                <View className='btn_space' />
                <View className='modal_btn' style={{ backgroundColor: color }} onClick={() => props.confirm()}>
                    <Text className='modal_confirm_text' style={{color:'#000'}}>确定</Text>
                </View>


            </View> */}
        </View>

    </View>
}