198 lines
6.7 KiB
Vue
198 lines
6.7 KiB
Vue
<template>
|
|
<div v-loading="loading" class="layout-padding w-full">
|
|
<div class="flex w-80 ml-10 my-6">
|
|
<el-button plain type="primary" @click="emit('hidden')">返回</el-button>
|
|
<el-form-item label="商户" prop="merchantId" class="w-60 ml-4">
|
|
<select-mch v-model="merchantId" :apiParams="{ types: '1' }" />
|
|
</el-form-item>
|
|
</div>
|
|
<h1 class="mx-auto text-5xl mt-[-40px]">包厢排期详情</h1>
|
|
|
|
<table v-if="weekData.data.length > 0" class="w-11/12 border-collapse cursor-pointer mx-auto">
|
|
<tr>
|
|
<div class="text-4xl mr-2 text-right" @click="addClick(-1)"><</div>
|
|
<td
|
|
v-for="(item, index) in weekData.data"
|
|
:key="index"
|
|
@click="timeClick(item, index)"
|
|
:class="{ selectedSpan: isActive === index }"
|
|
class="border-2 border-solid border-gray-200 text-center"
|
|
>
|
|
<span>{{ item }}</span>
|
|
</td>
|
|
<div class="text-4xl ml-2 text-left" @click="addClick(1)">></div>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="w-full h-full overflow-auto p-10 flex flex-wrap justify-center">
|
|
<div
|
|
class="relative w-40 h-16 leading-[44px] p-2 m-2 text-lg rounded-lg box-border text-slate-950 hover:text-green-600 bg-gray-200/50 border-2 border-solid border-gray-200/50 hover:border-green-800/50 hover:bg-green-400/10 transition-all text-center"
|
|
v-for="(item, index) in boxesBookingList"
|
|
:key="index"
|
|
>
|
|
<div class="absolute top-0 left-0 w-11 h-5 leading-5 rounded text-slate-500 font-bold bg-amber-300/30 text-sm">
|
|
{{ booking_status.find((item: any) => item.value == "1")?.label }}
|
|
</div>
|
|
{{ item.hour }}
|
|
</div>
|
|
</div>
|
|
<!-- <div class="dataDiv">
|
|
<table>
|
|
<tr class="food">
|
|
<td v-if="!loading" class="text-center" @click="addFood(1)">早餐</td>
|
|
<div class="food_list">
|
|
<td class="food_list_item" v-for="(item, index) in foodData1" :key="index" @click="delteData(item.tid)">
|
|
<file-image style="width: 80px; height: 80px" :src="$fileUrl(imageBaseUrl + item.picUrl)" fit="cover" @error="$fileRetry(imageBaseUrl + item.picUrl)" />
|
|
<div class="w-full flex justify-around items-center text-black mt-2">
|
|
<span>{{ item.name }}</span>
|
|
<span class="mx-1">|</span>
|
|
<span class="text-sm">{{ canteenCategoryOption.find((v: any) => v.id == item.categoryId)?.name }}</span>
|
|
</div>
|
|
<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
|
|
</td>
|
|
</div>
|
|
</tr>
|
|
<tr class="food">
|
|
<td v-if="!loading" class="text-center" @click="addFood(2)">中餐</td>
|
|
<div class="food_list">
|
|
<td class="food_list_item" v-for="(item, index) in foodData2" :key="index" @click="delteData(item.tid)">
|
|
<file-image style="width: 80px; height: 80px" :src="$fileUrl(imageBaseUrl + item.picUrl)" fit="cover" @error="$fileRetry(imageBaseUrl + item.picUrl)" />
|
|
<div class="w-full flex justify-around items-center text-black mt-2">
|
|
<span>{{ item.name }}</span>
|
|
<span class="mx-1">|</span>
|
|
<span class="text-sm">{{ canteenCategoryOption.find((v: any) => v.id == item.categoryId)?.name }}</span>
|
|
</div>
|
|
<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
|
|
</td>
|
|
</div>
|
|
</tr>
|
|
<tr class="food">
|
|
<td v-if="!loading" class="text-center" @click="addFood(3)">晚餐</td>
|
|
<div class="food_list">
|
|
<td class="food_list_item" v-for="(item, index) in foodData3" :key="index" @click="delteData(item.tid)">
|
|
<file-image style="width: 80px; height: 80px" loading="lazy" :src="$fileUrl(imageBaseUrl + item.picUrl)" fit="cover" @error="$fileRetry(imageBaseUrl + item.picUrl)" />
|
|
<div class="w-full flex justify-around items-center text-black mt-2">
|
|
<span>{{ item.name }}</span>
|
|
<span class="mx-1">|</span>
|
|
<span class="text-sm">{{ canteenCategoryOption.find((v: any) => v.id == item.categoryId)?.name }}</span>
|
|
</div>
|
|
<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
|
|
</td>
|
|
</div>
|
|
</tr>
|
|
</table>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="systemCanteenDailyMenu">
|
|
import { selectWeekInfo } from "/@/api/canteen/canteenDailyMenu"
|
|
import { pageJoin } from "/@/api/wallet/mch-manage"
|
|
import { fetchList } from "/@/api/canteen/boxesAvailability"
|
|
import { useMessage } from "/@/hooks/message"
|
|
import { useDict } from "/@/hooks/dict"
|
|
|
|
const emit = defineEmits(["hidden"])
|
|
|
|
const { booking_status } = useDict("booking_status")
|
|
const loading = ref(false)
|
|
let timedata = ""
|
|
let isActive = ref(-1)
|
|
const weekParams = reactive({
|
|
index: 0,
|
|
})
|
|
const weekData = reactive({
|
|
data: [],
|
|
}) // 时间数组
|
|
const boxesBookingList = ref<any>([]) // 包厢当天排期详情列表
|
|
const merchantId = ref() // 商户Id
|
|
const merchantInfo = ref<any>([])
|
|
|
|
//选中具体时间数据
|
|
const timeClick = async (time: string, index: number) => {
|
|
//数据查询操作
|
|
if (time && isActive.value !== index) {
|
|
//时间处理
|
|
time = time.substring(0, time.indexOf("("))
|
|
timedata = time
|
|
//选中
|
|
isActive.value = index
|
|
selectTimeBoxes()
|
|
}
|
|
}
|
|
//切换时间
|
|
const addClick = async (index: number) => {
|
|
//数据值操作
|
|
weekParams.index = weekParams.index + index
|
|
fetchData()
|
|
}
|
|
|
|
watch(merchantId, () => {
|
|
fetchData()
|
|
})
|
|
|
|
// 获取周日期数据
|
|
const fetchData = async () => {
|
|
const weekDataRes = await selectWeekInfo(weekParams).finally(() => (loading.value = false))
|
|
weekData.data = weekDataRes.data
|
|
isActive.value = new Date().getDay() === 0 ? 6 : new Date().getDay() - 1
|
|
timedata = weekData.data[isActive.value]
|
|
// 时间格式
|
|
timedata = timedata.substring(0, timedata.indexOf("("))
|
|
selectTimeBoxes()
|
|
}
|
|
|
|
// 获取当天包厢排期详情
|
|
const selectTimeBoxes = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await fetchList({ bxDate: timedata, current: 1, size: 24 })
|
|
if (res.code == 0) {
|
|
boxesBookingList.value = res.data.records
|
|
} else {
|
|
useMessage().error(res.msg || "查询失败")
|
|
}
|
|
} catch (error) {
|
|
useMessage().error("错误")
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 获取下拉框选项
|
|
const merchantInit = async () => {
|
|
loading.value = true
|
|
const res = await pageJoin({ current: 1, size: 99999 }).finally(() => (loading.value = false))
|
|
merchantInfo.value = res.data.records
|
|
|
|
//默认选中第一个
|
|
if (merchantInfo.value) {
|
|
merchantId.value = merchantInfo.value[0].id
|
|
fetchData()
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await merchantInit()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.selectedSpan {
|
|
border: 2px solid rgb(255, 187, 0);
|
|
border-left: 2px solid transparent;
|
|
color: rgb(255, 187, 0);
|
|
font-weight: bold;
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
.selectedSpan::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1.5px;
|
|
top: -1.5px;
|
|
bottom: -1.5px;
|
|
border-left: 2px solid rgb(255, 187, 0);
|
|
}
|
|
</style>
|