森林状态

H5/src/api/airDropPool.js

+import request from "@/utils/request";
+
+/**
+ * 空投池
+ * @param {*}
+ */
+export function queryAerialDelivery() {
+  return request({
+    url: `/user/queryAerialDelivery`,
+    method: "get"
+  });
+}

H5/src/api/progressPrizes.js

+import request from "@/utils/request";
+/**
+ *  获取进步奖
+ * @param {*} params userId
+ */
+export function getProgressPrizes() {
+  return request({
+    url: "/growth/getProgressPrizes",
+    method: "get"
+  });
+}

H5/src/config/grade.js

@@ -8,6 +8,141 @@ const levels = {
   6: "森林之星",
   7: "西田森合伙人"
 };
+const getDesOfield = {
+  differenceAmount: "差额",
+  recommendDifferenceSeedling: "幼苗",
+  recommendDifferenceSilver: "白银",
+  recommendDifferenceGold: "黄金",
+  teamDifferenceBronze: "青铜",
+  teamDifferenceSilver: "白银",
+  teamDifferenceGold: "黄金",
+  recommendDifferenceFarmer: "农场主",
+  recommendDifferenceForestStart: "森林之星"
+};
+export let diffrentOflevel = {
+  0: [
+    {
+      label: getDesOfield["differenceAmount"],
+      field: "differenceAmount",
+      type: "amount",
+      index: 1
+    }
+  ],
+  1: [
+    {
+      label: getDesOfield["differenceAmount"],
+      field: "differenceAmount",
+      type: "amount",
+      index: 1
+    }
+  ],
+  2: [
+    {
+      label: getDesOfield["recommendDifferenceSeedling"],
+      field: "recommendDifferenceSeedling",
+      type: "recommend",
+      index: 1
+    }
+  ],
+  3: [
+    {
+      label: getDesOfield["recommendDifferenceSeedling"],
+      field: "recommendDifferenceSeedling",
+      type: "recommend",
+      index: 1
+    },
+    {
+      label: getDesOfield["recommendDifferenceSilver"],
+      field: "recommendDifferenceSilver",
+      type: "recommend",
+      index: 2
+    },
+    {
+      label: getDesOfield["teamDifferenceBronze"],
+      field: "teamDifferenceBronze",
+      type: "team",
+      index: 1
+    }
+  ],
+  4: [
+    {
+      label: getDesOfield["recommendDifferenceSeedling"],
+      field: "recommendDifferenceSeedling",
+      type: "recommend",
+      index: 1
+    },
+    {
+      label: getDesOfield["recommendDifferenceGold"],
+      field: "recommendDifferenceGold",
+      type: "recommend",
+      index: 2
+    },
+    {
+      label: getDesOfield["teamDifferenceSilver"],
+      field: "teamDifferenceSilver",
+      type: "team",
+      index: 1
+    }
+  ],
+  5: [
+    {
+      label: getDesOfield["recommendDifferenceSeedling"],
+      field: "recommendDifferenceSeedling",
+      type: "recommend",
+      index: 1
+    },
+    {
+      label: getDesOfield["recommendDifferenceFarmer"],
+      field: "recommendDifferenceFarmer",
+      type: "recommend",
+      index: 2
+    },
+    {
+      label: getDesOfield["teamDifferenceSilver"],
+      field: "teamDifferenceSilver",
+      type: "team",
+      index: 1
+    },
+    {
+      label: getDesOfield["teamDifferenceGold"],
+      field: "teamDifferenceGold",
+      type: "team",
+      index: 2
+    }
+  ],
+  6: [
+    {
+      label: getDesOfield["recommendDifferenceSeedling"],
+      field: "recommendDifferenceSeedling",
+      type: "recommend",
+      index: 1
+    },
+    {
+      label: getDesOfield["recommendDifferenceFarmer"],
+      field: "recommendDifferenceFarmer",
+      type: "recommend",
+      index: 2
+    },
+    {
+      label: getDesOfield["recommendDifferenceForestStart"],
+      field: "recommendDifferenceForestStart",
+      type: "recommend",
+      index: 3
+    },
+    {
+      label: getDesOfield["teamDifferenceSilver"],
+      field: "teamDifferenceSilver",
+      type: "team",
+      index: 1
+    },
+    {
+      label: getDesOfield["teamDifferenceGold"],
+      field: "teamDifferenceGold",
+      type: "team",
+      index: 2
+    }
+  ]
+};
 export function getLevelDes(level) {
   const label = levels[level];
   if (label) {

H5/src/views/airDropPool.vue

@@ -13,13 +13,15 @@
       <div class="air-panel">
         <div class="notice-bar">
           <img src="@/assets/images/icon-notice.png" alt="" />
-          <div class="notice-bar-show">
-            <p class="dark">88888888888</p>
-            <p>88888888888</p>
-            <p class="dark">88888888888</p>
-            <p>88888888888</p>
-            <p>88888888888</p>
-            <p>88888888888</p>
+          <div class="notice-bar-show" id="scroll-box">
+            <div class="user-id-list">
+              <p v-for="(item, index) in userPoolVos" :key="index">
+                {{ item.userId }}
+              </p>
+              <p v-for="(item, index) in userPoolVos" :key="index + 'us'">
+                {{ item.userId }}
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -28,7 +30,7 @@
       <div class="air-panel-num-content">
         <img src="@/assets/images/parachute.png" alt="" />
         <p>
-          本月<span>{{ personNum }}</span> 人在池
+          本月<span>{{ total }}</span> 人在池
         </p>
       </div>
     </div>
@@ -36,15 +38,58 @@
 </template>
 
 <script>
+import { queryAerialDelivery } from "@/api/airDropPool";
 export default {
   name: "leagueNums",
   data() {
     return {
-      personNum: 108
+      total: 0,
+      userPoolVos: [{ userId: "" }],
+      timer: null
     };
   },
-  mounted() {},
-  methods: {}
+  mounted() {
+    this.queryData();
+  },
+  methods: {
+    queryData() {
+      const _this = this;
+      queryAerialDelivery().then(res => {
+        console.log(res);
+        if (res.code === 0) {
+          _this.total = res.data.total;
+          _this.userPoolVos = res.data.userPoolVos;
+          _this.$nextTick(() => {
+            _this.scroll();
+          });
+        } else {
+          _this.$toast(res.msg);
+        }
+      });
+    },
+    scroll() {
+      this.timer = setInterval(this.autoScrollLine, 100);
+    },
+    autoScrollLine() {
+      let box = document.getElementById("scroll-box");
+      let parent = document.getElementsByClassName("user-id-list")[0];
+      const _this = this;
+      if (box) {
+        if (box.scrollTop != null && box.scrollTop >= parent.offsetHeight) {
+          box.scrollTop = 0;
+        } else {
+          box.scrollTop += 1;
+        }
+        if (box.scrollTop % box.offsetHeight == 0) {
+          clearInterval(_this.timer);
+          box.scrollTop = 0;
+          setTimeout(() => {
+            _this.timer = setInterval(_this.autoScrollLine, 100);
+          }, 0);
+        }
+      }
+    }
+  }
 };
 </script>
 
@@ -132,16 +177,36 @@ $white: #ffffff;
     display: flex;
     align-items: center;
     padding: 0 20px 0 50px;
+    position: relative;
+    &::before,
+    &::after {
+      content: "";
+      display: inline-block;
+      width: calc(100% - 81px);
+      height: 33.33%;
+      position: absolute;
+      background-color: #ffffff;
+      opacity: 0.4;
+      left: 81px;
+    }
+    &::before {
+      top: 0;
+    }
+    &::after {
+      top: 66.66%;
+    }
     img {
       width: 16px;
       margin-right: 15px;
     }
     .notice-bar-show {
       height: 100%;
+      overflow: scroll;
+
       p {
         font-size: 16px;
-        color: #333333;
-        height: 33.33%;
+        color: #999;
+        height: 36.6px;
         margin: 0;
         padding: 0;
         display: flex;

H5/src/views/grade.vue

@@ -11,11 +11,26 @@
     </div>
     <div class="forest-content">
       <div class="forest-level">Lv.{{ userLevel }}{{ levelDes }}</div>
-      <div class="nums">距离下一级直推用户还需增加{{ directpush }}</div>
-      <div class="nums">距离下一级团队用户还需增加{{ team }}</div>
+      <div v-for="(item, key, index) in diffrentMap" :key="index">
+        <div>
+          <div class="nums">
+            <span>距离下一级</span>
+            <span v-if="key === 'team'">团队用户</span>
+            <span v-else-if="key === 'recommend'">直推用户</span>
+            <span v-else></span>
+            <span>还需增加</span>
+            <span v-for="(d, i) in item" :key="i">
+              {{ d.value }}
+              {{ d.label }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="level-progress" v-if="userLevel!=7"> -->
       <div class="level-progress">
         <div class="level-num">Lv.{{ userLevel }}</div>
-        <van-progress :percentage="50" />
+        <van-progress :percentage="perenct * 100" />
         <div class="level-num">Lv.{{ nextLevel }}</div>
       </div>
       <div class="relegation">保级还需增加￥{{ relegationNum }} 业绩</div>
@@ -40,7 +55,7 @@
 
 <script>
 import { getForestStatus } from "@/api/grade";
-import { getLevelDes, getNextLevel } from "@/config/grade";
+import { getLevelDes, getNextLevel, diffrentOflevel } from "@/config/grade";
 export default {
   name: "grade",
   data() {
@@ -48,10 +63,12 @@ export default {
       userLevel: "",
       levelDes: "白银树",
       directpush: "XXX",
-      team: "XXX",
       relegationNum: "21,141",
       currentLevel: "",
       nextLevel: "",
+      perenct: 0,
+      diffrentMap: {},
+      type: ["amount", "recommend", "team"],
       list: [
         {
           num: 14,
@@ -82,7 +99,7 @@ export default {
     };
   },
   mounted() {
-    this.getstatus()
+    this.getstatus();
   },
   methods: {
     handleUrl(urlName) {
@@ -101,6 +118,7 @@ export default {
       });
     },
     handleData(data) {
+      this.perenct = data.perenct;
       this.userLevel = data.userLevel;
       this.levelDes = getLevelDes(data.userLevel);
       let nextLevelObj = getNextLevel(data.userLevel);
@@ -108,8 +126,25 @@ export default {
         this.nextLevel = nextLevelObj.nextLevel;
       }
       this.list.forEach(v => {
-        v.num =  data[v['field']]
-      })
+        v.num = data[v["field"]];
+      });
+      this.diffrentMap = [];
+      if (data.userLevel < 7) {
+        let diffrentMap = diffrentOflevel[data.userLevel];
+        let desObj = {};
+        if (diffrentMap) {
+          diffrentMap.forEach(v => {
+            v.value = data.differenceMap[v.field];
+            if (desObj[v.type]) {
+              desObj[v.type].push(v);
+            } else {
+              desObj[v.type] = [];
+              desObj[v.type].push(v);
+            }
+          });
+          this.diffrentMap = desObj;
+        }
+      }
     }
   }
 };
@@ -193,7 +228,8 @@ $white: #ffffff;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin-top: 20px;
+    position: absolute;
+    top: 270px;
     .forest-item {
       height: 98px;
       background-color: #ffffff;

H5/src/views/rewards/compoments/rankItem.vue

@@ -6,9 +6,13 @@
     <div style="flex:1">
       <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
     </div>
-    <span class="userName" style="flex:2;text-align:center">135****4857</span>
-    <span style="flex:2;text-align:center">25%</span>
-    <span class="item-flex-1" style="color:#fc5202">￥125</span>
+    <span class="userName" style="flex:2;text-align:center">{{
+      prizeVos.userId
+    }}</span>
+    <span style="flex:2;text-align:center">{{ prizeVos.growthRate }}%</span>
+    <span class="item-flex-1" style="color:#fc5202"
+      >￥{{ prizeVos.awardMoney }}</span
+    >
   </div>
 </template>
 
@@ -18,6 +22,9 @@ export default {
   props: {
     RankIndex: {
       type: Number
+    },
+    prizeVos: {
+      type: Object
     }
   }
 };

H5/src/views/rewards/fastest-progress.vue

@@ -3,7 +3,7 @@
     <div class="bg">
       <van-icon name="arrow-left" @click="$router.go(-1)" />
       <span class="title">本月进步最大奖励池</span>
-      <span class="award">￥6000.00</span>
+      <span class="award">￥{{ growthTotal }}</span>
     </div>
     <div class="rank">
       <div class="header rank-flex">
@@ -17,9 +17,10 @@
         <base-refresh-scroll>
           <div slot="content">
             <rank-item
-              v-for="(item, index) in 20"
+              v-for="(item, index) in prizeVos"
               :key="index"
               :rank-index="index + 1"
+              :prizeVos="item"
             />
           </div>
         </base-refresh-scroll>
@@ -31,11 +32,35 @@
 <script>
 import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
 import RankItem from "./compoments/rankItem.vue";
+import { getProgressPrizes } from "@/api/progressPrizes";
 export default {
   name: "FastestProgress",
   components: {
     RankItem,
     BaseRefreshScroll
+  },
+  data() {
+    return {
+      growthTotal: 0,
+      prizeVos: []
+    };
+  },
+  mounted() {
+    this.getProgressPrizes();
+  },
+  methods: {
+    getProgressPrizes() {
+      const _this = this;
+      getProgressPrizes().then(res => {
+        if (res.code === 0) {
+          _this.growthTotal = res.data.growthTotal;
+          _this.prizeVos = res.data.prizeVos;
+        } else {
+          _this.growthTotal = 0;
+          _this.prizeVos = [];
+        }
+      });
+    }
   }
 };
 </script>