根据状态返回数据

<div class="containAll">

<div class="tab">

<div class="tabDiv">

<a href="javascript:void(0)" class="active">全部</a>

</div>

<div class="tabDiv">

<a href="javascript:void(0)">已使用</a>

</div>

<div class="tabDiv">

<a href="javascript:void(0)">未使用</a>

</div>

</div>

<div class="tabContent">

<div class="singleContent all"></div>

<div class="singleContent nouse"></div>

<div class="singleContent used"></div>

</div>

</div>

 

 

 

body{

font-size: 0.16rem;

}

.tab{

width: 100%;

display: flex;

box-shadow: 0 3px 3px rgba(63, 63, 63, 0.1);

background: #ffffff;

}

.tabDiv{

flex: 1;

text-align: center;

}

.tabDiv a{

width: 0.83rem;

height: 0.35rem;

line-height: 0.35rem;

/* background: red; */

text-align: center;

display: inline-block;

color: #939393;

}

.tabDiv:nth-of-type(1) a{

float: right;

}

.tabDiv:nth-of-type(3) a{

float: left;

}

.active{

border-bottom: 2px solid #de0515;

color: #666666 !important;

}

.tabContent{

overflow: hidden;

width: 100%;

}

.content{

width: 3.5rem;

height: 1.4rem;

background: url('../image/contentBg.png');

background-size: contain;

margin: 0rem auto;

}

.content:nth-of-type(1){

margin-top: 0.15rem;

}

.contentAll{

margin-top: 0.06rem;

width: 100%;

display: flex;

}

.contentMsg{

flex: 3;

margin-top: 0.14rem;

margin-left: 0.2rem;

height: 0.85rem;

border-right: 1px solid #e5e5e5;

}

.contentMsg p:nth-of-type(1){

margin-top: 0.24rem;

}

.contentMsg p:nth-of-type(2){

height: 0.3rem;

line-height: 0.3rem;

}

.contentMsg p:nth-of-type(1) span{

font-size: 0.18rem;

color: #656565;

}

.contentMsg p:nth-of-type(2) span{

font-size: 0.14rem;

color: #e5e5e5;

}

.contentUse{

flex: 1;

margin-top: 0.12rem;

height: 0.85rem;

}

.contentUse p{

text-align: center;

}

.contentUse p span{

text-align: center;

line-height: 0.4rem;

height: 0.4rem;

display: inline-block;

width: 0.56rem;

}

.contentUse p:nth-of-type(1) span{

margin-top: 0.04rem;

border-bottom: 1px solid #e5e5e5;

color: #b5a117;

}

.contentUse p:nth-of-type(2) span{

color: #838383;

}

.singleContent{

display: none;

}

.singleContent:nth-of-type(1){

display: block;

}

/* 弹出层开始 */

.popUp{

width: 3.03rem;

height: 1.82rem;

position: fixed;

z-index: 2;

left: 50%;

top: 40%;

transform: translate(-50%,-50%);

display: none;

}

.upMsg{

background: rgba(181, 181, 181, 0.8);

padding: 0.26rem;

}

.popUpTitle{

color: #ffffff;

height: 0.4rem;

line-height: 0.4rem;

text-align: center;

font-size: 0.19rem;

}

.popUpInput input{

height: 0.35rem;

line-height: 0.35rem;

border: 0;

width: 100%;

padding-left: 0.05rem;

}

.popUpBtn{

width: 100%;

display: flex;

}

.popUpBtn button{

flex: 1;

border: 0;

height: 0.45rem;

line-height: 0.45rem;

color: #ffffff;

font-size: 0.17rem;

}

.popUpBtn button:nth-of-type(1){

background: #b5a117;

color: #ffffff;

}

.popUpBtn button:nth-of-type(2){

background: #707070;

}

/* 弹出层结束 */

 

.all_content{

overflow: hidden;

margin: 0.1rem;

background: #ffffff;

}

.order_title{

line-height: 0.3rem;

background: #de0515;

color: #ffffff;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

overflow: hidden;

}

.order_title p{

padding-left: 0.1rem;

position: relative;

}

.order_content{

border: 1px solid #d2d2d2;

box-sizing: border-box;

display: none;

}

.order_content p{

line-height: 0.4rem;

font-size: 0.14rem;

color: #666666;

padding-left: 0.1rem;

}

.order_content p label{

width: 30%;

display: inline-block;

}

.order_content p span{

width: 68%;

display: inline-block;

}

.sangleIcon{

width: 0.2rem;

height: 0.2rem;

background-size: contain;

display: block;

position: absolute;

top: 0.05rem;

right: 0.05rem;

}

.sangleIcon img{

width: 100%;

height: 100%;

}

 

 

 

$(function () {

$('.tab').children('div').click(function () {

// console.log( $(this).index() );

$('.tab').children('div').find('a').removeClass('active');

$(this).find('a').addClass('active');

$('.tabContent').children('.singleContent').eq($(this).index()).css({

'display': 'block'

}).siblings('div').css({

'display': 'none',

})

})

order.init();

//点击三角图标

$('.sangleIcon').click(function () {

order.sangleIcon($(this));

})

})

var order = {

init: function () {

var res = {

"status": 200,

"info": "success",

"data": [{

'id': 0,

'shopName': '商品名称',

'orderId': '订单号',

'spec': '规格',

'price': 100,

'currentNum': 120, //剩余数量

'num': 10,

'status': 0, //(已使用、未使用),

'phone': '联系人电话',

'name': '联系人姓名',

'createTime': 2015 - 15 - 015,

},

{

'id': 1,

'orderId': '订单号1',

'shopName': '商品名称1',

'spec': '规格1',

'price': 1001,

'currentNum': 1201, //剩余数量

'num': 101,

'status': 1, //(已使用、未使用),

'phone': '联系人电话1',

'name': '联系人姓名1',

'createTime': 2015 - 15 - 015,

},

{

'id': 2,

'orderId': '订单号2',

'shopName': '商品名称2',

'spec': '规格2',

'price': 1002,

'currentNum': 1202, //剩余数量

'num': 102,

'status': 1, //(已使用、未使用),

'phone': '联系人电话2',

'name': '联系人姓名2',

'createTime': 2015 - 15 - 015,

},

]

}

if (res.status == 200) {

var datas = res.data;

var dataLength = datas.length;

console.log(dataLength);

var noUse = '';

var used = '';

if (datas != null) {

order.pinJie(datas);

}

}

},

sangleIcon: function (_this) {

$('.order_content').slideup;

var imgUrl = _this.find("img").attr("src");

if (imgUrl == "./_common/image/downSangel.png") {

_this.find("img").attr("src", './_common/image/upSangle.png')

} else {

_this.find("img").attr("src", './_common/image/downSangel.png')

}

_this.parent().parent().siblings('.order_content').slideToggle();

},

pinJie: function (datas) {

console.log(datas);

var dataLength = datas.length;

var test = ''

for (var i = 0; i < dataLength; i++) {

test = "<div class='all_content' data-id=" + datas[i].id + ">" +

"<div class='order_title'>" +

"<p>" +

"<span>商品名称:</span>" +

"<span>" + datas[i].shopName + "</span>" +

"<span class='sangleIcon'>" +

"<img src='./_common/image/downSangel.png'>" +

"</span>" +

"</p>" +

"</div>" +

"<div class='order_content'>" +

"<p>" +

"<label>订单号:</label>" +

"<span>" + datas[i].orderId + "</span>" +

"</p>" +

"<p>" +

"<label>规格:</label>" +

"<span>" + datas[i].spec + "</span>" +

"</p>" +

"<p>" +

"<label>价格:</label>" +

"<span>" + datas[i].price + "</span>" +

"</p>" +

"<p>" +

"<label>剩余数量:</label>" +

"<span>" + datas[i].currentNum + "</span>" +

"</p>" +

"<p>" +

"<label>购买数量:</label>" +

"<span>" + datas[i].num + "</span>" +

"</p>" +

"<p>" +

"<label>联系人姓名:</label>" +

"<span>" + datas[i].name + "</span>" +

"</p>" +

"<p>" +

"<label>购买数量:</label>" +

"<span>" + datas[i].phone + "</span>" +

"</p>"+

"</div>"+

"</div>"

if (datas[i].status == 0) {

$('.used').append(test)

}else if(datas[i].status == 1){

$('.nouse').append(test)

}

$('.all').append(test);

}

return test;

}

}