/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-16 08:50:50
|
* @LastEditTime: 2023-05-23 20:34:22
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 消息底部弹窗
|
*/
|
import React from 'react';
|
import { Drawer, Button, Space } from 'dingtalk-design-mobile';
|
import { CloseBoldOutlined } from 'dd-icons';
|
import './index.less';
|
|
/**
|
* visible: bool, // 显隐
|
* onClose: func, // 关闭方法
|
* title: string, // 弹窗标题
|
* icon: any, // 弹窗类型的icon
|
* msgTitle: string, // 弹窗类型的标题
|
* msgTag: array, [{className:'tag样式',text:'tag标题'}], // 弹窗类型当存在tag时传入
|
* content: string, // 弹窗内容
|
* isAction: bool, // 是否有底部操作区，只有一个操作
|
* actionText: string, // 底部操作的按钮名称
|
* actionFunc: func, // 底部操作的按钮方法
|
* contentTitle: string, // 弹窗内容的标题
|
*/
|
const MsgModal = ({
|
visible,
|
onClose,
|
title = '消息详情',
|
icon,
|
msgTitle,
|
msgSubtitle,
|
msgTag = [],
|
content,
|
isAction = true,
|
actionText = '我知道了',
|
actionFunc,
|
contentTitle,
|
}) => {
|
return (
|
<Drawer visible={visible} onVisibleChange={onClose} size="auto">
|
<div className="msgModal">
|
<div className="msgModal-header">
|
<div className="msgModal-header-title">{title}</div>
|
<div className="msgModal-header-icon" onClick={onClose}>
|
<CloseBoldOutlined />
|
</div>
|
</div>
|
<div className="msgModal-title">
|
<img className="msgModal-title-img" src={icon} alt="" />
|
<div className="msgModal-title-content">
|
<Space>
|
<div className="msgModal-title-content-title">{msgTitle}</div>
|
{msgTag.map((x, t) => (
|
<div className={x.className} key={t}>
|
{x.text}
|
</div>
|
))}
|
</Space>
|
<div className="msgModal-title-content-subtitle">{msgSubtitle}</div>
|
</div>
|
</div>
|
{contentTitle && <div className="msgModal-contentTitle">{contentTitle}</div>}
|
{content && <div className="msgModal-content"><span dangerouslySetInnerHTML={{ __html: content ? content.replace(/\/n/g, '<br/>') : '-' }}></span></div>}
|
{isAction && (
|
<div className="msgModal-action">
|
<Button onClick={() => !!actionFunc && actionFunc()} type="primary">
|
{actionText}
|
</Button>
|
</div>
|
)}
|
</div>
|
</Drawer>
|
);
|
};
|
|
export default MsgModal;
|
