Merge remote-tracking branch 'zshyx/250207-growth-prod-master_1202-zp' into dev0515

src/api/growth/growthpath.js

@@ -4,3 +4,5 @@ import ajax from '../ajax';
 const baseURL = '/growth';
 // 查询专业力必修列表
 export const listData = (obj) => ajax.get(baseURL, '/professional/student/studentGrowthList', { params: obj })
+// 查询专业力统计
+export const getTotalGrowthTaskDetail = (obj) => ajax.get(baseURL, '/professional/student/getTotalGrowthTaskDetail', { params: obj })

src/views/growth/index.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="growth" v-loading="loading">
+  <div class="growth" v-loading="loading" id="scrollContainer">
     <div class="growth-left">
       <div class="navbar">
         <div style="display: flex; flex: 1">
           <div class="nav-title">我的专业力必修</div>
           <div class="nav-total">
-            <div class="total-num">35</div>
+            <div class="total-num">{{ totalData.total }}</div>
             <div class="total-text">总任务数</div>
           </div>
           <div class="nav-total">
-            <div class="total-num">35</div>
+            <div class="total-num">{{ totalData.completed }}</div>
             <div class="total-text">已完成数量</div>
           </div>
           <div class="nav-total">
-            <div class="total-num">35</div>
+            <div class="total-num">{{ totalData.unfinished }}</div>
             <div class="total-text">未完成数量</div>
           </div>
         </div>
       </div>
 
-      <div class="growth-item" v-for="item of list">
+      <div class="growth-item" v-for="item of list" :id="item.id">
         <div class="growth-nav">
           <div class="growth-name">{{ item.growthName }}</div>
           <div class="f-a-c">
@@ -122,7 +122,9 @@
         v-for="item of list"
       >
         <div class="icon"></div>
-        <div>{{ item.growthName }}</div>
+        <div @click="HandlerItemGroupName(item)">
+          {{ item.growthName }}
+        </div>
       </div>
     </div>
     <template v-if="!list.length">
@@ -131,13 +133,15 @@
   </div>
 </template>
 <script>
-import { listData } from "@/api/growth/growthpath";
+import { listData, getTotalGrowthTaskDetail } from "@/api/growth/growthpath";
 export default {
   data() {
     return {
       selectData: {},
       list: [],
       loading: false,
+      totalData: {},
+      activeItem: {},
     };
   },
   computed: {
@@ -190,6 +194,16 @@ export default {
         "/forward?to=" + studentPath + "/growthList&params=" + params
       );
     },
+    HandlerItemGroupName(item, index) {
+      this.activeItem = item;
+      let a = document.createElement("a");
+      a.href = `#${item.id}`;
+      document.body.appendChild(a); //将标签DOM，放置页面
+      let dom = document.getElementById(`${item.id}`);
+      dom.classList.add("handler-add-padding");
+      a.click();
+      document.body.removeChild(a);
+    },
   },
   created() {
     this.loading = true;
@@ -197,6 +211,15 @@ export default {
       this.list = res.data;
       this.loading = false;
     });
+    getTotalGrowthTaskDetail().then((res) => {
+      this.totalData = res.data;
+    });
+    // 处理滚动事件的代码
+    let that = this;
+    window.addEventListener("scroll", function () {
+      let dom = document.getElementById(`${that.activeItem.id}`);
+      dom.classList.remove("handler-add-padding");
+    });
   },
 };
 </script>
@@ -214,6 +237,10 @@ export default {
   justify-content: center;
 }
 .growth {
+  .handler-add-padding {
+    padding: 100px 38px 66px 40px !important;
+    margin-top: -80px;
+  }
   display: flex;
   .growth-left {
     margin-right: 10px;