<!DOCTYPE html>
<html>
	{include file="head.html"}
	<style>
		.side{
			position: fixed;
			top: 45px;
			left: 0px;
			width: 80px;
			bottom: 50px;
			background-color: #fff;
		}
		.side-menu{
			cursor: pointer;
			padding: 10px 5px;
			border-bottom: 1px solid #eee;
			color: #646464;
			font-size: 14px;
		}
		.main{
			margin-left: 82px;
		}
	</style>
	<body>
		<div class="header">
			<div class="header-title">点餐</div>
		</div>
		<div class="header-row"></div>
		<div class="main-body" style="display: none;" :class="'flex-col'" v-if="pageLoad"  id="app">
			<div class="side">
				<div @click="setCat(0)" v-bind:class="catActive" class="side-menu">推荐</div>
				<div @click="setCat(item.catid)" v-bind:class="item.isactive?'cl-money':''" class="side-menu" v-for="(item,index) in pageData.catList" :key="index">{{item.title}}</div>
			</div>
			<div class="main">
				
				<div class="flexlist">
					<div class="flexlist-item" v-for="(item,index) in pageData.list" :key="index">
						<img @click="goProduct(item.shopid,item.id)" class="flexlist-img pointer bd-radius-5" :src="item.imgurl" />
						<div class="flex-1">
							<div @click="goProduct(item.shopid,item.id)" class="flexlist-title pointer">{{item.title}}</div>
							<div class="flex mgb-5">
								<div class="flex-1 cl3">库存 {{item.total_num}}</div>
								<div class="cl3">已售 {{item.buy_num}}</div>
							</div>
							<div class="flex">
								<div class="flex-1"></div>
								<div v-if="item.isksid>0">
									<div @click="ksBox(item.id)" class="btn-small btn-outline-success">选规格</div>
								</div>
								<div class="pdb-5" v-else>
									
									<div v-if="item.incart" class="numbox prolist-numbox">
										<div @click="minusCart(item.shopid,item.id,item.cart_amount)" class="numbox-minus">-</div>
										<input type="text" name="amount" :value="item.cart_amount" class="numbox-num" />
										<div @click="plusCart(item.shopid,item.id,item.cart_amount)" class="numbox-plus">+</div>	
									</div>
									<div @click="addCart(item.shopid,item.id)"  class="btn-buy   iconfont icon-cart" v-else></div>
								</div>
						</div>
						</div>
					</div>
				</div>
				<div     v-if="ksShow">
					<div class="modal-mask" @click="ksHide"></div>
					<div class="modal">
						<div class="modal-header">
							<div class="modal-title">选择款式</div>
							<div class="modal-close icon-close" @click="ksHide"></div>
						</div>
						<div class="modal-body pdt-10">	
							<div class="ksBox mgb-10">
								<div class="kslist mgb-10">
									<div class="kslist-label">{{ksproduct.ks_label_name}}</div>
									<div @click="ks1(item.id)" v-bind:class="{'kslist-active':item.id==ksid1}" class="kslist-item" v-for="(item,index) in ksList" :key="index">{{item.title}}</div>
								</div>
								<div class="kslist">
									<div class="kslist-label">{{ksproduct.ks_label_size}}</div>
									<div class="kslist-item" @click="ks2(item.id)"  v-bind:class="{'kslist-active':item.id==ksid}" v-for="(item,index) in ksList2" :key="index">{{item.size}}</div>
								</div>
							</div>
							<div class="flex">
								<div class="cl2 mgr-10 mgl-10">价格</div>
								<div class="cl-money">￥{{ksproduct.price}}</div>
								<div class="flex-1"></div>
								<div v-if="ksproduct.incart" class="numbox prolist-numbox">
									<div @click="ksMinusCart(ksproduct.shopid,ksproduct.id,ksproduct.cart_amount)" class="numbox-minus">-</div>
									<input type="text" name="amount" :value="ksproduct.cart_amount" class="numbox-num" />
									<div @click="ksPlusCart(ksproduct.shopid,ksproduct.id,ksproduct.cart_amount)" class="numbox-plus">+</div>	
								</div>
								<div @click="ksAddCart(ksproduct.shopid,ksproduct.id)"  class="btn-buy" v-else>买</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		{include file="ftnav.html"}
		{include file="footer.html"}
		<script src="/plugin/jquery/listload.js"></script>
		<script src="{$skins}/b2b_prolist/index.js"></script>
		<script>
			listload.showload(function(){
				App.getList();
			})
		</script>
	</body>
</html>
