emis-app/pages/user/bunsStatic.vue

<template>
	<tpx-page>
		<view class="">
			<view class="sta-item">
				<u-row justify="between">
					<text class="font-30 font-weight">业务统计</text>
					<view style="width: 460rpx;;">
						<tpx-date-input v-model:value="searchParam._date" @change="handleReloadData" placeholder="请选择时间"
							:toolsRangesList="dateRangeList"
						></tpx-date-input>
					</view>
				</u-row>
				
				<u-row custom-style="margin: 20rpx 0 0 0;">
					<u-col span="3" :custom-style="`border-right: 2rpx solid  #E8E8E8;`">
						<u-text :text="staticInfo.totalNum" bold="true" size="32" align="center" color="#B12D29"></u-text>
						<u-text margin="10rpx 0 0 0" text="总票数" size="28" color="#999" align="center"></u-text>
					</u-col>
					<u-col span="3" :custom-style="`border-right: 2rpx solid  #E8E8E8;`">
						<u-text :text="staticInfo.totalParcelQty" bold="true" size="32" align="center" color="#B12D29"></u-text>
						<u-text margin="10rpx 0 0 0" text="总件数" size="28" color="#999" align="center"></u-text>
					</u-col>
					<u-col span="3" :custom-style="`border-right: 2rpx solid  #E8E8E8;`">
						<u-text :text="staticInfo.totalBillWeight" bold="true" size="32" align="center" color="#B12D29"></u-text>
						<u-text margin="10rpx 0 0 0" text="总重量" size="28" color="#999" align="center"></u-text>
					</u-col>
					<u-col span="3">
						<u-text :text="staticInfo.totalVolume" bold="true" size="32" align="center" color="#B12D29"></u-text>
						<u-text margin="10rpx 0 0 0" text="总体积" size="28" color="#999" align="center"></u-text>
					</u-col>
				</u-row>
			</view>
			
			<view class="pl-30 pr-30 pt-10 pb-10">
				<view v-for="(item) in statList" class="sta-item radius-20">
					<text class="font-30 font-weight">{{item.countryName}}</text>
					
					<u-row custom-style="margin: 20rpx 0 0 0;">
						<u-col span="4" :custom-style="`border-right: 2rpx solid  #E8E8E8;`">
							<view class="text-center">
								<span class="clr-prm font-weight font-28">{{item.kdTotalNum}}</span>
								<span class="clr-sub pl-10">票</span>
							</view>
							<view class="mt-10 text-center">
								<span class="clr-prm font-weight font-28">{{item.kdTotalBillWeight}}</span>
								<span class="clr-sub pl-10">KG</span>
							</view>
							<view class="mt-10 text-center">快递</view>
						</u-col>
						<u-col span="4" :custom-style="`border-right: 2rpx solid  #E8E8E8;`">
							<view class="text-center">
								<span class="clr-prm font-weight font-28">{{item.kyTotalNum}}</span>
								<span class="clr-sub pl-10">票</span>
							</view>
							<view class="mt-10 text-center">
								<span class="clr-prm font-weight font-28">{{item.kyTotalBillWeight}}</span>
								<span class="clr-sub pl-10">KG</span>
							</view>
							<view class="mt-10 text-center">空运</view>
						</u-col>
						<u-col span="4">
							<view class="text-center">
								<span class="clr-prm font-weight font-28">{{item.wlTotalNum}}</span>
								<span class="clr-sub pl-10">票</span>
							</view>
							<view class="mt-10 text-center">
								<span class="clr-prm font-weight font-28">{{item.wlTotalBillWeight}}</span>
								<span class="clr-sub pl-10">KG</span>
							</view>
							<view class="mt-10 text-center">物流</view>
						</u-col>
					</u-row>
				</view>
				
				<tpx-empty v-if="statList.length == 0"></tpx-empty>
				
			</view>
			
		</view>
	</tpx-page>
	
</template>
<script>
	import { dateRangeList } from "@/common/enum"
	import * as apiService from "@/common/api"
	import dayjs from "dayjs"
	export default {
		props: {
		},
		data() {
			return {
				dateRangeList,
				searchParam: {
					_date: [
						`${dayjs().format('YYYY-MM-DD')} 00:00:00`,
						`${dayjs().format('YYYY-MM-DD')} 23:59:59`
					],
				},
				queryOption: {
				},
				staticInfo: {},
				statList: [],
			}
		},
		onShareAppMessage() {
			return {
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		methods: {
			transSearchPm(param) {
				let cpParam = JSON.parse(JSON.stringify(param))
				cpParam.beginDate = cpParam?._date?.[0]
				cpParam.endDate = cpParam?._date?.[1]
				return cpParam
			},
			async initData(opt = {}){
				const cpParam = this.transSearchPm(this.searchParam)
				let params = {
					params:{
						...cpParam,
						...opt,
					},
					_loading: true,
				}
				const statRes = await apiService.getMyBizStatInfo(params)
				this.staticInfo = statRes.data || {}
				
				const statListRes = await apiService.getMyBizStatList(params)
				this.statList = statListRes.data || []
			},
			handleReloadData(){
				setTimeout(()=> {
					this.initData()
				}, 400)
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	page{
		height: 100% !important;
	}
</style>
<style scoped lang="scss">
	.sta-item{
		margin-bottom: 20rpx;
		padding: 30rpx;
		background-color: #fff;
	}
</style>