|
@@ -1,266 +1,323 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
- <u-popup ref="popup" class="popup" :mask="true" mode="bottom" >
|
|
|
- <view >
|
|
|
- <view class="popup-title ">
|
|
|
- <text >自定义时间</text>
|
|
|
- <text @click="$refs.popup.close()">×</text>
|
|
|
- </view>
|
|
|
- <view style="padding: 15px">
|
|
|
- <view class="popup-data dis j-s">
|
|
|
- <text :class="startShow? 'active' :''" @click="startClick()">{{ interviewStartTime||'开始时间' }}</text>至
|
|
|
- <text :class="endShow? 'active' :''" @click="endClick()">{{ interviewEndTime || '结束时间' }}</text>
|
|
|
- </view>
|
|
|
- <picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
|
|
|
- class="picker-view">
|
|
|
- <picker-view-column>
|
|
|
- <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
|
|
- </picker-view-column>
|
|
|
- <picker-view-column>
|
|
|
- <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
|
|
- </picker-view-column>
|
|
|
- <picker-view-column>
|
|
|
- <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
|
|
- </picker-view-column>
|
|
|
- </picker-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="popup-footer dis j-s">
|
|
|
- <text @click.stop="reset" >重置</text>
|
|
|
- <text @click.stop="confirm" >确定</text>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <u-popup ref="popup" class="popup" :mask="true" mode="bottom" border-radius="20">
|
|
|
+ <view>
|
|
|
+ <view class="popup-title ">
|
|
|
+ <text>时间筛选</text>
|
|
|
+ <text @click="$refs.popup.close()">×</text>
|
|
|
+ </view>
|
|
|
+ <view class="quickOptions dis f-c ">
|
|
|
+ <text class="title">快捷选择</text>
|
|
|
+ <view class=" dis a-c j-start">
|
|
|
+ <view class="tab" :class="{tabactive:OptionsTabIndex==index}"
|
|
|
+ v-for="(item,index) in quickOptions" :key="index" @click="OptionsTabSelect(index)">
|
|
|
+ <text>{{item}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text style="margin-left: 42rpx;font-size: 30rpx;color: #333;">自定义时间</text>
|
|
|
+ <view style="padding:20rpx 42rpx">
|
|
|
+ <view class="popup-data dis j-s">
|
|
|
+ <text :class="startShow? 'active' :''"
|
|
|
+ @click="startClick()">{{ interviewStartTime||'开始时间' }}</text>至
|
|
|
+ <text :class="endShow? 'active' :''" @click="endClick()">{{ interviewEndTime || '结束时间' }}</text>
|
|
|
+ </view>
|
|
|
+ <picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
|
|
|
+ class="picker-view">
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item dis a-c j-c " v-for="(item,index) in years" :key="index">{{item}}年</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item dis a-c j-c " v-for="(item,index) in months" :key="index">{{item}}月</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item dis a-c j-c " v-for="(item,index) in days" :key="index">{{item}}日</view>
|
|
|
+ </picker-view-column>
|
|
|
+ </picker-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-footer dis j-s">
|
|
|
+ <text @click.stop="reset">重置</text>
|
|
|
+ <text @click.stop="confirm">确定</text>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- startShow: false,
|
|
|
- endShow: false,
|
|
|
- interviewStartTime:'',
|
|
|
- interviewEndTime:'',
|
|
|
- years: [],
|
|
|
- year: null,
|
|
|
- months: [],
|
|
|
- month: null,
|
|
|
- days: [],
|
|
|
- day: null,
|
|
|
- hours: [],
|
|
|
- hour: null,
|
|
|
- minutes: [],
|
|
|
- minute: null,
|
|
|
- value: [],
|
|
|
- indicatorStyle: `height: 50px;color:#2D6DFF `,
|
|
|
- visible:false
|
|
|
- }
|
|
|
- },
|
|
|
- props: {
|
|
|
- // visible: {
|
|
|
- // type: Boolean,
|
|
|
- // default: true
|
|
|
- // },
|
|
|
-
|
|
|
- // interviewTime: {
|
|
|
- // type: String,
|
|
|
- // default() {
|
|
|
- // return '';
|
|
|
- // },
|
|
|
- // }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // visible: {
|
|
|
- // handler(newValue, oldValue) {
|
|
|
- // if (newValue) {
|
|
|
- // if (this.interviewTime) {
|
|
|
- // this.init(this.interviewTime);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // immediate: false,
|
|
|
- // deep: true
|
|
|
- // }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- open(){
|
|
|
- this.$refs.popup.open()
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ quickOptions: ["今日", "本月", "本年"], //快捷选项
|
|
|
+ OptionsTabIndex: null, //下标
|
|
|
+ startShow: false,
|
|
|
+ endShow: false,
|
|
|
+ interviewStartTime: '',
|
|
|
+ interviewEndTime: '',
|
|
|
+ years: [],
|
|
|
+ year: null,
|
|
|
+ months: [],
|
|
|
+ month: null,
|
|
|
+ days: [],
|
|
|
+ day: null,
|
|
|
+ hours: [],
|
|
|
+ hour: null,
|
|
|
+ minutes: [],
|
|
|
+ minute: null,
|
|
|
+ value: [],
|
|
|
+ indicatorStyle: `height: 50px;color:#2D6DFF `,
|
|
|
+ visible: false
|
|
|
+ }
|
|
|
},
|
|
|
- bindChange: function (e) {
|
|
|
- const val = e.detail.value
|
|
|
- let year = this.years[val[0]]
|
|
|
- let isDay = 30, days = [];
|
|
|
- if (val[1]+1 == 2) {
|
|
|
- if((val[0]%4==0 && year%100!=0)||(year%400==0)){
|
|
|
- console.log('闰年')
|
|
|
- isDay = 29;
|
|
|
- }else {
|
|
|
- isDay = 28;
|
|
|
- console.log('平年')
|
|
|
- }
|
|
|
- } else if ([1,3,5,7,8,10,12].includes(val[1]+1)) {
|
|
|
- isDay = 31;
|
|
|
- } else {
|
|
|
- isDay = 30;
|
|
|
- }
|
|
|
-
|
|
|
- for (let i = 1; i <= isDay; i++) {
|
|
|
- days.push(i)
|
|
|
- }
|
|
|
- this.days = days;
|
|
|
- this.year = this.years[val[0]]
|
|
|
- this.month = this.months[val[1]]
|
|
|
- this.day = this.days[val[2]]
|
|
|
- if(this.startShow){
|
|
|
- this.interviewStartTime=this.year+'-'+this.month+'-'+this.day
|
|
|
- }
|
|
|
- if(this.endShow){
|
|
|
- this.interviewEndTime=this.year+'-'+this.month+'-'+this.day
|
|
|
- }
|
|
|
- },
|
|
|
- init() {
|
|
|
- const date = new Date();
|
|
|
- const years = []
|
|
|
- const year = date.getFullYear()
|
|
|
- const months = []
|
|
|
- const month = date.getMonth() + 1
|
|
|
- const days = []
|
|
|
- const day = date.getDate()
|
|
|
-
|
|
|
- let isDay = 30;
|
|
|
- if (month == 2) {
|
|
|
- if((year%4==0 && year%100!=0)||(year%400==0)){
|
|
|
- isDay = 29;
|
|
|
- }else {
|
|
|
- isDay = 28;
|
|
|
- }
|
|
|
- } else if ([1,3,5,7,8,10,12].includes(month)) {
|
|
|
- isDay = 31;
|
|
|
- } else {
|
|
|
- isDay = 30;
|
|
|
- }
|
|
|
-
|
|
|
- for (let i = date.getFullYear(); i >= 1900; i--) {
|
|
|
- years.push(i)
|
|
|
- }
|
|
|
- for (let i = 1; i <= 12; i++) {
|
|
|
- months.push(i)
|
|
|
- }
|
|
|
- for (let i = 1; i <= isDay; i++) {
|
|
|
- days.push(i)
|
|
|
- }
|
|
|
-
|
|
|
- this.years = years
|
|
|
- this.year = year
|
|
|
- this.months = months
|
|
|
- this.month = month
|
|
|
- this.days = days
|
|
|
- this.day = day
|
|
|
- this.value = [0, month-1, day-1]
|
|
|
- },
|
|
|
- // 补0
|
|
|
- padZeroStr(originStr){
|
|
|
- if(+originStr < 10){
|
|
|
- return String(originStr).padStart(2,'0')
|
|
|
- }
|
|
|
- return originStr + ''
|
|
|
- },
|
|
|
- close(){
|
|
|
- this.$emit('update:visible', false);
|
|
|
- },
|
|
|
- reset(){
|
|
|
- this.$emit('update:visible', false);
|
|
|
- this.interviewStartTime=''
|
|
|
- this.interviewEndTime =''
|
|
|
- },
|
|
|
- startClick(){
|
|
|
- // this.interviewStartTime=''
|
|
|
- console.log(this.year ,this.month );
|
|
|
- this.interviewStartTime = this.year+'-'+this.month+'-'+this.day
|
|
|
- this.visible=true
|
|
|
- this.startShow = true
|
|
|
- this.endShow = false
|
|
|
- },
|
|
|
- endClick(){
|
|
|
- this.interviewEndTime= this.year+'-'+this.month+'-'+this.day
|
|
|
- this.visible=true
|
|
|
- this.startShow = false
|
|
|
- this.endShow = true
|
|
|
- },
|
|
|
- confirm() {
|
|
|
- // let monthStr = this.padZeroStr(this.month)
|
|
|
- // let dayStr = this.padZeroStr(this.day)
|
|
|
- // let hourStr = this.padZeroStr(this.hour)
|
|
|
- // let minuteStr = this.padZeroStr(this.minute)
|
|
|
- // this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
|
|
|
- this.$emit('confirmPickDate', this.interviewStartTime,this.interviewEndTime);
|
|
|
- this.$refs.popup.close()
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
+ props: {
|
|
|
+ // visible: {
|
|
|
+ // type: Boolean,
|
|
|
+ // default: true
|
|
|
+ // },
|
|
|
+
|
|
|
+ // interviewTime: {
|
|
|
+ // type: String,
|
|
|
+ // default() {
|
|
|
+ // return '';
|
|
|
+ // },
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // visible: {
|
|
|
+ // handler(newValue, oldValue) {
|
|
|
+ // if (newValue) {
|
|
|
+ // if (this.interviewTime) {
|
|
|
+ // this.init(this.interviewTime);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // immediate: false,
|
|
|
+ // deep: true
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //快捷选择
|
|
|
+ OptionsTabSelect(index) {
|
|
|
+ this.OptionsTabIndex = index;
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ bindChange: function(e) {
|
|
|
+ const val = e.detail.value
|
|
|
+ let year = this.years[val[0]]
|
|
|
+ let isDay = 30,
|
|
|
+ days = [];
|
|
|
+ if (val[1] + 1 == 2) {
|
|
|
+ if ((val[0] % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
|
|
|
+ console.log('闰年')
|
|
|
+ isDay = 29;
|
|
|
+ } else {
|
|
|
+ isDay = 28;
|
|
|
+ console.log('平年')
|
|
|
+ }
|
|
|
+ } else if ([1, 3, 5, 7, 8, 10, 12].includes(val[1] + 1)) {
|
|
|
+ isDay = 31;
|
|
|
+ } else {
|
|
|
+ isDay = 30;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 1; i <= isDay; i++) {
|
|
|
+ days.push(i)
|
|
|
+ }
|
|
|
+ this.days = days;
|
|
|
+ this.year = this.years[val[0]]
|
|
|
+ this.month = this.months[val[1]]
|
|
|
+ this.day = this.days[val[2]]
|
|
|
+ if (this.startShow) {
|
|
|
+ this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
|
|
|
+ }
|
|
|
+ if (this.endShow) {
|
|
|
+ this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ const date = new Date();
|
|
|
+ const years = []
|
|
|
+ const year = date.getFullYear()
|
|
|
+ const months = []
|
|
|
+ const month = date.getMonth() + 1
|
|
|
+ const days = []
|
|
|
+ const day = date.getDate()
|
|
|
+
|
|
|
+ let isDay = 30;
|
|
|
+ if (month == 2) {
|
|
|
+ if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
|
|
|
+ isDay = 29;
|
|
|
+ } else {
|
|
|
+ isDay = 28;
|
|
|
+ }
|
|
|
+ } else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
|
|
|
+ isDay = 31;
|
|
|
+ } else {
|
|
|
+ isDay = 30;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = date.getFullYear(); i >= 1900; i--) {
|
|
|
+ years.push(i)
|
|
|
+ }
|
|
|
+ for (let i = 1; i <= 12; i++) {
|
|
|
+ months.push(i)
|
|
|
+ }
|
|
|
+ for (let i = 1; i <= isDay; i++) {
|
|
|
+ days.push(i)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.years = years
|
|
|
+ this.year = year
|
|
|
+ this.months = months
|
|
|
+ this.month = month
|
|
|
+ this.days = days
|
|
|
+ this.day = day
|
|
|
+ this.value = [0, month - 1, day - 1]
|
|
|
+ },
|
|
|
+ // 补0
|
|
|
+ padZeroStr(originStr) {
|
|
|
+ if (+originStr < 10) {
|
|
|
+ return String(originStr).padStart(2, '0')
|
|
|
+ }
|
|
|
+ return originStr + ''
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit('update:visible', false);
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.$emit('update:visible', false);
|
|
|
+ this.interviewStartTime = ''
|
|
|
+ this.interviewEndTime = ''
|
|
|
+ },
|
|
|
+ startClick() {
|
|
|
+ // this.interviewStartTime=''
|
|
|
+ this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
|
|
|
+ this.visible = true
|
|
|
+ this.startShow = true
|
|
|
+ this.endShow = false
|
|
|
+ },
|
|
|
+ endClick() {
|
|
|
+ this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
|
|
|
+ this.visible = true
|
|
|
+ this.startShow = false
|
|
|
+ this.endShow = true
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ // let monthStr = this.padZeroStr(this.month)
|
|
|
+ // let dayStr = this.padZeroStr(this.day)
|
|
|
+ // let hourStr = this.padZeroStr(this.hour)
|
|
|
+ // let minuteStr = this.padZeroStr(this.minute)
|
|
|
+ // this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
|
|
|
+ this.$emit('confirmPickDate', this.interviewStartTime, this.interviewEndTime);
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.popup {
|
|
|
- border-radius:10px 10px 0 0 !important;
|
|
|
+ border-radius: 10px 10px 0 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333333;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 21px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 23px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .quickOptions {
|
|
|
+ padding: 0 42rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 37rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ padding: 7rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
+ border: 1rpx solid #EEEEEE;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabactive {
|
|
|
+ background: rgba(45, 109, 255, 0.1);
|
|
|
+ color: #2D6DFF;
|
|
|
+ border: 1rpx solid #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-footer {
|
|
|
+ margin: 10px 15px;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ color: #2D6DFF;
|
|
|
+ background: rgba(45, 109, 255, 0.1);
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-data {
|
|
|
+ line-height: 25px;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border: 1px solid #2D6DFF;
|
|
|
+ color: #2D6DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
}
|
|
|
- .popup-title{
|
|
|
- font-size: 15px;
|
|
|
- color: #333333;
|
|
|
- padding:10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- text:first-child {
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- text:last-child {
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- font-size: 21px;
|
|
|
- color: #999999;
|
|
|
- line-height: 23px;
|
|
|
- }
|
|
|
- }
|
|
|
- .popup-footer{
|
|
|
- margin:10px 15px;
|
|
|
- text{
|
|
|
- font-size: 16px;
|
|
|
- padding: 5px 0;
|
|
|
- color: #FFFFFF;
|
|
|
- display: inline-block;
|
|
|
- width: 45%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- text:first-child {
|
|
|
- color: #2D6DFF;
|
|
|
- background: rgba(45,109,255,0.1);
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- }
|
|
|
- text:last-child {
|
|
|
- background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);
|
|
|
- border-radius: 5px 5px 5px 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .popup-data{
|
|
|
- line-height: 25px;
|
|
|
- text{
|
|
|
- font-size: 14px;
|
|
|
- color: #999999 ;
|
|
|
- display: inline-block;
|
|
|
- width: 45%;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid #DDDDDD;
|
|
|
- border-radius: 2px 2px 2px 2px;
|
|
|
- }
|
|
|
- .active{
|
|
|
- border: 1px solid #2D6DFF;
|
|
|
- color: #2D6DFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .picker-view {
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
-</style>
|
|
|
+</style>
|