效果图
1.wxml
<block wx:for="{{list}}" wx:for-item="list" wx:for-index="idx">
<!-- 订单组list -->
<view style='margin-bottom:10rpx;' data-index="{{idx}}">
<view class="li" data-index="{{idx}}" bindtap='changeToggle'>
<view class="left">
<view class="xuhao">{{idx+1}}</view>
<view class="l-time">时间:{{list.date}}</view>
</view>
<view class="right">
<view class="order-num">{{list.hejiordernum}}单</view>
<view class="order-status" bindtap='startorder' data-id="{{list.id}}" wx:if="{{list.status==0}}">接单</view>
<view class="order-status" wx:if="{{list.status==1}}">配送中</view>
<view class="order-status" wx:if="{{list.status==2}}">已完成</view>
</view>
</view>
<view wx:if="{{list.count>0}}" hidden="{{!selectedFlag[idx]}}">
<view class="b-shadow">
<block wx:for="{{list.listx}}" wx:for-item="listx" wx:for-index="idxx">
<!--批次下面订单明细-->
<view class="oddtail">
<view class="list-rank">
<text class="rank-num">{{idxx+1}}</text>
<view class="rcvinfo">
<view class="infoCont">
<view>收件人:</view>
<view class="imp">{{listx.sname}}</view>
</view>
<view class="infoCont" bindtap='callGk' data-mobile="{{listx.smobile}}">
<view>电话:</view>
<view class="imp">{{listx.smobile}}</view>
</view>
</view>
</view>
<view class="qds">
<view class="qdsCont">
<view class="qds-flex">
<!-- <image src="/static/images/take.png"></image> -->
<view class='qds-take'>取</view>
<view class="qsInfo">{{listx.goodsname}}</view>
</view>
<view class="qds-flex">
<!-- <image src="/static/images/send.png"></image> -->
<view class='qds-send'>送</view>
<view class="qsInfo">{{listx.address}}</view>
</view>
</view>
<view bindtap="puttj" wx:if="{{listx.ispeisong==1}}" data-select="{{listx.id}}" data-id="{{listx.id}}" class=" {{listx.ispeisong==catalogSelect && iids !=listx.id ? 'btn btn-danger block finish':'btn btn-danger active'}}">确定</view>
</view>
</view>
<!--@批次下面订单明细-->
</block>
</view>
</view>
</view>
<!-- end订单组1 -->
</block>
2.WXSS
.li {
background: -moz-linear-gradient(top, #6ed853 0%, #5eb648 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6ed853), color-stop(100%, #5eb648));
background: -webkit-linear-gradient(top, #6ed853 0%, #5eb648 100%);
background: -o-linear-gradient(top, #6ed853 0%, #5eb648 100%);
background: -ms-linear-gradient(top, #6ed853 0%, #5eb648 100%);
display: flex;
justify-content: space-between;
font-size: 34rpx;
width: 92%;
padding: 0 4%;
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.left, .right {
display: flex;
align-items: center;
}
.xuhao {
width: 60rpx;
height: 60rpx;
border: 1px solid #fff;
line-height: 60rpx;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 46rpx;
}
.l-time {
font-size: 28rpx;
color: #fff;
margin-left: 25rpx;
}
.order-num {
color: #fff;
font-size: 44rpx;
margin-right: 20rpx;
}
.order-status {
box-shadow: 1px -1px 5px rgba(34, 25, 25, 0.2) inset;
color: #5eb648;
background: #fff;
border-radius: 6rpx;
height: 60rpx;
line-height: 60rpx;
width: 120rpx;
text-align: center;
font-size: 30rpx;
}
.b-shadow {
box-shadow: 0 0 5px #ddd;
margin: 0 20rpx;
}
.oddtail {
background: #fff;
border-radius: 10rpx;
}
.list-rank {
display: flex;
align-items: center;
font-size: 26rpx;
padding: 0 20rpx;
background: rgb(249, 240, 225);
}
.rcvinfo {
display: flex;
align-items: center;
width: 87%;
justify-content: space-between;
margin: 0 auto;
}
.rcvinfo .infoCont {
display: flex;
padding: 10rpx 0;
align-items: center;
}
........(等等元素内层样式就不一一列出)
3.js
data{
list:[],
selectedFlag: [true],
},
changeToggle: function(e) {
var index = e.currentTarget.dataset.index;
console.log(this.data.selectedFlag[index]);
if (this.data.selectedFlag[index]) {
this.data.selectedFlag[index] = false;
} else {
this.data.selectedFlag[index] = true;
}
this.setData({
selectedFlag: this.data.selectedFlag
})
},
todayordergetList: function() {
var t = this;
t.setData({
loading: !0,
list: []
}), a.get("order/wentnods/get_todaylist", {
page: t.data.page,
ispeisong: t.data.ispeisong
}, function(a) {
t.setData({
list: a.list
});
});
},