充值主界面内首冲

src/features/paySlice.js

@@ -292,7 +292,7 @@ const reducerFirstPayMulti=(state,action,arg)=>{
         //         "give": "10",
         //         "favorable_price": "10",
         //         "second_give": "5",
-        //         "timeleft":10000,
+        //         "timeleft":0,
         //     },
         //     "default": 1
         // }

src/widgets/WDeposit/BR/BRDeposit.jsx

@@ -1,28 +1,47 @@
 import styles from './styles.module.scss';
 import {useDispatch, useSelector} from "react-redux";
 import {getUserInfo, isLogined} from "@features/mainSlice";
-import {getConfig, getCPFFirst, getFirstPay, getPaymentOrderStatus, getShowBonus} from "@features/paySlice";
+import {
+    getConfig,
+    getCPFFirst,
+    getFirstPay,
+    getFirstPayMulti, getGetSecondStatus,
+    getPaymentOrderStatus,
+    getShowBonus
+} from "@features/paySlice";
 import fpayimg from "@assets/pay/fpayimg.png";
 import img_sc from "@assets/pay/img_sc_66.png";
 import React, {useState} from "react";
 import Spring from "@components/Spring";
 import {REQ_STATUS} from "@api/config";
 import SmallLoading from "@components/SmallLoading";
-import {reqPaymentOrder} from "@features/api";
+import {reqGetSecond, reqPaymentOrder} from "@features/api";
 import {useNavigate} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
 import RadioBtn from "@components/RadioBtn";
 import img_bonus from "@assets/pay/topup_bonus.png";
 import styled from 'styled-components/macro';
-import {formatCurrency, stringFormat} from "@utils/helpers";
+import {formatCurrency, formatTime, stringFormat} from "@utils/helpers";
 import {APP_COUNTRY_CODE} from "@constants/app";
 import RUPaytypeSelect from "@widgets/WDeposit/RU/RUPaytypeSelect";
 import BRCPFSave from "@widgets/WDeposit/BR/BRCPFSave/BRCPFSave";
+import {Swiper, SwiperSlide} from "swiper/react";
+import {Autoplay} from "swiper/modules";
 const i18n=global.i18n;
 const PPBanner=styled.div`
     background: url(${img_bonus});
     background-size: 100% 100%;
 `
+const StyledSwiper = styled(Swiper)`
+    width: 100%;
+ padding: 0px 0px;
+ .swiper-wrapper{
+    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ }
+ .swiper-slide{
+    width: 100%;
+ }
+`
 const BRDeposit=()=>{
     const dispatch = useDispatch();
     const navigate=useNavigate();
@@ -36,6 +55,9 @@ const BRDeposit=()=>{
     const showBonus=useSelector(getShowBonus);
     const cpfFirst=useSelector(getCPFFirst);
     const areaItem=global.getLocalAreaItem();
+    const [swiper, setSwiper] = useState(null);
+    const firstPayMulti=useSelector(getFirstPayMulti);
+    const getSecondStatus=useSelector(getGetSecondStatus);
     const getSelectedConfig=()=>{
         let selected=null;
         if (config){
@@ -99,32 +121,113 @@ const BRDeposit=()=>{
             return require(`@assets/pay/fpayimg_$.png`);
         }
     }
-    const renderFirst=()=>{
-        if (firstpay==null)return (<></>);
-        let price=Number(firstpay.goodsPrice);
-        let give=Number(firstpay.give);
+    const getMultiInfo=()=>{
+        let items=[];
+        let status=-1;
+        if (firstPayMulti!=null){
+            if (firstPayMulti.items!=null){
+                // items=firstPayMulti.items;
+                let fitems=firstPayMulti.items;
+                for (let i=0;i<fitems.length;i++){
+                    if (i===firstPayMulti.default)items.unshift(fitems[i]);
+                    else items.push(fitems[i]);
+                }
+            }
+            else
+            {
+                let leftitem=firstPayMulti.leftitem;
+                if (leftitem!=null){
+                    items.push(leftitem);
+                    let timeleft=leftitem.timeleft;
+                    status=timeleft<=0?1:0
+                }
+            }
+        }
+        return {status,items};
+    }
+    const getSecondCallback=(payload)=>{
+        if (payload&&payload.code===200){
+
+        }
+    }
+    const onGetSecond=()=>{
+        if (getSecondStatus===REQ_STATUS.LOADING)return;
+        let data={};
+        data.callback=getSecondCallback;
+        dispatch(reqGetSecond(data))
+    }
+    const renderFirst=(item,status)=>{
+        // if (firstpay==null)return (<></>);
+        if (item==null)return (<></>);
+        let price=Number(item.money);
+        let give=Number(item.give);
+        let second_give=Number(item.second_give);
         let total=price+give;
-        let title=firstpay.goodsName==="firstpay"?i18n.t("deposit.banner.first_title"):i18n.t("deposit.banner.recommend_title");
+        // let title=firstpay.goodsName==="firstpay"?i18n.t("deposit.banner.first_title"):i18n.t("deposit.banner.recommend_title");
+        let title=i18n.t("deposit.banner.first_title");
+        let btnlabel=(<></>);
+        if (status===-1){btnlabel=(<>{global.DOLLAR + price}</>)}
+        else if (status===0){
+            let left_str=formatTime(item.timeleft)
+            btnlabel=(<>{left_str}</>)
+        }
+        else if (status===1){
+            btnlabel=getSecondStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(<>{i18n.t("firstPay.label_claim")}</>)
+        }
         return (
             <button className={styles.first_pay} onClick={() => {
-                onGetPaymentOder({
-                    price: firstpay.goodsPrice,
-                    goodsName: firstpay.goodsName,
-                    payType: firstpay.gear.id,
-                    GiftsID: firstpay.GiftsID
-                })
+                if (status===-1){
+                    onGetPaymentOder({
+                        price: item.money,
+                        goodsName: "firstpay",
+                        payType: item.id,
+                        GiftsID: item.GiftsID
+                    })
+                }
+                else if (status===1){
+                    onGetSecond();
+                }
             }}>
                 <div className={styles.pay_info}>
                     <div className={styles.title}>{title}</div>
                     <div className={styles.price_con}>
-                        <div className={styles.total}>{global.DOLLAR + total}</div>
-                        <div className={styles.origin}>
-                            {global.DOLLAR + price}
-                            <div className={styles.ori_line}/>
-                        </div>
+                        {
+                            status === -1 ? (
+                                <>
+                                    <span className={styles.label}>{i18n.t("firstPay.today")}</span>
+                                    <span data-title={global.DOLLAR + total}
+                                          className={styles.p_text_f}>
+                                        {global.DOLLAR + total}
+                                    </span>
+                                </>
+                            ) : (
+                                <>
+                                    <span className={styles.label}>{i18n.t("firstPay.today")}</span>
+                                    <span data-title={global.DOLLAR + total}
+                                          className={styles.p_text_al}>
+                                        {global.DOLLAR + total}
+                                            <div className={styles.al_line}></div>
+                                    </span>
+                                </>
+                            )
+                        }
+                        {/*<div className={styles.origin}>*/}
+                        {/*    {global.DOLLAR + price}*/}
+                        {/*    <div className={styles.ori_line}/>*/}
+                        {/*</div>*/}
+                    </div>
+                    <div className={styles.price_con}>
+                        <span className={styles.label}>{i18n.t("firstPay.day_2")}</span>
+                        <span data-title={global.DOLLAR + second_give}
+                              className={styles.p_text}>{global.DOLLAR + second_give}</span>
+                        {/*<div className={styles.origin}>*/}
+                        {/*    {global.DOLLAR + price}*/}
+                        {/*    <div className={styles.ori_line}/>*/}
+                        {/*</div>*/}
                     </div>
                     <button className={styles.price_btn}>
-                        {global.DOLLAR + price}
+                    {/*{global.DOLLAR + price}*/}
+                        {btnlabel}
                     </button>
                 </div>
                 {/*<img className={styles.gift_img} src={fpayimg}/>*/}
@@ -132,12 +235,38 @@ const BRDeposit=()=>{
                 <div className={styles.percent}>
                     <img src={img_sc} className={styles.percent}/>
                     <div className={styles.text}>
-                        {'+' + Math.floor(give * 100 / price) + '%'}
+                        {'+' + Math.floor((give+second_give) * 100 / price) + '%'}
                     </div>
                 </div>
             </button>
         )
     }
+    const renderMultiFirst=()=>{
+        if (firstPayMulti===null)return (<></>);
+        let {status,items}=getMultiInfo();
+        return (
+            <StyledSwiper onSwiper={setSwiper}
+                          slidesPerView={1}
+                          spaceBetween={15}
+                          loop
+                          autoplay={{delay: 5000, disableOnInteraction: false}}
+                          effect="fade"
+                          fadeEffect={{crossFade: true}}
+                          modules={[Autoplay]}
+                          speed={1000}
+            >
+                {
+                    items.map((item,index)=>{
+                        return (
+                            <SwiperSlide key={index}>
+                                {renderFirst(item,status)}
+                            </SwiperSlide>
+                        )
+                    })
+                }
+            </StyledSwiper>
+        )
+    }
     const renderTitle = () => {
         return (
             <div className={styles.title}>{i18n.t("deposit.list.title")}</div>
@@ -322,7 +451,8 @@ const BRDeposit=()=>{
     }
     return (
         <Spring type="slideUp" className={styles.container}>
-            {renderFirst()}
+            {/*{renderFirst()}*/}
+            {renderMultiFirst()}
             {renderDeposits()}
             {renderPromotions()}
             {renderDepositBtn()}

src/widgets/WDeposit/BR/styles.module.scss

@@ -12,10 +12,12 @@
   position: relative;
   border-radius: 0.44rem;
   border: 1px solid #346f41;
+  //border: 1px solid #fb80f0;
   //background-image: linear-gradient(135deg, #faf8de 0%, #f79315 100%);
   //background-image: linear-gradient(135deg,  #f29e1f 0%, #d0b552 100%);
   //background-image: linear-gradient(135deg,  #234e33 0%, #346f41 100%);
   background-image: linear-gradient(135deg,  #1d803ab3 0%, rgba(29, 128, 58, 1) 100%);
+  //background-image: linear-gradient(135deg,  #bd1995 0%, #eb61dd 100%);
   width: 100%;
   height: 12rem;
   & .pay_info{
@@ -27,28 +29,92 @@
       font-weight: 700;
     }
     & .price_btn{
-      margin-top: 1rem;
+      margin-top: 0.8rem;
       border-radius: 3rem;
       font-size: 1.2rem;
       font-weight: 600;
-      padding: 0.3rem 2.2rem;
+      padding: 0.3rem 0rem;
+      width: 7rem;
       color: #fff;
       background: linear-gradient(0deg, #f17e0a 0%, #faea93 100%);
       border: 1px solid #f0c461;
       text-shadow: -1px -1px 0 #987233, 1px -1px 0 #987233, -1px 1px 0 #987233, ;
     }
     & .price_con{
-      margin-top: 1rem;
-      width: 50%;
-      height: 3rem;
+      //margin-top: 1rem;
+      width: 100%;
+      //height: 2.8rem;
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: 1rem;
+      gap: 0.8rem;
+      & .p_text_f{
+        &::before{
+          content: attr(data-title);
+          position: absolute;
+          //background-image: linear-gradient(to bottom,#fffd5a 0%,#fffd5a 30%,#fffdea 60%,#ffb643 70%);
+          background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          //-webkit-text-stroke: 0px #483be3;
+          font-weight: bold;
+          font-size: 2rem;
+          pointer-events: none;
+        }
+        font-weight: bold;
+        font-size: 2rem;
+        filter: drop-shadow(0 1.5px 1px #662c29);
+      }
+      & .p_text_al{
+        &::before{
+          content: attr(data-title);
+          position: absolute;
+          background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-weight: bold;
+          font-size: 2rem;
+          pointer-events: none;
+        }
+        font-weight: bold;
+        font-size: 2rem;
+        filter: drop-shadow(0 1.5px 1px #662c29) brightness(80%);
+        & .al_line{
+          position: absolute;
+          left: -0.3rem;
+          right: -0.3rem;
+          top: 50%;
+          border-top: 2px solid #fce758;
+        }
+      }
+      & .p_text{
+        &::before{
+          content: attr(data-title);
+          position: absolute;
+          //background-image: linear-gradient(to bottom,#fffd5a 0%,#fffd5a 30%,#fffdea 60%,#ffb643 70%);
+          background-image: linear-gradient(to bottom,#ffeee1 0%,#ffeee1 30%,#fce758 60%,#fce758 70%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          //-webkit-text-stroke: 0px #483be3;
+          font-weight: bold;
+          font-size: 1.7rem;
+          pointer-events: none;
+        }
+        font-weight: bold;
+        font-size: 1.7rem;
+        filter: drop-shadow(0 1.5px 1px #662c29);
+      }
       & .total{
         color: #f9f462;
         font-weight: 700;
-        font-size: 2rem;
+        font-size: 1.8rem;
+      }
+      & .label{
+        color: #fff448;
+        font-weight: 500;
       }
       & .origin{
         position: relative;

src/widgets/WDeposit/index.jsx

@@ -4,7 +4,7 @@ import {useDispatch, useSelector} from "react-redux";
 import {getConfig, getPayConfigStatus, reqPayConfig} from "@features/paySlice";
 import {useEffect} from "react";
 import {getUserInfo} from "@features/mainSlice";
-import {reqFirstPayConfig, reqRechargeConfig} from "@features/api";
+import {reqFirstPayConfig, reqFirstPayMulti, reqRechargeConfig} from "@features/api";
 import {REQ_STATUS} from "@api/config";
 import SmallLoading from "@components/SmallLoading";
 const WDeposit=({close})=>{
@@ -22,7 +22,8 @@ const WDeposit=({close})=>{
         if (config==null||config.length===0){
             dispatch(reqRechargeConfig());
         }
-        dispatch(reqFirstPayConfig(userInfo.UserID))
+        // dispatch(reqFirstPayConfig(userInfo.UserID))
+        dispatch(reqFirstPayMulti())
     },[])
     const renderDeposit=()=>{
         let areaItem=global.getLocalAreaItem();

src/widgets/WWelfarebar/index.jsx

@@ -126,7 +126,7 @@ const WWelfarebar = () => {
     const checkFirstPayStatus=()=>{
         if (orderInfo!=null){
             if (orderInfo.status==="success"){
-                dispatch(reqFirstPayConfig());
+                // dispatch(reqFirstPayConfig());
                 dispatch(reqFirstPayMulti());
             }
         }
@@ -167,7 +167,7 @@ const WWelfarebar = () => {
             dispatch(reqProtectCheck());
         }
         dispatch(reqRechargeConfig());
-        dispatch(reqFirstPayConfig());
+        // dispatch(reqFirstPayConfig());
         dispatch(reqFirstPayMulti());
     },[user.UserID]);
     useEffect(() => {
@@ -237,7 +237,7 @@ const WWelfarebar = () => {
                                 <img className={styles.f_img} src={require("@assets/welfare/bag_"+symbol+".png")}/>
                             </div>
                             {
-                                firstCD<0? (<img className={styles.f_txt}
+                                firstCD<=0? (<img className={styles.f_txt}
                                                  src={require("@assets/welfare/first_" + i18n.language + ".png")}/>): (
                                     <span data-title={formatFirstCD(firstCD)}
                                           className={styles.f_cdtxt}>{formatFirstCD(firstCD)}</span>