闸门智控小程序
This commit is contained in:
@@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<view class="tui-datetime-picker">
|
||||
<view class="tui-mask" :class="{ 'tui-mask-show': isShow }" @touchmove.stop.prevent="stop" catchtouchmove="stop" @tap="hide"></view>
|
||||
<view class="tui-header" :class="{ 'tui-show': isShow }">
|
||||
<view
|
||||
class="tui-picker-header"
|
||||
:class="{ 'tui-date-radius': radius }"
|
||||
:style="{ backgroundColor: headerBackground }"
|
||||
@touchmove.stop.prevent="stop"
|
||||
catchtouchmove="stop"
|
||||
>
|
||||
<view class="tui-btn-picker" :style="{ color: cancelColor }" hover-class="tui-opacity" :hover-stay-time="150" @tap="hide">取消</view>
|
||||
<view class="tui-btn-picker" :style="{ color: color }" hover-class="tui-opacity" :hover-stay-time="150" @tap="btnFix">确定</view>
|
||||
</view>
|
||||
<view class="tui-date-header" :style="{ backgroundColor: unitBackground }" v-if="unitTop">
|
||||
<view class="tui-date-unit" v-if="type < 4 || type == 7">年</view>
|
||||
<view class="tui-date-unit" v-if="type < 4 || type == 7">月</view>
|
||||
<view class="tui-date-unit" v-if="type == 1 || type == 2 || type == 7">日</view>
|
||||
<view class="tui-date-unit" v-if="type == 1 || type == 4 || type == 5 || type == 7">时</view>
|
||||
<view class="tui-date-unit" v-if="type == 1 || type > 3">分</view>
|
||||
<view class="tui-date-unit" v-if="type > 4">秒</view>
|
||||
</view>
|
||||
<view class="tui-picker-body" :style="{ backgroundColor: bodyBackground }">
|
||||
<picker-view :value="value" @change="change" class="tui-picker-view">
|
||||
<picker-view-column v-if="!reset && (type < 4 || type == 7)">
|
||||
<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in years" :key="index">
|
||||
{{ item }}
|
||||
<text class="tui-unit-text" v-if="!unitTop">年</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && (type < 4 || type == 7)">
|
||||
<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in months" :key="index">
|
||||
{{ formatNum(item) }}
|
||||
<text class="tui-unit-text" v-if="!unitTop">月</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && (type == 1 || type == 2 || type == 7)">
|
||||
<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in days" :key="index">
|
||||
{{ formatNum(item) }}
|
||||
<text class="tui-unit-text" v-if="!unitTop">日</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && (type == 1 || type == 4 || type == 5 || type == 7)">
|
||||
<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in hours" :key="index">
|
||||
{{ formatNum(item) }}
|
||||
<text class="tui-unit-text" v-if="!unitTop">时</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && (type == 1 || type > 3)">
|
||||
<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in minutes" :key="index">
|
||||
{{ formatNum(item) }}
|
||||
<text class="tui-unit-text" v-if="!unitTop">分</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column v-if="!reset && type > 4">
|
||||
<view class="tui-column-item" :class="{ 'tui-font-size_32': !unitTop && type == 7 }" v-for="(item, index) in seconds" :key="index">
|
||||
{{ formatNum(item) }}
|
||||
<text class="tui-unit-text" v-if="!unitTop">秒</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tuiDatetime',
|
||||
props: {
|
||||
//1-日期+时间（年月日+时分） 2-日期(年月日) 3-日期(年月) 4-时间（时分） 5-时分秒 6-分秒 7-年月日 时分秒
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
//年份区间
|
||||
startYear: {
|
||||
type: Number,
|
||||
default: 1980
|
||||
},
|
||||
//年份区间
|
||||
endYear: {
|
||||
type: Number,
|
||||
default: 2050
|
||||
},
|
||||
//"取消"字体颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#888'
|
||||
},
|
||||
//"确定"字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#5677fc'
|
||||
},
|
||||
//设置默认显示日期 2019-08-01 || 2019-08-01 17:01 || 2019/08/01
|
||||
setDateTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//单位置顶
|
||||
unitTop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//圆角设置
|
||||
radius: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//头部背景色
|
||||
headerBackground: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//根据实际调整，不建议使用深颜色
|
||||
bodyBackground: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//单位置顶时，单位条背景色
|
||||
unitBackground: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
years: [],
|
||||
months: [],
|
||||
days: [],
|
||||
hours: [],
|
||||
minutes: [],
|
||||
seconds: [],
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
value: [0, 0, 0, 0, 0, 0],
|
||||
reset: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
computed: {
|
||||
yearOrMonth() {
|
||||
return `${this.year}-${this.month}`;
|
||||
},
|
||||
propsChange() {
|
||||
return `${this.setDateTime}-${this.type}-${this.startYear}-${this.endYear}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
yearOrMonth() {
|
||||
this.setDays();
|
||||
},
|
||||
propsChange() {
|
||||
this.reset = true;
|
||||
setTimeout(() => {
|
||||
this.initData();
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stop() {},
|
||||
formatNum: function(num) {
|
||||
return num < 10 ? '0' + num : num + '';
|
||||
},
|
||||
generateArray: function(start, end) {
|
||||
return Array.from(new Array(end + 1).keys()).slice(start);
|
||||
},
|
||||
getIndex: function(arr, val) {
|
||||
let index = arr.indexOf(val);
|
||||
return ~index ? index : 0;
|
||||
},
|
||||
//日期时间处理
|
||||
initSelectValue() {
|
||||
let fdate = this.setDateTime.replace(/\-/g, '/');
|
||||
fdate = fdate && fdate.indexOf('/') == -1 ? `2020/01/01 ${fdate}` : fdate;
|
||||
let time = null;
|
||||
if (fdate) time = new Date(fdate);
|
||||
else time = new Date();
|
||||
this.year = time.getFullYear();
|
||||
this.month = time.getMonth() + 1;
|
||||
this.day = time.getDate();
|
||||
this.hour = time.getHours();
|
||||
this.minute = time.getMinutes();
|
||||
this.second = time.getSeconds();
|
||||
},
|
||||
initData() {
|
||||
this.initSelectValue();
|
||||
this.reset = false;
|
||||
switch (this.type) {
|
||||
case 1:
|
||||
this.value = [0, 0, 0, 0, 0];
|
||||
this.setYears();
|
||||
this.setMonths();
|
||||
this.setDays();
|
||||
this.setHours();
|
||||
this.setMinutes();
|
||||
break;
|
||||
case 2:
|
||||
this.value = [0, 0, 0];
|
||||
this.setYears();
|
||||
this.setMonths();
|
||||
this.setDays();
|
||||
break;
|
||||
case 3:
|
||||
this.value = [0, 0];
|
||||
this.setYears();
|
||||
this.setMonths();
|
||||
break;
|
||||
case 4:
|
||||
this.value = [0, 0];
|
||||
this.setHours();
|
||||
this.setMinutes();
|
||||
break;
|
||||
case 5:
|
||||
this.value = [0, 0, 0];
|
||||
this.setHours();
|
||||
this.setMinutes();
|
||||
this.setSeconds();
|
||||
break;
|
||||
case 6:
|
||||
this.value = [0, 0];
|
||||
this.setMinutes();
|
||||
this.setSeconds();
|
||||
break;
|
||||
case 7:
|
||||
this.value = [0, 0, 0, 0, 0, 0];
|
||||
this.setYears();
|
||||
this.setMonths();
|
||||
this.setDays();
|
||||
this.setHours();
|
||||
this.setMinutes();
|
||||
this.setSeconds();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
setYears() {
|
||||
this.years = this.generateArray(this.startYear, this.endYear);
|
||||
setTimeout(() => {
|
||||
this.$set(this.value, 0, this.getIndex(this.years, this.year));
|
||||
}, 8);
|
||||
},
|
||||
setMonths() {
|
||||
this.months = this.generateArray(1, 12);
|
||||
setTimeout(() => {
|
||||
this.$set(this.value, 1, this.getIndex(this.months, this.month));
|
||||
}, 8);
|
||||
},
|
||||
setDays() {
|
||||
if (this.type == 3 || this.type == 4) return;
|
||||
let totalDays = new Date(this.year, this.month, 0).getDate();
|
||||
this.days = this.generateArray(1, totalDays);
|
||||
setTimeout(() => {
|
||||
this.$set(this.value, 2, this.getIndex(this.days, this.day));
|
||||
}, 8);
|
||||
},
|
||||
setHours() {
|
||||
this.hours = this.generateArray(0, 23);
|
||||
setTimeout(() => {
|
||||
let index = this.type == 5 || this.type == 7 ? this.value.length - 3 : this.value.length - 2;
|
||||
this.$set(this.value, index, this.getIndex(this.hours, this.hour));
|
||||
}, 8);
|
||||
},
|
||||
setMinutes() {
|
||||
this.minutes = this.generateArray(0, 59);
|
||||
setTimeout(() => {
|
||||
let index = this.type > 4 ? this.value.length - 2 : this.value.length - 1;
|
||||
this.$set(this.value, index, this.getIndex(this.minutes, this.minute));
|
||||
}, 8);
|
||||
},
|
||||
setSeconds() {
|
||||
this.seconds = this.generateArray(0, 59);
|
||||
setTimeout(() => {
|
||||
this.$set(this.value, this.value.length - 1, this.getIndex(this.seconds, this.second));
|
||||
}, 8);
|
||||
},
|
||||
show() {
|
||||
setTimeout(() => {
|
||||
this.isShow = true;
|
||||
}, 50);
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
this.$emit('cancel', {});
|
||||
},
|
||||
change(e) {
|
||||
this.value = e.detail.value;
|
||||
switch (this.type) {
|
||||
case 1:
|
||||
this.year = this.years[this.value[0]];
|
||||
this.month = this.months[this.value[1]];
|
||||
this.day = this.days[this.value[2]];
|
||||
this.hour = this.hours[this.value[3]];
|
||||
this.minute = this.minutes[this.value[4]];
|
||||
break;
|
||||
case 2:
|
||||
this.year = this.years[this.value[0]];
|
||||
this.month = this.months[this.value[1]];
|
||||
this.day = this.days[this.value[2]];
|
||||
break;
|
||||
case 3:
|
||||
this.year = this.years[this.value[0]];
|
||||
this.month = this.months[this.value[1]];
|
||||
break;
|
||||
case 4:
|
||||
this.hour = this.hours[this.value[0]];
|
||||
this.minute = this.minutes[this.value[1]];
|
||||
break;
|
||||
case 5:
|
||||
this.hour = this.hours[this.value[0]];
|
||||
this.minute = this.minutes[this.value[1]];
|
||||
this.second = this.seconds[this.value[2]];
|
||||
break;
|
||||
case 6:
|
||||
this.minute = this.minutes[this.value[0]];
|
||||
this.second = this.seconds[this.value[1]];
|
||||
break;
|
||||
case 7:
|
||||
this.year = this.years[this.value[0]];
|
||||
this.month = this.months[this.value[1]];
|
||||
this.day = this.days[this.value[2]];
|
||||
this.hour = this.hours[this.value[3]];
|
||||
this.minute = this.minutes[this.value[4]];
|
||||
this.second = this.seconds[this.value[5]];
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
btnFix() {
|
||||
setTimeout(() => {
|
||||
let result = {};
|
||||
let year = this.year;
|
||||
let month = this.formatNum(this.month || 0);
|
||||
let day = this.formatNum(this.day || 0);
|
||||
let hour = this.formatNum(this.hour || 0);
|
||||
let minute = this.formatNum(this.minute || 0);
|
||||
let second = this.formatNum(this.second || 0);
|
||||
switch (this.type) {
|
||||
case 1:
|
||||
result = {
|
||||
year: year,
|
||||
month: month,
|
||||
day: day,
|
||||
hour: hour,
|
||||
minute: minute,
|
||||
result: `${year}-${month}-${day} ${hour}:${minute}`
|
||||
};
|
||||
break;
|
||||
case 2:
|
||||
result = {
|
||||
year: year,
|
||||
month: month,
|
||||
day: day,
|
||||
result: `${year}-${month}-${day}`
|
||||
};
|
||||
break;
|
||||
case 3:
|
||||
result = {
|
||||
year: year,
|
||||
month: month,
|
||||
result: `${year}-${month}`
|
||||
};
|
||||
break;
|
||||
case 4:
|
||||
result = {
|
||||
hour: hour,
|
||||
minute: minute,
|
||||
result: `${hour}:${minute}`
|
||||
};
|
||||
break;
|
||||
case 5:
|
||||
result = {
|
||||
hour: hour,
|
||||
minute: minute,
|
||||
second: second,
|
||||
result: `${hour}:${minute}:${second}`
|
||||
};
|
||||
break;
|
||||
case 6:
|
||||
result = {
|
||||
minute: minute,
|
||||
second: second,
|
||||
result: `${minute}:${second}`
|
||||
};
|
||||
break;
|
||||
case 7:
|
||||
result = {
|
||||
year: year,
|
||||
month: month,
|
||||
day: day,
|
||||
hour: hour,
|
||||
minute: minute,
|
||||
second: second,
|
||||
result: `${year}-${month}-${day} ${hour}:${minute}:${second}`
|
||||
};
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.$emit('confirm', result);
|
||||
this.hide();
|
||||
}, 80);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tui-datetime-picker {
|
||||
position: relative;
|
||||
z-index: 996;
|
||||
}
|
||||
|
||||
.tui-picker-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-mask {
|
||||
position: fixed;
|
||||
z-index: 997;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tui-mask-show {
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.tui-header {
|
||||
z-index: 998;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.tui-date-header {
|
||||
width: 100%;
|
||||
height: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
/* #ifdef MP */
|
||||
box-shadow: 0 15rpx 10rpx -15rpx #efefef;
|
||||
/* #endif */
|
||||
/* #ifndef MP */
|
||||
box-shadow: 0 15rpx 10rpx -15rpx #888;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tui-date-unit {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tui-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.tui-picker-header {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tui-date-radius {
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tui-picker-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tui-picker-body {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tui-column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tui-font-size_32 {
|
||||
font-size: 32rpx !important;
|
||||
}
|
||||
|
||||
.tui-unit-text {
|
||||
font-size: 24rpx !important;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.tui-btn-picker {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tui-opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user