初始化项目模板

components/picker-time.vue

@@ -0,0 +1,135 @@
+<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>