mechanicStore-app/pages/account/account.uvue

<template>
	<view class="page-container">

		<!-- 1. 资产卡片区域 -->
		<view class="income-section ">
			<view class="asset-card">
				<!-- 总资产 -->
				<view class="total-asset-section row-between">
					<view>
						<view class="row-start">
							<text class="label">
								我的资产(元)
							</text>
							<u-icon v-if="isShowAmount" name="view" :size="20" @click="toggleShowAmount" />
							<u-icon v-else name="view_off" :size="20" @click="toggleShowAmount" />
						</view>
						<text class="amount" style="margin-top: 20rpx;">
							{{ isShowAmount ? totalAsset : '***' }}
						</text>
					</view>
					<view class="refresh-btn row-center" @click="refreshData">
						<u-icon name="sync" :size="18" />

						<text>
							刷新
						</text>
					</view>
				</view>
			</view>
			<!-- 累计收益 & 打车费 -->

			<image class="bg-image" src="/static/imagesInfo/zh-bg.png">
			</image>
			<view class="detail-container row-start ">
				<!-- 左侧：累计收益 -->
				<view class="income-item column ">
					<view class="income-header-content">
						<view class="row-start" style="margin-top: 30rpx;">
							<text class="income-label">
								累计收益(元)
							</text>
							<u-icon name="hollowquery" :size="16" color="#999" @click="openIncomePopup" />
						</view>

						<view class="income-main row-between">
							<text class="income-value">
								{{ cumulativeIncome }}
							</text>
							<view class="withdraw-btn" @click="handleWithdraw('income')">
								提现
							</view>
						</view>
					</view>
					<view class="income-detail row-start">
						<image class="jine-bg" src="/static/imagesInfo/jine-bg.png" mode="widthFix">
						</image>
						<view class="detail-item column-center">
							<text class="detail-label">
								冻结(元)
							</text>
							<text class="detail-value">
								{{ frozenIncome }}
							</text>
						</view>
						<view class="divider">
						</view>
						<view class="detail-item column-center">
							<text class="detail-label">
								可提现(元)
							</text>
							<text class="detail-value">
								{{ availableIncome }}
							</text>
						</view>
					</view>
				</view>

				<!-- 右侧：打车费 -->
				<view class="income-item column " style="padding-left: 20rpx;">

					<view class=" row-start" style="margin-top: 30rpx;">
						<text class="income-label">
							打车费(元)
						</text>
						<u-icon name="hollowquery" :size="16" color="#999" @click="openTaxiPopup" />
					</view>
					<view class="income-main row-between">
						<text class="income-value">
							{{ taxiFee }}
						</text>
						<view class="transfer-btn" @click="handleTransfer('taxi')">
							转出
						</view>
					</view>

					<view class="income-detail row-start">
						<image class="jine-bg" src="/static/imagesInfo/jine-bg.png" mode="widthFix">
						</image>
						<view class="detail-item column-center">
							<text class="detail-label">
								冻结(元)
							</text>
							<text class="detail-value">
								{{ frozenTaxi }}
							</text>
						</view>
						<view class="divider">
						</view>
						<view class="detail-item column-center">
							<text class="detail-label">
								可使用(元)
							</text>
							<text class="detail-value">
								{{ availableTaxi }}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="record-entry row-between" @click="viewWithdrawRecords">
				<text>
					提现记录
				</text>
				<text>
					>
					</text>
				</view>

			</view>

			<!-- 提现记录入口 -->


			<!-- 2. 本月账单标题 -->
			<view class="bill-header row-between">
				<text class="bill-title">
					本月账单
				</text>
				<text class="view-all" @click="viewAllBills">
					查看全部
				</text>
			</view>

			<!-- 3. 账单列表 -->
			<view class="bill-list column">
				<view v-for="(bill, idx) in bills" :key="idx" class="bill-card column">

					<!-- 订单号行 -->
					<view class="order-id-row row-between">
						<text class="split-type">
							订单号：{{ bill.orderId }}
						</text>
						<text>
							>
							</text>
						</view>

						<!-- 项目与金额 -->
						<view class="project-amount-row row-between">
							<text class="project-name">
								{{ bill.projectName }}
							</text>
							<text :class="['amount', bill.amount > 0 ? 'positive' : 'negative']">
								{{ bill.amount > 0 ? '+' : '' }}{{ Math.abs(bill.amount).toFixed(2) }}
								</text>
							</view>

							<!-- 分成说明 -->
							<view class="split-info row-between">
								<text class="split-type">
									{{ bill.splitType }}
								</text>
								<text class="split-type">
									{{ bill.splitDetail }}
								</text>
							</view>

							<!-- 记录时间 -->
							<view class="time-row row-between">
								<text class="split-type">
									记录时间
								</text>
								<text class="split-type">
									{{ bill.recordTime }}
								</text>
							</view>

						</view>
					</view>

				</view>

</template>

<script setup lang="uts">
	import { ref } from 'vue';
	import { getCoachWallteInfo, getCoachTransRecords } from '@/utils/api/account'
	// --- 数据定义 ---
	const totalAsset = ref('0');
	const cumulativeIncome = ref('0');
	const frozenIncome = ref('0');
	const availableIncome = ref('0');
	const taxiFee = ref('0');
	const frozenTaxi = ref('0');
	const availableTaxi = ref('0');

	const isShowAmount = ref(true);

	type BillItem = {
		orderId : string;
		projectName : string;
		amount : number;
		splitType : string;
		splitDetail : string;
		recordTime : string;
	};

	const bills = ref([
			{
				orderId: '202506091311123009874638',
				projectName: '中式推拿',
				amount: 170.00,
				splitType: '首单分成',
				splitDetail: '基本套餐车费收入 x90%=20\n项目套餐收入 x50%=150',
				recordTime: '2025-06-09 13:58'
			},
			{
				orderId: '202506091311123009874638',
				projectName: '中式推拿',
				amount: 150.00,
				splitType: '加钟分成',
				splitDetail: '项目套餐收入 x71%+(70%+等级v1)=150',
				recordTime: '2025-06-09 13:58'
			},
			{
				orderId: '202506091311123009874638',
				projectName: '中式推拿订单退款',
				amount: -150.00,
				splitType: '首单分成',
				splitDetail: '基本套餐车费收入 x90%=20\n项目套餐收入 x50%=150',
				recordTime: '2025-06-09 13:58'
			},
			{
				orderId: '',
				projectName: '打车费转出',
				amount: -50.00,
				splitType: '分成',
				splitDetail: '打车费转出刘大锤账户：45.00元\n费率：0.1 手续费：5.00元',
				recordTime: '2025-06-09 13:58'
			}
		] as BillItem[]); // 如果自动推断不准，可以在末尾加 'as BillItem[]' 进行断言

	// --- 方法定义 ---
	const walletInfo = ref<UTSJSONObject | null>(null)

	const httpGetWalletInfo = async () => {
		try {
			const res = await getCoachWallteInfo() as UTSJSONObject;
			const code = res["code"] as number;
			const data = res["data"] as UTSJSONObject;
			if (code === 200) {
				walletInfo.value = data;
				// 赋值到页面变量
				totalAsset.value = data.total_balance as string ;
				cumulativeIncome.value = data.total_income as string ;
				frozenIncome.value = data.frozen_amount as string ;
				availableIncome.value = data.available_balance as string;
				taxiFee.value = data.travel_balance as string ;
				frozenTaxi.value = data.travel_frozen_balance as string ;
				availableTaxi.value = (parseFloat(data.travel_balance as string ) - parseFloat(data.travel_frozen_balance as string )).toFixed(2);
			} else {
				uni.showToast({
						title: '获取钱包信息失败',
						icon: 'none'
					});
			}
		} catch (err : any) {
			console.error('获取技师钱包信息异常', err);
			uni.showToast({
					title: '请求失败',
					icon: 'none'
				});
		}
	};
	// 获取本月账单接口
	const billRecords = ref<any[]>([]);

	const httpGetBillRecords = async (params: UTSJSONObject) => {
		try {
			const res = await getCoachTransRecords(params) as UTSJSONObject;
			const code = res["code"] as number;
			const data = res["data"] as any[];
			if (code == 200) {
				billRecords.value = data;
			} else {
				uni.showToast({
						title: '获取本月账单失败',
						icon: 'none'
					});
			}
		} catch (err : any) {
			console.error('获取本月账单异常', err);
			uni.showToast({
					title: '请求失败，请稍后重试',
					icon: 'none'
				});
		}
	};
	const refreshData = () => {
		uni.showLoading({ title: '刷新中...' });
		setTimeout(() => {
				uni.hideLoading();
				uni.showToast({ title: '刷新成功', icon: 'success' });
				httpGetWalletInfo();
				httpGetBillRecords({});
			}, 800);
	};

	const handleWithdraw = (type : string) => {
		const amount = type === 'income' ? availableIncome.value : '0';
		uni.showModal({
				title: '提现确认',
				content: `确定要提现 ${amount} 元吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
								url: '/pages/account/withdraw'
							});
					}
				}
			});
	};

	const handleTransfer = (type : string) => {
		uni.navigateTo({
				url: '/pages/account/transfer'
			});
	};

	const viewWithdrawRecords = () => {
		uni.showToast({ title: '查看提现记录', icon: 'none' });
	};

	const viewAllBills = () => {
		uni.navigateTo({
				url: '/pages/account/bill-list'
			});
	};


	const toggleShowAmount = () => {
		console.log('toggleShowAmount', isShowAmount.value);
		isShowAmount.value = !isShowAmount.value;
	};

	const openIncomePopup = () => {
		uni.showModal({
				title: '我的收益',
				content: '我的收益包含订单分成、加钟收益+佣金收益+红包收益+车费收益。\n\n特殊说明：\n1、红包收益是商户拉新用户时平台直接奖励的，直接进入可提现余额，无冻结情况。\n2、未到账、提现中等金额属于冻结余额。',
				showCancel: false,
				confirmText: '我知道了'
			});
	};

	const openTaxiPopup = () => {
		uni.showModal({
				title: '车费说明',
				content: '1、车费主要是用户在小叮当下支付的打车费（不包含公交车费）将会进入商户的打车收益中。\n\n2、打车费可以转到我的收益里提现，提现平台将收取10%的手续费。\n\n3、车费收入为100%商户个人收入，长期以来一直是平台代商户缴纳该部分的个人经营所得税，技师提现打车费余额，平台将会代收10%的税费扣款。\n\n4、当商户长时间不接单时，打车费余额存在负数时，将优先将技师的提现余额进行抵扣，达到冲正效果。\n\n5、单程车费不超过500元，超出部分需要技师个人承担车费。',
				showCancel: false,
				confirmText: '我知道了'
			});
	};

	onLoad(() => {
			httpGetWalletInfo();
			httpGetBillRecords({});
		});

</script>

<style>
	/*
	⚠️ UniApp X 样式规范：
	1. 不写 display: flex (view 默认就是)
	2. 不写 display: block/inline-block
	3. 布局靠 flex-direction (默认 column, 需 row 时手动改)
	4. 不写 border-radius: 50% (用具体数值)
	5. 只用类名选择器
	*/

	/* --- 辅助布局类 (核心) --- */
	.row-between {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.row-start {
		flex-direction: row;
		align-items: center;
	}

	.row-center {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.column {
		flex-direction: column;
	}

	.column-center {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* --- 页面容器 --- */
	.page-container {
		background-color: rgba(246, 246, 244, 0.5);
		padding-bottom: 40rpx;
		padding: 20rpx;
	}

	/* --- 资产卡片 --- */
	.asset-card {
		/* background: linear-gradient(to right, rgba(255, 249, 225, 1), rgba(255, 241, 191, 1));
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		*/
		padding: 0 20rpx;
	}

	.total-asset-section {
		background: linear-gradient(to bottom, rgba(253, 252, 246, 1) ,rgba(254, 249, 234, 1));
		padding: 30rpx 20rpx 20rpx;
		border-radius: 16rpx 16rpx 0 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	} rgba(254, 249, 234, 1)

	.label {
		font-size: 26rpx;
		color: #666;
	}


	.amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.refresh-btn {
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		border: 1rpx solid #ddd;
		font-size: 24rpx;
		color: #333;
	}

	/* 收益分区 */
	.income-section {
		/* gap: 30rpx; */
		margin-bottom: 20rpx;
		position: relative;
	}

	.bg-image {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: 28%;
		left: 0;
	}
	.detail-container{
		padding:0 20rpx 20rpx;
	}
	.income-item {
		flex: 1;
		/* gap: 15rpx; */
	}


	.income-label {
		font-size: 26rpx;
	}

	.income-main {
		margin-top:20rpx;
	}

	.income-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.withdraw-btn,
	.transfer-btn {
		font-size: 28rpx;
		padding: 6rpx 22rpx;
		border-radius: 26rpx;
		background: #FFFCEE;
		border: 1rpx solid;
	}

	.withdraw-btn {
		color: #111111ff;
		border-color: #fff;
	}

	.jine-bg {
		width: 320rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;

	}
	.transfer-btn {
		color: #101010ff;
		border-color: #fff;
	}

	/* 明细部分 */
	.income-detail {
		padding: 20rpx;
		position: relative;
		margin-top: 10rpx;
		justify-content: space-between;
	}

	.income-header-content {

		padding:  0 20rpx 0 10rpx;
		border-right-width: 2rpx;
		border-right-color: #979797;
		border-right-style: solid;
	}

	.detail-label {
		font-size: 24rpx;
		color: #666;
	}

	.detail-value {
		/* font-size: 28rpx; */
		font-weight: bold;
	}


	.divider {
		width: 1rpx;
		background: #ddd;
		margin: 0 10rpx;
	}

	/* 提现记录入口 */
	.record-entry {
		padding: 20rpx 30rpx 30rpx ;
		font-size: 28rpx;
		color: #333;
		/* background: #fff; */
	}

	/* --- 账单标题 --- */
	.bill-header {
		padding: 0 30rpx;
		/* margin-top: 20rpx; */
	}


	.view-all {
		font-size: 26rpx;
		color: #666;
	}

	/* --- 账单列表 --- */
	.bill-list {
		padding: 0 20rpx;
		/* gap: 20rpx; */
	}

	.bill-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		margin-top: 20rpx;
	}

	.order-id-row {
		font-size: 26rpx;
		padding: 10rpx 0 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.project-amount-row {
		margin-top: 20rpx;
	}

	.project-name {
		font-size: 30rpx;
	}

	.amount.positive {
		color: #ff4d4f;
		font-size: 32rpx;
	}

	.amount.negative {
		color: #333;
		font-size: 32rpx;
	}

	.split-info {
		font-size: 24rpx;
		color: #999;
		line-height: 1.4;
	}

	.split-type {
		font-size: 26rpx;
		color: #999;
	}

	.time-row {
		font-size: 26rpx;
		color: #999;
	}
</style>