H5_QiCaiYao/page_salesman_reportForm/Paymentcollection/Paymentcollection.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年01月 <u-icon name="arrow-down" color="#333333" size="14"></u-icon>
				</div>
				<view class="df aic jcsb">
					<div style="" 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>
					</div>
				</view>
				<view class="df status jcsb aic" >
					<div class="status-jine">回款金额</div>
					<div class="df">
						<div class="df aic square-box">
							<div class="square"></div>
							待回收
						</div>
						<div class="df aic squara-box">
							<div class="squara"></div>
							已确认回款
						</div>
					</div>
				</view>

			</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 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>



				</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 {
				chilData:'订单回款统计',
				time:'',
				show:false,
				statisticsList: [{
						label: '已确认回款',
						value: '￥50000'
					},
					{
						label: '待回收',
						value: '￥4839'
					},

				],
				list:[1]
			};
		},
		methods:{
			queryList(pageNo, pageSize) {
			this.$refs.paging.complete(this.list);

			},
			cellClick(){
				uni.navigateTo({
					url:'/page_salesman_reportForm/businessDetails/businessDetails'
				})
			}
		}
	}
</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;
				background: #F6F4F6;
			}
			.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;
			.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;
				}

			}
			.status{
				margin-top: 40rpx;
				.status-jine{
					// width: 112px;
					// height: 40px;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
				.square-box{

					.square{
						width: 16rpx;
						height: 16rpx;
						background: #73A0FA;
						border-radius: 4rpx;
						margin-right: 12rpx;
					}
				}

				.squara-box{
					// width: 120px;
					// height: 34px;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
					.squara{
						width: 16rpx;
						height: 16rpx;
						background: #68BBC4;
						border-radius: 4rpx;
						margin-right: 12rpx;
						margin-left: 56rpx;
					}
				}

			}
		}
	}
</style>