我要提现页面修改

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.21.4",
+    "axios-logger": "^2.6.0",
     "dayjs": "^1.10.7",
     "howler": "^2.2.3",
     "marked": "^3.0.4",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   '@vitejs/plugin-vue': ^1.3.0
   '@vue/compiler-sfc': ^3.0.5
   axios: ^0.21.4
+  axios-logger: ^2.6.0
   dayjs: ^1.10.7
   howler: ^2.2.3
   marked: ^3.0.4
@@ -30,6 +31,7 @@ specifiers:
 
 dependencies:
   axios: 0.21.4
+  axios-logger: 2.6.0
   dayjs: 1.10.7
   howler: 2.2.3
   marked: 3.0.8
@@ -102,6 +104,10 @@ packages:
     resolution: {integrity: sha1-+uguO6hgZmOxkOeJzsfZxyj8Qdc=}
     dev: true
 
+  /@types/dateformat/3.0.1:
+    resolution: {integrity: sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g==}
+    dev: false
+
   /@types/howler/2.2.4:
     resolution: {integrity: sha512-/Bs5TyNUWuXPnWe3RB6bS6giQzGHRXmSycq4Mo/2i4C6zwfR7foaAAx1Vo5pMyOAT/ufTfU6WZQHhdvCDBKRig==}
     dev: true
@@ -288,6 +294,13 @@ packages:
     hasBin: true
     dev: true
 
+  /ansi-styles/4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: false
+
   /anymatch/3.1.2:
     resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
     engines: {node: '>= 8'}
@@ -304,6 +317,14 @@ packages:
     resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
     dev: true
 
+  /axios-logger/2.6.0:
+    resolution: {integrity: sha512-ogDepYNCul91KWf+BV8tweB3gm4n2apA69L9aY5fUO2Pvck/gIK4Q+zs7avduyxaOn88ZzSWv0PeMZaxBt+YOw==}
+    dependencies:
+      '@types/dateformat': 3.0.1
+      chalk: 4.1.2
+      dateformat: 3.0.3
+    dev: false
+
   /axios/0.21.4:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
@@ -338,6 +359,14 @@ packages:
       get-intrinsic: 1.1.1
     dev: true
 
+  /chalk/4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: false
+
   /character-parser/2.2.0:
     resolution: {integrity: sha1-x84o821LzZdE5f/CxfzeHHMmH8A=}
     dependencies:
@@ -359,6 +388,17 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /color-convert/2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: false
+
+  /color-name/1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: false
+
   /commander/8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
@@ -389,6 +429,10 @@ packages:
     resolution: {integrity: sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==}
     dev: false
 
+  /dateformat/3.0.3:
+    resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
+    dev: false
+
   /dayjs/1.10.7:
     resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
     dev: false
@@ -647,6 +691,11 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /has-flag/4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: false
+
   /has-symbols/1.0.2:
     resolution: {integrity: sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==}
     engines: {node: '>= 0.4'}
@@ -987,6 +1036,13 @@ packages:
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
 
+  /supports-color/7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: false
+
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}

src/api/modules/cashOut.ts

@@ -2,17 +2,22 @@ import { AxiosPromise } from "axios";
 import request from "../request";
 
 class CashOut {
-  /**
-   * 查询收益列表
-   * @returns
-   */
-  extensionIncomeList(): AxiosPromise<CashOutType.extensionIncomeListRes> {
-    return request("/student/extension/income/extensionIncomeList");
-  }
+	/**
+	 * 查询收益列表
+	 * @returns
+	 */
+	extensionIncomeList(): AxiosPromise<CashOutType.extensionIncomeListRes> {
+		return request("/student/extension/income/extensionIncomeList");
+	}
 
-  extensionIncomePrice(): AxiosPromise<CashOutType.extensionIncomePriceRes> {
-    return request("/student/extension/income/extensionIncomePrice");
-  }
+	extensionIncomePrice(): AxiosPromise<CashOutType.extensionIncomePriceRes> {
+		return request("/student/extension/income/extensionIncomePrice");
+	}
+
+	/**查询提现记录 */
+	extractList(): AxiosPromise<CashOutType.ExtractList> {
+		return request("/wx/extract/list");
+	}
 }
 
 export const cashOut = new CashOut();

src/api/modules/user.ts

@@ -0,0 +1,10 @@
+import request from "../request";
+import { AxiosPromise } from "axios";
+
+class User {
+	info(): AxiosPromise<any> {
+		return request({
+			url: "/student/user/info",
+		});
+	}
+}

src/api/request.ts

@@ -1,10 +1,15 @@
 import axios from "axios";
+import { requestLogger, responseLogger } from "axios-logger";
 import store from "@/store";
 
 const request = axios.create({
 	baseURL: import.meta.env.MODE === "development" ? "/dev-api" : "/prod-api",
 });
 
+request.interceptors.request.use(requestLogger);
+
+request.interceptors.response.use(responseLogger);
+
 request.interceptors.request.use((config) => {
 	// 是否需要设置 token
 	if (config.headers.isToken !== false) {

src/api/types/cashOut.d.ts

@@ -1,26 +1,37 @@
 declare namespace CashOutType {
-  interface otherUserInfo {
-    headImage: string;
-    nickName: string;
-    createTime: string;
-    hierarchy: string;
-    openid: string;
-    percentage: string;
-    profitPrice: number;
-  }
-  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;
-  }
+	interface otherUserInfo {
+		headImage: string;
+		nickName: string;
+		createTime: string;
+		hierarchy: string;
+		openid: string;
+		percentage: string;
+		profitPrice: number;
+	}
+	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;
+	}
+
+	interface ExtractList extends Common.Res {
+		rows: Array<{
+			id: number;
+			partnerTradeNo: string;
+			extractPrice: number;
+			status: number;
+			createTime: string;
+		}>;
+		total: number;
+	}
 }

src/dataModel/cashOut.ts

@@ -2,37 +2,43 @@ import { cashOut } from "@/api";
 
 /**分成收益模型 */
 export class CashOutModel {
-  private api = cashOut;
+	private api = cashOut;
 
-  /**查询收益列表 */
-  async extensionIncomeList() {
-    const res = await this.api.extensionIncomeList();
-    return {
-      rows: res.data.rows.map((item) => {
-        item.profitPrice /= 100;
-        return {
-          ...item,
-          profitPrice: item.profitPrice.toFixed(2),
-        };
-      }),
-      total: res.data.total,
-    };
-  }
+	/**查询收益列表 */
+	async extensionIncomeList() {
+		const res = await this.api.extensionIncomeList();
+		return {
+			rows: res.data.rows.map((item) => {
+				item.profitPrice /= 100;
+				return {
+					...item,
+					profitPrice: item.profitPrice.toFixed(2),
+				};
+			}),
+			total: res.data.total,
+		};
+	}
 
-  /**查询收益金额（总金额、已提现金额、未提现金额） */
-  async extensionIncomePrice() {
-    const {
-      data: { data },
-    } = await this.api.extensionIncomePrice();
+	/**查询收益金额（总金额、已提现金额、未提现金额） */
+	async extensionIncomePrice() {
+		const {
+			data: { data },
+		} = await this.api.extensionIncomePrice();
 
-    data.extractPrice /= 100;
-    data.remainderPrice /= 100;
-    data.totalPrice /= 100;
-    return {
-      ...data,
-      extractPrice: data.extractPrice.toFixed(2),
-      remainderPrice: data.remainderPrice.toFixed(2),
-      totalPrice: data.totalPrice.toFixed(2),
-    };
-  }
+		data.extractPrice /= 100;
+		data.remainderPrice /= 100;
+		data.totalPrice /= 100;
+		return {
+			...data,
+			extractPrice: data.extractPrice.toFixed(2),
+			remainderPrice: data.remainderPrice.toFixed(2),
+			totalPrice: data.totalPrice.toFixed(2),
+		};
+	}
+
+	async extractList() {
+		const { data } = await this.api.extractList();
+
+		return data;
+	}
 }

src/hooks/index.ts

@@ -7,51 +7,58 @@ import store from "@/store";
 
 /** 用户通过微信code登陆 */
 export const useLogin = async (query: LocationQuery) => {
-  //登陆
-  const res = await API.login(query.code);
-  store.commit("setToken", res.data.token);
-  store.commit("setUserData", res.data.wxUserInfo);
-  //获取用户信息
-  const userDataRes = await API.userInfo();
-  store.commit("setUserData", {
-    ...store.getters.getUserData,
-    expireTime: userDataRes.data.data.expireTime,
-  });
+	//登陆
+	const res = await API.login(query.code);
+	store.commit("setToken", res.data.token);
+	store.commit("setUserData", res.data.wxUserInfo);
+	//获取用户信息
+	const userDataRes = await API.userInfo();
+	store.commit("setUserData", {
+		...store.getters.getUserData,
+		...userDataRes.data.data,
+	});
 };
 
 /**
  * 获取用户会员到期时间
  */
 export const useExpireTime = () => {
-  const store = useStore();
-  const expireTime = computed(() => store.getters.getUserData.expireTime);
-  return {
-    expireTime,
-  };
+	const store = useStore();
+	const expireTime = computed(() => store.getters.getUserData.expireTime);
+	return {
+		expireTime,
+	};
+};
+
+/**
+ * 获取用户可提现金额
+ */
+export const useProfitPrice = () => {
+	const store = useStore();
+	const profitPrice = computed(() => store.getters.getUserData.profitPrice);
+	return {
+		profitPrice,
+	};
 };
 
 /** 判断是不是zhangbing的openapi */
 export const useOpenIdIsZhangbing = () => {
-  const store = useStore();
-  const openid = computed(() => store.getters.getUserData.openid);
-  const userOpenidArr = [
-    "ovKTX50v7OAEPI_ERofpUvrNQCJU",
-    "ovKTX5-FKLF6_sgTtCIXpG_lz3PY",
-    "ovKTX5zYvp9OXE43ADwLa1RHna0g",
-  ];
-  const isZhangbing = userOpenidArr.includes(openid.value);
-  return {
-    isZhangbing,
-  };
+	const store = useStore();
+	const openid = computed(() => store.getters.getUserData.openid);
+	const userOpenidArr = ["ovKTX50v7OAEPI_ERofpUvrNQCJU", "ovKTX5-FKLF6_sgTtCIXpG_lz3PY", "ovKTX5zYvp9OXE43ADwLa1RHna0g"];
+	const isZhangbing = userOpenidArr.includes(openid.value);
+	return {
+		isZhangbing,
+	};
 };
 
 export const useSound = (videoSrc: string) => {
-  const sound = new Howl({
-    autoplay: true,
-    src: videoSrc,
-  });
+	const sound = new Howl({
+		autoplay: true,
+		src: videoSrc,
+	});
 
-  return sound.unload;
+	return sound.unload;
 };
 
 /**
@@ -59,41 +66,41 @@ export const useSound = (videoSrc: string) => {
  * @returns
  */
 export class RouterBus {
-  router;
-  route;
-  constructor() {
-    this.router = useRouter();
-    this.route = useRoute();
-  }
-  /**
-   * 会员购买页
-   */
-  goBuyVip = () => {
-    this.router.push("/buyVip");
-  };
-  /**
-   * 分成提现页
-   */
-  goCashOut = () => {
-    this.router.push("/cashOut");
-  };
-  /**
-   * 我的下级页
-   */
-  goMyBranch = () => {
-    this.router.push("/myBranch");
-  };
-  /**
-   * 模拟考试页
-   */
-  goMockTest = () => {
-    this.router.push({ path: "/mockTest", query: this.route.query });
-  };
-  /** 错题重阅 */
-  goWrongReview = (ids: number | number[]) => {
-    this.router.push({
-      path: "/wrongReview",
-      query: { ...this.route.query, wrongIds: ids },
-    });
-  };
+	router;
+	route;
+	constructor() {
+		this.router = useRouter();
+		this.route = useRoute();
+	}
+	/**
+	 * 会员购买页
+	 */
+	goBuyVip = () => {
+		this.router.push("/buyVip");
+	};
+	/**
+	 * 分成提现页
+	 */
+	goCashOut = () => {
+		this.router.push("/cashOut");
+	};
+	/**
+	 * 我的下级页
+	 */
+	goMyBranch = () => {
+		this.router.push("/myBranch");
+	};
+	/**
+	 * 模拟考试页
+	 */
+	goMockTest = () => {
+		this.router.push({ path: "/mockTest", query: this.route.query });
+	};
+	/** 错题重阅 */
+	goWrongReview = (ids: number | number[]) => {
+		this.router.push({
+			path: "/wrongReview",
+			query: { ...this.route.query, wrongIds: ids },
+		});
+	};
 }

src/hooks/user/index.ts

@@ -0,0 +1,24 @@
+import { computed, ref } from "vue";
+import { useStore } from "vuex";
+
+/**
+ * 获取用户会员到期时间
+ */
+export const useExpireTime = () => {
+	const store = useStore();
+	const expireTime = computed(() => store.getters.getUserData.expireTime);
+	return {
+		expireTime,
+	};
+};
+
+/**
+ * 获取用户可提现金额
+ */
+export const useProfitPrice = () => {
+	const store = useStore();
+	const profitPrice = computed(() => (store.getters.getUserData.profitPrice / 100).toFixed(2));
+	return {
+		profitPrice,
+	};
+};

src/views/cashOut copy/index.vue

@@ -0,0 +1,205 @@
+<template>
+	<div class="header-back">
+		<m-nav-bar :transparent="true" title="提现页面" style="color: #ffffff" />
+		<div class="user-data">
+			<div class="left">
+				<m-user-avatar />
+				<div class="name">
+					<m-user-name />
+					<span
+						>可提现余额<span class="grade">{{ profitPrice }}</span
+						>元</span
+					>
+				</div>
+			</div>
+			<m-button @click="fn" class="continue" width="90px" height="30px" text="我要提现" />
+		</div>
+	</div>
+	<div class="summary content-box">
+		<form action="/" class="search">
+			<van-search v-model="searchValue" shape="round" placeholder="请输入下级代理昵称" />
+		</form>
+	</div>
+	<div class="test-scores content-box">
+		<table class="table">
+			<tr>
+				<th>头像</th>
+				<th>昵称</th>
+				<th>代理等级</th>
+				<!-- <th>分成比例</th> -->
+				<th>分成金额</th>
+			</tr>
+			<tr v-for="(item, index) in otherUserInfoList.filter((item) => item.nickName.includes(searchValue))" :key="index">
+				<td>
+					<van-image round width="50px" height="50px" :src="item.headImage" />
+				</td>
+				<td>{{ item.nickName }}</td>
+				<td>{{ item.hierarchy }}</td>
+				<!-- <td>{{ item.percentage }}</td> -->
+				<td>{{ item.profitPrice }}</td>
+			</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">
+	import { CashOutModel } from "@/dataModel/cashOut";
+	import { ref, onBeforeMount } from "vue";
+	import { RouterBus } from "@/hooks";
+	const cashOutModel = new CashOutModel();
+	/** 获取下级用户列表 */
+	const useOtherUserInfoList = () => {
+		const otherUserInfoList = ref<
+			{
+				profitPrice: string;
+				headImage: string;
+				nickName: string;
+				createTime: string;
+				hierarchy: string;
+				openid: string;
+				percentage: string;
+			}[]
+		>([]);
+		onBeforeMount(async () => {
+			const res = await cashOutModel.extensionIncomeList();
+			otherUserInfoList.value.push(...res.rows);
+		});
+		return {
+			otherUserInfoList,
+		};
+	};
+	/** 获取用户可提现信息 */
+	const useUserInfo = () => {
+		const userInfo = ref<{
+			extractPrice: string;
+			remainderPrice: string;
+			totalPrice: string;
+			beneficiaryOpenid: string;
+			headImage: string;
+			nickName: string;
+		}>();
+		onBeforeMount(async () => {
+			const res = await cashOutModel.extensionIncomePrice();
+			userInfo.value = res;
+		});
+		return {
+			userInfo,
+		};
+	};
+</script>
+
+<script lang="ts" setup>
+	import { useProfitPrice } from "@/hooks/user";
+	import { Dialog } from "vant";
+	const { otherUserInfoList } = useOtherUserInfoList();
+	const { userInfo } = useUserInfo();
+	const searchValue = ref("");
+	const { goMockTest } = new RouterBus();
+
+	const { profitPrice } = useProfitPrice();
+
+	console.log(profitPrice.value);
+
+	const show = ref(false);
+	const fn = () => {
+		console.log(123);
+		Dialog({
+			title: "暂未开放",
+		});
+		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;
+			justify-content: space-between;
+			align-items: center;
+			padding: 19px 17px 24px;
+			.left {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.name {
+					display: flex;
+					flex-direction: column;
+					font-size: 13px;
+					color: #ffffff;
+					justify-content: space-between;
+					margin-left: 6px;
+					.grade {
+						font-size: 24px;
+						padding: 4px;
+					}
+				}
+			}
+			.continue {
+				font-size: 13px;
+				font-family: PingFang SC;
+				font-weight: 400;
+				line-height: 19px;
+				color: #ffffff;
+				background: #01c18d;
+			}
+		}
+	}
+	.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%);
+		top: -82px;
+		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>

src/views/cashOut/index.vue

@@ -7,10 +7,9 @@
 				<div class="name">
 					<m-user-name />
 					<span
-						>可提现余额<span class="grade">{{ userInfo?.remainderPrice }}</span
+						>可提现余额<span class="grade">{{ profitPrice }}</span
 						>元</span
 					>
-					<span>已提现{{ userInfo?.extractPrice }}元</span>
 				</div>
 			</div>
 			<m-button @click="fn" class="continue" width="90px" height="30px" text="我要提现" />
@@ -18,26 +17,20 @@
 	</div>
 	<div class="summary content-box">
 		<form action="/" class="search">
-			<van-search v-model="searchValue" shape="round" placeholder="请输入下级代理昵称" />
+			<van-search v-model="searchValue" shape="round" placeholder="请输入单号" />
 		</form>
 	</div>
 	<div class="test-scores content-box">
 		<table class="table">
 			<tr>
-				<th>头像</th>
-				<th>昵称</th>
-				<th>代理等级</th>
-				<!-- <th>分成比例</th> -->
-				<th>分成金额</th>
+				<!-- <th class="oneColunm">id</th> -->
+				<th class="oneColunm">金额</th>
+				<th class="oneColunm">提现时间</th>
 			</tr>
-			<tr v-for="(item, index) in otherUserInfoList.filter((item) => item.nickName.includes(searchValue))" :key="index">
-				<td>
-					<van-image round width="50px" height="50px" :src="item.headImage" />
-				</td>
-				<td>{{ item.nickName }}</td>
-				<td>{{ item.hierarchy }}</td>
-				<!-- <td>{{ item.percentage }}</td> -->
-				<td>{{ item.profitPrice }}</td>
+			<tr v-for="(item, index) in extractList.filter((item) => item.partnerTradeNo.includes(searchValue))" :key="index">
+				<!-- <td class="oneColunm">{{ item.id }}</td> -->
+				<td class="oneColunm">{{ item.extractPrice / 100 }}</td>
+				<td class="oneColunm">{{ item.createTime }}</td>
 			</tr>
 		</table>
 	</div>
@@ -47,63 +40,48 @@
 </template>
 
 <script lang="ts">
-	import { CashOutModel } from '@/dataModel/cashOut';
-	import { ref, onBeforeMount } from 'vue';
-	import { RouterBus } from '@/hooks';
+	import { CashOutModel } from "@/dataModel/cashOut";
+	import { ref, onBeforeMount } from "vue";
 	const cashOutModel = new CashOutModel();
-	/** 获取下级用户列表 */
-	const useOtherUserInfoList = () => {
-		const otherUserInfoList = ref<
-			{
-				profitPrice: string;
-				headImage: string;
-				nickName: string;
-				createTime: string;
-				hierarchy: string;
-				openid: string;
-				percentage: string;
-			}[]
-		>([]);
-		onBeforeMount(async () => {
-			const res = await cashOutModel.extensionIncomeList();
-			otherUserInfoList.value.push(...res.rows);
-		});
-		return {
-			otherUserInfoList,
+
+	/**用户提现列表展示 */
+	const useExtract = () => {
+		type ExtractType = {
+			status: number;
+			extractPrice: number;
+			partnerTradeNo: string;
+			id: number;
+			createTime: string;
 		};
-	};
-	/** 获取用户可提现信息 */
-	const useUserInfo = () => {
-		const userInfo = ref<{
-			extractPrice: string;
-			remainderPrice: string;
-			totalPrice: string;
-			beneficiaryOpenid: string;
-			headImage: string;
-			nickName: string;
-		}>();
+
+		const extractList = ref<Array<ExtractType>>([]);
+
 		onBeforeMount(async () => {
-			const res = await cashOutModel.extensionIncomePrice();
-			userInfo.value = res;
+			const extractListRes = await cashOutModel.extractList();
+			extractList.value = extractListRes.rows;
 		});
+
 		return {
-			userInfo,
+			extractList,
 		};
 	};
 </script>
 
 <script lang="ts" setup>
-	import { Dialog } from 'vant';
-	const { otherUserInfoList } = useOtherUserInfoList();
-	const { userInfo } = useUserInfo();
-	const searchValue = ref('');
-	const { goMockTest } = new RouterBus();
+	import { useProfitPrice } from "@/hooks/user";
+	import { Dialog } from "vant";
+	const searchValue = ref("");
+
+	const { profitPrice } = useProfitPrice();
+	const { extractList } = useExtract();
+
+	console.log(profitPrice.value);
 
 	const show = ref(false);
 	const fn = () => {
 		console.log(123);
 		Dialog({
-			title: '暂未开放',
+			title: "暂未开放",
 		});
 		show.value = true;
 	};
@@ -179,6 +157,7 @@
 			width: 100%;
 			border-collapse: collapse;
 			font-size: 13px;
+
 			th {
 				padding: 5px;
 				color: #0a1a33;
@@ -196,6 +175,13 @@
 					background: rgba(73, 142, 245, 0.15);
 				}
 			}
+
+			.oneColunm {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				width: 50px;
+			}
 		}
 	}
 </style>