@ -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, | |||
}) | |||
} | |||
}) | |||
@ -0,0 +1,3 @@ | |||
{ | |||
"usingComponents": {} | |||
} |
@ -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"><</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> |
@ -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); | |||
} |