crm-app-vue3/pages/order/components/commission/commissionItem.vue

<template>
	<view class="commission_item">
		<view class="commission_top">
			<view class="top_left">{{item.item}}</view>
			<view class="top_right">
				<text class="account_type">{{ item.accountType === '1' ? '前端' : '后端' }}</text>
			</view>
		</view>
		<view class="commission_info">
			<view class="info_row">
				<view class="info_item">
					<text class="label">电话: </text>
					<show-real-text :real="item.phone" :type='type'></show-real-text>
				</view>
			</view>
			<view class="info_row">
				<view class="info_item">
					<text class="label">收单时间: </text>
					<text class="value">{{item.receiptDate || '-'}}</text>
				</view>
			</view>
			<view class="info_row">
				<view class="info_item">
					<text class="label">收单人: </text>
					<text class="value">{{item.receiptNickName || '-'}}</text>
				</view>
				<view class="info_item">
					<text class="label">公司: </text>
					<text class="value">{{item.orgName || '-'}}</text>
				</view>
			</view>
			<view class="info_row">
				<view class="info_item">
					<text class="label">分成所属人: </text>
					<text class="value">{{item.userName || '-'}}</text>
				</view>
				<view class="info_item">
					<text class="label">分成比例: </text>
					<text class="value">{{item.commissionRate || '-'}}%</text>
				</view>
			</view>
		</view>
		<view class="commission_amount">
			<view class="amount_item">
				<view class="amount_label">业绩</view>
				<view class="amount_value primary">{{formatAmount(item.commissionAmount)}}</view>
			</view>
			<view class="amount_item">
				<view class="amount_label">毛业绩</view>
				<view class="amount_value">{{formatAmount(item.grossAmount)}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			required: true
		},
		type: {
			type: String,
			default: '2'
		}
	},
	methods: {
		formatAmount(amount) {
			if (!amount) return '-';
			return parseFloat(amount).toLocaleString();
		}
	}
}
</script>

<style lang="scss" scoped>
	.commission_item {
		background: #fff;
		border-radius: 20px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

		.commission_top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;

			.top_left {
				font-size: 18px;
				font-weight: bold;
				color: #202020;
			}

			.top_right {
				.account_type {
					background: #108cff;
					color: #fff;
					padding: 4px 8px;
					border-radius: 10px;
					font-size: 12px;
				}
			}
		}

		.commission_info {
			margin-bottom: 15px;

			.info_row {
				display: flex;
				margin-bottom: 8px;

				&:last-child {
					margin-bottom: 0;
				}

				.info_item {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 14px;

					.label {
						color: #9b9aa2;
						margin-right: 8px;
						min-width: 60px;
					}

					.value {
						color: #202020;
					}
				}
			}
		}

		.commission_amount {
			display: flex;
			justify-content: space-around;
			padding: 15px 0;
			border-top: 1px solid #f0f0f0;
			background: #f8f9fb;
			border-radius: 10px;

			.amount_item {
				text-align: center;

				.amount_label {
					font-size: 12px;
					color: #9b9aa2;
					margin-bottom: 5px;
				}

				.amount_value {
					font-size: 16px;
					font-weight: bold;
					color: #202020;

					&.primary {
						color: #108cff;
					}
				}
			}
		}
	}
</style>