ソースを参照

Merge branch 'feature_moreStaDimen' of Web/contentCooper into master

jihuaqiang 1 日 前
コミット
1e99872d7e

+ 1 - 0
package.json

@@ -15,6 +15,7 @@
     "antd": "^5.18.3",
     "axios": "^1.8.4",
     "lodash-es": "^4.17.21",
+    "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",

+ 1 - 0
src/http/api.ts

@@ -36,6 +36,7 @@ export const getVideoContentCategoryListApi = `${import.meta.env.VITE_API_URL}/c
 export const getVideoContentCoverFrameListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentCoverFrameList`
 export const getVideoContentListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentList`
 export const getShareQrPic = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/getSharePic`
+export const getShareQrLink = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/getShareUrlLink`
 
 /* 数据统计 */
 export const gzhDataList = `${import.meta.env.VITE_API_URL}/contentPlatform/datastat/gzh`

+ 4 - 3
src/views/publishContent/weCom/components/linkDetailModal/index.tsx

@@ -3,10 +3,11 @@ import { Modal, Table, Button, Space, Tooltip, message, Typography } from 'antd'
 import { CopyOutlined, PlayCircleOutlined, DownloadOutlined, LinkOutlined, QrcodeOutlined } from '@ant-design/icons';
 import { WeComPlan } from '@src/views/publishContent/weCom/type'; // Assuming type location
 import copy from 'copy-to-clipboard';
-import { getShareQrPic } from '@src/http/api';
+import { getShareQrLink } from '@src/http/api';
 import http from '@src/http';
 import modal from 'antd/es/modal';
 import VideoPlayModal from '../videoPlayModal';
+import { QRCodeSVG } from 'qrcode.react';
 
 // import QRCode from 'qrcode.react'; // Consider adding this dependency if not present
 
@@ -51,14 +52,14 @@ const copyPushLink = (video: WeComPlan) => {
 };
 
 const showQRCode = (video: WeComPlan) => {
-  http.get<string>(getShareQrPic, {
+  http.get<string>(getShareQrLink, {
 		params: {
 			pageUrl: video.pageUrl,
 		}
 	}).then(res => {
 		modal.info({
 			title: '二维码',
-			content: <img src={res.data} alt="二维码" />,
+			content: <QRCodeSVG value={res.data} size={256} />,
 		});
 	}).catch(err => {
 		message.error(err.msg || '获取二维码失败');

+ 4 - 3
src/views/publishContent/weCom/components/planDetailModal/index.tsx

@@ -4,8 +4,9 @@ import { CopyOutlined, PlayCircleOutlined, DownloadOutlined } from '@ant-design/
 import { WeComPlan, WeComPlanType } from '@src/views/publishContent/weCom/type';
 import copy from 'copy-to-clipboard';
 import VideoPlayModal from '../videoPlayModal';
-import { getShareQrPic } from '@src/http/api';
+import { getShareQrLink } from '@src/http/api';
 import http from '@src/http';
+import { QRCodeSVG } from 'qrcode.react';
 
 const { Text } = Typography;
 
@@ -32,7 +33,7 @@ const PlanDetailModal: React.FC<PlanDetailModalProps> = ({ visible, onClose, pla
 	
 	
 	const getShareQr = (pageUrl: string) => {
-		http.get<string>(getShareQrPic, {
+		http.get<string>(getShareQrLink, {
 			params: {
 				pageUrl,
 			}
@@ -175,7 +176,7 @@ const PlanDetailModal: React.FC<PlanDetailModalProps> = ({ visible, onClose, pla
         <Descriptions.Item label="二维码">
           {qrCode ? (
              <Space direction="vertical" align="start">
-                 <img style={{ width: 150, height: 150 }} src={qrCode} alt="二维码" />
+                 <QRCodeSVG style={{ width: 150, height: 150 }} value={qrCode} />
                  {/* You might want to add a logo overlay if needed */}
              </Space>
           ) : (

+ 4 - 3
src/views/publishContent/weCom/index.tsx

@@ -4,7 +4,7 @@ import type { TableProps } from 'antd';
 import styles from './index.module.css';
 import { AddWeComPlanParam, WeComPlan, WeComPlanListResponse, WeComPlanType } from './type';
 import request from '@src/http/index';
-import { deleteQwPlanApi, getQwPlanListApi, getShareQrPic, saveQwPlanApi } from "@src/http/api"
+import { deleteQwPlanApi, getQwPlanListApi, getShareQrLink, saveQwPlanApi } from "@src/http/api"
 import LinkDetailModal from './components/linkDetailModal';
 import PlanDetailModal from './components/planDetailModal';
 import http from '@src/http/index';
@@ -12,6 +12,7 @@ import copy from 'copy-to-clipboard';
 import VideoPlayModal from './components/videoPlayModal';
 import modal from 'antd/es/modal';
 import AddPlanModal from './components/addPlanModal';
+import { QRCodeSVG } from 'qrcode.react';
 // Define a type for the expected API response (adjust if needed based on actual API)
 const TableHeight = window.innerHeight - 380;
 const WeGZHContent: React.FC = () => {
@@ -171,14 +172,14 @@ const WeGZHContent: React.FC = () => {
 	};
 
 	const showQrCodeModal = (pageUrl: string) => {
-		http.get<string>(getShareQrPic, {
+		http.get<string>(getShareQrLink, {
 			params: {
 				pageUrl,
 			}
 		}).then(res => {
 			modal.info({
 				title: '二维码',
-				content: <img src={res.data} alt="二维码" />,
+				content: <QRCodeSVG value={res.data} size={256} />,
 			});
 		}).catch(err => {
 			message.error(err.msg || '获取二维码失败');

+ 5 - 3
src/views/publishContent/weGZH/components/PunlishPlanDetailModal/index.tsx

@@ -6,9 +6,10 @@ import { VideoItem } from '../types';
 import VideoPlayModal from '@src/views/publishContent/weCom/components/videoPlayModal';
 import modal from 'antd/es/modal';
 import http from '@src/http';
-import { getShareQrPic } from '@src/http/api';
+import { getShareQrLink } from '@src/http/api';
 import copy from 'copy-to-clipboard';
 import { Typography } from 'antd';
+import {QRCodeSVG} from 'qrcode.react';
 const { Text } = Typography;
 interface PunlishPlanDetailModalProps {
   visible: boolean;
@@ -97,14 +98,15 @@ const PunlishPlanDetailModal: React.FC<PunlishPlanDetailModalProps> = ({
 	};
 	
 	const showQRCode = (video: VideoItem) => {
-		http.get<string>(getShareQrPic, {
+		http.get<string>(getShareQrLink, {
 			params: {
 				pageUrl: video.pageUrl,
 			}
 		}).then(res => {
+			// 使用二维码生成库生成二维码
 			modal.info({
 				title: '二维码',
-				content: <img src={res.data} alt="二维码" />,
+				content: <QRCodeSVG value={res.data} size={256} />,
 			});
 		}).catch(err => {
 			message.error(err.msg || '获取二维码失败');

+ 5 - 0
yarn.lock

@@ -4338,6 +4338,11 @@ qrcode.react@^3.1.0:
   resolved "https://registry.npmmirror.com/qrcode.react/-/qrcode.react-3.1.0.tgz"
   integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
 
+qrcode.react@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/qrcode.react/-/qrcode.react-4.2.0.tgz#1bce8363f348197d145c0da640929a24c83cbca3"
+  integrity sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz"