feat: 将手机号弹窗框修改为组件

src/pages/home/index.scss

@@ -121,6 +121,9 @@
   }
 
   .index-back-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     width: 100%;
     height: 100px;

src/pages/home/index.tsx

@@ -11,17 +11,26 @@ import AppContext from "@/context/appContext";
 import UserHelper from "@/helper/userHelper";
 import ImageUtil from "@/utils/imgUtils";
 import RouteUtil from "@/utils/routeUtil";
-import { Image, ScrollView, View, Text } from "@tarojs/components";
+import { Image, ScrollView, View, Text,Input } from "@tarojs/components";
 import Taro, { pxTransform } from "@tarojs/taro";
 import { useRequest } from "ahooks";
-import React, { useContext, useMemo, useState } from "react";
+import React, { useContext, useMemo, useState , useEffect ,useRef } from "react";
 
+import StorageUtil, { EStorage } from "@/utils/storageUtil";
+import { AtFloatLayout } from "taro-ui"
+import { showToast } from "@tarojs/taro";
+import ctyptoUtil from "@/utils/crypto";
+import useStore from "@/hooks/useRedux";
+import LoginBox from "../user/components/LoginBox";
 const Home = () => {
+  const childRef = useRef()
+  const handleOpen = () => {
+    childRef.current.handleOpen()
+  }
   const appContext = useContext(AppContext);
   const { screenWidth, statusBarHeight } = appContext.systemInfo!;
   const [bottomRemark, setBottomRemark] = useState('')
   const isUserLogin = UserHelper.isLogin()
-
   const indexInfoResult = useRequest(() => {
     return UserApi.getIndexInfoUsingPost({
       params: { appId: APPConfig.APPID },
@@ -70,7 +79,6 @@ const Home = () => {
   };
 
   const BottomRemark = () => bottomRemark.split(';').map(text => <View style={{ margin: '4px 0' }}>{text}</View>)
-
   const ApplyButton = ({ isLogin }) => {
     console.log("isLogin", isLogin)
     return (
@@ -87,37 +95,7 @@ const Home = () => {
               },
             });
           }}
-          >立即申请额度</Button>) : (<Button openType='getPhoneNumber' 
-            onGetPhoneNumber={async (e) => {
-          if (e.detail.code && await UserHelper.userWxLogin(e.detail.code) === true) {
-            indexInfoResult.data &&
-            RouteUtil.toWebViewPage({
-              url: indexInfoResult.data.link,
-            });
-              // if (params.callbackBeforeRoute?.toString() === "1") {
-              //     console.log('进来了', params)
-              //     if (params.page) {
-              //         RouteUtil.replace(params.page, { params: params.params });
-              //     }
-              //     else {
-              //         +pop && RouteUtil.pop();
-              //     }
-              // }
-              // console.log('进来了----71', params)
-              if (UserHelper.callback) {
-                  await UserHelper.callback();
-              }
-              // if (params.callbackBeforeRoute?.toString() !== "1") {
-              //     if (params.page) {
-              //         RouteUtil.replace(params.page, { params: params.params });
-              //     }
-              //     else {
-
-              //         +pop && RouteUtil.pop();
-              //     }
-              // }
-          }
-      }} fill
+          >立即申请额度</Button>) : (<Button onClick={handleOpen} fill
             className='index-back-btn'
           >立即申请额度</Button>)
         }
@@ -253,6 +231,109 @@ const Home = () => {
           <View>如遇问题请向{ channelResult.data?.customerServiceInfo || '400-003-9350'}举报投诉，平台将及时为您解决！</View>
         </Flex>
       </ScrollView>
+      {/* <AtFloatLayout isOpened={isSHow} onClose={ handleClose }>
+      {
+       showNum == 0 && <Image
+        src={require("../../assets/box-bg.png")}
+        className='avatar-image-bg'
+      />
+      }
+        {
+          showNum == 0 ? 
+          <View className="login-introduce">
+            
+        <View className="title">登录方式选择及隐私政策告知   
+          <View onClick={handleClose}>
+          <Image
+              src={require("../../assets/close.png")}
+              className='avatar-image'
+          />
+          </View>
+        </View>
+        <View className="text">
+          为了您正常的使用我们的小程序服务，我们需要处理您的个人信息，具体详见 <Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>。
+          在您未确认<Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>前，我们不会搜集您的任何信息。
+          当您勾选协议后即标识您已阅读并同意<Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>和
+          <Text onClick={goRegPage} className="blue">《注册政策》</Text>上的全部内容
+        </View>
+        <View className="checkd">
+          <View className="checkbox">
+            {
+              checked ?  
+              <Image onClick={handleCheckboxChange}
+                src={require("../../assets/checkd.png")}
+                className='avatar-image'
+            />:
+              <Image onClick={handleCheckboxChange}
+                src={require("../../assets/check.png")}
+                className='avatar-image'
+            />
+            }
+             <Text className="agree" onClick={handleCheckboxChange}>请确定已阅读并同意</Text>
+          </View> 
+          <Text onClick={goRegPage} className="blue">《注册政策》</Text><Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>
+        </View>
+        <View>
+          {
+            checked ?  <Button className='index-quck-btn fontsize' openType='getPhoneNumber' 
+            onGetPhoneNumber={quickLogin}
+          >一键快捷登录</Button>
+          :
+          <Button className='index-quck-btn fontsize' onClick={quickLogin}>一键快捷登录</Button>
+          }
+        
+        </View>
+        <View onClick={showNumChange.bind(null, 1)} className="other-login">输入手机号登录</View>
+      </View>
+           : <View className="login-introduce phone-Login">
+          <View className="title">
+            <Text className="text-title">登录诚易融</Text>
+            <View onClick={handleClose} className="float">
+              <Image
+                  src={require("../../assets/close.png")}
+                  className='avatar-image'
+              />
+            </View>
+          </View>
+          <View className="input-box">
+            <View className="input-phone">
+              <Input type='text' placeholderClass="get" onInput={phoneNumChange} value={phone} placeholder='请输入本人实名认证手机号' maxlength={11}/>
+            </View>
+            <View className="input-password">
+              <Input type='text' placeholderClass="get" onInput={validateChange} value={validate} placeholder='请输入验证码' maxlength={6}/>
+              {
+                isGetValidate ?  <View className="get">重新发送 （{time}S）</View> :
+                <View className="gettime" onClick={isGetValidateChange}>获取验证码</View>
+              }
+            </View>
+          </View>
+          <View className="checkd">
+            <View className="checkbox">
+              {
+                checkedPhone ?  
+                <Image onClick={phoneChange}
+                  src={require("../../assets/checkd.png")}
+                  className='avatar-image'
+              />:
+                <Image onClick={phoneChange}
+                  src={require("../../assets/check.png")}
+                  className='avatar-image'
+              />
+              }
+              <Text onClick={phoneChange}>请确定已阅读并同意</Text>
+            </View> 
+            <Text onClick={goRegPage} className="blue">《注册政策》</Text><Text onClick={goRegPage} className="blue">《隐私政策》</Text>
+          </View>
+          <View>
+          <Button className='index-quck-btn fontsize36' onClick={submitClick}
+            >立即登录</Button>
+          </View>
+      </View>
+        }
+        
+        
+      </AtFloatLayout> */}
+      <LoginBox ref={childRef}></LoginBox>
     </Layout>
   );
 };

src/pages/user/components/LoginBox.scss

@@ -0,0 +1,107 @@
+.layout-body{
+    padding: 0 !important;
+}
+.avatar-image-bg{
+    width: 100%;
+    height: 240px;
+    position: absolute;
+    z-index: -1;
+}
+.agree{
+    color:#848EB0;
+}
+  .phone-Login{
+    position: relative;
+    display: block;
+    .text-title{
+      text-align: center;
+      width:100%;
+    }
+    .float{
+      position: absolute;
+      top:60px;
+      right: 40px;
+    }
+    .input-box{
+      .input-phone{
+        height: 50px;
+      }
+      .input-password{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .input-phone,.input-password{
+        border-bottom:1px solid #D7DBEC;
+        font-size: 36px;
+        height: 70px;
+        margin:50px 0;
+        >input{
+          height: 70px;
+        }
+      }
+    }
+    .get{
+     color: #C5C5C7;
+     font-size: 36px;
+     white-space: nowrap;
+    }
+    .gettime{
+      color:#007AFF;
+      font-size: 36px;
+    }
+  }
+  .login-introduce{
+    padding:40px;
+    margin-bottom:20px;
+    .title{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #000000;
+      font-size: 40px;
+      font-weight: 500;
+      margin-top:20px;
+    }
+    .avatar-image{
+      width:50px;
+      height: 50px;
+    }
+    .text{
+      padding:30px 0;
+      font-size: 30px;
+      line-height: 45px;
+    }
+    .blue{
+      color:#007AFF;
+    }
+    .fontsize36{
+      font-size:36px;
+      margin-bottom:20px;
+    }
+    .custom-checkbox {
+      display: inline-block;
+      margin-right: 10px;
+      // 你可以继续添加样式来适配你的设计需求
+    }
+    .index-quck-btn{
+      margin: 20px 0;
+    }
+    .other-login{
+      text-align: center;
+      margin:30px 0;
+      color:#5c6e98;
+      font-size: 26px;
+      
+    }
+    .checkd{
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    .checkbox{
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+  }

src/pages/user/components/LoginBox.tsx

@@ -0,0 +1,408 @@
+import "./LoginBox.scss";
+import UserApi from "@/apis/userApi";
+import Button from "@/component/button";
+import APPConfig from "@/config";
+import UserHelper from "@/helper/userHelper";
+import RouteUtil from "@/utils/routeUtil";
+import { Image, ScrollView, View, Text, Input } from "@tarojs/components";
+import { useRequest } from "ahooks";
+import useStore from "@/hooks/useRedux";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import { AtFloatLayout } from "taro-ui";
+import { showToast } from "@tarojs/taro";
+import ctyptoUtil from "@/utils/crypto";
+const LoginBox = forwardRef((props,ref) => {
+    useImperativeHandle(ref, () => ({
+        handleOpen() {
+            handleOpen();
+        }
+    }))    
+
+  const indexInfoResult = useRequest(() => {
+    return UserApi.getIndexInfoUsingPost({
+      params: { appId: APPConfig.APPID },
+    }).toData();
+  });
+  const [isSHow, setIsSHow] = useState(false);
+  // 打开浮动层的函数
+  const handleOpen = () => {
+    setShowNum(0);
+    setIsSHow(true);
+  };
+  // 关闭浮动层的函数
+  const handleClose = () => {
+    setIsSHow(false);
+    // setIsGetValidate(false);
+    // setTime(10); // 重置倒计时
+    setPhone("");
+    setValidate("");
+    setCheckedPhone(false);
+    setChecked(false);
+  };
+  const [showNum, setShowNum] = useState(0);
+  const showNumChange = (val) => {
+    if (!checked) {
+      showToast({
+        title: "请确定已阅读并同意！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    setShowNum(val);
+  };
+  const [checked, setChecked] = useState(false);
+  const handleCheckboxChange = () => {
+    setChecked(!checked);
+  };
+  const quickLogin = async (e) => {
+    if (!checked) {
+      showToast({
+        title: "请确定已阅读并同意！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    if (
+      e.detail.code &&
+      (await UserHelper.userWxLogin(e.detail.code)) === true
+    ) {
+      handleClose();
+      indexInfoResult.data &&
+        RouteUtil.toWebViewPage({
+          url: indexInfoResult.data.link,
+        });
+      if (UserHelper.callback) {
+        await UserHelper.callback();
+      }
+    }
+  };
+  const [time, setTime] = useState(60);
+  const [isGetValidate, setIsGetValidate] = useState(false);
+  const [validate, setValidate] = useState("");
+  const [phone, setPhone] = useState("");
+  const [checkedPhone, setCheckedPhone] = useState(false);
+  const phoneChange = () => {
+    setCheckedPhone(!checkedPhone);
+  };
+  const timeChange = (val) => {
+    setTime(val);
+  };
+  const phoneNumChange = (e) => {
+    setPhone(e.detail.value);
+  };
+  const validateChange = (e) => {
+    setValidate(e.detail.value);
+  };
+  useEffect(() => {
+    let intervalId: any = null;
+    if (isGetValidate && time > 0) {
+      intervalId = setInterval(() => {
+        timeChange((prevCount) => prevCount - 1);
+      }, 1000);
+    } else if (time === 0) {
+      setIsGetValidate(false);
+      clearInterval(intervalId);
+    }
+    return () => clearInterval(intervalId);
+  }, [isGetValidate, time]);
+
+  const isGetValidateChange = async () => {
+    if (phone == "") {
+      showToast({
+        title: "请输入本人实名认证手机号！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    if (isPhoneAvailable(phone)) {
+      setIsGetValidate(!isGetValidate);
+      setTime(60); // 重置倒计时
+      let obj = {
+        channelCode: "jiheyanfa",
+        // "channelCode":"txxcx01",
+        phone: ctyptoUtil.AesEncode(phone),
+        sceneType: "register",
+      };
+      UserApi.sendCode({
+        data: { ...obj },
+      })
+        .h5toData()
+        .then((res: any) => {
+          showToast({
+            title: res.msg,
+            icon: "none",
+            duration: 2000,
+          });
+        });
+    } else {
+      showToast({
+        title: "手机号有误！",
+        icon: "none",
+        duration: 2000,
+      });
+    }
+  };
+  const isPhoneAvailable = (value) => {
+    let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+    return phoneReg.test(value);
+  };
+  const submitClick = () => {
+    if (!checkedPhone) {
+      showToast({
+        title: "请确定已阅读并同意！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    if (phone == "") {
+      showToast({
+        title: "请输入本人实名认证手机号！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    } else if (!isPhoneAvailable(phone)) {
+      showToast({
+        title: "手机号有误！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    } else if (validate == "") {
+      showToast({
+        title: "验证码不能为空！",
+        icon: "none",
+        duration: 2000,
+      });
+      return;
+    }
+    let obj = {
+      channelCode: "jiheyanfa",
+      // "channelCode":"txxcx01",
+      phone: ctyptoUtil.AesEncode(phone),
+      sceneType: "register",
+      uctrackid: "",
+      verifyCode: validate,
+    };
+    UserApi.login({
+      data: { ...obj },
+    })
+      .h5toData()
+      .then(async (res: any) => {
+        if (res.code == 1) {
+          showToast({
+            title: res.msg,
+            icon: "none",
+            duration: 2000,
+          });
+        } else if (res.code == 0) {
+          handleClose();
+          let obj: any = {
+            userId: res.data.userId,
+            token: res.data.token,
+            userMobile: phone,
+          };
+          UserHelper.cacheUserInfo(obj);
+          indexInfoResult.data &&
+            RouteUtil.toWebViewPage({
+              url: indexInfoResult.data.link,
+            });
+          if (UserHelper.callback) {
+            await UserHelper.callback();
+          }
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  const aggrement = useRequest(() => {
+    return UserApi.agreementsUsingPost({
+      data: { pageView: "register_privacy" },
+    }).toData();
+  });
+  const goRegPage = () => {
+    aggrement.data?.map((p, index) => {
+      if (p.name == "注册政策") {
+        RouteUtil.toWebViewPage({ url: p.url });
+      }
+    });
+  };
+  const goPrivacyPage = () => {
+    console.log(aggrement);
+    aggrement.data?.map((p, index) => {
+      if (p.name == "隐私政策") {
+        RouteUtil.toWebViewPage({ url: p.url });
+      }
+    });
+  };
+  return (
+    <AtFloatLayout isOpened={isSHow} onClose={handleClose}>
+      {showNum == 0 && (
+        <Image
+          src={require("@/assets/box-bg.png")}
+          className="avatar-image-bg"
+        />
+      )}
+      {showNum == 0 ? (
+        <View className="login-introduce">
+          <View className="title">
+            登录方式选择及隐私政策告知
+            <View onClick={handleClose}>
+              <Image
+                src={require("@/assets/close.png")}
+                className="avatar-image"
+              />
+            </View>
+          </View>
+          <View className="text">
+            为了您正常的使用我们的小程序服务，我们需要处理您的个人信息，具体详见{" "}
+            <Text onClick={goPrivacyPage} className="blue">
+              《隐私政策》
+            </Text>
+            。 在您未确认
+            <Text onClick={goPrivacyPage} className="blue">
+              《隐私政策》
+            </Text>
+            前，我们不会搜集您的任何信息。 当您勾选协议后即标识您已阅读并同意
+            <Text onClick={goPrivacyPage} className="blue">
+              《隐私政策》
+            </Text>
+            和
+            <Text onClick={goRegPage} className="blue">
+              《注册政策》
+            </Text>
+            上的全部内容
+          </View>
+          <View className="checkd">
+            <View className="checkbox">
+              {checked ? (
+                <Image
+                  onClick={handleCheckboxChange}
+                  src={require("@/assets/checkd.png")}
+                  className="avatar-image"
+                />
+              ) : (
+                <Image
+                  onClick={handleCheckboxChange}
+                  src={require("@/assets/check.png")}
+                  className="avatar-image"
+                />
+              )}
+              <Text className="agree" onClick={handleCheckboxChange}>
+                请确定已阅读并同意
+              </Text>
+            </View>
+            <Text onClick={goRegPage} className="blue">
+              《注册政策》
+            </Text>
+            <Text onClick={goPrivacyPage} className="blue">
+              《隐私政策》
+            </Text>
+          </View>
+          <View>
+            {checked ? (
+              <Button
+                className="index-quck-btn fontsize"
+                openType="getPhoneNumber"
+                onGetPhoneNumber={quickLogin}
+              >
+                一键快捷登录
+              </Button>
+            ) : (
+              <Button className="index-quck-btn fontsize" onClick={quickLogin}>
+                一键快捷登录
+              </Button>
+            )}
+          </View>
+          <View onClick={showNumChange.bind(null, 1)} className="other-login">
+            输入手机号登录
+          </View>
+        </View>
+      ) : (
+        <View className="login-introduce phone-Login">
+          <View className="title">
+            <Text className="text-title">登录诚易融</Text>
+            <View onClick={handleClose} className="float">
+              <Image
+                src={require("@/assets/close.png")}
+                className="avatar-image"
+              />
+            </View>
+          </View>
+          <View className="input-box">
+            <View className="input-phone">
+              <Input
+                type="text"
+                placeholderClass="get"
+                onInput={phoneNumChange}
+                value={phone}
+                placeholder="请输入本人实名认证手机号"
+                maxlength={11}
+              />
+            </View>
+            <View className="input-password">
+              <Input
+                type="text"
+                placeholderClass="get"
+                onInput={validateChange}
+                value={validate}
+                placeholder="请输入验证码"
+                maxlength={6}
+              />
+              {isGetValidate ? (
+                <View className="get">重新发送 （{time}S）</View>
+              ) : (
+                <View className="gettime" onClick={isGetValidateChange}>
+                  获取验证码
+                </View>
+              )}
+            </View>
+          </View>
+          <View className="checkd">
+            <View className="checkbox">
+              {checkedPhone ? (
+                <Image
+                  onClick={phoneChange}
+                  src={require("@/assets/checkd.png")}
+                  className="avatar-image"
+                />
+              ) : (
+                <Image
+                  onClick={phoneChange}
+                  src={require("@/assets/check.png")}
+                  className="avatar-image"
+                />
+              )}
+              <Text className="agree" onClick={phoneChange}>请确定已阅读并同意</Text>
+            </View>
+            <Text onClick={goRegPage} className="blue">
+              《注册政策》
+            </Text>
+            <Text onClick={goRegPage} className="blue">
+              《隐私政策》
+            </Text>
+          </View>
+          <View>
+            <Button className="index-quck-btn fontsize36" onClick={submitClick}>
+              立即登录
+            </Button>
+          </View>
+        </View>
+      )}
+    </AtFloatLayout>
+  );
+});
+
+export default LoginBox;

src/pages/user/mine/index.scss

@@ -188,112 +188,8 @@
     padding-right: 24px;
   }
 }
-.login-introduce{
-  padding:40px;
-  margin-bottom:20px;
-  .title{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #000000;
-    font-size: 40px;
-    font-weight: 500;
-    margin-top:20px;
-  }
-  .avatar-image{
-    width:50px;
-    height: 50px;
-  }
-  .text{
-    padding:30px 0;
-    font-size: 30px;
-    line-height: 45px;
-  }
-  .blue{
-    color:#007AFF;
-  }
-  .fontsize36{
-    font-size:36px;
-    margin-bottom:20px;
-  }
-  .custom-checkbox {
-    display: inline-block;
-    margin-right: 10px;
-    // 你可以继续添加样式来适配你的设计需求
-  }
-  .index-back-btn{
-    margin: 20px 0;
-  }
-  .other-login{
-    text-align: center;
-    margin:30px 0;
-    color:#5c6e98;
-    font-size: 26px;
-    
-  }
-  .checkd{
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  .checkbox{
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-}
-.agree{
-  color:#848EB0;
-}
-.phone-Login{
-  position: relative;
-  display: block;
-  .text-title{
-    text-align: center;
-    width:100%;
-  }
-  .float{
-    position: absolute;
-    top:60px;
-    right: 40px;
-  }
-  .input-box{
-    .input-phone{
-      height: 50px;
-    }
-    .input-password{
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .input-phone,.input-password{
-      border-bottom:1px solid #D7DBEC;
-      font-size: 36px;
-      height: 70px;
-      margin:50px 0;
-      >input{
-        height: 70px;
-      }
-    }
-  }
-  .get{
-   color: #C5C5C7;
-   font-size: 36px;
-  }
-  .gettime{
-    color:#007AFF;
-    font-size: 36px;
-  }
-}
+
+
 .at-float-layout--active .at-float-layout__container{
   border-radius: 30px 30px 0 0 ; 
-}
-.layout-body{
-  padding: 0 !important;
-}
-.avatar-image-bg{
-  width: 100%;
-  height: 240px;
-  position: absolute;
-  z-index: -1;
 }

src/pages/user/mine/index.tsx

@@ -14,11 +14,8 @@ import RouteUtil from "@/utils/routeUtil";
 import UserHelper from "@/helper/userHelper";
 import Button from "@/component/button";
 import "./index.scss";
-import StorageUtil, { EStorage } from "@/utils/storageUtil";
-import React, { useState , useEffect, useCallback} from 'react'
-import { AtFloatLayout } from "taro-ui"
-import { showToast } from "@tarojs/taro";
-import ctyptoUtil from "@/utils/crypto";
+import React, { useState , useEffect, useCallback,useRef} from 'react'
+import LoginBox from "../components/LoginBox";
 interface IMineProps {}
 
 const Mine = (props: PropsWithChildren<IMineProps>) => {
@@ -33,33 +30,10 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
       params: { appId: APPConfig.APPID },
     }).toData();
   });
-  const [isSHow, setIsSHow] = useState(false)
-  // 打开浮动层的函数
+
+  const childRef = useRef()
   const handleOpen = () => {
-    setShowNum(0);
-    setIsSHow(true)
-  }
-  // 关闭浮动层的函数
-  const handleClose = () => {
-    setIsSHow(false);
-    // setIsGetValidate(false);
-    // setTime(10); // 重置倒计时
-    setPhone('');
-    setValidate('');
-    setCheckedPhone(false);
-    setChecked(false);
-  }
-  const [showNum, setShowNum] = useState(0)
-  const showNumChange = (val) => {
-    if(!checked){
-      showToast({
-          title: "请确定已阅读并同意！",
-          icon: "none",
-          duration: 2000,
-      });
-      return
-    }
-    setShowNum(val)
+    childRef.current.handleOpen()
   }
   const ApplyButton = ({ isLogin }) => {
     console.log("isLogin", isLogin)
@@ -77,25 +51,14 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
               },
             });
           }}
-          >立即申请</Button>) : (<Button openType='getPhoneNumber' 
-            onGetPhoneNumber={async (e) => {
-          if (e.detail.code && await UserHelper.userWxLogin(e.detail.code) === true) {
-            indexInfoResult.data &&
-            RouteUtil.toWebViewPage({
-              url: indexInfoResult.data.link,
-            });
-              if (UserHelper.callback) {
-                  await UserHelper.callback();
-              }
-          }
-      }}
+          >立即申请</Button>) : (<Button onClick={handleOpen}
             className='mine-apply-panel-button'
           >立即申请</Button>)
         }
       </>
     )
   }
-  const LoginBox = ({ isLogin ,userName}) => {
+  const LoginBoxs = ({ isLogin ,userName}) => {
     return(
       <>
        { isLogin? 
@@ -132,303 +95,6 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
       </>
     )
   }
-
-  const [checked, setChecked] = useState(false)
-  const handleCheckboxChange = () => {
-    setChecked(!checked)
-  }
-  const  quickLogin =async (e) =>{
-    if(!checked){
-      showToast({
-          title: "请确定已阅读并同意！",
-          icon: "none",
-          duration: 2000,
-      });
-      return
-    }
-    if (e.detail.code && await UserHelper.userWxLogin(e.detail.code) === true) {
-      handleClose();
-      indexInfoResult.data &&
-      RouteUtil.toWebViewPage({
-        url: indexInfoResult.data.link,
-      });
-      if (UserHelper.callback) {
-          await UserHelper.callback();
-      }
-    }
-  }
-
-  // 打开浮动层的函数
-  const LoginIntroduce = () =>{
-    return(
-      <>
-      <View className="login-introduce">
-        <Image
-          src={require("../../../assets/box-bg.png")}
-          className='avatar-image-bg'
-        />
-        <View className="title">登录方式选择及隐私政策告知   
-          <View onClick={handleClose}>
-          <Image
-              src={require("../../../assets/close.png")}
-              className='avatar-image'
-          />
-          </View>
-        </View>
-        <View className="text">
-          为了您正常的使用我们的小程序服务，我们需要处理您的个人信息，具体详见 <Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>。
-          在您未确认<Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>前，我们不会搜集您的任何信息。
-          当您勾选协议后即标识您已阅读并同意<Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>和
-          <Text onClick={goRegPage} className="blue">《注册政策》</Text>上的全部内容
-        </View>
-        <View className="checkd">
-          {/* {checkboxOptions.map((item, i) => {
-            return (
-              <Label className='checkbox-list__label' for={i} key={i}>
-                <Checkbox className='custom-checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
-              </Label>
-            )
-          })} */}
-          <View className="checkbox">
-            {
-              checked ?  
-              <Image onClick={handleCheckboxChange}
-                src={require("../../../assets/checkd.png")}
-                className='avatar-image'
-            />:
-              <Image onClick={handleCheckboxChange}
-                src={require("../../../assets/check.png")}
-                className='avatar-image'
-            />
-            }
-             <Text onClick={handleCheckboxChange}>请确定已阅读并同意</Text>
-          </View> 
-          <Text onClick={goRegPage} className="blue">《注册政策》</Text><Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>
-        </View>
-        <View>
-          {
-            checked ?  <Button className='index-back-btn fontsize' openType='getPhoneNumber' 
-            onGetPhoneNumber={quickLogin}
-          >一键快捷登录</Button>
-          :
-          <Button className='index-back-btn fontsize' onClick={quickLogin}>一键快捷登录</Button>
-          }
-        
-        </View>
-        <View onClick={showNumChange.bind(null, 1)} className="other-login">输入手机号登录</View>
-      </View>
-      </>
-    )
-  }
-  const [time, setTime] = useState(60)
-  const [isGetValidate, setIsGetValidate] = useState(false);
-  const [validate, setValidate] = useState('');
-  const [phone, setPhone] = useState('');
-  const [checkedPhone, setCheckedPhone] = useState(false)
-  const phoneChange = () => {
-    setCheckedPhone(!checkedPhone)
-  }
-  const timeChange = (val) => {
-    setTime(val)
-  }
-  const phoneNumChange = (e) => {
-    setPhone(e.detail.value);
-    // setFocus1(true);
-    // setFocus2(false);
-  }
-  const validateChange = (e) => {
-    setValidate(e.detail.value);
-    // setFocus1(false);
-    // setFocus2(true);
-  }
-  useEffect(() => {
-    let intervalId = null;
-    if (isGetValidate && time > 0) {
-      intervalId = setInterval(() => {
-        timeChange(prevCount => prevCount - 1);
-      }, 1000);
-    } else if (time === 0) {
-      setIsGetValidate(false);
-      clearInterval(intervalId);
-    }
-    return () => clearInterval(intervalId);
-  }, [isGetValidate, time]);
-
-  const isGetValidateChange = async () => {
-    if(phone == ""){
-      showToast({
-        title: "手机号不能为空！",
-        icon: "none",
-        duration: 2000,
-      });
-      return
-    }
-    if(isPhoneAvailable(phone)){
-      setIsGetValidate(!isGetValidate);
-      setTime(60); // 重置倒计时
-      let obj = {
-        "channelCode":"jiheyanfa",
-        // "channelCode":"txxcx01",
-        "phone":ctyptoUtil.AesEncode(phone),
-        "sceneType":"register"
-      }
-      UserApi.sendCode({
-        data: { ...obj },
-      }).h5toData().then((res:any) => {
-        showToast({
-          title: res.msg,
-          icon: "none",
-          duration: 2000,
-      });
-      })
-    }else{
-      showToast({
-        title: "手机号有误！",
-        icon: "none",
-        duration: 2000,
-      });
-    }
-  }
-  const isPhoneAvailable = value => {
-    let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
-    return phoneReg.test(value)
-  }
-  const submitClick = () =>{
-    if(!checkedPhone){
-      showToast({
-          title: "请确定已阅读并同意！",
-          icon: "none",
-          duration: 2000,
-      });
-      return
-    }
-    if(phone == ""){
-      showToast({
-        title: "手机号不能为空！",
-        icon: "none",
-        duration: 2000,
-      });
-      return
-    }else if(!isPhoneAvailable(phone)){
-      showToast({
-        title: "手机号有误！",
-        icon: "none",
-        duration: 2000,
-      });
-      return
-    } else if(validate == ""){
-      showToast({
-        title: "验证码不能为空！",
-        icon: "none",
-        duration: 2000,
-      });
-      return
-    }
-    let obj = {
-      "channelCode":"jiheyanfa",
-      // "channelCode":"txxcx01",
-      "phone":ctyptoUtil.AesEncode(phone),
-      sceneType:"register",
-      uctrackid: "",
-      verifyCode:validate,
-    }
-    UserApi.login({
-      data: { ...obj },
-    }).h5toData().then(async(res:any) => {
-      if(res.code == 1){
-        showToast({
-          title: res.msg,
-          icon: "none",
-          duration: 2000,
-        });
-      }else if(res.code == 0){
-        handleClose();
-        let obj:any = {
-          userId:res.data.userId,
-          token:res.data.token,
-          userMobile:phone,
-        }
-        UserHelper.cacheUserInfo(obj);
-        indexInfoResult.data &&
-          RouteUtil.toWebViewPage({
-            url: indexInfoResult.data.link,
-          });
-          if (UserHelper.callback) {
-            await UserHelper.callback();
-          }
-      }
-    }).catch((err)=>{
-      console.log(err)
-    })
-  }
-  const aggrement = useRequest(() => {
-    return UserApi.agreementsUsingPost({ data: { "pageView": "register_privacy" } }).toData();
-  })
-  const goRegPage = () =>{
-    aggrement.data?.map((p, index) => {
-    if(p.name == '注册政策'){
-      RouteUtil.toWebViewPage({ url: p.url })
-    }
-  })
-  }
-  const goPrivacyPage = () =>{
-    console.log(aggrement);
-    aggrement.data?.map((p, index) => {
-      if(p.name == '隐私政策'){
-        RouteUtil.toWebViewPage({ url: p.url })
-      }
-    })
-  }
-  const PhoneLogin = () =>{
-    return(
-      <>
-        <View className="login-introduce phone-Login">
-          <View className="title">
-            <Text className="text-title">登录诚易融</Text>
-            <View onClick={handleClose} className="float">
-              <Image
-                  src={require("../../../assets/close.png")}
-                  className='avatar-image'
-              />
-            </View>
-          </View>
-          <View className="input-box">
-            <View className="input-phone">
-              <Input type='text' placeholderClass="get" onInput={phoneNumChange} value={phone} placeholder='请输入本人实名认证手机号' maxlength={11}/>
-            </View>
-            <View className="input-password">
-              <Input type='text' placeholderClass="get" onInput={validateChange} value={validate} placeholder='请输入验证码' maxlength={10}/>
-              {
-                isGetValidate ?  <View className="get">重新发送 （{time}S）</View> :
-                <View className="gettime" onClick={isGetValidateChange}>获取验证码</View>
-              }
-            </View>
-          </View>
-          <View className="checkd">
-            <View className="checkbox">
-              {
-                checkedPhone ?  
-                <Image onClick={phoneChange}
-                  src={require("../../../assets/checkd.png")}
-                  className='avatar-image'
-              />:
-                <Image onClick={phoneChange}
-                  src={require("../../../assets/check.png")}
-                  className='avatar-image'
-              />
-              }
-              <Text className="agree" onClick={phoneChange}>请确定已阅读并同意</Text>
-            </View> 
-            <Text onClick={goRegPage} className="blue">《注册政策》</Text><Text onClick={goRegPage} className="blue">《隐私政策》</Text>
-          </View>
-          <View>
-          <Button className='index-back-btn fontsize36' onClick={submitClick}
-            >立即登录</Button>
-          </View>
-      </View>
-      </>
-    )
-  }
   const maskPhone = (phone:string) => {
     if (!phone || phone.length !== 11) return phone; // 确保电话号码有效且长度为11位
     return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1***$2');
@@ -438,116 +104,7 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
     <Layout className='mine' bottomBarIndex={1}>
       <SizeBox height={statusBarHeight}></SizeBox>
       <SizeBox height={36}></SizeBox>
-      <LoginBox isLogin={isUserLogin} userName={userName}></LoginBox>
-      <AtFloatLayout isOpened={isSHow} onClose={ handleClose }>
-      {
-       showNum == 0 && <Image
-        src={require("../../../assets/box-bg.png")}
-        className='avatar-image-bg'
-      />
-      }
-        {
-          showNum == 0 ? 
-          <View className="login-introduce">
-            
-        <View className="title">登录方式选择及隐私政策告知   
-          <View onClick={handleClose}>
-          <Image
-              src={require("../../../assets/close.png")}
-              className='avatar-image'
-          />
-          </View>
-        </View>
-        <View className="text">
-          为了您正常的使用我们的小程序服务，我们需要处理您的个人信息，具体详见 <Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>。
-          在您未确认<Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>前，我们不会搜集您的任何信息。
-          当您勾选协议后即标识您已阅读并同意<Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>和
-          <Text onClick={goRegPage} className="blue">《注册政策》</Text>上的全部内容
-        </View>
-        <View className="checkd">
-          <View className="checkbox">
-            {
-              checked ?  
-              <Image onClick={handleCheckboxChange}
-                src={require("../../../assets/checkd.png")}
-                className='avatar-image'
-            />:
-              <Image onClick={handleCheckboxChange}
-                src={require("../../../assets/check.png")}
-                className='avatar-image'
-            />
-            }
-             <Text className="agree" onClick={handleCheckboxChange}>请确定已阅读并同意</Text>
-          </View> 
-          <Text onClick={goRegPage} className="blue">《注册政策》</Text><Text onClick={goPrivacyPage} className="blue">《隐私政策》</Text>
-        </View>
-        <View>
-          {
-            checked ?  <Button className='index-back-btn fontsize' openType='getPhoneNumber' 
-            onGetPhoneNumber={quickLogin}
-          >一键快捷登录</Button>
-          :
-          <Button className='index-back-btn fontsize' onClick={quickLogin}>一键快捷登录</Button>
-          }
-        
-        </View>
-        <View onClick={showNumChange.bind(null, 1)} className="other-login">输入手机号登录</View>
-      </View>
-           : <View className="login-introduce phone-Login">
-          <View className="title">
-            <Text className="text-title">登录诚易融</Text>
-            <View onClick={handleClose} className="float">
-              <Image
-                  src={require("../../../assets/close.png")}
-                  className='avatar-image'
-              />
-            </View>
-          </View>
-          <View className="input-box">
-            <View className="input-phone">
-              <Input type='text' placeholderClass="get" onInput={phoneNumChange} value={phone} placeholder='请输入本人实名认证手机号' maxlength={11}/>
-            </View>
-            <View className="input-password">
-              <Input type='text' placeholderClass="get" onInput={validateChange} value={validate} placeholder='请输入验证码' maxlength={10}/>
-              {
-                isGetValidate ?  <View className="get">重新发送 （{time}S）</View> :
-                <View className="gettime" onClick={isGetValidateChange}>获取验证码</View>
-              }
-            </View>
-          </View>
-          <View className="checkd">
-            <View className="checkbox">
-              {
-                checkedPhone ?  
-                <Image onClick={phoneChange}
-                  src={require("../../../assets/checkd.png")}
-                  className='avatar-image'
-              />:
-                <Image onClick={phoneChange}
-                  src={require("../../../assets/check.png")}
-                  className='avatar-image'
-              />
-              }
-              <Text onClick={phoneChange}>请确定已阅读并同意</Text>
-            </View> 
-            <Text onClick={goRegPage} className="blue">《注册政策》</Text><Text onClick={goRegPage} className="blue">《隐私政策》</Text>
-          </View>
-          <View>
-          <Button className='index-back-btn fontsize36' onClick={submitClick}
-            >立即登录</Button>
-          </View>
-      </View>
-        }
-        
-        
-      </AtFloatLayout>
-      {/* <AtFloatLayout isOpened={isSHow} onClose={ handleClose }>
-        {
-          showNum == 0 ? <LoginIntroduce></LoginIntroduce> : <PhoneLogin></PhoneLogin>
-        }
-        
-        
-      </AtFloatLayout> */}
+      <LoginBoxs isLogin={isUserLogin} userName={userName}></LoginBoxs>
       <View
         className='mine-apply-panel'
         style={{
@@ -751,6 +308,7 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
         title="设置"
         rightIcon={<Arrow />}
       ></Cell> */}
+      <LoginBox ref={childRef}></LoginBox>
     </Layout>
   );
 };

src/pages/user/setting/index.tsx

@@ -32,9 +32,11 @@ const Setting = (props: PropsWithChildren<ISettingProps>) => {
                 onClick={() => {
                     Taro.showModal({
                         title: "是否退出登录",
-                        success: () => {
-                            UserHelper.outLogin();
-                        }
+                        success: (res) => {
+                            if(res.confirm){
+                                UserHelper.outLogin();
+                            }
+                        },
                     })
                 }}
                 size="large" title="安全退出" bordered={false} rightIcon={<Arrow />}  ></Cell>