ba'rbar

mock/project/homeInfo.js

@@ -31,7 +31,7 @@ module.exports = {
                     "sendCount": 400
                 }
             ],
-            "historyMaxScore": 2259892.7346440405,
+            "historyMaxScore": 1900,
             "currentTimestamp": 46409094.17754674,
             "actEndTimestamp": 43535651.10143122
         }

src/components/barItem/barItem.jsx

@@ -7,13 +7,42 @@ import modalStore from '@src/store/modal';
 import store from '@src/store';
 import { Button } from '../Button';
 
+const barPoint = [-451, -290, -126]
 @observer
 class BarItem extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      left: -486
+    }
   }
   componentDidUpdate() {
-    console.log(this.props,"!@!@!@!@!@!@")
+    console.log(this.props, "!@!@!@!@!@!@")
+
+
+  }
+  updateLength() {
+    const { barInfo, nowScore } = this.props;
+    let left = 0;
+    if (barInfo && barInfo.length > 0) {
+      if (nowScore <= barInfo[0].score) {
+        left = -486
+      } else if (barInfo[3].score <= nowScore) {
+        left = 0
+      } else {
+        for (let i = 0; i < barInfo.length; i++) {
+          if (nowScore <= barInfo[i].score) {
+            let num = nowScore - barInfo[i - 1].score
+            let length = barInfo[i].score - barInfo[i - 1].score
+            console.log(i, barInfo[i - 1].score, num, length, "left", "num,length")
+            left = barPoint[i - 1] + num / length * (i == 3 ? 100 : 113)
+            break
+          }
+        }
+      }
+      console.log(left, "left")
+      return left
+    }
   }
 
   render() {
@@ -21,7 +50,11 @@ class BarItem extends React.Component {
     return (
       <div className="gamebar">
         <span className="bardown"></span>
-        <span className="baron"></span>
+        <div className='barbox'>
+          <span className="baron" style={{
+            left: this.updateLength() / 100 + "rem"
+          }}></span>
+        </div>
         {
           barInfo?.map((item, index) => {
             return (
@@ -32,7 +65,7 @@ class BarItem extends React.Component {
                   item.receive && <span className="prizebg"></span>
                 }
                 <span className="prize">{item.sendCount}青果</span>
-              </div>     
+              </div>
             )
           })
         }

src/components/barItem/barItem.less

@@ -13,12 +13,19 @@
     position: absolute;
     .sparkBg("homePahe/bardown.png");
   }
-  .baron {
+  .barbox {
     width: 486px;
     height: 10px;
     left: 36px;
     top: 69px;
     position: absolute;
+  }
+  .baron {
+    width: 486px;
+    height: 10px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
     .sparkBg("homePahe/baron.png");
   }
   .boxitem {

src/store/index.js

@@ -2,6 +2,7 @@ import { PAGE_MAP } from '@src/utils/constants';
 import { makeAutoObservable } from 'mobx';
 import API from '../api/index';
 import { GetCurrSkinId, getCustomShareId } from "@src/utils/utils";
+import { Toast } from '@spark/ui';
 
 const skinId = GetCurrSkinId() || getCustomShareId();
 
@@ -55,7 +56,7 @@ const store = makeAutoObservable({
   },
   checkTime(checkEnd = true) {
     if (store.homeInfo?.actStartTimestamp > store.timeStamp) {
-      Toast("活动未开始")
+      Toasts("活动未开始")
       return false
     }
     if (checkEnd && store.homeInfo?.actEndTimestamp < store.timeStamp) {