每日菜谱添加菜品类别和价格

src/views/canteen/canteenDailyMenu/form.vue

@@ -35,12 +35,14 @@
 				<div class="food_list">
 					<td class="food_list_item" v-for="(item, index) in selectedList" :key="item.id">
 						<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
-						<div class="w-full flex justify-between items-center text-black">
+						<div class="w-full flex justify-around items-center text-black">
 							<span>{{ item.name }}</span>
 							<span class="mx-1">|</span>
-							<span>{{ "某分类" }}</span>
+							<span class="text-sm">
+								{{ categoryOptions.find((v: any) => v.id == item.categoryId)?.name ?? "未知" }}
+							</span>
 						</div>
-						<div class="w-full text-lg text-center text-red-600">{{ "￥6.6" }}</div>
+						<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
 					</td>
 				</div>
 			</tr>

src/views/canteen/canteenDailyMenu/index.vue

@@ -33,7 +33,12 @@
 								fit="cover"
 								@click="delteData(item.tid)"
 							/>
-							<div class="w-full text-center text-black">{{ item.name }}</div>
+							<div class="w-full flex justify-around items-center text-black">
+								<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>
@@ -47,12 +52,12 @@
 								fit="cover"
 								@click="delteData(item.tid)"
 							/>
-							<div class="w-full flex justify-between items-center text-black">
+							<div class="w-full flex justify-around items-center text-black">
 								<span>{{ item.name }}</span>
 								<span class="mx-1">|</span>
-								<span>{{ "某分类" }}</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">{{ "￥6.6" }}</div>
+							<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
 						</td>
 					</div>
 				</tr>
@@ -66,7 +71,12 @@
 								fit="cover"
 								@click="delteData(item.tid)"
 							/>
-							<div class="w-full text-center text-black">{{ item.name }}</div>
+							<div class="w-full flex justify-around items-center text-black">
+								<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>
@@ -80,8 +90,10 @@
 
 <script setup lang="ts" name="systemCanteenDailyMenu">
 import { delObjs, selectTimeFoodApi, selectWeekInfo } from "/@/api/canteen/canteenDailyMenu"
-import { useMessage, useMessageBox } from "/@/hooks/message"
+import { fetchList } from "/@/api/canteen/canteenCategory"
+import { useMessage } from "/@/hooks/message"
 import { pageJoin } from "/@/api/wallet/mch-manage"
+import { displayPrice } from "/@/utils/formatMoney"
 
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
@@ -188,9 +200,8 @@ const delteData = async (tid: number) => {
 	selectTimeFood()
 }
 
-/** 初始化下拉框 */
+// 获取下拉框选项
 const merchantInit = async () => {
-	// 获取下拉框选项
 	const res = await pageJoin({ current: 1, size: 9999 })
 	merchantInfo.value = res.data.records
 
@@ -200,8 +211,21 @@ const merchantInit = async () => {
 		fetchData()
 	}
 }
-onMounted(() => {
-	merchantInit()
+
+const canteenCategoryOption = ref<any>([])
+// 获取菜品分类
+const getCanteenCategory = async () => {
+	const res = await fetchList({
+		current: 1,
+		size: 9999,
+	})
+	if (res.code === 0) {
+		canteenCategoryOption.value = res.data.records
+	}
+}
+onMounted(async () => {
+	await getCanteenCategory()
+	await merchantInit()
 })
 </script>