效果：

wxml页面：

<view class="navTopList">
  <view class="ywc order-info">
    <text class="ywc-txt active">已完成</text>
  </view>
  <view class="dfk order-info">
    <text class="dfk-txt">待付款</text>
  </view>
  <view class="yqx order-info">
    <text class="yqx-txt">已取消</text>
  </view>
</view>

<view bindtap="toOrderDetail" class="orderDetails">
  <view class="orderListTitle">
    <text class="userName">银乐迪量贩KTV</text>
    <text class="orderStatus">交易成功</text>
  </view>
  <view class="orderListDetails">
    <view class="productImg">
      <image src="../../images/bad3.jpg" background-size="cover"></image>
    </view>
    <view class="productInfo">
      <view class="productTitle">09-24 20:30~23:30</view>
      <text class="productPrice">欢乐包1间</text>
    </view>
  </view>
  <view class="productCount">
    <view>
      <text>合计：￥132.00</text>
    </view>
  </view>
</view>

wxss样式：

.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #f3f3f3;
  margin-top:5px;
}

.navTopList .order-info {
  text-align: center;
}

.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}

.navTopList .order-info text {
  font-size: 34rpx;
}

.navTopList .order-info text.active {
  color: #ff6662;
}

.navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
  flex: 1;
}


/*订单列表*/
.orderDetails {
  background: #fff;
  border-bottom: 20rpx solid #f3f3f3;
}

.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left:10px;
}

.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}

.orderListDetails {
  display: flex;
  height: 200rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.orderListDetails .productImg {
  flex: 1;
  height:180rpx;
  width:120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}

.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size:15px;

}

.orderListDetails .productInfo .productTitle {
  font-size:15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom:10px;
}

.productCount {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.productCount>view {
  float: right;
  margin-right: 30rpx;
}