Browse Source

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

master
李思涵 3 years ago
parent
commit
9636bde014
4 changed files with 331 additions and 0 deletions
  1. +107
    -0
      前端/miniprogram/pages/menu/menu.js
  2. +3
    -0
      前端/miniprogram/pages/menu/menu.json
  3. +91
    -0
      前端/miniprogram/pages/menu/menu.wxml
  4. +130
    -0
      前端/miniprogram/pages/menu/menu.wxss

+ 107
- 0
前端/miniprogram/pages/menu/menu.js View File

@ -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,
})
}
})

+ 3
- 0
前端/miniprogram/pages/menu/menu.json View File

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

+ 91
- 0
前端/miniprogram/pages/menu/menu.wxml View File

@ -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>

+ 130
- 0
前端/miniprogram/pages/menu/menu.wxss View File

@ -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);
}

Loading…
Cancel
Save