仅用于个人记录学习：demo图
tab切换显示动态数据的方法---如此下图效果 tab切换显示时 数据需要分为几个块（有几个tab分几个块）， 且几个状态分开循环-如：已支付与未支付-首先先定义两个数组，再循环data里面的数据，分别赋值给定义的数组，如-总共5条数据-已支付2条-未支付3条-已支付状态为1--未支付状态为0
demo：success : function(res) {
var datas=res.list; var arry=[],arrys=[]; for(var i=0;i arry.push(datas[i]):arrys.push(datas[i]); }
//循环得到已经支付的数据
for(var i=0;i
$('#accountPaid').html('里面放循环出来的数据');
}
//循环得到未支付的数据
for(var k=0;k
$('#Unpaid').html(' 里面放循环出来的数据');
}
}
demo代码：
html:
<div class="auto ove_hidden border5 bg_whie hider">
<ul id="myTab" class="nav nav-tabs">
<li class="active" alt='all'><a href="#home" data-toggle="tab">所有订单</a></li>
<li alt='4'><a href="#ios" data-toggle="tab">支付成功</a></li>
<li class="dropdown" alt='0'>
<a href="#nopay" data-toggle="tab">未支付</a>
</li>
</ul>
<div class="oder-top-btn">
<span>绑定票据</span>
<span>赠送票据</span>
</div>
<div id="myTabContent" class="tab-content">
<!--小标题-->
<div class="order_13Left padding1 max991" style="border-right: 0px solid #D6D6D6;color:#0565b2;">
<ul class="flex margin-btm0">
<li>
<span>商品信息</span>
</li>
<li>单价</li>
<li>数量</li>
</ul>
</div>
<div class="order_13Right1 ove_hidden padding1 max991">
<ul class="margin-btm0">
<li class="flex">实付款</li>
<li class="flex">交易状态</li>
<li class="flex">
<div class="width1" style="text-align: center;">
<div class="width1">交易操作</div>
</div>
</li>
</ul>
</div>
<!--所有订单-->
<div class="tab-pane fade in active" id="home">
<div id="maxorder_boxlist0" class="maxorder_boxlist">
<div class="showLoading">数据加载中 请稍等...</div>
</div>
</div>
<!--支付成功-->
<div class="tab-pane fade" id="ios">
<div id="maxorder_boxlist1" class="maxorder_boxlist">
<div class="showLoading">数据加载中 请稍等...</div>
</div>
</div>
<!--未支付-->
<div class="tab-pane fade" id="nopay">
<div id="maxorder_boxlist2" class="maxorder_boxlist">
<div class="showLoading">数据加载中 请稍等...</div>
</div>
</div>
</div>
</div>
js:
// 我的订单的点击切换事件
$('#myTab li').click(function(){
var alt=$(this).attr('alt');
switch (alt){
case '0'://等待付款（未支付）
dynamicdomlist('0');
break;
case '4'://交易成功（已支付）
dynamicdomlist('4');
break;
}
});
function dynamicdomlist(order_status){
var pchtml0='', pchtml='',pchtml2='';
// $('#maxorder_boxlist0,#maxorder_boxlist1,#maxorder_boxlist2').html(' ');
// 订单列表接口
$.ajax({
url : "index/orderlistapi",
type : "post",
data : {"data":''},
success : function(res) {
var datas=res.list;
var arryall=[],arry=[],arrys=[];
var alllist;
//赋值数据给3个不同的数组显示--1.所有订单，2.支付成功，3.未支付
for(var i=0;i<datas.length;i++){
arryall.push(datas[i]);//所有订单
switch (datas[i].order_status){
case 0://等待付款（未支付）
case 5://关闭订单-放在未支付里面
arrys.push(datas[i]);
break;
case 4://交易成功（已支付）
arry.push(datas[i]);
break;
}
}
switch (order_status){
case '0'://等待付款（未支付）
//得到未支付的数据
alllist=arrys;
break;
case '4'://交易成功（已支付）
//得到已支付的数据
alllist=arry;
break;
default:
//得到所有数据
alllist=arryall;
break;
}
//循环所有状态---判断在自己的状态下自己有几条数据
for(var a=0;a<alllist.length;a++){
var alllist_data=alllist[a];
var order_statusv=alllist_data.order_status;
//时间格式转化
var order_no= alllist_data.order_no.substr(0,4)+"-"+alllist_data.order_no.substr(4,2)+"-"+alllist_data.order_no.substr(6,2);
var order_statusvstr='';
var orderendstatus='';
if(order_statusv==-1){
order_statusvstr='退款中';
}else if(order_statusv==0){
order_statusvstr='等待付款';
orderendstatus='关闭订单';
}
else if(order_statusv==4){
order_statusvstr='交易成功';
}else{
order_statusvstr='订单关闭';
}
var sum=0;
sum=alllist_data.pay_money;
pchtml+='<div class="order_box">';
pchtml+=' <div class="order_1">';
pchtml+=' <div class="order_12 auto">';
pchtml+=' <span>'+order_no+'</span>';
pchtml+=' <span> 订单流水号：'+alllist_data.out_trade_no+'</span>';
pchtml+=' <span class="iconfont icon-shanchu delete"></span>';
pchtml+=' </div>';
pchtml+=' </div>';
pchtml+=' <div class="ove_hidden height_order">';
pchtml+=' <div class="order_13Left">';
pchtml+=' <div class="div-input"><input type="checkbox" id="" name="" lay-skin="primary" lay-filter="ticket" value="">';
pchtml+=' </div>';
//得到每一项中的订单量
(function(i){
for(var j=0;j<alllist_data.ticket_list.length;j++){
var datalist=alllist_data.ticket_list[j];
// sum+=datalist.price*datalist.num;
pchtml+=' <ul class="flex margin-btm0 padding1 br-btm br-top">';
pchtml+=' <li>';
pchtml+=' <span class="first_span">'+datalist.ticket_name+'</span>';
pchtml+=' <span class="color_gay">使用日期：'+datalist.start_time.substr(0, 10)+' - '+datalist.end_time.substr(0, 10)+'</span>';
pchtml+=' <span class="color_gay max992 Mobile">单价：￥'+datalist.price+'</span>';
pchtml+=' <span class="color_gay max992 Mobile">数量：'+datalist.num+'</span>';
pchtml+=' </li>';
pchtml+=' <li class="max991 pc">￥<span>'+datalist.price+'</span></li>';
pchtml+=' <li class="max991 pc">'+datalist.num+'</li>';
pchtml+=' </ul>';
}
})(i)
pchtml+=' </div>';
pchtml+=' <div class="order_13Right ">';
pchtml+=' <ul class="margin-btm0">';
pchtml+=' <li class="flex max991">￥<span>'+sum+'</span></li>';
pchtml+=' <li class="flex max991 pc">'+order_statusvstr+'</li>';
pchtml+=' <li class="flex Mobile">';
pchtml+=' <div class="width1">';
pchtml+=' <div class="width1 max992 Mobile">'+order_statusvstr+'</div>';
pchtml+=' <div class="width1 check_order">';
pchtml+=' <a class="layui-btn layui-btn-normal layui-btn-xs" href="orderdetail?no='+alllist_data.order_id+'">查看</a>';
if(order_statusv==0){
pchtml+=' <a class="layui-btn layui-btn-warm layui-btn-xs " href="/platform/pay/getpayvalue?out_trade_no='+alllist_data.out_trade_no+'">去付款</a>';
pchtml+=' <a class="layui-btn layui-btn-danger layui-btn-xs">'+orderendstatus+'</a>';
}else{}
pchtml+=' </div>';
pchtml+=' </div></li></ul></div></div></div>';
switch (order_status){
case '0':
//得到未支付的数据
$('#maxorder_boxlist2').html(pchtml);
break;
case '4':
//得到已支付的数据
$('#maxorder_boxlist1').html(pchtml);
break;
default:
//得到所有数据
$('#maxorder_boxlist0').html(pchtml);
break;
}
}
//删除按钮
$('.delete').click(function(){
$(this).parents('.order_box').remove();
});
},
error: function(xhr, textStatus) { //错误
console.log(xhr);
}
});
}
联系客服
