first commit

历届学生/吴欣阳/项目开发/美食app/pages/info/info.vue

@@ -0,0 +1,130 @@
+<template>
+	<view class="pad">
+		<view class="top">
+			<i class="iconfont" @click="back()">&#xe601</i>
+			<image src="../../static/img/icon.png" @click="tohome()"></image>
+			<view class="search" @click="tosearch()">
+				<i class="iconfont">&#xe647</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'">&#xe601</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>