Mx qr支付

src/api/config.js

@@ -55,6 +55,7 @@ export const APP_FIRSTPAY_CONFIG=BASE_PREFIX+"recharge/firstPayConfig";
 export const APP_ACCOUNTS_PAY_INFO=BASE_PREFIX+"api/get_accounts_pay_info";
 export const APP_PAYMENT_ORDER=BASE_PREFIX+"payment_entry/pay";
 export const APP_PAY_ORDER_LIST=BASE_PREFIX+"pay/orderList";
+export const APP_PAYMENT_ORDER_QR=BASE_PREFIX+"payment_entry/payqr";
 //pay
 //withdraw
 export const APP_WITHDRAW_TAX="api/api/withDrawTax";

src/constants/routes.js

@@ -43,7 +43,8 @@ const ROUTE_PATH={
     SPORTS:"/sports",
     RACING:"/racing",
     EDIT_PHONE:"#/editPhone",
-    EDIT_EMAIL:"#/editEmail"
+    EDIT_EMAIL:"#/editEmail",
+    PAY_ORDER_QR:"#/orderQR",
 }
 
 export {

src/db/routes.js

@@ -438,4 +438,17 @@ export const routes=[
         lpath:"#/signin",//登录path
         subs:[]
     },
+    {
+        path: "#/orderQR",
+        type: 1,
+        side: 0,
+        block:1,//块排序
+        title: "links.route_title.payorder",
+        icon:"",
+        fill:";;",//icon 颜色 默认 选中 本身颜色
+        component:"paymentOrderQR",
+        login:1,//0,1 检不检查登录
+        lpath:"#/signin",//登录path
+        subs:[]
+    },
 ]

src/features/api.js

@@ -31,7 +31,7 @@ import {
     APP_MAIL_TAKE, APP_MEX_WITHDRAW_SET_INFO,
     APP_PAGE_MODULES,
     APP_PAY_ORDER_LIST,
-    APP_PAYMENT_ORDER, APP_PROTECT_CHECK, APP_PROTECT_GET,
+    APP_PAYMENT_ORDER, APP_PAYMENT_ORDER_QR, APP_PROTECT_CHECK, APP_PROTECT_GET,
     APP_RECHARGE_CONFIG,
     APP_REDPACK_CHECK,
     APP_REDPACK_CONFIG,
@@ -359,6 +359,34 @@ export const reqPaymentOrder=createAsyncThunk(
         return response;
     }
 )
+export const reqPaymentOrderQR=createAsyncThunk(
+    APP_PAYMENT_ORDER_QR,
+    async (arg,thunkAPI)=>{
+        let {user,price,goodsName,payType,GiftsID,eventType,cpf_first}=arg;
+        let params={
+            url:APP_PAYMENT_ORDER_QR,
+            params:{
+                // userID:user.UserID,
+                tranType:"0502",
+                payAmt:price,
+                goodsName:goodsName,
+                buyIp:"",
+                pay_type:payType,
+                GiftsID:GiftsID,
+                // pck:APP_CHANNEL.Channel,
+                eventType:eventType?eventType:1,
+                AdId:user.GlobalUID,
+                userName:user.NickName,
+                userEmail:user.Email,
+                userPhone:user.Phone,
+                rand_str:Date.now(),
+                cpf_first:cpf_first?cpf_first:0
+            }
+        }
+        const response=await Http.get(params);
+        return response;
+    }
+)
 export const reqPayOrderList=createAsyncThunk(
     APP_PAY_ORDER_LIST,
     async (arg,thunkAPI)=>{

src/features/paySlice.js

@@ -5,7 +5,7 @@ import {
     reqChangePayPass, reqCPFSave,
     reqFirstPayConfig, reqForgetPayPass,
     reqGetAccountsPayInfo, reqMexWithdrawSetInfo,
-    reqPaymentOrder,
+    reqPaymentOrder, reqPaymentOrderQR,
     reqPayOrderList,
     reqRechargeConfig, reqRuWithdrawSetInfo,
     reqWithdrawBaseInfo,
@@ -109,6 +109,9 @@ const reducerPaymentOrder=(state,action,arg)=>{
 const paymentOrderStatus=(state,status,arg)=>{
     state.status.PaymentOrder=status;
 }
+const paymentOrderQRStatus=(state,status,arg)=>{
+    state.status.PaymentOrderQR=status;
+}
 const reducerPayOrderList=(state,action,arg)=>{
     let payload=action.payload;
     if (payload!=null&&payload.code===200){
@@ -267,6 +270,7 @@ export const Pay=createSlice({
             WithdrawPayout:REQ_STATUS.NONE,
             ForgetPayPass:REQ_STATUS.NONE,
             SaveCPF:REQ_STATUS.NONE,
+            PaymentOrderQR:REQ_STATUS.NONE,
         },
         config:[],
         payconfig:null,
@@ -314,6 +318,7 @@ export const Pay=createSlice({
         buildReqReducer(builder,reqMexWithdrawSetInfo,reducerWithdrawSetInfo,withdrawSetInfoStatus);
         buildReqReducer(builder,reqCPFSave,reducerSaveCPF,saveCPFStatus);
         buildReqReducer(builder,reqRuWithdrawSetInfo,reducerWithdrawSetInfo,withdrawSetInfoStatus);
+        buildReqReducer(builder,reqPaymentOrderQR,reducerPaymentOrder,paymentOrderQRStatus);
     },
 })
 export const {updatePayFinish,setChangePayPassType} = Pay.actions;
@@ -424,6 +429,9 @@ export const getCPFFirst=(state)=>{
 export const getSaveCPFStatus=(state)=>{
     return state.pay.status.SaveCPF;
 }
+export const getPaymentOrderQRStatus=(state)=>{
+    return state.pay.status.PaymentOrderQR;
+}
 export default Pay.reducer;
 
 export const reqPayConfig=(dispatch,userInfo)=>{

src/locales/languages/en_US.json

@@ -234,7 +234,14 @@
       "copy_all": "Copy All",
       "btn_chat": "Help chat",
       "notice": "1. The actual amount must be consistent with the order amount.\n2. Each clabe number can only be paid once, otherwise the payment will fail",
-      "title_help": "Help"
+      "title_help": "Help",
+      "qr_via": "Pay via",
+      "qr_code": "QR code",
+      "qr_title_1": "SHOW THIS CODE",
+      "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)"
     },
     "order_info_ru": {
       "p2p": {

src/locales/languages/es_MX.json

@@ -231,7 +231,14 @@
       "copy_all": "Copiar todo",
       "btn_chat": "Chat de ayuda",
       "notice": "1. El monto real debe ser consistente con el monto del pedido.\n2. Cada número de clabe solo se puede pagar una vez, de lo contrario el pago fallará",
-      "title_help": "Ayuda"
+      "title_help": "Ayuda",
+      "qr_via": "pago con",
+      "qr_code": "código QR",
+      "qr_title_1": "MOSTRAR ESTE CÓDIGO",
+      "qr_title_2": "A QUIÉN SE REALIZA EL PAGO",
+      "qr_tips_1": "1. Abra la aplicación bancaria y elija transferir el pago.",
+      "qr_tips_2": "2. Elija el método de pago mediante código QR CoDi.",
+      "qr_tips_3": "3. Escanea el código QR para completar el pago (también puedes guardar el código QR en el álbum de tu teléfono para identificar el pago)"
     },
     "order_info_ru": {
       "p2p": {

src/locales/languages/pt_BR.json

@@ -231,7 +231,14 @@
       "copy_all": "Copiar tudo",
       "btn_chat": "Chat de ajuda",
       "notice": "1. O valor real deve ser consistente com o valor do pedido.\n2. Cada número de clabe só pode ser pago uma vez, caso contrário o pagamento falhará",
-      "title_help": "Ajuda"
+      "title_help": "Ajuda",
+      "qr_via": "Pague via",
+      "qr_code": "Código QR",
+      "qr_title_1": "MOSTRAR ESTE CÓDIGO",
+      "qr_title_2": "A QUEM O PAGAMENTO É FEITO",
+      "qr_tips_1": "1. Abra o aplicativo bancário e escolha transferir o pagamento.",
+      "qr_tips_2": "2. Escolha o método de pagamento por código QR CoDi.",
+      "qr_tips_3": "3. Escaneie o QR para concluir o pagamento (você também pode salvar o QR no álbum do seu telefone para identificar o pagamento)"
     },
     "order_info_ru": {
       "p2p": {

src/locales/languages/ru_RU.json

@@ -231,7 +231,14 @@
       "copy_all": "Копировать все",
       "btn_chat": "Помощь чат",
       "notice": "1. Фактическая сумма должна соответствовать сумме заказа.\n2. Каждый номер клаба может быть оплачен только один раз, в противном случае платеж не будет выполнен.",
-      "title_help": "Помощь"
+      "title_help": "Помощь",
+      "qr_via": "Оплата по",
+      "qr_code": "QR-коду",
+      "qr_title_1": "ПОКАЗАТЬ ЭТОТ КОД",
+      "qr_title_2": "КОМУ ПРОИЗВОДИТСЯ ПЛАТЕЖ",
+      "qr_tips_1": "1. Откройте банковское приложение и выберите перевод платежа.",
+      "qr_tips_2": "2. Выберите способ оплаты с помощью QR-кода CoDi.",
+      "qr_tips_3": "3. Отсканируйте QR-код для завершения оплаты (вы также можете сохранить QR-код в альбоме своего телефона для идентификации платежа)"
     },
     "order_info_ru": {
       "p2p": {

src/locales/languages/zh_TW.json

@@ -231,7 +231,14 @@
       "copy_all": "全部複製",
       "btn_chat": "幫助聊天",
       "notice": "1. 實際金額必須與訂單金額一致。\n2. 每個號碼只能支付一次，否則付款失敗",
-      "title_help": "幫助"
+      "title_help": "幫助",
+      "qr_via": "支付方式",
+      "qr_code": "QR 圖碼",
+      "qr_title_1": "顯示此程式碼",
+      "qr_title_2": "付款對象",
+      "qr_tips_1": "1.開啟銀行APP，選擇轉帳付款。",
+      "qr_tips_2": "2.選擇CoDi二維碼付款方式。",
+      "qr_tips_3": "3.掃描二維碼完成付款（您也可以將二維碼儲存至手機相簿以識別付款）"
     },
     "order_info_ru": {
       "p2p": {

src/pages/index.jsx

@@ -61,7 +61,8 @@ export default {
     services:Services,
     kycPolicy:KycPolicy,
     checkIn:CheckIn,
-    Sport:Sport
+    Sport:Sport,
+    paymentOrderQR:PaymentOrder,
 }
 export const Header={
     deposit: DepositHeader,

src/widgets/WPaymentOrder/MX/MXPayOrder.jsx

@@ -1,5 +1,5 @@
-import {useSelector} from "react-redux";
-import {getCurrPayOrder} from "@features/paySlice";
+import {useDispatch, useSelector} from "react-redux";
+import {getCurrPayOrder, getPaymentOrderQRStatus} from "@features/paySlice";
 import React, {useEffect, useState} from "react";
 import Spring from "@components/Spring";
 import styles from "./styles.module.scss";
@@ -11,11 +11,19 @@ import {ReactComponent as Warning} from '@assets/singlesvg/warning.svg';
 import {ROUTE_PATH} from "@constants/routes";
 import {useNavigate} from "react-router-dom";
 import WOrderSuccess from "@widgets/WPaymentOrder/WOrderSuccess";
+import qricon from "@assets/pay/mx/qricon.png";
+import qrlogo from "@assets/pay/mx/qrlogo.png";
+import {REQ_STATUS} from "@api/config";
+import {reqPaymentOrderQR} from "@features/api";
+import {getUserInfo} from "@features/mainSlice";
 const i18n=global.i18n;
 const MXPayOrder = ({close}) => {
     const orderInfo=useSelector(getCurrPayOrder);
     const [leftTime,setLeftTime]=useState(0);
     const navigate=useNavigate();
+    const qrstatus=useSelector(getPaymentOrderQRStatus);
+    const dispatch = useDispatch();
+    const user=useSelector(getUserInfo);
     const getLeftTime=()=>{
         if (orderInfo==null)return 0;
         let deadline=Number(orderInfo.deadline);
@@ -51,9 +59,21 @@ const MXPayOrder = ({close}) => {
             }
         };
     },[orderInfo])
+
     const onClickCustom=()=>{
         navigate(ROUTE_PATH.CUSTOMER);
     }
+    const callback=()=>{
+        navigate(ROUTE_PATH.PAY_ORDER_QR,{replace:true});
+    }
+    const onClickQR=()=>{
+        if (qrstatus===REQ_STATUS.LOADING)return;
+        if (global.loadingCircular)global.loadingCircular.show(true);
+        let data={...orderInfo.arg,user,callback};
+        dispatch(reqPaymentOrderQR(data)).then((respose)=>{
+            if (global.loadingCircular)global.loadingCircular.hide();
+        })
+    }
     const renderCopyAll=()=>{
         let content=i18n.t("deposit.order_info_mx.title1")+":"+orderInfo.bank+"\n";
         content+=i18n.t("deposit.order_info_mx.title2")+":"+orderInfo.benefi+"\n";
@@ -191,13 +211,34 @@ const MXPayOrder = ({close}) => {
             </>
         )
     }
+    const renderQRBtn=()=>{
+        return (
+            <button className={"button-green"} onClick={() => {
+                onClickQR();
+            }}>
+                <div className={styles.qr_btn_con}>
+                    <div className={styles.qr_sub_con}>
+                        <img className={styles.qr_icon} src={qricon}/>
+                        <div className={styles.qr_text}>
+                            <span>{i18n.t("deposit.order_info_mx.qr_via")}</span>
+                            <span>{i18n.t("deposit.order_info_mx.qr_code")}</span>
+                        </div>
+                    </div>
+                    <div className={styles.qr_sub_con}>
+                        <img className={styles.qr_logo} src={qrlogo}/>
+                    </div>
+                </div>
+            </button>
+        )
+    }
     const renderOrderInfo = () => {
         return (
             <div className={styles.order_info}>
                 {renderBasic()}
                 {/*{renderCopyAll()}*/}
                 {renderTips()}
-                {renderCustomer()}
+                {/*{renderCustomer()}*/}
+                {renderQRBtn()}
             </div>
         )
     }

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

@@ -0,0 +1,104 @@
+import React from "react";
+import WOrderSuccess from "@widgets/WPaymentOrder/WOrderSuccess";
+import {useSelector} from "react-redux";
+import {getCurrPayOrder} from "@features/paySlice";
+import Spring from "@components/Spring";
+import styles from "./styles.module.scss";
+import codiicon from "@assets/pay/mx/codiicon.png";
+import {formatDate} from "@utils/helpers";
+const i18n=global.i18n;
+
+const MXOrderQR=({close})=>{
+    const orderInfo=useSelector(getCurrPayOrder);
+    const renderTitle=()=>{
+        return (
+            <div className={styles.title_con}>
+                <span>{i18n.t("deposit.order_info_mx.qr_title_1")}</span>
+                <span>{i18n.t("deposit.order_info_mx.qr_title_2")}</span>
+            </div>
+        )
+    }
+    const renderQR=()=>{
+        let qrdata=`data:image/png;base64,${orderInfo.payQrImg}`;
+        return (
+            <div className={styles.qr_con}>
+                <div className={styles.qr_content}>
+                    <img className={styles.qr_img} src={qrdata}/>
+                    <img className={styles.codi_img} src={codiicon}/>
+                </div>
+                {/*<button className={"button-green"}></button>*/}
+            </div>
+        )
+    }
+    const renderInfo = () => {
+        let createAt = Number(orderInfo.createAt);
+        return (
+            <div className={styles.info_con}>
+                <div className={styles.info_item}>
+                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title2")}</span>
+                    <span>{orderInfo.benefi}</span>
+                </div>
+                <div className={styles.info_item}>
+                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title3")}</span>
+                    <span className={styles.money}>{global.DOLLAR + orderInfo.amount}</span>
+                </div>
+                <div className={styles.info_item}>
+                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title4")}</span>
+                    <span>{orderInfo.clabe}</span>
+                </div>
+                <div className={styles.info_item}>
+                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title5")}</span>
+                    <span>{orderInfo.concepto}</span>
+                </div>
+                <div className={styles.info_item}>
+                    <span className={styles.title}>{i18n.t("deposit.order_info.create_date")}</span>
+                    <span>{formatDate(createAt)}</span>
+                </div>
+            </div>
+        )
+    }
+    const renderTips=()=>{
+        return (
+            <div className={styles.tips_con}>
+                <span>{i18n.t("deposit.order_info_mx.qr_tips_1")}</span>
+                <span>{i18n.t("deposit.order_info_mx.qr_tips_2")}</span>
+                <span>{i18n.t("deposit.order_info_mx.qr_tips_3")}</span>
+            </div>
+        )
+    }
+    const renderOrderInfo = () => {
+        return (
+            <div className={styles.order_info}>
+                {renderTitle()}
+                {renderQR()}
+                {renderInfo()}
+                {renderTips()}
+            </div>
+        )
+    }
+    const renderOrder = () => {
+        return (
+            <Spring type="slideUp" className={styles.container}>
+                {renderOrderInfo()}
+            </Spring>
+        )
+    }
+    const renderView = () => {
+        if (orderInfo != null) {
+            if (orderInfo.status === "success") {
+                return (
+                    <WOrderSuccess close={close}/>
+                )
+            } else {
+                return renderOrder();
+            }
+        }
+        return (<></>);
+    }
+    return (
+        <>
+            {renderView()}
+        </>
+    )
+}
+export default MXOrderQR;

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

@@ -0,0 +1,85 @@
+.container{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 1rem;
+  width: 100%;
+  gap: 0.5rem;
+}
+.order_info {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 2rem;
+  & .title_con{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    color: var(--header);
+    font-weight: 530;
+  }
+  & .qr_con{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    & .qr_content{
+      width: 80%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border-radius: 1.9rem;
+      gap: 0.5rem;
+      padding: 1.5rem;
+      aspect-ratio: 1;
+      background-color: #fff;
+      & .qr_img{
+        width: 80%;
+        height: auto;
+      }
+      & .codi_img{
+        width: 70%;
+        height: auto;
+      }
+    }
+  }
+  & .info_con{
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+    & .info_item{
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0.5rem 0.86rem;
+      background: var(--card-bg);
+      border-radius: 0.43rem;
+      color: var(--header);
+      font-size: 1rem;
+      & .title{
+        white-space: nowrap;         /* 强制文本不换行 */
+        overflow: hidden;            /* 隐藏超出部分 */
+        text-overflow: ellipsis;     /* 显示省略号 */
+        color: #FFE827;
+        font-weight: 600;
+        width: 9.5rem;
+      }
+      & .money{
+        font-size: 1.1rem;
+        font-weight: 600;
+        //color: #fdea68;
+      }
+    }
+  }
+  & .tips_con{
+    display: flex;
+    flex-direction: column;
+    color: var(--header);
+    //font-size: 1rem;
+    gap: 1rem;
+  }
+}

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

@@ -136,4 +136,37 @@
   height: 1.5rem;
   fill: #fff;
   margin-right: 0.5rem;
+}
+.qr_btn_con{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 4.8rem;
+  & .qr_sub_con{
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 1.3rem;
+    & .qr_text{
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      color: var(--header);
+      font-weight: 600;
+      font-size: 1.1rem;
+    }
+    & .qr_icon{
+      width: 3rem;
+      height: auto;
+    }
+    & .qr_logo{
+      width: 6.8rem;
+      height: auto;
+    }
+  }
 }

src/widgets/WPaymentOrder/index.jsx

@@ -2,13 +2,21 @@ import styles from './styles.module.scss';
 import BRPayOrder from "@widgets/WPaymentOrder/BR/BRPayOrder";
 import MXPayOrder from "@widgets/WPaymentOrder/MX/MXPayOrder";
 import RUPayOrder from "@widgets/WPaymentOrder/RU/RUPayOrder";
+import MXOrderQR from "@widgets/WPaymentOrder/MX/QR/MXOrderQR";
+import {useLocation} from "react-router-dom";
+import {ROUTE_PATH} from "@constants/routes";
 const WPaymentOrder=({close})=>{
+    const {hash} = useLocation();
+
     const components={
         "br":BRPayOrder,
         "mx":MXPayOrder,
         "ru":RUPayOrder
     }
     const renderPayOrder=()=>{
+        if (hash===ROUTE_PATH.PAY_ORDER_QR){
+            return <MXOrderQR close={close}/>
+        }
         let areaItem=global.getLocalAreaItem();
         if (areaItem!=null){
             let Comp=components[areaItem.code];