<template>
  <view class="mian">
	<!-- 头部区域 -->
	<view class="head" :style="{'padding-top':headerHeight+3+'px'}">
		<view class="head_search">
			<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
			<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
		</view>
		<view class="head_class">
			<scroll-view 
			:enhanced="true"
			:show-scrollbar="false" 
			scroll-x="true" 
			:scroll-with-animation="true"
			:scroll-left="ScrollLeft"
			class="head_class_scroll">
				<view class="head_class_item head_class_item_active">
					<view class="head_class_title">为您推荐</view>
					<view class="head_class_active head_class_active_img"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">特惠专区</view>
					<view class="head_class_active"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">时令春菜</view>
					<view class="head_class_active"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">鸭货卤味</view>
					<view class="head_class_active"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">鸡/鹅肉类</view>
					<view class="head_class_active"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">轻食萨拉</view>
					<view class="head_class_active"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">猪肉类</view>
					<view class="head_class_active"></view>
				</view>
				<view class="head_class_item">
					<view class="head_class_title">羊肉肉类</view>
					<view class="head_class_active"></view>
				</view>
			</scroll-view>
			<view class="head_class_btn">
				<view class="head_class_arrow_box">
					<image class="head_class_arrow_box_img" src="../../static/down_arrow.png"></image>
					<!-- <image class="head_class_arrow_box_img" src="../../static/up_arrow.png"></image> -->
				</view>
			</view>
		</view>
	</view>
	
	<!-- 商品区域 -->
	<view class="shop_view" :style="{'padding-top':92+headerHeight+'px'}">
		<view class="shop_view_ul">
			<view class="shop_view_li">
				<view class="shop_view_img">
					<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
					<view class="shop_view_img_u">
						<image class="shop_view_img_url" src="../../static/Mask.png"></image>
					</view>
				</view>
				<view class="shop_view_cont">
					<view class="shop_view_cont_title">糖醋排骨</view>
					<view class="shop_view_cont_desc">乡下土猪</view>
					<view class="shop_view_cont_tag">
						<view class="shop_view_cont_tag_text">仅剩3份</view>
						<view class="shop_view_cont_tag_text">劲辣胃浓</view>
					</view>
					<view class="shop_view_cont_bottom">
						<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="shop_view_cont_cart">
							<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="shop_view_li">
				<view class="shop_view_img">
					<view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view>
					<view class="shop_view_img_u">
						<image class="shop_view_img_url" src="../../static/Mask.png"></image>
					</view>
				</view>
				<view class="shop_view_cont">
					<view class="shop_view_cont_title">糖醋排骨</view>
					<view class="shop_view_cont_desc">乡下土猪</view>
					<view class="shop_view_cont_tag">
						<view class="shop_view_cont_tag_text">仅剩3份</view>
						<view class="shop_view_cont_tag_text">劲辣胃浓</view>
					</view>
					<view class="shop_view_cont_bottom">
						<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="shop_view_cont_cart">
							<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="shop_view_li">
				<view class="shop_view_img">
					<view class="shop_view_tag"><text class="shop_view_tag_text">香甜</text></view>
					<view class="shop_view_img_u">
						<image class="shop_view_img_url" src="../../static/Mask.png"></image>
					</view>
				</view>
				<view class="shop_view_cont">
					<view class="shop_view_cont_title">泡椒田鸡</view>
					<view class="shop_view_cont_desc">超大只田鸡</view>
					<view class="shop_view_cont_tag">
						<view class="shop_view_cont_tag_text">仅剩3份</view>
						<view class="shop_view_cont_tag_text">劲辣胃浓</view>
						<view class="shop_view_cont_tag_text">劲辣胃浓</view>
					</view>
					<view class="shop_view_cont_bottom">
						<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="shop_view_cont_cart">
							<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shop_view_ul">
			<view class="shop_view_li">
				<view class="shop_view_img">
					<view class="shop_view_tag"><text class="shop_view_tag_text">热销</text></view>
					<view class="shop_view_img_u">
						<image class="shop_view_img_url" src="../../static/Mask.png"></image>
					</view>
				</view>
				<view class="shop_view_cont">
					<view class="shop_view_cont_title">泡椒田鸡</view>
					<view class="shop_view_cont_desc">超大只田鸡</view>
					<view class="shop_view_cont_tag">
						<view class="shop_view_cont_tag_text">仅剩3份</view>
						<view class="shop_view_cont_tag_text">劲辣胃浓</view>
					</view>
					<view class="shop_view_cont_bottom">
						<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="shop_view_cont_cart">
							<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>	
			<view class="shop_view_li">
				<view class="shop_view_img">
					<view class="shop_view_tag"><text class="shop_view_tag_text">新鲜</text></view>
					<view class="shop_view_img_u">
						<image class="shop_view_img_url" src="../../static/Mask.png"></image>
					</view>
				</view>
				<view class="shop_view_cont">
					<view class="shop_view_cont_title">泡椒田鸡</view>
					<view class="shop_view_cont_desc">超大只田鸡</view>
					<view class="shop_view_cont_tag">
						<view class="shop_view_cont_tag_text">仅剩3份</view>
						<view class="shop_view_cont_tag_text">劲辣胃浓</view>
					</view>
					<view class="shop_view_cont_bottom">
						<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="shop_view_cont_cart">
							<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>			
		</view>
	</view>
	<view style="height: 200rpx;"></view>
  </view>
</template>

<script setup>
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore);
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
const ScrollLeft = ref(0);

//使用 uni.onLoad 监听页面加载
onLoad((options) => {

});
onShow(() => {
  
});
onPullDownRefresh(()=>{
	uni.stopPullDownRefresh();
});
onReachBottom(()=>{
	
});
</script>

<style lang="scss">
	@import './style.scss';
</style>