H5_QiCaiYao/page_salesman_reportForm/businessDetails/businessDetails.vue

<template>
	<view class="businessDetails">
		<u-navbar title="经营月报" :autoBack="true" leftIconSize="0" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
			<!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
		</u-navbar>
		
			<view class="time" @click="show=true">
				<view>{{day_time}}</view>
			</view>
			 <u-datetime-picker
			                :show="show"
			                v-model="value1"
			                mode="date"
							@cancel='show=false'
							@confirm='confirm'
			        ></u-datetime-picker>
		
		<u-row gutter="16" style="flex-wrap: wrap;">
			<u-col span="4" v-for="(item,index) in list" :key="index">
				<div class="statistics-item">
					<div>{{item.title}}</div>
					<div class="value">{{item.num}}</div>
					<div class="tips" v-if="item.mark">({{item.mark}})</div>
					<div class="value">
						{{item.percentage}}
						<div class="percentage" v-if="item.type==0">{{item.rate | filterCount}}<image :src="$util.img('/upload/weapp/pageSalesman/customer/ic_dash.png')" mode="widthFix"></div>
						<div class="percentage" v-if="item.type==1">{{item.rate | filterCount}}<image :src="$util.img('/upload/weapp/pageSalesman/reportForm/ss.png')" mode="widthFix"></div>
						<div class="percentage" v-if="item.type==2">{{item.rate | filterCount}}<image :src="$util.img('/upload/weapp/pageSalesman/reportForm/xj.png')" mode="widthFix"></div>
					</div>
				</div>
			</u-col>
		</u-row>
		
		
		<!-- <div class="row">
			<div>
				<div>优惠券折扣</div>
				<div class="value">2000.00</div>
			</div>
			<div class="line"></div>
			<div>
				<div>特批优惠</div>
				<div class="value">2000.00</div>
			</div>
		</div>
		<div class="row">
			<div>
				<div>运费</div>
				<div class="value">2000.00</div>
			</div>
			<div class="line"></div>
			<div>
				<div>税费</div>
				<div class="value">2000.00</div>
			</div>
		</div> -->
		<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>
	</view>
</template>

<script>
	import selectPopup from "../components/selectPopup.vue"
	export default {
		components:{
			selectPopup
		},
		data() {
			return {
				chilData:'经营月报',
				show: false,
				day_time:'',
				value1: Number(new Date()),
				list: []
			};
		},
		onLoad(e) {
			uni.$on('repla',(data)=>{
				// console.log(data,'月报');
				uni.$off('repla')
				this.day_time=data
				this.$api.sendRequest({
					url:'/api/salasmanstat/monthStatDetail',
					data:{
						month_time:data
					},
					success:res=>{
						this.list=res.data
						console.log(res.data,'经营月报详情');
					}
				})
				
			})
		},
		onShow() {
			// let timestamp = Date.parse(new Date());
			// this.day_time=this.times(timestamp)
			
		},
		methods:{
			confirm(value){
				console.log(value);
				// console.log(timesfm(value));
				console.log(this.times(value.value));
				this.day_time=this.times(value.value)
				this.$api.sendRequest({
					url:'/api/salasmanstat/todayStat',
					data:{
						day_time:this.day_time
					},
					success:res=>{
						this.list=res.data
						console.log(res.data,'经营月报详情');
					}
				})
				this.show=false
			},
			//时间转换
			times(num){
				let now=new Date(Number(num))
				let n=now.getFullYear()
				let y=now.getMonth()+1
				let r =now.getDate();
				return n+'-'+y+'-'+r
			}
		},
		filters:{
			filterCount(num){
				let a=num.substr(0,num.length-1)
				let b=Math.round(a)
				return b+'%'
			},
			
		}
	}
</script>

<style lang="scss">
	.businessDetails {  
		padding: 32rpx;
		.row{
			display: flex;
			align-items: center;
			justify-content:space-evenly;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 0;
			margin-bottom: 32rpx;
			text-align: center;
			.line{
				width: 2rpx;
				height: 64rpx;
				background: #D8D8D8;
			}
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			.value{
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #333333;
			}
		}
		.time {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 16rpx;
			// margin-top: 100rpx;
		}

		.statistics-item {
			background-color: #fff;
			padding: 28rpx 0;
			border-radius: 16rpx;
			text-align: center;
			margin-bottom: 32rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;

			.tips {
				margin-top: 16rpx;
			}

			.value {
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
</style>