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: 146rpx;;">
						<tpx-select mode="drop" v-model:value="searchParam.queryDateType" :list="dateRangeList" 
							v-model:text="searchParam._queryDateTypeTitle" @onChange="handleDateTypeChange"
						>
							<u-button :hairline="false" shape="circle" size="mini" custom-style="border-radius: 23rpx;font-size: 26rpx;height: 50rpx;">
								<u-row justify="between" custom-style="width: 100%;">
									<view :style="'padding: 0 10rpx;white-space: nowrap;'">
										{{searchParam._queryDateTypeTitle || '统计'}}
									</view>
									<u-icon :name="'arrow-down-fill'" 
										color="#666" size="18" custom-style="margin-top: 2rpx;"
									></u-icon>
								</u-row>
							</u-button>
						</tpx-select>
					
					</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"
	export default {
		props: {
		},
		data() {
			return {
				...JSON.parse(JSON.stringify({ dateRangeList })),
				searchParam: {
					queryDateType: dateRangeList[0].val,
					_queryDateTypeTitle: dateRangeList[0].title,
				},
				queryOption: {
				},
				staticInfo: {},
				statList: [],
			}
		},
		onShareAppMessage() {
			return {
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		methods: {
			async initData(opt = {}){
				let params = {
					params:{
						...this.searchParam,
						...opt,
					},
					_loading: true,
				}
				const statRes = await apiService.getMyBizStatInfo(params)
				this.staticInfo = statRes.data || {}
				
				const statListRes = await apiService.getMyBizStatList(params)
				this.statList = statListRes.data || []
			},
			handleDateTypeChange(val){
				this.initData({
					queryDateType: val
				})
			}
		}
	}
</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>