shengxian/pages/index/category.vue

<!-- 分类 -->
<template>
	<view class="category-box">
		<view class="navbar">
			<view>
				<!-- 状态栏小程序撑起高度 -->
				<view :style="{height:statusBarHeight+'px'}"></view>
				<view class="searchContainer" @tap="$Router.push('/pages/public/search')">
					<u-search :bg-color="!isDrop?'#fff':'transparent'" style="width: 450rpx;position: relative;z-index:999" border-color="#f2f2f2" placeholder="水果鲜花" :show-action="false" shape="round" :disabled="true" v-model="value"></u-search>
				</view>
			</view>
			<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
			<!-- <view :style="{height: navBarHeight+'px'}"></view> -->
		</view>
		
		
		<!-- 三级分类 -->
		<three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory>
		<!-- 二级分类 -->
		<two-catgory :categoryStyleId="categoryStyleId" @isDrop="isDropHandle" v-if="categoryType === 3"></two-catgory>
		<!-- 一级分类-->
		<one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory>
		<!--直接购买，点餐 -->
		<takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory>
		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import takeoutCatgory from './category/takeout-catgory.vue';
import threeCatgory from './category/three-catgory.vue';
import twoCatgory from './category/two-catgory.vue';
import oneCatgory from './category/one-catgory.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		takeoutCatgory,
		threeCatgory,
		twoCatgory,
		oneCatgory
	},
	data() {
		return {
			isDrop:false,
			value:'',
			categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
			categoryStyleId: 0, //分类Id
			statusBarHeight: 20,/* 状态栏高度 */
			navBarHeight: 45,/* 导航栏高度 */
			windowWidth: 375,/* 窗口宽度 */
			/* 设定状态栏默认高度 */
		};
	},
	computed: {
		...mapGetters(['authType'])
	},
	onLoad() {
		this.getCategory();
		// 获取手机系统信息
		const info = uni.getSystemInfoSync()
		// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
		this.statusBarHeight = info.statusBarHeight
		this.windowWidth = info.windowWidth
		// 除了h5 app mp-alipay的情况下执行
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		// 获取胶囊的位置
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		console.log(menuButtonInfo);
		// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
		this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
		this.windowWidth = menuButtonInfo.left
		// #endif
	},
	methods: {
		/**
		 * 获取分类数据
		 *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
		 */
		getCategory() {
			this.$http('category.info', {
				id: this.$Route.query.id ? this.$Route.query.id : 0
			}).then(res => {
				if (res.code === 1) {
					if (res.data?.type) {
						this.categoryType = Number(res.data.type);
						this.categoryStyleId = Number(res.data.id);
						uni.setNavigationBarTitle({
							title: res.data?.name
						});
					}
				}
			});
		},
		isDropHandle(val){
			this.isDrop = val
			console.log(val,"6767")
		}
	}
};
</script>

<style lang="scss">
.category-box {
	height: 100%;
	flex: 1;
	overflow: hidden;
}
.searchContainer{
	position: relative;
	margin-top: 10rpx;
	margin-bottom:10rpx;
	// height: 100rpx;
	display: flex;
	align-items: center;
	padding-left:24rpx;
	// .searchBtn{
	// 	height:90%;
	// 	position:absolute;
	// 	padding:0 20rpx;
	// 	right:20rpx;
	// 	top:5%;
	// 	color:#ffffff;
	// 	font-size:26rpx;
	// 	z-index:99;
	// 	background-color: #17C161;
	// 	border-radius:55px;
	// 	display:flex;
	// 	align-items: center;
	// }
}
</style>