front-end/hdApp/src/admin/stat/kdIncome.vue

<template>
<view class="app-content">
	<view class="ex-page">
		<view class="top-bar">
			<DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
		</view>
		<view  class="main-view">
			<view class="space-view ex-table">
				<block>
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<t-tr header><t-th><view style="width:180upx;">渠道</view></t-th><t-th>笔数</t-th><t-th>金额</t-th><t-th>操作</t-th></t-tr>
						<view v-for="(item, index) in profile" :key="index">
							<t-tr>
								<t-td><view style="width:180upx;color:black;font-size:30upx;">{{item.name}}</view></t-td>
								<t-td><view style="color:black;font-size:30upx;">{{item.num}}</view></t-td>
								<t-td><view style="color:black;font-size:30upx;">¥{{item.amount?parseFloat(item.amount):0}}</view></t-td>
								<t-td>
									<view>
										<button class="admin-button-com middel blue" @click="getDetail(item)">明细</button>
									</view>
								</t-td>
							</t-tr>
						</view>
						<t-tr>
							<t-td align="center">
								<view style="font-weight:bold;color:black;font-size:32upx;">
									合计 ¥{{totalIncome}}
								</view>
							</t-td>
						</t-tr>
					</t-table>
				</block>
			</view>
		</view>

		<modal-module :show="showDetailPop" @click="confirmDetail" :maskClosable="true" title="明细" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view style="font-size:30upx;margin-bottom:30upx;margin-top:20upx;">

					<block v-if="detailItem.class && !$util.isEmpty(detailItem.class)">
						<t-table>
							<block v-for="(it, idx) in detailItem.class" :key="idx">					
								<block v-if="Number(it.num) >0 || Number(it.amount)>0">
								<t-tr>
									<t-td align="center">{{it.name}}</t-td>
									<t-td align="center">{{it.num}}笔</t-td>
									<t-td align="center">¥{{it.amount?parseFloat(it.amount):0}}</t-td>
								</t-tr>
								</block>
							</block>
						</t-table>
						<view style="height:30upx;"> </view>
					</block>

					<block v-if="detailItem.category && !$util.isEmpty(detailItem.category)">
						<t-table>
							<block v-for="(item, index) in detailItem.category" :key="index">					
								<t-tr>
									<t-td align="center">{{item.name}}</t-td>
									<t-td align="center">{{item.num}}笔</t-td>
									<t-td align="center">¥{{item.amount?parseFloat(item.amount):0}}</t-td>
								</t-tr>
							</block>
						</t-table>
					</block>

				</view>
			</template>
		</modal-module>

	</view>
</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import SelectList from "@/components/plugin/selectList";
import { getStatKdProfile } from "@/api/stat/index";
import { list } from "@/mixins";
import ShopSelect from "@/components/module/shopSelect";
import DateSelect from "@/components/module/dateSelect";
import {mapActions, mapGetters} from "vuex";
import ModalModule from "@/components/plugin/modal";
export default {
	components: { SelectList, AppWrapperEmpty,ShopSelect,DateSelect,ModalModule},
	mixins: [list],
	computed: {		...mapGetters(["getDictionariesInfo","getLoginInfo"])	},
	data() {
		return {
			isShow:false,
			customizationTime:'',
			menuTimeObj:'',
			menuShopObj:'',
			shopId:'',
			itemId:'',
			nowTime: "",
			showTimeDropdown: false,
			nowShop: "",
			showShopDropdown: false,
			dataList: [],
			params:{
				itemId: '',
				searchTime:'',
				startTime: "",
				endTime: "",
				shopId: "",
				contain:0
			},
			profile:[],
			totalIncome:0,
			showDetailPop:false,
			detailItem:[]
		};
	},
	onPullDownRefresh() {
		this.resetList();
		this.getIncomeList().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onLoad(e) {
		this.itemId = e.id;
		this.params.itemId = e.id;
		this.shopId = this.getLoginInfo.shopId;
	},
	methods: {
		...mapActions(['setUserShopAll']),
		confirmDetail(val){
			if (val.index === 0) {
				this.cancelShowDetail();
			} else {
				this.cancelShowDetail();
			}
		},
		cancelShowDetail(){
			this.showDetailPop = false
		},
		selectShopFn(val){
			this.params.shopId = val.id;
			this.init();
		},
		getDetail(item){
			this.detailItem = item
			this.showDetailPop = true
		},
		selectDateFn(val) {
			this.params = {...this.params,...val}
			this.init();			
		},
		async init() {
			this.getIncomeList();
		},
		getIncomeList() {
			let that = this
			uni.showLoading()
			getStatKdProfile(this.params).then(res => {
				uni.hideLoading()
				that.profile = res.data.list
				that.totalIncome = res.data.totalIncome
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	background: white;
	padding-top:20upx;
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-bar {
		position: absolute;
		left: 0;
		display: flex;
		width: 100%;
		top:20upx;
		z-index: 20;
		.bar{
			width: 50%;
			height: 100%;
			text-align: center;
			&:nth-child(1){
				border-right: 1upx solid #eeeeec;
			}
		}
	}
	.main-view {
		margin-top: 60upx;
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
		}
		.act-income{
			margin-left:60upx;
			margin-top:30upx;
			font-size:30upx;
			color:rgb(92, 91, 91);
		}
		.ex-info {
			padding: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.ex-table {
			::v-deep.icon-info {
				color: #333333;
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>