<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/swiper-3.4.2.min.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/weui.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/example.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/init.css" /> <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_647640_l5rjgpoksoj62yb9.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/index.css" /> <script src="/themes/simplebootx/Portal/Template/js/base.js" type="text/javascript" charset="utf-8"></script> <title>首页</title> <style type="text/css"> .nodata{ margin-top: 90px; text-align: center; color: #999; font-size: 14px; } [v-cloak]{ display: none; } .shop_car_item_btn{ position: absolute; display: flex; top: 1.75rem; font-size: 0.3rem; left: 5.1rem; flex-wrap: nowrap; line-height: 0.4rem; width: 2rem; } .shop_car_item_btn .iconfont{ font-size: 0.5rem; line-height: 0.5rem; color: #999999; } .shop_car_item_btn p{ margin-left: 0.22rem; margin-right: 0.22rem; } .shop_car_num{ width: 0.58rem; text-align: center; border: none; outline: none; font-size: 0.3rem; color: #222222; } .storearea{ /*position:absolute;*/ background: #FFFFFF; top:45px; } [v-cloak]{ display: none; } .weui-toast { position: fixed; z-index: 5000; width: 2rem; /*height: 1rem; line-height: 1rem;*/ height: 2rem; top:30%; bottom: 0; left: 0; right:0; margin: auto; /*margin-left: -3.8em;*/ background: rgba(17, 17, 17, 0.7); text-align: center; border-radius: 5px; color: #FFFFFF; font-size: 0.2rem; } #unstock { position: fixed; z-index: 5000; width: 2rem; height: 2rem; line-height: 2rem; top: 30%; bottom: 0; left: 0; right: 0; margin: auto; /* margin-left: -3.8em; */ background: rgba(17, 17, 17, 0.7); text-align: center; border-radius: 5px; color: #FFFFFF; font-size: 0.2rem; } body{ -webkit-overflow-scrolling:touch; } </style> </head> <body onload="load()"> <div class="container" id="pageindex" v-cloak> <!--遮罩--> <div class="wrap hidden" style="margin-top: 1.2rem; display: none;"> <!--到店堂食弹层--> <div class="eat_popup" style="display: none;"> <div class="address_list" > <div class="address_item" v-for="item in storelist" :id="item.store_id" @click="changespot(item)"> <div class="address_item_left"> <p class="distance"> <span class="storename" style="color:#666666">{{item.store_name}}</span> <span>距您{{item.distance_text}}</span> </p> <p class="business"><i class="iconfont icon-shijianzhongbiao"></i>营业时间: {{item.open_start}}-{{item.open_end}}</p> <p class="business"><i class="iconfont icon-hdxq_icon"></i>{{item.store_address}}</p> </div> <div class="address_item_right" v-bind:id="JSON.stringify(item)" @click="jumpaddress(item)"> > </div> </div> </div> </div> <!--就近自提弹层--> <div class="popup hidden"> <div class="popup_title"> <span>选择自提点</span> <p class="hope_address">没有门口的?点我试试!</p> </div> <div class="popup_tab"> <div class="popup_nav"> <ul> <li v-for="item in selfarea" v-bind:id="item.area_id" @click="add(item.area_id)">{{item.area_name}}</li> </ul> </div> <div class="popup_address"> <div class="popup_address_item" v-for="item in spot" @click="cartpay(item)"> <span>{{item.spot_name}}</span> <div class="popup_address_wrap"> <p><i class="iconfont icon-hdxq_icon"></i>{{item.distance_text}}</p> <p @click.stop="jump(item.spot_id)" v-bind:id="item.spot_id"> <a href="#">取货点详情</a> </p> </div> </div> </div> </div> </div> </div> <!--头部--> <div class="header"> <div class="head_tab"> <div class="active"></div> <span class="head_tab_left" @click="areaspot()">就近自提</span><span class="head_tab_right" @click="areastore()">到店堂食</span> </div> <div class="head_add spotarea" v-if="yespot"> <i class="iconfont icon-hdxq_icon"></i> <p>{{address}}{{distance}}</p> </div> <div class="head_add storearea" v-if="yestore"> <i class="iconfont icon-hdxq_icon"></i> <p>{{storeaddress}}{{storedistance}}</p> </div> </div> <!--导航列表--> <div class="nav"> <ul class="nav_list" style="overflow-x: scroll"> <li class="nav_list_item active" @click="allfood()" :style="{'width':'auto'}">全部美食</li> <li v-for="(item,index) in type" @click="find(item.t_id,index)" :class="{active:index===current}" v-bind:id="item.t_id" :style="{'width':'auto'}" v-if="item.type_name.length>3">{{item.type_name}}</li> <li v-for="(item,index) in type" @click="find(item.t_id,index)" :class="{active:index===current}" v-bind:id="item.t_id" :style="{'width':2+'rem'}" v-if="item.type_name.length<=3">{{item.type_name}}</li> </ul> </div> <!--swiper--> <div class="swiper-container banner"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in banner"> <img v-if="item.slide_pic" :src="item.slide_pic"/> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!--主体列表--> <div class="content" v-cloak> <div class="content_list" > <div class="content_item" v-for="item in goods_list" v-bind:id="item.goods_id" onclick="fooddetail(this.id)"> <img v-if="item.thumb" v-bind:src="item.thumb"/> <div class="content_item_text"> <span class="content_item_text_h">{{item.goods_name}}</span> <span class="content_item_text_subh">{{item.goods_description}}</span> <div class="content_item_num"> <span class="content_item_num_money">¥{{item.goods_price}}</span> <span class="content_item_num_num">月销 {{item.month_sales}}件</span> <div class="choose_num"> <p class="choose_num_control"> <span class="num_reduce">-</span> <span style="display: inline-block; width: 0.6rem;font-size: 0.36rem;text-align: center;">1</span> <span class="num_add">+</span> </p> </div> <!--购物车--> <div v-if="item.goods_num<=0" class="content_item_shop_car_icon" v-bind:id="item.goods_id" @click="addcart(item.goods_id)"> <i class="iconfont icon-gouwuche_select"></i> </div> <div class="shop_car_item_btn" v-if="item.goods_num>0"> <i class="iconfont icon-icon--" v-on:click="reducenum(item)"></i> <input type="" name="" class="shop_car_num" v-model="item.goods_num"/> <i class="iconfont icon-jia" v-bind:id="JSON.stringify(item)" @click="addnum(item)"></i> </div> </div> </div> </div> </div> </div> <!--没有美食提醒--> <div class="nodata" v-if="goods_list.length==0"> 暂无美食 </div> <!-- loading toast 数据加载中--> <div id="loadingToast" style="display:none"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-loading weui-icon_toast"></i> <p class="weui-toast__content">数据加载中</p> </div> </div> <!--库存不足弹出框--> <div id="unstock" style="display:none"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <!-- <i class="weui-icon-success-no-circle weui-icon_toast"></i>--> <p class="weui-toast__content">该商品每天限购一份</p> </div> </div> <!--footer--> <div class="footer"> <div class="footer_item footer_active"> <a href="{:U('Template/index')}"><img src="/themes/simplebootx/Portal/Template/img/menu_icon1_select@2x.png" /><span>首页</span></a> </div> <div class="footer_item"> <a href="{:U('Template/shopcar')}"><img src="/themes/simplebootx/Portal/Template/img/9拷贝@2x.png" /> <span>购物车</span> </a> <p class="foot_cartnum" v-if="cartnum>0">{{cartnum}}</p> </div> <div class="footer_item"> <a href="{:U('Template/PersonCenter')}"><img src="/themes/simplebootx/Portal/Template/img/menu_icon3_select@2x.png" /><span>我的</span></a> </div> </div> </div> <script src="/themes/simplebootx/Portal/Template/js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/cookie.js" type="text/javascript" charset="utf-8"></script> <!--<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>--> <script src="/themes/simplebootx/Portal/Template/js/swiper.min.js"></script> <script src="/themes/simplebootx/Portal/Template/js/zepto.min.js"></script> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script> <!--<script src="js/example.js"></script>--> <script src="/themes/simplebootx/Portal/Template/js/index.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function fooddetail(id) { window.location.href="/index.php?g=&m=template&a=productdetails&id="+id; } var header = document.getElementsByClassName('header')[0]; var wrap = document.getElementsByClassName('wrap')[0]; var popup = document.getElementsByClassName('popup')[0]; var hope_address = document.getElementsByClassName('hope_address')[0]; var head_tab_right = document.getElementsByClassName('head_tab_right')[0]; var active = document.getElementsByClassName('active')[0]; var head_tab_left = document.getElementsByClassName('head_tab_left')[0]; var content_item_shop_car_icon = document.getElementsByClassName('content_item_shop_car_icon'); var eat_popup = document.getElementsByClassName('eat_popup')[0] var container = document.getElementsByClassName('container')[0] var address_item_right = document.getElementsByClassName('address_item_right') var nav_list_item = document.getElementsByClassName('nav_list_item') console.log(nav_list_item[0]) $('.content_item_shop_car_icon').click(function() { event.stopPropagation(); $(this).css('display', 'none'); $(this).prev().css('display', 'block') }) //到点食堂跳页 for (i=0; i<address_item_right.length; i++) { console.log(address_item_right[i]) address_item_right[i].onclick = function(event){ window.event.stopPropagation(); window.location.href = 'addressdetails.html' } } //商品购物车 head_tab_right.onclick = function() { popup.style.display = 'none' active.style.left = 1.8 + 'rem'; wrap.style.display = 'block'; eat_popup.style.display = 'block'; container.style.overflowY = 'hidden'; } head_tab_left.onclick = function() { eat_popup.style.display = 'none'; active.style.left = 0 + 'rem'; wrap.style.display = 'block'; popup.style.display = 'block'; container.style.overflowY = 'hidden'; } wrap.onclick = function() { wrap.style.display = 'none'; popup.style.display = 'none'; } // 跳转抓取地址 hope_address.onclick = function() { window.location.href = 'hopeaddress.html' } //弹层 var aLi = document.getElementsByClassName('popup_nav')[0].getElementsByTagName('li'); console.log(aLi) for(var i = 0; i < aLi.length; i++) { aLi[i].index = i; aLi[0].classList.add('popup_active'); aLi[i].onclick = function() { for(j = 0; j < aLi.length; j++) { console.log(aLi[j]) aLi[j].classList.remove('popup_active'); } aLi[this.index].classList.add('popup_active'); } } var uniqueid='{$unique_id}'; localStorage.setItem('unique_id',uniqueid); </script> </body> </html>