食谱展示界面开发
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>
|
||||
Reference in New Issue
Block a user