页面跳转 滑块功能

src/app/[locale]/affiliate/faq/page.tsx

@@ -1,40 +1,57 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import { useRouter } from "@/i18n";
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
+                        <span className="right" onClick={()=>goPage('home')}>
                             <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('referrals')}>
                                     <span className="van-tab__text">REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/payments/page.tsx

@@ -1,40 +1,57 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import { useRouter } from "@/i18n";
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
+                        <span className="right" onClick={()=>goPage('home')}>
                             <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('referrals')}>
                                     <span className="van-tab__text">REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/referrals/page.tsx

@@ -1,40 +1,58 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import { useRouter } from "@/i18n";
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
+
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
+                        <span className="right" onClick={()=>goPage('home')}>
                             <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('referrals')}>
                                     <span className="van-tab__text">REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/report/page.tsx

@@ -1,40 +1,57 @@
+'use client'
 import { FC, PropsWithChildren } from "react";
+import {useRouter} from '@/i18n'
 import './page.css'
 
 interface Props { }
 const App: FC<PropsWithChildren<Props>> = (props) =>{
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
     return (
         <div className="vux-drawer">
             <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                 <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                     <div className="headerBack">
-                        <div className="left">
+                        <div className="left" onClick={()=>goPage()}>
                             <span className="iconfont icon-xiangzuo1"></span>
                         </div>
                         <span className="title">
                             Afiliado 
                             <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
                         </span>
-                        <span className="right">
+                        <span className="right" onClick={()=>goPage('home')}>
                             <span className="iconfont icon-home_line router-link-active"></span>
                         </span>
                     </div>
                     <div className="tabs alginLeft van-tabs van-tabs--line">
                         <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                             <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                     <span className="van-tab__text">PAINEL</span>
                                 </div>
-                                <div className="van-tab">
-                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                <div className="van-tab" onClick={()=>goPage('referrals')}>
+                                    <span className="van-tab__text" >REFERÊNCIAS</span>
                                 </div>
-                                <div className="van-tab van-tab--active" aria-selected="true">
+                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('report')}>
                                     <span className="van-tab__text">RELATÓRIO</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                     <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
-                                <div className="van-tab">
+                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                     <span className="van-tab__text">FAQ</span>  
                                 </div>
                                 <div className="van-tab">

src/app/[locale]/affiliate/summary/page.tsx

@@ -1,44 +1,71 @@
-import { FC, PropsWithChildren } from "react";
+'use client'
+import { FC, PropsWithChildren, useRef, useState } from "react";
 import './page.css'
+import { useRouter } from "@/i18n"
 
 interface Props { }
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
-    // function handleSlide(e:any):void{
-    //     const startX = e.clientX - sliderRef.current.offsetX
-    // }
+    const router:any = useRouter()
+    const goPage = (path = '')=>{
+        if(path){
+            if(path === 'home'){
+                router.replace('/')
+                return
+            }
+            
+            // console.log(router);
+            
+            router.replace(`/affiliate/${path}`)
+            return 
+        }
+        router.back()
+    }
+    const sliderRef = useRef<HTMLDivElement>(null)
+    const [num,setNum] = useState(100)
+    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
+        if(sliderRef.current){
+            const startX = sliderRef.current.getBoundingClientRect().x
+            const x = e.clientX - startX
+            const xRem = x/(144*0.6)
+            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
+            setNum(intNum)
+            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
+            sliderRef.current.style.width = scale
+        }
+    }
     return (
             <div className="vux-drawer">
                 <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                     <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
                         <div className="headerBack">
-                            <div className="left">
+                            <div className="left" onClick={()=>goPage()}>
                                 <span className="iconfont icon-xiangzuo1"/>
                             </div>
                             <div className="title">
                                 Afiliado
                                 <span> - Ganhe R$ 10.000 por dia</span>
                             </div>
-                            <div className="right">
+                            <div className="right" onClick={()=>goPage('home')}>
                                 <span className="iconfont icon-company_nav_icon_home router-link-active"/>
                             </div>
                         </div>
                         <div className="tabs alginLeft van-tabs van-tabs--line">
                             <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                                 <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true">
+                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('summary')}>
                                         <span className="van-tab__text">PAINEL</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('referrals')}>
                                         <span className="van-tab__text">REFERÊNCIAS</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('report')}>
                                         <span className="van-tab__text">RELATÓRIO</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('payments')}>
                                         <span className="van-tab__text">PAGAMENTOS</span>
                                     </div>
-                                    <div role="tab" className="van-tab">
+                                    <div role="tab" className="van-tab" onClick={()=>goPage('faq')}>
                                         <span className="van-tab__text">FAQ</span>
                                     </div>
                                     <div role="tab" className="van-tab">
@@ -236,13 +263,13 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                         <div className="imgContent">
                                             <img src="/img/cash.png" alt="" />
                                             <div>
-                                                Número de indicações > 100
+                                                Número de indicações > {num}
                                                 <br />
-                                                Comissão > R$ 5,000 todo mês!
+                                                Comissão > R$ {num*50} todo mês!
                                             </div>
-                                            <div className="slider van-slider" style={{height: "0.02rem"}}>
-                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}}>
-                                                    <div role="slider" className="van-slider__button-wrapper">
+                                            <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
+                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}} ref={sliderRef}>
+                                                    <div role="slider" className="van-slider__button-wrapper" >
                                                         <div className="img"></div>
                                                     </div>
                                                 </div>