虚拟点餐系统(4)订单界面

<!--pages/order/order.wxml-->
<import src="../common/logo.wxml"></import>
<template is="logo"></template>
<view class="order-tabBox">
  <view id="1" bindtap="tabSelectd" class="{{selected == 1?\'active\':\'\'}}">所有订单</view>
  <view id="2" bindtap="tabSelectd" class="{{selected == 2?\'active\':\'\'}}">待付款</view>
  <view id="3" bindtap="tabSelectd" class="{{selected == 3?\'active\':\'\'}}">待评价</view>
</view>
<view class="order-tabContent">
  <!--所有订单 开始-->
  <scroll-view scroll-y="{{true}}" class="all-order"  wx:if="{{selected == 1}}">
    <view class="all-order-item">
      <view class="p1">
        <text>虚拟餐厅</text>
        <text class="textColorRed">用餐中</text>
      </view>
      <view class="p2">
        <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
      </view>
      <view class="p3">
      <text>共4件 实付金额：</text>
      <text class="textColorBlack">￥38.16</text>
      </view>
      <view class="p4">
        <text class="bgRed">买单</text>
        <text class="bgGreen">加菜</text>
      </view>
    </view>
  </scroll-view>
  <!--所有订单 结束-->
  <!--待付款 开始-->
    <scroll-view scroll-y="{{true}}" class="all-order"  wx:if="{{selected == 2}}">
    <view class="all-order-item">
      <view class="p1">
        <text>虚拟餐厅</text>
        <text class="textColorRed">待付款</text>
      </view>
      <view class="p2">
        <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
      </view>
      <view class="p3">
      <text>共4件 实付金额：</text>
      <text class="textColorBlack">￥38.16</text>
      </view>
      <view class="p4">
        <text class="bgRed">买单</text>
        <text class="bgGreen">加菜</text>
      </view>
    </view>
  </scroll-view>
  <!--待付款 结束-->
  <!--待评价 开始-->
   <scroll-view scroll-y="{{true}}" class="all-order"  wx:if="{{selected == 3}}">
    <view class="all-order-item">
      <view class="p1">
        <text>虚拟餐厅</text>
        <text class="textColorRed">待评价</text>
      </view>
      <view class="p2">
        <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
                <view>
          <image src="/icon/goods-1.png"></image>
          <text>x20</text>
        </view>
      </view>
      <view class="p3">
      <text>共4件 实付金额：</text>
      <text class="textColorBlack">￥38.16</text>
      </view>
      <view class="p4">
        <text class="bgGreen">点评</text>
      </view>
    </view>
  </scroll-view>
  <!--待评价 结束-->
</view>

/* pages/order/order.wxss */
@import "/pages/common/logo.wxss";
.order-tabBox{
  width:100%;
  height:120rpx;
  line-height:120rpx;
  display:flex;
  flex-direction:row;
  justify-content:center;
  border-bottom:1rpx solid #ccc;
}
.order-tabBox view{
  width:30%;
  height:100%;
  text-align:center;
  font-weight:bold;
}

.order-tabBox .active{
  color:#f90;
  border-bottom:1px solid #f90;
}
.order-tabContent{
  width:100%;
  padding:15rpx;
  background:#f7f7f7;
}
.order-tabContent .all-order-item{
  width:96%;
  height:380rpx;
  padding:0 15rpx;
  border-radius:20rpx;
  background:#fff;
  box-sizing:border-box;
}

.order-tabContent .all-order-item .p1{
  width:100%;
  height:80rpx;
  line-height:80rpx;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.order-tabContent .all-order-item .p2{
  width:100%;
  height:150rpx;
  line-height:80rpx;
  display:flex;
  flex-direction:row;
}

.order-tabContent .all-order-item .p2 view{
  width:150rpx;
  height:150rpx;
  margin-right:15rpx;
  position:relative;
}

.order-tabContent .all-order-item .p2 view image{
  width:100%;
  height:100%;
}
.order-tabContent .all-order-item .p2 view text{
  position:absolute;
  right:0;
  bottom:0;
  display:block;
  width:50rpx;
  height:38rpx;
  line-height:38rpx;
  text-align:center;
  font-size:28rpx;
  color:#fff;
  background:rgba(0,0,0,0.5);
}

.order-tabContent .all-order-item .p3{
  width:100%;
  height:60rpx;
  line-height:60rpx;
  text-align:right;
  color:#ccc;
  border-bottom:1rpx solid #ccc;
}

.order-tabContent .all-order-item .p4{
  width:100%;
  height:80rpx;
  color:#fff;
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
}

.order-tabContent .all-order-item .p4 text{
  width:100rpx;
  height:60rpx;
  line-height:60rpx;
  text-align:center;
  display:block;
  border-radius:10rpx;
  margin-left:10rpx;
  margin-top:10rpx;
  color:#fff;
}

.bgRed{
  background:#f00;
}

.bgGreen{
  background:#0a5;
}

.textColorRed{
  color:#f00;
}

.textColorBlack{
  color:#000;
}

// pages/order/order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "selected":1
  },
  tabSelectd:function(e){
    this.setData({"selected":e.target.id});
 },
  .....
})