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`,

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;
+  }
+}

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 (
+    <>
+      <Modal
+        title="反馈建议评分"
+        open={isFeedBackModel}
+        footer={null}
+        destroyOnClose={true}
+        onCancel={() => setIsFeedBackModel(false)}
+        centered
+        width={'500px'}
+      >
+        <div className={styles.feedBackModel}>
+          <div className={styles.feedBackModelContent}>
+            <div className={styles.feedBackModelContentRate}>
+              <div style={{ color: 'white', fontSize: '14px', marginBottom: '4px' }}>评分:</div>
+              <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Rate value={feedBackForm.rateValue} style={{ transform: 'scale(2)' }} allowClear onChange={(e) => {
+                  setFeedBackForm({
+                    ...feedBackForm,
+                    rateValue: e
+                  })
+                }} />
+              </div>
+            </div>
+            <div className={styles.feedBackModelContentList}>
+              <div style={{ color: 'white', fontSize: '14px', marginBottom: '4px' }}>建议:</div>
+              <div>
+                {
+                  feedBackList.map((item, index) => {
+                    return (
+                      <div key={index} className={feedBackForm.type === item.value ? styles.active : ''} onClick={() => {
+                        setFeedBackForm({
+                          ...feedBackForm,
+                          type: item.value
+                        })
+                      }}>
+                        <span>{item.value}：</span>
+                        <span>{item.text}</span>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            </div>
+            <div className={styles.feedBackModelContentList} style={{ visibility: feedBackForm.type === 1 ? 'visible' : 'hidden' }}>
+              <TextArea
+                placeholder="填写意见"
+                value={feedBackForm.otherContent}
+                autoSize={{ minRows: 3, maxRows: 6 }}
+                onChange={(e) => {
+                  setFeedBackForm({
+                    ...feedBackForm,
+                    otherContent: e.target.value
+                  })
+                }}
+              />
+            </div>
+          </div>
+          <div className={styles.feedBackModelFooter}>
+            <Button type="primary" className='m-ant-btn'
+              onClick={() => {
+                let parmes = {
+                  score: feedBackForm.rateValue,
+                  otherContent: feedBackForm.type === 1 ? feedBackForm.otherContent : '',
+                  type: feedBackForm.type,
+                }
+                PostFeedback(parmes).then(res => {
+                  if (res.code === 200) {
+                    message.success('提交成功！')
+                    setIsFeedBackModel(false)
+                  }
+                })
+              }}>提交</Button>
+            <Button type="primary" style={{ backgroundColor: 'rgb(16,20,24)', marginLeft: '20px' }}
+              onClick={() => setIsFeedBackModel(false)}>关闭</Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+})
+
+export default FeedBackModel

src/page/Home/Index/index.tsx

@@ -8,11 +8,12 @@ import { ExclamationCircleFilled, ReloadOutlined } from '@ant-design/icons';
 import JoinSetting from '@/components/JoinSetting';
 import { storage } from '@/utils';
 import { PostRefresh } from '@/api/Login';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { role } from '@/config/role';
 import dayjs from 'dayjs';
 import StupWizard from '@/components/StupWizard';
 import { GetSubDpList } from '@/api/Home/User';
+import FeedBackModel from '@/components/FeedBackModel';
 const { setInterval, clearInterval } = require('timers');
 const fs = require('fs').promises;
 const { exec } = require('child_process');
@@ -20,6 +21,7 @@ const { RangePicker } = DatePicker;
 const { confirm } = Modal;
 const Index: React.FC = () => {
   const navigate = useNavigate();
+  const { state } = useLocation();
   const [list, setList] = useState({
     data: [],
     total: 0,
@@ -37,6 +39,7 @@ const Index: React.FC = () => {
   })
   const joinSettingRef = useRef<any>();
   const stupWizardRef = useRef<any>();
+  const feedBackModelRef = useRef<any>();
   const [user, setUser] = useState<any>({});
   const [currentRoomInfo, setCurrentRoomInfo] = useState<any>({});
   const [subjectList, setSubjectList] = useState<any>([]);
@@ -47,6 +50,9 @@ const Index: React.FC = () => {
   const userInfo = JSON.parse(storage.getItem('user') as string)
   useEffect(() => {
     setUser(userInfo)
+    if (state?.currentSeconds >= 5) {
+      feedBackModelRef.current.changeModal()
+    }
   }, [])
   useEffect(() => {
     let time = null as any
@@ -551,6 +557,7 @@ const Index: React.FC = () => {
       </Modal>
       <JoinSetting ref={joinSettingRef} />
       <StupWizard ref={stupWizardRef} />
+      <FeedBackModel ref={feedBackModelRef} />
     </>
   )
 }

src/page/Home/index.module.scss

@@ -130,7 +130,7 @@
           padding-top: 10px;
           margin-top: 10px;
 
-          @for $i from 1 through 2 {
+          @for $i from 1 through 3 {
             >div:nth-child(#{$i}) {
               display: flex;
               align-items: center;
@@ -144,13 +144,16 @@
                 height: 16px;
 
                 @if $i ==1 {
-                  background: url('/src/assets/icon16.png') no-repeat center/cover;
+                  background: url('/src/assets/icon56.png') no-repeat center/120%;
                 }
 
                 @else if $i ==2 {
-                  background: url('/src/assets/icon15.png') no-repeat center/cover;
+                  background: url('/src/assets/icon16.png') no-repeat center/cover;
                 }
 
+                @else if $i ==3 {
+                  background: url('/src/assets/icon15.png') no-repeat center/cover;
+                }
               }
 
               >span {
@@ -162,10 +165,14 @@
               &:hover {
                 >div {
                   @if $i ==1 {
-                    background: url('/src/assets/icon16-active.png') no-repeat center/cover;
+                    background: url('/src/assets/icon56-active.png') no-repeat center/120%;
                   }
 
                   @else if $i ==2 {
+                    background: url('/src/assets/icon16-active.png') no-repeat center/cover;
+                  }
+
+                  @else if $i ==3 {
                     background: url('/src/assets/icon15-active.png') no-repeat center/cover;
                   }
                 }

src/page/Home/index.tsx

@@ -1,7 +1,7 @@
 import styles from '@/page/Home/index.module.scss'
 import { useEffect, useState, useRef } from "react";
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Popconfirm } from 'antd';
+import { Popconfirm, Popover } from 'antd';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn'
 import { storage } from '@/utils';
@@ -130,6 +130,17 @@ const Home: React.FC = () => {
             版本号：{version}
           </div>
           <div>
+            <Popover
+              placement="top"
+              content={
+                <img style={{ width: '200px' }} src={'https://meeting-api.23544.com/meeting/update/ddq.png'} alt="" />
+              }
+            >
+              <div className='drag' title='反馈建议'>
+                <div></div>
+                <span>反馈建议</span>
+              </div>
+            </Popover>
             <div className='drag' title='设置' onClick={() => {
               stupWizardRef.current.changeModal()
             }}>

src/page/Meeting/index.tsx

@@ -1703,7 +1703,11 @@ const Meeting: React.FC = () => {
         if (userInfo.isAnonymous) {
           storage.setItem('userLogin', false)
         } else {
-          navigate('/home/index')
+          navigate(`/home/index`, {
+            state: {
+              currentSeconds
+            }
+          })
         }
       }
       return res

src/utils/package/imageUrl.ts

@@ -84,6 +84,8 @@ import icon52Select from '@/assets/icon52-select.png'
 import icon53 from '@/assets/icon53.png'
 import icon54 from '@/assets/icon54.png'
 import icon55 from '@/assets/icon55.png'
+import icon56 from '@/assets/icon56.png'
+import icon56Active from '@/assets/icon56-active.png'
 export default {
   loading,
   icon,
@@ -170,5 +172,7 @@ export default {
   icon52Select,
   icon53,
   icon54,
-  icon55
+  icon55,
+  icon56,
+  icon56Active
 }

src/utils/styles/App.scss

@@ -404,4 +404,9 @@ $pagination-hover-background-color: #5575F2;
 
 .ant-tabs {
   -webkit-app-region: no-drag;
+}
+
+.ant-rate .ant-rate-star-first,
+.ant-rate .ant-rate-star-second {
+  color: gray;
 }