<template>
<div class="linesMigrate">
<div class="conditionDiv">
<div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart">
<div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div>
<div class="dateValueDiv" v-if="!allDateStart" :style="{ fontSize:'0.72rem' }">{{dateFormatterStart}}</div>
</div>
<div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChoose">
<div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div>
<div class="dateValueDiv" v-if="!allDate" :style="{ fontSize:'0.72rem' }">{{dateFormatter}}</div>
</div>
</div>
<!-- 选开始时间 -->
<van-popup
v-model="showDateChooseStart"
position="bottom"
:close-on-click-overlay="false"
:style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
:overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
<div class="popupDate" :style="bgDateImgStyle">
<img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePopStart" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
<van-datetime-picker
:show-toolbar="false"
v-model="dateChooseStart"
type="date"
:min-date="minDateStart"
:max-date="maxDateStart"
/>
<div class="chooseTodayDiv" @click="chooseDateStart">选择最近一周</div>
</div>
</van-popup>
<!-- 选结束时间 最近一天 -->
<van-popup
v-model="showDateChoose"
position="bottom"
:close-on-click-overlay="false"
:style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
:overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
<div class="popupDate" :style="bgDateImgStyle">
<img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePop" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
<van-datetime-picker
:show-toolbar="false"
v-model="dateChoose"
type="date"
:min-date="minDate"
:max-date="maxDate"
/>
<div class="chooseTodayDiv" @click="chooseDateToday">选择最新一天</div>
</div>
</van-popup>
<Loading :isShow="loadingState" />
</div>
</template>
<script>
import Loading from '../../components/common/loading.vue';// 引入公共的loading组件
import Vue from 'vue';
import { Popup } from 'vant';
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker);
Vue.use(Popup);
export default {
name: 'lines',
mounted() {
// 获取数据
this.loadingState=false;
this.initRequest();
},
data() {
return {
// 时间选择背景样式数据
conditonStyle2: {
background: "url(" + require("../../assets/img/migrate2.png") + ") no-repeat center",
backgroundSize: "contain"
},
// 日期组件弹出层展示与否的标志 --开始时间
showDateChooseStart:false,
// 日期组件弹出层展示与否的标志
showDateChoose:false,
// 弹出层背景图片
bgDateImgStyle: {
background: "url(" + require("../../assets/img/migratePopBackDate.png") + ") no-repeat",
backgroundSize: "contain"
},
// 标准化未经处理的时间格式
dateChoose: new Date(),
dateChooseStart: new Date(),
// 处理过格式的日期数据
dateFormatter:"日期",
allDate:true,
dateFormatterStart:"日期",
allDateStart:true,
minDateStart: new Date(2019,8,1), // 开始时间最小2019/9/01
maxDateStart: new Date(), // 开始时间最大 当前时间
minDate: new Date(), //最小时间必须 》开始的最大时间maxDateStart
maxDate: new Date(), // 开始时间最大 当前时间
// 控制加载中状态的标志
loadingState:true
};
},
methods: {
// 初始的请求方法
async initRequest(){
this.chooseDateToday();
this.chooseDateStart();
},
// 展示日期弹出层--开始时间
showPopupDateChooseStart() {
this.showDateChooseStart = true;
},
// 展示日期弹出层 --结束时间
showPopupDateChoose() {
// 设置结束时间的最小值
this.minDate = this.dateChooseStart;
this.showDateChoose = true;
},
// 关闭日期弹出层 ---开始时间
closeDatePopStart(){
this.showDateChooseStart = false;
this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
// 设置结束时间的最小值
this.minDate = this.dateChooseStart;
this.allDateStart=false;
// this.loadingState=true;
},
// 关闭日期弹出层 --结束时间
closeDatePop(){
this.showDateChoose = false;
this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
// 设置开始时间的最大值
this.maxDateStart = this.dateChoose;
this.allDate=false;
// this.loadingState=true;
},
// 日期格式转换函数
dateTransfor(date,format){
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(format)) {
format=format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(let k in o) {
if(new RegExp("("+ k +")").test(format)){
format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return format;
},
// 选择时间函数 -- 七天前
chooseDateStart(){
let yesToday=new Date();
yesToday.setDate(yesToday.getDate()-7);
this.dateChooseStart=yesToday;
this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
},
// 选择时间函数 -- 今日
chooseDateToday(){
this.dateChoose= new Date();
this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
},
// 选择时间函数 i=0今日
chooseDate(i){
let yesToday=new Date();
yesToday.setDate(yesToday.getDate()-i);
return this.dateTransfor(yesToday,"yyyy-MM-dd");
},
},
components: {
Loading
}
};
</script>
<style scoped>
/*覆盖原有弹出层样式*/
.van-popup {
position: absolute;
background: transparent;
/*bottom: 3.01rem;*/
}
/*覆盖日期组件原有样式*/
.van-picker{
position: relative;
background-color: #fff;
user-select: none;
width: 100%;
}
/*筛选条件们的div样式*/
.conditionDiv{
display: flex;
justify-content: center;
width: 100%;
height: 3.7%;
margin-top: 4%;
}
/*单个筛选条件的样式*/
.singleCondition{
width: 27%;
margin-left: 2%;
margin-right: 2%;
/*border: 1px solid #451da4;*/
height: 100%;
/*padding-right: 5%;*/
color: #fff;
display: flex;
justify-content: center;
align-items: center;
/*flex-direction: column;*/
font-size: 0.72rem;
}
/*日期组件的div，由于其背景用icon而非整个背景图，因此样式上不同*/
.singleDateDiv{
width: 23%;
margin-left: 2%;
margin-right: 2%;
/*border: 1px solid #451da4;*/
height: 100%;
color: #fff;
padding-right: 5%;
display: flex;
justify-content: flex-start;
}
/*日期的值位置样式*/
.dateValueDiv{
display: flex;
justify-content: center;
flex-direction: column;
font-size: 0.72rem;
width: 82%;
}
/*日期弹出层中选择今天div样式*/
.chooseTodayDiv{
box-sizing: border-box;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
color: red;
height: 3rem;
width: 90%;
background: #fff;
border-top: 1px solid lightgrey;
font-size: 0.875rem;
}
/*日期弹窗*/
.popupDate {
border-radius: 2px;
background: #fff;
height: 100%;
width: 90%;
margin: 0 auto;
}
</style>
<style>
/*覆盖原有的选择器样式*/
.van-picker-column{
font-size: 0.9rem;
}
</style>
