<template>
  <view class="main">
  	  <!-- 头部区域 -->
  		<view class="head" :style="{'padding-top':headerHeight+'px'}">
  			<view class="head_location">
  				<image class="location_img" src="../../static/index/location_active.png" mode="widthFix"></image>
  				<view class="location_title">上海体育中心</view>
  				<view class="location_arrow_down"></view>
  			</view>
  			<view class="head_ul">
				<view class="head_l">
					<view class="head_q">购物车</view>
					<view class="head_w">我常买</view>
				</view>
				<view class="head_r">
					<view class="head_li">优惠券(3）</view>
					<view class="head_li">管理</view>
				</view>
			</view>
  		</view>
		<view class="cart" :style="{'padding-top':85+headerHeight+'px'}">
			<view class="cart_item">
				<view class="cart_selected">
					<view class="cart_selected_false"></view>
				</view>
				<view class="cart_shop">
					<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
				</view>
				<view class="cart_shop_cont">
					<view class="cart_title">火锅配菜青菜</view>
					<view class="cart_desc">比加入时下降1.1元</view>
					<view class="cart_bottom">
						<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="cart_counter">
							<view class="cart_counter_btn border_l">
								<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
							</view>
							<view class="cart_counter_center">1</view>
							<view class="cart_counter_btn border_r">
								<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cart_item">
				<view class="cart_selected">
					<view class="cart_selected_false"></view>
				</view>
				<view class="cart_shop">
					<image class="cart_shop_img" src="../../static/Mask.png" mode="widthFix"></image>
				</view>
				<view class="cart_shop_cont">
					<view class="cart_title">火锅配菜青菜</view>
					<view class="cart_desc">比加入时下降1.1元</view>
					<view class="cart_bottom">
						<view class="cart_price price">43.9<text class="market_name prices">59.9</text></view>
						<view class="cart_counter">
							<view class="cart_counter_btn border_l">
								<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
							</view>
							<view class="cart_counter_center">1</view>
							<view class="cart_counter_btn border_r">
								<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user_title">
			<image class="user_img" src="../../static/user/leftimg.png"></image>
			<view class="user_name">为您推荐</view>
			<image class="user_img" src="../../static/user/rightimg.png"></image>
		</view>
		
		<!-- 商品区域 -->
		<view class="shop_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 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 class="footer">
			<view class="footer_l">
				<view class="footer_selected">
					<view class="footer_selected_false"></view>
					<view class="footer_text">全选</view>
				</view>
			</view>
			<view class="footer_r">
				<view class="footer_v">
					<view class="footer_text">合计:</view>
					<view class="footer_price">39.9</view>
				</view>
				<view class="footer_btn">去下单</view>
			</view>
		</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
const statusHeight = ref(uni.getMenuButtonBoundingClientRect()['height'])
const headerHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore);

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

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

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