【页面案例汇总】微信小程序车辆租赁页面

车辆租赁页面，使用uniapp框架和Vue.js语法。

<template>
  <div class="rental-page">
    <!-- 车辆列表 -->
    <div class="car-list">
      <div v-for="(car, index) in cars" :key="index" class="car-item">
        <img :src="car.image" alt="car-image">
        <div class="car-info">
          <div class="car-title">{{ car.title }}</div>
          <div class="car-price">{{ car.price }}元/天</div>
          <div class="car-description">{{ car.description }}</div>
          <button class="rent-button" @click="handleRent(index)">立即租车</button>
        </div>
      </div>
    </div>
    <!-- 租车弹窗 -->
    <div v-if="showPopup" class="rent-popup">
      <div class="popup-mask" @click="closePopup"></div>
      <div class="popup-content">
        <div class="popup-title">{{ cars[selectedCarIndex].title }} - 租车申请</div>
        <div class="popup-form">
          <div class="form-item">
            <label for="start-date">开始日期：</label>
            <input type="date" id="start-date" v-model="startDate">
          </div>
          <div class="form-item">
            <label for="end-date">结束日期：</label>
            <input type="date" id="end-date" v-model="endDate">
          </div>
          <div class="form-item">
            <label for="name">姓名：</label>
            <input type="text" id="name" v-model="name">
          </div>
          <div class="form-item">
            <label for="phone">联系电话：</label>
            <input type="tel" id="phone" v-model="phone">
          </div>
          <button class="submit-button" @click="submitForm">确认租车</button>
        </div>
      </div>
    </div>
  </div>
</template>

样式代码：

<style>
  .rental-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }
  .car-item {
    display: flex;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
  }
  .car-item img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    margin-right: 10px;
  }
  .car-info {
    display: flex;
    flex-direction: column;
  }
  .car-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .car-price {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .car-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }
  .rent-button {
    padding: 8px 16px;
    font-size: 14px;
    background-color: #007aff;
    color: #fff;
    border-radius: 5px;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .rent-button:hover {
    background-color: #0069d9;
  }
  .rent-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
  .popup-content {
    position: relative;
    width: 400px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 20px;
    z-index: 1;
  }
  .popup-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .form-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
  }
  .form-item label {
    width: 100px;
    font-size: 16px;
  }
  .form-item input {
    flex: 1;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 0px 10px;
    outline: none;
  }
  .submit-button {
    padding: 10px 16px;
    font-size: 14px;
    background-color: #007aff;
    color: #fff;
    border-radius: 5px;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .submit-button:hover {
    background-color: #0069d9;
  }
</style>

脚本代码：

<script>
  export default {
    data() {
      return {
        cars: [
          {
            title: "法拉利 458 Italia",
            image: "https://picsum.photos/120/80?random=1",
            price: 2000,
            description: "红色跑车，0-100公里加速3.4秒",
          },
          {
            title: "保时捷 911 GT3 RS",
            image: "https://picsum.photos/120/80?random=2",
            price: 1800,
            description: "黑色跑车，0-100公里加速3.5秒",
          },
          {
            title: "兰博基尼 Huracan",
            image: "https://picsum.photos/120/80?random=3",
            price: 2500,
            description: "黄色跑车，0-100公里加速3.2秒",
          },
        ],
        showPopup: false,
        selectedCarIndex: -1,
        startDate: "",
        endDate: "",
        name: "",
        phone: "",
      }
    },
    methods: {
      handleRent(index) {
        this.selectedCarIndex = index
        this.showPopup = true
      },
      closePopup() {
        this.showPopup = false
      },
      submitForm() {
        // 省略提交逻辑
        console.log("提交租车表单")
        this.showPopup = false
        this.selectedCarIndex = -1
        this.startDate = ""
        this.endDate = ""
        this.name = ""
        this.phone = ""
        uni.showToast({
          title: "租车成功",
          icon: "success",
        })
      },
    },
  }
</script>

说明：

1. 在data中定义了一个cars数组，包含三种不同的车辆信息。
2. 在每个车辆列表项中显示车辆的图片、标题、价格和简介，并提供一个“立即租车”的按钮。
3. 点击“立即租车”按钮会弹出一个租车申请的弹窗，包含租车日期、姓名和联系电话等表单项。
4. 点击弹窗中的“确认租车”按钮会触发submitForm方法，提交表单并关闭弹窗。
5. 在submitForm方法中，可以添加实际的提交表单逻辑，这里仅仅是输出日志和显示一个提示框。

这个页面是一个简单的示例，可以根据实际需求进行修改和扩展。