diff --git a/src/api/Home/Index/index.ts b/src/api/Home/Index/index.ts index d18265e..8756a7d 100644 --- a/src/api/Home/Index/index.ts +++ b/src/api/Home/Index/index.ts @@ -5,6 +5,12 @@ export const GetRoom = (data: { pageIndex: number, pageSize: number }) => method: 'get' }) +export const PostFeedback = (data: any) => + request({ + url: `/home/feedback`, + method: 'post', + data, + }) export const PostRoom = (data: any) => request({ url: `/home/room`, diff --git a/src/assets/icon56-active.png b/src/assets/icon56-active.png new file mode 100644 index 0000000..8e637e8 Binary files /dev/null and b/src/assets/icon56-active.png differ diff --git a/src/assets/icon56.png b/src/assets/icon56.png new file mode 100644 index 0000000..3bd9904 Binary files /dev/null and b/src/assets/icon56.png differ diff --git a/src/components/FeedBackModel/index.module.scss b/src/components/FeedBackModel/index.module.scss new file mode 100644 index 0000000..689f213 --- /dev/null +++ b/src/components/FeedBackModel/index.module.scss @@ -0,0 +1,45 @@ +.feedBackModel { + max-height: 80vh; + display: flex; + flex-direction: column; + .feedBackModelContent { + flex-grow: 1; + overflow-y: auto; + margin: 10px 0; + + .feedBackModelContentRate { + margin-bottom: 20px; + background-color: #101215; + padding: 10px 20px 30px; + box-sizing: border-box; + } + + .feedBackModelContentList { + margin-bottom: 20px; + + >div:nth-child(2) { + >div { + background-color: #101215; + margin-bottom: 10px; + cursor: pointer; + color: #7F859B; + font-size: 14px; + padding: 4px 8px; + box-sizing: border-box; + border: 1px transparent solid; + } + + .active { + color: white; + border: 1px #495EAD solid; + } + } + } + } + + .feedBackModelFooter { + flex-shrink: 0; + display: flex; + justify-content: flex-end; + } +} \ No newline at end of file diff --git a/src/components/FeedBackModel/index.tsx b/src/components/FeedBackModel/index.tsx new file mode 100644 index 0000000..931b645 --- /dev/null +++ b/src/components/FeedBackModel/index.tsx @@ -0,0 +1,130 @@ +import { PostFeedback } from '@/api/Home/Index'; +import styles from '@/components/FeedBackModel/index.module.scss' +import { Button, message, Modal, Rate } from 'antd'; +import TextArea from 'antd/es/input/TextArea'; +import { useState, useImperativeHandle, forwardRef } from "react"; +const FeedBackModel = forwardRef((_props: any, ref: any) => { + useImperativeHandle(ref, () => ({ + changeModal: () => { + setIsFeedBackModel(true) + }, + })) + const [isFeedBackModel, setIsFeedBackModel] = useState(false); + const [feedBackForm, setFeedBackForm] = useState({ + rateValue: 0, + otherContent: '', + type: 0, + }); + const [feedBackList, _setFeedBackList] = useState([ + { + text: "其他,需要手动填写", + value: 1 + }, + { + text: "软件卡顿", + value: 2 + }, + { + text: "设计不合理", + value: 3 + }, + { + text: "功能太少", + value: 4 + }, + { + text: "通话不流畅", + value: 5 + }, + { + text: "视频卡顿", + value: 6 + }, + { + text: "操作麻烦", + value: 7 + }, + ]); + return ( + <> + setIsFeedBackModel(false)} + centered + width={'500px'} + > +
+
+
+
评分:
+
+ { + setFeedBackForm({ + ...feedBackForm, + rateValue: e + }) + }} /> +
+
+
+
建议:
+
+ { + feedBackList.map((item, index) => { + return ( +
{ + setFeedBackForm({ + ...feedBackForm, + type: item.value + }) + }}> + {item.value}: + {item.text} +
+ ) + }) + } +
+
+
+