feat: 联调

2023-11-12 16:54:55 +08:00
parent 8a9d22e0aa
commit 5a17d2da74
14 changed files with 744 additions and 699 deletions
--- a/src/views/login/index.less
+++ b/src/views/login/index.less
@@ -1,35 +1,39 @@
-.login-box{
+.login-box {
+  width: 100%;
+  height: calc(100% - 100px);
+  background: url(../../imgs/login_bg.jpg) no-repeat 50%;
+  background-size: cover;
+  min-height: 600px;
+  position: relative;
+  .login-container-inner {
+    background: transparent;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 534px;
+    transform: translate(-50%, -50%);
+    clear: both;
+    max-width: 1520px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
    width: 100%;
-    height: calc(100% - 100px);
-    background: url(../../imgs/login_bg.jpg) no-repeat 50%;
-    background-size: cover;
-    min-height: 600px;
-    position: relative;
-    .login-container-inner{
-        background: transparent;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        height: 534px;
-        transform: translate(-50%,-50%);
-        clear: both;
-        max-width: 1520px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        .notes{
-            color: white;
-            max-width: 400px;
-            line-height: 30px;
-        }
-        .qrcode-box{
-            width: 400px;
-            height: 500px;
-            background: white;
-            border-radius: 10px;
-            text-align: center;
-            padding: 20px;
-        }
+    .notes {
+      color: white;
+      max-width: 400px;
+      line-height: 30px;
    }
-}
+    .qrcode-box {
+      width: 400px;
+      height: 500px;
+      background: white;
+      border-radius: 10px;
+      text-align: center;
+      padding: 20px;
+      .qrcode-desc {
+        padding: 20px 0;
+        line-height: 30px;
+      }
+    }
+  }
+}
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@@ -1,45 +1,70 @@
-import { useState } from 'react'
-import { Input, Button, Space } from 'antd'
 import LoginQrcode from '@imgs/login_qrcode.jpg'
-import req from '@utils/request';
+import req from '@utils/request'
+import { Button, Input, Space, message } from 'antd'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'

 import './index.less'

 const loginApiName = '/user/doLogin'

 const Login = () => {
+  const [validCode, setValidCode] = useState('')
+  const navigate = useNavigate()

-    const [validCode, setValidCode] = useState('')
-    const changeCode = e => {
-        setValidCode(e.target.value)
-    }
+  const changeCode = e => {
+    setValidCode(e.target.value)
+  }

-    const doLogin = () => {
-        if (!validCode) return
-        req({
-            method: 'get',
-            url: loginApiName,
-            data: { validCode }
-        })
-    }
+  const doLogin = () => {
+    console.log(validCode)
+    if (!validCode) return
+    req(
+      {
+        method: 'get',
+        url: loginApiName,
+        params: { validCode }
+      },
+      '/auth'
+    ).then(res => {
+      if (res.success && res.data) {
+        message.success('登录成功')
+        localStorage.setItem('userInfo', JSON.stringify(res.data))
+        setTimeout(() => {
+          navigate('/question-bank')
+        }, 1000)
+      }
+    })
+  }

-    return (<div className="login-box">
-        <div className='login-container-inner'>
-            <div className='notes'>LeNet-5 诞生
-                1998 年 11 月，早期经典卷积神经网络 LeNet-5 诞生。杨立昆、莱昂·伯托等发表经典论文“Gradient-Based Learning Applied to Document Recognition”，文章总结了应用于手写字符识别的各种模型并进行了比对，结果显示卷积神经网络表现超群。</div>
-            <div className='qrcode-box'>
-                <div className='qrcode-img'>
-                    <img src={LoginQrcode} alt="" />
-                </div>
-                <div className='qrcode-form'>
-                    <Space>
-                        <Input maxLength={3} placeholder='验证码' onChange={changeCode} value={validCode} />
-                        <Button type='primary' ghost onClick={doLogin}>登录</Button>
-                    </Space>
-                </div>
-            </div>
+  return (
+    <div className='login-box'>
+      <div className='login-container-inner'>
+        <div className='notes'>
+          LeNet-5 诞生 1998 年 11 月，早期经典卷积神经网络 LeNet-5
+          诞生。杨立昆、莱昂·伯托等发表经典论文“Gradient-Based Learning Applied to Document
+          Recognition”，文章总结了应用于手写字符识别的各种模型并进行了比对，结果显示卷积神经网络表现超群。
        </div>
-    </div>)
+        <div className='qrcode-box'>
+          <div className='qrcode-desc'>
+            <p>微信扫码关注公众号</p>
+            <p>获取验证码登录</p>
+          </div>
+          <div className='qrcode-img'>
+            <img src={LoginQrcode} alt='' />
+          </div>
+          <div className='qrcode-form'>
+            <Space>
+              <Input maxLength={3} placeholder='验证码' onChange={changeCode} value={validCode} />
+              <Button type='primary' ghost onClick={doLogin}>
+                登录
+              </Button>
+            </Space>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }

-export default Login
+export default Login
--- a/src/views/question-bank/components/ranking-box/index.jsx
+++ b/src/views/question-bank/components/ranking-box/index.jsx
@@ -1,20 +1,23 @@
-import React from 'react'
-import { Popover, Spin } from 'antd'
+import ClickImg from '@/imgs/clickImg.png'
+import Ranking1Img from '@/imgs/ranking1Img.png'
+import Ranking2Img from '@/imgs/ranking2Img.png'
+import Ranking3Img from '@/imgs/ranking3Img.png'
+import RankingImg from '@/imgs/rankingImg.png'
 import { debounce } from '@utils'
-import { RankingTypeText, RankingTypeBtnText } from '../../constant'
+import { Popover, Spin, message } from 'antd'
+import React from 'react'
+import { RankingTypeBtnText, RankingTypeText } from '../../constant'
 import './index.less'
-import { message } from 'antd'
-import { imgObject } from '@constants'

 const rankingBackImg = {
-  0: imgObject.ranking1Img,
-  1: imgObject.ranking2Img,
-  2: imgObject.ranking3Img,
+  0: Ranking1Img,
+  1: Ranking2Img,
+  2: Ranking3Img
 }

 export default function RankingBox(props) {
  const { isLoading = false, currentActive, rankingType, contributionList } = props
-  const onChangeRanking = (index) =>
+  const onChangeRanking = index =>
    debounce(() => {
      props.onHandleRanking && props.onHandleRanking(index)
    })
@@ -36,17 +39,19 @@ export default function RankingBox(props) {
  let rankingList = contributionList || []

  return (
-    <div className="ranking-list-box">
-      <div className="ranking-list-header">
-        <div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
-        <div className="ranking-list-btns">
+    <div className='ranking-list-box'>
+      <div className='ranking-list-header'>
+        <div className='ranking-list-title'>{RankingTypeText[rankingType]}</div>
+        <div className='ranking-list-btns'>
          {tabList.length > 0 &&
            tabList.map((item, index) => {
              return (
                <div
                  key={`${rankingType}_${item.key}`}
                  onClick={onChangeRanking(index)}
-                  className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`}
+                  className={`ranking-list-btn ${
+                    currentActive === index ? 'ranking-list-btn-active' : ''
+                  }`}
                >
                  {item.tab}
                </div>
@@ -55,56 +60,52 @@ export default function RankingBox(props) {
        </div>
      </div>
      <Spin spinning={isLoading}>
-        <div className="ranking-list">
+        <div className='ranking-list'>
          {rankingList?.length > 0 &&
            rankingList.map((item, index) => {
              return (
-                <div className="ranking-item" key={item.id}>
-                  <div className="ranking-left">
+                <div className='ranking-item' key={item.id}>
+                  <div className='ranking-left'>
                    <div
-                      className="ranking-icon"
+                      className='ranking-icon'
                      style={{
-                        backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : imgObject.rankingImg})`,
+                        backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : RankingImg})`
                      }}
                    >
                      {index > 2 && index + 1}
                    </div>
-                    <div className="ranking-head-img">
-                      <img src={item.headImg} className="ranking-head-icon" />
+                    <div className='ranking-head-img'>
+                      <img src={item.headImg} className='ranking-head-icon' />
                    </div>
                    <Popover
-                      title={
-                        <div>
-                          {item.name}
-                        </div>
-                      }
+                      title={<div>{item.name}</div>}
                      content={
-                        <div className="tooltip-info">
+                        <div className='tooltip-info'>
                          <div>{item.name}</div>
                          {/* <div>{item.organizationFullName}</div> */}
                        </div>
                      }
                    >
-                      <div className="ranking-info">
-                        <div className="ranking-name">{item.name}</div>
+                      <div className='ranking-info'>
+                        <div className='ranking-name'>{item.name}</div>
                        {/* <div className="ranking-department">{item.organizationName}</div> */}
                      </div>
                    </Popover>
                  </div>
-                  <div className="ranking-right">🔥 {item.count}</div>
+                  <div className='ranking-right'>🔥 {item.count}</div>
                </div>
              )
            })}
        </div>
      </Spin>
-      <div className="ranking-btn-go" onClick={onJump}>
+      <div className='ranking-btn-go' onClick={onJump}>
        <div
-          className="ranking-btn-go-icon"
+          className='ranking-btn-go-icon'
          style={{
-            backgroundImage: `url(${imgObject.clickImg})`,
+            backgroundImage: `url(${ClickImg})`
          }}
        ></div>
-        <div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
+        <div className='ranking-btn-text'>{RankingTypeBtnText[rankingType]}</div>
      </div>
    </div>
  )
--- a/src/views/user-info/index.tsx
+++ b/src/views/user-info/index.tsx
@@ -1,10 +1,14 @@
 import Head from '@/imgs/head.jpg'
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
-import { Button, Card, Col, Form, Input, Radio, Row } from 'antd'
+import req from '@utils/request'
+import { Button, Card, Col, Form, Input, Radio, Row, message } from 'antd'
 import { memo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
 import './index.less'

 const { TextArea } = Input
+const apiName = '/user/update'

 const layout = {
  labelCol: { span: 4 },
@@ -15,9 +19,43 @@ const UserInfo = () => {
  const [form] = Form.useForm()
  const [editFlag, setEditFlag] = useState(false)
  const [loading, setLoading] = useState(false)
+  const navigate = useNavigate()

-  const onFinish = values => {
-    console.log(values)
+  const onFinish = () => {
+    setLoading(true)
+    const userInfoStorage = localStorage.getItem('userInfo')
+    const { loginId = '' } = userInfoStorage ? JSON.parse(userInfoStorage) : {}
+    const values = form.getFieldsValue()
+    if (!Object.values(values).filter(Boolean).length) {
+      setLoading(false)
+      return
+    }
+    const params = {
+      userName: loginId,
+      ...values
+    }
+    req(
+      {
+        method: 'post',
+        url: apiName,
+        data: { ...params }
+      },
+      '/auth'
+    )
+      .then(res => {
+        if (res.success) {
+          message.success('更新成功')
+          setTimeout(() => {
+            navigate('/question-bank')
+          }, 1000)
+        }
+        setLoading(false)
+        setEditFlag(false)
+      })
+      .catch(() => {
+        message.error('更新失败')
+        setLoading(false)
+      })
  }

  const uploadButton = (
@@ -50,10 +88,7 @@ const UserInfo = () => {
            </Col>
            <Col span={16}>
              {editFlag ? (
-                <Form.Item
-                  label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别'
-                  name='gender'
-                >
+                <Form.Item label='性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别' name='sex'>
                  <Radio.Group>
                    <Radio value={1}>男</Radio>
                    <Radio value={2}>女</Radio>
@@ -65,6 +100,17 @@ const UserInfo = () => {
                </Form.Item>
              )}
            </Col>
+            <Col span={16}>
+              {editFlag ? (
+                <Form.Item label='手机号码' name='phone'>
+                  <Input placeholder='请输入手机号码' />
+                </Form.Item>
+              ) : (
+                <Form.Item label='手机号码'>
+                  <>暂无</>
+                </Form.Item>
+              )}
+            </Col>
            <Col span={16}>
              {editFlag ? (
                <Form.Item
@@ -95,7 +141,12 @@ const UserInfo = () => {
              <Form.Item wrapperCol={{ offset: 5 }}>
                {editFlag ? (
                  <>
-                    <Button type='primary' style={{ marginRight: '20px' }} onClick={onFinish}>
+                    <Button
+                      type='primary'
+                      style={{ marginRight: '20px' }}
+                      onClick={onFinish}
+                      loading={loading}
+                    >
                      保存
                    </Button>
                    <Button onClick={() => setEditFlag(false)}>取消</Button>