135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<script setup>
|
|
import {
|
|
getPredictTime
|
|
} from '@/pages/booking/api.js';
|
|
import {
|
|
onMounted,
|
|
ref,
|
|
reactive,
|
|
watch
|
|
} from 'vue';
|
|
import {
|
|
useI18n
|
|
} from 'vue-i18n';
|
|
import {
|
|
getNowDate
|
|
} from '@/common/common';
|
|
import {
|
|
isEmpty,
|
|
showToast
|
|
} from '../common/common';
|
|
const {
|
|
t,
|
|
locale
|
|
} = useI18n();
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
date: {
|
|
type: String,
|
|
default: getNowDate(),
|
|
},
|
|
});
|
|
const emit = defineEmits(['close', 'confirm']);
|
|
const close = () => {
|
|
emit('close');
|
|
};
|
|
const pckList = ref([]); // 套餐总数组
|
|
const title = ref('');
|
|
|
|
/**
|
|
* @desc 選擇套餐
|
|
* @param res 選中的套餐
|
|
*/
|
|
const choiceValue = ref('');
|
|
const choiceData = ref({});
|
|
const choice = (res) => {
|
|
if (!res.time.status) {
|
|
return showToast(res.time.tips);
|
|
}
|
|
choiceData.value = {
|
|
pckId: res.item.pckId,
|
|
pckName: res.item.pckName,
|
|
...res.time,
|
|
};
|
|
choiceValue.value = res.time.value;
|
|
};
|
|
|
|
const confirm = () => {
|
|
if (isEmpty(choiceData.value)) {
|
|
return showToast(t('booking.useTimePlaceholder'));
|
|
}
|
|
emit('confirm', choiceData.value);
|
|
close();
|
|
};
|
|
|
|
/**
|
|
* @desc 查询用餐时间
|
|
*/
|
|
const init = () => {
|
|
return new Promise((resolve, reject) => {
|
|
getPredictTime({
|
|
date: props.date,
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
pckList.value = res.data?.pckList;
|
|
title.value = res.data?.title;
|
|
resolve()
|
|
} else {
|
|
showToast(res.message)
|
|
reject()
|
|
}
|
|
});
|
|
})
|
|
|
|
}
|
|
|
|
const timeFun = reactive({
|
|
init
|
|
});
|
|
|
|
defineExpose({
|
|
timeFun,
|
|
});
|
|
|
|
onMounted(() => {
|
|
init()
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<up-popup :show="props.show" mode="bottom" round="20" :closeable="true" :safeAreaInsetBottom="true" @close="close">
|
|
<view class="flex flex-col gap-[20px] p-[20px] h-[70vh] relative">
|
|
<view class="flex h-[44px] items-center justify-center text-[16px] text-[#1D1D1F]">{{ title }}</view>
|
|
<view class="flex flex-col overflow-auto time-height gap-[20px]">
|
|
<view class="flex flex-col gap-[20px]" v-for="item in pckList" :key="item.pckId">
|
|
<view class="flex flex-col gap-[10px]">
|
|
<view class="text-main text-[14px] font-bold">{{ item.pckName }}</view>
|
|
<view class="gap-[20px] grid grid-cols-2">
|
|
<view class="flex items-center justify-center h-[35px] rounded-[5px] text-[14px]"
|
|
v-for="time in item.useTimeData" :key="time.value" :class="{
|
|
'!bg-theme text-white': choiceValue === time.value,
|
|
'bg-[#999]/[.5] text-white': !time.status,
|
|
'bg-white text-main border-round-theme': time.status,
|
|
}" @click="choice({ item, time })">
|
|
{{ time.label }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="my-[20px] flex absolute bottom-0 left-[20px] right-[20px]">
|
|
<up-button class="h-[40px] flex-1" :text="t('confirm')" shape="circle" color="#B5966E"
|
|
@click="confirm" />
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.time-height {
|
|
height: calc(100% - 40px - 44px - 40px); // 按钮高度+title高度+内边距上下共40px
|
|
}
|
|
</style> |