版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/84879276
//WXML
<!--导航条-->
<view class="navbar">
<lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
<text>{{item}}</text>
</lable>
</view>
<!--全部-->
<view hidden="{{currentTab!==0}}" class='total' style='background-color: #EBEBEB;'>
<view wx:if="{{list.length>0}}">
<!-- 外层 -->
<view class='cont_count' wx:for="{{list}}" wx:key="key">
<!-- 编号 -->
<view class='seria'>
<label class='seriac_name'>
订单编号
<text>{{item.binahao}}</text>
</label>
<!-- 订单状态 -->
<label class='seriac_start'>
{{item.start}}</label>
</view>
<!-- 列表 -->
<view class='list' wx:for="{{item.arry}}" wx:for-item="arr_item" wx:key="key">
<!-- 列表图片 -->
<image class='list_img' src='{{arr_item.image}}'></image>
<!-- 列表标题 -->
<label class='list_name'>
{{arr_item.name}}
</label>
<!-- 列表价格 -->
<label class='list_money'>￥{{arr_item.money}}</label>
</view>
<!-- 计算 -->
<view class='count_eg'>
<!-- 居中 -->
<view class='count_cent'>
<!-- 共两件商品 -->
<label class='cont_cent_name'>
共{{item.cont_count}}件商品
</label>
<!-- 合计 -->
<lable class='cont_cen_money'>
<text class='cont_ce_mon'>合计:￥{{item.count_money}}</text>
</lable>
</view>
</view>
<!-- 标签功能 -->
<view class='coent_list'>
<!-- 取消订单 -->
<label class='coent_del' data-index='{{index}}'>取消订单</label>
<!-- 确认收货 -->
<label class='coent_log_base' data-index='{{index}}'>确认收货</label>
</view>
</view>
</view>
<!-- 否则 -->
<view wx:else>
<!-- 外层 -->
<view class='cont_count'>
<label class='none_tab'>亲,您还暂未下单哦~~</label>
</view>
</view>
</view>
<!--代付款-->
<view hidden="{{currentTab!==1}}">
</view>
<!-- 代发货 -->
<view hidden="{{currentTab!==2}}">
</view>
<!-- 待收货 -->
<view hidden="{{currentTab!==3}}">
<!-- -->
</view>
<!-- 已完成 -->
<view hidden="{{currentTab!==4}}">
</view>//JS
var app = getApp()
Page({
data: {
// 顶部菜单切换
navbar: ['全部', '代付款', "代发货", "待收货", "已完成"],
// 默认选中菜单
currentTab: 0,
index: 0,
pick_name: "",
// list数据
list: [{
binahao: "3124356568797697978",
start: "已发货",
arry: [{
name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
image: "../image/a.jpg",
money: "56",
},
{
name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
image: "../image/a.jpg",
money: "56",
},
],
cont_count: "2",
count_money: "112",
}, {
binahao: "3124356568797697978",
start: "已发货",
arry: [{
name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
image: "../image/a.jpg",
money: "56",
},
{
name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
image: "../image/a.jpg",
money: "56",
},
],
cont_count: "2",
count_money: "112",
}, {
binahao: "3124356568797697978",
start: "已发货",
arry: [{
name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
image: "../image/a.jpg",
money: "56",
},
{
name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
image: "../image/a.jpg",
money: "56",
},
],
cont_count: "2",
count_money: "112",
},
],
},
// 初始化加载
onLoad: function() {
var that = this;
},
//顶部tab切换
navbarTap: function(e) {
this.setData({
currentTab: e.currentTarget.dataset.idx
})
},
})//WXSS
/* 顶部菜单切换 */
.navbar{
display: flex;
background: #fff;
}
.none_tab{
position: relative;
top: 20rpx;
color: #999;
font-size: 32rpx;
}
/* 默认选中菜单 */
.navbar .item{
position: relative;
flex: auto;
font-size: 27rpx;
width: 100rpx;
text-align: center;
line-height: 80rpx;
color: #333;
border-bottom: 6rpx solid #ddd;
}
/* 选中菜单样式 */
.navbar .item.active{
color: #333333;
border-bottom: 6rpx solid #D66058;
}
/* 字体 */
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
}
/* 全部 */
.cont_count{
padding-top: 6rpx;
position: relative;
width: 100%;
text-align: center;
/* height: 620rpx; */
/* border-bottom: 6rpx solid #ddd; */
margin-bottom: 6rpx;
background-color:#fff;
}
/* 编号 */
.seria{
position: relative;
display: inline-block;
width: 90%;
height: 70rpx;
line-height: 70rpx;
/* background-color: yellow; */
border-bottom: 1rpx solid #D4D4D4;
}
/* 订单lab */
.seriac_name{
position: absolute;
font-size: 28rpx;
color: #333;
left: 0rpx;
}
.seriac_name text{
margin-left: 15rpx;
}
/* 订单状态 */
.seriac_start{
position: absolute;
right:0rpx;
color: #999;
font-size: 28rpx;
}
/* 列表 */
.list{
position: relative;
width: 90%;
display: inline-block;
padding-bottom: 10rpx;
height: 200rpx;
}
/* 列表图片 */
.list_img{
position: absolute;
width:144rpx;
height: 144rpx;
left: 0rpx;
top: 30rpx;
}
/* 列表标题 */
.list_name{
position: absolute;
text-align: left;
top: 30rpx;
left: 180rpx;
color: #333333;
width: 350rpx;
font-size: 30rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 列表价格 */
.list_money{
position: absolute;
font-size: 32rpx;
right: 0rpx;
bottom: 30rpx;
}
/* 总和 */
.count_eg{
position: relative;
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 2rpx solid #EBEBEB;
/* background-color: red; */
}
/* 总和居中 */
.count_cent{
position: relative;
width: 90%;
display: inline-block;
height: 90rpx;
line-height: 90rpx;
}
/* 商品数量 */
.cont_cent_name{
position: relative;
font-size: 28rpx;
float: right;
}
.cont_ce_mon{
font-size: 28rpx;
}
/* 总计金额 */
.cont_cen_money{
position: relative;
font-size: 28rpx;
margin-right: 15rpx;
float: right;
}
/* 标签功能 */
.coent_list{
position: relative;
width: 100%;
height: 150rpx;
line-height: 150rpx;
/* border-bottom: 6rpx solid #ddd; */
background-color: #fff;
}
/* 删除 */
.coent_del{
position: absolute;
top: 30%;
right: 270rpx;
display: inline-block;
width: 180rpx;
text-align: center;
height: 56rpx;
border: 1rpx solid #d3d3d3;
font-size: 30rpx;
line-height: 56rpx;
}
/* 取消 */
.coent_log_base{
position: absolute;
top: 30%;
color: darkgoldenrod;
right: 40rpx;
display: inline-block;
width: 180rpx;
height: 56rpx;
text-align: center;
border: 1rpx solid darkgoldenrod;
font-size: 30rpx;
line-height: 56rpx;
}