小程序场地选座、小程序选座、在线选座

//index.js
//获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {

    /**
     * 选中的位置
     */
    list: [],
    /**
     * status 
     * 1 可预订 
     * 2 已售完 
     * 3 已选择
     * 4 我的预订
     * 5 锁定
     * 
     */
    obj: [
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],

      [{
          "status": 2,
          "price": 60
        },
        {
          "status": 5,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],


      [{
          "status": 4,
          "price": 60
        },
        {
          "status": 4,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 2,
          "price": 60
        },
        {
          "status": 5,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 2,
          "price": 60
        },
        {
          "status": 5,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 2,
          "price": 60
        },
        {
          "status": 5,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 2,
          "price": 60
        },
        {
          "status": 5,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 2,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],
      [{
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
        {
          "status": 1,
          "price": 60
        },
      ],

    ],
    time: [
      "8:00",
      "9:00",
      "10:00",
      "11:00",
      "12:00",
      "1:00",
      "2:00",
      "3:00",
      "4:00",
      "5:00",
      "6:00",
      "7:00",
      "8:00",
      "8:00",
      "9:00",
    ],

    area: [
      "1号场",
      "2号场",
      "3号场",
      "4号场",
      "5号场",
      "6号场",
      "7号场",
      "8号场",
      "9号场",
    ],
    /**
     * 场次
     */
    session: [{
        name: 'A场',
        id: 1
      },
      {
        name: 'B场',
        id: 2
      },
      {
        name: 'C场',
        id: 1
      },
      {
        name: 'D场',
        id: 2
      },
      {
        name: 'E场',
        id: 1
      },
      {
        name: 'F场',
        id: 2
      },
      {
        name: 'G场',
        id: 1
      },
      {
        name: 'H场',
        id: 1
      },
    ],
    date: [{
        title: '今天',
        subTitle: '03月14日'
      },
      {
        title: '周五',
        subTitle: '03月15日'
      },
      {
        title: '周六',
        subTitle: '03月16日'
      },
      {
        title: '周日',
        subTitle: '03月17日'
      },
      {
        title: '周一',
        subTitle: '03月18日'
      },
    ],
    submitTitle: '提交订单',
    /**
     * 日期选中
     */
    datePosition: 0,
    /**
     * 场次选中
     */
    sessionPosition: 0,
    /**
     * 上拖动效果越界
     */
    offsetTop: 0,
    /**
     * 做拖动效果越界
     */
    offsetLeft: 0,
    /**
     * 调整左边的滚动条位置
     */
    left: 0,
    /**
     * 调整上的滚动条位置
     */
    top: 0,
    /**
     * 选座区域最小高度
     */
    min: 100,
    /**
     * 选座区域最大高度
     */
    max: 700,

    /**
     * 场地价格
     */
    price: 0,
  },
  /**
   * 确认订单
   */
  confirm: function(e) {
    if (this.data.price <= 0) {
      wx.showToast({
        title: '最少选择1场',
        icon: 'none',
        duration: 2000
      })
      return
    }


    var session = this.data.session[this.data.sessionPosition].name
    var date = this.data.date[this.data.datePosition].subTitle
    // console.log(session)
    // console.log(date)
    // console.log(this.data.list)
    var data = {
      allPrice: this.data.price,
      session: session,
      date: date,
      list: this.data.list
    }
    wx.navigateTo({
      url: '../placeSubmit/placeSubmit?data=' + JSON.stringify(data),
    })
  },
  /**
   * 选择场次
   */
  chooseSession: function(e) {
    var index = parseInt(e.currentTarget.id)
    if (index != this.data.sessionPosition) {
      this.setData({
        sessionPosition: index
      })
    }

  },
  /**
   * 选择日期
   */
  chooseDate: function(e) {
    var index = parseInt(e.currentTarget.id)
    if (index != this.data.datePosition) {
      this.setData({
        datePosition: index
      })
    }
  },
  bindChange: function(e) {
    //  console.log(e) 
    var x = e.detail.x
    var y = e.detail.y
    var offsetTop = 0;
    if (y > 0) {
      offsetTop += y
    }
    var offsetLeft = 0;
    if (x > 0) {
      offsetLeft += x;
    }


    this.setData({
      left: x,
      offsetLeft: offsetLeft,
      offsetTop: offsetTop,
      top: y
    })
  },
  choose: function(e) {
    var p = e.currentTarget.id.split(",")

    var i = parseInt(p[0])
    var j = parseInt(p[1])
    var id = i + ',' + j // 1,2 
    var item = this.data.obj[i][j]

    //    1 可预订 
    //    2 已售完
    //   3 已选择
    //     4 我的预订
    //       5 锁定
    //         
    var status = item.status

    /**
     * 可预订
     */
    if (status == 1) {
      //判断数组长度最多选4个座位
      if (this.data.list.length == 4) {
        wx.showToast({
          title: '最多选择4场',
          icon: 'none',
          duration: 2000
        })
        return
      }
      /**
       * 判断上下是否是靠近的
       * i,j
       * 可以选择
       * 0,0
       * 1,0
       * 不能选择
       * 0,0
       * 1,2
       */

      var arithmeticList = []
      var isAdd = false
      for (var index in this.data.list) {
        var temp = this.data.list[index].id.split(",");
        var x = parseInt(temp[0])
        var y = parseInt(temp[1])
        if (y == j) {
          //判断在一列
          arithmeticList.push(x)

          isAdd = true
        }
      };
      /**
       * 判断等差数列
       */
      if (null != arithmeticList && isAdd && arithmeticList.length > 0) {

        var tempArithmeticList = arithmeticList
        tempArithmeticList.push(i)

        if (!this.isArithmeticList(tempArithmeticList)) {
          wx.showToast({
            title: '请选择两个连续的场地',
            icon: 'none',
            duration: 2000
          })
          return
        }
      }

      item.status = 3
      /**
       * 生成框里的数据
       */
      this.data.list.push({
        price: this.data.obj[i][j].price,
        time: this.data.time[i] + '-' + this.data.time[i + 1],
        area: this.data.session[this.data.sessionPosition].name + this.data.area[j],
        id: id
      })
      /**
       * 计算价格
       */
      var title = this.getTitle(this.data.list)
      this.setData({
        submitTitle: title,
        obj: this.data.obj,
        list: this.data.list
      })
    } else if (status == 3) {

      //i j

      var arithmeticList = []
      var isAdd = false
      for (var index in this.data.list) {
        var temp = this.data.list[index].id.split(",");
        var x = parseInt(temp[0])
        var y = parseInt(temp[1])
        if (y == j && x != i) {
          //判断在一列
          arithmeticList.push(x)
          isAdd = true
        }
      };

      if (null != arithmeticList && isAdd && arithmeticList.length > 0) {



        if (!this.isArithmeticList(arithmeticList)) {
          wx.showToast({
            title: '请选择两个连续的场地',
            icon: 'none',
            duration: 2000
          })
          return
        }
      }

      /**
       * 已选择 取消选择
       */
      item.status = 1

      for (var m = 0; m < this.data.list.length; m++) {

        if (this.data.list[m].id == id) {
          this.data.list.splice(m, 1)
          break;
        }
      }
      /**
       * 计算价格
       */
      var title = this.getTitle(this.data.list)
      this.setData({
        submitTitle: title,
        obj: this.data.obj,
        list: this.data.list
      })
    } else if (status == 2) {

      wx.showToast({
        title: '已售空',
        icon: 'none',
        duration: 2000
      })
    } else if (status == 5) {

      wx.showToast({
        title: '已锁定',
        icon: 'none',
        duration: 2000
      })
    }

  },
  getTitle: function(list) {

    if (list.length <= 0) {
      this.setData({
        price: 0
      })

      return '提交订单'
    }
    this.data.price = 0
    for (var index in list) {
      this.data.price += list[index].price
    }

    this.setData({
      price: this.data.price
    })

    return '￥' + this.data.price + '提交订单'

  },

  /**
   * 判断是否为等差数列
   */
  isArithmeticList: function(list) {
    var tempArithmeticList = this.sortarr(list)

    for (var i = 0; i < tempArithmeticList.length - 1; i++) {
      var res = tempArithmeticList[i + 1] - tempArithmeticList[i]
      if (res < 0) res = res * -1;

      if (res != 1) {
        wx.showToast({
          title: '请选择两个连续的场地',
          icon: 'none',
          duration: 2000
        })
        return false
      }
    }
    return true
  },
  /**
   * 排序
   */
  sortarr: function(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    return arr;
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {


    var h = this.data.time.length
    var w = this.data.area.length

    var offsetH = h * 58 + h * 2
    var offsetW = w * 96 + h * 2
    var currentH = offsetH
    console.log(this.data.obj.length)
    // console.log(offsetH)

    /**
     * 最大宽度
     */
    // if (offsetW < 670) {
    //   offsetW = 670
    // }

    // if (offsetH < this.data.min) {
    //   offsetH = this.data.min
    // }

    /**
     * 设置最高高度
     */
    if (offsetH > this.data.max) {
      // offsetH = this.data.max
      currentH = this.data.max
    }

    this.setData({
      offsetH: offsetH,
      offsetW: offsetW,
      currentH: currentH
    })

  },

})

<wxs module="itema">
  var getTypeByStatus = function(obj) {
    switch (obj.status) {
      case 1:
        return 'reservation'
        break;
      case 2:
        return 'soldout'
        break;
      case 3:
        return 'select'
        break;
      case 4:
        return 'mine'
        break;
      case 5:
        return 'lock'
        break;
    }

  }
  module.exports.getTypeByStatus = getTypeByStatus;
</wxs>
<!--选择时间-->
<scroll-view scroll-x class='date center'>
  <view class='common-flex-row' style='margin-top:5rpx;'>
    <view class='common-flex-row' id='{{index}}' bindtap='chooseDate' wx:for='{{date}}' wx:for-index="index" wx:key='item'>
      <view class="common-flex-column {{datePosition==index?'time-select':'time-unselect'}}">
        <text>{{item.title}}</text>
        <text>{{item.subTitle}}</text>
      </view>
      <view style='width:16rpx;' />
    </view>

  </view>

</scroll-view>
<!--选择时间-->
<!--选择场次-->
<scroll-view scroll-x>
  <view class='common-flex-row session'>
    <view class='common-flex-row' wx:for='{{session}}' wx:for-index="index" wx:key='item'>
      <text class="{{sessionPosition==index?'session-select':'session-unselect'}}" bindtap='chooseSession' id='{{index}}'>{{item.name}}</text>
      <view style='width:80rpx;' />
    </view>
  </view>
</scroll-view>
<!--选择场次-->
<!--中间-->
<view style='padding-top:10rpx;background-color: #f5f5f5;'>
  <view class='item' style='height:{{currentH}}rpx;'>
    <!-- <view class='mask' /> -->
    <!--左边时间-->
    <movable-area class='movable-area-left' style='height:{{currentH}}rpx;'>
      <movable-view animation='' y="{{top}}" direction="vertical" out-of-bounds class='movable-view-left' disabled='false' style='height:{(currentH+100)}}rpx;'>
        <view style='margin:{{offsetTop}}px 0px 0px 0px; '>
          <view style='height:22rpx;' />
          <text class='left' wx:for='{{time}}' wx:key='i'>{{item}}-</text>
        </view>
      </movable-view>
    </movable-area>
    <!--左边时间-->
    <!--右边块-->
    <view class='item-right'>
      <!--上-->
      <movable-area class='movable-area-top'>

        <movable-view animation='' direction="horizontal" out-of-bounds class='movable-view-top' x="{{left}}" disabled='false' style='width: {{(offsetW+100)}}rpx;'>
          <view style='margin-left:{{offsetLeft}}px;' class='item-right-top'>
            <view class='flex-row' wx:key='j' wx:for='{{area}}'>
              <text class='top'>{{item}}</text>
              <view style='width:2rpx;' />
            </view>
          </view>

        </movable-view>
      </movable-area>
      <!--上-->
      <!--下-->
      <view style='height:2rpx;' />

      <movable-area class='movable-area-content' style='height:{{currentH}}rpx;'>
        <movable-view direction="all" out-of-bounds bindchange='bindChange' class='movable-view-content' style='width:{{offsetW}}rpx;height:{{offsetH}}rpx'>
          <view class='flex-row' wx:key='m' wx:for='{{obj}}' wx:for-index='i'>
            <block wx:key='n' wx:for='{{obj[i]}}' wx:for-index='j'>


              <text class='content {{itema.getTypeByStatus(item)}}' wx:if='{{item.status==2}}' bindtap='choose' id='{{i}},{{j}}'></text>

              <view class='lock-big' wx:elif='{{item.status==5}}' bindtap='choose' id='{{i}},{{j}}'>
                <image src='/img/place/lock_big.png' style='width:21rpx;height:28rpx;'></image>
              </view>
              <text bindtap='choose' id='{{i}},{{j}}' class='content {{itema.getTypeByStatus(item)}}' wx:else>￥{{item.price}}</text>


            </block>

          </view>

        </movable-view>

      </movable-area>
      <!--下-->
    </view>
    <!--右边块-->
  </view>
  <view class='flex-row' style='justify-content:space-around;padding-bottom:21rpx;margin-top:21rpx'>

    <view class='flex-row' style='align-items: center;'>
      <view class='reservation' style='width:42rpx;height:26rpx;' />
      <text class='item-text'>可预订</text>
    </view>

    <view class='flex-row' style='align-items: center;'>
      <view class='soldout' style='width:42rpx;height:26rpx;' />
      <text class='item-text'>已售完</text>
    </view>
    <view class='flex-row' style='align-items: center;'>
      <view class='select' style='width:42rpx;height:26rpx;' />
      <text class='item-text'>已选择</text>
    </view>

    <view class='flex-row' style='align-items: center;'>
      <view class='mine' style='width:42rpx;height:26rpx;' />
      <text class='item-text'>我的预订</text>
    </view>

    <view class='flex-row' style='align-items: center;'>
      <view class='lock lock-small'>

        <image src='/img/place/lock_small.png' style='width:12rpx;height:16rpx;'></image>
      </view>
      <text class='item-text'>锁定</text>
    </view>
  </view>

</view>

<!--中间-->
<!-- 选择提醒-->
<text class='tip' wx:if='{{list.length==0}}'>最多可预订4块场地，请尽量保持场次连续</text>
<!-- 选择提醒-->
<!-- 选择列表-->
<view class='common-flex-row' style='margin-left:40rpx;'>
  <view class='common-flex-row' wx:for='{{list}}' wx:key='{{item}}'>
    <view class='common-flex-column list-item'>
      <text>{{item.time}}</text>
      <text>{{item.area}}</text>
    </view>
    <view style='width:24rpx;' />

  </view>
</view>
<!-- 选择列表-->
<!-- 提交订单-->
<view class='common-flex-column center'>
  <text class='confirm' bindtap='confirm'>{{submitTitle}}</text>
  <view style='height:24rpx;' />
</view>
<!-- 提交订单-->

/**index.wxss**/

page {
  width: 100%;
}

.mask {
  position: fixed;
  width: 80rpx;
  height: 29rpx;
  z-index: 99;
  background-color: #f5f5f5;
}

.left {
  display: flex;
  font-size: 22rpx;
  align-items: center;
  justify-content: center;
  height: 58rpx;
  width: 96rpx;
  color: #101010;
  margin: 0rpx 2rpx 2rpx 0rpx;
}

.content {
  display: flex;
  font-size: 22rpx;
  align-items: center;
  justify-content: center;
  height: 58rpx;
  width: 96rpx;
  color: #fff;
  margin: 0rpx 2rpx 2rpx 0rpx;
  background-color: #4cae62;
}

.top {
  display: flex;
  font-size: 22rpx;
  align-items: center;
  justify-content: center;
  height: 58rpx;
  width: 96rpx;
  color: #131313;
}

.item {
  width: 100%;
  display: flex;
  height: 700rpx;
  flex-direction: row;
  background-color: #f5f5f5;
}

.item-right {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.item-right-top {
  width: 100%;
  height: 58rpx;
  display: flex;
  flex-direction: row;
}

.movable-view-left {
  display: flex;
  flex-direction: column;
  color: #fff;
  width: 96rpx;
  /** 调高 可以有上拉的空间*/
  height: 1200rpx;
}

.movable-area-left {
  height: 700rpx;
  width: 96rpx;
  overflow: hidden;
}

.movable-view-top {
  display: flex;
  flex-direction: column;
  /** 调宽 可以有右拉的空间*/
  width: 1750rpx;
  height: 58rpx;
}

.movable-area-top {
  height: 58rpx;
  width: 670rpx;
  overflow: hidden;
}

.movable-view-content {
  display: flex;
  flex-direction: column;
  /**动态修改 内容区的宽高**/
  width: 1568rpx;
  /**动态修改 内容区的宽高**/
  height: 992rpx;
}

.movable-area-content {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.item-text {
  margin-left: 10rpx;
  font-size: 22rpx;
  font-family: PingFang-SC-Regular;
  color: rgba(119, 118, 118, 1);
}

/* * status 
  * 1 可预订 
  * 2 已售完 
  * 3 已选择
  * 4 我的预订
  * 5 锁定*/

/* 已售完 */

.soldout {
  background-color: #cdcdcd;
}

/* 可预订 */

.reservation {
  background-color: #4cae62;
}

/* 已选择 */

.select {
  background-color: #b7c147;
}

/* 我的预订 */

.mine {
  background-color: #f6843b;
}

.lock {
  background-color: #57c2f8;
}

.lock-small {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42rpx;
  height: 26rpx;
}

.lock-big {
  display: flex;
  font-size: 22rpx;
  align-items: center;
  justify-content: center;
  height: 58rpx;
  width: 96rpx;
  color: #fff;
  margin: 0rpx 2rpx 2rpx 0rpx;
  background-color: #57c2f8;
}

.session {
  margin-left: 20rpx;
  align-items: center;
  padding-top: 23rpx;
  padding-bottom: 29rpx;
}

.session-select {
  flex-shrink: 0;
  font-size: 28rpx;
  color: rgba(7, 158, 99, 1);
}

.session-unselect {
  flex-shrink: 0;
  font-size: 28rpx;
  color: rgba(33, 33, 33, 1);
}

.time-select {
  width: 182rpx;
  height: 100rpx;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  background: rgba(76, 174, 99, 1);
}

.time-unselect {
  width: 182rpx;
  /* border: 1rpx solid rgb(250, 248, 248); */
  height: 100rpx;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  background: #fff;
 box-shadow:0rpx 0rpx 6rpx 0rpx rgba(220,220,220,1);
}

.time-select text {
  font-size: 28rpx;
  color: #fff;
}

.time-unselect text {
  font-size: 28rpx;
  color: #0d0d0d;
}

.confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 620rpx;
  height: 88rpx;
  background: rgba(183, 193, 71, 1);
  border-radius: 44px;
  color: #fff;
  font-size: 34rpx;
  align-self: center;
}

.list-item {
  width: 148rpx;
  height: 98rpx;
  background: rgba(255, 255, 255, 1);
  border: 2rpx solid rgba(246, 132, 59, 1);
  border-radius: 10rpx;
  align-items: center;
  justify-content: center;
  margin-bottom: 33rpx;
  margin-top: 27rpx;
}

.list-item text {
  color: #f86b24;
  font-size: 22rpx;
}

.tip {
  font-size: 22rpx;
  color: rgba(71, 71, 71, 1);
  align-self: center;
  justify-content: center;
  display: flex;
  margin-top: 25rpx;
  margin-bottom: 95rpx;
}

.center {
  align-items: center;
  justify-content: center;
}

.date {
  display: flex;
  margin-left: 20rpx; 
  margin-top: 75rpx;
 
  height: 110rpx;
}


/* flex column*/

.common-flex-column {
  display: flex;
  flex-direction: column;
}

/* flex row*/

.common-flex-row {
  display: flex;
  flex-direction: row;
}

/* flex 填充布局*/

.common-fill {
  flex: 1;
  display: flex;
}

/* 横线*/

.common-line {
  height: 1rpx;
  background-color: #EFEFEF;
}