chelvc-custom/src/PageMine/orderModules/orderReserveSuccess.vue

<template>
  <view class="container">
    <view class="back-icon">
      <u-icon name="arrow-left" color="#000" size="16" @click="handlerBack"></u-icon>
    </view>
    <view class="success-icon-box">
      <view class="icon-img-box">
        <image src="@/static/mine/icon_mine_success.png" class="img"></image>
      </view>
      <view class="icon-type">预约成功</view>
      <view class="icon-explan">商家将为您预留30分钟预约，请您按时到店。</view>
    </view>
    <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="explan-item">
        <view class="item-left">联系方式</view>
        <view class="item-right">18285564342</view>
      </view>
      <view class="explan-item">
        <view class="item-left">预约时间</view>
        <view class="item-right">2024-05-28 13:15:00</view>
      </view>
      <view class="explan-item">
        <view class="item-left">备注</view>
        <view class="item-right">过来的时候可能会晚10多分钟左右</view>
      </view>
    </view>

    <button class="btn">取消预约</button>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handlerBack() {
      uni.switchTab({
        url: '/pages/tabbar/mine/index',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f9f9f9;
}

.container {
  padding: 56rpx 32rpx 0;
  font-size: 28rpx;
  .back-icon {
    margin: 70rpx 0 20rpx;
  }
  .success-icon-box {
    text-align: center;
    margin-bottom: 62rpx;

    .icon-img-box {
      display: flex;
      justify-content: center;

      .img {
        width: 132rpx;
        height: 132rpx;
      }
    }

    .icon-type {
      margin: 16rpx 0;
      font-size: 36rpx;
      font-weight: bold;
    }

    .icon-explan {
      font-size: 24rpx;
      color: #333333;
    }
  }

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

    .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;
    }

    .explan-item {
      margin-bottom: 16rpx;
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      .item-left {
        color: #999999;
      }
      .item-right {
        color: #333333;
      }
    }
  }

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