mechanicStore-app/pages/index/account.uvue

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

		<!-- 1. 资产卡片区域 -->
		<view class="asset-card">
			<!-- 总资产 -->
			<view class="total-asset-section row-between">
				<text class="label">
					我的资产(元)
				</text>
				<view class="amount-row row-start">
					<!-- 修复：确保 totalAsset 已定义 -->
					<text class="amount">
						{{ totalAsset }}
					</text>
					<u-icon type="eye" size="20" color="#333">
					</u-icon>
				</view>
				<!-- 修复：确保 refreshData 已定义 -->
				<view class="refresh-btn row-center" @click="refreshData">
					<u-icon type="refresh" size="18" color="#333">
					</u-icon>
					<text>
						刷新
					</text>
				</view>
			</view>

			<!-- 累计收益 & 打车费 -->
			<view class="income-section row-start">
				<!-- 左侧：累计收益 -->
				<view class="income-item column">
					<view class="income-header row-start">
						<text class="income-label">
							累计收益(元)
						</text>
						<u-icon type="help" size="16" color="#999">
						</u-icon>
					</view>
					<view class="income-main row-between">
						<!-- 修复：确保 cumulativeIncome 已定义 -->
						<text class="income-value">
							{{ cumulativeIncome }}
						</text>
						<!-- 修复：确保 handleWithdraw 已定义 -->
						<view class="withdraw-btn" @click="handleWithdraw('income')">
							提现
						</view>
					</view>
					<view class="income-detail row-start">
						<view class="detail-item column-center">
							<text class="detail-label">
								冻结(元)
							</text>
							<!-- 修复：确保 frozenIncome 已定义 -->
							<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 highlight">
								{{ availableIncome }}
							</text>
						</view>
					</view>
				</view>

				<!-- 右侧：打车费 -->
				<view class="income-item column">
					<view class="income-header row-start">
						<text class="income-label">
							打车费(元)
						</text>
						<u-icon type="help" size="16" color="#999">
						</u-icon>
					</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">
						<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 highlight">
								{{ availableTaxi }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 提现记录入口 -->
			<view class="record-entry row-between" @click="viewWithdrawRecords">
				<text>
					提现记录
				</text>
				<u-icon type="arrowright" size="16" color="#999">
				</u-icon>
			</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="order-id">
						订单号：{{ bill.orderId }}
					</text>
					<u-icon type="arrowright" size="16" color="#999">
					</u-icon>
				</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 column">
						<text class="split-type">
							{{ bill.splitType }}
						</text>
						<text class="split-detail">
							{{ bill.splitDetail }}
						</text>
					</view>

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

				</view>
			</view>

		</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue';

	// --- 数据定义 ---
	const totalAsset = ref('1978.2');
	const cumulativeIncome = ref('1889');
	const frozenIncome = ref('1000');
	const availableIncome = ref('889');
	const taxiFee = ref('89.2');
	const frozenTaxi = ref('50');
	const availableTaxi = ref('49.2');

	// ✅ 修复点 1: 定义类型 (可以用 interface 或 type)
	type BillItem = {
		orderId : string;
		projectName : string;
		amount : number;
		splitType : string;
		splitDetail : string;
		recordTime : string;
	};

	// ✅ 修复点 2: 初始化时不写泛型 <BillItem[]>，让 TS 自动推断
	// 或者写成: const bills = ref<BillItem[]>([]); 然后单独 push，但直接推断最方便
	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 refreshData = () => {
		uni.showLoading({ title: '刷新中...' });
		setTimeout(() => {
				uni.hideLoading();
				uni.showToast({ title: '刷新成功', icon: 'success' });
				totalAsset.value = (parseFloat(totalAsset.value) + 0.1).toFixed(1);
			}, 800);
	};

	const handleWithdraw = (type : string) => {
		const amount = type === 'income' ? availableIncome.value : '0';
		uni.showModal({
				title: '提现确认',
				content: `确定要提现 ${amount} 元吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.showToast({ title: '提现申请已提交', icon: 'success' });
					}
				}
			});
	};

	const handleTransfer = (type : string) => {
		uni.showModal({
				title: '转出确认',
				content: '确定要将打车费转出到其他账户吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({ title: '转出成功', icon: 'success' });
					}
				}
			});
	};

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

	const viewAllBills = () => {
		uni.showToast({ title: '查看全部账单', icon: 'none' });
	};
</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;
		/* gap: 10rpx; */
	}

	.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: #f5f6f8;
		/* min-height: 100vh; */
		padding-bottom: 40rpx;
	}

	/* --- 资产卡片 --- */
	.asset-card {
		background: linear-gradient(180deg, #fff9e6 0%, #ffeaa7 100%);
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.total-asset-section {
		margin-bottom: 30rpx;
	}

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

	.amount-row {
		/* gap: 10rpx; */
	}

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

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

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

	.income-item {
		flex: 1;
		/* gap: 15rpx; */
	}


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

	.income-main {
		/* 继承 row-between */
	}

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

	.withdraw-btn,
	.transfer-btn {
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		background: #ffffff;
		border: 1rpx solid;
	}

	.withdraw-btn {
		color: #ff9900;
		border-color: #ff9900;
	}

	.transfer-btn {
		color: #52c41a;
		border-color: #52c41a;
	}

	/* 明细部分 */
	.income-detail {
		background: rgba(255, 255, 255, 0.6);
		border-radius: 12rpx;
		padding: 15rpx;
		/* gap: 20rpx; */
	}

	.detail-item {
		flex: 1;
		/* gap: 4rpx; */
	}

	.detail-label {
		font-size: 22rpx;
		color: #999;
	}

	.detail-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.detail-value.highlight {
		color: #ff9900;
	}

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

	/* 提现记录入口 */
	.record-entry {
		padding: 20rpx 0;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		font-size: 28rpx;
		color: #333;
	}

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

	.bill-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

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

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

	.bill-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		/* gap: 15rpx; */
	}

	.order-id-row {
		font-size: 26rpx;
		color: #666;
	}

	.project-amount-row {
		/* 继承 row-between */
	}

	.project-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

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

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

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

	.split-type {
		font-weight: 400;
		color: #666;
	}

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