98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<template>
|
|
<view>
|
|
<up-radio-group v-model="useTimeType" placement="row">
|
|
<up-radio v-for="item in useTimeTypeList" :key="item.value" :value="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
|
|
</up-radio-group>
|
|
<view class="u-flex u-m-t-30 box" v-if="useTimeType == 'custom'">
|
|
<view class="u-flex u-flex-1">
|
|
<view class="item" @click="pirckerShow(startValue, 'startValue')">
|
|
<text class="u-m-r-12" v-if="!startValue">开始时间</text>
|
|
<text class="u-m-r-12" v-else>{{ startValue }}</text>
|
|
</view>
|
|
<view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx">—</view>
|
|
<view class="item" @click="pirckerShow(endValue, 'endValue')">
|
|
<text class="u-m-r-12" v-if="!endValue">结束时间</text>
|
|
<text class="u-m-r-12" v-else>{{ endValue }}</text>
|
|
</view>
|
|
</view>
|
|
<up-icon name="clock"></up-icon>
|
|
</view>
|
|
<up-datetime-picker :show="show" v-model="value1" closeOnClickOverlay @close="close" @cancel="close" @confirm="confirm" mode="time"></up-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
|
|
const customStyle = ref({
|
|
marginRight: '15px'
|
|
});
|
|
|
|
const useTimeType = defineModel('useTimeType', {
|
|
type: String,
|
|
default: 'all'
|
|
});
|
|
const useTimeTypeList = [
|
|
{
|
|
value: 'all',
|
|
label: '全时段可用'
|
|
},
|
|
{
|
|
value: 'custom',
|
|
label: '指定时间段可用'
|
|
}
|
|
];
|
|
import dayjs from 'dayjs';
|
|
const startValue = defineModel('startValue', {
|
|
type: String,
|
|
default: ''
|
|
});
|
|
const endValue = defineModel('endValue', {
|
|
type: String,
|
|
default: ''
|
|
});
|
|
|
|
function close() {
|
|
show.value = false;
|
|
}
|
|
const value1 = ref('');
|
|
const show = ref(false);
|
|
const nowKey = ref('');
|
|
|
|
function pirckerShow(date, key) {
|
|
nowKey.value = key;
|
|
show.value = true;
|
|
value1.value = date || '';
|
|
}
|
|
|
|
function confirm(e) {
|
|
console.log(e);
|
|
|
|
if (nowKey.value == 'startValue') {
|
|
startValue.value = e.value;
|
|
} else if (nowKey.value == 'endValue') {
|
|
endValue.value = e.value;
|
|
}
|
|
value1.value = e.value;
|
|
show.value = false;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.item {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 48rpx;
|
|
padding: 0 12rpx;
|
|
display: flex;
|
|
}
|
|
.box {
|
|
border: 2rpx solid #dddfe6;
|
|
padding: 16rpx 30rpx;
|
|
box-sizing: border-box;
|
|
width: 564rpx;
|
|
border-radius: 4rpx;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|