!198 调整食谱界面

Merge pull request !198 from 德仔/recipes_show

stdiet-ui/src/views/custom/recipesShow/MenuDetail/DishesDetailDialog/index.vue

@@ -4,7 +4,6 @@
     :title="title"
     width="80%"
     top="30%"
-    :close-on-click-modal="false"
     class="dishes_detail_dialog_wrapper"
   >
     <section class="section_zone">

stdiet-ui/src/views/custom/recipesShow/MenuDetail/index.vue

@@ -18,25 +18,54 @@
     <el-card v-for="obj in menus" :key="obj.type" style="margin-top: 12px">
       <div slot="header">
         <div class="header_style">
-          <span>{{ obj.typeName }}</span>
+          <span style="font-weight: bold">{{ obj.typeName }}</span>
           <span class="time">{{ menuTypeTimeDict[obj.type] }}</span>
         </div>
       </div>
       <div v-for="mObj in obj.values" :key="mObj.id">
         <div class="dishes_item">
           <div
-            v-if="!mObj.methods && !mObj.remark && !mObj.igdList"
+            v-if="mObj.igdList.length === 1"
             class="simple_dishes"
+            @click="handleOnDetailClick(mObj)"
           >
-            <span>{{ mObj.name }}</span>
+            <span>
+              <span>
+                {{ mObj.igdList[0].name }}
+              </span>
+              <em
+                v-if="mObj.remark || mObj.methods"
+                class="el-icon-collection-tag"
+                style="color: #1890ff; margin-left: 8px"
+              />
+            </span>
             <span class="weight_style">
-              <span style="margin-right: 20px">{{ mObj.cusStr }}</span>
-              <span>{{ mObj.weight }}克</span>
+              <span style="margin-right: 20px">{{
+                mObj.igdList[0].cusStr
+              }}</span>
+              <span>{{ mObj.igdList[0].weight }}克</span>
             </span>
           </div>
-          <div v-else class="complex_dishes" @click="handleOnDetailClick(mObj)">
-            <span>{{ mObj.name }}</span>
-            <em class="el-icon-arrow-right" />
+          <div v-else style="padding: 8px 0" @click="handleOnDetailClick(mObj)">
+            <span>
+              <span style="color: #1890ff">{{ mObj.name }}</span>
+              <em
+                class="el-icon-collection-tag"
+                style="color: #1890ff; margin-left: 8px"
+              />
+            </span>
+            <div
+              class="simple_dishes"
+              style="margin-left: 16px; height: 30px"
+              v-for="igd in mObj.igdList"
+              :key="igd.id"
+            >
+              <span>{{ igd.name }} </span>
+              <span class="weight_style">
+                <span style="margin-right: 20px">{{ igd.cusStr }}</span>
+                <span>{{ igd.weight }}克</span>
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -82,24 +111,24 @@ export default {
         if (!obj[cur.type]) {
           obj[cur.type] = [];
         }
-        let tarMenu = cur;
-        if (
-          !tarMenu.methods &&
-          !tarMenu.remark &&
-          tarMenu.igdList.length === 1
-        ) {
-          tarMenu = tarMenu.igdList[0];
-          tarMenu.cusStr = `${this.cusWeightDict[tarMenu.cusWeight] || ""}${
-            this.cusUnitDict[tarMenu.cusUnit] || ""
+        // let tarMenu = cur;
+        // if (
+        //   !tarMenu.methods &&
+        //   !tarMenu.remark &&
+        //   tarMenu.igdList.length === 1
+        // ) {
+        //   tarMenu = tarMenu.igdList[0];
+        //   tarMenu.cusStr = `${this.cusWeightDict[tarMenu.cusWeight] || ""}${
+        //     this.cusUnitDict[tarMenu.cusUnit] || ""
+        //   }`;
+        // } else {
+        cur.igdList.forEach((igd) => {
+          igd.cusStr = `${this.cusWeightDict[igd.cusWeight] || ""}${
+            this.cusUnitDict[igd.cusUnit] || ""
           }`;
-        } else {
-          tarMenu.igdList.forEach((igd) => {
-            igd.cusStr = `${this.cusWeightDict[igd.cusWeight] || ""}${
-              this.cusUnitDict[igd.cusUnit] || ""
-            }`;
-          });
-        }
-        obj[cur.type].push(tarMenu);
+        });
+        // }
+        obj[cur.type].push(cur);
         return obj;
       }, {});
       const mMenus = Object.keys(mData).map((type) => ({
@@ -107,14 +136,16 @@ export default {
         typeName: this.menuTypeDict[type],
         values: mData[type],
       }));
-      // console.log(mMenus);
+      console.log(mMenus);
       return mMenus;
     },
     ...mapState(["cusUnitDict", "cusWeightDict", "menuTypeDict"]),
   },
   methods: {
     handleOnDetailClick(data) {
-      this.$refs["detailDialogRef"].showDialog(data);
+      if (data.remark || data.methods) {
+        this.$refs["detailDialogRef"].showDialog(data);
+      }
     },
     handleOnShoppingPlanClick() {
       this.$refs["shoppingPlanRef"].showDrawer({
@@ -167,7 +198,6 @@ export default {
   }
 
   .dishes_item {
-    height: 38px;
     padding: 0 8px;
     border-bottom: 1px solid #dfe6ec;
 
@@ -178,12 +208,13 @@ export default {
 
     .simple_dishes {
       display: flex;
-      height: 100%;
+      height: 38px;
       align-items: center;
       justify-content: space-between;
 
       .weight_style {
         width: 40%;
+
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -191,10 +222,9 @@ export default {
     }
 
     .complex_dishes {
-      display: flex;
-      height: 100%;
-      align-items: center;
-      justify-content: space-between;
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
     }
   }
 }

stdiet-ui/src/views/custom/recipesShow/index.vue

@@ -7,7 +7,6 @@
         class="icon_btn"
         @click="handleOnPlanClick"
       />
-      <!-- <img :src="logo" style="width: auto; height: 32px" alt="logo" /> -->
       <span>{{ curDate }}</span>
       <el-button
         icon="el-icon-user"