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

<template>
	<view>
		<!-- 	<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item " :class="TabCur==0?'text-red cur':''" @tap="tabSelect" :data-id="0">充值</view>
			<view class="cu-item " :class="TabCur==1?'text-red cur':''" @tap="tabSelect" :data-id="1">疗程</view>
			<view class="cu-item " :class="TabCur==2?'text-red cur':''" @tap="tabSelect" :data-id="2">服务</view>
			<view class="cu-item " :class="TabCur==3?'text-red cur':''" @tap="tabSelect" :data-id="3">还款</view>
			<view class="cu-item " :class="TabCur==4?'text-red cur':''" @tap="tabSelect" :data-id="4">充值退</view>
			<view class="cu-item " :class="TabCur==5?'text-red cur':''" @tap="tabSelect" :data-id="5">疗程退</view>
			<view class="cu-item " :class="TabCur==6?'text-red cur':''" @tap="tabSelect" :data-id="6">消费退</view>
		</scroll-view> -->
		<view v-if="detailList.length==0">
			<view class='empty cuIcon-info'></view>
			<view class='empty-text text-gray'>暂无数据</view>
		</view>
		<view v-if="detailList.length!=0" class="module" v-for="(item,index) in detailList" :key='index'>
			<navigator :url="'../detail/detail?item='+JSON.stringify(item)">
			<view class="module-top">
				<view class='module-top-title'>
					<text class="cuIcon-title text-sxl  text-red"></text>
					<text class="text-xl text-bold text-red"> {{item.typeName}}</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.cardAchi}}</text>
				</view>
				<view class='module-top-title'>
					<text class="cuIcon-title text-red"></text> 现付：
					<text class="text-red">{{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}}</text>
				</view>
				<view class='module-top-title'>
					<text class="cuIcon-title text-red"></text> 现付：
					<text class="text-red">{{item.cashComm}}</text>
				</view>
			</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: "0",
				scrollLeft: 0,
				detailList: [],
				form: {},
				classifylist: [{
						typeName: "充值",
						typeIndex: 0
					},
					{
						typeName: "疗程",
						typeIndex: 1
					},
					{
						typeName: "服务",
						typeIndex: 2
					},
					{
						typeName: "还款",
						typeIndex: 3
					},
					{
						typeName: "充值退",
						typeIndex: 4
					},
					{
						typeName: "疗程退",
						typeIndex: 5
					},
					{
						typeName: "消费退",
						typeIndex: 6
					},
				]
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.form.classify = e.currentTarget.dataset.id
				this.achiCommClassifyList()
			},
			achiCommClassifyList() {
				this.$api.achiCommClassifyList(this.form).then(res => {
					//console.log(res);
					if (res.code == '000000') {
						res.rows.forEach(item => {
							this.classifylist.forEach(items => {
								if (item.classify * 1 == items.typeIndex) {
									item.typeName = items.typeName
								}
							})
						})
						this.detailList = res.rows

					}
				})
			},
		},
		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))
				this.form.type = 1
			} else if (option.type == 'today') {
				//今天的明细
				this.form.date = new Date()
				this.form.type = 2
			} else {
				//其他日期的明细
				this.form.date = option.type
				if ((new Date(this.form.date).getMonth()) == (new Date().getMonth())) {
					this.form.type = 3
				} else {
					this.form.type = 0
				}
			}

			this.achiCommClassifyList()
		},
		onShow: function() {
			console.log(this.form);
			uni.setNavigationBarTitle({
				title: '分类(' + this.formatTime(this.form.date,'YYYY-MM-DD')  + ")"
			})
		}
	}
</script>

<style>
	.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;
	}
</style>