<!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" /> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_rgou3w6dip.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/order.css" /> <script src="/themes/simplebootx/Portal/Template/js/base.js" type="text/javascript" charset="utf-8"></script> <!--jquery weui--> <link rel="stylesheet" href="/themes/simplebootx/Portal/Template/css/weui.min.css"> <link rel="stylesheet" href="/themes/simplebootx/Portal/Template/css/jquery-weui.css"> <link rel="stylesheet" href="/themes/simplebootx/Portal/Template/css/demos.css"> <!--时间插件--> <link rel="stylesheet" href="/themes/simplebootx/Portal/Template/datecss/mobiscroll.css" /> <link rel="stylesheet" href="/themes/simplebootx/Portal/Template/datecss/mobiscroll_003.css" /> <link rel="stylesheet" href="/themes/simplebootx/Portal/Template/datecss/mobiscroll_002.css" /> <!--<link rel="stylesheet" type="text/css" href="css/index.css" />--> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/init.css" /> <title>提交订单</title> <style> .state { color: RGBA(153, 153, 153, 1); font-size: 0.26rem; width: 6.62rem; padding-left: 0.26rem; padding-right: 0.26rem; /*height:20px;*/ } .name { color: RGBA(51, 51, 51, 1); font-size: 0.26rem; height: 20px; width: 6.62rem; padding-left: 0.26rem; padding-right: 0.26rem; } .machine { color: RGBA(51, 51, 51, 1); font-size: 0.26rem; } .circle { width: 15px; height: 15px; background: rgba(255, 255, 255, 1); border: 1px solid #DDDDDD; border-radius: 50%; } .printer { /*width: 3rem; height: 40px;*/ flex: 1; } /*我写的*/ .demos{ display: flex; align-items: center; justify-content: space-between; font-size: 0.26rem; } /*.demos .icon-xuanzhong{*/ /*margin-right: 0.2rem;*/ /*color: #999;*/ /*}*/ .icon-xuanzhong{ color:#C90103; } /*地址选择遮罩层*/ .container{ position:fixed; } .wrapper{ width: 7.5rem; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; z-index: 2; /*top: 29px; */ } .eat_popup { width: 7.5rem; background-color: #FFFFFF; min-height: 1rem; position: absolute; left: 0; top: 0; z-index: 4; overflow: hidden; } .popupmodel { width: 7.5rem; background-color: #FFFFFF; height: 6.72rem; position: absolute; left: 0; top: 0; z-index: 4; overflow: hidden; border-radius: 0; } .popup_title { display: flex; justify-content: space-between; line-height: 0.92rem; padding: 0 0.41rem 0 0.37rem; height: 0.92rem; } .popup_title span { font-size: 0.28rem; color: #FEAD00; } .span { margin: 0rem; padding: 0rem; } .hope_address { width: 3.16rem; height: 0.56rem; background-color: #EEF6E5; font-size: 0.28rem; line-height: 0.56rem; display: block; text-align: center; border-radius: 0.1rem; } .popup_address_item { display: flex; flex-direction: column; padding: 0.26rem 0.25rem 0.3rem 0.35rem; border: 1px solid #E4E4E4; width: 4.72rem; height: 1.4rem; margin-top: 0.24rem; margin-left: 0.38rem; } .popup_address_item span { font-size: 0.3rem; } .popup_address_wrap { display: flex; justify-content: space-between; } .popup_address_wrap p:nth-child(1) { font-size: 0.26rem; } .popup_address_wrap p:nth-child(2) { font-size: 0.24rem; display: block; border: 1px solid #FEAD00; color: #FEAD00; width: 1.49rem; height: 0.37rem; border-radius: 19rem; text-align: center; line-height: 0.37rem; } .popup_address_wrap a { color: #FEAD00; } .popup_title p { font-size: 0.24rem; color: #67C33E; } .popup_tab { height: 5.8rem; display: flex; border-top: 1px solid #E4E4E4; } .popup_nav { width: 2rem; background-color: #F7F7F7; height: 100%; border-right: 1px solid #E4E4E4; overflow-y: auto; position: relative; overflow-x: hidden; } .popup_nav ul li { font-size: 0.28rem; line-height: 0.48rem; width: 2rem; text-align: center; padding: 0.16rem 0; border-bottom: 1px solid #E4E4E4; } /*食堂*/ .address_list { padding: 0 0.4rem 1rem; } .address_item { border-bottom: 1px solid #E4E4E4; padding: 0.37rem 0 0.33rem; display: flex; justify-content: space-between; } .distance { font-size: 0.3rem; color: #333333; margin-bottom: 0.32rem; line-height: 0.3rem; } .distance span { font-size: 0.28rem; color: #FCB801; margin-left: 0.3rem; } .business { font-size: 0.28rem; color: #666666; margin-bottom: 0.21rem; line-height: 0.28rem; } .address_item_right { width: 0.54rem; height: 1.33rem; color: #999999; background-color: #EEEEEE; display: flex; align-items: center; justify-content: center; font-size: 0.4rem; } /*选定时间*/ .weui-picker-modal { width: 100%; position: absolute; bottom: 0; text-align: center; border-radius: 0; opacity: 0.6; color: #3d4145; -webkit-transition-duration: .3s; transition-duration: .3s; height:12rem; background: #EFEFF4; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; } .toolbar .toolbar-inner { height: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; } .toolbar .title { position: absolute; display: block; width: 100%; padding: 0; font-size: .23rem; font-weight: normal; line-height: 1rem; color: #3d4145; text-align: center; white-space: nowrap; } .toolbar .picker-button { position: absolute; right: 0; box-sizing: border-box; height: 1rem; line-height:1rem; color: #04BE02; z-index: 1; padding: 0 .5rem; font-size:0.2rem; } .weui-picker-modal .picker-item { height: 32px; line-height: 32px; padding: 0 10px; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; color: #9b9b9b; left: 0; top: 0; width: 100%; box-sizing: border-box; -webkit-transition: 300ms; transition: 300ms; font-size:0.2rem; } [v-cloak]{ display:none; } /*.weui-picker-modal .picker-item {*/ /*height: 12px;*/ /*line-height: 12px;*/ /*padding: 0 10px;*/ /*white-space: nowrap;*/ /*position: relative;*/ /*overflow: hidden;*/ /*text-overflow: ellipsis;*/ /*color: #9b9b9b;*/ /*left: 0;*/ /*top: 0;*/ /*width: 100%;*/ /*box-sizing: border-box;*/ /*-webkit-transition: 300ms;*/ /*transition: 300ms;*/ /*}*/ </style> </head> <body> <div id="order" v-cloak> <!--选择地址遮罩层--> <!--遮罩--> <div class="wrapper hidden" style="margin-top: 0rem;margin-bottom: 2rem;" v-if="mask" @click="mars()"> <!--到店堂食弹层--> <div class="eat_popup" style="display: block;" v-if="storeblock"> <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_end}}-{{item.open_start}}</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 class="address_item"> <div class="address_item_left"> <p class="distance">香格里拉大酒店<span>距您3km</span></p> <p class="business"><i class="iconfont icon-shijianzhongbiao"></i>营业时间:12:00-14:00</p> <p class="business"><i class="iconfont icon-hdxq_icon"></i>天津市和平区气象台路中环公寓29</p> </div> <div class="address_item_right"> > </div> </div> <div class="address_item"> <div class="address_item_left"> <p class="distance">香格里拉大酒店<span>距您3km</span></p> <p class="business"><i class="iconfont icon-shijianzhongbiao"></i>营业时间:12:00-14:00</p> <p class="business"><i class="iconfont icon-hdxq_icon"></i>天津市和平区气象台路中环公寓29</p> </div> <div class="address_item_right"> > </div> </div>--> </div> </div> <!--就近自提弹层--> <div class="popupmodel hidden" style="display:block" v-if="spotblock"> <!--<div class="head_tab"> <div class="active"></div> <span class="head_tab_left">就近自提</span><span class="head_tab_right">到店堂食</span> </div>--> <div class="popup_title"> <span>选择自提点</span> <p class="hope_address" style="margin-top: 0.2rem;">没有门口的?点我试试!</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> <!--<li>西城</li> <li>朝阳</li> <li>海淀</li> <li>通州</li> <li>西城</li> <li>朝阳</li> <li>海淀</li> <li>通州</li>--> </ul> </div> <div class="popup_address" style="padding-top: 0.2rem;"> <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="jump(item.spot_id)" v-bind:id="item.spot_id"> <a href="#">取货点详情</a> </p> </div> </div> <!--<div class="popup_address_item"> <span>国贸地铁A口</span> <div class="popup_address_wrap"> <p><i class="iconfont icon-hdxq_icon"></i>距您0.8km</p> <p> <a href="TakeDetails.html">取货点详情</a> </p> </div> </div>--> <!--<div class="popup_address_item"> <span>国贸地铁A口</span> <div class="popup_address_wrap"> <p><i class="iconfont icon-hdxq_icon"></i>距您0.8km</p> <p> <a href="TakeDetails.html">取货点详情</a> </p> </div> </div>--> </div> </div> </div> </div> <div class="container" v-cloak> <!--遮罩--> <div class="wrap" style="display: none;"> <!--弹层--> <div class="popup_wrap" style="display:none;"> <div class="popup"> <span class="choose">选择您期望的地址</span> <span class="text">为了后期更好的为您服务</span> <div class="btn" @click="hopeaddress()"> 确定 </div> </div> </div> <!--付款弹层--> <div class="order_pay_popup_wrap" style="display: none;"> <div class="order_pay_popup"> <div class="pay_details" @click="remain()"> <i class="iconfont icon-balance" style="color: #FFA200;"></i> <p>余额支付</p> </div> <div class="pay_details" style="border-top: 1px solid #E4E4E4;" @click="wexinpay()"> <i class="iconfont icon-weixinzhifu" style="color: #24BB1E;"></i> <p>微信支付</p> </div> </div> </div> </div> <!--头部--> <div class="header"> <div class="head_tab"> <div class="active"></div> <span class="head_tab_left" @click="spotchange()">就近自提</span><span class="head_tab_right" @click="storechange()">到店堂食</span> </div> </div> <!--订单地址--> <div class="take_address" v-if="selectstop" v-cloak> <div class="take_address_wrap"> <div class="address_details"> <p class="address_text">取货地址:{{address}}{{distance}}</p> </div> <div class="take_address_btn"> <span class="address_reset resetspot" @click="resetspot()"><i class="iconfont icon-icon-test2"></i>地址重置</span> <span class="hope_address">期望自取地址</span> </div> <i class="iconfont icon-icon-test3" @click="spotdetail()"></i> </div> </div> <div class="take_address" v-if="selectstore" v-cloak> <div class="take_address_wrap"> <div class="address_details"> <p class="address_text">取货地址:{{storeaddress}}{{storedistance}}</p> </div> <div class="take_address_btn"> <span class="address_reset resetstore" @click="resetstore()"><i class="iconfont icon-icon-test2"></i>地址重置</span> <!--<span class="hope_address">期望自取地址</span>--> </div> <i class="iconfont icon-icon-test3" @click="storedetail()"></i> </div> </div> <!--输入--> <div class="input_box" v-if="selectstop"> <!--姓名--> <div class="input_box_name"> <p class="name" style="margin-top: 15px;">姓名</p> <input type="textbox" name="" class="name_textbox" id="" value="" placeholder="请填写您的姓名" v-model="name"/> </div> <!--手机号--> <div class="input_box_name"> <p class="name" style="margin-top: 15px;">手机号</p> <input type="textbox" name="" class="num_textbox" id="" value="" placeholder="请填写您的手机号" v-model="telephone"/> </div> <!--自取时间--> <!--<div class="input_box_name"> <p class="name">自取时间</p> <input type="textbox" name="" id="" value="" placeholder="请选择自取时间" /> <p class="icon">></p> </div>--> <!--<div class="demos input_box_name">--> <!--<p class="name">自取时间</p>--> <!--<input value="2015-05-01 15:42:02" class="pictime" readonly="readonly" name="appDateTime" id="appDateTime" >--> <!--</div>--> <div class="weui-cell"> <div class="weui-cell__hd"><label for="time4" class="weui-label" style="font-size:0.3rem;color:#333333">定制时间</label></div> <div class="weui-cell__bd" style="margin-left: 47px;font-size: 0.3rem;color:#333333"> <input class="weui-input" id="time4" type="text" value=""> </div> </div> </div> <div class="input_box" v-if="selectstore"> <!--姓名--> <p class="name">请选择打印机</p> <!--手机号--> <p class="state">支付前请您确保在餐厅大堂,在选择的打印机面前。</p> <!--自取时间--> <!--<div class="input_box_name"> <p class="name">自取时间</p> <input type="textbox" name="" id="" value="" placeholder="请选择自取时间" /> <p class="icon">></p> </div>--> <div class="input_box_name demos" style="background-color:#ffffff"> <div class="printer" v-for="item in printer"> <span :id="item.printer_id" @click="selectprinter(item,$event)" class="iconfont icon-weixuanzhongyuanquan" ></span> <span>{{item.name}}</span> </div> <!--<div class="printer">--> <!--<span class="iconfont icon-weixuanzhongyuanquan"></span>--> <!--<span>打印机2</span>--> <!--</div>--> <!--<div class="printer">--> <!--<span class="iconfont icon-weixuanzhongyuanquan"></span>--> <!--<span>打印机1</span>--> <!--</div>--> </div> </div> <!--产品信息--> <div class="content"> <div class="content_list"> <div class="content_item" v-for="item in cartListSelected"> <img 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">X{{item.goods_num}}</span> <span class="total">合计:¥{{item.subtotal}}</span> </div> </div> <!--<div class="total"> 合计:¥398 </div>--> </div> </div> </div> <!--订单备注--> <div class="order_remark"> 订单备注<input type="textbox" name="" id="" :value="remark" placeholder="请填写" /> <p class="icon">></p> </div> <div class="order_pay"> 支付方式 <span v-if="remainpay">余额支付</span> <span v-if="weipay">微信支付</span> <p class="icon">></p> </div> <!--<div class="iconfont icon-xuanzhong" style="color: red;"></div>--> <!--footer--> <div class="footer"> <span class="real">实付款:</span><span class="footer_money">¥ {{num}}</span> <span class="footer_btn" @click="paymentorder()">确认支付</span> </div> </div> </div> <script src="/themes/simplebootx/Portal/Template/js/vue.js" type="text/javascript" charset="utf-8"></script> <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.min.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="/themes/simplebootx/Portal/Template/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/order.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/datejs/jquery-1.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/datejs/jquery.1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <!--jquery weui--> <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/fastclick.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script> <!--jQuery weui--> <script src="/themes/simplebootx/Portal/Template/datejs/mobiscroll_002.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/datejs/mobiscroll.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/datejs/mobiscroll_004.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/datejs/mobiscroll_003.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/datejs/mobiscroll_005.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var hope_address = document.getElementsByClassName('hope_address')[0]; var wrap = document.getElementsByClassName('wrap')[0]; var popup_wrap = document.getElementsByClassName('popup_wrap')[0]; var btn = document.getElementsByClassName('btn')[0]; var order_pay = document.getElementsByClassName('order_pay')[0] var order_pay_popup = document.getElementsByClassName('order_pay_popup')[0] var order_pay_popup_wrap = document.getElementsByClassName('order_pay_popup_wrap')[0] btn.onclick = function(ev) { var oEvent = ev || event; oEvent.cancelBubble = true; wrap.style.display = 'none'; } order_pay.onclick = function() { wrap.style.display = 'block'; order_pay_popup_wrap.style.display = 'block' popup_wrap.style.display = 'none' } hope_address.onclick = function() { wrap.style.display = 'block'; order_pay_popup_wrap.style.display = 'none' popup_wrap.style.display = 'block' } wrap.onclick = function() { wrap.style.display = 'none'; popup_wrap.style.display = 'none' } var order_remark = document.getElementsByClassName('order_remark')[0]; order_remark.onclick = function() { window.location.href = 'writeremark.html'; } //表单判断手机号姓名 var name_textbox = document.getElementsByClassName('name_textbox')[0]; var num_textbox = document.getElementsByClassName('num_textbox')[0]; var footer_btn = document.getElementsByClassName('footer_btn')[0]; // footer_btn.onclick = function() { // if(name_textbox.value.length == 0) { // alert('请输入姓名') // } else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(num_textbox.value))) { // alert('请输入正确手机号码') // } else { // // } // } 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]; head_tab_right.onclick = function() { active.style.left = 1.8 + 'rem'; hope_address.style.display = 'none' } head_tab_left.onclick = function() { active.style.left = 0 + 'rem'; hope_address.style.display = 'block' } //时间与日期 $(function() { var currYear = (new Date()).getFullYear(); var opt = {}; opt.date = { preset: 'date' }; opt.datetime = { preset: 'datetime' }; opt.time = { preset: 'time' }; opt.default = { theme: 'android-ics light', //皮肤样式 display: 'modal', //显示方式 mode: 'scroller', //日期选择模式 dateFormat: 'yyyy-mm-dd', lang: 'zh', showNow: true, nowText: "今天", startYear: currYear - 10, //开始年份 endYear: currYear + 10 //结束年份 }; $("#appDate").mobiscroll($.extend(opt['date'], opt['default'])); var optDateTime = $.extend(opt['datetime'], opt['default']); var optTime = $.extend(opt['time'], opt['default']); $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime); $("#appTime").mobiscroll(optTime).time(optTime); }); // //就近自提点地址重置 // $(".resetspot").click(function(){ // alert(111) // }) // // //堂食地址地点重置 // $(".resetstore").click(function(){ // alert(222) // }) var date=new Date(); //获取年月日 var year=date.getFullYear(); var month=date.getMonth()+1; var dat=date.getDate(); //判断今天是星期几 var str="星期" switch (date.getDay()){ case 0: str=str+"日"; break; case 1: str=str+"一"; break; case 2: str=str+"二"; break; case 3: str=str+"三"; break; case 4: str=str+"四"; break; case 5: str=str+"五"; break; case 6: str=str+"六"; break; } var day=year+'-'+month+'-'+dat+'('+str+')'; var time_zone=[]; var url = '/Flow/confirm'; var params = { cart_id_str:id, unique_id: localStorage.getItem('unique_id') } ajaxsend(url, params, function(res) { /*console.log(JSON.stringify(res))*/ console.log(res); var data=res.data; console.log(data); time_zone=data.time_zone; console.log(time_zone); day=day+time_zone[0]; // $("#time4").val(day); $("#time4").datetimePicker({ times: function () { return [ { values:time_zone } ]; }, max: '2030-12-12', onChange: function (picker, values, displayValues) { console.log(values); } }); }) </script> </body> </html>