185 lines
4.2 KiB
Vue
185 lines
4.2 KiB
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() + 1;
|
||
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>
|