kitchendDevice/pages/index/index.vue

<template>
	<view class="content">
		<!-- 搜索 -->
		<search @handleSearch="handleSearch"></search>
		<!-- 轮播 -->
		<view class="f_banner footbox" v-if="fimages.length">
			<swiper class="swiper" circular="true" previous-margin="15px" next-margin="15px">
				<swiper-item v-for="(ite, ind) in fimages" :key="ind" @click="handleDetail(ite)">
					<image :src="ite.image" mode="aspectFill">
						<view class="item">
							<view class="title">{{ite.title}}</view>
							<view class="name">
								<image :src="ite.head"></image>
								<text>{{ite.name}}</text>
							</view>
							<view class="zan" @click="handleZan(ite)">
								<icon class="iconfont" :class="[ite.iszan?'icon-icon3':'icon-icon_collect']"></icon>
							</view>
						</view>
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 功能 -->
		<view class="tools footbox">
			<view class="list" v-for="(ite,ind) in tools" :key="ind" @tap="navTo(ite.path)">
				<!-- <image :src="ite.image"></image> -->
				<view>
					<icon :class="ite.icon"></icon>
				</view>

				<text>{{ite.text}}</text>
			</view>
		</view>
		<!-- 食谱 -->
		<view class="itemTag footbox">
			<view class="tab_list">
				<view class="tabbar" v-for="(ite,ind) in list" :key="ind" @click="handleToggle(ind)">
					<view :class="[index ==ind?'active':'']">{{ite.name}}</view>
				</view>
			</view>
			<foodList></foodList>
		</view>

	</view>
</template>

<script>
	import search from "../../components/search.vue"
	import foodList from "../../components/list.vue"
	export default {
		data() {
			return {
				index: 0,
				fimages: [],
				list: [{
						"name": "早餐"
					},
					{
						"name": "午餐"
					},
					{
						"name": "晚餐"
					},
					{
						"name": "酒水"
					}
				],
				tools: [{
					path: "/pages/menu/menu",
					text: "菜谱分类",
					icon: "t-icon t-icon-shipinyinliao2-chengzi "
				}, {
					path: "/pageTwo/me/mymenu?pageName=我的收藏",
					text: "我的收藏",
					icon: "t-icon t-icon-shipinbeifen "
				}, {
					path: "/pages/count/count",
					text: "热量计算",
					icon: "t-icon t-icon-shiwureliang"
				}, {
					path: "pageTwo/me/record",
					text: "饮食记录",
					icon: "t-icon t-icon-shouyedaohangtubiao-jiankangshipin"
				}],
			}
		},
		components: {
			search,
			foodList
		},
		onShow(options) {
			let that = this
			that.fimages = that.$json.fimages
		},
		methods: {
			// 餐食切换
			handleToggle(index) {
				let that = this
				that.index = index
			},
			// 商品详情
			handleDetail() {
				uni.navigateTo({
					url: "/pageTwo/me/menudetail"
				})
			},
			// 搜索
			handleSearch(ite) {
				console.log("首页搜索", ite)
			},
			// 点赞
			handleZan() {},
			// 功能页面跳转
			navTo(url) {
				// if (!uni.getStorageSync('token')) {
				// 	return
				// }
				uni.navigateTo({
					url
				})
				uni.switchTab({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.f_banner {
		width: 100% !important;
		height: 450rpx;
		margin-top: 50px;

		/deep/swiper {
			height: 450rpx;
		}

		image {
			width: calc(100% - 10px);
			height: 100%;
			background-size: 100%;
			margin: 0 5px;
			border-radius: 10px;
		}
	}

	.tools {
		width: calc(100% - 30px);
		background: #fff;
		display: flex;
		border-radius: 5px;
		margin-top: 35px !important;
		justify-content: space-between;

		.list {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 10px;
			justify-content: center;

			image,
			icon {
				width: 55px;
				height: 55px;

			}

			view {
				width: 55px;
				height: 55px;
				background-color: #fff;
				margin-top: -20px;
				border-radius: 50%;
				text-align: center;
				margin-bottom: 5px;
			}

			icon {
				margin-top: 10px;
				width: 35px;
				height: 35px;
			}

			text {
				display: block;
				width: 100%;
				text-align: center;
			}
		}
	}

	.tab_list {
		display: flex;
		justify-content: left;

		.tabbar {
			padding: 0 10px;
			font-size: 16px;
			font-weight: bold;
		}

		.active {
			color: $mainColor;
			border-bottom: 2px solid $mainColor;
		}
	}

	.itemTag {
		margin-top: 20px !important;
	}

	.t-icon-shipinyinliao2-chengzi {
		width: 40px !important;
		height: 33px !important;
	}
</style>