<!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/init.css" /> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/myorder/myorder.css" /> <!--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"> <script src="../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; } .food_item+.food_item{ margin-top: 10px; } </style> </head> <body> <div class="container" id="myorder"> <!--遮罩--> <div class="wrap"> <!--弹层--> <div class="popup"> <span class="text">是否确认取消订单?</span> <div class="btn"> 确定 </div> </div> </div> <!--导航--> <div class="nav"> <ul> <li class="all" :class="tapType=='0'?'active':''" @click="orderInfo(0)" >全部</li> <li class="pay_item" :class="tapType=='1'?'active':''" @click="orderInfo(1)" id="pay">未付款</li> <li class="make_item" :class="tapType=='2'?'active':''" @click="orderInfo(2)">制作中</li> <li class="take_item" :class="tapType=='3'?'active':''" @click="orderInfo(3)">待取货</li> <li class="evaluate_item" :class="tapType=='4'?'active':''" @click="orderInfo(4)">待评价</li> <li class="finish_item" :class="tapType=='5'?'active':''" @click="orderInfo(5)">已完成</li> </ul> </div> <!--待付款--> <div class="main" v-cloak> <div class="nav_item pay_details" :id="item.oid" v-for="(item,index) in orderinfo" @click="orderdetail(item)"> <div class="nav_item_pay"> <div class="nav_item_pay_left"> <!--<p class="pay">{{item.status}}</p>--> <p :class="{'pay':item.status=='1','make':item.status=='2','take':item.status=='3','evalute':item.status=='4','evalute':item.status=='5'}">{{item.status|orderType}}</p> <p class="num">{{item.order_sn}}</p> <!--<p class="nav_item_pay_btn">{{item.order_type}}</p>--> <p :class="item.order_type=='1'?'nav_item_pay_btn':'nav_item_pay_btn_eat'">{{item.order_type|stoptype}}</p> </div> <div class="nav_item_pay_right"> <p class="date">{{item.add_time}}</p> </div> </div> <div class="nav_item_product"> <div class="nav_item_product_box"> <div style="overflow:hidden;" class="food_item" v-for='(i,ind) in item.order_goods'> <div class="nav_item_product_pic" style=float:left;> <!--<img src="../img/矩形6拷贝2@2x.png" />--> <img :src="i.thumb" /> </div> <div style="float:left;"> <div class="nav_item_product_item"> <p style="width:4.3rem">{{i.goods_name}}</p> <span>¥{{i.goods_price}}</span> </div> <div class="nav_item_product_item_sub"> <p>{{i.goods_description}}</p> <span>x{{i.goods_num}}</span> </div> </div> </div> <div class="nav_item_product_item_money" v-if="item.status==1"> <span>合计:¥{{item.order_amount}}</span> <span class="cancel_btn" @click="cancelorder(item)">取消订单</span> <span @click="unpaypay()">去支付</span> </div> <div class="nav_item_product_take_btn" v-if="item.status==3" > <span>合计:¥{{item.order_amount}}</span><span class="go_take" @click="navigation(item)">导航去取货</span> </div> <div class="nav_item_product_take_btn" v-if="item.status==4"> <span>合计:¥{{item.order_amount}}</span><span class="go_evaluate" @click="goevalute(item)">去评价</span> </div> <div class="nav_item_product_take_btn" v-if="item.status==5"> <span>合计:¥{{item.order_amount}}</span><span class="again" @click="againorder(item)">再来一单</span> </div> <span class="all_money" v-if="item.status==2">合计:¥{{item.order_amount}}</span> </div> </div> </div> </div> <!--没有订单提醒--> <div class="nodata" v-if="orderinfo.length==0"> 暂无订单 </div> </div> <script src="/themes/simplebootx/Portal/Templatejs/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/swiper-3.4.2.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/myorder.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var cancel_btn = document.getElementsByClassName('cancel_btn')[0]; var wrap = document.getElementsByClassName('wrap')[0]; var popup = document.getElementsByClassName('popup')[0]; cancel_btn.onclick = function(ev) { var oEvent = ev || event oEvent.concelable = true; oEvent.stopPropagation(); wrap.style.display = 'block'; } wrap.onclick = function() { wrap.style.display = 'none'; } var pay_details = document.getElementsByClassName('pay_details')[0]; var make_details = document.getElementsByClassName('make_details')[0]; var take_details = document.getElementsByClassName('take_details')[0]; var evaluate_details = document.getElementsByClassName('evaluate_details')[0]; var finish_details = document.getElementsByClassName('finish_details')[0]; var again = document.getElementsByClassName('again')[0]; again.onclick = function(ev) { var oEvent = ev || event; oEvent.concelable = true; oEvent.stopPropagation(); window.location.href = '../index.html' } pay_details.onclick = function() { window.location.href = 'paydetails.html' } make_details.onclick = function() { window.location.href = 'makedetails.html' } take_details.onclick = function() { window.location.href = 'paydetails.html' } evaluate_details.onclick = function() { window.location.href = 'evaluatedetails.html' } finish_details.onclick = function() { window.location.href = 'finishdetails.html' } var pay_item = document.getElementsByClassName('pay_item')[0]; var make_item = document.getElementsByClassName('make_item')[0]; var take_item = document.getElementsByClassName('take_item')[0]; var evaluate_item = document.getElementsByClassName('evaluate_item')[0]; var finish_item = document.getElementsByClassName('finish_item')[0]; var nav_item = document.getElementsByClassName('nav_item'); var aLi = document.getElementsByClassName('nav')[0].getElementsByTagName('li'); var all = document.getElementsByClassName('all')[0]; all.onclick = function() { for(i = 0; i < nav_item.length; i++) { nav_item[i].style.display = 'block'; } for(j = 0; j < aLi.length; j++) { aLi[j].classList.remove('active') } this.classList.add('active') } pay_item.onclick = function() { for(i = 0; i < nav_item.length; i++) { nav_item[i].style.display = 'none'; } for(j = 0; j < aLi.length; j++) { aLi[j].classList.remove('active') } this.classList.add('active') pay_details.style.display = 'block'; } make_item.onclick = function() { for(i = 0; i < nav_item.length; i++) { nav_item[i].style.display = 'none'; } for(j = 0; j < aLi.length; j++) { aLi[j].classList.remove('active') } this.classList.add('active') make_details.style.display = 'block'; } take_item.onclick = function() { for(i = 0; i < nav_item.length; i++) { nav_item[i].style.display = 'none'; } for(j = 0; j < aLi.length; j++) { aLi[j].classList.remove('active') } this.classList.add('active') take_details.style.display = 'block'; } evaluate_item.onclick = function() { for(i = 0; i < nav_item.length; i++) { nav_item[i].style.display = 'none'; } for(j = 0; j < aLi.length; j++) { aLi[j].classList.remove('active') } this.classList.add('active') evaluate_details.style.display = 'block'; } finish_item.onclick = function() { for(i = 0; i < nav_item.length; i++) { nav_item[i].style.display = 'none'; } for(j = 0; j < aLi.length; j++) { aLi[j].classList.remove('active') } this.classList.add('active') finish_details.style.display = 'block'; } </script> </body> </html>