上传文件至 '前端/miniprogram/pages/menu'

前端/miniprogram/pages/menu/menu.js

@@ -0,0 +1,107 @@
+const app = getApp();
+Page({
+    data: {
+      detailed_id:null,
+      detailed_name:null,
+      detailed_material:null,
+      detailed_steps:null,
+      detailed_time:null,
+      loading_1:true,
+      loading_2:true,
+    },
+
+    onLoad:function(options){
+      var item = JSON.parse(options.item)
+      var that = this
+      this.setData({
+        detailed_id:Number(item.id),
+        detailed_name:item.name,
+        detailed_time:Number(item.time),
+      })
+      console.log(item.id)
+      wx.cloud.callContainer({
+        "config": {
+          "env": "prod-2g058voqbea31ecb"
+        },
+        "path": "menu/materials/",
+        "header": {
+          "X-WX-SERVICE": "django-5198",
+          "content-type": "application/x-www-form-urlencoded;charset=utf-8"
+        },
+        "method": "GET",
+        data: {id:item.id},
+        success(res){
+          
+          let arr = app.parse_json(res)
+          that.setData({
+            detailed_material: arr,
+            loading_1:false
+          })
+        }
+      })
+      wx.cloud.callContainer({
+        "config": {
+          "env": "prod-2g058voqbea31ecb"
+        },
+        "path": "menu/steps/",
+        "header": {
+          "X-WX-SERVICE": "django-5198",
+          "content-type": "application/x-www-form-urlencoded;charset=utf-8"
+        },
+        "method": "GET",
+        data: {id:item.id},
+        success(res){
+          console.log(res.data)
+          let arr = app.parse_json(res)
+          that.setData({
+            detailed_steps: arr,
+            loading_2:false
+          })
+        }
+      })
+      
+    },
+
+
+    // get_detailedmenu(){
+    //   var that = this
+    //   wx.cloud.callContainer({
+    //     "config": {
+    //       "env": "prod-2g058voqbea31ecb"
+    //     },
+    //     "path": "menu/menus/",
+    //     "header": {
+    //       "X-WX-SERVICE": "django-5198",
+    //       'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
+    //     },
+    //     "method": "GET",
+    //     data:{id:this.data.id},
+    //     success(res){
+    //       let arr = app.parse_json(res)
+    //       that.setData({
+    //         detailedmenu:arr,
+    //         detailed_id:arr,
+    //         detailed_meterial:arr,
+    //         detailed_steps:arr,
+    //         detailed_time:arr,
+    //       })
+    //     }
+    //   })
+    // },
+    // onShow(){
+    //   this.get_detailedmenu()
+    // },
+
+
+    back(){
+      wx.navigateBack({
+        delta: 3,
+      })
+    },
+    back_dishes(){
+        wx.navigateBack({
+          delta: 1,
+        })
+      }
+  })
+  

前端/miniprogram/pages/menu/menu.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

前端/miniprogram/pages/menu/menu.wxml

@@ -0,0 +1,91 @@
+<!--menu.wxml-->
+<view class="loading" wx:if="{{!((!loading_1)&&(!lodding_2))}}">加载中</view>
+<view class="page">
+  <view class="profile">
+    <!-- <view wx:if="{{time_type==0}}">
+      <view>菜谱1</view>
+    </view> -->
+    <view >
+      {{detailed_name}}
+    </view>
+  </view>
+
+  <view style="position: fixed;left:4%;top:3%" bindtap="back_dishes" hover-class="back">
+    <text style="font-size: 60rpx;padding-left: 10rpx;padding-right:20rpx;background-color: rgba(255, 255, 255, 0.5);border-radius: 20%;box-shadow: 0px 0px 20px 0 rgba(136, 134, 118, 0.37);color:peru;" decode="true">&lt;</text>
+  </view>
+
+  <!--菜谱结果陈列-->
+  <view class="TotalTime sameStyle">
+    <view >
+      {{detailed_time}}分钟
+    </view>
+    <!-- <view>风味：咸</view> -->
+  </view>
+
+  <view class="material sameStyle">
+
+    <view class="title">
+      原材料
+    </view>
+    <scroll-view scroll-y="true" class="materialHeight">
+      <view wx:for="{{detailed_material}}"  data-product="{{item}}">
+                {{item.name}} {{item.amount}}
+            </view>
+      <!-- <view class="item">
+        小麦淀粉30g
+      </view> -->
+    </scroll-view>
+  </view>
+  <view class="step sameStyle">
+
+    <view class="title title1">
+      步骤
+    </view>
+    <scroll-view scroll-y="true" class="materialHeight1">
+      <view class="items" >
+        <!-- <view class="top"> -->
+          <view wx:for="{{detailed_steps}}"  data-product="{{item}}" >
+            步骤{{item.order}}
+            <view class="time" >总耗时 {{item.time}}</view>
+            <view class="bot" >
+              {{item.text}}
+            </view>
+          </view>
+        <!-- </view> -->
+      </view>
+      <!-- <view class="items">
+        <view class="top">
+          <view>步骤二</view>
+          <view class="time">总耗时 05：00</view>
+        </view>
+        <view class="bot">
+          水与麦苗进行煮，并加入10g的白砂糖。麦苗煮烂，采用料理机搅拌搅碎也可以。过筛，滤出麦苗渣子。
+        </view>
+      </view>
+      <view class="items">
+        <view class="top">
+          <view>步骤三</view>
+          <view class="time">总耗时 05：00</view>
+        </view>
+        <view class="bot">
+          水与麦苗进行煮，并加入10g的白砂糖。麦苗煮烂，采用料理机搅拌搅碎也可以。过筛，滤出麦苗渣子。
+        </view>
+      </view>
+      <view class="items">
+        <view class="top">
+          <view>步骤四</view>
+          <view class="time">总耗时 05：00</view>
+        </view>
+        <view class="bot">
+          水与麦苗进行煮，并加入10g的白砂糖。麦苗煮烂，采用料理机搅拌搅碎也可以。过筛，滤出麦苗渣子。
+        </view>
+      </view> -->
+    </scroll-view>
+  </view>
+
+<view  bindtap="back" class="bottom_button" hover-class="bottom_button_press">
+    做菜结束
+</view>
+
+
+</view>

前端/miniprogram/pages/menu/menu.wxss

@@ -0,0 +1,130 @@
+/**dishes.wxss**/
+page {
+  background-image: linear-gradient(-20deg, #f0e0c1 0%, #fdd6bd 100%);
+  }
+
+.profile {
+  padding: 30rpx;
+  padding-top: 70rpx;
+  margin: 0 auto;
+  text-align: center;
+  font-weight: bold;
+  font-size: 120%;
+  color: #B8860B;
+  /* border-radius: 40rpx 40rpx 40rpx 40rpx; */
+  box-shadow: 0px 1px 4px rgba(26, 77, 160, 0.16), inset 3px 3px 3px rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+.sameStyle {
+  font-size: 32rpx;
+  border-radius: 10rpx;
+  /* background-color: #fff; */
+  box-shadow: 0px 1px 4px rgba(26, 77, 160, 0.16), inset 3px 3px 3px rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.75);
+  margin: 20rpx 3%;
+}
+
+.TotalTime {
+  padding: 14rpx 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+.materialHeight {
+  height: calc(25vh - 80rpx);
+  margin-left: 20rpx;
+  width: 100%;
+}
+
+.material {
+  height: 25vh;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 28rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-weight: bold;
+  padding-left: 20rpx;
+}
+
+.item {
+  padding: 10rpx 0;
+  margin: 0 20rpx;
+}
+
+.step {
+  height: 50vh;
+  overflow: hidden;
+}
+
+.materialHeight1 {
+  height: calc(50vh - 80rpx);
+  width: 100%;
+}
+
+.items {
+  margin: 3rpx 20rpx;
+  padding: 20rpx;
+  /* background: #e0ac7f; */
+  box-shadow: 0px 0px 4px #6d6a6b29;
+  border-radius: 10rpx;
+  margin-bottom: 20rpx;
+  
+  height:100%;
+  justify-content: space-between;
+}
+
+/* .top {
+  display: flex;
+  align-items: center;
+  height:100%;
+  justify-content: space-between;
+} */
+
+.bot {
+  margin: 20rpx 0;
+  color: #666666;
+}
+.time{
+  color: #e05f5f;
+}
+
+.loading{
+    text-align: center;
+    width: 100%;
+    padding-top:40%;
+    z-index: 2;
+    margin: auto;
+    position: fixed;
+    font-weight:bold;
+    font-size: 20px;
+    color: rgb(0, 0, 0);
+    height: 100%;
+}
+
+.bottom_button{
+    position: fixed;
+    bottom: 0px;
+    text-align: center;
+    width: 100%;
+    padding-top: 5%;
+    padding-bottom: 1%;
+    z-index: 2;
+    margin: auto;
+    border-radius: 20px 20px 20px 20px;
+    font-weight:bold;
+    font-size: 20px;
+    background: rgba( 248, 138, 138, 0.3 );
+  
+    backdrop-filter: blur( 20px );
+  
+  }
+
+  .bottom_button_press{
+    background: rgba(255, 0, 0, 0.055);
+}