1

pages/food/index.js

@@ -16,8 +16,15 @@ Page({
     height: app.globalData.height * 2 + 25,
     windowHeight: app.globalData.windowHeight,
     navbarData: {
-      name: '卡路里计算'
+      name: '本周菜谱'
     },
+    list: [],
+    style: {
+      one: 0,
+      two: 0,
+      thr: 0,
+      total: 0
+    }
   },
 
   // 返回页面
@@ -43,7 +50,17 @@ Page({
       },
       data: {},
       success: res => {
-        console.log(res.data);
+        for (const val of res.data.data) {
+          let style = {}
+          style.one = val.arrange.breakfast.length > 0 ? 30 * val.arrange.breakfast.length : 30;
+          style.two = val.arrange.lunch.length > 0 ? 30 * val.arrange.lunch.length : 30;
+          style.thr = val.arrange.dinner.length > 0 ? 30 * val.arrange.dinner.length : 30;
+          style.total = style.one + style.two + style.thr;
+          val.style = style;
+        }
+        console.log(res.data.data);
+        this.setData({ list: res.data.data });
+        // this.searchStyle(res.data.data)
       },
       error: err => {
         wx.showToast({
@@ -53,6 +70,19 @@ Page({
       }
     })
   },
+  // 计算高度
+  searchStyle: function (data) {
+    for (const val of data) {
+      let data = {}
+      data.one = val.arrange.breakfast.length > 0 ? 30 * val.arrange.breakfast.length : 30;
+      data.two = val.arrange.lunch.length > 0 ? 30 * val.arrange.lunch.length : 30;
+      data.thr = val.arrange.dinner.length > 0 ? 30 * val.arrange.dinner.length : 30;
+      data.total = data.one + data.two + data.thr;
+      console.log(data);
+      this.setData({ style: data })
+
+    }
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成

pages/food/index.wxml

@@ -1,4 +1,39 @@
 <nav-bar navbar-data='{{navbarData}}' bind:back="back"></nav-bar>
 <view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
-  本周菜谱
+  <view class="one">
+    <view>日期</view>
+    <view>餐时</view>
+    <view>菜品</view>
+    <view>热量</view>
+  </view>
+  <view class="two" style="height:{{windowHeight-height-35}}px">
+    <view class="list" wx:key="item" wx:for="{{list}}" data-id="{{item.id}}">
+      <view class="two_1" style="height:{{item.style.total}}px;line-height:{{item.style.total}}px;">{{item.date}}</view>
+      <view class="two_2">
+        <view style="height:{{item.style.one}}px;line-height:{{item.style.one}}px;">早餐</view>
+        <view style="height:{{item.style.two}}px;line-height:{{item.style.two}}px;">午餐</view>
+        <view style="height:{{item.style.thr}}px;line-height:{{item.style.thr}}px;">晚餐</view>
+      </view>
+      <view class="two_3">
+        <view class="breakfast" style="height:{{item.style.one}}px;">
+          <view class="breakfast_1" wx:key="break" wx:for="{{item.arrange.breakfast}}" wx:for-item="break">
+            <text>{{break.name}}</text>
+            <text>{{break.reserve}}(大卡)</text>
+          </view>
+        </view>
+        <view class="breakfast" style="height:{{item.style.two}}px;">
+          <view class="breakfast_1" wx:key="lun" wx:for="{{item.arrange.lunch}}" wx:for-item="lun">
+            <text>{{lun.name}}</text>
+            <text>{{lun.reserve}}(大卡)</text>
+          </view>
+        </view>
+        <view class="breakfast" style="height:{{item.style.thr}}px;">
+          <view class="breakfast_1" wx:key="din" wx:for="{{item.arrange.dinner}}" wx:for-item="din">
+            <text>{{din.name}}</text>
+            <text>{{din.reserve}}(大卡)</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </view>

pages/food/index.wxss

@@ -1 +1,100 @@
-/* pages/food/index.wxss */
+.main {
+  float: left;
+  width: 97%;
+  background-color: #f1f1f1;
+  padding: 0 5px;
+  margin: 5px 0;
+}
+
+.main .one {
+  float: left;
+  width: 100%;
+  background-color: #ffffff;
+}
+
+.main .one view {
+  float: left;
+  width: 24.4%;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid #f1f1f1;
+  text-align: center;
+  font-size: 12px;
+}
+
+.main .two {
+  float: left;
+  width: 100%;
+  overflow-y: auto;
+  background-color: #ffffff;
+}
+
+.main .two .list {
+  float: left;
+  width: 100%;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.main .two .list .two_1 {
+  float: left;
+  width: 25%;
+  border-right: 1px solid #f1f1f1;
+  font-size: 12px;
+  text-align: center;
+}
+
+.main .two .list .two_2 {
+  float: left;
+  width: 24.5%;
+  text-align: center;
+  border-right: 1px solid #f1f1f1;
+  font-size: 12px;
+  text-align: center;
+}
+
+.main .two .list .two_2 view {
+  font-weight: bold;
+  color: #409eff;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.main .two .list .two_2 view:last-child {
+  border-bottom: none;
+}
+
+.main .two .list .two_3 {
+  float: left;
+  width: 49.9%;
+  font-size: 12px;
+  text-align: center;
+}
+
+.main .two .list .two_3 .breakfast {
+  float: left;
+  width: 100%;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.main .two .list .two_3 .breakfast:last-child {
+  border-bottom: none;
+}
+
+.main .two .list .two_3 .breakfast .breakfast_1 {
+  float: left;
+  width: 100%;
+}
+
+.main .two .list .two_3 .breakfast .breakfast_1 text {
+  float: left;
+  width: 43.6%;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  border-right: 1px solid #f1f1f1;
+  border-bottom: 1px solid #f1f1f1;
+  padding: 0 5px;
+}
+
+.main .two .list .two_3 .breakfast .breakfast_1:last-child text {
+  border-bottom: none;
+}

project.config.json

@@ -40,7 +40,7 @@
   },
   "compileType": "miniprogram",
   "libVersion": "2.17.3",
-  "appid": "wx2c50f82dae28a9f5",
+  "appid": "wxe8b4c4d5e87a7d31",
   "projectname": "smart-canteen",
   "debugOptions": {
     "hidedInDevtools": []