auto commit

pages/performance/performance.scss

@@ -4,12 +4,13 @@ page{background-color: #F4F4F4;}
 }
 .info{
 	padding: 20rpx 40rpx 217rpx;
-	
 	.payee-no{
-		font-size: 40rpx;
+		font-size: 50rpx;
 		font-weight: 500;
 		color: #FFFFFF;
-		line-height: 56rpx;
+		line-height: 70rpx;
+		letter-spacing: 2rpx;
+		text-align: center;
 	}
 	.current-time{
 		font-size: 24rpx;
@@ -19,35 +20,35 @@ page{background-color: #F4F4F4;}
 	}
 }
 
-.calendar-wrap{
-	position: relative;
-	padding: 0 40rpx;
-	margin-top: -185rpx;
-	.u-drawer{
-		position: static;
-	}
-	/deep/ .u-mask{
-		display: none;
-	}
-	/deep/ .u-drawer-content{
-		position: static;
-		border-radius:20rpx!important;
-	}
-	/deep/ .u-calendar__bottom{
-		display: none; 
-	}
-	/deep/ .u-close,
-	/deep/ .u-calendar__header{
-		display: none;
-	}
-}
+// .calendar-wrap{
+// 	position: relative;
+// 	padding: 0 40rpx;
+// 	margin-top: -185rpx;
+// 	.u-drawer{
+// 		position: static;
+// 	}
+// 	/deep/ .u-mask{
+// 		display: none;
+// 	}
+// 	/deep/ .u-drawer-content{
+// 		position: static;
+// 		border-radius:20rpx!important;
+// 	}
+// 	/deep/ .u-calendar__bottom{
+// 		display: none; 
+// 	}
+// 	/deep/ .u-close,
+// 	/deep/ .u-calendar__header{
+// 		display: none;
+// 	}
+// }
 
 .statistics{
 	background: #FFFFFF;
 	border-radius: 15rpx;
 	text-align: center;
 	padding: 40rpx 0 50rpx;
-	margin: 12rpx 40rpx 140rpx;
+	margin: -185rpx 40rpx 19rpx;
 	font-weight: 400;
 	.statistics-title{
 		font-size: 24rpx;
@@ -58,6 +59,7 @@ page{background-color: #F4F4F4;}
 		font-size: 26rpx;
 		color: #8E8E8E;
 		line-height: 37rpx;
+		margin-bottom: 16rpx;
 		.number{
 			font-size: 60rpx;
 			color: #3397FA;
@@ -67,5 +69,36 @@ page{background-color: #F4F4F4;}
 	}
 	.statistics-item-cell{
 		flex: 1;
+		.til{
+			font-size: 26rpx;
+			color: #8E8E8E;
+			line-height: 37rpx;
+		}
+		.con{
+			font-size: 30rpx;
+			color: #3397FA;
+			line-height: 42rpx;
+		}
+	}
+	.statistics-item-cell + .statistics-item-cell{
+		border-left: 1px solid rgba(151, 151, 151, .3);
+	}
+}
+
+.time{
+	margin: 20rpx 40rpx;
+	background: #FFFFFF;
+	box-shadow: 0px 10rpx 5rpx 0px rgba(0, 0, 0, 0.05);
+	border-radius: 15rpx;
+	height: 119rpx;
+	line-height: 119rpx;
+	text-align: center;
+	font-size: 30rpx;
+	color: #3D3D3D;
+	.dd{
+		color: #FA751D;
+	}
+	.u-icon{
+		margin-left: 10rpx;
 	}
 }

pages/performance/performance.vue

@@ -10,12 +10,12 @@
 			 :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 class="current-time">{{$u.timeFormat(currentTime, 'yyyy年mm月dd日 hh:MM:ss')}}</view> -->
 			</view>
 		</view>
-		<view class="calendar-wrap">
+		<!-- <view class="calendar-wrap">
 			<u-calendar v-model="calendarShow" mode="date" @change="calendarChange"></u-calendar>
-		</view>
+		</view> -->
 		<view class="statistics">
 			<view class="statistics-title">实收数（聚合）</view>
 			<view class="statistics-total">
@@ -37,6 +37,12 @@
 				</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>
 	</view>
 </template>
 
@@ -47,11 +53,27 @@
 				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:'',
 				
 			}
 		},
 		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');
 		},
 		onShow(){
 			
@@ -66,8 +88,22 @@
 			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;
 			}
 			
+		},
+		computed:{
+			theTime(){
+				return this.pickerYear+this.pickerMonth+this.pickerDay
+			}
 		}
 	}
 </script>