small-program/src/pages/user/mine/index.tsx

import Flex from "@/component/flex";
import UserApi from "@/apis/userApi";
import APPConfig from "@/config";
import { useRequest } from "ahooks";
import Layout from "@/component/layout";
import Padding, { EdgeInsets } from "@/component/padding";
import SizeBox from "@/component/sizeBox";
import AppContext from "@/context/appContext";
import ImageUtil from "@/utils/imgUtils";
import { Image, View, Text ,Input, Button as TaroButton } from "@tarojs/components";
import { PropsWithChildren, useContext ,useRef} from "react";
import useStore from "@/hooks/useRedux";
import RouteUtil from "@/utils/routeUtil";
import UserHelper from "@/helper/userHelper";
import Button from "@/component/button";
import { parseQueryParams, isOuterLink } from "@/utils/toolsUtil";
import "./index.scss";
import LoginBox from "../components/LoginBox";
interface IMineProps {}

const Mine = (props: PropsWithChildren<IMineProps>) => {
  const appContext = useContext(AppContext);
  const { screenSize } = useContext(AppContext);
  const { statusBarHeight } = appContext.systemInfo!;
  const userInfo = useStore((p) => p.userInfo);
  const isUserLogin = UserHelper.isLogin()

  const indexInfoResult = useRequest(() => {
    return UserApi.getIndexInfoUsingPost({
      params: { appId: APPConfig.APPID },
    }).toData();
  });

  const childRef:any = useRef()
  const handleOpen = () => {
    childRef.current.handleOpen()
  }
  const postJumpUrlResult = () => {
    const params = parseQueryParams(indexInfoResult.data.link)
    return UserApi.getJumpUrlPost({
      loading: true,
      data: { appId: APPConfig.APPID, channelCode: params.channelCode, productId: params.productId }
    }).toData().then(res => {
      console.log("获取跳转链接结果", res)
      RouteUtil.toWebViewPage({ url: res?.adJumpLink })
    })
  }

  const loginFlowHandler = () => {
    UserHelper.UpdateOpenId()
    if (isOuterLink(indexInfoResult.data.link)) {
      postJumpUrlResult()
    } else {
      RouteUtil.toWebViewPage({ url: indexInfoResult.data.link })
    }
  }



  const ApplyButton = ({ isLogin }) => {
    return (
      <>
        {
          isLogin ? (<Button className='mine-apply-panel-button' onClick={() => {
            UserHelper.afterLogin({
              pop: false,
              callback: async () => {
                indexInfoResult.data && loginFlowHandler()
              },
            });
          }}
          >立即申请</Button>) : (<Button onClick={handleOpen}
            className='mine-apply-panel-button'
          >立即申请</Button>)
        }
      </>
    )
  }
  const LoginBoxs = ({ isLogin ,userName}) => {
    return(
      <>
       { isLogin? 
        <View
          className="mine-info"
          >
          <Padding padding={EdgeInsets.symmetric({ horizontal: 20 })}>
            <Image
              src={require("../../../assets/icon_head.png")}
              className='avatar-image-head'
            />
          </Padding>
          <View className="mine-box">
            <Text className='mine-login'>{userName}</Text>
            <Text className='mine-text'>欢迎来到惠融钱包~</Text>
          </View>
        </View> :
          <View
          className="mine-info"
          onClick={handleOpen}
          >
          <Padding padding={EdgeInsets.symmetric({ horizontal: 20 })}>
            <Image
              src={require("../../../assets/icon_head.png")}
              className='avatar-image-head'
            />
          </Padding>
          <View className="mine-box">
            <Text className='mine-login'>登录/注册</Text>
            <Text className='mine-text'>欢迎来到惠融钱包~</Text>
          </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');
  }
  const userName = maskPhone(userInfo.userMobile);
  return (
    <Layout className='mine' bottomBarIndex={1}>
      <SizeBox height={statusBarHeight}></SizeBox>
      <SizeBox height={36}></SizeBox>
      <LoginBoxs isLogin={isUserLogin} userName={userName}></LoginBoxs>
      <View
        className='mine-apply-panel'
        style={{
          ...ImageUtil.calculationHeight(
            750 / 324,
            appContext.systemInfo!.screenWidth - 32
          ),
          position: "relative",
        }}
      >
        <Text className='mine-apply-panel-title'>最高可申请（元）</Text>
        <Flex justifyContent='space-between' alignItem='center' direction='row'>
          <Text className='mine-apply-panel-money'>200,000</Text>
          {/* <Button
            className='mine-apply-panel-button'
            onClick={() => {
              UserHelper.afterLogin({
                pop: false,
                callback: async () => {
                  indexInfoResult.data &&
                    RouteUtil.toWebViewPage({
                      url: indexInfoResult.data.link,
                    });
                },
              });
            }}
          >
            立即申请
          </Button> */}
          <ApplyButton isLogin={isUserLogin}></ApplyButton>
        </Flex>
        <Flex
          justifyContent='flex-start'
          alignItem='center'
          direction='row'
          columnGap={12}
          className='mine-apply-panel-tip'
        >
          <Text>年化利率7.2-24%(单利)</Text>
          <View className='split-char'></View>
          <Text>期限3-36个月</Text>
        </Flex>
      </View>

      <View className='mine-apply-panel-warn'>
          <Image src={require('@/assets/new-edition/icon-info.png')} className='icon-info' />
          <Text>具体额度以资金方审批为准</Text>
        </View>
        

      {/* <View
        style={{
          ...ImageUtil.calculationHeight(750 / 328, screenSize.width),
          position: "relative",
        }}
        onClick={() => {
          UserHelper.afterLogin({
            pop: false,
            callback: async () => {},
          });
        }}
      >
        <Flex justifyContent="flex-end" className="background-content">
          <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
            <Flex columnGap={32} direction="row" alignItem="center">
              <Image
                src={require("@/assets/icon_mine_avatar.png")}
                className="mine-avatar"
              />
              <Label bold>
                {userInfo ? `HI，${userInfo.userMobile}` : "点击此处登录"}
              </Label>
            </Flex>
          </Padding>
        </Flex>
      </View> */}
      <SizeBox height={16} />
      <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
        <View className='mine-tools-panel-title'>我的工具</View>
        <View className='mine-tools-panel'>
          <TaroButton
            open-type='contact'
            session-from='sessionFrom'
            className='mine-tools-item'
          >
            <Image
              src={require("@/assets/new-edition/icon-service.svg")}
              className='mine-tools-item-icon'
            />
            <Text className='mine-tools-item-title'>在线客服</Text>
            <Image
              src={require("@/assets/new-edition/icon-arrow-right.svg")}
              className='icon-arrow'
            />
          </TaroButton>
          <View
            className='mine-tools-item'
            onClick={() => {
              RouteUtil.push("/pages/user/setting/index");
            }}
          >
            <Image
              src={require("@/assets/new-edition/icon-setting.svg")}
              className='mine-tools-item-icon'
            />
            <View className='mine-tools-item-title'>系统设置</View>
            <Image
              src={require("@/assets/new-edition/icon-arrow-right.svg")}
              className='icon-arrow'
            />
          </View>
        </View>
      </Padding>
      <SizeBox height={20} />

      <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
        <Image
          onClick={() => {
            // https://huirong.bicredit.xin/
            RouteUtil.toWebViewPage({
              url: "https://mp.weixin.qq.com/s/4umQqPbPGfCgXqCizeXqKA",
            });
          }}
          src={require("@/assets/new-edition/wechat-official.png")}
          className='mine-image-wechat-official'
        />
      </Padding>
      {/* <Flex direction="row" className="mine-menu">
        <Flex
          onClick={() => {
            // https://huirong.bicredit.xin/
            RouteUtil.toWebViewPage({
              url: "https://h5.bicredit.xin/view/webapp/business-cooperation.html",
            });
          }}
          columnGap="sm"
          direction="row"
          alignItem="center"
          justifyContent="center"
          flex={1}
          className="mine-menu-wrap"
        >
          <Label>商务合作</Label>
          <Image
            src={require("@/assets/icon_mine_business.png")}
            className="mine-menu-icon"
          />
        </Flex>
        <SizeBox width={16} />
        <Flex flex={1}>
          <Button
            className="mine-menu-wrap"
            open-type="contact"
            session-from="sessionFrom"
          >
            <Flex
              columnGap="sm"
              direction="row"
              alignItem="center"
              justifyContent="center"
              style={{ height: "100%" }}
              flex={1}
            >
              在线客服
              <Image
                src={require("@/assets/icon_mine_service.png")}
                className="mine-menu-icon"
              />
            </Flex>
          </Button>
        </Flex>
      </Flex> */}
      <SizeBox height={16} />
      {/* <Cell
        size="large"
        onClick={() => {
          RouteUtil.push("/pages/user/aggrement/index");
        }}
        icon={
          <Image
            src={require("@/assets/icon_mine_aggrement.png")}
            className="mine-item-icon"
          />
        }
        title="用户协议"
        rightIcon={<Arrow />}
      ></Cell>
      <SizeBox height={8} /> */}
      {/* <Cell size="large" icon={<Image src={require('@/assets/icon_mine_upgrade.png')} className="mine-item-icon" />} title="检查更新" rightIcon={<Arrow />}  ></Cell>
            <SizeBox height={8} /> */}
      {/* <Cell
        onClick={() => {
          RouteUtil.push("/pages/user/setting/index");
        }}
        size="large"
        icon={
          <Image
            src={require("@/assets/icon_mine_setting.png")}
            className="mine-item-icon"
          />
        }
        title="设置"
        rightIcon={<Arrow />}
      ></Cell> */}
      <LoginBox ref={childRef}></LoginBox>
    </Layout>
  );
};

export default Mine;