From 85c089cf7045d7141a4d3cfc98e4b12dc22026b6 Mon Sep 17 00:00:00 2001 From: Jimmy Liow Date: Wed, 30 Oct 2024 16:55:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=B0=83=E8=AF=95?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=EF=BC=9B=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=95=86=E4=B8=9A=E5=8F=B7=E3=80=81=E4=B8=AA=E4=BA=BA=20WA=20?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 ++- src/views/accounts/Profile.jsx | 201 +++++++++++++++++++++------------ src/views/dingding/QRCode.jsx | 37 ++++-- 3 files changed, 170 insertions(+), 84 deletions(-) diff --git a/README.md b/README.md index 34fd7e8..5cd22a9 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # Global sales -聊天式销售平台 + +销售平台 2.0 ## 开发设置 +所有命令都在 cmd 目录， + 1. 安装组件：npm install -2. 运行开发环境：npm run dev 或者 start.bat -3. 打包代码：npm run build 或者 build.bat +2. 运行开发环境：dev.bat +3. 打包代码：build.bat ## 版本设置 + npm version [ | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git] npm version premajor --no-git-tag-version @@ -22,5 +26,11 @@ npm version patch --no-git-tag-version [聊天式销售平台需求文档](https://www.kdocs.cn/l/calaUjgmCmDA?from=docs&reqtype=kdocs&startTime=1703645330177&createDirect=true&newFile=true) ## vonage语音视频 + 安装模块 npm i @vonage/client-sdk +## 本机测试账号 + +GLOBAL_SALES_LOGIN_USER +{"userId":"383","userIdStr":"383,609","username":"廖一军","avatarUrl":"https://static-legacy.dingtalk.com/media/lALPBDDrhXr716HNAoDNAoA_640_640.png","mobile":"+86-18777396951","email":"lyj@hainatravel.com","openId":"iioljiPmZ4RPoOYpkFiSn7IKAiEiE","accountList":[{"OPI_SN":383,"OPI_Code":"LYJ","OPI_NameCN":"廖一军","OPI_DEI_SN":7,"OPI_NameEN":"Jimmy Liow"},{"OPI_SN":609,"OPI_Code":"LYJAH","OPI_NameCN":"廖一军（ah）","OPI_DEI_SN":28,"OPI_NameEN":"Jimmy Liow"}],"emailList":["lyj@hainatravel.com","lyj@asiahighlights.com","lyj@chinahighlights.net","lyj@globalhighlights.com"],"whatsappinfo": {"whatsapp_wa": "8617607730395","whatsapp_waba": "8618174165365"}} + diff --git a/src/views/accounts/Profile.jsx b/src/views/accounts/Profile.jsx index 8e20cf7..c092608 100644 --- a/src/views/accounts/Profile.jsx +++ b/src/views/accounts/Profile.jsx @@ -10,25 +10,78 @@ import { List, Result, Button, - Image, + Flex, Select, + Spin, + Form, + Typography, + QRCode, } from 'antd' -import { UserOutlined } from '@ant-design/icons' +import { + UserOutlined, + InfoCircleOutlined, + CloseCircleFilled, + ReloadOutlined, + CheckCircleFilled, +} from '@ant-design/icons' import useAuthStore from '@/stores/AuthStore' function Profile() { const loginUser = useAuthStore((state) => state.loginUser) useEffect(() => { + console.info(loginUser) // 测试错误捕获： // throw new Error('💥 CABOOM 💥') + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) + const customStatusRender = (info) => { + switch (info.status) { + case 'expired': + return ( +
+ {' '} + {info.locale?.expired} +

+ +

+
+ ) + case 'loading': + return ( + + +

Loading...

+ + ) + case 'scanned': + return ( +
+ {' '} + {info.locale?.scanned} +
+ ) + default: + return null + } + } + return ( <> - - + + @@ -49,84 +102,90 @@ function Profile() { ) })} - - {loginUser.mobile} - - - + + + + + - - - - - {/* {loginUser.email} */} + 邮箱} - dataSource={[ - loginUser.email, - 'christyluo@chinahighlights.com', - 'christyluo@chinahighlights.net', - 'christyluo@asiahighlights.com', - 'christyluo@asiahighlights.net', - 'christyluo@globalhighlights.com', - 'christyluo@globalhighlights.net', - 'christyluo@163.com', - ]} + dataSource={loginUser.emailList} renderItem={(item) => {item}} /> + + + + + + 在系统上使用 WhatsApp + +
    +
  • 在手机上打开 WhatsApp
    • +
  • 点击“已关联的设备”，然后点击“关联新设备”
    • +
  • 将手机对准屏幕扫描二维码
    • +
+ + + - - } - title='登录成功' - extra={} - /> + + + WhatsApp：8618754124786 + + diff --git a/src/views/dingding/QRCode.jsx b/src/views/dingding/QRCode.jsx index 6687d65..4b5e12a 100644 --- a/src/views/dingding/QRCode.jsx +++ b/src/views/dingding/QRCode.jsx @@ -1,6 +1,6 @@ import useAuthStore from '@/stores/AuthStore' -import { Flex, Result, Spin, Typography } from 'antd' -import { useEffect, useState } from 'react' +import { Flex, Input, Button, Typography } from 'antd' +import { useEffect, useState, useRef } from 'react' import { useNavigate } from 'react-router-dom' const { Title } = Typography @@ -8,7 +8,6 @@ const { Title } = Typography // 钉钉扫码开发文档：https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information#title-qpi-0qv-anm function QRCode() { - const navigate = useNavigate() const [result, setResult] = useState('') @@ -16,16 +15,19 @@ function QRCode() { // const loginStatus = useAuthStore((state) => state.loginStatus) // const setLoginStatus = useAuthStore((state) => state.setLoginStatus) // const loginUser = useAuthStore((state) => state.loginUser) - // const login = useAuthStore((state) => state.login) + const login = useAuthStore((state) => state.login) + const codeRef = useRef() useEffect(() => { // if (loginUser.userId > 0) { // navigate('/') // } - }, []) + }, []) useEffect(() => { - import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then(() => { + import( + 'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js' + ).then(() => { window.DTFrameLogin( { id: 'qrCodeContainer', @@ -33,7 +35,9 @@ function QRCode() { height: 300, }, { - redirect_uri: encodeURIComponent('https://sales.mycht.cn/p/dingding/callback'), + redirect_uri: encodeURIComponent( + 'https://sales.mycht.cn/p/dingding/callback', + ), client_id: 'dingwgdx6emlxr3fcrg8', scope: 'openid', response_type: 'code', @@ -42,7 +46,6 @@ function QRCode() { }, (loginResult) => { const { authCode } = loginResult - // login(authCode) setResult(authCode) }, (errorMsg) => { @@ -56,10 +59,24 @@ function QRCode() { return ( 使用钉钉扫码 -
+
钉钉 authCode: {result} + + ) } -export default QRCode \ No newline at end of file +export default QRCode