renli-wx/pages/tabBar/myHome/sales-commission/detail/detail.vue

<template>
	<view>
		<view v-if="detailList.length==0">
			<view class='empty cuIcon-info'></view>
			<view class='empty-text text-gray'>暂无数据</view>
		</view>
		<view v-for="(item,index) in detailList" :key='index'>
			<view class="module">
				<view class="module-top">
					<view class='module-top-title'>
						<text class="cuIcon-titles text-red"></text> {{item.tradeName}}
					</view>
				</view>
				<view class="module-top">
					<view class='module-top-title'>
						<text class="cuIcon-titles text-red"></text> 业绩
					</view>
					<view class='module-top-title'>
						<text class="cuIcon-title text-red"></text> 卡付：
						<text class="text-red">{{item.cardAchi==null?0:item.cardAchi}}</text>
					</view>
					<view class='module-top-title'>
						<text class="cuIcon-title text-red"></text> 现付：
						<text class="text-red">{{item.cashAchi==null?0:item.cashAchi}}</text>
					</view>
				</view>
				<view class="module-top">
					<view class='module-top-title'>
						<text class="cuIcon-titles text-red"></text> 提成
					</view>
					<view class='module-top-title'>
						<text class="cuIcon-title text-red"></text> 卡付：
						<text class="text-red">{{item.cardComm==null?0:item.cardComm}}</text>
					</view>
					<view class='module-top-title'>
						<text class="cuIcon-title text-red"></text> 现付：
						<text class="text-red">{{item.cashComm==null?0:item.cashComm}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				detailList: [{}],
				userInfo: null,
				form:{},
			}
		},
		methods: {

			achiCommDetailList() {
				this.$api.achiCommDetailList(this.form).then(res => {
					console.log(res);
					if (res.code == '000000') {
						this.detailList = res.rows
					}
				})
			}
		},
		onShow:function() {
			this.userInfo = uni.getStorageSync('userInfo')
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.userInfo = uni.getStorageSync('userInfo')
			this.form = {
				storeId: this.userInfo.storeId,
				staffId: this.userInfo.id,
			}
			console.log(option.type); //打印出上个页面传递的参数。
			if (option.type == 'lastDay') {
				//昨天的明细
				this.form.date = new Date(new Date().setTime(new Date().getTime()-24*60*60*1000)) 
			} else if (option.type == 'today') {
				//今天的明细
				this.form.date = new Date()
			} else {
				//其他日期的明细
				this.form.date = option.type
			}
			this.achiCommDetailList()
		},

	}
</script>

<style>
	page {
		color: #555;
	}


	.module {
		background-color: white;
		margin: 20rpx;
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.module-top {
		height: 60rpx;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
	}

	.module-top:first-child {
		height: 80rpx;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		font-weight: 550;
	}

	.module-top view {
		flex: 2;
	}

	.module-top view:first-child {
		flex: 1;
	}

	.module-top-title {
		font-size: 30rpx;
	}

	.module-hover {
		background-color: darkgray;
	}

	.module-title {
		font-size: 30rpx;
		display: inline-block;
		margin-top: 40rpx;
		margin-left: 10rpx;
	}

	.module-content {
		display: block;
		float: right;
		margin-right: 20rpx;
	}

	.content {
		display: inline-block;
		width: 270rpx;
		height: 40rpx;
		font-size: 28rpx;
		margin-top: 40rpx;
	}

	.color-darkgray {
		color: rgb(111, 111, 111);
	}

	.margin-left {
		margin-left: 30rpx;
	}

	.sum-module {
		background-color: white;
		margin: 40rpx 0 5rpx 0;
		text-align: center;
		width: 100%;
	}

	.sum-module-title {
		display: inline-block;
		padding: 35rpx;
	}

	.cu-item {
		width: 33%;
	}
</style>