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.id)">
					<image :src="ite.image" mode="aspectFill">
						<view class="item">
							<view class="title">{{ite.title}}</view>
							<view class="name">
								<image :src="ite.create_user_head_pic"></image>
								<text>{{ite.create_user_nickname}}</text>
							</view>
							<view class="zan" @click="handleZan(ite)">
								<icon class="iconfont"
									:class="[ite.is_me_like_it=='yes'?'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.jump_url)">
				<view>
					<image :src="ite.icon"></image>
				</view>
				<text>{{ite.name}}</text>
			</view>
		</view>
		<!-- 食谱 -->
		<view class="itemTag footbox">
			<view class="tab_list">
				<scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
					<view class="tabbar" v-for="(ite,ind) in menu" :key="ind" @click="handleToggle(ind)">
						<view :class="[index ==ind?'active':'']">{{ite.name}}</view>
					</view>
				</scroll-view>
			</view>
			<foodList :list="footlist"></foodList>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import search from "../../components/search.vue"
	import foodList from "../../components/list.vue"
	export default {
		data() {
			return {
				index: 0,
				fimages: [],
				list: [],
				tools: [],
				footlist: [],
			}
		},
		components: {
			search,
			foodList
		},
		computed: {
			...mapState(["menuList"]),
			menu() {
				let that = this
				return that.menuList
			},
		},
		onLoad() {
			let that = this
			that.handleHomeInfo()
		},
		onShow() {},
		methods: {
			// 首页
			handleHomeInfo() {
				let that = this
				that.$model.getHomeInfo({}).then(res => {
					if (res.code != 0) return
					that.fimages = res.data.banner
					that.tools = res.data.jingang_region
					that.handleCookListLabel()
				})
			},
			// 餐食切换
			handleToggle(ind) {
				let that = this
				that.index = ind
				that.footlist = []
				that.handleCookListLabel()
			},
			// 商品详情
			handleDetail(id) {
				uni.navigateTo({
					url: "/pageTwo/me/menudetail?id=" + id
				})
			},
			// 菜谱列表
			handleCookListLabel() {
				let that = this
				that.$model.getCookListLabel({
					cook_label: that.menu.length ? that.menu[that.index].id : 0,
					page: 1,
				}).then(res => {
					if (res.code != 0) return
					that.footlist = res.data.content_list

				})
			},
			// 搜索
			handleSearch(ite) {
				let that = this
				console.log("搜索", ite)
				that.page = 1
				that.footlist = []
				if (ite == '') {
					that.index = 0
					that.handleCookListLabel()
				} else {
					that.$model.getHomeSearch({
						search_data: ite
					}).then(res => {
						if (res.code != 0) return
						that.index = null
						that.footlist = res.data
					})
				}
			},
			// 点赞
			handleZan() {

			},
			// 功能页面跳转
			navTo(url) {
				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: 35px;
				height: 35px;
				margin-top: 10px;

			}

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

	.tab_list {
		display: flex;
		justify-content: space-between;

		.scroll-menu {
			width: 100%;
			white-space: nowrap;

			view {
				display: inline-block;
				padding: 10px ;

				text {
					display: block;
					width: 100%;
					text-align: center;
					margin-top: 10px;
				}
			}
		}

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

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

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

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