Mx 订单修改

src/locales/languages/en_US.json

@@ -231,7 +231,8 @@
       "title5": "Concept",
       "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"
+      "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"
     },
     "promotions": {
       "tips": "Participate in promotions",

src/locales/languages/es_MX.json

@@ -220,6 +220,17 @@
       "okey": "OK",
       "success": "Recarga exitosa"
     },
+    "order_info_mx": {
+      "title1": "Banco de destino",
+      "title2": "Beneficiário",
+      "title3": "Importe del pago",
+      "title4": "CLABE",
+      "title5": "Concepto",
+      "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"
+    },
     "promotions": {
       "tips": "Participar en promociones",
       "banner_tips": "Súper bono de bonificación, obtén un bono extra de {0} en el depósito.",

src/locales/languages/pt_BR.json

@@ -220,6 +220,17 @@
       "okey": "OK",
       "success": "Recarga bem-sucedida"
     },
+    "order_info_mx": {
+      "title1": "Banco de destino",
+      "title2": "Beneficiário",
+      "title3": "Valor do pagamento",
+      "title4": "CLABE",
+      "title5": "Conceito",
+      "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"
+    },
     "promotions": {
       "tips": "Participar de promoções",
       "banner_tips": "Super bônus, ganhe um bônus extra de {0} no depósito.",

src/locales/languages/ru_RU.json

@@ -220,6 +220,17 @@
       "okey": "ОК",
       "success": "Баланс успешно пополнен"
     },
+    "order_info_mx": {
+      "title1": "Банк назначения",
+      "title2": "Бенефициар",
+      "title3": "Сумма платежа",
+      "title4": "КЛЭБЕ",
+      "title5": "Концепция",
+      "copy_all": "Копировать все",
+      "btn_chat": "Помощь чат",
+      "notice": "1. Фактическая сумма должна соответствовать сумме заказа.\n2. Каждый номер клаба может быть оплачен только один раз, в противном случае платеж не будет выполнен.",
+      "title_help": "Помощь"
+    },
     "promotions": {
       "tips": "Участвовать в акциях",
       "banner_tips": "Супер бонус, получите дополнительный бонус {0} на депозит.",

src/locales/languages/zh_TW.json

@@ -220,6 +220,17 @@
       "okey": "確定",
       "success": "充值成功"
     },
+    "order_info_mx": {
+      "title1": "目的地銀行",
+      "title2": "受益人",
+      "title3": "付款金額",
+      "title4": "克拉貝",
+      "title5": "概念",
+      "copy_all": "全部複製",
+      "btn_chat": "幫助聊天",
+      "notice": "1. 實際金額必須與訂單金額一致。\n2. 每個號碼只能支付一次，否則付款失敗",
+      "title_help": "幫助"
+    },
     "promotions": {
       "tips": "參與促銷",
       "banner_tips": "超級獎金，存款獲得額外 {0} 獎金。",

src/pages/index.jsx

@@ -2,6 +2,7 @@ import {lazy} from "react";
 import DepositHeader from "@widgets/WDeposit/DepositHeader";
 import WithdrawHeader from "@widgets/WWithdraw/WithdrawHeader";
 import WCashWheelHeader from "@widgets/WCashWheel/WCashWheelHeader";
+import WOrderHeader from "@widgets/WPaymentOrder/WOrderHeader/WOrderHeader";
 const ModulePage=lazy(()=>import('@pages/ModulePage'));
 const Home=lazy(()=>import('@pages/Home'));
 const Login=lazy(()=>import("@pages/Login"));
@@ -65,5 +66,6 @@ export default {
 export const Header={
     deposit: DepositHeader,
     withdraw:WithdrawHeader,
-    cashwheel:WCashWheelHeader
+    cashwheel:WCashWheelHeader,
+    paymentOrder:WOrderHeader
 }

src/widgets/WPaymentOrder/WOrderHeader/MXHeaderRight.jsx

@@ -0,0 +1,36 @@
+import styles from "./styles.module.scss";
+import SvgIcon from "@components/SvgIcon";
+import {useState} from "react";
+import Popup from "@components/Popup";
+import help_img from "@assets/pay/mx/mxdrule.png";
+const i18n=global.i18n;
+const MXHeaderRight=()=>{
+    const [showHelp,setShowHelp]=useState(false);
+    const renderHelp=()=>{
+        return (
+            <Popup onClose={()=>{
+                setShowHelp(false);
+            }} open={showHelp} popupClass={styles.mx_help_con}>
+                <div className={styles.mx_help}>
+                    <div className={styles.title}>
+                        <span>{i18n.t("deposit.order_info_mx.title_help")}</span>
+                    </div>
+                    <div className={styles.h_img}>
+                        <img src={help_img}/>
+                    </div>
+                </div>
+            </Popup>
+        )
+    }
+    return (
+        <div className={styles.mx_right}>
+            <button className={styles.right_btn} onClick={() => {
+                setShowHelp(true);
+            }}>
+                <SvgIcon className={styles.icon} herf={"icon_Help"}/>
+            </button>
+            {renderHelp()}
+        </div>
+    )
+}
+export default MXHeaderRight;

src/widgets/WPaymentOrder/WOrderHeader/WOrderHeader.jsx

@@ -0,0 +1,43 @@
+import styles from "./styles.module.scss";
+import SvgIcon from "@components/SvgIcon";
+import MXHeaderRight from "@widgets/WPaymentOrder/WOrderHeader/MXHeaderRight";
+const i18n=global.i18n;
+const WOrderHeader = ({...props})=>{
+    const route=props.route;
+    const close=props.close;
+    const renderRight=()=>{
+        let areaItem=global.getLocalAreaItem();
+        if (areaItem!=null){
+            if (areaItem.code==="mx"){
+                return <MXHeaderRight/>
+            }
+        }
+        return (<></>);
+    }
+    const renderHeader=()=>{
+        let title=route?route.title:"";
+        return (
+            <div className={styles.header}>
+                <div className={styles.hcontent}>
+                    {i18n.t(title)}
+                </div>
+                <div className={styles.top}>
+                    <div className={styles.left}>
+                        <button className={styles.close} onClick={() => {
+                            close();
+                        }}>
+                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
+                        </button>
+                    </div>
+                    {renderRight()}
+                </div>
+            </div>
+        )
+    }
+    return (
+        <div id={props.id} className={props.className}>
+            {renderHeader()}
+        </div>
+    )
+}
+export default WOrderHeader;

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

@@ -0,0 +1,92 @@
+.header{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width:100%;
+  background: var(--widget);
+  border-bottom: 1px solid var(--border);
+  box-shadow:var(--widget-shadow);
+  position:relative;
+  height:3.75rem;
+  padding: 0px 10px;
+  & .top{
+    display: flex;
+    align-items: center;
+    position:fixed;
+    justify-content: space-between;
+    left: 10px;
+    right: 10px;
+    & .left{
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      & .close{
+        display: flex;
+        align-items: center;
+        height: 3.75rem;
+        width: 2rem;
+        & .arrow{
+          width: 1.4rem;
+          height: 1.8em;
+          transform: rotate(-180deg);
+          fill: var(--text);
+        }
+      }
+    }
+  }
+  & .hcontent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--header);
+  }
+}
+.mx_right{
+  display: flex;
+  align-items: center;
+  & .right_btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    width: 2.5rem;
+    & .icon{
+      width: 1.4rem;
+      height: 1.4rem;
+      fill: var(--text);
+    }
+  }
+}
+.mx_help_con{
+  padding: 0rem !important;
+  .mx_help{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 24rem;
+    & .title{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      color: var(--header);
+      padding: 0.8rem;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    & .h_img{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.3rem 0.2rem;
+      width: 100%;
+      img{
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}