From 293beedcf8eeb25ac10072e2a01681d414d6ff75 Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Thu, 9 Jan 2025 19:55:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AF=8F=E6=97=A5=E8=8F=9C=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                             |   8 +-
 src/views/canteen/canteenDailyMenu/index.vue | 149 +++++--------------
 2 files changed, 42 insertions(+), 115 deletions(-)

diff --git a/.env.development b/.env.development
index 577906e..639afc5 100644
--- a/.env.development
+++ b/.env.development
@@ -8,16 +8,16 @@ VITE_OPEN = true
 ENV = 'development'
 
 # ADMIN 服务地址
-# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
+VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/
 # VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
 # VITE_ADMIN_PROXY_PATH = http://localhost:9999/
-VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
+# VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
 
 # 图片访问基础地址
-# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089
+VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api
 # VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
 # VITE_IMAGE_BASE_PATH = http://localhost:9999
-VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
+# VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
 
 # 代码生成服务地址
 VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
diff --git a/src/views/canteen/canteenDailyMenu/index.vue b/src/views/canteen/canteenDailyMenu/index.vue
index bdaf4d3..e460c06 100644
--- a/src/views/canteen/canteenDailyMenu/index.vue
+++ b/src/views/canteen/canteenDailyMenu/index.vue
@@ -1,44 +1,44 @@
 <template>
 	<div class="layout-padding">
-		<div style="margin-left: 4.5%; margin-top: 1.5%">
-			<el-form-item label="商户" prop="merchantId">
-				<select-mch v-model="merchantId" style="width: 200px" />
-			</el-form-item>
-			<h1 class="title">今日菜谱</h1>
-		</div>
-		<table width="100%" class="titleTable">
-			<tr class="trclass">
-				<td @click="addClick(-1)">&lt;</td>
+		<el-form-item label="商户" prop="merchantId" class="w-60 ml-10 my-6">
+			<select-mch v-model="merchantId" />
+		</el-form-item>
+		<h1 class="mx-auto text-5xl">今日菜谱</h1>
+
+		<table class="w-11/12 border-collapse cursor-pointer mx-auto">
+			<tr>
+				<td class="text-6xl" @click="addClick(-1)">&lt;</td>
 				<td
 					v-for="(item, index) in weekData.data"
 					:key="index"
 					@click="timeClick(item, index)"
-					class="tdclass"
 					:class="{ selectedSpan: isActive === index ? 'selected' : '' }"
+					class="border-2 border-solid border-gray-200 text-center"
 				>
 					<span>{{ item }}</span>
 				</td>
-				<td @click="addClick(1)">&gt;</td>
+				<td class="text-6xl" @click="addClick(1)">&gt;</td>
 			</tr>
 		</table>
-		<div class="dataDiv">
-			<table :style="{ width: tableWitch + 'px' }" class="foodTable">
-				<tr class="food">
-					<td @click="addFood(1)">早餐</td>
-					<td v-for="(item, index) in foodData1" :key="index">
-						<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
+
+		<div class="overflow-y-auto">
+			<table class="my-4">
+				<tr>
+					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(1)">早餐</td>
+					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData1" :key="index">
+						<img @click="delteData(item.tid)" :src="item.picUrl" class="p-3 w-full h-full object-cover" />
 					</td>
 				</tr>
-				<tr class="food" style="margin: 0px 5px 5px 0px">
-					<td @click="addFood(2)">中餐</td>
-					<td v-for="(item, index) in foodData2" :key="index">
-						<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
+				<tr>
+					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(2)">中餐</td>
+					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData2" :key="index">
+						<img @click="delteData(item.tid)" :src="item.picUrl" class="p-3 w-full h-full object-cover" />
 					</td>
 				</tr>
-				<tr class="food">
-					<td @click="addFood(3)">晚餐</td>
-					<td v-for="(item, index) in foodData3" :key="index">
-						<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
+				<tr>
+					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(3)">晚餐</td>
+					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData3" :key="index">
+						<img @click="delteData(item.tid)" :src="item.picUrl" class="p-3 w-full h-full object-cover" />
 					</td>
 				</tr>
 			</table>
@@ -66,21 +66,21 @@ const loading = ref(true); // 列表的加载中
 
 // ---------新增业务变量
 const message = useMessage(); // 消息弹窗
-const weekData = reactive({
-	data: [],
-}); //时间数组
-const weekParams = reactive({
-	index: 0,
-});
+
 const foodData1 = ref<any>({});
 const foodData2 = ref<any>({});
 const foodData3 = ref<any>({});
-let isActive = ref(-1);
+
 let timedata = '';
+let isActive = ref(-1);
+const weekParams = reactive({
+	index: 0,
+});
+const weekData = reactive({
+	data: [],
+}); //时间数组
 const merchantId = ref();
-const merchantStatus = ref(true);
 const merchantInfo = ref<any>([]);
-let tableWitch = 1000;
 
 const addFood = async (hourType: number) => {
 	if (!merchantId.value) {
@@ -114,11 +114,11 @@ watch(merchantId, () => {
 });
 
 const fetchData = async () => {
-	let weekDataRes = await selectWeekInfo(weekParams);
+	const weekDataRes = await selectWeekInfo(weekParams);
 	weekData.data = weekDataRes.data;
 	isActive.value = 0;
 	timedata = weekData.data[0];
-	//时间格式
+	// 时间格式
 	timedata = timedata.substring(0, timedata.indexOf('('));
 	selectTimeFood();
 };
@@ -127,7 +127,6 @@ const selectTimeFood = async () => {
 	foodData1.value = [];
 	foodData2.value = [];
 	foodData3.value = [];
-	tableWitch = 1000;
 	let params = {
 		time: timedata,
 		merchantId: merchantId.value,
@@ -151,11 +150,6 @@ const selectTimeFood = async () => {
 				break;
 		}
 	});
-	if (count > 0) {
-		tableWitch = count * 300 + 100;
-	} else {
-		tableWitch = 600;
-	}
 };
 /** 删除数据源按钮 */
 const delteData = async (tid: number) => {
@@ -185,90 +179,23 @@ const delteData = async (tid: number) => {
 /** 初始化下拉框 */
 const merchantInit = async () => {
 	// 获取下拉框选项
-	let res = await pageJoin({ current: 1, size: 9999 });
+	const res = await pageJoin({ current: 1, size: 9999 });
 	merchantInfo.value = res.data.records;
 
 	//默认选中第一个
 	if (merchantInfo.value) {
 		merchantId.value = merchantInfo.value[0].id;
-
-		if (merchantInfo.value.length > 1) {
-			merchantStatus.value = false;
-		}
 		fetchData();
 	}
 };
-/** 初始化 **/
 onMounted(() => {
 	merchantInit();
 });
 </script>
 
 <style lang="scss">
-.title {
-	font-size: 28px;
-	display: inline-block;
-	margin-left: 25%;
-}
-
-.titleTable {
-	border-collapse: collapse;
-	border-spacing: 0;
-	margin-top: 20px;
-	cursor: pointer;
-}
-
-.tdclass {
-	border: 1px solid rgb(233, 233, 233);
-	width: 13%;
-	height: 36px;
-	text-align: center;
-	background-color: white;
-}
-
-.trclass > td:first-child {
-	text-align: center;
-}
-.trclass > td:last-child {
-	text-align: center;
-}
-
-.foodTable {
-	margin-top: 30px;
-}
-
-.food td {
-	width: 250px;
-	height: 200px;
-	display: inline-block;
-	background-color: white;
-	margin-left: 20px;
-	cursor: pointer;
-}
-.imageCss {
-	width: 250px;
-}
-
-.food td:first-child {
-	width: 60px;
-	height: 200px;
-	display: inline-flex;
-	align-items: center;
-	margin-left: 4%;
-	background-color: transparent;
-	font-size: 26px;
-	cursor: pointer;
-	// text-decoration: blue underline;
-	color: rgb(0, 118, 228);
-	cursor: pointer;
-}
-
-.dataDiv {
-	overflow-x: auto;
-}
-
 .selectedSpan {
-	border: 1px solid rgb(255, 187, 0);
+	border: 2px solid rgb(255, 187, 0);
 	color: rgb(255, 187, 0);
 }
 </style>