<template>
  <view class="container">
    <view class="container-box">
      <view class="title">汽车美容</view>
      <view class="item-box" v-for="(item,index) of 3">
        <view class="item-left">
          <image src="@/static/QR57a.jpg" class="img"></image>
        </view>
        <view class="item-right">
          <view class="right1">水洗轿车</view>
          <view class="right1">X1</view>
          <view class="right2">汽车美容</view>
        </view>
      </view>
    </view>
    <view class="container-box">
      <view class="title">预约信息</view>
      <view class="input-item">
        <view class="item-top">联系方式</view>
        <view class="item-bottom">
          <u--input placeholder="请输入联系方式" border="surround" v-model="value"></u--input>
        </view>
      </view>
      <view class="input-item">
        <view class="item-top">预约时间</view>
        <view class="item-bottom">
          <u--input placeholder="请输入联系方式" border="surround" v-model="value"></u--input>
        </view>
      </view>
      <view class="input-item">
        <view class="item-top">备注</view>
        <view class="item-bottom">
          <u--input placeholder="请输入备注信息" border="surround" v-model="value"></u--input>
        </view>
      </view>
    </view>
    <button class='btn' @click='handlerReserve'>立即预约</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    },
    methods:{
      // 立即预约
      handlerReserve(){
        uni.navigateTo({
          url:'/PageMine/orderModules/orderReserveSuccess'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    background-color: #F9F9F9;
    font-size: 28rpx;

    .container-box {
      padding: 24rpx;
      border-radius: 16rpx;
      background-color: #fff;

      .title {
        margin-bottom: 24rpx;
        font-weight: bold;
      }

      .item-box {
        display: flex;
        margin-bottom: 24rpx;

        .item-left {
          margin-right: 32rpx;

          .img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
          }
        }

        .item-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .right1 {}

          .right2 {
            padding: 2rpx 12rpx;
            background-color: #E9EFF9;
            color: #215EBE;
            border: 2rpx solid #215EBE;
          }
        }
      }

      .item-box:last-child {
        margin: 0;
      }

      .input-item {
        margin-bottom: 24rpx;

        .item-top {
          margin-bottom: 16rpx;
        }
      }
    }

    .btn {
      width: 100%;
      background-color: #215EBE;
      text-align: center;
      color: #fff;
      margin-top:50rpx;
      height:80rpx;
      line-height: 80rpx;
    }
  }
</style>
