H5_QiCaiYao/page_salesman_reportForm/monthlymagazine/monthlymagazine.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="page_salesman_reportForm">

		<z-paging ref="paging" v-model="list" @query="queryList">
			<template slot="top">
				<u-navbar title="经营月报" :autoBack="true" leftIconSize="0" placeholder>
					<u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon>
				</u-navbar>
			</template>
		<div class="box">
			<div class="statistics">
				<div class="time" @click="show=true">2022年 <u-icon name="arrow-down" color="#333333" size="14"></u-icon>
				</div>
				<u-row gutter="16" style="flex-wrap: wrap;">
					<u-col span="6" v-for="(item,index) in statisticsList" :key="index">
						<div class="statistics-item">
							<div class="label">
								<span></span>
								{{item.label}}
							</div>
							<div class="value">{{item.value}}</div>
						</div>
					</u-col>
					<div class="df jcsb Numberoforders" style="width: 100%;">
						<div>订单笔数</div>
						<div>订单金额&emsp;(元)</div>
					</div>
				</u-row>
			</div>

			<div class="chart">
				<lineChart ref="lineChart"></lineChart>
			</div>
		</div>
		<div class="list">
			<div class="list-head">
				<div>日期</div>
				<div>
					<div>订单金额</div>
					<div>订单笔数</div>
				</div>
				<div>
					<div>退货金额</div>
					<div>退货笔数</div>
				</div>
			</div>
			<div class="list-item" v-for="(item,index) in 6" :key="index" @click="cellClick()">
				<div>{{index>=10?index+1:`0${index+1}`}}日</div>
				<div>
					<div>654.34</div>
					<div class="value">50</div>
				</div>
				<div style="display: flex;">
					<div>
						<div>654.34</div>
						<div class="value">50</div>
					</div>


					<u-icon name="arrow-right" color="#999" size="14" style="margin-left: 12rpx;"></u-icon>
				</div>
			</div>
		</div>

		<tabbar :tabIndex="1"></tabbar>
		<u-datetime-picker :show="show" @close="show=false" v-model="time" mode="year-month" confirmColor="#21BBF3" closeOnClickOverlay></u-datetime-picker>
		</z-paging>
		<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>
		<tabbar :tabIndex="1"></tabbar>

	</view>
</template>

<script>
	import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
	import lineChart from "../components/lineChart.vue"
	import selectPopup from "../components/selectPopup.vue"
	export default {
		components: {
			tabbar,
			lineChart,selectPopup
		},
		data() {
			return {
				time:'',
				chilData:'经营月报',
				show:false,
				statisticsList: [{
						label: '订单笔数',
						value: 5829
					},
					{
						label: '订单金额',
						value: 726382.00
					},
					{
						label: '退货单数',
						value: 9527
					},
					{
						label: '退货金额',
						value: 726382.00
					},
				],
				list:[1]
			};
		},
		methods:{
		queryList(pageNo, pageSize) {
		this.$refs.paging.complete(this.list);

		},
			cellClick(){
				uni.navigateTo({
					url:'../Monthlyreportdetails/Monthlyreportdetails'
				})
			}
		}
	}
</script>

<style lang="scss">
	.page_salesman_reportForm {
		padding: 32rpx;
		.list{
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 32rpx;
			padding-bottom: 1rpx;
			.list-head{
				padding: 32rpx 48rpx 32rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #999999;

			}
			.list-item{
				margin-bottom: 24rpx;
				padding:0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				color: #333;
				.value{
					color: #999999;
				}
			}
		}
		.box {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx 32rpx;
		}

		.statistics {
			margin-top: 80rpx;
			.Numberoforders div:nth-child(1){
				margin-left: 30rpx;
				margin-top: 40rpx;
				// width: 112px;
				// height: 40px;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			.Numberoforders div:nth-child(2){
				// width: 196px;
				// height: 40px;
					margin-top: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin-right: 12rpx;
			}

			.time {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 12rpx;
			}

			.statistics-item {
				display: flex;
				align-items: center;

				.label {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
					display: flex;
					align-items: center;

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background: #20BBF3;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}

				.value {
					margin-left: 24rpx;
					font-size: 32rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
</style>