添加钱包用户

package-lock.json

@@ -31,6 +31,7 @@
         "less": "^3.11.1",
         "less-loader": "^5.0.0",
         "moment": "^2.24.0",
+        "qrcode.react": "^4.1.0",
         "react": "^16.13.1",
         "react-canvas-nest": "^1.0.10",
         "react-dom": "^16.13.1",
@@ -18879,6 +18880,14 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.1.0.tgz",
+      "integrity": "sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
@@ -41589,6 +41598,12 @@
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
     },
+    "qrcode.react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.1.0.tgz",
+      "integrity": "sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==",
+      "requires": {}
+    },
     "qs": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",

package.json

@@ -26,6 +26,7 @@
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
     "moment": "^2.24.0",
+    "qrcode.react": "^4.1.0",
     "react": "^16.13.1",
     "react-canvas-nest": "^1.0.10",
     "react-dom": "^16.13.1",

src/api/index.ts

@@ -99,4 +99,11 @@ export default {
   delete_buzzDefaultTokens(params) {
     return $axios.post('/admin/delBuzzSymbolCreate', params)
   },
+  // wallet-user
+  get_walletUser(params) {
+    return $axios.post('/admin/buzzUserList', params)
+  },
+  create_walletUser(params) {
+    return $axios.post('/admin/buzzNewUser', params)
+  },
 }

src/pages/chat/group-list/index.tsx

@@ -8,6 +8,7 @@ import { Button, Drawer, Form, Input, Modal, notification, Popconfirm, Select, U
 import TextArea from "antd/lib/input/TextArea";
 import React, { useRef, useState } from "react"
 import { useLocation, useHistory } from "react-router-dom";
+import { QRCodeCanvas } from 'qrcode.react';
 
 
 const ChatGroupList = () => {
@@ -19,11 +20,16 @@ const ChatGroupList = () => {
   const tableMemberRef = useRef(null)
 
   const [visible, setVisible] = useState(false)
+  const [visibleCode, setVisibleCode] = useState(false)
   const [visibleModal, setVisibleModal] = useState(false)
   const [visibleModal1, setVisibleModal1] = useState(false)
   const [visibleModal2, setVisibleModal2] = useState(false)
   const [loading, setLoading] = useState(false)
 
+  const qrCodeDivRef = useRef(null);
+
+  const currnetItem = useRef({} as any)
+
   const groupOperate = useRef('' as 'c' | 'u')
 
   const [form] = Form.useForm()
@@ -200,7 +206,7 @@ const ChatGroupList = () => {
     {
       title: 'options',
       fixed: 'right',
-      width: 280,
+      width: 300,
       render: (item) => (
         <div className="" style={{ display: 'flex' }}>
           <div style={{ fontSize: 12, color: '#1890ff', textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => history.push(`/group-member?id=${item.groupInfo.groupID}`)}>群成员</div>
@@ -215,6 +221,10 @@ const ChatGroupList = () => {
           <Popconfirm title="确认解散吗？" onConfirm={() => dismissGroup(item)}>
             <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }}>解散群组</div>
           </Popconfirm>
+          <div style={{ fontSize: 12, color: '#1890ff', marginLeft: 15, textWrap: 'nowrap', cursor: 'pointer' }} onClick={() => {
+            currnetItem.current = item;
+            setVisibleCode(true)
+          }}>二维码</div>
         </div>
       )
     }
@@ -276,6 +286,48 @@ const ChatGroupList = () => {
     </div>
   );
 
+  const downloadQRCode = () => {
+    // console.log(`https://share.buzz-up.io/g/join/${currnetItem.current.groupInfo.groupID}`);
+
+    const divElement = qrCodeDivRef.current;
+
+    // 创建一个 canvas 元素
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // 获取二维码的图片元素
+    const qrCanvas = divElement.querySelector('canvas'); // 通过查询二维码生成的 canvas
+
+    if (!qrCanvas) {
+      alert('二维码未加载!');
+      return;
+    }
+
+    // 设置 canvas 尺寸（二维码尺寸 + 文本高度 + 内边距）
+    const padding = 20;
+    canvas.width = qrCanvas.width + 2 * padding; // 宽度加两倍内边距
+    canvas.height = qrCanvas.height + 40 + 2 * padding; // 高度加文本高度和内边距
+
+    // 先填充背景为白色
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // 将二维码绘制到 canvas 上，考虑内边距
+    ctx.drawImage(qrCanvas, padding, padding);
+
+    // 绘制文本
+    ctx.font = '18px Arial';
+    ctx.textAlign = 'center';
+    ctx.fillStyle = '#000';
+    ctx.fillText(currnetItem.current.groupInfo.groupName, canvas.width / 2, qrCanvas.height + padding + 30); // 文本绘制在二维码下方
+
+    // 创建一个下载链接
+    const link = document.createElement('a');
+    link.href = canvas.toDataURL('image/png'); // 将 canvas 转换为图片的 Base64 格式
+    link.download = 'qrcode-with-text.png'; // 设置下载文件名
+    link.click(); // 自动点击链接以触发下载
+  };
+
   // 用户头像	用户昵称	用户ID	性别	手机号	在线状态	
   return (
     <>
@@ -439,6 +491,17 @@ const ChatGroupList = () => {
           </Form.Item>
         </Form>
       </Drawer>}
+
+      {visibleCode && <Modal visible={visibleCode} onCancel={() => setVisibleCode(false)} okText="下载" onOk={downloadQRCode}>
+        <div>
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <div style={{ paddingLeft: 25, paddingRight: 25, paddingTop: 15, paddingBottom: 10, borderRadius: 5, backgroundColor: '#fff' }} ref={qrCodeDivRef}>
+              <QRCodeCanvas value={`https://share.buzz-up.io/g/join/${currnetItem.current.groupInfo.groupID}`} size={200} title="123" level="M" />
+              <div style={{ color: '#000', fontWeight: 'bold', fontSize: 18, textAlign: 'center' }}>{currnetItem.current.groupInfo.groupName}</div>
+            </div>
+          </div>
+        </div>
+      </Modal>}
     </>
   )
 }

src/pages/wallet-user/index.tsx

@@ -0,0 +1,87 @@
+import api from "@/api"
+import MyTable from "@/components/MyTable"
+import { Button, Drawer, Form, Input, notification } from "antd"
+import React, { useRef, useState } from "react"
+
+const WalletUser = () => {
+
+  const [visible, setVisible] = useState(false)
+  const [form] = Form.useForm()
+  const tableRef = useRef(null)
+
+  const columns = [
+    {
+      title: '钱包地址',
+      dataIndex: 'address',
+      width: 200
+    },
+    {
+      title: '邀请码',
+      dataIndex: 'inviti_code',
+      width: 200
+    },
+    {
+      title: '邀请人的码',
+      dataIndex: 'inviti',
+      width: 200
+    },
+    {
+      title: '邀请人数',
+      dataIndex: 'invite_number',
+    },
+  ]
+
+  const searchConfigList = [
+    {
+      key: 'search',
+      slot: <Input placeholder="请输入" />
+    }
+  ]
+
+  const onFinish = async (values) => {
+    try {
+      setVisible(false)
+      const res: any = await api.create_walletUser({ ...values })
+      if (res.code === 0) {
+        tableRef.current.update()
+        notification.success({
+          message: '新建成功'
+        })
+      }
+    } catch (error) {
+
+    }
+  }
+
+  return (
+    <>
+      <MyTable
+        ref={tableRef}
+        header={
+          <div>
+            <Button type="primary" onClick={() => setVisible(true)}>新建用户</Button>
+          </div>
+        }
+        searchConfigList={searchConfigList}
+        apiFun={api.get_walletUser}
+        columns={columns}
+        rowKey="id"
+      />
+      <Drawer visible={visible} onClose={() => setVisible(false)} width={500} title="新建用户">
+        <Form onFinish={onFinish} form={form} layout="vertical">
+          <Form.Item label="钱包主地址" name="address" rules={[{ required: true, message: '请输入' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item label="自定义推荐码" name="inviti_code" rules={[{ required: true, message: '请输入' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item>
+            <Button htmlType="submit" type="primary">确认</Button>
+          </Form.Item>
+        </Form>
+      </Drawer>
+    </>
+  )
+}
+
+export default WalletUser

src/route/routes.ts

@@ -11,6 +11,7 @@ import ChatGroupList from "@/pages/chat/group-list"
 import GroupMember from "@/pages/chat/group-member"
 import TokenList from "@/pages/coin/token-list"
 import DefaultList from "@/pages/coin/default-list"
+import WalletUser from "@/pages/wallet-user"
 
 const routes = [
   {
@@ -22,6 +23,15 @@ const routes = [
     component: Home,
     routes: []
   },
+  {
+    path: '/wallet-user',
+    name: '钱包用户',
+    exact: true,
+    key: 'wallet-user',
+    icon: HomeOutlined,
+    component: WalletUser,
+    routes: []
+  },
   {
     path: '/group-member',
     name: '群组成员',