111 lines
2.4 KiB
Vue
111 lines
2.4 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"
|
|
></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 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>
|
|
|