117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<template>
|
|
<view>
|
|
<view @click="changeShow" class="name">
|
|
<view class="name-text">{{ title }}</view>
|
|
<view class="picker">
|
|
{{ timeFormat(time, 'yyyy-mm-dd h:M') }}
|
|
</view>
|
|
</view>
|
|
<up-datetime-picker
|
|
:filter="filter"
|
|
:itemHeight="70"
|
|
:visibleItemCount="5"
|
|
:minDate="minDate"
|
|
:show="show"
|
|
v-model="time"
|
|
:formatter="formatter"
|
|
:maxDate="maxDate"
|
|
mode="datetime"
|
|
@confirm="confirm"
|
|
:closeOnClickOverlay="true"
|
|
@close="close"
|
|
@cancel="close"
|
|
></up-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { timeFormat } from 'uview-plus'
|
|
|
|
export default {
|
|
name: 'LockDatetimePicker',
|
|
props: {
|
|
title: String,
|
|
value: Number,
|
|
minDate: Number,
|
|
maxDate: Number,
|
|
type: {
|
|
type: String,
|
|
default: 'datetime'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
time: 0,
|
|
show: false
|
|
}
|
|
},
|
|
created() {
|
|
this.time = this.value
|
|
},
|
|
methods: {
|
|
timeFormat,
|
|
formatter(type, value) {
|
|
if (type === 'year') {
|
|
return `${value}年`
|
|
}
|
|
if (type === 'month') {
|
|
return `${value}月`
|
|
}
|
|
if (type === 'day') {
|
|
return `${value}日`
|
|
}
|
|
if (type === 'hour') {
|
|
return `${value}时`
|
|
}
|
|
if (type === 'minute') {
|
|
return `${value}分`
|
|
}
|
|
return value
|
|
},
|
|
filter(mode, options) {
|
|
if (mode === 'minute' && this.type === 'datehour') {
|
|
return options.filter(option => option === '00')
|
|
}
|
|
|
|
return options
|
|
},
|
|
changeShow() {
|
|
this.show = !this.show
|
|
},
|
|
close() {
|
|
this.show = false
|
|
},
|
|
confirm(e) {
|
|
this.show = false
|
|
this.$emit('changeTime', e.value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.name {
|
|
height: 100rpx;
|
|
width: 750rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
|
|
.name-text {
|
|
width: 168rpx;
|
|
margin-left: 32rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.picker {
|
|
margin-right: 32rpx;
|
|
text-align: right;
|
|
width: 518rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
}
|
|
</style>
|