Mx pay qr 保存

src/locales/languages/en_US.json

@@ -241,7 +241,9 @@
       "qr_title_2": "TO WHOM THE PAYMENT IS MADE",
       "qr_tips_1": "1. Open the banking app and choose to transfer payment.",
       "qr_tips_2": "2. Choose the CoDi QR code method to pay.",
-      "qr_tips_3": "3. Scan QR to complete payment (you can also save QR to your phone's album to identify the payment)"
+      "qr_tips_3": "3. Scan QR to complete payment (you can also save QR to your phone's album to identify the payment)",
+      "qr_save": "Save QR code",
+      "qr_save_success": "Saved successfully"
     },
     "order_info_ru": {
       "p2p": {

src/widgets/WPaymentOrder/MX/QR/MXOrderQR.jsx

@@ -6,10 +6,30 @@ import Spring from "@components/Spring";
 import styles from "./styles.module.scss";
 import codiicon from "@assets/pay/mx/codiicon.png";
 import {formatDate} from "@utils/helpers";
+import html2canvas from "html2canvas";
+import {toast} from "react-toastify";
 const i18n=global.i18n;
 
 const MXOrderQR=({close})=>{
     const orderInfo=useSelector(getCurrPayOrder);
+    const savePayQR = () => {
+        const style = document.createElement('style');
+        document.head.appendChild(style);
+        style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
+        // 获取需要截图的元素
+        const element = document.getElementById('payQR');
+
+        // 使用 html2canvas 捕获元素并生成图片
+        html2canvas(element,{
+        }).then(canvas => {
+            // 创建一个链接元素
+            const link = document.createElement('a');
+            link.href = canvas.toDataURL('image/png'); // 获取图片数据 URL
+            link.download = 'payQR.png'; // 设置下载的文件名
+            link.click(); // 触发下载
+            toast.success(i18n.t("deposit.order_info_mx.qr_save_success"));
+        });
+    };
     const renderTitle=()=>{
         return (
             <div className={styles.title_con}>
@@ -22,11 +42,13 @@ const MXOrderQR=({close})=>{
         let qrdata=`data:image/png;base64,${orderInfo.payQrImg}`;
         return (
             <div className={styles.qr_con}>
-                <div className={styles.qr_content}>
+                <div id={"payQR"} className={styles.qr_content}>
                     <img className={styles.qr_img} src={qrdata}/>
                     <img className={styles.codi_img} src={codiicon}/>
                 </div>
-                {/*<button className={"button-green"}></button>*/}
+                <button onClick={()=>{
+                    savePayQR();
+                }} className={`button-green ${styles.save_btn}`}>{i18n.t("deposit.order_info_mx.qr_save")}</button>
             </div>
         )
     }

src/widgets/WPaymentOrder/MX/QR/styles.module.scss

@@ -25,7 +25,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 1rem;
+    gap: 1.5rem;
+    & .save_btn{
+      width: 80%;
+    }
     & .qr_content{
       width: 80%;
       display: flex;