食谱展示界面开发
This commit is contained in:
huangdeliang
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="title"
|
||||
width="80%"
|
||||
top="30%"
|
||||
:close-on-click-modal="false"
|
||||
class="dishes_detail_dialog_wrapper"
|
||||
>
|
||||
<section class="section_zone">
|
||||
<div class="section_title">
|
||||
食材<em class="el-icon-shopping-cart-1" style="margin-left: 8px" />
|
||||
</div>
|
||||
<div v-for="igd in data.igdList" :key="igd.id" class="igd_item">
|
||||
<span>{{ igd.name }}</span>
|
||||
<span class="cusstr_style">
|
||||
<span>{{ igd.cusStr }}</span>
|
||||
<span>{{ igd.weight }}克</span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section_zone">
|
||||
<div class="section_title">
|
||||
做法<em class="el-icon-dish" style="margin-left: 8px" />
|
||||
</div>
|
||||
<div class="methods">{{ data.methods }}</div>
|
||||
</section>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "dishesDetailDialog",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
data: {},
|
||||
title: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showDialog(data) {
|
||||
if (!data || !data.igdList.length) {
|
||||
return;
|
||||
}
|
||||
this.data = data;
|
||||
this.visible = true;
|
||||
this.title = `${data.name}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dishes_detail_dialog_wrapper {
|
||||
.section_zone {
|
||||
margin-bottom: 16px;
|
||||
.section_title {
|
||||
color: #262626;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.igd_item {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
|
||||
.cusstr_style {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.methods {
|
||||
padding: 0 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.el-dialog__body {
|
||||
padding: 12px 18px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="nutri_compute_com_wrapper">
|
||||
<div class="header">{{ date }}</div>
|
||||
<div class="content">
|
||||
<section class="left">
|
||||
<div style="font-size: 18px">营养分析</div>
|
||||
<div class="total">
|
||||
<div>总热量约等于</div>
|
||||
<div>{{ totalHeat }}千卡</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="right">
|
||||
<table class="my_table" border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>蛋白质</th>
|
||||
<th>脂肪</th>
|
||||
<th>碳水</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-size: 12px">摄入量</td>
|
||||
<td>{{ pWeight }}</td>
|
||||
<td>{{ fWeight }}</td>
|
||||
<td>{{ cWeight }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-size: 12px">供能比</td>
|
||||
<td>{{ pRate }}</td>
|
||||
<td>{{ fRate }}</td>
|
||||
<td>{{ cRate }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="mask" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "nutriComputeCom",
|
||||
props: ["date", "value"],
|
||||
data() {
|
||||
return {
|
||||
totalHeat: 0,
|
||||
pWeight: "0克",
|
||||
fWeight: "0克",
|
||||
cWeight: "0克",
|
||||
pRate: "0%",
|
||||
fRate: "0%",
|
||||
cRate: "0%",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (!val || !val.length) {
|
||||
return;
|
||||
}
|
||||
let pWeight = 0,
|
||||
fWeight = 0,
|
||||
cWeight = 0;
|
||||
|
||||
val.forEach((dishes) => {
|
||||
dishes.igdList.forEach((igd) => {
|
||||
pWeight += (igd.proteinRatio * igd.weight) / 100;
|
||||
fWeight += (igd.fatRatio * igd.weight) / 100;
|
||||
cWeight += (igd.carbonRatio * igd.weight) / 100;
|
||||
});
|
||||
});
|
||||
this.totalHeat = (pWeight * 4 + fWeight * 9 + cWeight * 4).toFixed(1);
|
||||
this.pWeight = pWeight.toFixed(1) + "克";
|
||||
this.fWeight = fWeight.toFixed(1) + "克";
|
||||
this.cWeight = cWeight.toFixed(1) + "克";
|
||||
this.pRate = (((pWeight * 4) / this.totalHeat) * 100).toFixed(2) + "%";
|
||||
this.fRate = (((fWeight * 9) / this.totalHeat) * 100).toFixed(2) + "%";
|
||||
this.cRate = (((cWeight * 4) / this.totalHeat) * 100).toFixed(2) + "%";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nutri_compute_com_wrapper {
|
||||
padding: 10px 14px;
|
||||
background: #409eff;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
.header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
.left {
|
||||
padding-top: 10px;
|
||||
& > div:nth-child(1) {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.total {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
border: 1px solid white;
|
||||
padding: 8px 16px;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 2;
|
||||
border: 1px solid white;
|
||||
margin-left: 10px;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.my_table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-spacing: 0;
|
||||
border: 1px solid white;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
th {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
top: 4px;
|
||||
border: 1px solid #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
stdiet-ui/src/views/custom/recipesShow/MenuDetail/index.vue
Normal file
141
stdiet-ui/src/views/custom/recipesShow/MenuDetail/index.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="menu_detail_wrapper">
|
||||
<!-- 营养分析 -->
|
||||
<NutriComputeCom :date="date" :value="value" />
|
||||
<!-- 食谱详细 -->
|
||||
<el-card v-for="obj in menus" :key="obj.type" style="margin-top: 12px">
|
||||
<div slot="header">
|
||||
<span>{{ obj.typeName }}</span>
|
||||
</div>
|
||||
<div v-for="mObj in obj.values" :key="mObj.id">
|
||||
<div class="dishes_item">
|
||||
<div v-if="!mObj.methods" class="simple_dishes">
|
||||
<span>{{ mObj.name }}</span>
|
||||
<span class="weight_style">
|
||||
<span style="margin-right: 20px">{{ mObj.cusStr }}</span>
|
||||
<span>{{ mObj.weight }}克</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="complex_dishes" @click="handleOnDetailClick(mObj)">
|
||||
<span>{{ mObj.name }}</span>
|
||||
<em class="el-icon-arrow-right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 复杂菜品展示 -->
|
||||
<DishesDetailDialog ref="detailDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import NutriComputeCom from "./NutriComputeCom";
|
||||
import DishesDetailDialog from "./DishesDetailDialog";
|
||||
export default {
|
||||
name: "menuDetail",
|
||||
props: ["value", "date"],
|
||||
components: {
|
||||
NutriComputeCom,
|
||||
DishesDetailDialog,
|
||||
},
|
||||
created() {
|
||||
this.getDicts("cus_cus_unit").then((response) => {
|
||||
this.curUnitDict = response.data.reduce((obj, cur) => {
|
||||
obj[cur.dictValue] = cur.dictLabel;
|
||||
return obj;
|
||||
}, {});
|
||||
});
|
||||
this.getDicts("cus_cus_weight").then((response) => {
|
||||
this.cusWeightDict = response.data.reduce((obj, cur) => {
|
||||
obj[cur.dictValue] = cur.dictLabel;
|
||||
return obj;
|
||||
}, {});
|
||||
});
|
||||
this.getDicts("cus_dishes_type").then((response) => {
|
||||
this.menuTypeDict = response.data.reduce((obj, cur) => {
|
||||
obj[cur.dictValue] = cur.dictLabel;
|
||||
return obj;
|
||||
}, {});
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuTypeDict: {},
|
||||
curUnitDict: {},
|
||||
cusWeightDict: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
menus() {
|
||||
const mData = this.value.reduce((obj, cur) => {
|
||||
if (!obj[cur.type]) {
|
||||
obj[cur.type] = [];
|
||||
}
|
||||
let tarMenu = cur;
|
||||
if (!tarMenu.methods && tarMenu.igdList.length === 1) {
|
||||
tarMenu = tarMenu.igdList[0];
|
||||
tarMenu.cusStr = `${this.cusWeightDict[tarMenu.cusWeight] || ""}${
|
||||
this.curUnitDict[tarMenu.cusUnit] || ""
|
||||
}`;
|
||||
} else {
|
||||
tarMenu.igdList.forEach((igd) => {
|
||||
igd.cusStr = `${this.cusWeightDict[igd.cusWeight] || ""}${
|
||||
this.curUnitDict[igd.cusUnit] || ""
|
||||
}`;
|
||||
});
|
||||
}
|
||||
obj[cur.type].push(tarMenu);
|
||||
return obj;
|
||||
}, {});
|
||||
const mMenus = Object.keys(mData).map((type) => ({
|
||||
type,
|
||||
typeName: this.menuTypeDict[type],
|
||||
values: mData[type],
|
||||
}));
|
||||
console.log(mMenus);
|
||||
return mMenus;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleOnDetailClick(data) {
|
||||
this.$refs["detailDialogRef"].showDialog(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.menu_detail_wrapper {
|
||||
padding: 0 12px 12px 12px;
|
||||
|
||||
.dishes_item {
|
||||
height: 38px;
|
||||
padding: 0 8px;
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
|
||||
&:active {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.simple_dishes {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.weight_style {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.complex_dishes {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
stdiet-ui/src/views/custom/recipesShow/PlanDrawer/index.vue
Normal file
120
stdiet-ui/src/views/custom/recipesShow/PlanDrawer/index.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
:with-header="false"
|
||||
direction="ltr"
|
||||
size="60%"
|
||||
class="plan_drawer_wrapper"
|
||||
>
|
||||
<div class="header">
|
||||
<span>食谱列表</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-collapse v-model="curPlanId" accordion>
|
||||
<el-collapse-item
|
||||
v-for="plan in data"
|
||||
:key="plan.id"
|
||||
:title="plan.label"
|
||||
:name="plan.id"
|
||||
:class="plan.id === hitPlanId ? 'collapse_item_hit' : ''"
|
||||
>
|
||||
<div
|
||||
v-for="menu in plan.menus"
|
||||
:class="`item ${menu.id === curMenuId ? 'sel_item' : ''}`"
|
||||
:key="menu.id"
|
||||
@click="handleOnCurrentChange(plan.id, menu)"
|
||||
>
|
||||
<div class="item_content">
|
||||
{{ menu.date }}
|
||||
<em class="el-icon-arrow-right" style="font-weight: bold" />
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "planDrawer",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
curPlanId: 0,
|
||||
curMenuId: 0,
|
||||
hitPlanId: 0,
|
||||
};
|
||||
},
|
||||
props: ["data", "planId", "menuId"],
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
},
|
||||
handleOnCurrentChange(planId, menu) {
|
||||
// console.log({ planId, menuId });
|
||||
this.hitPlanId = planId;
|
||||
this.visible = false;
|
||||
this.curMenuId = menu.id;
|
||||
this.curPlanId = planId;
|
||||
|
||||
this.$emit("plan-change", menu);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
planId(val) {
|
||||
this.curPlanId = val;
|
||||
this.hitPlanId = val;
|
||||
},
|
||||
menuId(val) {
|
||||
this.curMenuId = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.plan_drawer_wrapper {
|
||||
.header {
|
||||
padding: 2px 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - 44px);
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item_content {
|
||||
display: flex;
|
||||
padding: 2px 8px 2px 24px;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sel_item {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.collapse_item_hit .el-collapse-item__header {
|
||||
color: #409eff;
|
||||
}
|
||||
.el-collapse-item__header.focusing {
|
||||
color: unset !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
:with-header="false"
|
||||
size="100%"
|
||||
class="user_info_drawer_wrapper"
|
||||
>
|
||||
<div class="header">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-back"
|
||||
@click="handleOnBackClick"
|
||||
class="icon_btn"
|
||||
/>
|
||||
<span>个人信息</span>
|
||||
<span class="hold" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<HealthView v-if="healthyData.type === 0" :data="healthyData.data" />
|
||||
<BodySignView v-else :data="healthyData.data" />
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import HealthView from "@/components/HealthyView";
|
||||
import BodySignView from "@/components/BodySignView";
|
||||
export default {
|
||||
name: "UserInfoDrawer",
|
||||
props: {
|
||||
healthyData: {
|
||||
type: Object,
|
||||
default: {
|
||||
type: 0,
|
||||
data: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
BodySignView,
|
||||
HealthView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
},
|
||||
handleOnBackClick() {
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.user_info_drawer_wrapper {
|
||||
.header {
|
||||
padding: 2px 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
|
||||
.icon_btn {
|
||||
font-size: 24px;
|
||||
padding: 6px;
|
||||
color: #696969;
|
||||
}
|
||||
|
||||
.hold {
|
||||
display: block;
|
||||
width: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
height: calc(100vh - 44px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
stdiet-ui/src/views/custom/recipesShow/index.vue
Normal file
161
stdiet-ui/src/views/custom/recipesShow/index.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="recipes_show_wrapper">
|
||||
<div class="header">
|
||||
<el-button
|
||||
icon="el-icon-date"
|
||||
type="text"
|
||||
class="icon_btn"
|
||||
@click="handleOnPlanClick"
|
||||
/>
|
||||
<img :src="logo" style="width: auto; height: 32px" alt="logo" />
|
||||
<el-button
|
||||
icon="el-icon-user"
|
||||
type="text"
|
||||
class="icon_btn"
|
||||
@click="handleUserInfoClick"
|
||||
/>
|
||||
</div>
|
||||
<div class="content" v-loading="loading">
|
||||
<MenuDetail :value="menuData" :date="curDate" />
|
||||
</div>
|
||||
|
||||
<!-- 食谱计划 -->
|
||||
<PlanDrawer
|
||||
ref="planRef"
|
||||
:data="planList"
|
||||
:planId="curPlanId"
|
||||
:menuId="curMenuId"
|
||||
@plan-change="handleOnPlanChange"
|
||||
/>
|
||||
<!-- 用户信息 -->
|
||||
<UserInfoDrawer ref="userInfoRef" :healthyData="healthyData" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getRecipesPlans,
|
||||
getHealthyInfo,
|
||||
getRecipesMenuInfoApi,
|
||||
} from "@/api/custom/recipesShow";
|
||||
import { dealHealthy } from "@/utils/healthyData";
|
||||
import UserInfoDrawer from "./UserInfoDrawer";
|
||||
import PlanDrawer from "./PlanDrawer";
|
||||
import MenuDetail from "./MenuDetail";
|
||||
import dayjs from "dayjs";
|
||||
import { getProcessMenuData } from "./utils";
|
||||
export default {
|
||||
name: "recipesShow",
|
||||
components: {
|
||||
UserInfoDrawer,
|
||||
PlanDrawer,
|
||||
MenuDetail,
|
||||
},
|
||||
props: ["id"],
|
||||
data() {
|
||||
return {
|
||||
logo: require("@/assets/logo/st_logo.png"),
|
||||
planList: [],
|
||||
curPlanId: 0,
|
||||
curMenuId: 0,
|
||||
curDate: "",
|
||||
loading: false,
|
||||
healthyData: {
|
||||
type: 0,
|
||||
data: {},
|
||||
},
|
||||
menuData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getRecipesPlans(this.id).then((response) => {
|
||||
if (response.code === 200) {
|
||||
let curPlanId, curMenuId, curDate;
|
||||
const toDay = dayjs().format("YYYY-MM-DD");
|
||||
this.planList = response.data.map((plan) => ({
|
||||
menus: plan.menus.map((menu, idx) => {
|
||||
const date = dayjs(plan.startDate)
|
||||
.add(idx, "day")
|
||||
.format("YYYY-MM-DD");
|
||||
if (toDay === date) {
|
||||
curPlanId = plan.id;
|
||||
curMenuId = menu.id;
|
||||
curDate = date;
|
||||
}
|
||||
return {
|
||||
date,
|
||||
id: menu.id,
|
||||
};
|
||||
}),
|
||||
label: `第${plan.startNumDay} 至 ${plan.endNumDay}天`,
|
||||
id: plan.id,
|
||||
}));
|
||||
if (!curMenuId) {
|
||||
curMenuId = this.planList[0].menus[0].id;
|
||||
curPlanId = this.planList[0].id;
|
||||
curDate = this.planList[0].menus[0].date;
|
||||
}
|
||||
this.curMenuId = curMenuId;
|
||||
this.curPlanId = curPlanId;
|
||||
this.curDate = curDate;
|
||||
|
||||
this.fetchRecipesInfo(this.curMenuId);
|
||||
}
|
||||
});
|
||||
getHealthyInfo(this.id).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.healthyData = {
|
||||
type: response.data.type,
|
||||
data: dealHealthy(response.data.customerHealthy),
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleOnPlanClick() {
|
||||
this.$refs["planRef"].showDrawer();
|
||||
},
|
||||
handleUserInfoClick() {
|
||||
this.$refs["userInfoRef"].showDrawer();
|
||||
},
|
||||
fetchRecipesInfo(id) {
|
||||
this.loading = true;
|
||||
getRecipesMenuInfoApi(id).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.loading = false;
|
||||
this.menuData = getProcessMenuData(response.data);
|
||||
console.log(this.menuData);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleOnPlanChange({ date, id }) {
|
||||
this.curDate = date;
|
||||
this.fetchRecipesInfo(id);
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recipes_show_wrapper {
|
||||
height: 100vh;
|
||||
|
||||
.header {
|
||||
padding: 2px 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
|
||||
.icon_btn {
|
||||
font-size: 24px;
|
||||
padding: 6px;
|
||||
color: #696969;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - 44px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
stdiet-ui/src/views/custom/recipesShow/utils.js
Normal file
42
stdiet-ui/src/views/custom/recipesShow/utils.js
Normal file
@ -0,0 +1,42 @@
|
||||
export function getProcessMenuData(menuData) {
|
||||
return menuData.reduce((arr, cur) => {
|
||||
if (
|
||||
cur.dishesId > -1 &&
|
||||
cur.name &&
|
||||
cur.igdList.length > 0 &&
|
||||
cur.type !== "0"
|
||||
) {
|
||||
arr.push({
|
||||
id: cur.id,
|
||||
dishesId: cur.dishesId,
|
||||
name: cur.name,
|
||||
menuId: cur.menuId,
|
||||
methods: cur.methods,
|
||||
type: cur.type,
|
||||
isMain: cur.isMain,
|
||||
igdList: cur.igdList.reduce((igdArr, igdData) => {
|
||||
if (igdData.id > 0) {
|
||||
const tarDetail = cur.detail.find(obj => obj.id === igdData.id);
|
||||
igdArr.push({
|
||||
id: igdData.id,
|
||||
name: igdData.name,
|
||||
carbonRatio: igdData.carbonRatio,
|
||||
fatRatio: igdData.fatRatio,
|
||||
proteinRatio: igdData.proteinRatio,
|
||||
cusUnit: tarDetail ? tarDetail.cus_unit : igdData.cusUnit,
|
||||
cusWeight: tarDetail
|
||||
? parseFloat(tarDetail.cus_weight)
|
||||
: igdData.cusWeight,
|
||||
weight: tarDetail ? parseFloat(tarDetail.weight) : igdData.weight,
|
||||
notRec: igdData.notRec,
|
||||
rec: igdData.rec,
|
||||
type: igdData.type
|
||||
});
|
||||
}
|
||||
return igdArr;
|
||||
}, [])
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
}
|
||||
Reference in New Issue
Block a user