ipanel-rnapp-ajb-base 1.0.39 → 1.0.41

package/app/screens/LoginScreen/indexSbk.js

@@ -0,0 +1,950 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import {
+  View,
+  ScrollView,
+  Text,
+  TextInput,
+  StyleSheet,
+  Alert,
+  Platform,
+  StatusBar,
+  TouchableOpacity,
+  NativeModules,
+  ImageBackground,
+  TouchableWithoutFeedback,
+  Dimensions,
+} from "react-native";
+import { useSafeArea } from "react-native-safe-area-context";
+import CryptoJS from "crypto-js";
+import UUIDGenerator from "react-native-uuid-generator";
+import { Icon, Image, CheckBox, Button } from "@rneui/themed";
+import DeviceInfo from "react-native-device-info";
+
+import SmsCodeInput from "../../components/common/SmsCodeInput";
+
+import storage from "../../storage";
+import { replace } from "../../utils/RootNavigation";
+import {
+  getUserLocation,
+  updateHomedToken,
+  initOperatorHomedTouristAccount,
+  appReport,
+} from "../../utils/common";
+import { obtainSmscode, smscodeLogin, accountLogin } from "../../api";
+import { hideLoading, showLoading, showToast } from "../../utils/notice";
+
+import { confirmWithContent } from "../../utils/registerDialog";
+import config from "../../utils/config";
+import ProtocolType from "../../components/common/LoginType/protocol";
+let protocolAgreeResolve = null;
+
+function LoginScreen({ navigation, route }) {
+  const insets = useSafeArea();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLogined, setIsLogined] = useState(false);
+  const timer = useRef(null);
+  const [isLogining, setIsLogining] = useState(false);
+
+  useEffect(() => {
+    // 获取登录状态
+    storage.get("accessToken").then((token) => {
+      // const appUserAgreement = await storage.get('appUserAgreement');
+      // if (!appUserAgreement) {
+      //   setProtocolAgree(false);
+      // }
+
+      if (token) {
+        if (DeviceInfo.getBrand() === "Allwinner") {
+          replace("SbkScreen", {
+            redirect: true,
+          });
+        } else {
+          replace("Home", {
+            redirect: true,
+          });
+        }
+
+        // 上报APP启动事件
+        appReport("APP_STARTUP");
+      }
+      setTimeout(() => {
+        setIsLoading(false);
+        setIsLogined(!!token);
+      }, 0);
+    });
+  }, []);
+
+  // useEffect(() => {
+  //   if (isLogined) {
+  //     // console.log("检测到已登录，自动跳转首页");
+  //     // TODO update account_data
+  //     replace('Home', {
+  //       redirect: true,
+  //     });
+  //   }
+  // }, [isLogined]);
+
+  const [phone, setPhone] = useState("");
+  const [smsId, setSmsId] = useState("");
+  const [userInputSmsCode, setUserInputSmsCode] = useState("");
+  const [smsCodeRightBtnDisabled, setSmsCodeRightBtnDisabled] = useState(false);
+  const [smsCodeRightBtnText, setSmsCodeRightBtnText] = useState("获取验证码");
+  const [smsCodeResendTime, setSmsCodeResendTime] = useState(0);
+
+  useEffect(() => {
+    if (phone && smsCodeResendTime === 0) {
+      setSmsCodeRightBtnDisabled(false);
+      setSmsCodeRightBtnText("获取验证码");
+    } else {
+      setSmsCodeRightBtnDisabled(true);
+    }
+  }, [phone, smsCodeResendTime]);
+  useEffect(() => {
+    if (smsCodeResendTime > 0) {
+      setSmsCodeRightBtnText(`${smsCodeResendTime}s后重发`);
+      timer.current = setTimeout(() => {
+        setSmsCodeResendTime(smsCodeResendTime - 1);
+      }, 1000);
+    }
+
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [smsCodeResendTime]);
+
+  // 0 手机号+短信验证码登录
+  // 1 账号密码登录
+  const [loginWay, setLoginWay] = useState(0);
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const [protocolAgree, setProtocolAgree] = useState(false);
+  const [protocolDialogVisible, setProtocolDialogVisible] = useState(false);
+
+  const [serviceAgree, setServiceAgree] = useState(false);
+  const [serviceDialogVisible, setServiceDialogVisible] = useState(false);
+  const [privacyAgree, setPrivacyAgree] = useState(false);
+  const [privacyDialogVisible, setPrivacyDialogVisible] = useState(false);
+
+  useEffect(() => {
+    if (!route.params?.skip) {
+      openProtocolDialog();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (serviceAgree && privacyAgree) {
+      setProtocolAgree(true);
+    } else {
+      setProtocolAgree(false);
+    }
+  }, [serviceAgree, privacyAgree]);
+
+  const loginDisabled = !(
+    (loginWay === 0 && phone && userInputSmsCode) ||
+    (loginWay === 1 && username && password)
+  );
+
+  let smsCodeTimer;
+
+  function validPhone(phone) {
+    if (!phone) {
+      Alert.alert("请输入手机号");
+      return false;
+    }
+    if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(phone)) {
+      Alert.alert("请输入正确的手机号");
+      return false;
+    }
+    return true;
+  }
+
+  const handleGetSmsId = async () => {
+    if (!validPhone(phone)) {
+      return;
+    }
+    // 60s后重发
+    setSmsCodeResendTime(60);
+
+    setSmsCodeRightBtnDisabled(true);
+
+    const res = await obtainSmscode({
+      phone_number: phone,
+      length: 4,
+      type: 1, // type=1 表示登录用途
+    }).catch((err) => {
+      console.log(err);
+      setSmsCodeRightBtnText("获取验证码");
+      setSmsCodeRightBtnDisabled(false);
+    });
+
+    if (res && res.code === 0) {
+      setSmsId(res.result.sms_id);
+
+      smsCodeTimer = setTimeout(() => {
+        setSmsCodeRightBtnText("获取验证码");
+        setSmsCodeRightBtnDisabled(false);
+      }, 120000);
+    } else {
+      setSmsCodeRightBtnText("获取验证码");
+      setSmsCodeRightBtnDisabled(false);
+    }
+  };
+
+  const handleUserAgree = () => {
+    // setProtocolDialogVisible(false);
+    // handleLogin();
+    // storage.set('appUserAgreement', true);
+
+    // getUserLocation().then(geoRes => {
+    //   global.base.storage.set('location', geoRes);
+    // });
+    setProtocolAgree(true);
+    typeof protocolAgreeResolve === "function" && protocolAgreeResolve();
+    protocolAgreeResolve = null;
+  };
+
+  const handleUserDisagree = async () => {
+    // await storage.set('appUserAgreement', false);
+    // NativeModules?.RNToNativeEmitter?.exitApp();
+    setProtocolDialogVisible(false);
+    setProtocolAgree(false);
+    setServiceAgree(false);
+    setPrivacyAgree(false);
+  };
+
+  const handleLoginPress = () => {
+    if (loginDisabled) {
+      return;
+    }
+    if (protocolAgree) {
+      handleLogin();
+    } else {
+      // setProtocolDialogVisible(true);
+      openProtocolDialog().then(() => {
+        handleLogin();
+      });
+    }
+  };
+
+  const openProtocolDialog = () => {
+    return new Promise((resolve) => {
+      // setProtocolDialogVisible(true);
+      protocolAgreeResolve = resolve;
+    }).then(() => {
+      setProtocolDialogVisible(false);
+    });
+  };
+
+  const handleLogin = async () => {
+    let res;
+
+    const { deviceModal, appName } = NativeModules?.RNToNativeEmitter || {};
+
+    const appID = await global.base.getAppId();
+
+    console.log("appID", appID);
+
+    let finallyAppID = appID;
+    if (!appID) {
+      // 兼容本地开发测试
+      finallyAppID = await UUIDGenerator.getRandomUUID();
+    }
+
+    if (loginWay === 0) {
+      if (!validPhone(phone)) {
+        return;
+      }
+
+      if (!smsId) {
+        Alert.alert("请先获取验证码");
+        return;
+      }
+
+      if (!userInputSmsCode) {
+        Alert.alert("请输入短信验证码");
+        return;
+      }
+      showLoading("登录中...");
+      setIsLogining(true);
+      res = await smscodeLogin({
+        phone_number: phone,
+        sms_id: smsId,
+        sms_code: userInputSmsCode,
+        create_address: 1, // 注册时自动建默认家庭
+        extend: {
+          appid: finallyAppID,
+          model: deviceModal || "开发测试",
+          application: appName || "爱家宝",
+        },
+      });
+    } else {
+      if (!username) {
+        Alert.alert("请输入账号");
+        return;
+      }
+
+      if (!password) {
+        Alert.alert("请输入密码");
+        return;
+      }
+      console.log(global.loading, "global.loading");
+      showLoading("登录中...");
+      setIsLogining(true);
+      res = await accountLogin({
+        account_name: username,
+        password: CryptoJS.MD5(password).toString(),
+        create_address: 1, // 注册时自动建默认家庭
+        extend: {
+          appid: finallyAppID,
+          model: deviceModal || "开发测试",
+          application: appName || "爱家宝",
+        },
+      });
+    }
+    if (res.code === 0) {
+      console.log(res.result, "ipanelClound用户信息");
+      await storage.set("accessToken", res.result.access_token);
+      await storage.set("refreshToken", res.result.refresh_token);
+
+      if (res.result.address && res.result.address[0]) {
+        const defaultAddr = res.result.address[0];
+        await storage.set("activeAddr", defaultAddr);
+        await storage.set("addressList", res.result.address || []);
+        await updateHomedToken();
+      } else {
+        await storage.set("activeAddr", {});
+        await storage.set("addressList", []);
+      }
+
+      delete res.result.address;
+      await storage.set("accountData", res.result);
+
+      // 放开这段重新登录就会置空运营商（进入标准版）
+      // await storage.set(
+      //   `${res.result?.account?.account_id || ''}currentOperator`,
+      //   {},
+      // );
+
+      /**
+       * ☆☆☆使用homed token的完整方案：☆☆☆
+          - 对于 homed 数据只读的业务场景，使用游客令牌（由 http://access.homed.me/account/get_accesstoken 接口产生）。该方式的优点是不依赖ipanelcloud用户登录（当前APP实现上是ipanelcloud登录后才能看到内容，因此这个可以不着急实现），不产生垃圾用户数据
+          - 涉及到产生个人数据但 又不想走绑定正式homed用户流程 的业务场景，使用ipanelcloud登录后返回的 account_id 注册的游客用户token（即：await storage.get("homedTouristAccessToken") ）
+          - 涉及到产生个人数据且 数据需要关联到正式homed用户 的业务场景，走绑定正式homed用户的流程（即：await storage.get("homedAccessToken") ）
+       */
+      // 初始化默认运营商对应的homed游客账号
+      console.log("account_id", res.result.account_id);
+      const envVersion =
+        NativeModules?.RNToNativeEmitter?.serverCluster || "dev";
+      await initOperatorHomedTouristAccount({
+        touristUsername: res.result.account_id, // 使用ipanelcloud account_id 作为homed游客账号的用户名
+        domain: envVersion === "dev" ? "homed.me" : "homed.tv",
+        touristGroupId: envVersion === "dev" ? 115017 : 4664, // 4664: tv集群的手机APP游客用户组. 115017: 运营集群手机APP游客用户组
+      });
+      clearTimeout(smsCodeTimer);
+      // setIsLogined(true);
+      // 判断是否已经选了运营商
+      const currentOperator = await storage.get(
+        `${res.result?.account?.account_id || ""}currentOperator`
+      );
+
+      // 上报APP启动事件
+      appReport("APP_STARTUP");
+
+      hideLoading();
+      setIsLogining(false);
+      const appName =
+        NativeModules?.RNToNativeEmitter?.appName || config.LOCALTEST_APP_NAME;
+
+      if (DeviceInfo.getBrand() === "Allwinner") {
+        // 声必可屏幕
+        replace("SbkScreen", {
+          redirect: false,
+        });
+      } else if (currentOperator || appName.includes("安电工")) {
+        replace("Home", {
+          redirect: false,
+        });
+      } else {
+        confirmWithContent({
+          title: "选择运营商",
+          component: "你是否要选择运营商",
+          confirmButtonText: "确定",
+          confirmCallback: () => {
+            replace("OperatorSelectScreen", {
+              purpose: "init",
+            });
+          },
+          cancelButtonText: "先不选",
+          cancelCallback: () => {
+            replace("Home", {
+              redirect: false,
+            });
+          },
+        });
+      }
+    } else {
+      hideLoading();
+      setIsLogining(false);
+      global.toast.showToast(res.message + "(code: " + res.code + ")");
+    }
+  };
+
+  const statusBarPlaceholderStyle = {
+    height: (Platform.OS === "ios" ? insets.top : 0) + StatusBar.currentHeight,
+  };
+
+  const handleSwitchLoginWay = () => {
+    if (loginWay === 0) {
+      setLoginWay(1);
+    } else {
+      setLoginWay(0);
+    }
+  };
+
+  const handleViewUserAgreement = () => {
+    navigation.navigate("WebviewScreen", {
+      title: "用户协议",
+      url: "https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/user_agreement.html",
+    });
+  };
+  const handleViewPrivacyClause = () => {
+    navigation.navigate("WebviewScreen", {
+      title: "隐私条款",
+      url: "https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/privacy_policy.html",
+    });
+  };
+  const handleViewUserAgreementByType = (type) => {
+    if (type === "service") {
+      setServiceDialogVisible(true);
+    } else if (type === "privacy") {
+      setPrivacyDialogVisible(true);
+    }
+  };
+
+  const handleSetProtocolAgree = (isAgree) => {
+    setProtocolAgree(isAgree);
+    setServiceAgree(isAgree);
+    setPrivacyAgree(isAgree);
+  };
+
+  const handleOneDisagree = async (type) => {
+    setProtocolAgree(false);
+    if (type === "service") {
+      setServiceAgree(false);
+      setServiceDialogVisible(false);
+    } else if (type === "privacy") {
+      setPrivacyAgree(false);
+      setPrivacyDialogVisible(false);
+    }
+  };
+  const handleOneAgree = (type) => {
+    if (type === "service") {
+      setServiceAgree(true);
+      setServiceDialogVisible(false);
+    } else if (type === "privacy") {
+      setPrivacyAgree(true);
+      setPrivacyDialogVisible(false);
+    }
+
+    typeof protocolAgreeResolve === "function" && protocolAgreeResolve();
+    protocolAgreeResolve = null;
+  };
+
+  loginDisabled;
+  const loginBtnBg = {
+    backgroundColor: loginDisabled
+      ? "rgba(234, 96, 0, 0.3)"
+      : "rgba(234, 96, 0, 1)",
+  };
+
+  return (
+    <ImageBackground
+      source={require("../../assets/img/login_bg.png")}
+      style={[
+        styles.container,
+        { paddingTop: Platform.OS === "ios" ? insets.top : 0 },
+      ]}
+    >
+      {isLoading || isLogined ? (
+        <View style={styles.welcomeView}>{/* 白屏界面 */}</View>
+      ) : (
+        <View style={styles.loginView}>
+          <View style={statusBarPlaceholderStyle} />
+
+          <View style={styles.changeLoginWay}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleSwitchLoginWay}
+            >
+              <View style={styles.changeLoginWayInner}>
+                <Image
+                  source={require("../../assets/img/qiehuan.png")}
+                  style={styles.exchangeIcon}
+                />
+
+                <Text style={styles.changeLoginWayText}>
+                  {loginWay === 0 ? "密码登录" : "验证码登录"}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.content}>
+            <View style={styles.titleBox}>
+              <Text style={styles.title}>
+                {loginWay === 0 ? "验证码登录" : "密码登录"}
+              </Text>
+
+              <Text style={styles.subTitle}>
+                {loginWay === 0
+                  ? "未注册过的手机号验证通过后将自动注册"
+                  : "请使用账号和密码登录"}
+              </Text>
+            </View>
+
+            {loginWay === 0 && (
+              <>
+                <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    value={phone}
+                    placeholder="手机号"
+                    onChangeText={(text) => setPhone(text)}
+                  />
+                </View>
+                <View style={styles.inputBox}>
+                  <SmsCodeInput
+                    value={userInputSmsCode}
+                    placeholder="验证码"
+                    rightBtnDisabled={smsCodeRightBtnDisabled}
+                    rightBtnText={smsCodeRightBtnText}
+                    onChangeText={(text) => setUserInputSmsCode(text)}
+                    onRightBtnPress={handleGetSmsId}
+                  />
+                </View>
+              </>
+            )}
+
+            {loginWay === 1 && (
+              <>
+                <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    value={username}
+                    placeholder="账号"
+                    onChangeText={(text) => setUsername(text)}
+                  />
+                </View>
+                <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    value={password}
+                    secureTextEntry
+                    placeholder="密码"
+                    onChangeText={(text) => setPassword(text)}
+                  />
+                </View>
+              </>
+            )}
+
+            <View style={styles.protocol}>
+              <CheckBox
+                center
+                checked={protocolAgree}
+                containerStyle={{
+                  margin: 0,
+                  padding: 0,
+                  backgroundColor: "transparent",
+                }}
+                onPress={() => handleSetProtocolAgree(!protocolAgree)}
+                checkedIcon={
+                  <Icon
+                    name="checkmark-circle-outline"
+                    type="ionicon"
+                    color={styles.protocolLinkAgree.color}
+                    size={20}
+                  />
+                }
+                uncheckedIcon={
+                  <Icon
+                    name="radio-button-off"
+                    type="ionicon"
+                    color={styles.protocolText.color}
+                    size={20}
+                  />
+                }
+              />
+              <TouchableWithoutFeedback
+                onPress={() => setProtocolAgree(!protocolAgree)}
+              >
+                <Text style={styles.protocolText}>
+                  已阅读并同意
+                  <TouchableWithoutFeedback
+                    style={{ paddingVertical: 100 }}
+                    onPress={() => handleViewUserAgreementByType("service")}
+                  >
+                    <Text
+                      style={
+                        protocolAgree || serviceAgree
+                          ? styles.protocolLinkAgree
+                          : styles.protocolLink
+                      }
+                    >
+                      用户协议
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  和
+                  <TouchableWithoutFeedback
+                    style={{ paddingVertical: 100 }}
+                    onPress={() => handleViewUserAgreementByType("privacy")}
+                  >
+                    <Text
+                      style={
+                        protocolAgree || privacyAgree
+                          ? styles.protocolLinkAgree
+                          : styles.protocolLink
+                      }
+                    >
+                      隐私条款
+                    </Text>
+                  </TouchableWithoutFeedback>
+                </Text>
+              </TouchableWithoutFeedback>
+            </View>
+
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleLoginPress}
+              disabled={loginDisabled}
+            >
+              <View style={styles.loginBtnBox}>
+                <View style={[styles.loginBtn, loginBtnBg]}>
+                  <Text style={styles.loginBtnText}>
+                    {isLogining ? "正在登录中..." : "登录"}
+                  </Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
+      {serviceDialogVisible && !isLoading && (
+        <ProtocolType
+          handleOneDisagree={handleOneDisagree}
+          handleOneAgree={handleOneAgree}
+          url="https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/user_agreement.html"
+          type="service"
+        />
+      )}
+      {privacyDialogVisible && !isLoading && (
+        <ProtocolType
+          handleOneDisagree={handleOneDisagree}
+          handleOneAgree={handleOneAgree}
+          url="https://ipanelcloud2.ipanel.cn:50443/iapp/ajbstatic/service_agreement/privacy_policy.html"
+          type="privacy"
+        />
+      )}
+
+      {protocolDialogVisible && !isLoading && (
+        <View style={styles.agreementMask}>
+          <View style={styles.agreementConfirmContent}>
+            <View style={styles.agreementConfirmHead}>
+              <TouchableOpacity
+                style={styles.headerLeft}
+                onPress={() => {
+                  console.log(111);
+                  setProtocolDialogVisible(false);
+                }}
+              >
+                <Image
+                  source={require("../../assets/img/goBack.png")}
+                  style={styles.goBackImg}
+                  resizeMode="contain"
+                />
+              </TouchableOpacity>
+              <View style={styles.agreementConfirmTitleBox}>
+                <Text style={styles.agreementConfirmTitle}>欢迎使用爱家宝</Text>
+              </View>
+            </View>
+            <ScrollView>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  为了更好的保障您的合法权益，请您阅读并同意
+                  <TouchableWithoutFeedback onPress={handleViewUserAgreement}>
+                    <Text style={styles.agreementConfirmImportantText}>
+                      用户协议
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  和
+                  <TouchableWithoutFeedback onPress={handleViewPrivacyClause}>
+                    <Text style={styles.agreementConfirmImportantText}>
+                      隐私条款
+                    </Text>
+                  </TouchableWithoutFeedback>
+                  。为向您提供更优质的服务，我们可能会向您申请下列相关权限：
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  1. 读写设备存储权限（Android
+                  版本）：用于用于用户反馈、客服等功能中读写设备上的照片及文件；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  2. 地理位置权限（Android、iOS
+                  版本）：用于家庭位置管理、判断地区提供天气服务、发现附近智能设备；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  3. 相机权限（Android、iOS
+                  版本）：用于扫码绑定电视账户、扫码进行设备添加等功能；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  4. 相册权限(Android、ios
+                  版本):用于用户反馈等功能中读写设备上的照片及视频；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  5. 麦克风权限(Android、ioS 版本):智能客服等功能；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  6. 读取电话联系人权限(Android):用于电视通讯功能；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  7. 开启蓝牙权限(Android、ios
+                  版本):用于连接设备时连接设备发出的蓝牙信号，以进行设备通信，对于通过蓝牙连接的智能设备，也需要蓝牙权限用于通信；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  8. 开启蓝牙权限(Android、ios
+                  版本):用于连接设备时连接设备发出的蓝牙信号，以进行设备通信，对于通过蓝牙连接的智能设备，也需要蓝牙权限用于通信；
+                </Text>
+              </View>
+              <View>
+                <Text style={styles.agreementConfirmText}>
+                  7. 开启蓝牙权限(Android、ios
+                  版本):用于连接设备时连接设备发出的蓝牙信号，以进行设备通信，对于通过蓝牙连接的智能设备，也需要蓝牙权限用于通信；
+                </Text>
+              </View>
+            </ScrollView>
+
+            <View style={styles.agreementButtons}>
+              <TouchableOpacity
+                style={styles.disagreeBtn}
+                activeOpacity={0.7}
+                onPress={handleUserDisagree}
+              >
+                <Text style={styles.disagreeBtnText}>不同意</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.agreeBtn}
+                activeOpacity={0.7}
+                onPress={handleUserAgree}
+              >
+                <Text style={styles.agreeBtnText}>同意</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      )}
+    </ImageBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  welcomeView: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  content: {
+    paddingHorizontal: 30,
+  },
+  titleBox: {
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 24,
+    color: "rgba(48, 48, 48, 1)",
+  },
+  subTitle: {
+    fontSize: 14,
+    marginTop: 10,
+  },
+  inputBox: {
+    borderBottomWidth: 1,
+    marginVertical: 10,
+    borderBottomColor: "rgba(217, 217, 217, 1)",
+  },
+  input: {
+    height: 50,
+    color: "#333",
+  },
+  welcomText: {
+    fontSize: 30,
+  },
+  loginView: {
+    flex: 1,
+  },
+  changeLoginWay: {
+    // height: 70,
+    justifyContent: "center",
+    alignItems: "flex-end",
+    marginRight: 20,
+  },
+  changeLoginWayInner: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  changeLoginWayText: {
+    color: "rgba(51, 51, 51, 1)",
+    fontSize: 16,
+  },
+  exchangeIcon: {
+    width: 16,
+    height: 16,
+    marginRight: 3,
+  },
+  protocol: {
+    marginVertical: 15,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  protocolText: {
+    color: "rgba(102, 102, 102, 1)",
+  },
+  protocolLink: {
+    color: "rgba(234, 96, 0, 1)",
+  },
+  protocolLinkAgree: {
+    color: "#0EC12C",
+  },
+  agreementMask: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 2,
+  },
+  agreementConfirmContent: {
+    position: "absolute",
+    width: Dimensions.get("window").width - 60,
+    height: 400,
+    left: 30,
+    top: Dimensions.get("window").height / 2 - 200,
+    backgroundColor: "#fff",
+    paddingBottom: 0,
+    borderWidth: 1,
+    borderColor: "#a1a1a1",
+    borderRadius: 20,
+  },
+  agreementConfirmHead: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 10,
+    paddingLeft: 10,
+    marginBottom: 5,
+    height: 40,
+  },
+  headerLeft: {
+    position: "absolute",
+    top: 15,
+    left: 10,
+    zIndex: 2,
+  },
+  goBackImg: {
+    width: 20,
+    height: 20,
+  },
+  agreementConfirmTitleBox: {
+    // flex: 1,
+    position: "absolute",
+    top: 10,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  agreementConfirmTitle: {
+    fontSize: 20,
+    // lineHeight: 50,
+    color: "#000",
+    textAlign: "center",
+    // paddingTop: 20,
+  },
+  agreementConfirmText: {
+    fontSize: 16,
+    lineHeight: 30,
+    paddingHorizontal: 20,
+    color: "#000",
+  },
+  agreementConfirmImportantText: {
+    color: "rgba(234, 96, 0, 1)",
+  },
+  agreementButtons: {
+    height: 50,
+    flexDirection: "row",
+    justifyContent: "space-around",
+    borderTopColor: "#c1c1c1",
+    borderTopWidth: 0.5,
+  },
+  disagreeBtn: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    borderBottomLeftRadius: 20,
+  },
+  disagreeBtnText: {
+    color: "#ccc",
+  },
+  agreeBtn: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    borderLeftColor: "#c1c1c1",
+    borderLeftWidth: 0.5,
+    borderBottomRightRadius: 20,
+  },
+  agreeBtnText: {
+    color: "#333",
+    fontSize: 16,
+  },
+  loginBtnBox: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  loginBtn: {
+    flex: 1,
+    height: 48,
+    marginHorizontal: 10,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  loginBtnText: {
+    color: "#fff",
+    fontSize: 18,
+  },
+});
+
+export default LoginScreen;