新增我要提现页面

src/api/index.ts

@@ -5,3 +5,4 @@ export * from "./modules/pay";
 export * from "./modules/testScores";
 export * from "./modules/collectionAndWrong";
 export * from "./modules/branch";
+export * from "./modules/cashOut";

src/api/modules/cashOut.ts

@@ -0,0 +1,18 @@
+import { AxiosPromise } from "axios";
+import request from "../request";
+
+class CashOut {
+  /**
+   * 查询收益列表
+   * @returns
+   */
+  extensionIncomeList(): AxiosPromise<CashOutType.extensionIncomeListRes> {
+    return request("/student/extension/income/extensionIncomeList");
+  }
+
+  extensionIncomePrice(): AxiosPromise<CashOutType.extensionIncomePriceRes> {
+    return request("/student/extension/income/extensionIncomePrice");
+  }
+}
+
+export const cashOut = new CashOut();

src/api/types/cashOut.d.ts

@@ -0,0 +1,26 @@
+declare namespace CashOutType {
+  interface otherUserInfo {
+    headImage: string;
+    nickName: string;
+    createTime: string;
+    hierarchy: string;
+    openid: string;
+    percentage: string;
+    profitPrice: string;
+  }
+  interface extensionIncomeListRes extends Common.Res {
+    rows: otherUserInfo[];
+    total: number;
+  }
+  interface userInfo {
+    beneficiaryOpenid: string;
+    extractPrice: number;
+    headImage: string;
+    nickName: string;
+    remainderPrice: number;
+    totalPrice: number;
+  }
+  interface extensionIncomePriceRes extends Common.Res {
+    data: userInfo;
+  }
+}

src/dataModel/cashOut.ts

@@ -0,0 +1,21 @@
+import { cashOut } from "@/api";
+
+/**分成收益模型 */
+export class CashOutModel {
+  private api = cashOut;
+
+  /**查询收益列表 */
+  async extensionIncomeList() {
+    const res = await this.api.extensionIncomeList();
+    return {
+      rows: res.data.rows,
+      total: res.data.total,
+    };
+  }
+
+  /**查询收益金额（总金额、已提现金额、未提现金额） */
+  async extensionIncomePrice() {
+    const res = await this.api.extensionIncomePrice();
+    return res.data.data;
+  }
+}

src/views/cashOut/index.vue

@@ -7,7 +7,11 @@
         <div class="name">
           <m-user-name />
           <span
-            >可提现余额<span class="grade">{{ "5341.12" }}</span
+            >可提现余额<span class="grade">{{ userInfo?.remainderPrice }}</span
+            >元</span
+          >
+          <span
+            >已提现<span class="grade">{{ userInfo?.extractPrice }}</span
             >元</span
           >
         </div>
@@ -22,7 +26,12 @@
     </div>
   </div>
   <div class="summary content-box">
-    <van-search class="search" shape="round" placeholder="请输入下级代理昵称" />
+    <van-search
+      class="search"
+      v-model="searchValue"
+      shape="round"
+      placeholder="请输入下级代理昵称"
+    />
   </div>
   <div class="test-scores content-box">
     <table class="table">
@@ -33,19 +42,19 @@
         <th>分成比例</th>
         <th>分成金额</th>
       </tr>
-      <tr v-for="(item, index) in testScoresList" :key="index">
+      <tr
+        v-for="(item, index) in otherUserInfoList.filter((item) =>
+          item.nickName.includes(searchValue)
+        )"
+        :key="index"
+      >
         <td>
-          <van-image
-            round
-            width="50px"
-            height="50px"
-            src="https://img01.yzcdn.cn/vant/cat.jpeg"
-          />
+          <van-image round width="50px" height="50px" :src="item.headImage" />
         </td>
-        <td>{{ "item.type" }}</td>
-        <td>{{ "一级" }}</td>
-        <td>{{ "50%" }}</td>
-        <td>{{ "5000元" }}</td>
+        <td>{{ item.nickName }}</td>
+        <td>{{ item.hierarchy }}</td>
+        <td>{{ item.percentage }}</td>
+        <td>{{ item.profitPrice }}</td>
       </tr>
     </table>
   </div>
@@ -55,65 +64,47 @@
 </template>
 
 <script lang="ts">
-import { getTestScoresList, getTestScoresInfo } from "@/api";
+import { CashOutModel } from "@/dataModel/cashOut";
 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[]>([]);
+const cashOutModel = new CashOutModel();
+/** 获取下级用户列表 */
+const useOtherUserInfoList = () => {
+  const otherUserInfoList = ref<CashOutType.otherUserInfo[]>([]);
   onBeforeMount(async () => {
-    let res = await getTestScoresList();
-    testScoresList.value = res.rows;
+    const res = await cashOutModel.extensionIncomeList();
+    otherUserInfoList.value.push(...res.rows);
   });
   return {
-    testScoresList,
+    otherUserInfoList,
   };
 };
-/**
- * 成绩信息数据结构
- */
-interface TestScoresInfo {
-  avgScore: number; //平均成绩
-  forecastScore: number; //预测成绩
-  maxScore: number; //最大成绩
-}
-/**
- * 最大成绩，平均成绩，预测成绩
- */
-const useTestScoresInfo = () => {
-  const testScoresInfo = ref<TestScoresInfo>({
-    avgScore: 0,
-    forecastScore: 0,
-    maxScore: 0,
-  });
+/** 获取用户可提现信息 */
+const useUserInfo = () => {
+  const userInfo = ref<CashOutType.userInfo>();
   onBeforeMount(async () => {
-    let res = await getTestScoresInfo();
-    testScoresInfo.value = res.data;
+    const res = await cashOutModel.extensionIncomePrice();
+    userInfo.value = res;
   });
   return {
-    testScoresInfo,
+    userInfo,
   };
 };
 </script>
 
 <script lang="ts" setup>
-const { testScoresList } = useTestScoresList();
-const { testScoresInfo } = useTestScoresInfo();
+import { Dialog } from "vant";
+const { otherUserInfoList } = useOtherUserInfoList();
+const { userInfo } = useUserInfo();
+const searchValue = ref("");
 const { goMockTest } = new RouterBus();
+
 const show = ref(false);
 const fn = () => {
   console.log(123);
+  Dialog({
+    title: "暂未开放",
+  });
   show.value = true;
 };
 </script>