feat(小程序/关注公众号): 新增 关注公众号页面以及公众号关注悬浮球

src/component/layout/index.tsx

@@ -40,7 +40,9 @@ const BottomNavBar = () => {
         justifyContent="center"
       >
         {menu.map((p) => {
-          let _index = ["home", "user_center"].findIndex((sp) => sp === p.code);
+          let _index = ["home", "official_account", "user_center"].findIndex(
+            (sp) => sp === p.code
+          );
           return (
             <Flex
               key={p.code}
@@ -48,7 +50,11 @@ const BottomNavBar = () => {
                 UserHelper.afterLogin({
                   forceLogin: false,
                   callback: async () => {
-                    if (["home", "user_center"].includes(p.code)) {
+                    if (
+                      ["home", "official_account", "user_center"].includes(
+                        p.code
+                      )
+                    ) {
                       bottomBarContext.switchTo(_index as number);
                     } else {
                       RouteUtil.toWebViewPage({

src/pages/bottomNavBar/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import Home from "../home";
+import OfficialAccountTab from "../officialAccountTab";
 import Mine from "../user/mine";
 import BottomBarContext from "@/context/bottomBarContext";
 import useStore from "@/hooks/useRedux";
@@ -17,6 +18,8 @@ const BottomNavBar = () => {
       {menu.map((p) => {
         if (p.code === "home") {
           return <Home />;
+        } else if (p.code === "official_account") {
+          return <OfficialAccountTab />;
         } else if (p.code === "user_center") {
           return <Mine />;
         }

src/pages/home/index.scss

@@ -184,4 +184,15 @@
   .background-content-wrap {
     padding: 24px;
   }
+
+  .index-official-account {
+    width: 100vw;
+    position: fixed;
+    left: 0;
+    top: calc(100vh - 340px);
+
+    .index-official-box {
+      padding: 0 32rpx;
+    }
+  }
 }

src/pages/home/index.tsx

@@ -10,16 +10,24 @@ 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 {
+  Image,
+  ScrollView,
+  View,
+  Text,
+  OfficialAccount,
+} from "@tarojs/components";
 import { parseQueryParams, isOuterLink } from "@/utils/toolsUtil";
-import Taro, { pxTransform } from "@tarojs/taro";
+import { pxTransform } from "@tarojs/taro";
 import { useRequest } from "ahooks";
-import React, { useContext, useMemo, useState, useEffect, useRef } from "react";
+import React, { useContext, useMemo, useState, useRef } from "react";
 import LoginBox from "../user/components/LoginBox";
+import BottomBarContext from "@/context/bottomBarContext";
 
 const Home = () => {
+  const bottomBarContext = useContext(BottomBarContext);
+
   const childRef: any = useRef();
   const handleOpen = () => {
     childRef.current.handleOpen();
@@ -28,13 +36,13 @@ const Home = () => {
   const { screenWidth, statusBarHeight } = appContext.systemInfo!;
   const [bottomRemark, setBottomRemark] = useState("");
   const isUserLogin = UserHelper.isLogin();
-  const indexInfoResult = useRequest(() => {
+  const indexInfoResult: any = useRequest(() => {
     return UserApi.getIndexInfoUsingPost({
       params: { appId: APPConfig.APPID },
     }).toData();
   });
 
-  const channelResult = useRequest(() => {
+  const channelResult: any = useRequest(() => {
     return UserApi.homeFetchChannel({
       data: { channelCode: "hrqbxcx", refer: "" },
     })
@@ -45,7 +53,7 @@ const Home = () => {
   });
 
   const postJumpUrlResult = () => {
-    const params = parseQueryParams(indexInfoResult.data.link);
+    const params: any = parseQueryParams(indexInfoResult.data.link);
     return UserApi.getJumpUrlPost({
       loading: true,
       data: {
@@ -55,7 +63,7 @@ const Home = () => {
       },
     })
       .toData()
-      .then((res) => {
+      .then((res: any) => {
         console.log("获取跳转链接结果", res);
         RouteUtil.toWebViewPage({ url: res?.adJumpLink });
       });
@@ -76,6 +84,7 @@ const Home = () => {
       position: "relative",
     } as React.CSSProperties;
   }, []);
+  // @ts-ignore
   const item = (index: number, title: string, desc: string) => {
     return (
       <View style={imgBackStyle}>
@@ -269,6 +278,13 @@ const Home = () => {
           </View>
         </Flex>
       </ScrollView>
+
+      <View className="index-official-account">
+        <View className="index-official-box ">
+          {bottomBarContext?.index === 0 && <OfficialAccount />}
+        </View>
+      </View>
+
       <LoginBox ref={childRef}></LoginBox>
     </Layout>
   );

src/pages/officialAccountTab/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '关注公众号',
+  navigationStyle: "custom",
+})

src/pages/officialAccountTab/index.scss

@@ -0,0 +1,154 @@
+.official-account {
+  width: 100vw;
+  height: 100vh;
+  background-color: #f3f4f8;
+  box-sizing: border-box;
+  overflow-y: auto;
+  background-color: #f6f7fa;
+  background-image: url("../../assets/official-account/background.png");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+
+  .wrap {
+    margin-top: 20rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 0 32rpx 80rpx;
+
+    .title-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0 16rpx;
+
+      .follow-content {
+        display: flex;
+        align-items: center;
+
+        .checkbox {
+          width: 40rpx;
+          height: 40rpx;
+        }
+
+        .text {
+          margin-left: 8rpx;
+          font-size: 30rpx;
+          color: #fff;
+        }
+      }
+
+      .get-services {
+        margin: 8rpx 0 40rpx;
+        font-size: 68rpx;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+
+    .white-content {
+      height: 1016rpx;
+      border-radius: 40rpx;
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .qrCode {
+        margin-top: 100rpx;
+        width: 484rpx;
+        height: 484rpx;
+      }
+
+      .text {
+        margin-top: 32rpx;
+        color: #14172f;
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+
+      .line-content {
+        margin-top: 40rpx;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        position: relative;
+
+        &::before {
+          content: "";
+          background-color: #f6f7fa;
+          position: absolute;
+          top: 50%;
+          width: 28rpx;
+          transform: translate3d(-14rpx, -50%, 0);
+          left: 0;
+          height: 28rpx;
+          border-radius: 50%;
+        }
+
+        &::after {
+          content: "";
+          background-color: #f6f7fa;
+          position: absolute;
+          top: 50%;
+          width: 28rpx;
+          transform: translate3d(14rpx, -50%, 0);
+          right: 0;
+          height: 28rpx;
+          border-radius: 50%;
+        }
+
+        .line {
+          width: 70%;
+          height: 4rpx;
+          background-image: linear-gradient(to right, #e4e6e7 50%, #fff 50%);
+          background-size: 20rpx 2rpx;
+          background-repeat: repeat-x;
+        }
+      }
+
+      .tip-content {
+        margin-top: 48rpx;
+
+        .top-content {
+          display: flex;
+          align-items: center;
+
+          .icon {
+            width: 40rpx;
+            height: 40rpx;
+          }
+
+          .tip-text {
+            font-size: 32rpx;
+            color: #505371;
+            margin: 0 8rpx;
+          }
+        }
+
+        .bonus-content {
+          margin-top: 32rpx;
+          display: flex;
+          justify-content: center;
+
+          .bonus-box {
+            .bonus-item {
+              margin-bottom: 24rpx;
+              display: flex;
+              align-items: center;
+
+              .bonus-icon {
+                margin-right: 4rpx;
+                width: 28rpx;
+                height: 28rpx;
+              }
+
+              .bonus-text {
+                font-size: 24rpx;
+                color: #6a7491;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/officialAccountTab/index.tsx

@@ -0,0 +1,91 @@
+import { PropsWithChildren, useContext } from "react";
+import Layout from "@/component/layout";
+import SizeBox from "@/component/sizeBox";
+import AppContext from "@/context/appContext";
+import { Image, View } from "@tarojs/components";
+
+import "./index.scss";
+
+interface IMineProps {}
+// @ts-ignore
+const OfficialAccountTab = (props: PropsWithChildren<IMineProps>) => {
+  const appContext = useContext(AppContext);
+  const { statusBarHeight } = appContext.systemInfo!;
+
+  const platformName = "惠融钱包";
+  const bonusList = [
+    {
+      name: "进度提醒 ：申请进度 服务通知",
+    },
+    {
+      name: "粉丝福利 ：关注享提额 最高20万",
+    },
+    {
+      name: "专属客服 ：随时解答贷款问题",
+    },
+  ];
+
+  return (
+    <Layout className="official-account" bottomBarIndex={1}>
+      <SizeBox height={statusBarHeight}></SizeBox>
+      <SizeBox height={36}></SizeBox>
+      <View className="wrap">
+        <View className="title-content">
+          <View className="follow-content">
+            <Image
+              src={require("../../assets/official-account/checkbox.svg")}
+              className="checkbox"
+            />
+            <View className="text">关注【{platformName}】公众号</View>
+          </View>
+
+          <View className="get-services">获取专属服务</View>
+        </View>
+
+        <View className="white-content">
+          <Image
+            src={require("../../assets/official-account/qrCode.png")}
+            className="qrCode"
+            showMenuByLongpress={true}
+          />
+          <View className="text">长按识别二维码</View>
+
+          <View className="line-content">
+            <View className="line"></View>
+          </View>
+
+          <View className="tip-content">
+            <View className="top-content">
+              <Image
+                src={require("../../assets/official-account/left.svg")}
+                className="icon"
+              />
+
+              <View className="tip-text">关注公众号您将获取专属服务</View>
+
+              <Image
+                src={require("../../assets/official-account/right.svg")}
+                className="icon"
+              />
+            </View>
+            <View className="bonus-content">
+              <View className="bonus-box">
+                {bonusList.map((bonus, index) => (
+                  <View key={index} className="bonus-item">
+                    <Image
+                      src={require("../../assets/official-account/checkbox-green.svg")}
+                      className="bonus-icon"
+                    />
+                    <View className="bonus-text">{bonus.name}</View>
+                  </View>
+                ))}
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </Layout>
+  );
+};
+
+export default OfficialAccountTab;

src/pages/user/mine/index.tsx

@@ -7,13 +7,7 @@ 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 { Image, View, Text, Button as TaroButton } from "@tarojs/components";
 import { PropsWithChildren, useContext, useRef } from "react";
 import useStore from "@/hooks/useRedux";
 import RouteUtil from "@/utils/routeUtil";
@@ -24,14 +18,15 @@ import "./index.scss";
 import LoginBox from "../components/LoginBox";
 interface IMineProps {}
 
+// @ts-ignore
 const Mine = (props: PropsWithChildren<IMineProps>) => {
   const appContext = useContext(AppContext);
-  const { screenSize } = useContext(AppContext);
+  // const { screenSize } = useContext(AppContext);
   const { statusBarHeight } = appContext.systemInfo!;
   const userInfo = useStore((p) => p.userInfo);
   const isUserLogin = UserHelper.isLogin();
 
-  const indexInfoResult = useRequest(() => {
+  const indexInfoResult: any = useRequest(() => {
     return UserApi.getIndexInfoUsingPost({
       params: { appId: APPConfig.APPID },
     }).toData();
@@ -42,7 +37,7 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
     childRef.current.handleOpen();
   };
   const postJumpUrlResult = () => {
-    const params = parseQueryParams(indexInfoResult.data.link);
+    const params: any = parseQueryParams(indexInfoResult.data.link);
     return UserApi.getJumpUrlPost({
       loading: true,
       data: {
@@ -52,7 +47,7 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
       },
     })
       .toData()
-      .then((res) => {
+      .then((res: any) => {
         console.log("获取跳转链接结果", res);
         RouteUtil.toWebViewPage({ url: res?.adJumpLink });
       });
@@ -131,7 +126,7 @@ const Mine = (props: PropsWithChildren<IMineProps>) => {
   };
   const userName = maskPhone(userInfo.userMobile);
   return (
-    <Layout className="mine" bottomBarIndex={1}>
+    <Layout className="mine" bottomBarIndex={2}>
       <SizeBox height={statusBarHeight}></SizeBox>
       <SizeBox height={36}></SizeBox>
       <LoginBoxs isLogin={isUserLogin} userName={userName}></LoginBoxs>

src/redux/index.ts

@@ -19,6 +19,12 @@ const initialState = (): IReduxStore => ({
       iconActive: require("@/assets/icon_bottom_bar_apply_active.png"),
       name: "首页",
     },
+    {
+      code: "official_account",
+      icon: require("@/assets/official-account/icon_bottom_bar_follow.svg"),
+      iconActive: require("@/assets/official-account/icon_bottom_bar_follow_active.svg"),
+      name: "关注公众号",
+    },
     {
       code: "user_center",
       icon: require("@/assets/icon_bottom_bar_mine.png"),