新增我的下级页面

src/hooks/index.ts

@@ -12,6 +12,8 @@ export const useExpireTime = () => {
   };
 };
 
+export const useSound = () => {};
+
 /**
  * 路由转发汇总class模式书写,需要注意this指向
  * @returns
@@ -35,6 +37,12 @@ export class RouterBus {
   goCashOut = () => {
     this.router.push("/cashOut");
   };
+  /**
+   * 我的下级页
+   */
+  goMyBranch = () => {
+    this.router.push("/myBranch");
+  };
   /**
    * 模拟考试页
    */

src/views/cashOut/index.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <m-button
-        @click="goMockTest"
+        @click="fn"
         class="continue"
         width="90px"
         height="30px"
@@ -49,6 +49,9 @@
       </tr>
     </table>
   </div>
+  <van-dialog v-model="show" title="我要提现" show-cancel-button>
+    <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
+  </van-dialog>
 </template>
 
 <script lang="ts">
@@ -108,6 +111,11 @@ const useTestScoresInfo = () => {
 const { testScoresList } = useTestScoresList();
 const { testScoresInfo } = useTestScoresInfo();
 const { goMockTest } = new RouterBus();
+const show = ref(false);
+const fn = () => {
+  console.log(123);
+  show.value = true;
+};
 </script>
 
 <style scoped lang="scss">

src/views/home/children/user/index.vue

@@ -14,6 +14,11 @@
           <m-icon type="hyyxq" class="cell-icon" />
         </template>
       </van-cell>
+      <van-cell title="我的下级" value="" is-link center @click="goMyBranch">
+        <template #icon>
+          <m-icon type="hyyxq" class="cell-icon" />
+        </template>
+      </van-cell>
       <van-cell
         title="会员有效期"
         :value="expireTime ? expireTime : '开通会员'"
@@ -59,7 +64,7 @@ import VConsole from "vconsole";
 <script lang="ts" setup>
 import { loopPrepareOrder } from "@/api";
 const { expireTime } = useExpireTime();
-const { goBuyVip, goCashOut } = new RouterBus();
+const { goBuyVip, goCashOut, goMyBranch } = new RouterBus();
 let doubleClickNumber = 0;
 const showVConsole = () => {
   console.log("双击用户名");

src/views/myBranch/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="header-back">
+    <m-nav-bar :transparent="true" title="我的下级" style="color: #ffffff" />
+    <div class="user-data">
+      <m-user-avatar />
+      <m-user-name />
+    </div>
+  </div>
+  <van-tabs
+    v-model="active"
+    style="margin: -82px 10px; border-radius: 15px; overflow: hidden"
+  >
+    <van-tab title="一级">
+      <van-search
+        class="search"
+        shape="round"
+        placeholder="请输入下级代理昵称"
+      />
+      <div class="test-scores content-box">
+        <table class="table">
+          <tr>
+            <th>头像</th>
+            <th>昵称</th>
+            <th>代理等级</th>
+            <th>绑定时间</th>
+          </tr>
+          <tr v-for="(item, index) in testScoresList" :key="index">
+            <td>
+              <van-image
+                round
+                width="50px"
+                height="50px"
+                src="https://img01.yzcdn.cn/vant/cat.jpeg"
+              />
+            </td>
+            <td>{{ "item.type" }}</td>
+            <td>{{ "一级" }}</td>
+            <td>{{ "12312350%" }}</td>
+          </tr>
+        </table>
+      </div></van-tab
+    >
+    <van-tab title="二级">xxx</van-tab>
+  </van-tabs>
+</template>
+
+<script lang="ts">
+import { getTestScoresList, getTestScoresInfo } from "@/api";
+import { ref, onBeforeMount } from "vue";
+import { RouterBus } from "@/hooks";
+/**
+ * 考试成绩数据结构
+ */
+interface TestScores {
+  createTime: string; //考试时间
+  kskm: string; //科目
+  score: number; //分数
+  type: string; //车型
+}
+/**
+ * 模拟考成绩列表
+ */
+const useTestScoresList = () => {
+  const testScoresList = ref<TestScores[]>([]);
+  onBeforeMount(async () => {
+    let res = await getTestScoresList();
+    testScoresList.value = res.rows;
+  });
+  return {
+    testScoresList,
+  };
+};
+/**
+ * 成绩信息数据结构
+ */
+interface TestScoresInfo {
+  avgScore: number; //平均成绩
+  forecastScore: number; //预测成绩
+  maxScore: number; //最大成绩
+}
+/**
+ * 最大成绩，平均成绩，预测成绩
+ */
+const useTestScoresInfo = () => {
+  const testScoresInfo = ref<TestScoresInfo>({
+    avgScore: 0,
+    forecastScore: 0,
+    maxScore: 0,
+  });
+  onBeforeMount(async () => {
+    let res = await getTestScoresInfo();
+    testScoresInfo.value = res.data;
+  });
+  return {
+    testScoresInfo,
+  };
+};
+</script>
+
+<script lang="ts" setup>
+const { testScoresList } = useTestScoresList();
+const { testScoresInfo } = useTestScoresInfo();
+const { goMockTest } = new RouterBus();
+const show = ref(false);
+const fn = () => {
+  console.log(123);
+  show.value = true;
+};
+</script>
+
+<style scoped lang="scss">
+.header-back {
+  width: 375px;
+  padding-bottom: 82px;
+  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
+  border-radius: 0px 0px 82px 82px;
+  .user-data {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 19px 17px 24px;
+    font-size: 23px;
+    color: #ffffff;
+  }
+}
+.content-box {
+  width: 345px;
+  background: #ffffff;
+  box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
+  border-radius: 10px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 10px;
+}
+.summary {
+  display: flex;
+  justify-content: space-around;
+  box-sizing: border-box;
+  overflow: hidden;
+  .search {
+    width: 100%;
+  }
+}
+.test-scores {
+  font-size: 13px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  line-height: 19px;
+  color: #0a1a33;
+  padding: 15px;
+  box-sizing: border-box;
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    th {
+      padding: 5px;
+      color: #0a1a33;
+    }
+    td {
+      text-align: center;
+      padding: 5px;
+      color: #8a9099;
+    }
+    tr {
+      &:nth-of-type(n) {
+        background: #ffffff;
+      }
+      &:nth-of-type(2n) {
+        background: rgba(73, 142, 245, 0.15);
+      }
+    }
+  }
+}
+</style>