订单列表、详情

pages/order/order.js

@@ -0,0 +1,66 @@
+// pages/order/order.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/order/order.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/order/order.wxml

@@ -0,0 +1,30 @@
+<view class="order">
+  <view class="order-box">
+    <view class="order-img">
+      <image src="../../images/center-bg.png"></image>
+    </view>
+    <view class="order-info">
+      <view class="venue-project">
+        <view class="venue">场馆场馆场馆场馆</view>
+        <view class="project">篮球</view>
+      </view>
+      <view class="order-text">订单编号：01010101</view>
+      <view class="order-text">下单时间：2020-01-01</view>
+      <view class="price">￥15元</view>
+    </view>
+  </view>
+  <view class="order-box">
+    <view class="order-img">
+      <image src="../../images/center-bg.png"></image>
+    </view>
+    <view class="order-info">
+      <view class="venue-project">
+        <view class="venue">场馆场馆场馆场馆</view>
+        <view class="project">篮球</view>
+      </view>
+      <view class="order-text">订单编号：01010101</view>
+      <view class="order-text">下单时间：2020-01-01</view>
+      <view class="price">￥15元</view>
+    </view>
+  </view>
+</view>

pages/order/order.wxss

@@ -0,0 +1,48 @@
+.order{
+  padding: 30rpx;
+}
+.order-box{
+  border: 1px solid #DEDEDE;
+  border-radius: 10rpx;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  height: 200rpx;
+  margin-bottom: 20rpx;
+}
+.order-img{
+  width: 35%;
+}
+.order-img image{
+  width: 100%;
+  height: 200rpx;
+}
+.order-info{
+  width: 63%;
+}
+.venue-project{
+  font-size: 32rpx;
+  display: flex;
+  justify-content: space-between;
+  padding: 10rpx;
+}
+.venue{
+  width: 65%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.project{
+  background:rgba(159,21,18,.1);
+  color: #9F1512;
+  padding: 0 10rpx;
+}
+.order-text{
+  font-size: 30rpx;
+  color: #BBBBBB;
+  margin-bottom: 10rpx;
+}
+.price{
+  font-size: 32rpx;
+  color:#9F1512;
+}

pages/orderDetail/orderDetail.wxml

@@ -37,7 +37,7 @@
       <view class="bottom">
         <view>场地1</view>
         <view>15元</view>
-        <view class="cancel">取消预定</view>
+        <view class="time-out">已过期</view>
       </view>
     </view>
     <view class="order-box">
@@ -48,7 +48,7 @@
       <view class="bottom">
         <view>场地1</view>
         <view>15元</view>
-        <view class="cancel">取消预定</view>
+        <view class="time-out">已取消</view>
       </view>
     </view>
     <view class="order-box">

pages/orderDetail/orderDetail.wxss

@@ -83,3 +83,10 @@
   color: #fff;
   font-size: 32rpx;
 }
+.time-out{
+  width: 70%;
+  margin: 0 auto 10rpx;
+  background: rgba(159,21,18,.1);
+  color: #BBBBBB;
+  border-radius: 10rpx;
+}