131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template>
|
||
<view class="pad">
|
||
<view class="top">
|
||
<i class="iconfont" @click="back()"></i>
|
||
<image src="../../static/img/icon.png" @click="tohome()"></image>
|
||
<view class="search" @click="tosearch()">
|
||
<i class="iconfont"></i>
|
||
<span>搜索百万菜谱</span>
|
||
</view>
|
||
<view class="sousuo" @click="tosearch()">搜索</view>
|
||
<view class="caipu" @click="totype()">菜谱大全</view>
|
||
</view>
|
||
<view class="content">
|
||
<image :src="data.backImg" class="back"></image>
|
||
<view class="content_1">
|
||
<view class="text">
|
||
<view class="text_1">{{ data.title }}</view>
|
||
<view class="posttime">{{ data.posttime }}</view>
|
||
<view class="list">
|
||
<view class="list_1" v-for="(v,i) in data.Statistics" :key="i">
|
||
<span>{{ v.title }}</span>
|
||
<view class="jdw">
|
||
<view class="jd" :style="v.proportion"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips">*tips: 中国居民每日推荐摄入营养所得占比数据</view>
|
||
<view class="cpargsw" v-if="data.stepInfo">
|
||
<view class="title_2" v-for="(v,i) in data.stepInfo.arr" :key="i">
|
||
<i :style="{'background-position-y':v.position*2+'rpx'}"></i>
|
||
<span>{{v.title}}</span>
|
||
</view>
|
||
|
||
</view>
|
||
<view v-if="data.stepInfo">
|
||
<view class="text_2" :class="onshou?'':'showdata'">
|
||
{{data.stepInfo.message}}
|
||
</view>
|
||
</view>
|
||
<view class="text_2_1" @click="show()">
|
||
<span>展开</span>
|
||
<i class="iconfont ssss" :class="onshou?'shang':'xia'"></i>
|
||
</view>
|
||
<view class="text_3">主料</view>
|
||
<view class="text_3_1" v-if="data.material">
|
||
<view class="text_3_2" v-for="(v,i) in data.material.accessories" :key="i">
|
||
<view class="list_title">{{v.title}}</view>
|
||
<view class="list_nums">{{v.nums}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="text_3">辅料</view>
|
||
<view class="text_3_1" v-if="data.material">
|
||
<view class="text_3_2" v-for="(v,i) in data.material.main" :key="i">
|
||
<view class="list_title">{{v.title}}</view>
|
||
<view class="list_nums">{{v.nums}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="step">
|
||
<view v-for="(v,i) in data.DetailedSteps" :key="i">
|
||
|
||
<!--不是成品图的情况-->
|
||
<view v-if="!Array.isArray(v.step_img)">
|
||
<view class="step_list">
|
||
|
||
<!--是否是烹饪技巧，烹饪技巧没有图片，所以需要判断-->
|
||
<image mode="widthFix" :src="v.step_img" v-if="v.step_title!='烹饪技巧'"></image>
|
||
<span class="step_list_1">{{v.step_title}}</span>
|
||
</view>
|
||
<span class="title_0">{{v.step_text}}</span>
|
||
</view>
|
||
|
||
<!--是成品图的布局，你需要再写一套成品图的html布局-->
|
||
<view v-else>显示成品图</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
urls: '',
|
||
data: [],
|
||
onshou: false //控制显示隐藏
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.urls = option.url
|
||
this.getinfo()
|
||
},
|
||
methods: {
|
||
async getinfo() {
|
||
this.data = await this.$http.index.info({
|
||
url: this.urls
|
||
})
|
||
console.log("left", this.data)
|
||
},
|
||
tosearch() {
|
||
uni.navigateTo({
|
||
url: '/pages/search/search'
|
||
})
|
||
},
|
||
tohome() {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
totype() {
|
||
uni.switchTab({
|
||
url: '/pages/classification/classification'
|
||
})
|
||
},
|
||
back() {
|
||
uni.navigateBack()
|
||
},
|
||
show() {
|
||
this.onshou = !this.onshou
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "../../common/less/page/info.less";
|
||
</style>
|