xi_sangzhuzi/pages/book/book.wxml

<view class="top-select">
  <view class="select-box active">
    <image src="../../images/selected-l.png" class="select-l"></image>
    篮球
    <image src="../../images/selected-r.png" class="select-r"></image>
  </view>
  <view class="select-box">
    <image src="../../images/selected-l.png" class="select-l"></image>
    篮球
    <image src="../../images/selected-r.png" class="select-r"></image>
  </view>
  <view class="select-box">
    <image src="../../images/selected-l.png" class="select-l"></image>
    篮球
    <image src="../../images/selected-r.png" class="select-r"></image>
  </view>
</view>
<view class="venue-info">
  <view class="title">营业时间：</view>
  <view class="content">暂无信息</view>
  <view class="title">项目描述：</view>
  <view class="content">暂无信息</view>
  <view class="title">场地设置：</view>
  <view class="content">暂无信息</view>
</view>
<view class="date">
  <view class="date-container">
    <view class="date-box active">2020-01-01</view>
    <view class="date-box">2020-01-01</view>
    <view class="date-box">2020-01-01</view>
  </view>
</view>
<view class="ground">
  <view class="ground-container">
    <view class="ground-box active">
      <image src="../../images/selected-l.png" class="left"></image>
      场地1
      <image src="../../images/selected-r.png" class="right"></image>
    </view>
    <view class="ground-box">
      <image src="../../images/selected-l.png" class="left"></image>
      场地1
      <image src="../../images/selected-r.png" class="right"></image>
    </view>
    <view class="ground-box">
      <image src="../../images/selected-l.png" class="left"></image>
      场地1
      <image src="../../images/selected-r.png" class="right"></image>
    </view>
  </view>
</view>
<view class="time">
  <view class="time-box selected">
    <view>2020-01-01</view>
    <view>12:00-13:00</view>
    <view>15元</view>
  </view>
  <view class="time-box">
    <view>2020-01-01</view>
    <view>12:00-13:00</view>
    <view>15元</view>
  </view>
  <view class="time-box">
    <view>2020-01-01</view>
    <view>12:00-13:00</view>
    <view>15元</view>
  </view>
  <view class="time-box">
    <view>2020-01-01</view>
    <view>12:00-13:00</view>
    <view>15元</view>
  </view>
</view>
<view class="bottom">
  <view class="phone-code">
    <view class="row">
      <view class="row-title">手机号：</view>
      <view class="row-input">
        <input placeholder="请输入手机号"></input>
      </view>
    </view>
    <view class="row">
      <view class="row-title">验证码：</view>
      <view class="row-input">
        <input placeholder="请输入验证码" class="code-input"></input>
        <view class="get-code">获取验证码</view>
      </view>
    </view>
  </view>
  <view class="pay-book">
    <view class="pay" bindtap="doCheckOrder">
      订单金额：10元
    </view>
    <view class="book">
      预定
    </view>
  </view>
</view>
<view class="order-info" bindtap="closeCheckOrder" wx:if="{{checkOrder}}">
  <view class="order-container">
    <view class="order-title">订单信息</view>
    <view class="order">
      <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>
      </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>
  </view>
</view>