直播状态

app.json

@@ -2,9 +2,9 @@
   "pages": [
     "pages/book/book",
     "pages/index/index",
+    "pages/broadcast/broadcast",
     "pages/activityDialog/activityDialog",
     "pages/teamDetail/teamDetail",
-    "pages/broadcast/broadcast",
     "pages/center/center",
     "pages/volunteerRegister/volunteerRegister",
     "pages/volunteer/volunteer",

pages/book/book.js

@@ -5,9 +5,18 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    checkOrder: false
+  },
+  doCheckOrder: function () {
+    this.setData({
+      checkOrder: true
+    })
+  },
+  closeCheckOrder: function () {
+    this.setData({
+      checkOrder: false
+    })
   },
-
   /**
    * 生命周期函数--监听页面加载
    */

pages/book/book.wxml

@@ -88,7 +88,7 @@
     </view>
   </view>
   <view class="pay-book">
-    <view class="pay">
+    <view class="pay" bindtap="doCheckOrder">
       订单金额：10元
     </view>
     <view class="book">
@@ -96,7 +96,7 @@
     </view>
   </view>
 </view>
-<view class="order-info">
+<view class="order-info" bindtap="closeCheckOrder" wx:if="{{checkOrder}}">
   <view class="order-container">
     <view class="order-title">订单信息</view>
     <view class="order">
@@ -105,7 +105,27 @@
           <view>2020-01-01</view>
           <view>12:00-13:00</view>
         </view>
-        <view class="bottom">
+        <view class="bottom-info">
+          <view>场地1</view>
+          <view>15元</view>
+        </view>
+      </view>
+      <view class="order-box">
+        <view class="top">
+          <view>2020-01-01</view>
+          <view>12:00-13:00</view>
+        </view>
+        <view class="bottom-info">
+          <view>场地1</view>
+          <view>15元</view>
+        </view>
+      </view>
+      <view class="order-box">
+        <view class="top">
+          <view>2020-01-01</view>
+          <view>12:00-13:00</view>
+        </view>
+        <view class="bottom-info">
           <view>场地1</view>
           <view>15元</view>
         </view>

pages/book/book.wxss

@@ -189,9 +189,33 @@
 }
 .order-container{
   position: absolute;
-  bottom: 80rpx;
+  bottom: 90rpx;
   left: 30rpx;
   right: 30rpx;
   background: #fff;
   border-radius: 10rpx;
+  padding: 20rpx;
+}
+.order-title{
+  font-size: 30rpx;
+  text-align: center;
+  color: #9F1512;
+}
+.order{
+  margin-top: 20rpx;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+.order-box{
+  border: 1px solid #9F1512;
+  border-radius: 10rpx;
+  text-align: center;
+  display: inline-block;
+  margin-right: 20rpx;
+  font-size: 28rpx;
+  width: 32%;
+}
+.top{
+  background: #9F1512;
+  color: #fff;
 }