From 3eda228f2962f34fdc05d4b685054a4637ee878b Mon Sep 17 00:00:00 2001 From: mac Date: Fri, 22 Nov 2024 17:26:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=92=B1=E5=8C=85=E7=94=A8?= =?UTF-8?q?=E6=88=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 15 +++++ package.json | 1 + src/api/index.ts | 7 +++ src/pages/chat/group-list/index.tsx | 65 ++++++++++++++++++++- src/pages/wallet-user/index.tsx | 87 +++++++++++++++++++++++++++++ src/route/routes.ts | 10 ++++ 6 files changed, 184 insertions(+), 1 deletion(-) create mode 100644 src/pages/wallet-user/index.tsx diff --git a/package-lock.json b/package-lock.json index be7a7b7..ba2dbf5 100644 --- 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", diff --git a/package.json b/package.json index 3aa7c1d..56b5e00 100644 --- 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", diff --git a/src/api/index.ts b/src/api/index.ts index aa6b769..bd7df59 100644 --- 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) + }, } diff --git a/src/pages/chat/group-list/index.tsx b/src/pages/chat/group-list/index.tsx index ccdd41c..f4331b9 100644 --- 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) => (
history.push(`/group-member?id=${item.groupInfo.groupID}`)}>群成员
@@ -215,6 +221,10 @@ const ChatGroupList = () => { dismissGroup(item)}>
解散群组
 +
{ + currnetItem.current = item; + setVisibleCode(true) + }}>二维码
) } @@ -276,6 +286,48 @@ const ChatGroupList = () => { ); + 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 = () => { } + + {visibleCode && setVisibleCode(false)} okText="下载" onOk={downloadQRCode}> +
+
+
+ +
{currnetItem.current.groupInfo.groupName}
+
+
+
+ } ) } diff --git a/src/pages/wallet-user/index.tsx b/src/pages/wallet-user/index.tsx new file mode 100644 index 0000000..37d9879 --- /dev/null +++ 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: + } + ] + + 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 ( + <> + + + + } + searchConfigList={searchConfigList} + apiFun={api.get_walletUser} + columns={columns} + rowKey="id" + /> + setVisible(false)} width={500} title="新建用户"> +
+ + + + + + + + + +
+ + + ) +} + +export default WalletUser \ No newline at end of file diff --git a/src/route/routes.ts b/src/route/routes.ts index 1734dcb..7cfbb10 100644 --- 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: '群组成员',