意见反馈弹窗
This commit is contained in:
parent
ba7333f1ad
commit
f6a004c202
54
src/App.css
54
src/App.css
|
|
@ -141,3 +141,57 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.feedBackModal .ant-modal-header{
|
||||
border-bottom: none;
|
||||
background: none;
|
||||
padding: 16px 24px 0;
|
||||
}
|
||||
|
||||
.feedBackModal .ant-modal-title{
|
||||
font-weight:500 !important;
|
||||
color:#151d40;
|
||||
font-size:18px;
|
||||
}
|
||||
.feedBackModal .anticon-close{
|
||||
font-size: 22px;
|
||||
}
|
||||
.feedBackModal .ant-modal-footer{
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.feedBackModal .ant-modal-content{
|
||||
background-image:linear-gradient(359.37deg,#ebf3ff 0%,#f8fbff 55.01%,#cbdbff 100%);
|
||||
border:1.5px solid #ffffff;
|
||||
}
|
||||
|
||||
.feedBackModal .feedBackText{
|
||||
padding: 20px;
|
||||
font-size:15px;
|
||||
color:#202d40;
|
||||
}
|
||||
.feedBackModal .feedBackText::placeholder{
|
||||
color:#afb7c2;
|
||||
}
|
||||
.feedBackModal .gotoIssueFeedBack{
|
||||
color: rgba(70, 106, 255, 1);
|
||||
}
|
||||
.feedBackBox{
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
.feedBackText.errorInput{
|
||||
border: 1px solid #f60011;
|
||||
}
|
||||
.errorInput{
|
||||
background-color:rgba(255, 0, 0, 0.04) !important;
|
||||
}
|
||||
.ant-input.errorInput:hover{
|
||||
background-color: white !important;
|
||||
}
|
||||
.countNumBox{
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 10px;
|
||||
}
|
||||
|
|
@ -297,7 +297,7 @@ class App extends Component {
|
|||
<MuiThemeProvider theme={theme}>
|
||||
<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
|
||||
{/* <GlccModal /> */}
|
||||
{!pathName || (pathName && pathName.indexOf("glcc") === -1) ? <SiderBar /> : <SiderBarHelp/>}
|
||||
{!pathName || (pathName && pathName.indexOf("glcc") === -1) ? <SiderBar {...this.props}/> : <SiderBarHelp/>}
|
||||
{/* <Router> */}
|
||||
<Switch>
|
||||
{/* wiki预览 */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Popover , Tooltip } from 'antd';
|
||||
import { Button, Input, message, Modal, Popover , Tooltip } from 'antd';
|
||||
import './Component.scss';
|
||||
import axios from 'axios';
|
||||
import ShareModal from './SiderBarShareModal';
|
||||
|
|
@ -20,16 +20,25 @@ $(window).scroll(function () {
|
|||
}
|
||||
});
|
||||
|
||||
function SiderBar() {
|
||||
function SiderBar(props) {
|
||||
const {location, history} = props;
|
||||
const {search, pathname} = location;
|
||||
const [ data , setData ] = useState([]);
|
||||
const [ visible , setVisible ] = useState(false);
|
||||
const [ login , setLogin ]= useState(false);
|
||||
const [ feedBackModal, setFeedBackModal] = useState(false);
|
||||
const [ feedBackValue, setFeedBackValue] = useState(undefined);
|
||||
const [ failApply, setFailApply] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
getFAQ();
|
||||
getCurrentUser();
|
||||
//页面加载完成之后隐藏回到顶点
|
||||
$(".-task-sidebar .gotop").hide();
|
||||
// 意见反馈弹窗
|
||||
if(search && search.indexOf('feedback') !== -1){
|
||||
setFeedBackModal(true)
|
||||
}
|
||||
},[])
|
||||
|
||||
function getFAQ(){
|
||||
|
|
@ -74,14 +83,38 @@ function SiderBar() {
|
|||
</div>
|
||||
}
|
||||
|
||||
// 意见反馈按钮点击事件
|
||||
function feedBackClick(){
|
||||
if(login){
|
||||
setFeedBackModal(true);
|
||||
}else{
|
||||
history.push(`/login?go_page=${pathname}?feedback`);
|
||||
}
|
||||
}
|
||||
|
||||
function applyFeedBack(){
|
||||
if(feedBackValue){
|
||||
setFailApply(undefined);
|
||||
setFeedBackModal(false);
|
||||
setFeedBackValue(undefined);
|
||||
axios.post(`/v1/${login}/feedbacks`,{content: feedBackValue}).then(res=>{
|
||||
if(res && res.data && !res.data.status){
|
||||
message.success('反馈成功');
|
||||
}
|
||||
})
|
||||
}else{
|
||||
setFailApply('请填写您的反馈建议');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={"-task-sidebar"} >
|
||||
{/* 平台反馈 */}
|
||||
<Tooltip title="意见反馈" placement={"left"} overlayClassName="tooltipBox">
|
||||
<div className="consult">
|
||||
<a href={login ? `/Gitlink/forgeplus/issues/new?type=feedback`:`/login?go_page=/Gitlink/forgeplus/issues/new?type=feedback`}>
|
||||
<div className="consult" onClick={feedBackClick} style={{cursor: 'pointer'}}>
|
||||
{/* <a href={login ? `/Gitlink/forgeplus/issues/new?type=feedback`:`/login?go_page=/Gitlink/forgeplus/issues/new?type=feedback`}> */}
|
||||
<i className="iconfont icon-yijianfankui2"></i>
|
||||
</a>
|
||||
{/* </a> */}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
|
|
@ -113,6 +146,22 @@ function SiderBar() {
|
|||
<a><i className="iconfont icon-huidaodingbu1"></i></a>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Modal
|
||||
width={610}
|
||||
className='feedBackModal'
|
||||
visible={feedBackModal}
|
||||
onCancel={()=>{setFeedBackModal(false); history.push(pathname)}}
|
||||
title={'意见反馈'}
|
||||
footer={<Button type='primary' style={{width: '300px', height: '36px'}} onClick={applyFeedBack}>提交</Button>}>
|
||||
<div className='feedBackBox'>
|
||||
<Input.TextArea autoSize={{minRows: 9}} placeholder='请在此处填写您的宝贵意见，若经采纳，我们将通过邮件与您沟通' className={`feedBackText ${failApply ? 'errorInput' : ''}`} maxLength={500} value={feedBackValue} onChange={(e)=>{setFeedBackValue(e.target.value); e.target.value && e.target.value.length && setFailApply(undefined);}}/>
|
||||
<span className='countNumBox'>{(feedBackValue && feedBackValue.length) || 0}/500</span>
|
||||
</div>
|
||||
{/* /Gitlink/forgeplus */}
|
||||
{failApply && <div className='mt10' style={{color: '#f60011'}}>{failApply}</div>}
|
||||
<div className='mt15 font-15 pln'>若需上传截图，请<a onClick={()=>{setFeedBackModal(false); history.push('/xxq250/BootstrapAdmin/issues/new?type=feedback')}} className='gotoIssueFeedBack'>点击此处</a>留言</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue