添加钱包用户

2 days ago · 3eda228f29
6 changed files with 184 additions and 1 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/api/index.ts
+++ b/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)
+  },
 }
--- a/src/pages/chat/group-list/index.tsx
+++ b/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>}
    </>
  )
 }
--- a/src/pages/wallet-user/index.tsx
+++ b/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
--- a/src/route/routes.ts
+++ b/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: '群组成员',