MP_XOIL_company_new/Financial/components/seniorPagePopup.vue

<template>
	<view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="seniorPagePopup_body">
				<view class="seniorPagePopup_header">
					<view @click="reset">重置</view>
					<view @click="close">确认</view>
				</view>
				<view class="seniorPagePopup_container" >
					<view class="seniorPagePopup_title">统计年月</view>
					<view class="seniorPagePopup_datetime">
						<uni-datetime-picker placeholder='请选择统计年月'  type="date"  v-model="single" @maskClick="maskClick" />
						<view class="seniorPagePopup_datetime_tip">
							注意：报告日为每月4日。<br/>
							4日及4日后，可查上个月报告数据，<br/>
							4日前，最多只能查询前个月数据。
						</view>
					</view>
					<view class="seniorPagePopup_footer">
						<view class="seniorPagePopup_title">向前统计滚动周期</view>
						<view class="seniorPagePopup_footer_select_container flex">
							<view @click="selectIndex=index" v-for="(item,index) in statypeList" :key='index' :class="selectIndex==index? 'seniorPagePopup_footer_select_item_slecct':'seniorPagePopup_footer_select_item '" class="flex jc ac">
							{{item.value}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离 
		},
		props:{
			isShow:{
				type:Boolean,
				default: false
			}
		},
		data() {
			return {
				statypeList:[
					{
						value:12
					},
					{
						value:6
					},
					{
						value:3
					}
				],
				show: true,
				single:'',
				selectIndex:0,
			}
		},
		created() {
			this.single = this.getNowFormatDate()
		},
		watch:{
			isShow(n,o){
				console.log(n);
				if(n){
					this.$refs.popup.open('bottom')
				}else{
					this.$refs.popup.close()
				}
			}
		},
		methods: {
			getNowFormatDate() {
			        var date = new Date();
			        var seperator1 = "-";
			        var year = date.getFullYear();
			        var month = date.getMonth() ;
			        var strDate = date.getDate();
			        if (month >= 1 && month <= 9) {
			            month = "0" + month;
			        }
			        if (strDate >= 0 && strDate <= 9) {
			            strDate = "0" + strDate;
			        }
			        var currentdate = year + seperator1 + month + seperator1 + strDate;
			        return currentdate;
			    },
			reset(){
				this.selectIndex = 0;
				this.single = this.getNowFormatDate();
				// this.$refs.popup.close()
			},
			close(){
				this.$refs.popup.close()
			},
			seniorPageCallBack(){
				return {
					statype:this.statypeList[this.selectIndex].value||'',
					queryDate:this.single||''
				}
			},
			maskClick(){},
			change(e) {
				if(!e.show){
					this.$emit('update:isShow', false)
				}
			}
		}
	}
</script>
<style>
	.seniorPagePopup_footer_select_item_slecct{
		background-color: #FF6700;
		height: 80rpx;
		width: 140rpx;
		border-radius: 10px;
		margin-right: 20rpx;
		color: #FFFFFF;
	}
	.jc{
		justify-content: center;
	}
	.ac{
		align-items: center;
	}
	.seniorPagePopup_footer_select_container{
		
	}
	.seniorPagePopup_footer_select_item:last-child{
		margin-right: 0rpx;
	}
	.seniorPagePopup_footer_select_item{	
		height: 80rpx;
		width: 140rpx;
		background: #F0F0F0;
		border-radius: 10px;
		margin-right: 20rpx;
	}
	.seniorPagePopup_container_footer{
		
	}
	.seniorPagePopup_datetime_tip{
		font-weight: 400;
		font-size: 28rpx;
		line-height: 32rpx;
		color: #BBBBBB;
		margin-top: 10rpx;
		margin: 26rpx 0 ;
	}
	.seniorPagePopup_title{
		margin-bottom: 20rpx;
		color: #FF6700;
		font-size: 32rpx;
	}
	.seniorPagePopup_container .uni-date-x{
		background: #F0F0F0 !important;
		border-radius: 10px !important;
	}
	.seniorPagePopup_container .uni-date-x--border{
		border: 0px !important;
	}
	.seniorPagePopup_container{
		padding: 34rpx 70rpx;
		box-sizing: border-box;
	}
	.seniorPagePopup_header{
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #FF6700;
	}
	.seniorPagePopup_header view:first-child{
		color: #BBBBBB;
	}
	.seniorPagePopup_body{
		width: 100vw;
		height: 580rpx;
		padding-bottom: env(safe-area-inset-bottom);
		padding: 30rpx 62rpx;
	}
</style>