feat: 增加请求二维码功能；有权限才能使用；

fix: 接收图片保存出错

src/stores/AuthStore.js

@@ -30,6 +30,10 @@ const useAuthStore = create(devtools((set, get) => ({
   isPermitted: (perm) => {
     const { loginUser } = get()
 
+    if (perm === PERM_USE_WHATSAPP) {
+      return ['404', '383', '227'].includes(loginUser.userId)
+    }
+
     if (perm === PERM_USE_EMAL) {
       return true//['501', '466', '599', '495', '143', '370', '639', '513', '654', '404', '383', '227'].includes(loginUser.userId)
     }
@@ -79,6 +83,7 @@ const useAuthStore = create(devtools((set, get) => ({
             }
           }),
           whatsAppBusiness: json.result.whatsappinfo.length > 0 ? json.result.whatsappinfo[0].whatsapp_waba : '',
+          whatsAppNo: json.result.whatsappinfo.length > 0 ? json.result.whatsappinfo[0].whatsapp_wa : '',
           accountName: json.result.opicode,
           username: json.result.nick,
           avatarUrl: json.result.avatarUrl,

src/views/accounts/Profile.jsx

@@ -2,14 +2,19 @@ import { useEffect, useCallback, useState } from 'react'
 import { Row, Col, Space, Input, Descriptions, Avatar, Tag, Divider, List, App, Button, Flex, Select, Spin, Form, Typography, QRCode, Tooltip } from 'antd'
 import { UserOutlined, InfoCircleOutlined, ReloadOutlined, CheckCircleFilled } from '@ant-design/icons'
 import useAuthStore from '@/stores/AuthStore'
+import { fetchJSON } from '@/utils/request'
+import { Conditional } from '@/components/Conditional'
+import { PERM_USE_WHATSAPP } from '@/stores/AuthStore'
 
 function Profile() {
   const { notification } = App.useApp()
   const [wabaForm] = Form.useForm()
 
-  const [loginUser, setWhatsAppBusiness] = useAuthStore((state) => [state.loginUser, state.setWhatsAppBusiness])
+  const [loginUser, setWhatsAppBusiness, isPermitted] = useAuthStore((state) => [
+    state.loginUser, state.setWhatsAppBusiness, state.isPermitted
+  ])
 
-  const [text, setText] = useState('')
+  const [qrCode, setQRCode] = useState('')
 
   useEffect(() => {
     // 测试错误捕获：
@@ -36,6 +41,21 @@ function Profile() {
       })
   }, [])
 
+  const handelGernaterQR = useCallback(() => {
+    const phone = loginUser.whatsAppNo
+
+    fetchJSON(
+      'http://localhost:3031/api/v1/whatsapp/channels/qrcode',
+      { phone })
+      .then(r => {
+        console.info(r)
+        setQRCode(r.result.qr)
+      })
+      .catch(ex => {
+        console.error(ex)
+      })
+  }, [])
+
   const customStatusRender = (info) => {
     switch (info.status) {
       case 'expired':
@@ -107,7 +127,7 @@ function Profile() {
                   <span>商业号身份</span>
                 </Space>
               }>
-              <Form layout='vertical' className='w-3/5' form={wabaForm} initialValues={{ whatsAppBusiness: loginUser.whatsAppBusiness }}>
+              <Form layout='vertical' className='w-3/5' form={wabaForm} initialValues={{ whatsAppBusiness: loginUser.whatsAppBusiness, whatsAppNo: loginUser.whatsAppNo }}>
                 <Form.Item name='whatsAppBusiness'>
                   <Select
                     options={[
@@ -142,6 +162,11 @@ function Profile() {
                     ]}
                   />
                 </Form.Item>
+                <Form.Item
+                  label='WhatsApp'
+                  name='whatsAppNo'>
+                  <Input />
+                </Form.Item>
                 <Form.Item>
                   <Button type='primary' onClick={handelUpdateWABA}>
                     保存
@@ -175,6 +200,7 @@ function Profile() {
             <Typography.Title level={2}>在系统上使用 WhatsApp</Typography.Title>
             <Typography.Paragraph>
               <ul>
+                <li>点击生成二维码➡️</li>
                 <li>在手机上打开 WhatsApp</li>
                 <li>点击“已关联的设备”，再点击“关联新设备”</li>
                 <li>将手机对准屏幕扫描二维码➡️</li>
@@ -184,12 +210,12 @@ function Profile() {
         </Col>
         <Col span={6}>
           <Flex gap='middle' vertical justify={'center'} align={'center'}>
-          <Input
-        placeholder=""
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-      />
-            <QRCode size={264} value={text} errorLevel='L' />
+            <QRCode size={264} value={qrCode} errorLevel='L' />
+            <Conditional
+              condition={isPermitted(PERM_USE_WHATSAPP)}
+              whenTrue={<Button type='primary' onClick={handelGernaterQR}>生成</Button>}
+            />
+
           </Flex>
         </Col>
       </Row>

wai-server/core/baileys/index.js

@@ -118,7 +118,7 @@ const createWhatsApp = async (phone) => {
                     logger,
                     // pass this so that baileys can request a reupload of media
                     // that has been deleted
-                    reuploadRequest: sock.updateMediaMessage
+                    reuploadRequest: waSocket.updateMediaMessage
                 }
               )
               // save to file