jpcj-h5/src/views/cashOut/index.vue

<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">{{ userInfo?.remainderPrice }}</span
						>元</span
					>
					<span>已提现{{ userInfo?.extractPrice }}元</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 { 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>

<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>