130 lines
4.3 KiB
Vue
130 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<slot></slot>
|
|
<reservation-evaluate ref="_baseEvaluatePop" />
|
|
<qiandao-popup ref="_qianDaoPopup" />
|
|
<!-- 预约信息弹窗组件 -->
|
|
<ReservationPopup ref="_reservationPopup" />
|
|
<up-datetime-picker :show="_upDatesTimePicker.show" :filter="_upDatesTimePicker.filter"
|
|
:formatter="_upDatesTimePicker.formatter" v-model="_upDatesTimePicker.value" mode="datetime"
|
|
:minDate="_upDatesTimePicker.minDate" @cancel="_upDatesTimePicker.onCancel"
|
|
@confirm="_upDatesTimePicker.onConfirm" :title="_upDatesTimePicker.title"
|
|
:hasInput="false"></up-datetime-picker>
|
|
</view>
|
|
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, provide } from 'vue'
|
|
import ReservationEvaluate from '@/components/com/page/reservation-evaluate.vue'
|
|
import ReservationPopup from '@/components/com/index/ReservationPopup.vue'
|
|
import QiandaoPopup from '@/components/com/page/qiandao-popup.vue'
|
|
import dayjs from 'dayjs';
|
|
const _baseEvaluatePop = ref(null)
|
|
const _reservationPopup = ref(null)
|
|
const _qianDaoPopup = ref(null);
|
|
|
|
const openEvaluatePop = async (reservation) => {
|
|
_baseEvaluatePop.value && _baseEvaluatePop.value.show(reservation)
|
|
}
|
|
const openReservationPopup = async (reservation) => {
|
|
console.log("openReservationPopup", reservation)
|
|
_reservationPopup.value && _reservationPopup.value.show(reservation)
|
|
}
|
|
const openQianDaoPop = async (reservation) => {
|
|
console.log("openQianDaoPop", reservation)
|
|
_qianDaoPopup.value && _qianDaoPopup.value.show(reservation)
|
|
}
|
|
const _upDatesTimePicker = ref({
|
|
refId: null,
|
|
show: false,
|
|
value: Date.now(),
|
|
title: '',
|
|
minDate: Date.now(),
|
|
filter: (mode, options) => {
|
|
// console.log("filter", mode, options)
|
|
if (mode == "minute") {
|
|
return options.filter((option) => option % 5 === 0);
|
|
}
|
|
return options;
|
|
},
|
|
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
|
|
},
|
|
onCancel: () => {
|
|
if (_upDatesTimePicker.value.onError != null) {
|
|
_upDatesTimePicker.value.onError();
|
|
}
|
|
_upDatesTimePicker.value.show = false;
|
|
},
|
|
onConfirm: (options) => {
|
|
if (_upDatesTimePicker.value.onCallback != null) {
|
|
// const date = dayjs(options.value);
|
|
_upDatesTimePicker.value.onCallback(options.value);
|
|
}
|
|
_upDatesTimePicker.value.show = false;
|
|
},
|
|
onCallback: null,
|
|
onError: null
|
|
});
|
|
|
|
const openUpDatesTimePicker = (value, minDate, title) => {
|
|
return new Promise((resolve, reject) => {
|
|
// 1. 获取当前时间
|
|
const now = dayjs();
|
|
|
|
// 2. 当前时间加 1 小时
|
|
const oneHourLater = now.add(1, 'hour');
|
|
const timestamp = oneHourLater.valueOf();
|
|
_upDatesTimePicker.value.onCallback = resolve;
|
|
_upDatesTimePicker.value.onError = reject;
|
|
|
|
if (value != null && value != "" && value != 0) {
|
|
_upDatesTimePicker.value.value = value;
|
|
} else {
|
|
_upDatesTimePicker.value.value = timestamp;
|
|
}
|
|
if (minDate != null && minDate != "" && minDate != 0) {
|
|
_upDatesTimePicker.value.minDate = minDate;
|
|
} else {
|
|
_upDatesTimePicker.value.minDate = timestamp;
|
|
}
|
|
if (title != null) {
|
|
_upDatesTimePicker.value.title = title;
|
|
} else {
|
|
_upDatesTimePicker.value.title = '';
|
|
}
|
|
_upDatesTimePicker.value.show = true;
|
|
})
|
|
}
|
|
|
|
defineExpose({ openEvaluatePop, openReservationPopup, openUpDatesTimePicker,openQianDaoPop })
|
|
|
|
|
|
// onMounted(() => {
|
|
// console.log("container-basecontainer-basecontainer-basecontainer-base onMounted")
|
|
// // 确保 _containerBase 已经是有效的组件实例
|
|
// provide('openEvaluatePop', (reservation) => {
|
|
// _baseEvaluatePop.value.show(reservation)
|
|
// })
|
|
|
|
// provide('openReservationPopup', (reservation) => {
|
|
// _reservationPopup.value.show(reservation)
|
|
// })
|
|
// });
|
|
</script>
|
|
<style lang="scss" scoped></style> |