<template>
	<view class="shopPage">
		<image class="indexBG" src="/static/shop/indexBG.png" mode="widthFix"></image>
		<view class="head" :style="{'top': (indexStore.screen.total)+'px'}">
			<uni-search-bar :radius="5" v-model="searchText" class="searchBar" placeholder="请输入您正在找的商品..." bgColor="#FFFFFF"
				@confirm="search" cancelButton="none" style="flex: 1;"/>
			<view class="carBox">
				<image class="carIcon" src="/static/shop/carIcon.png" mode="aspectFill"></image>
				<text>购物车</text>
			</view>	
			
		</view>
		<tabbar :tabIndex="1"></tabbar>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useIndexStore
	} from '../../store';
	const indexStore = useIndexStore()

	const searchText = ref('')
	const search = () => {
		console.log("search")
	}
	onMounted(() => {
		uni.getSystemInfo({
			success: (e) => {
				let custom = uni.getMenuButtonBoundingClientRect();
				const data = {
					tops: e.statusBarHeight,
					height: custom.height + (custom.top - e.statusBarHeight) * 2,
					total: custom.height + (custom.top - e.statusBarHeight) * 2 + e.statusBarHeight
				}
				indexStore.setScreen(data)
			}
		})
	})
</script>

<style lang="scss" scoped>
	.shopPage {
		width: 100%;
		min-height: 100vh;
		position: relative;
	}

	.indexBG {
		width: 100%;
		height: auto;
	}

	.head {
		width: 100%;
		position: absolute;
		z-index: 2;
		box-sizing: border-box;
		padding: 16rpx 26rpx;
		@include flexBox(between,center);
		.carBox{
			@include fontStyle(20rpx,#3A71FF,center,400,30rpx);
			margin-left: 16rpx;
			.carIcon{
				width: 44rpx;
				height: 44rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>