small-program/src/pages/home/index.tsx

import "./index.scss";
import UserApi from "@/apis/userApi";
import Button from "@/component/button";
import Flex from "@/component/flex";
import Label from "@/component/label";
import Layout from "@/component/layout";
import Padding, { EdgeInsets } from "@/component/padding";
import SizeBox from "@/component/sizeBox";
import APPConfig from "@/config";
import AppContext from "@/context/appContext";
import UserHelper from "@/helper/userHelper";
import ImageUtil from "@/utils/imgUtils";
import RequestUtil from "@/utils/request";
import RouteUtil from "@/utils/routeUtil";
import { Image, ScrollView, View, Text, Input } from "@tarojs/components";
import { parseQueryParams, isOuterLink } from "@/utils/toolsUtil";
import Taro, { pxTransform } from "@tarojs/taro";
import { useRequest } from "ahooks";
import React, { useContext, useMemo, useState , useEffect ,useRef } from "react";
import LoginBox from "../user/components/LoginBox";

const Home = () => {
  const childRef:any = 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 },
    }).toData();
  });
  
  const channelResult = useRequest(() => {
    return UserApi.homeFetchChannel({
      data: { channelCode: 'hrqbxcx', refer: '' },
    }).toData().then(res => {
      setBottomRemark(res.bottom_remark)
    })
  });

  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 = async () => {
    await UserHelper.UpdateOpenId()
    if (isOuterLink(indexInfoResult.data.link)) {
      await postJumpUrlResult()
    } else {
      await RouteUtil.toWebViewPage({ url: indexInfoResult.data.link })
    }
  }


  const imgBackStyle = useMemo(() => {
    return {
      ...ImageUtil.calculationHeight(332 / 170, (screenWidth - 64 + 16) / 2),
      position: "relative",
    } as React.CSSProperties;
  }, []);
  const item = (index: number, title: string, desc: string) => {
    return (
      <View style={imgBackStyle}>
        <Image
          className='background-image'
          src={require(`../../assets/icon_home_characteristic_b_${index}.png`)}
        />
        <Flex
          rowGap='sm'
          className='background-content background-content-wrap'
        >
          <Flex columnGap='sm' direction='row' alignItem='center'>
            <Image
              className='background-content-i'
              src={require(`../../assets/icon_home_characteristic_i_${index}.png`)}
            />
            <Label bold>{title}</Label>
          </Flex>
          <Label style={{ fontSize: pxTransform(22) }} type='secondary'>
            {desc}
          </Label>
        </Flex>
      </View>
    );
  };

  const BottomRemark = () => bottomRemark.split(';').map(text => <View style={{ margin: '4px 0' }}>{text}</View>)
  const ApplyButton = ({ isLogin }) => {
    return (
      <>
        {
          isLogin ? (<Button className='index-back-btn' onClick={() => {
            UserHelper.afterLogin({
              pop: false,
              callback: async () => {
                indexInfoResult.data && loginFlowHandler()
                // indexInfoResult.data && postJumpUrlResult()
                  // RouteUtil.toWebViewPage({
                  //   url: indexInfoResult.data.link,
                  // });
              },
            });
          }}
          >立即申请额度</Button>) : (<Button onClick={handleOpen} fill
            className='index-back-btn'
          >立即申请</Button>)
        }
      </>
    )
  }
  return (
    <Layout safe className='index' bottomBarIndex={0}>
      <ScrollView className='index-container'>
        <SizeBox height={statusBarHeight} />
        <SizeBox height={60} />
        {/* <Image
          className='index-logo'
          src={require("../../assets/new-edition/index-logo.png")}
        /> */}
        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
          <View
            style={{
              ...ImageUtil.calculationHeight(
                686 / 484,
                appContext.systemInfo!.screenWidth - 32
              ),
              position: "relative",
            }}
            className='index-panel'
          >
            <Flex
              alignItem='center'
              justifyContent='center'
              // rowGap={24}
              className='index-back-content'
            >
              <Label className='index-back-se'>最高可申请（元）</Label>
              <Label className='index-back-amount'>200,000.00</Label>
              <View className='index-back-tip'>具体额度以资金方审批为准</View>
              <Flex
                alignItem='center'
                justifyContent='center'
                direction='row'
                className='index-back-info'
                columnGap={12}
              >
                <Text>年化利率7.2-24%(单利)</Text>
                <View className='split-char'></View>
                <Text>期限3-36个月</Text>
              </Flex>
              <View className='index-back-btn-container'>
                <View className='index-back-btn-tip'>
                  现在申请，快速评估需求
                </View>
                <ApplyButton isLogin={isUserLogin}></ApplyButton>
                {/* <Button
                  onClick={() => {
                    UserHelper.afterLogin({
                      pop: false,
                      callback: async () => {
                        indexInfoResult.data &&
                          RouteUtil.toWebViewPage({
                            url: indexInfoResult.data.link,
                          });
                      },
                    });
                  }}
                  className='index-back-btn'
                >
                  立即申请额度
                </Button> */}
              </View>
            </Flex>
          </View>
          <View className='index-step-container'>
            <View className='background'></View>
            <Flex
              alignItem='center'
              justifyContent='center'
              direction='row'
              columnGap={8}
            >
              <Text>01.提交申请</Text>
              <Image
                style={{ width: "24px", height: "24px" }}
                src={require("../../assets/new-edition/icon-next.svg")}
              />
              <Text>02.需求评估</Text>
              <Image
                style={{ width: "24px", height: "24px" }}
                src={require("../../assets/new-edition/icon-next.svg")}
              />
              <Text>03.签约办理</Text>
            </Flex>
          </View>
        </Padding>

        <SizeBox height={24} />
        {/* <Padding padding={EdgeInsets.symmetric({ vertical: 68 })}>
          <Flex alignItem="center" justifyContent="center">
            <Image
              src={require("@/assets/icon_home_characteristic.png")}
              className="index-iocn-title"
            />
          </Flex>
        </Padding> */}

        {/* <Flex rowGap="sm" style={{ padding: "0 16PX" }}>
          <Flex direction="row">
            {item(0, "产品丰富", "信用、抵押、质押均可")}
            <SizeBox width={16} />
            {item(1, "快速便捷", "最快10分钟出结果")}
          </Flex>
          <Flex direction="row">
            {item(2, "场景多元", "可用于消费、经营等")}
            <SizeBox width={16} />
            {item(3, "信息保密", "严格保护申请人信息")}
          </Flex>
        </Flex> */}
        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
          <Image
            src={require("../../assets/new-edition/platform.png")}
            className='index-platform-image'
          />
        </Padding>

        <Flex
          justifyContent='center'
          alignItem='center'
          rowGap={24}
          className='index-bottom-tip'
        >
          <View>
            <BottomRemark />
            {/* { bottomRemark } */}
            {/* 郑重声明：平台只提供贷款咨询和推荐服务，放款由银行或金融机构进行，贷款额度、放款时间以资金分审批结果为准，所有贷款申请在未成功贷款前绝不收取任何费用，为了保证您的资金安全，请不要相信任何要求您支付费用的信息、邮件、电话等不实信息。 */}
          </View>
          <View>如遇问题请向{ channelResult.data?.customerServiceInfo || '400-003-9350'}举报投诉，平台将及时为您解决！</View>
        </Flex>
      </ScrollView>
      <LoginBox ref={childRef}></LoginBox>
    </Layout>
  );
};

export default Home;