partnerApp/pages/my/commissionDetail.vue

<template>
	<view style="background: #FFFFFF;height: 100vh;">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-start " style="padding: 0 15px;">
				<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
				<text style="margin: auto;">收入详情</text>
			</view>
		</view>
		<view style="padding:85px 16px 16px">
			<view class="assets">
				<view>{{MoneyData.extractFee}}</view>
				<view class="time">
					<image src="../../static/icon/Frame.png" mode=""></image> {{MoneyData.createTime}}
				</view>

			</view>
			<view class="assets1 dis f-c j-s">
				<view style="border-top: 1px solid #f2f2f2;" class="dis j-s a-c" v-if="MoneyData.companyId">
					<text style="font-size: 30rpx; font-weight: 400;">订单号</text>
					<text style="font-size: 30rpx; font-weight: 500;">{{MoneyData.companyId}}</text>
				</view>
				<view style="border-top: 1px solid #f2f2f2;" class="dis j-s a-c" v-if="MoneyData.licenseno">
					<text style="font-size: 30rpx; font-weight: 400;">车牌号</text>
					<text>{{MoneyData.licenseno}}</text>
				</view>
				<view class="dis j-s a-c" v-if="MoneyData.industrySector">
					<text style="font-size: 30rpx; font-weight: 400;">收入类型</text>
					<text>{{MoneyData.industrySector==1?'汽车-车险':'保险-财险'}}</text>
				</view>
				<view class="dis j-s a-c" v-if="MoneyData.issuerName">
					<text style="font-size: 30rpx; font-weight: 400;">代理人</text>
					<text>{{MoneyData.issuerName}}</text>
				</view>
				<view class="dis j-s a-c" v-if="MoneyData.profferName&&MoneyData.profferLevel">
					<text style="font-size: 30rpx; font-weight: 400;">贡献合伙人</text>
					<text>{{MoneyData.profferName}}-
						<text v-if="MoneyData.profferLevel ==1"> 一级合伙人</text>
						<text v-if="MoneyData.profferLevel ==2"> 二级合伙人</text>
						<text v-if="MoneyData.profferLevel ==3"> 三级合伙人</text>
						<text v-if="MoneyData.profferLevel ==4"> 四级合伙人</text>
						<text v-if="MoneyData.profferLevel ==5"> 五级合伙人</text>
					</text>
				</view>
				<view class="dis j-s a-c" v-if="MoneyData.sumpremium">
					<text style="font-size: 30rpx; font-weight: 400;">总保费</text>
					<text>{{MoneyData.sumpremium}}</text>
				</view>
				<view class="dis j-s a-c" v-if="MoneyData.proportional">
					<text>佣金比例</text>
					<text>{{MoneyData.proportional}}%</text>
				</view>
				<view class="dis j-s a-c" v-if="MoneyData.extractFee">
					<text style="font-size: 30rpx; font-weight: 400;">总佣金</text>
					<text>{{MoneyData.extractFee}}
					<u-icon name="arrow-down" size="22" color="#999999" v-if="isShow" @click="toggle" style="margin-left: 11rpx;"></u-icon>
					<u-icon name="arrow-up" size="22" color="#999999" v-else @click="toggle" style="margin-left: 11rpx;"></u-icon>
					</text>
				</view>
			</view>
			<view class="extractFee_box" v-if="isShow">
				<view class="option" v-for="(item,index) in MoneyData.profferList" :key="index">
					<view class="option_left">
						<text v-if="index ==0"> 我的佣金</text>
						<text v-if="index !==0&&item.source ==1"> 一级合伙人佣金</text>
						<text v-if="index !==0&&item.source ==2"> 二级合伙人佣金</text>
						<text v-if="index !==0&&item.source ==3"> 三级合伙人佣金</text>
						<text v-if="index !==0&&item.source ==4"> 四级合伙人佣金</text>
						<text v-if="index !==0&&item.source ==5"> 五级合伙人佣金</text>
					</view>
					<view class="option_right">
						{{item.sumpremium}}*{{item.proportional}}% = {{item.extractFee}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				numList: [],
				MoneyData: {},
				promotionData: {},
				refundData: {},
				trajectoryLength: 0,
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/beijing (2).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				//佣金详情是否展示
				isShow:true
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {

		},
		async onLoad(e) {
			this.MoneyData = JSON.parse(decodeURIComponent(e.key));

		},
		onShow() {},
		methods: {
			toggle(){
				this.isShow = !this.isShow
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.flexd {
		position: fixed;
		left: 0;
		right: 0;
	}

	.assets1 {
		width: 100%;
		height: auto;
		margin-top: 30px;

		>view {
			border-bottom: 1px solid #f2f2f2;
			font-size: 16px;
			color: #333333;
			padding: 10px;
		}
	}

	.assets {
		color: #333333;
		text-align: center;

		view {
			font-size: 31px;
			font-weight: bold;
		}

		text {
			font-size: 13px;
			color: #666666;
		}

		.time {
			width: 100%;
			font-size: 24rpx;
			color: #666666;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}


	.headers {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
		padding-top: 40px;
		height: 85px;

		text {
			font-size: 18px;
			font-weight: bold;
		}
	}

	.extractFee_box {
		margin: 24rpx 0rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background: rgba(240, 248, 255, 0.5);
		border-radius: 4px 4px 4px 4px;

		.option {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			margin-bottom: 23rpx;
			.option_left {
				color: #666666;
			}
			.option_right{
				color: #333333;
			}
		}
	}
</style>