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')
			
			console.log();
		},

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.userInfo = uni.getStorageSync('userInfo')
			if (option.type != undefined) {
				if (option.type == 'lastDay') {
					//昨天的明细
					this.form.date = this.formatTime(new Date(new Date().setTime(new Date().getTime() - 24 * 60 * 60 *
						1000)), 'YYYY-MM-DD')
				} else if (option.type == 'today') {
					//今天的明细
					this.form.date = this.formatTime(new Date(), 'YYYY-MM-DD')
				} else {
					//其他日期的明细
					this.form.date = option.type
				}
				this.form.storeId =this.userInfo.storeId
				this.form.staffId =this.userInfo.id
				uni.setNavigationBarTitle({
					title: '明细(' + this.form.date + ")"
				})
			}
			if (option.item != undefined) {
				// item 分类传来的参数
				let item = JSON.parse(option.item)
				this.form.storeId = item.storeId
				this.form.staffId = item.staffId
				this.form.date = item.date
				this.form.classify = item.classify
				uni.setNavigationBarTitle({
					title: '分类明细(' + this.form.date + ")"
				})
			}
			if(option.form!=undefined){
				let form = JSON.parse(option.form)
				this.form.storeId = form.storeId
				this.form.staffId = form.staffId
				this.form.type = form.type
				this.form.classify = form.classify
				uni.setNavigationBarTitle({
					title:'明细(' + form.staffName + ")"
				})
			}
			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>