parking_pda/pages/performance/performance.vue

<template>
	<view>
		<view class="info-wrap">
			<u-navbar
			 title="我的业绩" 
			 title-color="#fff" 
			 :custom-back="customBack" 
			 :border-bottom="false" 
			 back-icon-color="#CCE8FF" 
			 :background="{background: 'none' }"></u-navbar>
			<view class="info">
				<view class="payee-no">工号：{{vuexUser.payeeNo}}</view>
				<!-- <view class="current-time">{{$u.timeFormat(currentTime, 'yyyy年mm月dd日 hh:MM:ss')}}</view> -->
			</view>
		</view>
		<!-- <view class="calendar-wrap">
			<u-calendar v-model="calendarShow" mode="date" @change="calendarChange"></u-calendar>
		</view> -->
		<view class="statistics">
			<view class="statistics-title">实收数（聚合）</view>
			<view class="statistics-total">
				<span class="number">{{resdata.actualAmount||'0'}}</span>
				元
			</view>
			<view class="statistics-item u-flex">
				<view class="statistics-item-cell">
					<view class="til">入场数</view>
					<view class="con">{{resdata.parkInNum||'0'}}</view>
				</view>
				<view class="statistics-item-cell">
					<view class="til">出场数</view>
					<view class="con">{{resdata.parkLeaveNum||'0'}}</view>
				</view>
				<view class="statistics-item-cell">
					<view class="til">应收数</view>
					<view class="con">{{resdata.mustAmount||'0'}}</view>
				</view>
			</view>
		</view>
		<view class="time" @click="selectTime">
			{{pickerYear}}年{{pickerMonth}}月<span class="dd">{{pickerDay}}</span>日
			<u-icon name="arrow-down-fill" color="#3D3D3D" size="28"></u-icon>
		</view>
		
		<u-picker v-model="pickerShow" mode="time" :params="pickerParams" @confirm="confirmTime"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				vuexUser:'',
				currentTime: new Date().getTime(),
				calendarShow:true,
				pickerShow:false,
				pickerParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				pickerYear:'',
				pickerMonth:'',
				pickerDay:'',
				achievementData:'',
				resdata:[]
				
			}
		},
		onLoad(){
			this.vuexUser = this.$store.state.vuex_user;
			let date = new Date().getTime();
			this.pickerYear = this.$u.timeFormat(date, 'yyyy');
			this.pickerMonth = this.$u.timeFormat(date, 'mm');
			this.pickerDay = this.$u.timeFormat(date, 'dd');
			this.handleAchievement();
		},
		onShow(){
			
		},
		methods:{
			customBack(){
				this.$u.route({
					// type:'switchTab',
					url: 'pages/index/index'
				});
			},
			calendarChange(e){
				console.log('e',e);
				this.calendarShow = true;
			},
			selectTime(){
				this.pickerShow = true;
			},
			confirmTime(e){
				console.log('confirmTime e',e);
				this.pickerYear = e.year;
				this.pickerMonth = e.month;
				this.pickerDay = e.day;
				this.handleAchievement();
			},
			handleAchievement(){
				this.$u.api.achievement({startDate:this.theTime,endDate:this.theTime})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.resdata = res.data;
					console.log('achievement',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err,
						type: 'error',
					});
					console.log('achievement ',err)
				});
			}
			
		},
		computed:{
			theTime(){
				return this.pickerYear+this.pickerMonth+this.pickerDay
			}
		}
	}
</script>

<style lang="scss">
	@import  './performance.scss'
</style>