loading

src/pages/homepahe/homepahe.jsx

@@ -3,12 +3,16 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import './homepahe.less';
+import modalStore from '@src/store/modal';
 
 @observer
 class Homepahe extends React.Component {
   constructor(props) {
     super(props);
   }
+  click_Rule(){
+    modalStore.pushPop("Rulepop")
+  }
   render() {
     return (
       <div className="homepahe modal_center">
@@ -42,7 +46,7 @@ class Homepahe extends React.Component {
         </div>
         <span className="startbtn"></span>
         <span className="title"></span>
-        <span className="rule"></span>
+        <span className="rule" onClick={this.click_Rule}></span>
         <span className="rank"></span>
         <span className="detail"></span>
       </div>

src/pages/loading/loading.jsx

@@ -2,23 +2,107 @@
 
 import React from 'react';
 import { observer } from 'mobx-react';
+import store from "../../store/index";
 import './loading.less';
-
+import { preloadAsset } from "@src/utils/preload1.3.js";
+import assetList from "@src/assetList.json";
+import { PAGE_MAP } from "@src/utils/constants";
 @observer
 class Loading extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      curPercentage: 0
+    }
+  }
+
+
+  curPercentage = 0;
+  intervalId = 0;
+  isEvenLoad = true; // 是否匀速加载进度条
+
+  componentDidMount() {
+    this.preloadAssetInit();
   }
+
+  /**
+   * 资源预加载
+   */
+  preloadAssetInit = async () => {
+    const imageList = assetList.preLoadImg;
+    preloadAsset(
+      imageList,
+      3,
+      this.onLoadingProgress,
+    ).then(() => {
+      // 预加载资源完成
+      // 异步加载默认关闭
+      // setTimeout(() => {
+      //   // 异步加载资源开始
+      //   const asyncImageList = assetList.asyncLoadImg;
+      //   preloadAsset(asyncImageList, 1)
+      // }, 5000);
+    });
+  };
+
+  jump = () => {
+    setTimeout(() => {
+      store.changePage(PAGE_MAP.HOME_PAGE); // 跳转页面
+    }, 100);
+  };
+
+
+  /**
+   * 资源加载进度回调
+   * @param {*} progress
+   */
+  onLoadingProgress = (progress) => {
+    const percentage = Math.floor(progress * 100);
+    console.log("progress", percentage);
+    if (this.isEvenLoad) {
+      this.setEvenProgress(percentage);
+    } else {
+      if (percentage == 100) {
+        this.jump();
+      }
+    }
+  };
+
+  /**
+   * 以1%匀速加载进度
+   * @param {*} percentage
+   */
+  setEvenProgress = (percentage) => {
+    this.intervalId && clearInterval(this.intervalId);
+    let curPercentage = this.curPercentage;
+    this.intervalId = setInterval(() => {
+      if (curPercentage >= percentage) {
+        clearInterval(this.intervalId);
+        this.jump();
+        return;
+      }
+      curPercentage += 1;
+      this.curPercentage = curPercentage;
+      this.setState({
+        curPercentage,
+      });
+    }, 10);
+  };
   render() {
+    const { curPercentage } = this.state;
     return (
       <div className="loading modal_center">
         <span className="bg"></span>
         <span className="title"></span>
         <div className="loadbar">
           <span className="bardown"></span>
-          <span className="baron"></span>
+          <span className='barBox'>
+            <span className="baron" style={{
+              transform: `translateX(${curPercentage - 100}%)`
+            }}></span>
+          </span>
           <span className="barnum">正在加载……</span>
-          <span className="ip"></span>
+          <span className="ip" style={{left:`${((511*curPercentage/100-37)/100)}rem`}}></span>
         </div>
       </div>
     );

src/pages/loading/loading.less

@@ -35,11 +35,20 @@
       position: absolute;
       .sparkBg("loading/bardown.png");
     }
-    .baron {
+    .barBox {
       width: 511px;
       height: 22px;
       left: 0px;
       top: 32px;
+      border-radius: 45px;
+      overflow: hidden;
+      position: absolute;
+    }
+    .baron {
+      width: 511px;
+      height: 22px;
+      left: 0px;
+      top: 0px;
       position: absolute;
       .sparkBg("loading/baron.png");
     }

src/store/index.js

@@ -20,7 +20,7 @@ const store = makeAutoObservable({
 
     myPrize: "myPrize", // TODO 举例子 新宿台奖品页
     index: PAGE_MAP.LOADING_PAGE,
-  }[skinId] || PAGE_MAP.DETAIL_PAGE,
+  }[skinId] || PAGE_MAP.LOADING_PAGE,
 
   pageData: {},