修改福利活动符号 多语言

src/widgets/WWelfarebar/index.jsx

@@ -2,7 +2,7 @@ import styles from './styles.module.scss';
 import {useEffect, useRef, useState} from "react";
 import {reqFirstPayConfig, reqProtectCheck} from "@features/api";
 import {useDispatch, useSelector} from "react-redux";
-import {getFirstBonus, getOpenRelief, getPopBindPhone, getUserInfo} from "@features/mainSlice";
+import {getFirstBonus, getOpenRelief, getPopBindPhone, getUpgradeBonus, getUserInfo} from "@features/mainSlice";
 import {APP_WELFARE} from "@constants/app";
 import {getCurrPayOrder, getOFirstPay} from "@features/paySlice";
 import {getProtectInfo} from "@features/protectSlice";
@@ -63,6 +63,8 @@ const WWelfarebar = () => {
     const {open} = useSidebar();
     const {pathname} = useLocation();
     const starPRef=useRef(null);
+    const upgradBonus=useSelector(getUpgradeBonus);
+    const regCoins=formatCash(upgradBonus,0);
     const getWelfTabState=(key)=>{
         if (welfTabState===key)return true;
         return false;
@@ -137,6 +139,12 @@ const WWelfarebar = () => {
         }
         changeNewState(APP_WELFARE.BIND,state);
     }
+    const getSymbol=()=>{
+        let symbols=['$','€','₽','M$','R$'];
+        let dollar=global.DOLLAR;
+        if (symbols.indexOf(dollar)===-1)dollar=symbols[0];
+        return dollar;
+    }
     useEffect(()=>{
         let UserID=user.UserID;
         if (UserID>0){
@@ -173,6 +181,7 @@ const WWelfarebar = () => {
             isClose=true;
         }
         const stars=Array.from({ length: 5 }, (_, index) => index);
+        let symbol=getSymbol();
         return (
             <div className={`${styles.container} ${extra}`}>
                 <div className={`${styles.content} ${isClose?styles.content_close:''}`}>
@@ -181,7 +190,8 @@ const WWelfarebar = () => {
                                     global.showProtectReward();
                                 }}>
                         <div className={styles.wlf_protect}>
-                            <img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>
+                            {/*<img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>*/}
+                            <img className={styles.p_img} src={require("@assets/welfare/fundos_" + symbol + ".png")}/>
                             <div ref={starPRef} className={styles.p_stars}>
                                 {
                                     stars.map((item,index)=>{
@@ -191,6 +201,7 @@ const WWelfarebar = () => {
                                     })
                                 }
                             </div>
+                            <img className={styles.p_txt} src={require("@assets/welfare/fundos_title_" + i18n.language + ".png")}/>
                         </div>
                     </WelfareBtn>
                     <WelfareBtn key={"first_pay"} open={openFirst} pressDown={getWelfTabState(APP_WELFARE.FIRST_PAY)}
@@ -199,9 +210,9 @@ const WWelfarebar = () => {
                                 }}>
                         <div className={styles.wlf_first}>
                             <div className={styles.wlf_first_mask} style={{
-                                webkitMask:`url(${require("@assets/welfare/first.png")}) 0 0/100%`
+                                webkitMask:`url(${require("@assets/welfare/bag_"+symbol+".png")}) 0 0/100%`
                             }}>
-                                <img className={styles.f_img} src={require("@assets/welfare/first.png")}/>
+                                <img className={styles.f_img} src={require("@assets/welfare/bag_"+symbol+".png")}/>
                             </div>
                             <img className={styles.f_txt} src={require("@assets/welfare/first_"+i18n.language+".png")}/>
                         </div>
@@ -211,8 +222,15 @@ const WWelfarebar = () => {
                                     global.showBindPhone();
                                 }}>
                         <div className={styles.wlf_bind}>
-                            <img className={`${styles.b_icon} iconshake`}
-                                 src={require("@assets/welfare/veri_" + i18n.language + ".png")}/>
+                            {/*<img className={`${styles.b_icon} iconshake`}*/}
+                            {/*     src={require("@assets/welfare/veri_" + i18n.language + ".png")}/>*/}
+                            <div className={`${styles.b_icon} iconshake`}>
+                                <img className={styles.b_bg} src={require("@assets/welfare/otp_" + symbol + ".png")}/>
+                                <img className={styles.b_get}
+                                     src={require("@assets/welfare/get_" + i18n.language + ".png")}/>
+                                <span data-title={regCoins}
+                                      className={styles.b_num}>{regCoins}</span>
+                            </div>
                             <img className={`${styles.b_txt}`}
                                  src={require("@assets/welfare/bind_txt_" + i18n.language + ".png")}/>
                         </div>

src/widgets/WWelfarebar/styles.module.scss

@@ -54,11 +54,11 @@ $star:"./../../assets/welfare/star.png";
   justify-content: center;
   width: 5rem;
   height: auto;
-  margin-left: 0.5rem;
-  margin-top: 0.1rem;
+  //margin-left: 0.5rem;
+  margin-top: -0.5rem;
   position: relative;
   & .p_img{
-    width: 100%;
+    width: 3.3rem;
     height: auto;
   }
   & .p_stars{
@@ -68,6 +68,13 @@ $star:"./../../assets/welfare/star.png";
     bottom: 1.2rem;
     position: absolute;
   }
+  & .p_txt{
+    position: absolute;
+    z-index: 2;
+    height: 1.5rem;
+    width: auto;
+    top: 2.2rem;
+  }
 }
 .wlf_first{
   display: flex;
@@ -114,8 +121,41 @@ $star:"./../../assets/welfare/star.png";
   aspect-ratio: 102/99;
   margin-left: -0.5rem;
   & .b_icon{
+    position: relative;
     width: 3.5rem;
-    height: auto;
+    height: 3.38rem;
+    & .b_bg{
+      width: 3.23rem;
+      height: auto;
+    }
+    & .b_get{
+      position: absolute;
+      z-index: 1;
+      height: 0.77rem;
+      width: auto;
+      top:0.3rem;
+      left: 1.5rem;
+    }
+    & .b_num{
+      position: absolute;
+      z-index: 2;
+      left: 3rem;
+      top:1.1rem;
+      font-size: 0.75rem;
+      color: #fff088;
+      -webkit-text-stroke: 3px #973500;
+      &::before{
+        content: attr(data-title);
+        position: absolute;
+        background: #fff088;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        -webkit-text-stroke: 0px #973500;
+        font-weight: bold;
+        font-size: 0.75rem;
+      }
+    }
   }
   & .b_txt{
     position: absolute;